Migrate AvatarNetwokr

fixing error fix textAlign added AvatarNetworkSize NetworkProps extends BaseProps instead of Boxprops omitted children from base, made name required replace deprecated and fix lint
MetaMask · Jul 20, 2023 · 724efad · 724efad
1 parent 733391a
commit 724efad
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 177 deletions.
diff --git a/...__snapshots__/avatar-network.test.js.snap → ..._snapshots__/avatar-network.test.tsx.snap b/...__snapshots__/avatar-network.test.js.snap → ..._snapshots__/avatar-network.test.tsx.snap
diff --git a/ui/components/component-library/avatar-network/avatar-network.constants.js b/ui/components/component-library/avatar-network/avatar-network.constants.js
diff --git a/ui/components/component-library/avatar-network/avatar-network.js b/ui/components/component-library/avatar-network/avatar-network.js
diff --git a/.../avatar-network/avatar-network.stories.js → ...avatar-network/avatar-network.stories.tsx b/.../avatar-network/avatar-network.stories.js → ...avatar-network/avatar-network.stories.tsx
@@ -1,20 +1,19 @@
 import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
-  Size,
-  DISPLAY,
+  Display,
   TextColor,
   BackgroundColor,
   BorderColor,
-  Color,
   AlignItems,
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box/box';
 
+import { AvatarNetworkSize } from './avatar-network.types';
 import README from './README.mdx';
 
 import { AvatarNetwork } from './avatar-network';
-import { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarNetwork',
@@ -27,7 +26,7 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(AVATAR_NETWORK_SIZES),
+      options: Object.values(AvatarNetworkSize),
     },
     color: {
       options: Object.values(TextColor),
@@ -54,38 +53,38 @@ export default {
   args: {
     name: 'Arbitrum One',
     src: './images/arbitrum.svg',
-    size: Size.MD,
+    size: AvatarNetworkSize.Md,
     showHalo: false,
   },
-};
+} as Meta<typeof AvatarNetwork>;
 
-const Template = (args) => {
+const Template: StoryFn<typeof AvatarNetwork> = (args) => {
   return <AvatarNetwork {...args} />;
 };
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const SizeStory = (args) => (
+export const SizeStory: StoryFn<typeof AvatarNetwork> = (args) => (
   <>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.flexEnd}
       gap={1}
       marginBottom={4}
     >
-      <AvatarNetwork {...args} size={Size.XS} />
-      <AvatarNetwork {...args} size={Size.SM} />
-      <AvatarNetwork {...args} size={Size.MD} />
-      <AvatarNetwork {...args} size={Size.LG} />
-      <AvatarNetwork {...args} size={Size.XL} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Xs} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Sm} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Md} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Lg} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Xl} />
     </Box>
-    <Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={1}>
-      <AvatarNetwork {...args} src="" size={Size.XS} />
-      <AvatarNetwork {...args} src="" size={Size.SM} />
-      <AvatarNetwork {...args} src="" size={Size.MD} />
-      <AvatarNetwork {...args} src="" size={Size.LG} />
-      <AvatarNetwork {...args} src="" size={Size.XL} />
+    <Box display={Display.Flex} alignItems={AlignItems.flexEnd} gap={1}>
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Xs} />
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Sm} />
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Md} />
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Lg} />
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Xl} />
     </Box>
   </>
 );
@@ -96,8 +95,8 @@ Name.args = {
   src: '',
 };
 
-export const Src = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+export const Src: StoryFn<typeof AvatarNetwork> = (args) => (
+  <Box display={Display.Flex} gap={1}>
     <AvatarNetwork {...args} src="./images/matic-token.png" />
     <AvatarNetwork {...args} src="./images/arbitrum.svg" />
     <AvatarNetwork {...args} src="./images/optimism.svg" />
@@ -115,21 +114,23 @@ ShowHalo.args = {
   showHalo: true,
 };
 
-export const ColorBackgroundColorAndBorderColor = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+export const ColorBackgroundColorAndBorderColor: StoryFn<
+  typeof AvatarNetwork
+> = (args) => (
+  <Box display={Display.Flex} gap={1}>
     <AvatarNetwork
       {...args}
       backgroundColor={BackgroundColor.goerli}
       borderColor={BorderColor.goerli}
       name="G"
-      color={Color.goerliInverse}
+      color={TextColor.goerliInverse}
     />
     <AvatarNetwork
       {...args}
       backgroundColor={BackgroundColor.sepolia}
       borderColor={BorderColor.sepolia}
       name="S"
-      color={Color.goerliInverse}
+      color={TextColor.goerliInverse}
     />
   </Box>
 );

diff --git a/...ary/avatar-network/avatar-network.test.js → ...ry/avatar-network/avatar-network.test.tsx b/...ary/avatar-network/avatar-network.test.js → ...ry/avatar-network/avatar-network.test.tsx
@@ -19,7 +19,7 @@ describe('AvatarNetwork', () => {
 
   it('should render correctly', () => {
     const { getByTestId, container } = render(
-      <AvatarNetwork data-testid="avatar-network" />,
+      <AvatarNetwork {...args} data-testid="avatar-network" />,
     );
     expect(getByTestId('avatar-network')).toBeDefined();
     expect(container).toMatchSnapshot();
@@ -56,7 +56,11 @@ describe('AvatarNetwork', () => {
   // className
   it('should render with custom className', () => {
     const { getByTestId } = render(
-      <AvatarNetwork data-testid="avatar-network" className="test-class" />,
+      <AvatarNetwork
+        {...args}
+        data-testid="avatar-network"
+        className="test-class"
+      />,
     );
     expect(getByTestId('avatar-network')).toHaveClass('test-class');
   });
@@ -65,10 +69,12 @@ describe('AvatarNetwork', () => {
     const { getByTestId } = render(
       <>
         <AvatarNetwork
+          {...args}
           color={TextColor.successDefault}
           data-testid={TextColor.successDefault}
         />
         <AvatarNetwork
+          {...args}
           color={TextColor.errorDefault}
           data-testid={TextColor.errorDefault}
         />
@@ -86,10 +92,12 @@ describe('AvatarNetwork', () => {
     const { getByTestId } = render(
       <>
         <AvatarNetwork
+          {...args}
           backgroundColor={BackgroundColor.successDefault}
           data-testid={BackgroundColor.successDefault}
         />
         <AvatarNetwork
+          {...args}
           backgroundColor={BackgroundColor.errorDefault}
           data-testid={BackgroundColor.errorDefault}
         />
@@ -107,10 +115,12 @@ describe('AvatarNetwork', () => {
     const { getByTestId } = render(
       <>
         <AvatarNetwork
+          {...args}
           borderColor={BorderColor.successDefault}
           data-testid={BorderColor.successDefault}
         />
         <AvatarNetwork
+          {...args}
           borderColor={BorderColor.errorDefault}
           data-testid={BorderColor.errorDefault}
         />
@@ -124,9 +134,11 @@ describe('AvatarNetwork', () => {
     );
   });
   it('should forward a ref to the root html element', () => {
-    const ref = React.createRef();
-    render(<AvatarNetwork ref={ref} />);
+    const ref = React.createRef<HTMLDivElement>();
+    render(<AvatarNetwork {...args} ref={ref} />);
     expect(ref.current).not.toBeNull();
-    expect(ref.current.nodeName).toBe('DIV');
+    if (ref.current) {
+      expect(ref.current.nodeName).toBe('DIV');
+    }
   });
 });