site-kit-wp: Update the Modal Dialog component for error and confirmation actions (Storybook)

Feature Description

Add the Error Modal to Storybook. See Error modal in design doc.

---

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

Acceptance criteria

• The existing <ModalDialog> component should be modified to look as per the new Audience Segmentation Modals (Figma Mock).
• When on mobile viewport, the corresponding mobile design should be followed.
• All existing uses of the <ModalDialog> component mentioned below should be updated:
  • The Disconnect and Reset Site Kit Modals with the danger property should be styled exactly as per the new Error Modals.
  • The Additional Permissions Required modal should be updated as per this Figma mock.
    • Note however that the primary CTA text should remain as it is, i.e. Proceed.
  • The Confirm Disconnect module modal which has multiple feature lines should be designed as per this Figma mock.
• All Storybook stories for each of the above components should be updated. Any old v5 format stories should be migrated to Storybook v6 stories.

Implementation Brief

• As defined in AC, update the assets/js/components/ModalDialog.js to match the new design. Some of the points to apply:
  • Text alignment is on the left for title and content
  • Buttons are grouped with the right alignment and new spacing between them
  • Buttons order is reversed - handleConfirm comes after handleDialog
  • Modal title can include SVG icon
• Update the modal in components listed in AC, which can be edited respectively in:
  • assets/js/components/UserMenu/index.js and assets/js/components/ResetButton.js
  • assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.js
  • assets/js/components/settings/SettingsActiveModule/ConfirmDisconnect.js

Test Coverage

• Update the edited components stories as defined in AC
  • Additional Permissions Required doesn’t seem to have a story, it can be handy to use this issue to add it
  • stories/reset-button.stories.js uses the old storybook API. Move it to the assets/js/components/ResetButton.stories.js and adapt to the v6 API

QA Brief

• Setup Site Kit
• Verify that modals mentioned in AC are matching the new Figma designs now, on desktop and mobile
• Note: font weight 500 in figma is slightly different how it is rendered in the browser, so slight difference might be noticeable
• To trigger Disconnect modal:
  • Click on the google account menu item in the top right user menu. From the drop down, select Disconnect
• To trigger Reset site kit modal:
  • Go to settings -> admin settings -> reset site kit link
• To trigger Additional Permissions Required modal
  • Setup analytics, go to settings and change property to a - setup a new property option and click apply. It will trigger the modal
• To trigger Confirm Disconnect module modal:
  • Go to settings -> connected services and edit any of the modules. Click on CTA to disconnect the module
• Note, the default width of the modal in figma is 478px, but after discussion with Sigal regarding the icon alignment, it is agreed that it will 590px

Changelog entry

• Implement refreshed UI for the modal dialog component.