Organizing storybook to echo app folder structure (#12796)

* Organizing storybook to echo app folder structure

* Updating new stories to follow new convention from develop

.storybook/preview.js

@@ -22,6 +22,11 @@ addParameters({
       { name: 'dark', value: '#333333' },
     ],
   },
+  options: {
+    storySort: {
+      order: ['Getting Started', 'Components', ['UI', 'App'], 'Pages'],
+    },
+  },
 });
 
 export const globalTypes = {

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

@@ -2,10 +2,12 @@ import React from 'react';
 import AccountListItem from './account-list-item';
 
 export default {
-  title: 'AccountListItem',
+  title: 'Components/App/AccountListItem',
   id: __filename,
 };
 
-export const AccountListItemComponent = () => {
+export const DefaultStory = () => {
   return <AccountListItem />;
 };
+
+DefaultStory.storyName = 'Default';

ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js

@@ -3,14 +3,16 @@ import React from 'react';
 import AdvancedGasControls from '.';
 
 export default {
-  title: 'Advanced Gas Controls',
+  title: 'Components/App/AdvancedGasControls',
   id: __filename,
 };
 
-export const simple = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ width: '600px' }}>
       <AdvancedGasControls />
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/components/app/collectible-details/collectible-details.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CollectibleDetails from './collectible-details';
 
 export default {
-  title: 'Collectibles Detail',
+  title: 'Components/App/CollectibleDetails',
   id: __filename,
 };
 

ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js

@@ -2,14 +2,16 @@ import React from 'react';
 import EditGasDisplayEducation from '.';
 
 export default {
-  title: 'Edit Gas Display',
+  title: 'Components/App/EditGasDisplayEducation',
   id: __filename,
 };
 
-export const basic = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ width: '600px' }}>
       <EditGasDisplayEducation />
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/components/app/edit-gas-display/edit-gas-display.stories.js

@@ -2,11 +2,11 @@ import React from 'react';
 import EditGasDisplay from '.';
 
 export default {
-  title: 'Edit Gas Display',
+  title: 'Components/App/EditGasDisplay',
   id: __filename,
 };
 
-export const basic = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ width: '600px' }}>
       <EditGasDisplay />
@@ -14,7 +14,9 @@ export const basic = () => {
   );
 };
 
