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 <[email protected]>
MetaMask · Aug 30, 2023 · 9d59ec5 · 9d59ec5
1 parent 8b93092
commit 9d59ec5
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 160 deletions.
diff --git a/ui/components/component-library/banner-tip/README.mdx b/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')}
 >

diff --git a/...tip/__snapshots__/banner-tip.test.js.snap → ...ip/__snapshots__/banner-tip.test.tsx.snap b/...tip/__snapshots__/banner-tip.test.js.snap → ...ip/__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>

diff --git a/ui/components/component-library/banner-tip/banner-tip.constants.ts b/ui/components/component-library/banner-tip/banner-tip.constants.ts
diff --git a/ui/components/component-library/banner-tip/banner-tip.js b/ui/components/component-library/banner-tip/banner-tip.js
diff --git a/...-library/banner-tip/banner-tip.stories.js → ...library/banner-tip/banner-tip.stories.tsx b/...-library/banner-tip/banner-tip.stories.js → ...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>;
+
+const Template: StoryFn<typeof BannerTip> = (args) => <BannerTip {...args} />;
 
-export const DefaultStory = (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,57 +67,50 @@ 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',
   description:
     '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>
     </BannerTip>
   );
 };
 
-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}

diff --git a/...ent-library/banner-tip/banner-tip.test.js → ...nt-library/banner-tip/banner-tip.test.tsx b/...ent-library/banner-tip/banner-tip.test.js → ...nt-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', () => {

diff --git a/ui/components/component-library/banner-tip/banner-tip.tsx b/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>
+  ),
+);