fix/BannerTip to TS (#20538)

* BannerTip to TS

* removing actionButtonProps control from storybook file

* fixing console errors in storybook

* BannerTip docs fixes, prop fixes and test updates

---------

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

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

@@ -12,14 +12,8 @@ import { BannerBase } from '..';
 
 ## 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`.
@@ -87,12 +81,15 @@ The `children` prop is an alternative to `description` for `BannerTip` when more
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
-import { BannerTip } from '../../component-library';
+import { BannerTip, ButtonLinkSize } 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">
+  <ButtonLink
+    size={ButtonLinkSize.Auto}
+    href="https://metamask.io/"
+    externalLink
+  >
     hyperlink.
   </ButtonLink>
 </BannerTip>;
@@ -113,8 +110,7 @@ import { BannerTip, IconName } from '../../component-library';
   title="Action prop demo"
   actionButtonLabel="Action"
   actionButtonProps={{
-    icon: IconName.Arrow2Right, // TODO: change to iconName
-    iconPositionRight: true,
+    endIconName: IconName.Arrow2Right,
   }}
   actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
 >

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

@@ -7,11 +7,11 @@ exports[`BannerTip should render BannerTip element correctly 1`] = `
     data-testid="bannerTip"
   >
     <div
-      class="box box--display-flex box--flex-direction-row box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--align-items-center"
     >
       <img
         alt="greeting"
-        class="box mm-banner-tip--logo box--flex-direction-row"
+        class="mm-box mm-banner-tip--logo"
         src="images/fox-greeting.png"
       />
     </div>

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

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

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

@@ -1,76 +0,0 @@
-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.object,
-  /**
-   * logoWrapperProps accepts all the props from Box
-   */
-  logoWrapperProps: PropTypes.object,
-  /**
-   * 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.stories.tsx

@@ -1,32 +1,20 @@
 import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
-  Size,
+  Display,
+  FlexDirection,
 } from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
-import { ButtonLink, ButtonPrimary, Icon, IconName } from '..';
+import {
+  ButtonLink,
+  ButtonLinkSize,
+  ButtonPrimary,
+  Box,
+  Icon,
+  IconName,
+} 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,
@@ -44,30 +32,12 @@ export default {
     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' },
-    },
   },
-};
+} as Meta<typeof BannerTip>;
 
-export const DefaultStory = (args) => {
+const Template: StoryFn<typeof BannerTip> = (args) => <BannerTip {...args} />;
+
+export const DefaultStory: StoryFn<typeof BannerTip> = (args) => {
   const onClose = () => console.log('BannerTip onClose trigger');
   return <BannerTip {...args} onClose={onClose} />;
 };
@@ -80,9 +50,9 @@ DefaultStory.args = {
 
 DefaultStory.storyName = 'Default';
 
-export const LogoType = (args) => {
+export const LogoType: StoryFn<typeof BannerTip> = (args) => {
   return (
-    <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={3}>
+    <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={3}>
       <BannerTip
         {...args}
         logoType={BannerTipLogoType.Greeting}
@@ -97,18 +67,14 @@ export const LogoType = (args) => {
   );
 };
 
-export const Title = (args) => {
-  return <BannerTip {...args} />;
-};
+export const Title = Template.bind({});
 
 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} />;
-};
+export const Description = Template.bind({});
 
 Description.args = {
   title: 'Description vs children',
@@ -116,14 +82,14 @@ Description.args = {
     '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: StoryFn<typeof BannerTip> = (args) => {
   return (
     <BannerTip {...args}>
       Description shouldn&apos;t repeat title. 1-3 lines. Can contain a{' '}
       <ButtonLink
-        size={Size.inherit}
+        size={ButtonLinkSize.Inherit}
         href="https://metamask.io/"
-        target="_blank"
+        externalLink
       >
         hyperlink.
       </ButtonLink>
@@ -131,23 +97,20 @@ export const Children = (args) => {
   );
 };
 
-export const ActionButton = (args) => {
-  return <BannerTip {...args} />;
-};
+export const ActionButton = Template.bind({});
 
 ActionButton.args = {
   title: 'Action prop demo',
   actionButtonLabel: 'Action',
   actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
   actionButtonProps: {
-    iconName: IconName.Arrow2Right,
-    iconPositionRight: true,
+    endIconName: IconName.Arrow2Right,
   },
   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) => {
+export const OnClose: StoryFn<typeof BannerTip> = (args) => {
   const [isShown, setShown] = useState(true);
   const bannerTipToggle = () => {
     if (isShown) {
@@ -171,7 +134,7 @@ OnClose.args = {
   children: 'Click the close button icon to hide this notifcation',
 };
 
-export const StartAccessory = (args) => {
+export const StartAccessory: StoryFn<typeof BannerTip> = (args) => {
   return (
     <BannerTip
       {...args}

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

@@ -22,13 +22,19 @@ describe('BannerTip', () => {
       <>
         <BannerTip
           logoType={BannerTipLogoType.Greeting}
-          logoProps={{ 'data-testid': 'banner-tip-greeting' }}
+          logoProps={{
+            'data-testid': 'banner-tip-greeting',
+            className: 'custom-logo-class',
+          }}
         >
           should render BannerTip element correctly
         </BannerTip>
         <BannerTip
           logoType={BannerTipLogoType.Chat}
-          logoProps={{ 'data-testid': 'banner-tip-chat' }}
+          logoProps={{
+            'data-testid': 'banner-tip-chat',
+            className: 'custom-logo-class',
+          }}
         >
           should render BannerTip element correctly
         </BannerTip>
@@ -39,7 +45,9 @@ describe('BannerTip', () => {
     expect(getByTestId('banner-tip-greeting')).toHaveClass(
       'mm-banner-tip--logo',
     );
+    expect(getByTestId('banner-tip-greeting')).toHaveClass('custom-logo-class');
     expect(getByTestId('banner-tip-chat')).toHaveClass('mm-banner-tip--logo');
+    expect(getByTestId('banner-tip-chat')).toHaveClass('custom-logo-class');
   });
 
   it('should render with added classname', () => {

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import classnames from 'classnames';
+import {
+  AlignItems,
+  BorderColor,
+  Display,
+} from '../../../helpers/constants/design-system';
+import { BannerBase, Box } from '..';
+import { BoxProps, PolymorphicRef } from '../box';
+import { BannerBaseProps } from '../banner-base';
+import {
+  BannerTipComponent,
+  BannerTipLogoType,
+  BannerTipProps,
+} from './banner-tip.types';
+
+export const BannerTip: BannerTipComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    {
+      children,
+      className = '',
+      logoType = BannerTipLogoType.Greeting,
+      logoWrapperProps,
+      logoProps,
+      startAccessory,
+      ...props
+    }: BannerTipProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => (
+    <BannerBase
+      ref={ref}
+      startAccessory={
+        startAccessory || (
+          <Box
+            display={Display.Flex}
+            alignItems={AlignItems.center}
+            {...logoWrapperProps}
+          >
+            <Box
+              as="img"
+              src={`images/fox-${logoType}.png`}
+              alt={logoType}
+              {...(logoProps as BoxProps<C>)}
+              className={classnames(
+                'mm-banner-tip--logo',
+                logoProps?.className ?? '',
+              )}
+            />
+          </Box>
+        )
+      }
+      borderColor={BorderColor.borderDefault}
+      className={classnames('mm-banner-tip', className)}
+      {...(props as BannerBaseProps<C>)}
+    >
+      {children}
+    </BannerBase>
+  ),
+);

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { BannerBaseStyleUtilityProps } from '../banner-base/banner-base.types';
+import type { PolymorphicComponentPropWithRef, BoxProps } from '../box';
+
+export enum BannerTipLogoType {
+  Greeting = 'greeting',
+  Chat = 'chat',
+}
+
+export interface BannerTipStyleUtilityProps
+  extends BannerBaseStyleUtilityProps {
+  /**
+   * An additional className to apply to the Banner
+   */
+  className?: 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?: BannerTipLogoType;
+  /**
+   * logoProps accepts all the props from Box
+   */
+  logoProps?: BoxProps<'span'>;
+  /**
+   * logoWrapperProps accepts all the props from Box
+   */
+  logoWrapperProps?: BoxProps<'span'>;
+  /**
+   * The start(default left) content area of BannerBase
+   */
+  startAccessory?: React.ReactNode;
+}
+
+export type BannerTipProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, BannerTipStyleUtilityProps>;
+
+export type BannerTipComponent = <C extends React.ElementType = 'div'>(
+  props: BannerTipProps<C>,
+) => React.ReactElement | null;

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

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

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

@@ -0,0 +1,3 @@
+export { BannerTip } from './banner-tip';
+export { BannerTipLogoType } from './banner-tip.types';
+export type { BannerTipProps } from './banner-tip.types';