Feature Description

This issue will focus on creating 5 new <Notice> components which will eventually be replacing similar legacy components in subsequent dependent issues.

Context

<SubtleNotifications> were introduced in the plugin with their "green success" version to replace the larger "Setup success" Banner notification components. However, these notification components eventually had different Warning and Info variants. Some of these variants were created separately and there are multiple versions of each of these components now including some legacy <SettingsNotice> components. The aim of issues 10428 - 10432 and 10484 is to standardise the terminology and component library for all of these old and new similar components to use a newly standardised set defined below.

SuccessNotice

WarningNotice

ErrorNotice

InfoNotice

NewNotice

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A new <Notice /> component should be created, as per the Figma design here: https://www.figma.com/design/Jwd4oWQPtTJ4W9Y6JwMJjJ/Notifications?node-id=1144-3598&p=f&t=b49dPDEOe9pqj4wO-0
• The <Notice /> component should accept a type argument that is restricted to one of the five following values (enforced by PropTypes/TypeScript):
  • <Notice type="success">
  • <Notice type="warning">
  • <Notice type="error">
  • <Notice type="new">
  • <Notice type="info"> ("info" is a sane default type for the Notice, given its neutral attitude/design)
• A new catalog of Notice components stories should be created similar to assets/js/util/type-scale.stories.js that show all the 5 components on a single page.
• The new components should not contain any additional logic (such as persisting/caching dismissals, tracking GA events etc.) and should solely focus on the structure and design. The components that will eventually use these new Notices should be able to wrap that logic around them.

Implementation Brief

• Add new folder: assets/js/components/Notice and place main re-usable components:
  • DismissButton bare-bone button component, with default label Got it, which can be overridden by a prop, and should accept a callback that is invoked on click. Style it to match tertiary button like Got it from Figma
  • CTAButton also a bare-bone button component, with no default label, same props like previous component. Style it to match primary button like Edit settings from Figma
  • Title - base markup for the notice title
  • Description - base markup for the description
• Add assets/js/components/Notice/index.js
  • You can use the part of the markup/structure of assets/js/googlesitekit/notifications/components/layout/SubtleNotification.js as an inspiration
  • Use common core class googlesitekit-notice for the wrapper
  • Include props - type, title, description, className, ctaButton and dismissButton, and children.
    • children should render within the container holding the individual CTAs if passed. So we can render custom CTA's, or change their order, etc where applicable instead of pre-defined individual CTA's
    • Individual CTAs should render using the object properties passed as props: ctaButton and dismissButton if they are passed. So for example: ctaButton={{label: '...', clickCallback: functionName}}, etc
    • className can included the list of class names together with the core googlesitekit-notice class.
    • type (one of "success", "warning", "error", "new", "info"), rendered as an extra class (googlesitekit-notice--{type}) and determine the SVG icon.
    • Also include the correct SVG icon based on the type
    • title and description should accept translatable strings as values
    • New Notice component is purely presentational and should not include business logic like dismiss tracking or analytics
  • Add needed styles matching Figma design for each notice type, and core styles in assets/sass/components/notice/_googlesitekit-notice.scss for basic common style

Test Coverage

• Add assets/js/components/Notice/notice.stories.js which will be used as a catalog to list all notice types
  • See assets/js/util/type-scale.stories.js and assets/js/util/tokens.stories.js for an example
  • You can see the added styles also in storybook/assets/sass/stories/type-scale.scss

QA Brief

• Test the storybook story, confirm that the variants match the referenced Figma design
  • Note there are extra notices added for each variations, this is mostly to verify all extra elements that can be used are appearing as they should, and also to prevent potential regressions on the styles in the future

Changelog entry

• Add new components for notices.