Migrate AvatarIcon (#19107)

Migrate AvatarIcon to TS --------- Co-authored-by: georgewrmarshall <[email protected]>
MetaMask · Jul 26, 2023 · 6e5ab2a · 6e5ab2a
1 parent bfe0323
commit 6e5ab2a
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 217 deletions.
diff --git a/ui/components/component-library/avatar-base/README.mdx b/ui/components/component-library/avatar-base/README.mdx
@@ -14,7 +14,7 @@ The `AvatarBase` is a wrapper component responsible for enforcing dimensions and
 
 ## Props
 
-The `AvatarBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
+The `AvatarBase` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props.
 
 <ArgsTable of={AvatarBase} />
 

diff --git a/ui/components/component-library/avatar-icon/README.mdx b/ui/components/component-library/avatar-icon/README.mdx
@@ -13,7 +13,7 @@ The `AvatarIcon` is an avatar component that renders only an icon inside and is
 
 ## Props
 
-The `AvatarIcon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+The `AvatarIcon` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
 
 <ArgsTable of={AvatarIcon} />
 
@@ -24,33 +24,30 @@ component props
 
 ### Size
 
-Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarIcon`
-
-Optional: `AVATAR_ICON_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
+Use the `size` prop and the `AvatarIconSize` enum to change the size of `AvatarIcon`
 
 Possible sizes include:
 
-- `Size.XS` 16px
-- `Size.SM` 24px
-- `Size.MD` 32px
-- `Size.LG` 40px
-- `Size.XL` 48px
+- `AvatarIconSize.Xs` 16px
+- `AvatarIconSize.Sm` 24px
+- `AvatarIconSize.Md` 32px
+- `AvatarIconSize.Lg` 40px
+- `AvatarIconSize.Xl` 48px
 
-Defaults to `Size.MD`
+Defaults to `AvatarIconSize.Md`
 
 <Canvas>
   <Story id="components-componentlibrary-avataricon--size-story" />
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
-import { AvatarIcon, IconName } from '../ui/component-library';
+import { AvatarIcon, AvatarIconSize } from '../ui/component-library';
 
-    <AvatarIcon {...args} size={Size.XS} />
-    <AvatarIcon {...args} size={Size.SM} />
-    <AvatarIcon {...args} size={Size.MD} />
-    <AvatarIcon {...args} size={Size.LG} />
-    <AvatarIcon {...args} size={Size.XL} />
+    <AvatarIcon {...args} size={AvatarIconSize.Xs} />
+    <AvatarIcon {...args} size={AvatarIconSize.Sm} />
+    <AvatarIcon {...args} size={AvatarIconSize.Md} />
+    <AvatarIcon {...args} size={AvatarIconSize.Lg} />
+    <AvatarIcon {...args} size={AvatarIconSize.Xl} />
 ```
 
 ### Icon Name<span style={{ color: 'red' }}>\*</span>

diff --git a/...on/__snapshots__/avatar-icon.test.js.snap → ...n/__snapshots__/avatar-icon.test.tsx.snap b/...on/__snapshots__/avatar-icon.test.js.snap → ...n/__snapshots__/avatar-icon.test.tsx.snap
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.constants.js b/ui/components/component-library/avatar-icon/avatar-icon.constants.js
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js
diff --git a/...ibrary/avatar-icon/avatar-icon.stories.js → ...brary/avatar-icon/avatar-icon.stories.tsx b/...ibrary/avatar-icon/avatar-icon.stories.js → ...brary/avatar-icon/avatar-icon.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
-  Size,
   AlignItems,
   BackgroundColor,
   IconColor,
@@ -13,25 +13,7 @@ import { Box } from '../box';
 import { IconName } from '..';
 
 import README from './README.mdx';
-import { AvatarIcon, AVATAR_ICON_SIZES } from '.';
-
-const marginSizeControlOptions = [
-  undefined,
-  0,
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-  11,
-  12,
-  'auto',
-];
+import { AvatarIcon, AvatarIconSize } from '.';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarIcon',
@@ -48,7 +30,7 @@ export default {
     },
     size: {
       control: 'select',
-      options: Object.values(AVATAR_ICON_SIZES),
+      options: Object.values(AvatarIconSize),
     },
     backgroundColor: {
       control: 'select',
@@ -61,128 +43,105 @@ 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' },
-    },
   },
   args: {
-    size: Size.MD,
+    size: AvatarIconSize.Md,
+    iconName: IconName.SwapHorizontal,
   },
-};
+} as Meta<typeof AvatarIcon>;
 
-const Template = (args) => {
-  return <AvatarIcon iconName={IconName.SwapHorizontal} {...args} />;
+const Template: StoryFn<typeof AvatarIcon> = (args) => {
+  return <AvatarIcon {...args} />;
 };
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const SizeStory = (args) => (
+export const SizeStory: StoryFn<typeof AvatarIcon> = (args) => (
   <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
-    <AvatarIcon {...args} size={Size.XS} />
-    <AvatarIcon {...args} size={Size.SM} />
-    <AvatarIcon {...args} size={Size.MD} />
-    <AvatarIcon {...args} size={Size.LG} />
-    <AvatarIcon {...args} size={Size.XL} />
+    <AvatarIcon {...args} size={AvatarIconSize.Xs} />
+    <AvatarIcon {...args} size={AvatarIconSize.Sm} />
+    <AvatarIcon {...args} size={AvatarIconSize.Md} />
+    <AvatarIcon {...args} size={AvatarIconSize.Lg} />
+    <AvatarIcon {...args} size={AvatarIconSize.Xl} />
   </Box>
 );
 SizeStory.storyName = 'Size';
 
-SizeStory.args = {
-  iconName: IconName.Confirmation,
-};
-
-export const IconNameStory = (args) => (
+export const IconNameStory: StoryFn<typeof AvatarIcon> = (args) => (
   <Box display={Display.Flex} gap={1}>
     <AvatarIcon
       color={IconColor.primaryDefault}
       backgroundColor={BackgroundColor.primaryMuted}
-      iconName={IconName.SwapHorizontal}
       {...args}
+      iconName={IconName.SwapHorizontal}
     />
     <AvatarIcon
       color={IconColor.successDefault}
       backgroundColor={BackgroundColor.successMuted}
-      iconName={IconName.Confirmation}
       {...args}
+      iconName={IconName.Confirmation}
     />
     <AvatarIcon
       color={IconColor.infoDefault}
       backgroundColor={BackgroundColor.infoMuted}
-      iconName={IconName.Info}
       {...args}
+      iconName={IconName.Info}
     />
     <AvatarIcon
       color={IconColor.warningDefault}
       backgroundColor={BackgroundColor.warningMuted}
-      iconName={IconName.Warning}
       {...args}
+      iconName={IconName.Warning}
     />
     <AvatarIcon
       color={IconColor.errorDefault}
       backgroundColor={BackgroundColor.errorMuted}
-      iconName={IconName.Danger}
       {...args}
+      iconName={IconName.Danger}
     />
   </Box>
 );
 
 IconNameStory.storyName = 'Icon Name';
 
-export const ColorAndBackgroundColor = (args) => (
+export const ColorAndBackgroundColor: StoryFn<typeof AvatarIcon> = (args) => (
   <Box display={Display.Flex} gap={1}>
     <AvatarIcon
       color={IconColor.primaryDefault}
       backgroundColor={BackgroundColor.primaryMuted}
-      iconName={IconName.SwapHorizontal}
       {...args}
+      iconName={IconName.SwapHorizontal}
     />
     <AvatarIcon
       color={IconColor.primaryInverse}
       backgroundColor={BackgroundColor.primaryDefault}
-      iconName={IconName.SwapHorizontal}
       {...args}
+      iconName={IconName.SwapHorizontal}
     />
     <AvatarIcon
       color={IconColor.successDefault}
       backgroundColor={BackgroundColor.successMuted}
-      iconName={IconName.Confirmation}
       {...args}
+      iconName={IconName.Confirmation}
     />
     <AvatarIcon
       color={IconColor.infoDefault}
       backgroundColor={BackgroundColor.infoMuted}
-      iconName={IconName.Info}
       {...args}
+      iconName={IconName.Info}
     />
     <AvatarIcon
       color={IconColor.warningDefault}
       backgroundColor={BackgroundColor.warningMuted}
-      iconName={IconName.Warning}
       {...args}
+      iconName={IconName.Warning}
     />
     <AvatarIcon
       color={IconColor.errorDefault}
       backgroundColor={BackgroundColor.errorMuted}
-      iconName={IconName.Danger}
       {...args}
+      iconName={IconName.Danger}
     />
   </Box>
 );