Update BannerAlert component (#17586)

* update button alert component

* update test

* rename Banner to BannerAlert

* remove old banner snapshot

* fix banner alert border left

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

@@ -1,30 +1,30 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { Banner } from './banner';
+import { BannerAlert } from './banner-alert';
 import { BannerBase } from '..';
 
-# Banner
+# BannerAlert
 
-The `Banner` component is used for inline notifcations and has different colors based on context's severity.
+`BannerAlert` is an inline notification that notifies users of important information & sometimes time-sensitive changes.
 
 <Canvas>
-  <Story id="components-componentlibrary-banner--default-story" />
+  <Story id="components-componentlibrary-banneralert--default-story" />
 </Canvas>
 
 ## Props
 
-The `Banner` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+The `BannerAlert` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
 
 <ArgsTable of={Banner} />
 
-The `Banner` accepts all `BannerBase` component props below
+The `BannerAlert` accepts all `BannerBase` component props below
 
 <ArgsTable of={BannerBase} />
 
 ### Severity
 
-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 `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `BannerAlert`.
 
-Optional: `BANNER_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`.
+Optional: `BANNER_ALERT_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`.
 
 Possible options:
 
@@ -34,25 +34,25 @@ Possible options:
 - `SEVERITIES.SUCCESS`
 
 <Canvas>
-  <Story id="components-componentlibrary-banner--severity" />
+  <Story id="components-componentlibrary-banneralert--severity" />
 </Canvas>
 
 ```jsx
-import { Banner } from '../../component-library';
+import { BannerAlert } from '../../component-library';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
-<Banner title="Info">
+<BannerAlert title="Info">
   This is a demo of severity Info.
-</Banner>
+</BannerAlert>
-<Banner severity={SEVERITIES.WARNING} title="Warning">
+<BannerAlert severity={SEVERITIES.WARNING} title="Warning">
   This is a demo of severity Warning.
-</Banner>
+</BannerAlert>
-<Banner severity={SEVERITIES.DANGER} title="Danger">
+<BannerAlert severity={SEVERITIES.DANGER} title="Danger">
   This is a demo of severity Danger.
-</Banner>
+</BannerAlert>
-<Banner severity={SEVERITIES.SUCCESS} title="Success">
+<BannerAlert severity={SEVERITIES.SUCCESS} title="Success">
   This is a demo of severity Success.
-</Banner>
+</BannerAlert>
 ```
 
 ### Title
@@ -60,35 +60,53 @@ import { SEVERITIES } from '../../../helpers/constants/design-system';
 Use the `title` prop to pass a string that is sentence case no period. Use the `titleProps` prop to pass additional props to the `Text` component.
 
 <Canvas>
-  <Story id="components-componentlibrary-banner--title" />
+  <Story id="components-componentlibrary-banneralert--title" />
 </Canvas>
 
 ```jsx
-import { Banner } from '../../component-library';
+import { BannerAlert } from '../../component-library';
 
-<Banner title="Title is sentence case no period">
+<BannerAlert title="Title is sentence case no period">
   Pass only a string through the title prop
-</Banner>;
+</BannerAlert>;
+```
+
+### Description
+
+The `description` is the content area of the `BannerAlert` that must be a string. Description shouldn't repeat title and only 1-3 lines.
+
+If content requires more than a string, see `children` prop below.
+
+<Canvas>
+  <Story id="components-componentlibrary-banneralert--description" />
+</Canvas>
+
+```jsx
+import { BannerAlert } from '../../component-library';
+<BannerAlert
+  title="Description vs children"
+  description="Pass only a string through the description prop or you can use children if the contents require more"
+/>;
 ```
 
 ### Children
 
-The `children` is the description area of the `Banner` that can be a text or react node. Description shouldn't repeat title and only 1-3 lines.
+The `children` prop is an alternative to `description` for `BannerAlert` when more than a string is needed. Children content shouldn't repeat title and only 1-3 lines.
 
 <Canvas>
-  <Story id="components-componentlibrary-banner--children" />
+  <Story id="components-componentlibrary-banneralert--children" />
 </Canvas>
 
 ```jsx
 import { Size } from '../../../helpers/constants/design-system';
-import { Banner } from '../../component-library';
+import { BannerAlert } from '../../component-library';
 
-<Banner>
+<BannerAlert>
   {`Description shouldn't repeat title. 1-3 lines. Can contain a `}
   <ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
     hyperlink.
   </ButtonLink>
-</Banner>;
+</BannerAlert>;
 ```
 
 ### Action Button Label, onClick, & Props
@@ -96,13 +114,13 @@ import { Banner } from '../../component-library';
 Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pass an onClick handler, and `actionButtonProps` prop to pass an object of [ButtonLink props](/docs/components-componentlibrary-buttonlink--default-story) for the action
 
 <Canvas>
-  <Story id="components-componentlibrary-banner--action-button" />
+  <Story id="components-componentlibrary-banneralert--action-button" />
 </Canvas>
 
 ```jsx
-import { Banner, ICON_NAMES } from '../../component-library';
+import { BannerAlert, ICON_NAMES } from '../../component-library';
 
-<Banner
+<BannerAlert
   title="Action prop demo"
   actionButtonLabel="Action"
   actionButtonProps={{
@@ -114,7 +132,7 @@ import { Banner, ICON_NAMES } from '../../component-library';
   Use actionButtonLabel for action text, actionButtonOnClick for the onClick
   handler, and actionButtonProps to pass any ButtonLink prop types such as
   iconName
-</Banner>;
+</BannerAlert>;
 ```
 
 ### On Close
@@ -124,16 +142,16 @@ Use the `onClose` prop to pass a function to the close button. The close button
 Additional props can be passed to the close button with `closeButtonProps`
 
 <Canvas>
-  <Story id="components-componentlibrary-banner--on-close" />
+  <Story id="components-componentlibrary-banneralert--on-close" />
 </Canvas>
 
 ```jsx
-import { Banner } from '../../component-library';
+import { BannerAlert } from '../../component-library';
 
-<Banner
+<BannerAlert
   title="onClose demo"
   onClose={() => console.log('close button clicked')}
 >
   Click the close button icon to hide this notifcation
-</Banner>;
+</BannerAlert>;
 ```

ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Banner should render banner element correctly 1`] = `
+exports[`BannerAlert should render BannerAlert element correctly 1`] = `
 <div>
   <div
-    class="box mm-banner-base mm-banner mm-banner--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
+    class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
-    data-testid="banner"
+    data-testid="bannerAlert"
   >
     <div
       class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-primary-default"
@@ -14,12 +14,12 @@ exports[`Banner should render banner element correctly 1`] = `
       <h5
         class="box mm-text mm-banner-base__title mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
       >
-        Banner test
+        BannerAlert test
       </h5>
       <p
         class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
       >
-        should render banner element correctly
+        should render BannerAlert element correctly
       </p>
     </div>
   </div>

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

@@ -1,6 +1,6 @@
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
-export const BANNER_SEVERITIES = {
+export const BANNER_ALERT_SEVERITIES = {
   DANGER: SEVERITIES.DANGER,
   INFO: SEVERITIES.INFO,
   SUCCESS: SEVERITIES.SUCCESS,

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

@@ -10,9 +10,9 @@ import {
   SEVERITIES,
   Size,
 } from '../../../helpers/constants/design-system';
-import { BANNER_SEVERITIES } from './banner.constants';
+import { BANNER_ALERT_SEVERITIES } from './banner-alert.constants';
 
-export const Banner = ({
+export const BannerAlert = ({
   children,
   className,
   severity = SEVERITIES.INFO,
@@ -64,10 +64,11 @@ export const Banner = ({
       backgroundColor={severityBackground()}
       paddingLeft={2}
       className={classnames(
-        'mm-banner',
+        'mm-banner-alert',
         {
-          [`mm-banner--severity-${severity}`]:
+          [`mm-banner-alert--severity-${severity}`]: Object.values(
-            Object.values(BANNER_SEVERITIES).includes(severity),
+            BANNER_ALERT_SEVERITIES,
+          ).includes(severity),
         },
         className,
       )}
@@ -78,7 +79,7 @@ export const Banner = ({
   );
 };
 
-Banner.propTypes = {
+BannerAlert.propTypes = {
   /**
    * An additional className to apply to the Banner
    */
@@ -87,7 +88,7 @@ Banner.propTypes = {
    * Use the `severity` prop and the `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `Banner`.
    * Possible options: `SEVERITIES.INFO`(Default), `SEVERITIES.WARNING`, `SEVERITIES.DANGER`, `SEVERITIES.SUCCESS`
    */
-  severity: PropTypes.oneOf(Object.values(BANNER_SEVERITIES)),
+  severity: PropTypes.oneOf(Object.values(BANNER_ALERT_SEVERITIES)),
   /**
    * Banner accepts all the props from BannerBase
    */

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

@@ -1,4 +1,4 @@
-.mm-banner {
+.mm-banner-alert {
   border-left: 4px solid var(--color-primary-default);
 
   &--severity-danger {

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

@@ -9,7 +9,7 @@ import {
 import Box from '../../ui/box/box';
 import { ICON_NAMES, ButtonLink, ButtonPrimary } from '..';
 import README from './README.mdx';
-import { Banner, BANNER_SEVERITIES } from '.';
+import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
 
 const marginSizeControlOptions = [
   undefined,
@@ -30,8 +30,8 @@ const marginSizeControlOptions = [
 ];
 
 export default {
-  title: 'Components/ComponentLibrary/Banner',
+  title: 'Components/ComponentLibrary/BannerAlert',
-  component: Banner,
+  component: BannerAlert,
   parameters: {
     docs: {
       page: README,
@@ -40,7 +40,7 @@ export default {
   },
   argTypes: {
     severity: {
-      options: Object.values(BANNER_SEVERITIES),
+      options: Object.values(BANNER_ALERT_SEVERITIES),
       control: 'select',
     },
     className: {
@@ -49,6 +49,9 @@ export default {
     title: {
       control: 'text',
     },
+    description: {
+      control: 'text',
+    },
     children: {
       control: 'text',
     },
@@ -91,8 +94,8 @@ export default {
 };
 
 export const DefaultStory = (args) => {
-  const onClose = () => console.log('Banner onClose trigger');
+  const onClose = () => console.log('BannerAlert onClose trigger');
-  return <Banner {...args} onClose={onClose} />;
+  return <BannerAlert {...args} onClose={onClose} />;
 };
 
 DefaultStory.args = {
@@ -106,24 +109,24 @@ DefaultStory.storyName = 'Default';
 export const Severity = (args) => {
   return (
     <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={3}>
-      <Banner {...args} severity={SEVERITIES.INFO} title="Info">
+      <BannerAlert {...args} severity={SEVERITIES.INFO} title="Info">
         This is a demo of severity Info.
-      </Banner>
+      </BannerAlert>
-      <Banner {...args} severity={SEVERITIES.WARNING} title="Warning">
+      <BannerAlert {...args} severity={SEVERITIES.WARNING} title="Warning">
         This is a demo of severity Warning.
-      </Banner>
+      </BannerAlert>
-      <Banner {...args} severity={SEVERITIES.DANGER} title="Danger">
+      <BannerAlert {...args} severity={SEVERITIES.DANGER} title="Danger">
         This is a demo of severity Danger.
-      </Banner>
+      </BannerAlert>
-      <Banner {...args} severity={SEVERITIES.SUCCESS} title="Success">
+      <BannerAlert {...args} severity={SEVERITIES.SUCCESS} title="Success">
         This is a demo of severity Success.
-      </Banner>
+      </BannerAlert>
     </Box>
   );
 };
 
 export const Title = (args) => {
-  return <Banner {...args} />;
+  return <BannerAlert {...args} />;
 };
 
 Title.args = {
@@ -131,19 +134,29 @@ Title.args = {
   children: 'Pass only a string through the title prop',
 };
 
+export const Description = (args) => {
+  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) => {
   return (
-    <Banner {...args}>
+    <BannerAlert {...args}>
       {`Description shouldn't repeat title. 1-3 lines. Can contain a `}
       <ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
         hyperlink.
       </ButtonLink>
-    </Banner>
+    </BannerAlert>
   );
 };
 
 export const ActionButton = (args) => {
-  return <Banner {...args} />;
+  return <BannerAlert {...args} />;
 };
 
 ActionButton.args = {
@@ -160,7 +173,7 @@ ActionButton.args = {
 
 export const OnClose = (args) => {
   const [isShown, setShown] = useState(true);
-  const bannerToggle = () => {
+  const bannerAlertToggle = () => {
     if (isShown) {
       console.log('close button clicked');
     }
@@ -169,9 +182,11 @@ export const OnClose = (args) => {
   return (
     <>
       {isShown ? (
-        <Banner {...args} onClose={bannerToggle} />
+        <BannerAlert {...args} onClose={bannerAlertToggle} />
       ) : (
-        <ButtonPrimary onClick={bannerToggle}>View Banner</ButtonPrimary>
+        <ButtonPrimary onClick={bannerAlertToggle}>
+          View BannerAlert
+        </ButtonPrimary>
       )}
     </>
   );

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

@@ -0,0 +1,123 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
+
+import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
+
+describe('BannerAlert', () => {
+  it('should render BannerAlert element correctly', () => {
+    const { getByTestId, container } = render(
+      <BannerAlert data-testid="bannerAlert" title="BannerAlert test">
+        should render BannerAlert element correctly
+      </BannerAlert>,
+    );
+    expect(getByTestId('bannerAlert')).toHaveClass('mm-banner-alert');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render with added classname', () => {
+    const { getByTestId } = render(
+      <BannerAlert
+        className="mm-banner-alert--test"
+        data-testid="bannerAlert"
+        title="BannerAlert test"
+      >
+        should render BannerAlert element correctly
+      </BannerAlert>,
+    );
+    expect(getByTestId('bannerAlert')).toHaveClass('mm-banner-alert--test');
+  });
+
+  it('should render with different severity classnames', () => {
+    const { getByTestId } = render(
+      <>
+        <BannerAlert data-testid="info" title="Info">
+          This is a demo of severity Info.
+        </BannerAlert>
+        <BannerAlert
+          data-testid="warning"
+          severity={BANNER_ALERT_SEVERITIES.WARNING}
+          title="Warning"
+        >
+          This is a demo of severity Warning.
+        </BannerAlert>
+        <BannerAlert
+          data-testid="danger"
+          severity={BANNER_ALERT_SEVERITIES.DANGER}
+          title="Danger"
+        >
+          This is a demo of severity Danger.
+        </BannerAlert>
+        <BannerAlert
+          data-testid="success"
+          severity={BANNER_ALERT_SEVERITIES.SUCCESS}
+          title="Success"
+        >
+          This is a demo of severity Success.
+        </BannerAlert>
+      </>,
+    );
+    expect(getByTestId('info')).toHaveClass('mm-banner-alert--severity-info');
+    expect(getByTestId('warning')).toHaveClass(
+      'mm-banner-alert--severity-warning',
+    );
+    expect(getByTestId('danger')).toHaveClass(
+      'mm-banner-alert--severity-danger',
+    );
+    expect(getByTestId('success')).toHaveClass(
+      'mm-banner-alert--severity-success',
+    );
+  });
+
+  it('should render BannerAlert title', () => {
+    const { getByText } = render(
+      <BannerAlert title="BannerAlert title test" />,
+    );
+    expect(getByText('BannerAlert title test')).toHaveClass(
+      'mm-banner-base__title',
+    );
+  });
+
+  it('should render BannerAlert description', () => {
+    const { getByText } = render(
+      <BannerAlert description="BannerAlert description test" />,
+    );
+    expect(getByText('BannerAlert description test')).toBeDefined();
+  });
+
+  it('should render BannerAlert action button', () => {
+    const { getByTestId } = render(
+      <BannerAlert
+        title="Action prop demo"
+        actionButtonLabel="Action"
+        actionButtonProps={{
+          'data-testid': 'action',
+          className: 'mm-banner-base__action',
+        }}
+        actionButtonOnClick={() =>
+          console.log('ButtonLink actionButtonOnClick demo')
+        }
+      >
+        Use actionButtonLabel for action text, actionButtonOnClick for the
+        onClick handler, and actionButtonProps to pass any ButtonLink prop types
+        such as iconName
+      </BannerAlert>,
+    );
+    expect(getByTestId('action')).toHaveClass('mm-banner-base__action');
+  });
+
+  it('should render and fire onClose event', async () => {
+    const onClose = jest.fn();
+    const { user, getByTestId } = renderWithUserEvent(
+      <BannerAlert
+        title="onClose Test"
+        closeButtonProps={{ 'data-testid': 'close-button' }}
+        onClose={onClose}
+      />,
+    );
+    await user.click(getByTestId('close-button'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,2 @@
+export { BannerAlert } from './banner-alert';
+export { BANNER_ALERT_SEVERITIES } from './banner-alert.constants';

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

@@ -1,111 +0,0 @@
-/* eslint-disable jest/require-top-level-describe */
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
-
-import { Banner, BANNER_SEVERITIES } from '.';
-
-describe('Banner', () => {
-  it('should render banner element correctly', () => {
-    const { getByTestId, container } = render(
-      <Banner data-testid="banner" title="Banner test">
-        should render banner element correctly
-      </Banner>,
-    );
-    expect(getByTestId('banner')).toHaveClass('mm-banner');
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render with added classname', () => {
-    const { getByTestId } = render(
-      <Banner
-        className="mm-banner--test"
-        data-testid="banner"
-        title="Banner test"
-      >
-        should render banner element correctly
-      </Banner>,
-    );
-    expect(getByTestId('banner')).toHaveClass('mm-banner--test');
-  });
-
-  it('should render with different severity classnames', () => {
-    const { getByTestId } = render(
-      <>
-        <Banner data-testid="info" title="Info">
-          This is a demo of severity Info.
-        </Banner>
-        <Banner
-          data-testid="warning"
-          severity={BANNER_SEVERITIES.WARNING}
-          title="Warning"
-        >
-          This is a demo of severity Warning.
-        </Banner>
-        <Banner
-          data-testid="danger"
-          severity={BANNER_SEVERITIES.DANGER}
-          title="Danger"
-        >
-          This is a demo of severity Danger.
-        </Banner>
-        <Banner
-          data-testid="success"
-          severity={BANNER_SEVERITIES.SUCCESS}
-          title="Success"
-        >
-          This is a demo of severity Success.
-        </Banner>
-      </>,
-    );
-    expect(getByTestId('info')).toHaveClass('mm-banner--severity-info');
-    expect(getByTestId('warning')).toHaveClass('mm-banner--severity-warning');
-    expect(getByTestId('danger')).toHaveClass('mm-banner--severity-danger');
-    expect(getByTestId('success')).toHaveClass('mm-banner--severity-success');
-  });
-
-  it('should render banner title', () => {
-    const { getByText } = render(<Banner title="Banner title test" />);
-    expect(getByText('Banner title test')).toHaveClass('mm-banner-base__title');
-  });
-
-  it('should render banner description', () => {
-    const { getByText } = render(<Banner>Banner description test</Banner>);
-    expect(getByText('Banner description test')).toBeDefined();
-  });
-
-  it('should render banner action button', () => {
-    const { getByTestId } = render(
-      <Banner
-        title="Action prop demo"
-        actionButtonLabel="Action"
-        actionButtonProps={{
-          'data-testid': 'action',
-          className: 'mm-banner-base__action',
-        }}
-        actionButtonOnClick={() =>
-          console.log('ButtonLink actionButtonOnClick demo')
-        }
-      >
-        Use actionButtonLabel for action text, actionButtonOnClick for the
-        onClick handler, and actionButtonProps to pass any ButtonLink prop types
-        such as iconName
-      </Banner>,
-    );
-    expect(getByTestId('action')).toHaveClass('mm-banner-base__action');
-  });
-
-  it('should render and fire onClose event', async () => {
-    const onClose = jest.fn();
-    const { user, getByTestId } = renderWithUserEvent(
-      <Banner
-        title="onClose Test"
-        closeButtonProps={{ 'data-testid': 'close-button' }}
-        onClose={onClose}
-      />,
-    );
-    await user.click(getByTestId('close-button'));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-});

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

@@ -1,2 +0,0 @@
-export { Banner } from './banner';
-export { BANNER_SEVERITIES } from './banner.constants';

ui/components/component-library/component-library-components.scss

@@ -26,4 +26,4 @@
 @import 'text-field-base/text-field-base';
 @import 'text-field-search/text-field-search';
 @import 'form-text-field/form-text-field';
-@import 'banner/banner';
+@import 'banner-alert/banner-alert';

ui/components/component-library/index.js

@@ -37,4 +37,4 @@ export { TextFieldSearch } from './text-field-search';
 
 // Molecules
 export { BannerBase } from './banner-base';
-export { Banner, BANNER_SEVERITIES } from './banner';
+export { BannerAlert, BANNER_ALERT_SEVERITIES } from './banner-alert';