Implement the Audience Creation Success Notice as a presentational component (Storybook)

[techanvil]

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

• The Audience Creation Success Notice should be created as a presentational component, implementing the visual design but not the business logic.
• Stories for it should be added to Storybook.
• The notice should follow the Figma design.
• 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:
  • [ ] children: Got it.
  • [ ] tertiary: true.
  • The onClick handler will be implemented in #8164.
  • [ ] The color of the button should be #265C3B.
• [ ] 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.
• Storybook links:
  • develop.

Changelog entry

• N/A

[techanvil]

IB :white_check_mark:

[kelvinballoo]

QA Update ✅

This is verified good.

• The notice follows the Figma design with the copy: Visitor group created successfully!
• There is a Got it dismissal button.
• Following were verified:
  • Icon size
  • Font size, weight and family for copy and button
  • Button size
  • Overall layout and paddings/margins
  • Hover effect
• Viewed on mobile and tablet breakpoints.
• Checked across main desktop browsers (Chrome, Firefox, Safari and Edge)

Moving ticket to approval.