-export const withEducation = () => {
+DefaultStory.storyName = 'Default';
+
+export const WithEducation = () => {
   return (
     <div style={{ width: '600px' }}>
       <EditGasDisplay showEducationButton />
@@ -22,7 +24,7 @@ export const withEducation = () => {
   );
 };
 
-export const withDappSuggestedGas = () => {
+export const WithDappSuggestedGas = () => {
   return (
     <div style={{ width: '600px' }}>
       <EditGasDisplay

ui/components/app/edit-gas-popover/edit-gas-popover.stories.js

@@ -15,12 +15,12 @@ import EditGasPopover from '.';
 const store = configureStore(testData);
 
 export default {
-  title: 'Edit Gas Display Popover',
+  title: 'Components/App/EditGasPopover',
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
   id: __filename,
 };
 
-export const Basic = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ width: '600px' }}>
       <EditGasPopover
@@ -43,7 +43,9 @@ export const Basic = () => {
   );
 };
 
-export const BasicWithDifferentButtonText = () => {
+DefaultStory.storyName = 'Default';
+
+export const WithDifferentButtonText = () => {
   return (
     <div style={{ width: '600px' }}>
       <EditGasPopover
@@ -66,7 +68,7 @@ export const BasicWithDifferentButtonText = () => {
   );
 };
 
-export const EducationalContentFlow = () => {
+export const WithEducationalContentFlow = () => {
   return (
     <div style={{ width: '600px' }}>
       <EditGasPopover

ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js

@@ -4,7 +4,7 @@ import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 import MetaMaskTemplateRenderer from '.';
 
 export default {
-  title: 'MetaMask Template Renderer',
+  title: 'Components/App/MetamaskTemplateRenderer',
   id: __filename,
 };
 
@@ -83,11 +83,14 @@ const SECTIONS = {
     },
   ],
 };
-export const metaMaskTemplateRenderer = () => (
+
+export const DefaultStory = () => (
   <MetaMaskTemplateRenderer sections={object('sections', SECTIONS)} />
 );
 
-export const withInvalidElement = () => (
+DefaultStory.storyName = 'Default';
+
+export const WithInvalidElement = () => (
   <MetaMaskTemplateRenderer
     sections={object('sections', [
       {

ui/components/app/metamask-translation/metamask-translation.stories.js

@@ -5,7 +5,7 @@ import en from '../../../../app/_locales/en/messages.json';
 import MetaMaskTranslation from './metamask-translation';
 
 export default {
-  title: 'MetaMaskTranslation',
+  title: 'Components/App/MetamaskTranslation',
   id: __filename,
 };
 
@@ -19,7 +19,7 @@ const { keysWithSubstitution, keysWithoutSubstitution } = groupBy(
   },
 );
 
-export const withoutSubstitutions = () => (
+export const WithoutSubstitutions = () => (
   <MetaMaskTranslation
     translationKey={select(
       'translationKey',
@@ -29,7 +29,7 @@ export const withoutSubstitutions = () => (
   />
 );
 
-export const withSubstitutions = () => (
+export const WithSubstitutions = () => (
   <MetaMaskTranslation
     translationKey={select(
       'translationKey',
@@ -40,7 +40,7 @@ export const withSubstitutions = () => (
   />
 );
 
-export const withTemplate = () => (
+export const WithTemplate = () => (
   <MetaMaskTranslation
     translationKey={select(
       'translationKey',

ui/components/app/signature-request/signature-request.stories.js

@@ -9,11 +9,11 @@ const containerStyle = {
 };
 
 export default {
-  title: 'Signature Request',
+  title: 'Components/App/SignatureRequest',
   id: __filename,
 };
 
-export const FirstLook = () => {
+export const DefaultStory = () => {
   return (
     <div style={containerStyle}>
       <SignatureRequest
@@ -36,3 +36,5 @@ export const FirstLook = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/components/app/transaction-detail-item/transaction-detail-item.stories.js

@@ -4,11 +4,11 @@ import GasTiming from '../gas-timing/gas-timing.component';
 import TransactionDetailItem from '.';
 
 export default {
-  title: 'Transaction Detail Item',
+  title: 'Components/App/TransactionDetailItem',
   id: __filename,
 };
 
-export const basic = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ width: '400px' }}>
       <TransactionDetailItem
@@ -32,3 +32,5 @@ export const basic = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/components/app/transaction-detail/transaction-detail.stories.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
 import GasTiming from '../gas-timing/gas-timing.component';
 import TransactionDetail from '.';
 
 export default {
-  title: 'Transaction Detail',
+  title: 'Components/App/TransactionDetail',
   id: __filename,
 };
 
@@ -43,7 +44,7 @@ const rows = [
   />,
 ];
 
-export const basic = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ width: '400px' }}>
       <TransactionDetail rows={rows} />
@@ -51,10 +52,12 @@ export const basic = () => {
   );
 };
 
-export const editable = () => {
+DefaultStory.storyName = 'Default';
+
+export const Editable = () => {
   return (
     <div style={{ width: '400px' }}>
-      <TransactionDetail rows={rows} onEdit={() => console.log('Edit!')} />
+      <TransactionDetail rows={rows} onEdit={() => action('Edit!')()} />
     </div>
   );
 };

ui/components/app/transaction-list/transaction-list.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import TransactionList from '.';
 
 export default {
-  title: 'Transaction List',
+  title: 'Components/App/TransactionList',
   id: __filename,
 };
 
@@ -11,10 +11,12 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const TxList = () => {
+export const DefaultStory = () => {
   return (
     <PageSet>
       <TransactionList />
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/components/app/transaction-total-banner/transaction-total-banner.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import TransactionTotalBanner from '.';
 
 export default {
-  title: 'Transaction Total Banner',
+  title: 'Components/App/TransactionTotalBanner',
   id: __filename,
 };
 

ui/components/ui/actionable-message/actionable-message.stories.js

@@ -4,11 +4,11 @@ import { text } from '@storybook/addon-knobs';
 import ActionableMessage from '.';
 
 export default {
-  title: 'ActionableMessage',
+  title: 'Components/UI/ActionableMessage',
   id: __filename,
 };
 
-export const NoAction = () => (
+export const DefaultStory = () => (
   <div style={{ height: '200px', width: '200px' }}>
     <ActionableMessage
       message={text(
@@ -19,6 +19,8 @@ export const NoAction = () => (
   </div>
 );
 
+DefaultStory.storyName = 'Default';
+
 export const OneAction = () => (
   <div style={{ height: '200px', width: '250px' }}>
     <ActionableMessage
@@ -70,7 +72,7 @@ export const LeftAligned = () => (
   </div>
 );
 
-export const withIcon = () => (
+export const WithIcon = () => (
   <div style={{ height: '200px', width: '300px' }}>
     <ActionableMessage
       message={text(

ui/components/ui/alert-circle-icon/alert-circle-icon.stories.js

@@ -3,7 +3,7 @@ import README from './README.mdx';
 import AlertCircleIcon from './alert-circle-icon.component';
 
 export default {
-  title: 'Components/UI/Alert Circle Icon',
+  title: 'Components/UI/AlertCircleIcon',
   id: __filename,
   component: AlertCircleIcon,
   parameters: {
@@ -17,13 +17,11 @@ export default {
 };
 
 export const DefaultStory = (args) => <AlertCircleIcon type={args.type} />;
-DefaultStory.storyName = 'Default';
 
-DefaultStory.args = {
-  type: 'danger',
-};
+DefaultStory.storyName = 'Default';
 
 export const Warning = (args) => <AlertCircleIcon type={args.type} />;
+
 Warning.args = {
   type: 'warning',
 };

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

@@ -12,13 +12,13 @@ import {
 import Box from './box';
 
 export default {
-  title: 'Box',
+  title: 'Components/UI/Box',
   id: __filename,
 };
 
 const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
-export const box = () => {
+export const DefaultStory = () => {
   const items = [];
   const size = number(
     'size',
@@ -86,3 +86,5 @@ export const box = () => {
     </Box>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/components/ui/button/button.stories.js

@@ -6,7 +6,7 @@ import README from './README.mdx';
 import Button from '.';
 
 export default {
-  title: 'Button',
+  title: 'Components/UI/Button',
   id: __filename,
   component: Button,
   parameters: {

ui/components/ui/callout/callout.stories.js

@@ -10,11 +10,11 @@ import Typography from '../typography';
 import Callout from './callout';
 
 export default {
-  title: 'Callout',
+  title: 'Components/UI/Callout',
   id: __filename,
 };
 
-export const persistentCallout = () => (
+export const PersistentCallout = () => (
   <Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
     <Box margin={2}>
       <Typography variant={TYPOGRAPHY.H4}>This is your private key:</Typography>

ui/components/ui/card/card.stories.js

@@ -15,7 +15,7 @@ import Card from '.';
 const sizeOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
 export default {
-  title: 'UI/Card',
+  title: 'Components/UI/Card',
   id: __filename,
   component: Card,
   parameters: {

ui/components/ui/chip/chip.stories.js

@@ -11,7 +11,7 @@ import README from './README.mdx';
 import Chip from '.';
 
 export default {
-  title: 'UI/Chip',
+  title: 'Components/UI/Chip',
   id: __filename,
   component: Chip,
   parameters: {

ui/components/ui/circle-icon/circle-icon.stories.js

@@ -3,7 +3,7 @@ import README from './README.mdx';
 import CircleIcon from './circle-icon.component';
 
 export default {
-  title: 'Components/UI/Circle Icon',
+  title: 'Components/UI/CircleIcon',
   id: __filename,
   component: CircleIcon,
   parameters: {

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

@@ -4,11 +4,11 @@ import { COLORS, SIZES } from '../../../helpers/constants/design-system';
 import ColorIndicator from './color-indicator';
 
 export default {
-  title: 'ColorIndicator',
+  title: 'Components/UI/ColorIndicator',
   id: __filename,
 };
 
-export const colorIndicator = () => (
+export const DefaultStory = () => (
   <ColorIndicator
     size={select('size', SIZES, SIZES.LG)}
     type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)}
@@ -17,7 +17,9 @@ export const colorIndicator = () => (
   />
 );
 
-export const withIcon = () => (
+DefaultStory.storyName = 'Default';
+
+export const WithIcon = () => (
   <ColorIndicator
     size={select('size', SIZES, SIZES.LG)}
     type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)}

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

@@ -8,7 +8,7 @@ import {
 import DefinitionList from './definition-list';
 
 export default {
-  title: 'Definition List',
+  title: 'Components/UI/DefinitionList',
   id: __filename,
 };
 
@@ -34,14 +34,16 @@ const tooltips = {
   'Ticker': 'The currency symbol of the primary currency for this network',
 };
 
-export const definitionList = () => (
+export const DefaultStory = () => (
   <DefinitionList
     dictionary={object('dictionary', basic)}
     gapSize={select('gapSize', SIZES, SIZES.SM)}
   />
 );
 
-export const withTooltips = () => (
+DefaultStory.storyName = 'Default';
+
+export const WithTooltips = () => (
   <DefinitionList
     dictionary={object('dictionary', advanced)}
     tooltips={object('tooltips', tooltips)}
@@ -49,7 +51,7 @@ export const withTooltips = () => (
   />
 );
 
-export const withTypographyControl = () => (
+export const WithTypographyControl = () => (
   <DefinitionList
     dictionary={object('dictionary', advanced)}
     tooltips={object('tooltips', tooltips)}

ui/components/ui/dropdown/dropdown.stories.js

@@ -4,7 +4,7 @@ import { boolean, select, text } from '@storybook/addon-knobs';
 import Dropdown from '.';
 
 export default {
-  title: 'Dropdown',
+  title: 'Components/UI/Dropdown',
   id: __filename,
 };
 
@@ -23,7 +23,7 @@ const namedOptionsWithVeryLongNames = unnamedOptions.map((option, index) => {
   };
 });
 
-export const simple = () => (
+export const DefaultStory = () => (
   <Dropdown
     disabled={boolean('Disabled', false)}
     title={text('Title', 'Test dropdown name')}
@@ -38,7 +38,9 @@ export const simple = () => (
   />
 );
 
-export const optionsWithoutNames = () => (
+DefaultStory.storyName = 'Default';
+
+export const OptionsWithoutNames = () => (
   <Dropdown
     disabled={boolean('Disabled', false)}
     title={text('Title', 'Test dropdown name')}
@@ -53,7 +55,7 @@ export const optionsWithoutNames = () => (
   />
 );
 
-export const optionsWithLongNames = () => (
+export const OptionsWithLongNames = () => (
   <Dropdown
     disabled={boolean('Disabled', false)}
     title={text('Title', 'Test dropdown name')}
@@ -68,7 +70,7 @@ export const optionsWithLongNames = () => (
   />
 );
 
-export const optionsWithLongNamesAndShortWidth = () => (
+export const OptionsWithLongNamesAndShortWidth = () => (
   <Dropdown
     disabled={boolean('Disabled', false)}
     title={text('Title', 'Test dropdown name')}

ui/components/ui/error-message/error-message.stories.js

@@ -3,10 +3,12 @@ import { text } from '@storybook/addon-knobs';
 import ErrorMessage from '.';
 
 export default {
-  title: 'ErrorMessage',
+  title: 'Components/UI/ErrorMessage',
   id: __filename,
 };
 
-export const primaryType = () => (
+export const DefaultStory = () => (
   <ErrorMessage errorMessage={text('Error Message:', 'There was an error!')} />
 );
+
+DefaultStory.storyName = 'Default';

ui/components/ui/form-field/form-field.stories.js

@@ -5,11 +5,11 @@ import { select } from '@storybook/addon-knobs';
 import FormField from '.';
 
 export default {
-  title: 'FormField',
+  title: 'Components/UI/FormField',
   id: __filename,
 };
 
-export const Plain = ({ ...props }) => {
+export const DefaultStory = ({ ...props }) => {
   const options = { text: false, numeric: true };
   const [value, setValue] = useState('');
   return (
@@ -25,6 +25,8 @@ export const Plain = ({ ...props }) => {
   );
 };
 
+DefaultStory.storyName = 'Default';
+
 export const FormFieldWithTitleDetail = () => {
   const [clicked, setClicked] = useState(false);
   const detailOptions = {
@@ -40,7 +42,7 @@ export const FormFieldWithTitleDetail = () => {
     checkmark: <i className="fas fa-check" />,
   };
   return (
-    <Plain
+    <DefaultStory
       titleText="Title"
       titleDetail={
         detailOptions[
@@ -52,5 +54,5 @@ export const FormFieldWithTitleDetail = () => {
 };
 
 export const FormFieldWithError = () => {
-  return <Plain titleText="Title" error="Incorrect Format" />;
+  return <DefaultStory titleText="Title" error="Incorrect Format" />;
 };

ui/components/ui/icon/icon.stories.js

@@ -11,7 +11,7 @@ import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
 
 export default {
-  title: 'Icon',
+  title: 'Components/UI/Icon',
   id: __filename,
 };
 

ui/components/ui/identicon/identicon.stories.js

@@ -3,7 +3,7 @@ import { text, boolean, number } from '@storybook/addon-knobs';
 import Identicon from './identicon.component';
 
 export default {
-  title: 'Identicon',
+  title: 'Components/UI/Identicon',
   id: __filename,
 };
 
@@ -13,7 +13,7 @@ const diameterOptions = {
   max: 200,
   step: 1,
 };
-export const standard = () => (
+export const DefaultStory = () => (
   <Identicon
     addBorder={boolean('Add Border', Identicon.defaultProps.addBorder)}
     address={text('Address', '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1')}
@@ -26,9 +26,11 @@ export const standard = () => (
   />
 );
 
-export const image = () => <Identicon image="./images/eth_logo.svg" />;
+DefaultStory.storyName = 'Default';
 
-export const blockie = () => (
+export const Image = () => <Identicon image="./images/eth_logo.svg" />;
+
+export const Blockie = () => (
   <Identicon
     address={text('Address', '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1')}
     useBlockie={boolean('Use Blockie', true)}
@@ -38,7 +40,7 @@ export const blockie = () => (
 // The border size is hard-coded in CSS, and was designed with this size identicon in mind
 const withBorderDiameter = 32;
 
-export const withBorder = () => (
+export const WithBorder = () => (
   <Identicon
     addBorder={boolean('Add Border', true)}
     address={text('Address', '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1')}

ui/components/ui/info-tooltip/info-tooltip.stories.js

@@ -3,7 +3,7 @@ import { text } from '@storybook/addon-knobs';
 import InfoTooltip from './info-tooltip';
 
 export default {
-  title: 'InfoTooltip',
+  title: 'Components/UI/InfoTooltip',
   id: __filename,
 };
 

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

@@ -10,7 +10,7 @@ import Button from '../button';
 import ListItem from './list-item.component';
 
 export default {
-  title: 'ListItem',
+  title: 'Components/UI/ListItem',
   id: __filename,
 };
 
@@ -31,7 +31,7 @@ Currencies.propTypes = {
 const okColor = '#2F80ED';
 const failColor = '#D73A49';
 
-export const send = () => (
+export const SendComponent = () => (
   <ListItem
     icon={<Send color={okColor} size={28} />}
     titleIcon={<Preloader size={16} color="#D73A49" />}
@@ -54,7 +54,7 @@ export const send = () => (
   </ListItem>
 );
 
-export const pending = () => (
+export const PendingComponent = () => (
   <ListItem
     icon={<Interaction color={failColor} size={28} />}
     title={text('title', 'Hatch Turtles')}
@@ -74,7 +74,7 @@ export const pending = () => (
   />
 );
 
-export const approve = () => (
+export const ApproveComponent = () => (
   <ListItem
     icon={<Approve color={okColor} size={28} />}
     title={text('title', 'Approve spend limit')}
@@ -89,7 +89,7 @@ export const approve = () => (
   />
 );
 
-export const receive = () => (
+export const ReceiveComponent = () => (
   <ListItem
     icon={<Receive color={okColor} size={28} />}
     title={text('title', 'Hatch Turtles')}

ui/components/ui/mascot/mascot.stories.js

@@ -21,11 +21,11 @@ const buttonStyle = {
 };
 
 export default {
-  title: 'Mascot',
+  title: 'Components/UI/Mascot',
   id: __filename,
 };
 
-export function Demo() {
+export const DefaultStory = () => {
   const [lookAtDirection, setLookAtDirection] = useState(null);
   const [followMouseMode, setFollowMouseMode] = useState(false);
   const [clickToLookMode, setClickToLookMode] = useState(false);
@@ -88,4 +88,6 @@ export function Demo() {
       </div>
     </div>
   );
-}
+};
+
+DefaultStory.storyName = 'Default';

ui/components/ui/menu/menu.stories.js

@@ -3,11 +3,11 @@ import { action } from '@storybook/addon-actions';
 import { Menu, MenuItem } from '.';
 
 export default {
-  title: 'Menu',
+  title: 'Components/UI/Menu',
   id: __filename,
 };
 
-export const Basic = () => {
+export const DefaultStory = () => {
   return (
     <Menu onHide={action('Hide')}>
       <MenuItem iconClassName="fas fa-bullseye" onClick={action('Menu Item 1')}>
@@ -21,6 +21,8 @@ export const Basic = () => {
   );
 };
 
+DefaultStory.storyName = 'Default';
+
 export const Anchored = () => {
   const [anchorElement, setAnchorElement] = useState(null);
   return (

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

@@ -5,11 +5,11 @@ import Button from '../button';
 import NicknamePopover from '.';
 
 export default {
-  title: 'NicknamePopover',
+  title: 'Components/UI/NicknamePopover',
   id: __filename,
 };
 
-export const Default = () => {
+export const DefaultStory = () => {
   const [showNicknamePopover, setShowNicknamePopover] = useState(false);
 
   return (
@@ -30,3 +30,5 @@ export const Default = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/components/ui/numeric-input/numeric-input.stories.js

@@ -2,13 +2,13 @@ import React from 'react';
 import NumericInput from '.';
 
 export default {
-  title: 'NumericInput',
+  title: 'Components/UI/NumericInput',
   id: __filename,
 };
 
 const onChange = (e) => console.log('changed value: ', e.target.value);
 
-export const numericInput = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ width: '600px' }}>
       <NumericInput onChange={onChange} />
@@ -16,7 +16,9 @@ export const numericInput = () => {
   );
 };
 
-export const numericInputWithDetail = () => {
+DefaultStory.storyName = 'Default';
+
+export const WithDetail = () => {
   return (
     <div style={{ width: '600px' }}>
       <NumericInput detailText="= $0.06" onChange={onChange} />
@@ -24,7 +26,7 @@ export const numericInputWithDetail = () => {
   );
 };
 
-export const numericInputWithError = () => {
+export const WithError = () => {
   return (
     <div style={{ width: '600px' }}>
       <NumericInput

ui/components/ui/popover/popover.stories.js

@@ -15,11 +15,11 @@ const mainWrapperStyle = {
 };
 
 export default {
-  title: 'Popover',
+  title: 'Components/UI/Popover',
   id: __filename,
 };
 
-export const approve = () => (
+export const DefaultStory = () => (
   <div style={containerStyle}>
     <Popover
       title={text('title', 'Approve spend limit')}
@@ -63,3 +63,5 @@ export const approve = () => (
     </Popover>
   </div>
 );
+
+DefaultStory.storyName = 'Default';

ui/components/ui/pulse-loader/pulse-loader.stories.js

@@ -2,8 +2,10 @@ import React from 'react';
 import PulseLoader from '.';
 
 export default {
-  title: 'PulseLoader',
+  title: 'Components/UI/PulseLoader',
   id: __filename,
 };
 
-export const common = () => <PulseLoader />;
+export const DefaultStory = () => <PulseLoader />;
+
+DefaultStory.storyName = 'Default';

ui/components/ui/radio-group/radio-group.stories.js

@@ -3,11 +3,11 @@ import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas';
 import RadioGroup from '.';
 
 export default {
-  title: 'RadioGroup',
+  title: 'Components/UI/RadioGroup',
   id: __filename,
 };
 
-export const radioGroup = () => {
+export const DefaultStory = () => {
   return (
     <div className="radio-group" style={{ minWidth: '600px' }}>
       <RadioGroup
@@ -26,3 +26,5 @@ export const radioGroup = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/components/ui/slider/slider.stories.js

@@ -1,16 +1,19 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import Slider from '.';
 
 export default {
-  title: 'Slider',
+  title: 'Components/UI/Slider',
   id: __filename,
 };
 
-export const slider = () => <Slider />;
+export const DefaultStory = () => <Slider />;
 
-export const sliderWithSteps = () => <Slider step={10} />;
+DefaultStory.storyName = 'Default';
 
-export const sliderWithHeader = () => (
+export const WithSteps = () => <Slider step={10} />;
+
+export const WithHeader = () => (
   <Slider
     titleText="Slider Title Text"
     tooltipText="Slider Tooltip Text"
@@ -19,7 +22,7 @@ export const sliderWithHeader = () => (
   />
 );
 
-export const sliderWithFooter = () => (
+export const WithFooter = () => (
   <Slider
     titleText="Slider Title Text"
     tooltipText="Slider Tooltip Text"
@@ -27,7 +30,7 @@ export const sliderWithFooter = () => (
     titleDetail="100 GWEI"
     infoText="Footer Info Text"
     onEdit={() => {
-      console.log('on edit click');
+      action('On edit click')();
     }}
   />
 );

ui/components/ui/tabs/tabs.stories.js

@@ -4,7 +4,7 @@ import Tab from './tab/tab.component';
 import Tabs from './tabs.component';
 
 export default {
-  title: 'Tabs',
+  title: 'Components/UI/Tabs',
   id: __filename,
 };
 
@@ -16,15 +16,15 @@ function renderTab(id) {
   );
 }
 
-export const twoTabs = () => {
+export const TwoTabs = () => {
   return <Tabs>{['A', 'B'].map(renderTab)}</Tabs>;
 };
 
-export const manyTabs = () => {
+export const ManyTabs = () => {
   return <Tabs>{['A', 'B', 'C', 'D', 'E'].map(renderTab)}</Tabs>;
 };
 
-export const singleTab = () => {
+export const SingleTab = () => {
   return (
     <Tabs>
       <Tab name={text('Name', 'Single A')}>

ui/components/ui/text-field/text-field.stories.js

@@ -2,30 +2,32 @@ import React from 'react';
 import TextField from '.';
 
 export default {
-  title: 'TextField',
+  title: 'Components/UI/TextField',
   id: __filename,
 };
 
-export const text = () => <TextField label="Text" type="text" />;
+export const DefaultStory = () => <TextField label="Text" type="text" />;
 
-export const password = () => <TextField label="Password" type="password" />;
+DefaultStory.storyName = 'Default';
 
-export const error = () => (
+export const Password = () => <TextField label="Password" type="password" />;
+
+export const Error = () => (
   <TextField type="text" label="Name" error="Invalid value" />
 );
 
-export const mascaraText = () => (
+export const MascaraText = () => (
   <TextField label="Text" type="text" largeLabel />
 );
 
-export const materialText = () => (
+export const MaterialText = () => (
   <TextField label="Text" type="text" theme="material" />
 );
 
-export const materialPassword = () => (
+export const MaterialPassword = () => (
   <TextField label="Password" type="password" theme="material" />
 );
 
-export const materialError = () => (
+export const MaterialError = () => (
   <TextField type="text" label="Name" error="Invalid value" theme="material" />
 );

ui/components/ui/toggle-button/toggle-button.stories.js

@@ -5,7 +5,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 import ToggleButton from './toggle-button.component';
 
 export default {
-  title: 'ToggleButton',
+  title: 'Components/UI/ToggleButton',
   component: ToggleButton,
   id: __filename,
 };

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

@@ -4,7 +4,7 @@ import { object, text } from '@storybook/addon-knobs';
 import TruncatedDefinitionList from './truncated-definition-list';
 
 export default {
-  title: 'Truncated Definition List',
+  title: 'Components/UI/TruncatedDefinitionList',
   id: __filename,
 };
 
@@ -30,7 +30,7 @@ const tooltips = {
   'Ticker': 'The currency symbol of the primary currency for this network',
 };
 
-export const truncatedDefinitionList = () => (
+export const DefaultStory = () => (
   <TruncatedDefinitionList
     dictionary={object('dictionary', basic)}
     title={text('title', 'Basic definitions')}
@@ -38,7 +38,9 @@ export const truncatedDefinitionList = () => (
   />
 );
 
-export const withTooltips = () => (
+DefaultStory.storyName = 'Default';
+
+export const WithTooltips = () => (
   <TruncatedDefinitionList
     dictionary={object('dictionary', advanced)}
     title={text('title', 'Network Details')}

ui/components/ui/typography/typography.stories.js

@@ -9,11 +9,11 @@ import {
 import Typography from '.';
 
 export default {
-  title: 'Typography',
+  title: 'Components/UI/Typography',
   id: __filename,
 };
 
-export const list = () => (
+export const List = () => (
   <div style={{ width: '80%', flexDirection: 'column' }}>
     {Object.values(TYPOGRAPHY).map((variant) => (
       <div key={variant} style={{ width: '100%' }}>

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

@@ -5,7 +5,7 @@ import Button from '../button';
 import UpdateNicknamePopover from '.';
 
 export default {
-  title: 'UpdateNickname',
+  title: 'Components/UI/UpdateNickname',
   id: __filename,
 };
 

ui/components/ui/url-icon/url-icon.stories.js

@@ -3,7 +3,7 @@ import { text } from '@storybook/addon-knobs';
 import UrlIcon from './url-icon';
 
 export default {
-  title: 'UrlIcon',
+  title: 'Components/UI/UrlIcon',
   id: __filename,
 };
 

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js

@@ -7,7 +7,7 @@ import { updateMetamaskState } from '../../store/actions';
 import ConfirmAddSuggestedToken from '.';
 
 export default {
-  title: 'Confirmation Screens',
+  title: 'Pages/ConfirmAddSuggestedToken',
   id: __filename,
 };
 
@@ -42,7 +42,7 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const AddSuggestedToken = () => {
+export const DefaultStory = () => {
   const state = store.getState();
   store.dispatch(
     updateMetamaskState(
@@ -58,3 +58,5 @@ export const AddSuggestedToken = () => {
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -11,7 +11,7 @@ import { domainMetadata } from '../../../.storybook/initial-states/approval-scre
 import ConfirmApprove from '.';
 
 export default {
-  title: 'Confirmation Screens',
+  title: 'Pages/ConfirmApprove',
   id: __filename,
 };
 
@@ -58,7 +58,7 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const ApproveTokens = () => {
+export const DefaultStory = () => {
   const state = store.getState();
   store.dispatch(
     updateMetamaskState(
@@ -73,3 +73,5 @@ export const ApproveTokens = () => {
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -7,7 +7,7 @@ import { updateTransactionParams } from '../../store/actions';
 import ConfirmDeployContract from '.';
 
 export default {
-  title: 'Confirmation Screens',
+  title: 'Pages/ConfirmDeployContract',
   id: __filename,
 };
 
@@ -49,10 +49,12 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const DeployContract = () => {
+export const DefaultStory = () => {
   return (
     <PageSet>
       <ConfirmDeployContract />
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js

@@ -6,7 +6,7 @@ import { updateMetamaskState } from '../../store/actions';
 import ConfirmEncryptionPublicKey from '.';
 
 export default {
-  title: 'Confirmation Screens',
+  title: 'Pages/ConfirmEncryptionPublicKey',
   id: __filename,
 };
 
@@ -38,10 +38,12 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const ConfirmEncryption = () => {
+export const DefaultStory = () => {
   return (
     <PageSet>
       <ConfirmEncryptionPublicKey />
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/confirm-import-token/confirm-import-token.stories.js

@@ -9,7 +9,7 @@ import { updateMetamaskState } from '../../store/actions';
 import ConfirmAddToken from '.';
 
 export default {
-  title: 'Confirmation Screens',
+  title: 'Pages/ConfirmImportToken',
   id: __filename,
 };
 
@@ -35,7 +35,7 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const AddToken = () => {
+export const DefaultStory = () => {
   const { metamask: state } = store.getState();
   store.dispatch(
     updateMetamaskState(
@@ -51,3 +51,5 @@ export const AddToken = () => {
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -6,7 +6,7 @@ import { updateTransactionParams } from '../../store/actions';
 import ConfirmSendEther from '.';
 
 export default {
-  title: 'Confirmation Screens',
+  title: 'Pages/ConfirmSendEther',
   id: __filename,
 };
 
@@ -48,10 +48,12 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const SendEther = () => {
+export const DefaultStory = () => {
   return (
     <PageSet>
       <ConfirmSendEther />
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import ConfirmSendToken from './confirm-send-token.component';
 
 export default {
-  title: 'Confirmation Screens',
+  title: 'Pages/ConfirmSendToken',
   id: __filename,
 };
 
@@ -10,10 +10,12 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const SendToken = () => {
+export const DefaultStory = () => {
   return (
     <PageSet>
       <ConfirmSendToken />
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -3,13 +3,13 @@ import { store } from '../../../.storybook/preview';
 import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component';
 
 export default {
-  title: 'Confirmation Screens',
+  title: 'Pages/ConfirmTokenTransactionBase',
   id: __filename,
 };
 
 const state = store.getState();
 
-export const ConfirmTokenTransaction = () => {
+export const DefaultStory = () => {
   const { metamask, confirmTransaction } = state;
   const { currentCurrency } = metamask;
   const { fiatTransactionTotal } = confirmTransaction;
@@ -21,3 +21,5 @@ export const ConfirmTokenTransaction = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -3,7 +3,7 @@ import React from 'react';
 import ConfirmTransactionBase from '.';
 
 export default {
-  title: 'Confirmation Screens',
+  title: 'Pages/ConfirmTransactionBase',
   id: __filename,
 };
 
@@ -11,10 +11,12 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const ConfirmTransactionBaseComponent = () => {
+export const DefaultStory = () => {
   return (
     <PageSet>
       <ConfirmTransactionBase />
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/connected-accounts/connected-accounts.stories.js

@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import ConnectedAccounts from './connected-accounts.component';
 
 export default {
-  title: 'Connected Accounts',
+  title: 'Pages/ConnectedAccounts',
   id: __filename,
 };
 
@@ -17,7 +17,7 @@ const identities = {
   name: 'Account 1',
   address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
 };
-export const ConnectedAccountComponent = () => {
+export const DefaultStory = () => {
   return (
     <ConnectedAccounts
       connectedAccounts={account}
@@ -29,3 +29,5 @@ export const ConnectedAccountComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/connected-sites/connected-sites.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ConnectedSites from '.';
 
 export default {
-  title: 'Connected Sites',
+  title: 'Pages/ConnectedSites',
   id: __filename,
 };
 
@@ -11,10 +11,12 @@ const PageSet = ({ children }) => {
   return children;
 };
 
-export const ConnectedSitesComponent = () => {
+export const DefaultStory = () => {
   return (
     <PageSet>
       <ConnectedSites />
     </PageSet>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/create-account/connect-hardware/account-list.stories.js

@@ -9,15 +9,16 @@ import AccountList from './account-list';
 const store = configureStore(testData);
 
 export default {
-  title: 'Account List',
+  title: 'Pages/CreateAccount/ConnectHardware/AccountList',
   id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
+
 global.platform = {
   openTab: () => action('Open Tab')(),
 };
 
-export const AccountListComponent = () => {
+export const DefaultStory = () => {
   const [selectedAccounts, setSelectedAccounts] = useState([
     {
       name: 'This is a Really Long Account Name',
@@ -66,3 +67,5 @@ export const AccountListComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/create-account/connect-hardware/select-hardware.stories.js

@@ -4,11 +4,11 @@ import { LEDGER_TRANSPORT_TYPES } from '../../../../shared/constants/hardware-wa
 import SelectHardware from './select-hardware';
 
 export default {
-  title: 'Connect Hardware Wallet',
+  title: 'Pages/CreateAccount/ConnectHardware/SelectHardware',
   id: __filename,
 };
 
-export const SelectHardwareComponent = () => {
+export const DefaultStory = () => {
   return (
     <SelectHardware
       browserSupported
@@ -19,6 +19,9 @@ export const SelectHardwareComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';
+
 export const BrowserNotSupported = () => {
   return (
     <SelectHardware

ui/pages/create-account/new-account.stories.js

@@ -3,10 +3,12 @@ import { action } from '@storybook/addon-actions';
 import NewAccountCreateForm from './new-account.component';
 
 export default {
-  title: 'New Account',
+  title: 'Pages/CreateAccount/NewAccount',
   id: __filename,
 };
 
-export const NewAccountComponent = () => {
+export const DefaultStory = () => {
   return <NewAccountCreateForm createAccount={action('Account Created')} />;
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/first-time-flow/create-password/create-password.stories.js

@@ -4,7 +4,7 @@ import ImportWithSeedPhrase from './import-with-seed-phrase/import-with-seed-phr
 import NewAccount from './new-account';
 
 export default {
-  title: 'Create Password',
+  title: 'Pages/FirstTimeFlow/CreatePassword',
   id: __filename,
 };
 

ui/pages/first-time-flow/end-of-flow/end-of-flow.stories.js

@@ -2,10 +2,12 @@ import React from 'react';
 import EndOfFlowScreen from './end-of-flow.component';
 
 export default {
-  title: 'First Time Flow',
+  title: 'Pages/FirstTimeFlow/EndOfFlow',
   id: __filename,
 };
 
-export const EndOfFlowComponent = () => {
+export const DefaultStory = () => {
   return <EndOfFlowScreen />;
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.stories.js

@@ -3,14 +3,16 @@ import { action } from '@storybook/addon-actions';
 import MetaMetricsOptIn from './metametrics-opt-in.component';
 
 export default {
-  title: 'First Time Flow',
+  title: 'Pages/FirstTimeFlow/MetametricsOptIn',
   id: __filename,
 };
 
-export const MetaMetricsOptInComponent = () => {
+export const DefaultStory = () => {
   return (
     <MetaMetricsOptIn
       setParticipateInMetaMetrics={action('Participating in MetaMetrics')}
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/first-time-flow/select-action/select-action.stories.js

@@ -2,10 +2,12 @@ import React from 'react';
 import SelectAction from './select-action.component';
 
 export default {
-  title: 'First Time Flow',
+  title: 'Pages/FirstTimeFlow/SelectAction',
   id: __filename,
 };
 
-export const SelectActionComponent = () => {
+export const DefaultStory = () => {
   return <SelectAction />;
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/first-time-flow/welcome/welcome.stories.js

@@ -2,10 +2,12 @@ import React from 'react';
 import Welcome from './welcome.component';
 
 export default {
-  title: 'First Time Flow',
+  title: 'Pages/FirstTimeFlow/Welcome',
   id: __filename,
 };
 
-export const WelcomeComponent = () => {
+export const DefaultStory = () => {
   return <Welcome />;
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/import-token/import-token.stories.js

@@ -4,10 +4,12 @@ import { boolean } from '@storybook/addon-knobs';
 import ImportToken from './import-token.component';
 
 export default {
-  title: 'Import Token',
+  title: 'Pages/ImportToken',
   id: __filename,
 };
 
-export const ImportTokenComponent = () => {
+export const DefaultStory = () => {
   return <ImportToken showSearchTab={boolean('Show Search Tab', false)} />;
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.stories.js

@@ -2,10 +2,12 @@ import React from 'react';
 import TokenListPlaceholder from './token-list-placeholder.component';
 
 export default {
-  title: 'TokenListPlaceholder',
+  title: 'Pages/ImportToken/TokenList/TokenListPlaceholder',
   id: __filename,
 };
 
-export const TokenListPlaceholderComponent = () => {
+export const DefaultStory = () => {
   return <TokenListPlaceholder />;
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/import-token/token-search/token-search.stories.js

@@ -2,10 +2,12 @@ import React from 'react';
 import TokenSearch from './token-search.component';
 
 export default {
-  title: 'TokenSearch',
+  title: 'Pages/ImportToken/TokenSearch',
   id: __filename,
 };
 
-export const TokenSearchComponent = () => {
+export const DefaultStory = () => {
   return <TokenSearch />;
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/mobile-sync/mobile-sync.stories.js

@@ -3,12 +3,14 @@ import { action } from '@storybook/addon-actions';
 import MobileSyncPage from './mobile-sync.component';
 
 export default {
-  title: 'Mobile Sync',
+  title: 'Pages/MobileSyncPage',
   id: __filename,
 };
 
-export const MobileSyncComponent = () => {
+export const DefaultStory = () => {
   return (
     <MobileSyncPage requestRevealSeedWords={action('Mobile Sync Requested')} />
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/onboarding-flow/creation-successful/creation-successful.stories.js

@@ -2,14 +2,16 @@ import React from 'react';
 import CreationSuccessful from './creation-successful';
 
 export default {
-  title: 'Onboarding - Creation Successful',
+  title: 'Pages/OnboardingFlow/CreationSuccessful',
   id: __filename,
 };
 
-export const Base = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ maxHeight: '2000px' }}>
       <CreationSuccessful />
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/onboarding-flow/metametrics/metametrics.stories.js

@@ -2,8 +2,10 @@ import React from 'react';
 import OnboardingMetametrics from './metametrics';
 
 export default {
-  title: 'Onboarding',
+  title: 'Pages/OnboardingFlow/OnboardingMetametrics',
   id: __filename,
 };
 
-export const OnboardingComponent = () => <OnboardingMetametrics />;
+export const DefaultStory = () => <OnboardingMetametrics />;
+
+DefaultStory.storyName = 'Default';

ui/pages/onboarding-flow/pin-extension/pin-extension.stories.js

@@ -2,8 +2,10 @@ import React from 'react';
 import OnboardingPinExtension from './pin-extension';
 
 export default {
-  title: 'Onboarding',
+  title: 'Pages/OnboardingFlow/OnboardingPinExtension',
   id: __filename,
 };
 
-export const OnboardingComponent = () => <OnboardingPinExtension />;
+export const DefaultStory = () => <OnboardingPinExtension />;
+
+DefaultStory.storyName = 'Default';

ui/pages/onboarding-flow/privacy-settings/privacy-settings.stories.js

@@ -2,14 +2,16 @@ import React from 'react';
 import PrivacySettings from './privacy-settings';
 
 export default {
-  title: 'Onboarding - Privacy Settings',
+  title: 'Pages/OnboardingFlow/PrivacySettings',
   id: __filename,
 };
 
-export const Base = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ maxHeight: '2000px' }}>
       <PrivacySettings />
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.stories.js

@@ -2,14 +2,16 @@ import React from 'react';
 import SecureYourWallet from './secure-your-wallet';
 
 export default {
-  title: 'Onboarding - Secure Your Wallet',
+  title: 'Pages/OnboardingFlow/SecureYourWallet',
   id: __filename,
 };
 
-export const Base = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ maxHeight: '2000px' }}>
       <SecureYourWallet />
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/onboarding-flow/welcome/welcome.stories.js

@@ -2,8 +2,10 @@ import React from 'react';
 import OnboardingWelcome from './welcome';
 
 export default {
-  title: 'Onboarding',
+  title: 'Pages/OnboardingFlow/Welcome',
   id: __filename,
 };
 
-export const OnboardingComponent = () => <OnboardingWelcome />;
+export const DefaultStory = () => <OnboardingWelcome />;
+
+DefaultStory.storyName = 'Default';

ui/pages/permissions-connect/permissions-connect.stories.js

@@ -6,7 +6,7 @@ import { PageContainerFooter } from '../../components/ui/page-container';
 import ChooseAccount from './choose-account';
 
 export default {
-  title: 'Permissions Connect',
+  title: 'Pages/PermissionsConnect',
   id: __filename,
 };
 

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

@@ -10,12 +10,12 @@ import AddRecipient from './add-recipient.component';
 const store = configureStore(testData);
 
 export default {
-  title: 'AddRecipient',
+  title: 'Pages/Send/SendContent/AddRecipient',
   id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 
-export const AddRecipientComponent = () => {
+export const DefaultStory = () => {
   const { metamask } = store.getState();
   const { addressBook, recipient } = metamask;
   return (
@@ -35,3 +35,5 @@ export const AddRecipientComponent = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -10,12 +10,12 @@ import SendAssetRow from './send-asset-row.component';
 const store = configureStore(testData);
 
 export default {
-  title: 'SendAssetRow',
+  title: 'Pages/Send/SendContent/SendAssetRow',
   id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 
-export const SendAssetRowComponent = () => {
+export const DefaultStory = () => {
   const { metamask } = store.getState();
 
   const { identities, assetImages, tokens } = metamask;
@@ -34,3 +34,5 @@ export const SendAssetRowComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -4,11 +4,11 @@ import { boolean, text } from '@storybook/addon-knobs';
 import SendContent from './send-content.component';
 
 export default {
-  title: 'SendContent',
+  title: 'Pages/Send/SendContent',
   id: __filename,
 };
 
-export const SendContentComponent = () => {
+export const DefaultStory = () => {
   return (
     <SendContent
       showHexData={boolean('Show Hex Data', false)}
@@ -22,3 +22,5 @@ export const SendContentComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -4,11 +4,11 @@ import { number, boolean } from '@storybook/addon-knobs';
 import GasFeeDisplay from './gas-fee-display.component';
 
 export default {
-  title: 'GasFeeDisplay',
+  title: 'Pages/Send/SendContent/SendGasRow/GasFeeDisplay',
   id: __filename,
 };
 
-export const GasFeeDisplayComponent = () => {
+export const DefaultStory = () => {
   const gasTotal = number('Gas Total', 10000000000);
   return (
     <GasFeeDisplay
@@ -18,3 +18,5 @@ export const GasFeeDisplayComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -14,12 +14,12 @@ import SendGasRow from './send-gas-row.component';
 const store = configureStore(testData);
 
 export default {
-  title: 'SendGasRow',
+  title: 'Pages/Send/SendContent/SendGasRow',
   id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 
-export const SendGasRowComponent = () => {
+export const DefaultStory = () => {
   const state = store.getState();
   const { metamask } = state;
   const { send } = metamask;
@@ -75,3 +75,5 @@ export const SendGasRowComponent = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.stories.js

@@ -3,11 +3,11 @@ import { boolean } from '@storybook/addon-knobs';
 import SendHexDataRow from './send-hex-data-row.component';
 
 export default {
-  title: 'SendHexDataRow',
+  title: 'Pages/Send/SendContent/SendHexDataRow',
   id: __filename,
 };
 
-export const SendHexDataRowComponent = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ width: 450 }}>
       <SendHexDataRow
@@ -17,3 +17,5 @@ export const SendHexDataRowComponent = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/send/send-footer/send-footer.stories.js

@@ -5,11 +5,11 @@ import { boolean } from '@storybook/addon-knobs';
 import SendFooter from './send-footer.component';
 
 export default {
-  title: 'SendFooter',
+  title: 'Pages/Send/SendFooter',
   id: __filename,
 };
 
-export const SendFooterComponent = () => {
+export const DefaultStory = () => {
   const disabled = boolean('Disabled', false);
   return (
     <SendFooter
@@ -26,3 +26,5 @@ export const SendFooterComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/send/send-header/send-header.stories.js

@@ -15,11 +15,11 @@ import { ASSET_TYPES, SEND_STAGES } from '../../../ducks/send';
 import SendHeader from './send-header.component';
 
 export default {
-  title: 'SendHeader',
+  title: 'Pages/Send/SendHeader',
   id: __filename,
 };
 
-export const SendHeaderComponent = () => {
+export const DefaultStory = () => {
   const store = createStore(
     combineReducers({ send: sendSBReducer, history: historySBReducer }),
   );
@@ -52,3 +52,5 @@ export const SendHeaderComponent = () => {
     </Provider>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/settings/advanced-tab/advanced-tab.stories.js

@@ -3,11 +3,11 @@ import { text, boolean } from '@storybook/addon-knobs';
 import AdvancedTab from './advanced-tab.component';
 
 export default {
-  title: 'AdvancedTab',
+  title: 'Pages/Settings/AdvancedTab',
   id: __filename,
 };
 
-export const AdvancedTabComponent = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ flex: 1, height: 500 }}>
       <AdvancedTab
@@ -44,3 +44,5 @@ export const AdvancedTabComponent = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/settings/contact-list-tab/contact-list-tab.stories.js

@@ -10,12 +10,12 @@ import ContactListTab from './contact-list-tab.component';
 const store = configureStore(testData);
 
 export default {
-  title: 'ContactListTab',
+  title: 'Pages/Settings/ContactListTab',
   id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 
-export const ContactListTabComponent = () => {
+export const DefaultStory = () => {
   const { metamask } = store.getState();
   const { addresses } = metamask;
   const addressBook = object('Address Book', addresses);
@@ -36,3 +36,5 @@ export const ContactListTabComponent = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/settings/settings.stories.js

@@ -19,7 +19,7 @@ import {
 import SettingsPage from './settings.component';
 
 export default {
-  title: 'SettingPage',
+  title: 'Pages/SettingsPage',
   id: __filename,
   decorators: [
     (story) => (

ui/pages/swaps/awaiting-signatures/awaiting-signatures.stories.js

@@ -2,10 +2,12 @@ import React from 'react';
 import AwaitingSignatures from './awaiting-signatures';
 
 export default {
-  title: 'Signatures',
+  title: 'Pages/Swaps/AwaitingSignatures',
   id: __filename,
 };
 
-export const AwaitingSignaturesComponent = () => {
+export const DefaultStory = () => {
   return <AwaitingSignatures />;
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/swaps/build-quote/build-quote.stories.js

@@ -126,11 +126,11 @@ const tokensToSearch = tokens.map((token) => ({
 }));
 
 export default {
-  title: 'BuildQuote',
+  title: 'Pages/Swaps/BuildQuote',
   id: __filename,
 };
 
-export const Default = () => {
+export const DefaultStory = () => {
   const [inputValue, onInputChange] = useState(null);
   const [selectedFromToken, setSelectedFromToken] = useState(null);
   const formattedSwapFromFiatValue = `$${(Number(inputValue) * 4).toFixed(2)}`;
@@ -195,3 +195,5 @@ export const Default = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/swaps/countdown-timer/countdown-timer.stories.js

@@ -3,14 +3,14 @@ import { number } from '@storybook/addon-knobs';
 import CountdownTimer from './countdown-timer';
 
 export default {
-  title: 'CountdownTimer',
+  title: 'Pages/Swaps/CountdownTimer',
   id: __filename,
 };
 
 const getTimeStartedFromDecrimentSeconds = (seconds) =>
   Date.now() - seconds * 1000;
 
-export const Default = () => {
+export const DefaultStory = () => {
   const timeStartedSecondDecriment = number(
     'Set timeStarted to curren time minus X seconds',
     10,
@@ -26,6 +26,8 @@ export const Default = () => {
   );
 };
 
+DefaultStory.storyName = 'Default';
+
 export const CustomTimerBase = () => {
   const timeStartedSecondDecriment = number(
     'Set timeStarted to curren time minus X seconds',

ui/pages/swaps/dropdown-input-pair/dropdown-input-pair.stories.js

@@ -113,7 +113,7 @@ const tokens = [
 ];
 
 export default {
-  title: 'DropdownInputPair',
+  title: 'Pages/Swaps/DropdownInputPair',
   id: __filename,
 };
 
@@ -127,7 +127,7 @@ const tokensToSearch = tokens.map((token) => ({
   rightSecondaryLabel: `$${(Math.random() * 1000).toFixed(2)}`,
 }));
 
-export const Basic = () => {
+export const DefaultStory = () => {
   const [inputValue, setInputValue] = useState();
 
   return (
@@ -151,3 +151,5 @@ export const Basic = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js

@@ -113,7 +113,7 @@ const tokens = [
 ];
 
 export default {
-  title: 'DropdownSearchList',
+  title: 'Pages/Swaps/DropdownSearchList',
   id: __filename,
 };
 
@@ -127,7 +127,7 @@ const tokensToSearch = tokens.map((token) => ({
   rightSecondaryLabel: `$${(Math.random() * 1000).toFixed(2)}`,
 }));
 
-export const TokenSearchDropdown = () => {
+export const DefaultStory = () => {
   return (
     <div style={{ height: '82vh', width: '357px' }}>
       <DropdownSearchList
@@ -144,3 +144,5 @@ export const TokenSearchDropdown = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

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

@@ -3,11 +3,11 @@ import { text, number } from '@storybook/addon-knobs';
 import ExchangeRateDisplay from './exchange-rate-display';
 
 export default {
-  title: 'ExchangeRateDisplay',
+  title: 'Pages/Swaps/ExchangeRateDisplay',
   id: __filename,
 };
 
-export const Default = () => {
+export const DefaultStory = () => {
   return (
     <ExchangeRateDisplay
       primaryTokenValue={text('primaryTokenValue', '2000000000000000000')}
@@ -20,6 +20,8 @@ export const Default = () => {
   );
 };
 
+DefaultStory.storyName = 'Default';
+
 export const WhiteOnBlue = () => {
   return (
     <div

ui/pages/swaps/fee-card/fee-card.stories.js

@@ -15,7 +15,7 @@ const containerStyle = {
 };
 
 export default {
-  title: 'FeeCard',
+  title: 'Pages/Swaps/FeeCard',
   id: __filename,
 };
 

ui/pages/swaps/import-token/import-token.stories.js

@@ -3,11 +3,11 @@ import { action } from '@storybook/addon-actions';
 import ImportToken from './import-token';
 
 export default {
-  title: 'Import Token',
+  title: 'Pages/Swaps/ImportToken',
   id: __filename,
 };
 
-export const ImportTokenComponent = () => {
+export const DefaultStory = () => {
   const data = {
     iconUrl: './BAT_icon.svg',
     name: 'Basic Attention Token',
@@ -21,3 +21,5 @@ export const ImportTokenComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js

@@ -3,11 +3,11 @@ import { text, number } from '@storybook/addon-knobs';
 import MainQuoteSummary from './main-quote-summary';
 
 export default {
-  title: 'MainQuoteSummary',
+  title: 'Pages/Swaps/MainQuoteSummary',
   id: __filename,
 };
 
-export const BestQuote = () => {
+export const DefaultStory = () => {
   return (
     <div
       style={{
@@ -30,3 +30,5 @@ export const BestQuote = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js

@@ -6,11 +6,11 @@ import mockQuoteData from './mock-quote-data';
 import SelectQuotePopover from '.';
 
 export default {
-  title: 'SelectQuotePopover',
+  title: 'Pages/Swaps/SelectQuotePopover',
   id: __filename,
 };
 
-export const Default = () => {
+export const DefaultStory = () => {
   const [showPopover, setShowPopover] = useState(false);
 
   return (
@@ -28,3 +28,5 @@ export const Default = () => {
     </div>
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/swaps/slippage-buttons/slippage-buttons.stories.js

@@ -3,12 +3,14 @@ import { action } from '@storybook/addon-actions';
 import SlippageButtons from '.';
 
 export default {
-  title: 'SlippageButtons',
+  title: 'Pages/Swaps/SlippageButtons',
   id: __filename,
 };
 
-export const Default = () => (
+export const DefaultStory = () => (
   <div style={{ height: '200px', marginTop: '160px' }}>
     <SlippageButtons onSelect={action('slippage')} />
   </div>
 );
+
+DefaultStory.storyName = 'Default';

ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.stories.js

@@ -19,7 +19,7 @@ import GasModalPageContainer from './swaps-gas-customization-modal.component';
 const store = configureStore(testData);
 
 export default {
-  title: 'Swap',
+  title: 'Pages/Swaps/GasModalPageContainer',
   id: __filename,
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
@@ -38,7 +38,7 @@ const sumHexWEIsToRenderableEth = (hexWEIs, currencySymbol = 'ETH') => {
   );
 };
 
-export const GasModalPageContainerComponent = () => {
+export const DefaultStory = () => {
   // Send Amount Data
   const hexWei = getWeiHexFromDecimalValue({
     value: String(number('Send Amount (this should be static)', 0.01)),
@@ -64,8 +64,6 @@ export const GasModalPageContainerComponent = () => {
   const { metamask } = store.getState();
   const { currentCurrency, conversionRate } = metamask;
 
-  console.log('metamask', store.getState());
-
   useEffect(() => {
     // Transfer Fee
     const customGasTotal = calcGasTotal(gasLimit, gasPrice);
@@ -141,11 +139,9 @@ export const GasModalPageContainerComponent = () => {
         buttonDataLoading: true,
       }}
       setSwapsCustomizationModalPrice={(newPrice) => {
-        console.log('updatedPrice', newPrice);
         setGasPrice(newPrice);
       }}
       setSwapsCustomizationModalLimit={(newLimit) => {
-        console.log('updatedLimit', newLimit);
         setGasLimit(newLimit);
       }}
       customGasPrice={gasPrice}
@@ -156,3 +152,5 @@ export const GasModalPageContainerComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';

ui/pages/unlock-page/unlock-page.stories.js

@@ -3,11 +3,11 @@ import { action } from '@storybook/addon-actions';
 import UnlockPage from './unlock-page.component';
 
 export default {
-  title: 'UnlockPage',
+  title: 'Pages/UnlockPage',
   id: __filename,
 };
 
-export const UnlockPageComponent = () => {
+export const DefaultStory = () => {
   return (
     <UnlockPage
       onSubmit={action('Login')}
@@ -19,3 +19,5 @@ export const UnlockPageComponent = () => {
     />
   );
 };
+
+DefaultStory.storyName = 'Default';