Replaces SEVERITIES const with Severity enum in BannerAlert (#20200)

* Replaces SEVERITIES const with Severity enum in BannerAlert

* Replaced SEVERITIES with Severity in banner-alert.constants.js

* Used BANNER_ALERT_SEVERITIES instead of SEVERITIES in banner-alert.stories.js

* Updated README for usage of Severity instead of SEVERITIES

* Updates to stories and docs link

---------

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/component-library/banner-alert/README.mdx

@@ -22,35 +22,35 @@ The `BannerAlert` accepts all `BannerBase` component props below
 
 ### Severity
 
-Use the `severity` prop and the `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `BannerAlert`.
+Use the `severity` prop and the `Severity` enum from `./ui/helpers/constants/design-system.js` to change the context of `BannerAlert`.
 
-Optional: `BANNER_ALERT_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`.
+Optional: `BANNER_ALERT_SEVERITIES` from `./banner` object can be used instead of `Severity`.
 
 Possible options:
 
-- `SEVERITIES.INFO` Default
+- `Severity.Info` Default
-- `SEVERITIES.WARNING`
+- `Severity.Warning`
-- `SEVERITIES.DANGER`
+- `Severity.Danger`
-- `SEVERITIES.SUCCESS`
+- `Severity.Success`
 
 <Canvas>
-  <Story id="components-componentlibrary-banneralert--severity" />
+  <Story id="components-componentlibrary-banneralert--severity-story" />
 </Canvas>
 
 ```jsx
 import { BannerAlert } from '../../component-library';
-import { SEVERITIES } from '../../../helpers/constants/design-system';
+import { Severity } from '../../../helpers/constants/design-system';
 
 <BannerAlert title="Info">
   This is a demo of severity Info.
 </BannerAlert>
-<BannerAlert severity={SEVERITIES.WARNING} title="Warning">
+<BannerAlert severity={Severity.Warning} title="Warning">
   This is a demo of severity Warning.
 </BannerAlert>
-<BannerAlert severity={SEVERITIES.DANGER} title="Danger">
+<BannerAlert severity={Severity.Danger} title="Danger">
   This is a demo of severity Danger.
 </BannerAlert>
-<BannerAlert severity={SEVERITIES.SUCCESS} title="Success">
+<BannerAlert severity={Severity.Success} title="Success">
   This is a demo of severity Success.
 </BannerAlert>
 ```

ui/components/component-library/banner-alert/banner-alert.constants.js

@@ -1,8 +1,8 @@
-import { SEVERITIES } from '../../../helpers/constants/design-system';
+import { Severity } from '../../../helpers/constants/design-system';
 
 export const BANNER_ALERT_SEVERITIES = {
-  DANGER: SEVERITIES.DANGER,
+  DANGER: Severity.Danger,
-  INFO: SEVERITIES.INFO,
+  INFO: Severity.Info,
-  SUCCESS: SEVERITIES.SUCCESS,
+  SUCCESS: Severity.Success,
-  WARNING: SEVERITIES.WARNING,
+  WARNING: Severity.Warning,
 };

ui/components/component-library/banner-alert/banner-alert.js

@@ -7,34 +7,34 @@ import { BannerBase, Icon, IconName, IconSize } from '..';
 import {
   BackgroundColor,
   IconColor,
-  SEVERITIES,
+  Severity,
 } from '../../../helpers/constants/design-system';
 import { BANNER_ALERT_SEVERITIES } from './banner-alert.constants';
 
 export const BannerAlert = ({
   children,
   className,
-  severity = SEVERITIES.INFO,
+  severity = Severity.Info,
   ...props
 }) => {
   const severityIcon = () => {
     switch (severity) {
-      case SEVERITIES.DANGER:
+      case Severity.Danger:
         return {
           name: IconName.Danger,
           color: IconColor.errorDefault,
         };
-      case SEVERITIES.WARNING:
+      case Severity.Warning:
         return {
           name: IconName.Warning,
           color: IconColor.warningDefault,
         };
-      case SEVERITIES.SUCCESS:
+      case Severity.Success:
         return {
           name: IconName.Confirmation,
           color: IconColor.successDefault,
         };
-      // Defaults to SEVERITIES.INFO
+      // Defaults to Severity.Info
       default:
         return {
           name: IconName.Info,
@@ -45,13 +45,13 @@ export const BannerAlert = ({
 
   const severityBackground = () => {
     switch (severity) {
-      case SEVERITIES.DANGER:
+      case Severity.Danger:
         return BackgroundColor.errorMuted;
-      case SEVERITIES.WARNING:
+      case Severity.Warning:
         return BackgroundColor.warningMuted;
-      case SEVERITIES.SUCCESS:
+      case Severity.Success:
         return BackgroundColor.successMuted;
-      // Defaults to SEVERITIES.INFO
+      // Defaults to Severity.Info
       default:
         return BackgroundColor.primaryMuted;
     }
@@ -84,8 +84,8 @@ BannerAlert.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Use the `severity` prop and the `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `Banner`.
+   * Use the `severity` prop and the `Severity` enum from `./ui/helpers/constants/design-system.js` to change the context of `Banner`.
-   * Possible options: `SEVERITIES.INFO`(Default), `SEVERITIES.WARNING`, `SEVERITIES.DANGER`, `SEVERITIES.SUCCESS`
+   * Possible options: `Severity.Info`(Default), `Severity.Warning`, `Severity.Danger`, `Severity.Success`
    */
   severity: PropTypes.oneOf(Object.values(BANNER_ALERT_SEVERITIES)),
   /**

ui/components/component-library/banner-alert/banner-alert.stories.js

@@ -1,33 +1,17 @@
 import React from 'react';
 import { useState } from '@storybook/addons';
 import {
-  DISPLAY,
+  Display,
-  FLEX_DIRECTION,
+  FlexDirection,
-  SEVERITIES,
   Size,
+  Severity,
 } from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
-import { ButtonLink, ButtonPrimary, IconName } from '..';
-import README from './README.mdx';
-import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
 
-const marginSizeControlOptions = [
+import { ButtonLink, ButtonPrimary, IconName, Box } from '..';
-  undefined,
+
-  0,
+import README from './README.mdx';
-  1,
+
-  2,
+import { BannerAlert } from './banner-alert';
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-  11,
-  12,
-  'auto',
-];
 
 export default {
   title: 'Components/ComponentLibrary/BannerAlert',
@@ -36,12 +20,11 @@ export default {
     docs: {
       page: README,
     },
-    backgrounds: { default: 'alternative' },
   },
   argTypes: {
     severity: {
-      options: Object.values(BANNER_ALERT_SEVERITIES),
       control: 'select',
+      options: Object.values(Severity),
     },
     className: {
       control: 'text',
@@ -55,14 +38,11 @@ export default {
     children: {
       control: 'text',
     },
-    action: {
-      control: 'func',
-    },
     actionButtonLabel: {
       control: 'text',
     },
     actionButtonOnClick: {
-      control: 'func',
+      action: 'actionButtonOnClick',
     },
     actionButtonProps: {
       control: 'object',
@@ -70,95 +50,65 @@ export default {
     onClose: {
       action: 'onClose',
     },
-    marginTop: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginRight: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginBottom: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginLeft: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
   },
 };
 
-export const DefaultStory = (args) => {
+const Template = (args) => <BannerAlert {...args} />;
-  const onClose = () => console.log('BannerAlert onClose trigger');
-  return <BannerAlert {...args} onClose={onClose} />;
-};
 
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
 DefaultStory.args = {
   title: 'Title is sentence case no period',
   children: "Description shouldn't repeat title. 1-3 lines.",
   actionButtonLabel: 'Action',
 };
 
-DefaultStory.storyName = 'Default';
+export const SeverityStory = (args) => {
-
-export const Severity = (args) => {
   return (
-    <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={3}>
+    <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={3}>
-      <BannerAlert {...args} severity={SEVERITIES.INFO} title="Info">
+      <BannerAlert {...args} severity={Severity.Info} title="Info">
         This is a demo of severity Info.
       </BannerAlert>
-      <BannerAlert {...args} severity={SEVERITIES.WARNING} title="Warning">
+      <BannerAlert {...args} severity={Severity.Warning} title="Warning">
         This is a demo of severity Warning.
       </BannerAlert>
-      <BannerAlert {...args} severity={SEVERITIES.DANGER} title="Danger">
+      <BannerAlert {...args} severity={Severity.Danger} title="Danger">
         This is a demo of severity Danger.
       </BannerAlert>
-      <BannerAlert {...args} severity={SEVERITIES.SUCCESS} title="Success">
+      <BannerAlert {...args} severity={Severity.Success} title="Success">
         This is a demo of severity Success.
       </BannerAlert>
     </Box>
   );
 };
+SeverityStory.storyName = 'Severity';
 
-export const Title = (args) => {
+export const Title = Template.bind({});
-  return <BannerAlert {...args} />;
-};
-
 Title.args = {
   title: 'Title is sentence case no period',
   children: 'Pass only a string through the title prop',
 };
 
-export const Description = (args) => {
+export const Description = Template.bind({});
-  return <BannerAlert {...args} />;
-};
-
 Description.args = {
   title: 'Description vs children',
   description:
     'Pass only a string through the description prop or you can use children if the contents require more',
 };
 
-export const Children = (args) => {
+export const Children = Template.bind({});
-  return (
+Children.args = {
-    <BannerAlert {...args}>
+  children: (
+    <>
       {`Description shouldn't repeat title. 1-3 lines. Can contain a `}
-      <ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
+      <ButtonLink size={Size.auto} href="https://metamask.io/" externalLink>
         hyperlink.
       </ButtonLink>
-    </BannerAlert>
+    </>
-  );
+  ),
-};
-
-export const ActionButton = (args) => {
-  return <BannerAlert {...args} />;
 };
 
+export const ActionButton = Template.bind({});
 ActionButton.args = {
   title: 'Action prop demo',
   actionButtonLabel: 'Action',