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;
+  }
+}