[DDW-646] Update story name and make screen as full with sidebar on d…

…elegation story in storybook
input-output-hk · May 16, 2019 · 183f97a · 183f97a
1 parent 3d621ce
commit 183f97a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 29 deletions.
diff --git a/storybook/stories/Delegation.stories.js b/storybook/stories/Delegation.stories.js
@@ -2,18 +2,34 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, number } from '@storybook/addon-knobs';
+import StoryLayout from './support/StoryLayout';
+import StoryProvider from './support/StoryProvider';
 import StoryDecorator from './support/StoryDecorator';
+import { CATEGORIES_BY_NAME } from '../../source/renderer/app/config/sidebarConfig';
 import Delegation from '../../source/renderer/app/components/staking/Delegation';
 
 const timeLeft = (78 * 60 + 10) * 60 * 1000;
 
-storiesOf('Delegation', module)
-  .addDecorator((story, context) => (
-    <StoryDecorator>{withKnobs(story, context)}</StoryDecorator>
-  ))
+storiesOf('DelegationScreens', module)
+  .addDecorator((story, context) => {
+    const storyWithKnobs = withKnobs(story, context);
+
+    return (
+      <StoryDecorator>
+        <StoryProvider>
+          <StoryLayout
+            activeSidebarCategory={CATEGORIES_BY_NAME.DELEGATION.route}
+            storyName={context.story}
+          >
+            {storyWithKnobs}
+          </StoryLayout>
+        </StoryProvider>
+      </StoryDecorator>
+    );
+  })
   // ====== Stories ======
 
-  .add('Start', () => (
+  .add('Start of decentralisation notification', () => (
     <div>
       <Delegation
         currentLocale="en-US"

diff --git a/storybook/stories/support/StoryLayout.js b/storybook/stories/support/StoryLayout.js
@@ -6,13 +6,10 @@ import { observer, inject } from 'mobx-react';
 import { action } from '@storybook/addon-actions';
 
 // Assets and helpers
+import { CATEGORIES_BY_NAME } from '../../../source/renderer/app/config/sidebarConfig';
 import { formattedWalletAmount } from '../../../source/renderer/app/utils/formatters';
 import NodeSyncStatusIcon from '../../../source/renderer/app/components/widgets/NodeSyncStatusIcon';
 import Wallet from '../../../source/renderer/app/domains/Wallet.js';
-import walletsIcon from '../../../source/renderer/app/assets/images/sidebar/wallet-ic.inline.svg';
-import settingsIcon from '../../../source/renderer/app/assets/images/sidebar/settings-ic.inline.svg';
-import adaIcon from '../../../source/renderer/app/assets/images/sidebar/ada-redemption-ic.inline.svg';
-import paperCertificateIcon from '../../../source/renderer/app/assets/images/sidebar/paper-certificate-ic.inline.svg';
 import type { SidebarMenus } from '../../../source/renderer/app/components/sidebar/Sidebar';
 import type { SidebarWalletType } from '../../../source/renderer/app/types/sidebarTypes';
 // import type { Wallet } from '../../../source/renderer/app/domains/WalletTransaction';
@@ -37,26 +34,9 @@ type Props = {
 };
 
 const sidebarCategories = [
-  {
-    name: 'WALLETS',
-    route: '/wallets',
-    icon: walletsIcon,
-  },
-  {
-    name: 'ADA_REDEMPTION',
-    route: '/ada-redemption',
-    icon: adaIcon,
-  },
-  {
-    name: 'PAPER_WALLET',
-    route: '/paper-wallet-create-certificate',
-    icon: paperCertificateIcon,
-  },
-  {
-    name: 'SETTINGS',
-    route: '/settings',
-    icon: settingsIcon,
-  },
+  CATEGORIES_BY_NAME.WALLETS,
+  CATEGORIES_BY_NAME.DELEGATION,
+  CATEGORIES_BY_NAME.SETTINGS,
 ];
 
 @inject('stores', 'storiesProps')