Add stories for Home notification component (#13035)

The Home notification component now has a storybook file. This work was
extracted from the `snaps` branch, and was originally implemented in
PR #12860.

The storybook file was enhanced to include more stories demonstrating
each likely usage scenario.

ui/components/app/home-notification/home-notification.component.js

@@ -91,14 +91,55 @@ const HomeNotification = ({
 };
 
 HomeNotification.propTypes = {
+  /**
+   * The text for the "Accept" button. This must be accompanied by the `onAccept` prop.
+   *
+   * The "Accept" button is only rendered if this prop is set.
+   */
   acceptText: PropTypes.node,
+  /**
+   * The text to display alongside the checkbox.
+   *
+   * The checkbox state is passed to the `onIgnore` handler, so this should only be used if the `onIgnore` prop is set.
+   *
+   * The checkbox is only rendered if this prop is set.
+   */
   checkboxText: PropTypes.node,
+  /**
+   * The text to display in the checkbox tooltip.
+   *
+   * The tooltip is only rendered if this prop is set.
+   */
   checkboxTooltipText: PropTypes.node,
+  /**
+   * Custom class names.
+   */
   classNames: PropTypes.array,
+  /**
+   * The notification description.
+   */
   descriptionText: PropTypes.node.isRequired,
+  /**
+   * The text for the "Ignore" button. This must be accompanied by the `onIgnore` prop.
+   *
+   * The "Ignore" button is only rendered if this prop is set.
+   */
   ignoreText: PropTypes.node,
+  /**
+   * The text for the info icon tooltip in the top-right of the notification.
+   *
+   * The info-icon is only rendered if this prop is set.
+   */
   infoText: PropTypes.node,
+  /**
+   * The handler for the "Accept" button. This must be accompanied by the `acceptText` prop.
+   */
   onAccept: PropTypes.func,
+  /**
+   * The handler for the "Ignore" button. This must be accompanied by the `ignoreText` prop.
+   *
+   * If `checkboxText` is set, the checkbox state will be passed to this function as a boolean.
+   */
   onIgnore: PropTypes.func,
 };
 

ui/components/app/home-notification/home-notification.stories.js

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import HomeNotification from './home-notification.component';
+
+export default {
+  title: 'Components/App/HomeNotification',
+  id: __filename,
+  component: HomeNotification,
+  argTypes: {
+    acceptText: {
+      control: 'text',
+    },
+    checkboxText: {
+      control: 'text',
+    },
+    checkboxTooltipText: {
+      control: 'text',
+    },
+    classNames: {
+      control: 'object',
+    },
+    descriptionText: {
+      control: 'text',
+    },
+    ignoreText: {
+      control: 'text',
+    },
+    infoText: {
+      control: 'text',
+    },
+    onAccept: {
+      action: 'onAccept',
+    },
+    onIgnore: {
+      action: 'onIgnore',
+    },
+  },
+};
+
+const Template = (args) => <HomeNotification {...args} />;
+
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  acceptText: 'Accept text',
+  descriptionText: 'Description text',
+  ignoreText: 'Ignore text',
+  infoText: 'Info text',
+};
+
+export const WithIgnoreCheckbox = Template.bind({});
+WithIgnoreCheckbox.storyName = 'WithIgnoreCheckbox';
+WithIgnoreCheckbox.args = {
+  ...DefaultStory.args,
+  checkboxText: "Don't show this again",
+  checkboxTooltipText:
+    'The value of this checkbox is passed to the `onIgnore` function when the ignore button is pressed',
+  descriptionText: 'Description text',
+};
+
+export const OnlyDescription = Template.bind({});
+OnlyDescription.storyName = 'OnlyDescription';
+OnlyDescription.args = {
+  descriptionText: 'Non-Interactive notification.',
+};
+
+export const DescriptionAndInfo = Template.bind({});
+DescriptionAndInfo.storyName = 'DescriptionAndInfo';
+DescriptionAndInfo.args = {
+  descriptionText: 'Non-Interactive notification.',
+  infoText: 'Info text',
+};
+
+export const OnlyAccept = Template.bind({});
+OnlyAccept.storyName = 'OnlyAccept';
+OnlyAccept.args = {
+  acceptText: 'Mandatory Action',
+  descriptionText:
+    "The 'Accept' action for this notification is strongly recommended, so there is no option to dismiss",
+};
+
+export const OnlyIgnore = Template.bind({});
+OnlyIgnore.storyName = 'OnlyIgnore';
+OnlyIgnore.args = {
+  descriptionText: 'This is a dismissable notification.',
+  ignoreText: 'Dismiss',
+};