Feat/15086/add banner severities component (#17307)

* add banner component * update banner styles and tests * fix padding and update snapshot * banner stories id removal * update readme * Update ui/components/component-library/banner/banner.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * banner updates Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
2024-11-22 01:47:00 +01:00 · 2023-01-25 10:39:49 -08:00 · 2023-01-25 10:39:49 -08:00 · ed75dabe57
commit ed75dabe57
parent 23133a2735
12 changed files with 585 additions and 2 deletions
--- a/ui/components/component-library/banner-base/snapshots/banner-base.test.js.snap
+++ b/ui/components/component-library/banner-base/snapshots/banner-base.test.js.snap
@ -3,7 +3,7 @@
 exports[`BannerBase should render bannerbase element correctly 1`] = `
 <div>
  <div
-    class="box mm-banner-base box--padding-3 box--display-inline-flex box--gap-2 box--flex-direction-row box--background-color-background-default box--rounded-sm"
+    class="box mm-banner-base box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-background-default box--rounded-sm"
    data-testid="banner-base"
  >
    <div>
--- a/ui/components/component-library/banner-base/banner-base.js
+++ b/ui/components/component-library/banner-base/banner-base.js
@ -29,11 +29,12 @@ export const BannerBase = ({
  return (
    <Box
      className={classnames('mm-banner-base', className)}
-      display={DISPLAY.INLINE_FLEX}
+      display={DISPLAY.FLEX}
      gap={2}
      backgroundColor={COLORS.BACKGROUND_DEFAULT}
      borderRadius={SIZES.SM}
      padding={3}
+      paddingLeft={2}
      {...props}
    >
      {startAccessory && <>{startAccessory}</>}
@ -68,6 +69,7 @@ export const BannerBase = ({
      {onClose && (
        <ButtonIcon
          className="mm-banner-base__close-button"
+          marginLeft="auto"
          iconName={ICON_NAMES.CLOSE}
          size={SIZES.SM}
          ariaLabel="Close" // TODO: i18n
--- a/ui/components/component-library/banner/README.mdx
+++ b/ui/components/component-library/banner/README.mdx
@ -0,0 +1,139 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Banner } from './banner';
+import { BannerBase } from '..';
+
+# Banner
+
+The `Banner` component is used for inline notifcations and has different colors based on context's severity.
+
+<Canvas>
+  <Story id="components-componentlibrary-banner--default-story" />
+</Canvas>
+
+## Props
+
+The `Banner` 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
+
+<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`.
+
+Optional: `BANNER_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`.
+
+Possible options:
+
+- `SEVERITIES.INFO` Default
+- `SEVERITIES.WARNING`
+- `SEVERITIES.DANGER`
+- `SEVERITIES.SUCCESS`
+
+<Canvas>
+  <Story id="components-componentlibrary-banner--severity" />
+</Canvas>
+
+```jsx
+import { Banner } from '../../component-library';
+import { SEVERITIES } from '../../../helpers/constants/design-system';
+
+<Banner title="Info">
+  This is a demo of severity Info.
+</Banner>
+<Banner severity={SEVERITIES.WARNING} title="Warning">
+  This is a demo of severity Warning.
+</Banner>
+<Banner severity={SEVERITIES.DANGER} title="Danger">
+  This is a demo of severity Danger.
+</Banner>
+<Banner severity={SEVERITIES.SUCCESS} title="Success">
+  This is a demo of severity Success.
+</Banner>
+```
+
+### Title
+
+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" />
+</Canvas>
+
+```jsx
+import { Banner } from '../../component-library';
+
+<Banner title="Title is sentence case no period">
+  Pass only a string through the title prop
+</Banner>;
+```
+
+### 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.
+
+<Canvas>
+  <Story id="components-componentlibrary-banner--children" />
+</Canvas>
+
+```jsx
+import { SIZES } from '../../../helpers/constants/design-system';
+import { Banner } from '../../component-library';
+
+<Banner>
+  {`Description shouldn't repeat title. 1-3 lines. Can contain a `}
+  <ButtonLink size={SIZES.AUTO} href="https://metamask.io/" target="_blank">
+    hyperlink.
+  </ButtonLink>
+</Banner>;
+```
+
+### Action Button Label, onClick, & Props
+
+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" />
+</Canvas>
+
+```jsx
+import { Banner, ICON_NAMES } from '../../component-library';
+
+<Banner
+  title="Action prop demo"
+  actionButtonLabel="Action"
+  actionButtonProps={{
+    icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
+    iconPositionRight: true,
+  }}
+  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>;
+```
+
+### On Close
+
+Use the `onClose` prop to pass a function to the close button. The close button will appear when this prop is used.
+
+Additional props can be passed to the close button with `closeButtonProps`
+
+<Canvas>
+  <Story id="components-componentlibrary-banner--on-close" />
+</Canvas>
+
+```jsx
+import { Banner } from '../../component-library';
+
+<Banner
+  title="onClose demo"
+  onClose={() => console.log('close button clicked')}
+>
+  Click the close button icon to hide this notifcation
+</Banner>;
+```
--- a/ui/components/component-library/banner/snapshots/banner.test.js.snap
+++ b/ui/components/component-library/banner/snapshots/banner.test.js.snap
@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner should render banner 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"
+    data-testid="banner"
+  >
+    <div
+      class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-primary-default"
+      style="mask-image: url('./images/icons/info.svg');"
+    />
+    <div>
+      <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
+      </h5>
+      <p
+        class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
+      >
+        should render banner element correctly
+      </p>
+    </div>
+  </div>
+</div>
+`;
--- a/ui/components/component-library/banner/banner.constants.js
+++ b/ui/components/component-library/banner/banner.constants.js
@ -0,0 +1,8 @@
+import { SEVERITIES } from '../../../helpers/constants/design-system';
+
+export const BANNER_SEVERITIES = {
+  DANGER: SEVERITIES.DANGER,
+  INFO: SEVERITIES.INFO,
+  SUCCESS: SEVERITIES.SUCCESS,
+  WARNING: SEVERITIES.WARNING,
+};
--- a/ui/components/component-library/banner/banner.js
+++ b/ui/components/component-library/banner/banner.js
@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { BannerBase, Icon, ICON_NAMES } from '..';
+
+import {
+  COLORS,
+  SEVERITIES,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+import { BANNER_SEVERITIES } from './banner.constants';
+
+export const Banner = ({
+  children,
+  className,
+  severity = SEVERITIES.INFO,
+  ...props
+}) => {
+  const severityIcon = () => {
+    switch (severity) {
+      case SEVERITIES.DANGER:
+        return {
+          name: ICON_NAMES.DANGER,
+          color: COLORS.ERROR_DEFAULT,
+        };
+      case SEVERITIES.WARNING:
+        return {
+          name: ICON_NAMES.WARNING,
+          color: COLORS.WARNING_DEFAULT,
+        };
+      case SEVERITIES.SUCCESS:
+        return {
+          name: ICON_NAMES.CONFIRMATION,
+          color: COLORS.SUCCESS_DEFAULT,
+        };
+      // Defaults to SEVERITIES.INFO
+      default:
+        return {
+          name: ICON_NAMES.INFO,
+          color: COLORS.PRIMARY_DEFAULT,
+        };
+    }
+  };
+
+  const severityBackground = () => {
+    switch (severity) {
+      case SEVERITIES.DANGER:
+        return COLORS.ERROR_MUTED;
+      case SEVERITIES.WARNING:
+        return COLORS.WARNING_MUTED;
+      case SEVERITIES.SUCCESS:
+        return COLORS.SUCCESS_MUTED;
+      // Defaults to SEVERITIES.INFO
+      default:
+        return COLORS.PRIMARY_MUTED;
+    }
+  };
+
+  return (
+    <BannerBase
+      startAccessory={<Icon size={SIZES.LG} {...severityIcon()} />}
+      backgroundColor={severityBackground()}
+      className={classnames(
+        'mm-banner',
+        {
+          [`mm-banner--severity-${severity}`]:
+            Object.values(BANNER_SEVERITIES).includes(severity),
+        },
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </BannerBase>
+  );
+};
+
+Banner.propTypes = {
+  /**
+   * An additional className to apply to the Banner
+   */
+  className: PropTypes.string,
+  /**
+   * 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)),
+  /**
+   * Banner accepts all the props from BannerBase
+   */
+  ...BannerBase.propTypes,
+};
--- a/ui/components/component-library/banner/banner.scss
+++ b/ui/components/component-library/banner/banner.scss
@ -0,0 +1,16 @@
+.mm-banner {
+  border-left-color: var(--color-primary-default);
+
+  &--severity-danger {
+    border-left-color: var(--color-error-default);
+  }
+
+  &--severity-warning {
+    border-left-color: var(--color-warning-default);
+  }
+
+  &--severity-success {
+    border-left-color: var(--color-success-default);
+  }
+}
+
--- a/ui/components/component-library/banner/banner.stories.js
+++ b/ui/components/component-library/banner/banner.stories.js
@ -0,0 +1,183 @@
+import React from 'react';
+import { useState } from '@storybook/addons';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+  SEVERITIES,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+import Box from '../../ui/box/box';
+import { ICON_NAMES, ButtonLink, ButtonPrimary } from '..';
+import README from './README.mdx';
+import { Banner, BANNER_SEVERITIES } from '.';
+
+const marginSizeControlOptions = [
+  undefined,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  'auto',
+];
+
+export default {
+  title: 'Components/ComponentLibrary/Banner',
+  component: Banner,
+  parameters: {
+    docs: {
+      page: README,
+    },
+    backgrounds: { default: 'alternative' },
+  },
+  argTypes: {
+    severity: {
+      options: Object.values(BANNER_SEVERITIES),
+      control: 'select',
+    },
+    className: {
+      control: 'text',
+    },
+    title: {
+      control: 'text',
+    },
+    children: {
+      control: 'text',
+    },
+    action: {
+      control: 'func',
+    },
+    actionButtonLabel: {
+      control: 'text',
+    },
+    actionButtonOnClick: {
+      control: 'func',
+    },
+    actionButtonProps: {
+      control: 'object',
+    },
+    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 onClose = () => console.log('Banner onClose trigger');
+  return <Banner {...args} onClose={onClose} />;
+};
+
+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 Severity = (args) => {
+  return (
+    <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={3}>
+      <Banner {...args} severity={SEVERITIES.INFO} title="Info">
+        This is a demo of severity Info.
+      </Banner>
+      <Banner {...args} severity={SEVERITIES.WARNING} title="Warning">
+        This is a demo of severity Warning.
+      </Banner>
+      <Banner {...args} severity={SEVERITIES.DANGER} title="Danger">
+        This is a demo of severity Danger.
+      </Banner>
+      <Banner {...args} severity={SEVERITIES.SUCCESS} title="Success">
+        This is a demo of severity Success.
+      </Banner>
+    </Box>
+  );
+};
+
+export const Title = (args) => {
+  return <Banner {...args} />;
+};
+
+Title.args = {
+  title: 'Title is sentence case no period',
+  children: 'Pass only a string through the title prop',
+};
+
+export const Children = (args) => {
+  return (
+    <Banner {...args}>
+      {`Description shouldn't repeat title. 1-3 lines. Can contain a `}
+      <ButtonLink size={SIZES.AUTO} href="https://metamask.io/" target="_blank">
+        hyperlink.
+      </ButtonLink>
+    </Banner>
+  );
+};
+
+export const ActionButton = (args) => {
+  return <Banner {...args} />;
+};
+
+ActionButton.args = {
+  title: 'Action prop demo',
+  actionButtonLabel: 'Action',
+  actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
+  actionButtonProps: {
+    iconName: ICON_NAMES.ARROW_2_RIGHT,
+    iconPositionRight: true,
+  },
+  children:
+    'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',
+};
+
+export const OnClose = (args) => {
+  const [isShown, setShown] = useState(true);
+  const bannerToggle = () => {
+    if (isShown) {
+      console.log('close button clicked');
+    }
+    setShown(!isShown);
+  };
+  return (
+    <>
+      {isShown ? (
+        <Banner {...args} onClose={bannerToggle} />
+      ) : (
+        <ButtonPrimary onClick={bannerToggle}>View Banner</ButtonPrimary>
+      )}
+    </>
+  );
+};
+
+OnClose.args = {
+  title: 'onClose demo',
+  children: 'Click the close button icon to hide this notifcation',
+};
--- a/ui/components/component-library/banner/banner.test.js
+++ b/ui/components/component-library/banner/banner.test.js
@ -0,0 +1,111 @@
+/* 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);
+  });
+});
--- a/ui/components/component-library/banner/index.js
+++ b/ui/components/component-library/banner/index.js
@ -0,0 +1,2 @@
+export { Banner } from './banner';
+export { BANNER_SEVERITIES } from './banner.constants';
--- a/ui/components/component-library/component-library-components.scss
+++ b/ui/components/component-library/component-library-components.scss
@ -27,3 +27,4 @@
@import 'text-field-search/text-field-search';
@import 'form-text-field/form-text-field';
@import 'banner-base/banner-base';
+@import 'banner/banner';
--- a/ui/components/component-library/index.js
+++ b/ui/components/component-library/index.js
@ -37,3 +37,4 @@ export { TextFieldSearch } from './text-field-search';

 // Molecules
 export { BannerBase } from './banner-base';
+export { Banner, BANNER_SEVERITIES } from './banner';