Create the Audience Creation Success Notice, as a presentational component (i.e. implement the visual design but not the business logic), and add it to Storybook.
This notice should have the following copy: Visitor group created successfully!
It should have a Got it dismissal button.
Implementation Brief
AudienceCreationSuccessNotice component
In assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel directory, create a new file AudienceCreationSuccessNotice.js:
[ ] Create a new functional component, AudienceCreationSuccessNotice, that will be used to render the Audience Creation Success Notice.
[ ] It should be similar to the ErrorNotice component.
[ ] Render the notice with the following structure:
[ ] Render the CheckFill icon on the left side of the notice.
[ ] The notice should have the following copy: Visitor group created successfully!.
[ ] The background color should be #B8E5CA.
[ ] Render the Got it button on the right with the following props:
[ ] The notice should be styled according to the Figma design.
[ ] Add the custom styles in assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-selection-panel.scss.
[ ] Note: The business logic to set the global state and render the notice will be implemented in #8164.
Test Coverage
[ ] Add storybook stories in assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceCreationSuccessNotice.stories.js.
[ ] Add basic test coverage for the AudienceCreationSuccessNotice component in assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceCreationSuccessNotice.test.js.
QA Brief
Open the component in Storybook and compare it to the Figma design.
Feature Description
Create the Audience Creation Success Notice, as a presentational component (i.e. implement the visual design but not the business logic), and add it to Storybook.
See audience creation in the design doc.
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
Implementation Brief
AudienceCreationSuccessNotice
componentIn
assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel
directory, create a new fileAudienceCreationSuccessNotice.js
:AudienceCreationSuccessNotice
, that will be used to render the Audience Creation Success Notice.Visitor group created successfully!
.#B8E5CA
.Got it
button on the right with the following props:children
:Got it
.tertiary
:true
.onClick
handler will be implemented in #8164.#265C3B
.assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-selection-panel.scss
.Test Coverage
assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceCreationSuccessNotice.stories.js
.AudienceCreationSuccessNotice
component inassets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceCreationSuccessNotice.test.js
.QA Brief
develop
.Changelog entry