feat(story): use new theme package

bigcommerce · Jul 25, 2019 · f2b6253 · f2b6253
1 parent f439df0
commit f2b6253
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 20 deletions.
diff --git a/packages/storybook/.storybook/bc-theme.ts b/packages/storybook/.storybook/bc-theme.ts
@@ -1,9 +1,9 @@
-import { defaultTheme } from '@bigcommerce/big-design';
+import { theme } from '@bigcommerce/big-design-theme';
 import { create } from '@storybook/theming';
 
 import logo from './assets/logo.svg';
 
-const { colors } = defaultTheme;
+const { colors } = theme;
 
 export default create({
   appBg: colors.secondary10,

diff --git a/packages/storybook/.storybook/config.tsx b/packages/storybook/.storybook/config.tsx
@@ -1,4 +1,4 @@
-import { defaultTheme } from '@bigcommerce/big-design';
+import { theme } from '@bigcommerce/big-design-theme';
 import { withKnobs } from '@storybook/addon-knobs';
 import { addDecorator, addParameters, configure } from '@storybook/react';
 import React from 'react';
@@ -7,6 +7,8 @@ import { StoryWrapper } from '../components/StoryWrapper/StoryWrapper';
 
 import bcTheme from './bc-theme';
 
+const { colors } = theme;
+
 addParameters({
   options: {
     panelPosition: 'right',
@@ -22,7 +24,7 @@ addParameters({
     {
       default: true,
       name: 'Default',
-      value: defaultTheme.colors.secondary10,
+      value: colors.secondary10,
     },
     {
       name: 'White',

diff --git a/packages/storybook/components/Code/styled.tsx b/packages/storybook/components/Code/styled.tsx
@@ -1,4 +1,4 @@
-import { defaultTheme } from '@bigcommerce/big-design';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
 import { CodeProps } from './';

diff --git a/packages/storybook/components/CodePreview/CodePreview.tsx b/packages/storybook/components/CodePreview/CodePreview.tsx
@@ -1,4 +1,5 @@
 import * as BigDesign from '@bigcommerce/big-design';
+import { theme } from '@bigcommerce/big-design-theme';
 import clipboardCopy from 'clipboard-copy';
 import { Language } from 'prism-react-renderer';
 import React, { useContext, useState } from 'react';
@@ -40,7 +41,7 @@ export const CodePreview: React.FC<CodePreviewProps> = props => {
     <BigDesign.Box border="box" marginBottom="xxLarge">
       <LiveProvider code={code} scope={scope} theme={editorTheme} language={language}>
         <BigDesign.Box padding="medium" backgroundColor="white" borderBottom="box">
-          <ThemeProvider theme={BigDesign.defaultTheme}>
+          <ThemeProvider theme={theme}>
             <LivePreview />
           </ThemeProvider>
         </BigDesign.Box>

diff --git a/packages/storybook/components/CodePreview/styled.tsx b/packages/storybook/components/CodePreview/styled.tsx
@@ -1,4 +1,4 @@
-import { defaultTheme } from '@bigcommerce/big-design';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { LiveError } from 'react-live';
 import styled from 'styled-components';
 

diff --git a/packages/storybook/components/Collapsible/styled.tsx b/packages/storybook/components/Collapsible/styled.tsx
@@ -1,4 +1,5 @@
-import { defaultTheme, Flex } from '@bigcommerce/big-design';
+import { Flex } from '@bigcommerce/big-design';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
 export const StyledFlex = styled(Flex)`

diff --git a/packages/storybook/components/List/styled.tsx b/packages/storybook/components/List/styled.tsx
@@ -1,20 +1,21 @@
-import { defaultTheme } from '@bigcommerce/big-design';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
 import { ListProps } from './List';
 
 const SharedListStyles = css`
-  color: ${({ theme }) => theme.colors.secondary70}
+  color: ${({ theme }) => theme.colors.secondary70};
   font-size: ${({ theme }) => theme.typography.fontSize.medium};
   font-weight: ${({ theme }) => theme.typography.fontWeight.regular};
   line-height: ${({ theme }) => theme.lineHeight.medium};
-  padding-left: ${({ theme }) => theme.spacing.xLarge}
+  padding-left: ${({ theme }) => theme.spacing.xLarge};
 `;
 
 export const StyledOrderedList = styled.ol<ListProps>`
-  ${SharedListStyles}
-  list-style-type: ${({ bulleted }) => `${bulleted ? 'decimal' : 'none'}`}
+  ${SharedListStyles};
+  list-style-type: ${({ bulleted }) => `${bulleted ? 'decimal' : 'none'}`};
 `;
+
 export const StyledUnorderedList = styled.ul<ListProps>`
   ${SharedListStyles}
   list-style-type: ${({ bulleted }) => `${bulleted ? 'disc' : 'none'}`}

diff --git a/packages/storybook/components/PropTable/styled.tsx b/packages/storybook/components/PropTable/styled.tsx
@@ -1,4 +1,4 @@
-import { defaultTheme } from '@bigcommerce/big-design';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css } from 'styled-components';
 
 // TODO: Convert to BigDesign table when built
@@ -15,9 +15,9 @@ export const StyledTableFigure = styled.figure`
 
 export const StyledTable = styled.table`
   border-collapse: collapse;
-  color: ${({ theme }) => theme.colors.secondary70}
-  margin-bottom: ${({ theme }) => theme.spacing.xLarge}
-  margin-top: ${({ theme }) => theme.spacing.xLarge}
+  color: ${({ theme }) => theme.colors.secondary70};
+  margin-bottom: ${({ theme }) => theme.spacing.xLarge};
+  margin-top: ${({ theme }) => theme.spacing.xLarge};
   text-align: left;
   width: 100%;
 `;

diff --git a/packages/storybook/components/SnippetControls/SnippetControls.tsx b/packages/storybook/components/SnippetControls/SnippetControls.tsx
@@ -1,5 +1,4 @@
 import {
-  defaultTheme,
   AssignmentIcon,
   Box,
   Button,
@@ -9,6 +8,7 @@ import {
   RestoreIcon,
   Small,
 } from '@bigcommerce/big-design';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import React, { useContext, useState } from 'react';
 
 import { CodeEditorThemeContext } from '../StoryWrapper/StoryWrapper';

diff --git a/packages/storybook/components/SnippetControls/styled.tsx b/packages/storybook/components/SnippetControls/styled.tsx
@@ -1,4 +1,5 @@
-import { defaultTheme, Flex } from '@bigcommerce/big-design';
+import { Flex } from '@bigcommerce/big-design';
+import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled from 'styled-components';
 
 export const StyledFlex = styled(Flex)`

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -10,7 +10,7 @@
     "deploy-storybook": "storybook-to-ghpages",
     "ci": "yarn run lint && build-storybook",
     "lint": "yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
-    "lint:prettier": "prettier --check 'stories/**/*.{ts,tsx}'",
+    "lint:prettier": "prettier --check '{stories,components}/**/*.{ts,tsx}'",
     "lint:tsc": "tsc --noEmit",
     "lint:tslint": "tslint -c tslint.json -p tsconfig.json",
     "precommit": "lint-staged",
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@bigcommerce/big-design": "^0.5.0",
+    "@bigcommerce/big-design-theme": "^0.0.1",
     "clipboard-copy": "^3.0.0",
     "prism-react-renderer": "^0.1.7",
     "react": "^16.8.4",