Add callout button components

[techanvil]

Feature Description

As mentioned on Figma, we have a new set of button designs that will be used for CTAs in callouts:

These will be used in callout notifications, for example:

Success notifications:

Warning notifications:

Error notifications:

The requirement for this issue is to create the buttons. Existing notifications will be updated to use the new components in a followup issue or issues.

---

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

Acceptance criteria

• The buttons in the button-1 callouts Figma design should be available to use as a component. This should be as part of the Button component with a callout prop and another prop(s) to set the button style for each specified in Figma.
  • For now, only the versions without the "+" icon should be created.
• These buttons should appear in a Storybook story and in Visual Regression tests.

Implementation Brief

• Update assets/js/googlesitekit/components-gm2/Button.js
  • Include a new props callout - null by default, and calloutStyle - string enum, should accept one of the following primary|warning|error (include it in the propTypes)
  • Add additional OR check for raised class

    site-kit-wp/assets/js/googlesitekit/components-gm2/Button.js

    Line 99 in 3cce2fa

    'mdc-button--raised': ! text && ! tertiary,

    so if callout prop is passed, it does not render this class. This will make it for easier usage, otherwise we would need to pass text prop for every callout button
  • Conditionally include three more classes based on the value of calloutStyle prop, and one for the callout prop. So for the callout, you can use mdc-button--callout and for the style, mdc-button--warning, etc
• Add base .mdc-button--callout styles in assets/sass/vendor/_mdc-button.scss and nest the 3 style variation classes under it to apply different color variations, specific to that class
  • You can borrow some basic styling from .mdc-button--tertiary - but note vertical padding is slightly smaller on callout button then current one for tertiary button, and height is smaller by 8px on callout button, etc.
  • Ensure basic style and interactive ones for all 3 variations match the figma design, referenced in the AC
• Skip the variations with plus icon as mentioned in the AC

Test Coverage

• Add the new button variations to the buttons story assets/js/googlesitekit/components-gm2/Button.stories.js and into the VRT.

QA Brief

• Check the global button component stories file
• Verify that they match the design

Changelog entry

• Add callout buttons.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified the the global button component stories file.
• Tested and compared with Figma design.
• Verified all callout button versions are implemented same as Figma design.

Callout button

Callout Warning

Callout Error Button

Disabled callout

Disabled Warning Callout Button

Disabled Error Callout Button