Renaming broken stories to clean up console (#16905)

* Renaming broken stories. Fixing deprecated default arg syntax for stories using defaultValue

* Fixing imports

.storybook/main.js

@@ -30,7 +30,7 @@ module.exports = {
     return {
       ...config,
       // Creates the icon names environment variable for the component-library/icon/icon.js component
-      ICON_NAMES: await generateIconNames(),
+      ICON_NAMES: generateIconNames(),
     };
   },
   webpackFinal: async (config) => {
@@ -96,7 +96,7 @@ module.exports = {
       new ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
       }),
-    )
+    );
     return config;
   },
 };

ui/components/component-library/avatar-base/avatar-base.stories.js

@@ -60,7 +60,6 @@ export default {
     display: {
       options: Object.values(DISPLAY),
       control: 'select',
-      defaultValue: DISPLAY.FLEX,
       table: { category: 'box props' },
     },
     marginTop: {

ui/components/component-library/avatar-icon/avatar-icon.js

@@ -12,7 +12,7 @@ import {
 
 import Box from '../../ui/box/box';
 
-import { Icon } from '../icon';
+import { Icon, ICON_NAMES } from '../icon';
 import { AvatarBase } from '../avatar-base';
 
 import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
@@ -48,7 +48,7 @@ AvatarIcon.propTypes = {
    *
    * The name of the icon to display. Should be one of ICON_NAMES
    */
-  iconName: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable
+  iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
   /**
    * Props for the icon inside AvatarIcon. All Icon props can be used
    */

ui/components/component-library/icon/icon.js

@@ -10,7 +10,7 @@ import {
   ICON_COLORS,
 } from '../../../helpers/constants/design-system';
 
-import { ICON_SIZES } from './icon.constants';
+import { ICON_SIZES, ICON_NAMES } from './icon.constants';
 
 export const Icon = ({
   name,
@@ -43,7 +43,7 @@ Icon.propTypes = {
   /**
    * The name of the icon to display. Should be one of ICON_NAMES
    */
-  name: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable
+  name: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
   /**
    * The size of the Icon.
    * Possible values could be SIZES.XXS (10px), SIZES.XS (12px), SIZES.SM (16px), SIZES.MD (20px), SIZES.LG (24px), SIZES.XL (32px),

ui/components/ui/box/box.stories.js

@@ -55,29 +55,24 @@ export default {
     size: {
       control: { type: 'range', min: 50, max: 500, step: 10 },
       table: { category: 'children' },
-      defaultValue: 100,
     },
     items: {
       control: 'number',
       table: { category: 'children' },
-      defaultValue: 1,
     },
     display: {
       options: Object.values(DISPLAY),
       control: 'select',
-      defaultValue: DISPLAY.BLOCK,
       table: { category: 'display' },
     },
     width: {
       options: Object.values(BLOCK_SIZES),
       control: 'select',
-      defaultValue: BLOCK_SIZES.HALF,
       table: { category: 'display' },
     },
     height: {
       options: Object.values(BLOCK_SIZES),
       control: 'select',
-      defaultValue: BLOCK_SIZES.HALF,
       table: { category: 'display' },
     },
     gap: {
@@ -100,7 +95,6 @@ export default {
     borderStyle: {
       options: Object.values(BORDER_STYLE),
       control: 'select',
-      defaultValue: BORDER_STYLE.DASHED,
       table: { category: 'border' },
     },
     borderWidth: {
@@ -111,7 +105,6 @@ export default {
     borderColor: {
       options: Object.values(BORDER_COLORS),
       control: 'select',
-      defaultValue: COLORS.BORDER_DEFAULT,
       table: { category: 'border' },
     },
     borderRadius: {
@@ -132,19 +125,16 @@ export default {
     justifyContent: {
       options: Object.values(JUSTIFY_CONTENT),
       control: 'select',
-      defaultValue: JUSTIFY_CONTENT.FLEX_START,
       table: { category: 'display' },
     },
     alignItems: {
       options: Object.values(ALIGN_ITEMS),
       control: 'select',
-      defaultValue: ALIGN_ITEMS.FLEX_START,
       table: { category: 'display' },
     },
     textAlign: {
       options: Object.values(TEXT_ALIGN),
       control: 'select',
-      defaultValue: TEXT_ALIGN.LEFT,
       table: { category: 'text' },
     },
     margin: {
@@ -203,6 +193,18 @@ export default {
       table: { category: 'as (root html element)' },
     },
   },
+  args: {
+    size: 100,
+    items: 1,
+    display: DISPLAY.BLOCK,
+    width: BLOCK_SIZES.HALF,
+    height: BLOCK_SIZES.HALF,
+    borderStyle: BORDER_STYLE.DASHED,
+    borderColor: COLORS.BORDER_DEFAULT,
+    justifyContent: JUSTIFY_CONTENT.FLEX_START,
+    alignItems: ALIGN_ITEMS.FLEX_START,
+    textAlign: TEXT_ALIGN.LEFT,
+  },
 };
 
 export const DefaultStory = (args) => {
@@ -220,7 +222,11 @@ export const DefaultStory = (args) => {
       />,
     );
   }
-  return <Box {...rest}>{children}</Box>;
+  return (
+    <Box {...rest} borderColor={COLORS.BORDER_MUTED}>
+      {children}
+    </Box>
+  );
 };
 
 DefaultStory.storyName = 'Default';

ui/components/ui/color-indicator/color-indicator.stories.js

@@ -11,30 +11,31 @@ export default {
         type: 'select',
       },
       options: SIZES,
-      defaultValue: SIZES.LG,
     },
     type: {
       control: {
         type: 'select',
       },
       options: ColorIndicator.TYPES,
-      defaultValue: ColorIndicator.TYPES.FILLED,
     },
     color: {
       control: {
         type: 'select',
       },
       options: COLORS,
-      defaultValue: COLORS.PRIMARY_DEFAULT,
     },
     borderColor: {
       control: {
         type: 'select',
       },
       options: { NONE: undefined, ...COLORS },
-      defaultValue: undefined,
     },
   },
+  args: {
+    size: SIZES.LG,
+    type: ColorIndicator.TYPES.FILLED,
+    color: COLORS.PRIMARY_DEFAULT,
+  },
 };
 
 export const DefaultStory = (args) => (

ui/components/ui/list-item/list-item.stories.js

@@ -79,14 +79,17 @@ export const SendComponent = (args) => (
 SendComponent.argTypes = {
   secondaryButtonText: {
     control: 'text',
-    defaultValue: 'Speed up',
   },
   cancelButtonText: {
     control: 'text',
-    defaultValue: 'Cancel',
   },
 };
 
+SendComponent.args = {
+  secondaryButtonText: 'Speed up',
+  cancelButtonText: 'Cancel',
+};
+
 export const PendingComponent = (args) => (
   <ListItem
     title={args.title}

ui/components/ui/truncated-definition-list/truncated-definition-list.stories.js

@@ -5,7 +5,18 @@ export default {
   title: 'Components/UI/TruncatedDefinitionList',
   id: __filename,
   argTypes: {
-    title: { control: 'text', defaultValue: 'Basic definitions' },
+    title: {
+      control: 'text',
+    },
+    dictionary: {
+      control: 'object',
+    },
+    prefaceKeys: {
+      control: 'object',
+    },
+  },
+  args: {
+    title: 'Basic definitions',
   },
 };
 
@@ -32,32 +43,17 @@ const tooltips = {
 
 export const DefaultStory = (args) => <TruncatedDefinitionList {...args} />;
 
-DefaultStory.argTypes = {
-  dictionary: {
-    control: 'object',
-    defaultValue: basic,
-  },
-  prefaceKeys: {
-    control: 'object',
-    defaultValue: ['term', 'definition'],
-  },
-};
-
 DefaultStory.storyName = 'Default';
 
+DefaultStory.args = {
+  dictionary: basic,
+  prefaceKeys: ['term', 'definition'],
+};
+
 export const WithTooltips = (args) => <TruncatedDefinitionList {...args} />;
 
-WithTooltips.argTypes = {
+WithTooltips.args = {
-  dictionary: {
+  dictionary: advanced,
-    control: 'object',
+  tooltips,
-    defaultValue: advanced,
+  prefaceKeys: ['Chain ID'],
-  },
-  tooltips: {
-    control: 'object',
-    defaultValue: tooltips,
-  },
-  prefaceKeys: {
-    control: 'array',
-    defaultValue: ['Chain ID'],
-  },
 };

ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js

@@ -15,15 +15,17 @@ export default {
   argTypes: {
     address: {
       control: { type: 'text' },
-      defaultValue: '0xdeDbcA0156308960E3bBa2f5a273E72179940788',
     },
     showPopover: {
       control: { type: 'boolean' },
-      defaultValue: false,
     },
     onAdd: { action: 'onAdd' },
     onClose: { action: 'onClose' },
   },
+  args: {
+    address: '0xdeDbcA0156308960E3bBa2f5a273E72179940788',
+    showPopover: false,
+  },
 };
 
 export const DefaultStory = (args) => {

ui/pages/confirm-approve/confirm-approve.stories-to-do.js

@@ -10,6 +10,7 @@ import { store, getNewState } from '../../../.storybook/preview';
 import { subjectMetadata } from '../../../.storybook/initial-states/approval-screens/token-approval';
 import ConfirmApprove from '.';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: 'Pages/ConfirmApprove',
   id: __filename,

ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories-to-do.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import ConfirmDeployContract from '.';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: 'Pages/ConfirmDeployContract',
   id: __filename,

ui/pages/confirm-send-ether/confirm-send-ether.stories-to-do.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ConfirmSendEther from '.';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: 'Pages/ConfirmSendEther',
   id: __filename,

ui/pages/confirm-send-token/confirm-send-token.stories-to-do.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ConfirmSendToken from './confirm-send-token.component';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: 'Pages/ConfirmSendToken',
   id: __filename,

ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories-to-do.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { store } from '../../../.storybook/preview';
 import ConfirmTokenTransactionBase from './confirm-token-transaction-base';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: 'Pages/ConfirmTokenTransactionBase',
   id: __filename,

ui/pages/confirm-transaction-base/confirm-transaction-base.stories-to-do.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import ConfirmTransactionBase from '.';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: 'Pages/ConfirmTransactionBase',
   id: __filename,

ui/pages/send/send-content/add-recipient/add-recipient.stories.js

@@ -94,13 +94,11 @@ export const ErrorStory = (args) => {
     </div>
   );
 };
-
-ErrorStory.argTypes = {
-  // domainError must be the key for a translation
-  domainError: { type: 'text', defaultValue: 'loading' },
-};
-
 ErrorStory.storyName = 'Error';
+ErrorStory.args = {
+  // domainError must be the key for a translation
+  domainError: 'loading',
+};
 
 export const WarningStory = (args) => {
   return (
@@ -113,10 +111,8 @@ export const WarningStory = (args) => {
     </div>
   );
 };
-
-WarningStory.argTypes = {
-  // domainWarning must be the key for a translation
-  domainWarning: { type: 'text', defaultValue: 'loading' },
-};
-
 WarningStory.storyName = 'Warning';
+WarningStory.args = {
+  // domainWarning must be the key for a translation
+  domainWarning: 'loading',
+};

ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js

@@ -23,11 +23,12 @@ export default {
   },
   argTypes: {
     insufficientBalance: {
-      name: 'Is Insufficient Balance',
       control: { type: 'boolean' },
-      defaultValue: false,
     },
   },
+  args: {
+    insufficientBalance: false,
+  },
 };
 
 export const DefaultStory = (args) => {

ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js

@@ -4,6 +4,36 @@ import ExchangeRateDisplay from './exchange-rate-display';
 export default {
   title: 'Pages/Swaps/ExchangeRateDisplay',
   id: __filename,
+  argTypes: {
+    primaryTokenValue: {
+      control: {
+        type: 'text',
+      },
+    },
+    primaryTokenDecimals: {
+      control: {
+        type: 'number',
+      },
+    },
+    primaryTokenSymbol: {
+      control: {
+        type: 'text',
+      },
+    },
+    secondaryTokenValue: {
+      control: {
+        type: 'text',
+      },
+    },
+    secondaryTokenDecimals: {
+      control: 'number',
+    },
+    secondaryTokenSymbol: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
 };
 
 export const DefaultStory = (args) => {
@@ -12,41 +42,13 @@ export const DefaultStory = (args) => {
 
 DefaultStory.storyName = 'Default';
 
-DefaultStory.argTypes = {
+DefaultStory.args = {
-  primaryTokenValue: {
+  primaryTokenValue: '2000000000000000000',
-    control: {
+  primaryTokenDecimals: 18,
-      type: 'text',
+  primaryTokenSymbol: 'ETH',
-    },
+  secondaryTokenValue: '200000000000000000',
-    defaultValue: '2000000000000000000',
+  secondaryTokenDecimals: 18,
-  },
+  secondaryTokenSymbol: 'ABC',
-  primaryTokenDecimals: {
-    control: {
-      type: 'number',
-    },
-    defaultValue: 18,
-  },
-  primaryTokenSymbol: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'ETH',
-  },
-  secondaryTokenValue: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: '200000000000000000',
-  },
-  secondaryTokenDecimals: {
-    control: 'number',
-    defaultValue: 18,
-  },
-  secondaryTokenSymbol: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'ABC',
-  },
 };
 
 export const WhiteOnBlue = (args) => {
@@ -68,41 +70,11 @@ export const WhiteOnBlue = (args) => {
   );
 };
 
-WhiteOnBlue.argTypes = {
+WhiteOnBlue.args = {
-  primaryTokenValue: {
+  primaryTokenValue: '2000000000000000000',
-    control: {
+  primaryTokenDecimals: 18,
-      type: 'text',
+  primaryTokenSymbol: 'ETH',
-    },
+  secondaryTokenValue: '200000000000000000',
-    defaultValue: '2000000000000000000',
+  secondaryTokenDecimals: 18,
-  },
+  secondaryTokenSymbol: 'ABC',
-  primaryTokenDecimals: {
-    control: {
-      type: 'number',
-    },
-    defaultValue: 18,
-  },
-  primaryTokenSymbol: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'ETH',
-  },
-  secondaryTokenValue: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: '200000000000000000',
-  },
-  secondaryTokenDecimals: {
-    control: {
-      type: 'number',
-    },
-    defaultValue: 18,
-  },
-  secondaryTokenSymbol: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'ABC',
-  },
 };