add banner-tip component (#17814)

* add banner-tip component

* set fixed width

* add banner tip props to logo

* fix logo type naming

* update test

* reduce png sizes

* upate type name and add image element test

* updates

* Update ui/components/component-library/banner-tip/banner-tip.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* update BannerTip

* fix text case banner tip

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>

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

@@ -0,0 +1,165 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { BannerTip } from './banner-tip';
+import { BannerBase } from '..';
+
+# BannerTip
+
+`BannerTip` is an inline notification that offers users educational tips, knowledge, and helpful links
+
+<Canvas>
+  <Story id="components-componentlibrary-bannertip--default-story" />
+</Canvas>
+
+## Props
+
+The `BannerTip` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+
+<ArgsTable of={BannerTip} />
+
+The `BannerTip` accepts all `BannerBase` component props below
+
+<ArgsTable of={BannerBase} />
+
+### Logo Type
+
+Use the `logoType` prop with the `BannerTipLogoType` enum from `../../component-library` to change the context of `BannerTip`.
+
+Possible options:
+
+- `BannerTipLogoType.Greeting` Default
+- `BannerTipLogoType.Chat`
+
+<Canvas>
+  <Story id="components-componentlibrary-bannertip--logo-type" />
+</Canvas>
+
+```jsx
+import { BannerTip } from '../../component-library';
+
+<BannerTip logoType={BannerTipLogoType.Greeting}>
+  This is a demo of greeting.
+</BannerTip>
+<BannerTip logoType={BannerTipLogoType.Chat}>
+  This is a demo of chat.
+</BannerTip>
+```
+
+### 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-bannertip--title" />
+</Canvas>
+
+```jsx
+import { BannerTip } from '../../component-library';
+
+<BannerTip title="Title is sentence case no period">
+  Pass only a string through the title prop
+</BannerTip>;
+```
+
+### Description
+
+The `description` is the content area of the `BannerTip` 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-bannertip--description" />
+</Canvas>
+
+```jsx
+import { BannerTip } from '../../component-library';
+<BannerTip
+  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` prop is an alternative to `description` for `BannerTip` when more than a string is needed. Children content shouldn't repeat title and only 1-3 lines.
+
+<Canvas>
+  <Story id="components-componentlibrary-bannertip--children" />
+</Canvas>
+
+```jsx
+import { Size } from '../../../helpers/constants/design-system';
+import { BannerTip } from '../../component-library';
+
+<BannerTip>
+  Description shouldn't repeat title. 1-3 lines. Can contain a
+  <ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
+    hyperlink.
+  </ButtonLink>
+</BannerTip>;
+```
+
+### 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-bannertip--action-button" />
+</Canvas>
+
+```jsx
+import { BannerTip, ICON_NAMES } from '../../component-library';
+
+<BannerTip
+  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
+</BannerTip>;
+```
+
+### 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-bannertip--on-close" />
+</Canvas>
+
+```jsx
+import { BannerTip } from '../../component-library';
+
+<BannerTip
+  title="onClose demo"
+  onClose={() => console.log('close button clicked')}
+>
+  Click the close button icon to hide this notifcation
+</BannerTip>;
+```
+
+### Start Accessory
+
+Use the `startAccessory` prop to pass a ReactNode to the start of the `BannerTip`. This is useful for overriding the defaults defined by `BannerTip`.
+
+<Canvas>
+  <Story id="components-componentlibrary-bannertip--start-accessory" />
+</Canvas>
+
+```jsx
+import { BannerTip } from '../../component-library';
+
+<BannerTip
+  startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
+  title="StartAccessory"
+>
+  This is a demo of startAccessory override.
+</BannerTip>;
+```

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BannerTip should render BannerTip element correctly 1`] = `
+<div>
+  <div
+    class="box mm-banner-base mm-banner-tip box--padding-3 box--display-flex box--gap-2 box--flex-direction-row box--background-color-background-default box--rounded-sm box--border-color-border-default box--border-style-solid box--border-width-1"
+    data-testid="bannerTip"
+  >
+    <div
+      class="box box--display-flex box--flex-direction-row box--align-items-center"
+    >
+      <img
+        alt="greeting"
+        class="box mm-banner-tip--logo box--flex-direction-row"
+        src="images/fox-greeting.png"
+      />
+    </div>
+    <div>
+      <h5
+        class="box mm-text mm-banner-base__title mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
+      >
+        BannerTip test
+      </h5>
+      <p
+        class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
+      >
+        should render BannerTip element correctly
+      </p>
+    </div>
+  </div>
+</div>
+`;

ui/components/component-library/banner-tip/banner-tip.constants.ts

@@ -0,0 +1,4 @@
+export enum BannerTipLogoType {
+  Greeting = 'greeting',
+  Chat = 'chat',
+}

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+  AlignItems,
+  BorderColor,
+  DISPLAY,
+} from '../../../helpers/constants/design-system';
+import Box from '../../ui/box';
+import { BannerBase } from '..';
+import { BannerTipLogoType } from './banner-tip.constants';
+
+export const BannerTip = ({
+  children,
+  className,
+  logoType = BannerTipLogoType.Greeting,
+  logoWrapperProps,
+  logoProps,
+  startAccessory,
+  ...props
+}) => {
+  return (
+    <BannerBase
+      startAccessory={
+        startAccessory || (
+          <Box
+            display={DISPLAY.FLEX}
+            alignItems={AlignItems.center}
+            {...logoWrapperProps}
+          >
+            <Box
+              as="img"
+              className="mm-banner-tip--logo"
+              src={`images/fox-${logoType}.png`}
+              alt={logoType}
+              {...logoProps}
+            />
+          </Box>
+        )
+      }
+      borderColor={BorderColor.borderDefault}
+      className={classnames('mm-banner-tip', className)}
+      {...props}
+    >
+      {children}
+    </BannerBase>
+  );
+};
+
+BannerTip.propTypes = {
+  /**
+   * An additional className to apply to the Banner
+   */
+  className: PropTypes.string,
+  /**
+   * Use the `logoType` prop with the `BannerTipLogoType` enum from `../../component-library` to change the logo image of `BannerTip`.
+   * Possible options: `BannerTipLogoType.Greeting`(Default), `BannerTipLogoType.Chat`,
+   */
+  logoType: PropTypes.oneOf(Object.values(BannerTipLogoType)),
+  /**
+   * logoProps accepts all the props from Box
+   */
+  logoProps: PropTypes.shape(Box.propTypes),
+  /**
+   * logoWrapperProps accepts all the props from Box
+   */
+  logoWrapperProps: PropTypes.shape(Box.propTypes),
+  /**
+   * The start(defualt left) content area of BannerBase
+   */
+  startAccessory: PropTypes.node,
+  /**
+   * BannerTip accepts all the props from BannerBase
+   */
+  ...BannerBase.propTypes,
+};

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

@@ -0,0 +1,5 @@
+.mm-banner-tip {
+  &--logo {
+    width: 60px;
+  }
+}

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

@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+  Size,
+} from '../../../helpers/constants/design-system';
+import Box from '../../ui/box/box';
+import { ButtonLink, ButtonPrimary, Icon, ICON_NAMES } from '..';
+import README from './README.mdx';
+import { BannerTip, BannerTipLogoType } from '.';
+
+const marginSizeControlOptions = [
+  undefined,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  'auto',
+];
+
+export default {
+  title: 'Components/ComponentLibrary/BannerTip',
+  component: BannerTip,
+  parameters: {
+    docs: {
+      page: README,
+    },
+    backgrounds: { default: 'alternative' },
+  },
+  argTypes: {
+    logoType: {
+      options: Object.values(BannerTipLogoType),
+      control: 'select',
+    },
+    className: {
+      control: 'text',
+    },
+    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('BannerTip onClose trigger');
+  return <BannerTip {...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 LogoType = (args) => {
+  return (
+    <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={3}>
+      <BannerTip
+        {...args}
+        logoType={BannerTipLogoType.Greeting}
+        title="Greeting"
+      >
+        This is a demo of greeting.
+      </BannerTip>
+      <BannerTip {...args} logoType={BannerTipLogoType.Chat} title="Chat">
+        This is a demo of chat.
+      </BannerTip>
+    </Box>
+  );
+};
+
+export const Title = (args) => {
+  return <BannerTip {...args} />;
+};
+
+Title.args = {
+  title: 'Title is sentence case no period',
+  children: 'Pass only a string through the title prop',
+};
+
+export const Description = (args) => {
+  return <BannerTip {...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 (
+    <BannerTip {...args}>
+      Description shouldn&apos;t repeat title. 1-3 lines. Can contain a{' '}
+      <ButtonLink
+        size={Size.inherit}
+        href="https://metamask.io/"
+        target="_blank"
+      >
+        hyperlink.
+      </ButtonLink>
+    </BannerTip>
+  );
+};
+
+export const ActionButton = (args) => {
+  return <BannerTip {...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 bannerTipToggle = () => {
+    if (isShown) {
+      console.log('close button clicked');
+    }
+    setShown(!isShown);
+  };
+  return (
+    <>
+      {isShown ? (
+        <BannerTip {...args} onClose={bannerTipToggle} />
+      ) : (
+        <ButtonPrimary onClick={bannerTipToggle}>View BannerTip</ButtonPrimary>
+      )}
+    </>
+  );
+};
+
+OnClose.args = {
+  title: 'onClose demo',
+  children: 'Click the close button icon to hide this notifcation',
+};
+
+export const StartAccessory = (args) => {
+  return (
+    <BannerTip
+      {...args}
+      startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
+      title="StartAccessory"
+      onClose={() => console.log('close button clicked')}
+    >
+      This is a demo of startAccessory override.
+    </BannerTip>
+  );
+};

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

@@ -0,0 +1,105 @@
+/* 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 { BannerTip, BannerTipLogoType } from '.';
+
+describe('BannerTip', () => {
+  it('should render BannerTip element correctly', () => {
+    const { getByTestId, container } = render(
+      <BannerTip data-testid="bannerTip" title="BannerTip test">
+        should render BannerTip element correctly
+      </BannerTip>,
+    );
+    expect(getByTestId('bannerTip')).toHaveClass('mm-banner-tip');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render with different logo types', () => {
+    const { getByTestId } = render(
+      <>
+        <BannerTip
+          logoType={BannerTipLogoType.Greeting}
+          logoProps={{ 'data-testid': 'banner-tip-greeting' }}
+        >
+          should render BannerTip element correctly
+        </BannerTip>
+        <BannerTip
+          logoType={BannerTipLogoType.Chat}
+          logoProps={{ 'data-testid': 'banner-tip-chat' }}
+        >
+          should render BannerTip element correctly
+        </BannerTip>
+      </>,
+    );
+    const imageElement = getByTestId('banner-tip-greeting');
+    expect(imageElement.tagName).toBe('IMG');
+    expect(getByTestId('banner-tip-greeting')).toHaveClass(
+      'mm-banner-tip--logo',
+    );
+    expect(getByTestId('banner-tip-chat')).toHaveClass('mm-banner-tip--logo');
+  });
+
+  it('should render with added classname', () => {
+    const { getByTestId } = render(
+      <BannerTip
+        className="mm-banner-tip--test"
+        data-testid="bannerTip"
+        title="BannerTip test"
+      >
+        should render BannerTip element correctly
+      </BannerTip>,
+    );
+    expect(getByTestId('bannerTip')).toHaveClass('mm-banner-tip--test');
+  });
+
+  it('should render BannerTip title', () => {
+    const { getByText } = render(<BannerTip title="BannerTip title test" />);
+    expect(getByText('BannerTip title test')).toHaveClass(
+      'mm-banner-base__title',
+    );
+  });
+
+  it('should render BannerTip description', () => {
+    const { getByText } = render(
+      <BannerTip description="BannerTip description test" />,
+    );
+    expect(getByText('BannerTip description test')).toBeDefined();
+  });
+
+  it('should render BannerTip action button', () => {
+    const { getByTestId } = render(
+      <BannerTip
+        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
+      </BannerTip>,
+    );
+    expect(getByTestId('action')).toHaveClass('mm-banner-base__action');
+  });
+
+  it('should render and fire onClose event', async () => {
+    const onClose = jest.fn();
+    const { user, getByTestId } = renderWithUserEvent(
+      <BannerTip
+        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-tip/index.js

@@ -0,0 +1,2 @@
+export { BannerTip } from './banner-tip';
+export { BannerTipLogoType } from './banner-tip.constants';

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

@@ -28,3 +28,4 @@
 @import 'text-field-search/text-field-search';
 @import 'form-text-field/form-text-field';
 @import 'banner-alert/banner-alert';
+@import 'banner-tip/banner-tip';

ui/components/component-library/index.js

@@ -35,3 +35,4 @@ export { TextFieldSearch } from './text-field-search';
 // Molecules
 export { BannerBase } from './banner-base';
 export { BannerAlert, BANNER_ALERT_SEVERITIES } from './banner-alert';
+export { BannerTip, BannerTipLogoType } from './banner-tip';