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

[techanvil]

Feature Description

Create the Audience Creation 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 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.
• It should have a title with the following copy: Create groups suggested by Site Kit
• It should have an "X" icon in the top right corner.
• It should show a row for each of the "new visitors" and "returning visitors" audiences, displaying their names and descriptions as follows (in line with the values specified in audience configuration in the design doc):
  • Name: New visitors
    • Description: People who visited the site for the first time
  • Name: Returning visitors
    • Description: People who have visited your site at least once before
• Each audience should have a Create CTA button.

Implementation Brief

In assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/constants.js:

• Add a new constant AUDIENCE_CREATION_NOTICE_SLUG with the value audience-segmentation-creation-notice (or an appropriate key value).

AudienceCreationNotice component

In assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel directory, create a new file AudienceCreationNotice.js:

• Create a new functional component, AudienceCreationNotice, that will be used to render the Audience Creation Notice.
• Retrieve the Site Kit created audiences from the getConfigurableAudiences selector. For example, see how this is being filtered AudienceItems component:
  

  site-kit-wp/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItems.js

  Lines 60 to 70 in 8240ccf

  	const [ siteKitAudiences, otherAudiences ] = audiences.reduce(
  	( [ siteKit, other ], audience ) => {
  	if ( audience.audienceType === 'SITE_KIT_AUDIENCE' ) {
  	siteKit.push( audience );
  	} else {
  	other.push( audience );
  	}
  	return [ siteKit, other ];
  	},
  	[ [], [] ] // Initial values.
  	);

• Descriptions for the audiences should be retrieved from SITE_KIT_AUDIENCE_DEFINITIONS.
• Render the notice with the following structure:
  • Reuse the container styles from the AddGroupNotice component.
  • Reuse the styles to align the audience name and description from the SelectionPanel component.
  • Render the close button with the X icon. See how it's being implemented in the SelectionPanelHeader component:
    

    site-kit-wp/assets/js/components/SelectionPanel/SelectionPanelHeader.js

    Lines 39 to 45 in 7ea3bb3

    	<Link
    	className="googlesitekit-selection-panel-header__close"
    	onClick={ onCloseClick }
    	linkButton
    	>
    	<CloseIcon width="15" height="15" />
    	</Link>

  • Pass a callback function that dispatches the dismissItem action with the AUDIENCE_CREATION_NOTICE_SLUG constant to the onClick event of the close button.
  • Render the SpinnerButton component with the following props:
    • children: Create
    • spinnerPosition: SPINNER_POSITION.BEFORE (before).
    • The onClick handler will be implemented in #8164.
• The notice and the CTA buttons 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 conditionally render the notice and create an audience will be implemented in #8164.

Test Coverage

• Add storybook stories in assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceCreationNotice.stories.js.
• Add test coverage for the AudienceCreationNotice component in assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceCreationNotice.test.js.

QA Brief

• Inspect the new AudienceCreationNotice storybook story and confirm it matches designs.

Changelog entry

• Implement the Audience Creation Notice as a component which is visible in Storybook.

[techanvil]

IB ✅

[kelvinballoo]

QA update ⚠️

There were some figma discrepancies found but these can be ignored for now since they are minor.
The only thing I want to flag is that we need to remove the period from the copy: 'Create groups suggested by Site Kit'

Figma copy without period:

Implemented copy with period:

[hussain-t]

Hi @kelvinballoo, I can remove the period as part of 8164 which I just move to CR.

[kelvinballoo]

QA Update ✅

Reviewed the text and the period has been removed now.

This is ready to go. Moving ticket to approval

Other items reviewed as part of this ticket are:

• The notice should follow the Figma design.
• It has a title with the following copy: Create groups suggested by Site Kit
• It has an "X" icon in the top right corner.
• It shows a row for each of the "new visitors" and "returning visitors" audiences, displaying their names and descriptions as follows:
  • Name: New visitors
  • Description: People who visited the site for the first time
  • Name: Returning visitors
  • Description: People who have visited your site at least once before
• Each audience has a Create CTA button