fix(SecondaryNavigation): ability to customize item

src/components/SecondaryNavigation/SecondaryNavigationItem.js

@@ -2,63 +2,27 @@
 
 import React from 'react';
 
-import { NAVIGATION_COLORS } from '../../theme/dsmColors';
-import { createStyledTag, createComponentTheme } from '../../utils';
 import { Text } from '../Text';
+import {
+  SecondaryNavigationItemTag,
+  SecondaryNavigationItemBarTag,
+  SecondaryNavigationItemLabelTag,
+} from './SecondaryNavigationItem.theme';
 
 type SecondaryNavigationItemProps = {
   label: string,
+  theme: Object,
 };
 
-const name = 'secondaryNavigationItem';
-
-export const theme = createComponentTheme(name, ({ COLORS }: *) => ({
-  root: {
-    height: '32px',
-
-    '&:hover': {
-      backgroundColor: COLORS.WHITE,
-    },
-
-    '&.active': {
-      backgroundColor: COLORS.WHITE,
-    },
-  },
-}));
-
-const StyledTag = createStyledTag(name, {
-  display: 'flex',
-  backgroundColor: 'inherit',
-  textDecoration: 'none',
-  userSelect: 'none',
-  position: 'relative',
-});
-
-const SecondaryNavigationItemBar = createStyledTag(`${name}ItemBar`, {
-  width: '4px',
-  backgroundColor: 'inherit',
-
-  '.active > &': {
-    backgroundColor: NAVIGATION_COLORS.DSM_DB_SELECTED,
-  },
-});
-
-const SecondaryNavigationItemLabel = createStyledTag(`${name}ItemLabel`, {
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '20px',
-  backgroundColor: 'inherit',
-  opacity: '0.9',
-});
-
-export const SecondaryNavigationItem = ({ label, ...rest }: SecondaryNavigationItemProps) => (
-  <StyledTag { ...rest } >
-    <SecondaryNavigationItemBar />
-    <SecondaryNavigationItemLabel>
+export const SecondaryNavigationItem = ({ label, theme, ...rest }: SecondaryNavigationItemProps) => (
+  <SecondaryNavigationItemTag { ...rest } >
+    <SecondaryNavigationItemBarTag theme={ theme } />
+    <SecondaryNavigationItemLabelTag theme={ theme } >
       <Text>
         { label }
       </Text>
-    </SecondaryNavigationItemLabel>
-  </StyledTag>
+    </SecondaryNavigationItemLabelTag>
+  </SecondaryNavigationItemTag>
 );
 
+export { theme } from './SecondaryNavigationItem.theme';

src/components/SecondaryNavigation/SecondaryNavigationItem.theme.js

@@ -0,0 +1,57 @@
+// @flow
+import { createStyledTag, createComponentTheme } from '../../utils';
+
+const name = 'secondaryNavigationItem';
+
+const rootTheme = createComponentTheme(name, ({ COLORS }: *) => ({
+  root: {
+    height: '32px',
+    display: 'flex',
+    backgroundColor: 'inherit',
+    textDecoration: 'none',
+    userSelect: 'none',
+    position: 'relative',
+
+    '&:hover': {
+      backgroundColor: COLORS.WHITE,
+    },
+
+    '&.active': {
+      backgroundColor: COLORS.WHITE,
+    },
+  },
+}));
+
+
+const barTheme = createComponentTheme(`${name}Bar`, ({ COLORS }: *) => ({
+  root: {
+    width: '4px',
+    backgroundColor: 'inherit',
+
+    '.active > &': {
+      backgroundColor: COLORS.DSM.NAVIGATION_COLORS.DSM_DB_SELECTED,
+    },
+  },
+}));
+
+const labelTheme = createComponentTheme(`${name}Label`, () => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: '20px',
+    backgroundColor: 'inherit',
+    opacity: '0.9',
+  },
+}));
+
+export const theme = {
+  ...rootTheme,
+  ...barTheme,
+  ...labelTheme,
+};
+
+export const SecondaryNavigationItemTag = createStyledTag(name);
+
+export const SecondaryNavigationItemBarTag = createStyledTag(`${name}Bar`);
+
+export const SecondaryNavigationItemLabelTag = createStyledTag(`${name}Label`);

storybook/utils.js

@@ -6,14 +6,17 @@ import { storiesOf } from '@storybook/react';
 import * as boost from '../src';
 import { withInfo } from '@storybook/addon-info';
 
-const { EightBaseBoostProvider, ...components } = boost;
+const { EightBaseBoostProvider, createTheme, ...components } = boost;
+
+const theme = createTheme({
+});
 
 const Root = styled('div')`
   margin: 32px;
 `;
 
 const ThemeDecorator = (storyFn) => (
-  <EightBaseBoostProvider>
+  <EightBaseBoostProvider theme={ theme }>
     <Root>{ storyFn() }</Root>
   </EightBaseBoostProvider>
 );