BREAKING CHANGE: Update components

.storybook/config.js

@@ -29,7 +29,7 @@ addParameters({ viewport: { viewports: INITIAL_VIEWPORTS } })
 
 addDecorator(withA11y)
 addDecorator(addReadme)
-addDecorator(storyFn => <ThemeProvider theme={createTheme()}>{storyFn()}</ThemeProvider>)
+addDecorator(Story => <ThemeProvider theme={createTheme()}><Story /></ThemeProvider>)
 
 configure(loadStories, module)
 

package.json

@@ -6,7 +6,8 @@
   "dependencies": {
     "lodash.merge": "^4.6.1",
     "lodash.range": "^3.2.0",
-    "polished": "^3.4.1"
+    "polished": "^3.4.1",
+    "react-icons": "^3.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
@@ -19,10 +20,11 @@
     "@storybook/theming": "^5.2.5",
     "@types/enzyme": "^3.10.1",
     "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/jest": "^24.0.12",
+    "@types/jest": "^24.0.18",
     "@types/lodash.merge": "^4.6.4",
     "@types/lodash.range": "^3.2.5",
     "@types/react": "^16.8.16",
+    "@types/react-dom": "^16.9.1",
     "@types/react-test-renderer": "^16.8.1",
     "@types/storybook__react": "^4.0.2",
     "@types/styled-components": "^4.1.19",
@@ -34,7 +36,7 @@
     "eslint-config-smarthr": "^2.0.0",
     "fixpack": "^2.3.1",
     "husky": "^3.0.0",
-    "jest": "^24.1.0",
+    "jest": "^24.9.0",
     "lint-staged": "^9.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.17.0",
@@ -53,8 +55,8 @@
     "stylelint-config-prettier": "^6.0.0",
     "stylelint-config-standard": "^19.0.0",
     "stylelint-config-styled-components": "^0.1.1",
+    "ts-jest": "^24.0.2",
     "stylelint-processor-styled-components": "^1.8.0",
-    "ts-jest": "^24.0.0",
     "ts-loader": "^6.0.0",
     "typescript": "^3.2.4"
   },

src/components/AppBar/AppBar.tsx

@@ -11,11 +11,11 @@ const AppBarComponent: React.FC<MergedComponentProps> = ({ ...props }) => <Wrapp
 
 export const AppBar = withTheme(AppBarComponent)
 
-const getSpaceSize = (size: Size): 'xs' | 's' | 'm' => {
+const getSpaceSize = (size: Size): 'XS' | 'S' | 'M' => {
   const spaceMap: any = {
-    s: 'xs',
-    m: 's',
-    l: 'm',
+    s: 'XS',
+    m: 'S',
+    l: 'M',
   }
   return spaceMap[size]
 }
@@ -28,13 +28,13 @@ const Wrapper = styled.div`
 
     return css`
       padding: ${pcPadding};
-      background: ${palette.Main};
+      background: ${palette.MAIN};
 
-      @media screen and (max-width: ${size.mediaQuery.tablet}px) {
+      @media screen and (max-width: ${size.mediaQuery.TABLET}px) {
         padding: ${tabletPadding};
       }
 
-      @media screen and (max-width: ${size.mediaQuery.sp}px) {
+      @media screen and (max-width: ${size.mediaQuery.SP}px) {
         padding: ${spPadding};
       }
     `

src/components/AppBar/__snapshots__/AppBar.test.tsx.snap

@@ -26,41 +26,41 @@ exports[`AppBar should be match snapshot 1`] = `
           },
         },
         "palette": Object {
-          "Background": "#f5f6fa",
-          "Border": "#d6d6d6",
-          "Column": "#f9f9f9",
-          "Danger": "#ef475b",
-          "Main": "#00a5ab",
-          "Outline": "rgba(0,165,171,0.5)",
-          "Overlay": "rgba(0,0,0,0.15)",
-          "Scrim": "rgba(0,0,0,0.5)",
-          "TextBlack": "#333",
-          "TextGrey": "#767676",
-          "Warning": "#ff8800",
+          "BACKGROUND": "#f5f6fa",
+          "BORDER": "#d6d6d6",
+          "COLUMN": "#f9f9f9",
+          "DANGER": "#ef475b",
+          "MAIN": "#00a5ab",
+          "OUTLINE": "rgba(0,165,171,0.5)",
+          "OVERLAY": "rgba(0,0,0,0.15)",
+          "SCRIM": "rgba(0,0,0,0.5)",
+          "TEXT_BLACK": "#333",
+          "TEXT_DISABLED": "#c1c1c1",
+          "TEXT_GREY": "#767676",
+          "WARNING": "#ff8800",
+          "disableColor": [Function],
           "hoverColor": [Function],
         },
         "size": Object {
           "font": Object {
-            "grande": 16,
-            "short": 13,
-            "tall": 14,
-            "tasting": 12,
-            "trenta": 22,
-            "venti": 20,
+            "GRANDE": 18,
+            "SHORT": 11,
+            "TALL": 14,
+            "VENTI": 24,
           },
           "mediaQuery": Object {
-            "sp": 599,
-            "tablet": 959,
+            "SP": 599,
+            "TABLET": 959,
           },
           "pxToRem": [Function],
           "space": Object {
-            "l": 40,
-            "m": 32,
-            "s": 24,
-            "xl": 48,
-            "xs": 16,
-            "xxl": 56,
-            "xxs": 8,
+            "L": 40,
+            "M": 32,
+            "S": 24,
+            "XL": 48,
+            "XS": 16,
+            "XXL": 56,
+            "XXS": 8,
           },
         },
       }
@@ -90,41 +90,41 @@ exports[`AppBar should be match snapshot 1`] = `
             },
           },
           "palette": Object {
-            "Background": "#f5f6fa",
-            "Border": "#d6d6d6",
-            "Column": "#f9f9f9",
-            "Danger": "#ef475b",
-            "Main": "#00a5ab",
-            "Outline": "rgba(0,165,171,0.5)",
-            "Overlay": "rgba(0,0,0,0.15)",
-            "Scrim": "rgba(0,0,0,0.5)",
-            "TextBlack": "#333",
-            "TextGrey": "#767676",
-            "Warning": "#ff8800",
+            "BACKGROUND": "#f5f6fa",
+            "BORDER": "#d6d6d6",
+            "COLUMN": "#f9f9f9",
+            "DANGER": "#ef475b",
+            "MAIN": "#00a5ab",
+            "OUTLINE": "rgba(0,165,171,0.5)",
+            "OVERLAY": "rgba(0,0,0,0.15)",
+            "SCRIM": "rgba(0,0,0,0.5)",
+            "TEXT_BLACK": "#333",
+            "TEXT_DISABLED": "#c1c1c1",
+            "TEXT_GREY": "#767676",
+            "WARNING": "#ff8800",
+            "disableColor": [Function],
             "hoverColor": [Function],
           },
           "size": Object {
             "font": Object {
-              "grande": 16,
-              "short": 13,
-              "tall": 14,
-              "tasting": 12,
-              "trenta": 22,
-              "venti": 20,
+              "GRANDE": 18,
+              "SHORT": 11,
+              "TALL": 14,
+              "VENTI": 24,
             },
             "mediaQuery": Object {
-              "sp": 599,
-              "tablet": 959,
+              "SP": 599,
+              "TABLET": 959,
             },
             "pxToRem": [Function],
             "space": Object {
-              "l": 40,
-              "m": 32,
-              "s": 24,
-              "xl": 48,
-              "xs": 16,
-              "xxl": 56,
-              "xxs": 8,
+              "L": 40,
+              "M": 32,
+              "S": 24,
+              "XL": 48,
+              "XS": 16,
+              "XXL": 56,
+              "XXS": 8,
             },
           },
         }
@@ -182,41 +182,41 @@ exports[`AppBar should be match snapshot 1`] = `
               },
             },
             "palette": Object {
-              "Background": "#f5f6fa",
-              "Border": "#d6d6d6",
-              "Column": "#f9f9f9",
-              "Danger": "#ef475b",
-              "Main": "#00a5ab",
-              "Outline": "rgba(0,165,171,0.5)",
-              "Overlay": "rgba(0,0,0,0.15)",
-              "Scrim": "rgba(0,0,0,0.5)",
-              "TextBlack": "#333",
-              "TextGrey": "#767676",
-              "Warning": "#ff8800",
+              "BACKGROUND": "#f5f6fa",
+              "BORDER": "#d6d6d6",
+              "COLUMN": "#f9f9f9",
+              "DANGER": "#ef475b",
+              "MAIN": "#00a5ab",
+              "OUTLINE": "rgba(0,165,171,0.5)",
+              "OVERLAY": "rgba(0,0,0,0.15)",
+              "SCRIM": "rgba(0,0,0,0.5)",
+              "TEXT_BLACK": "#333",
+              "TEXT_DISABLED": "#c1c1c1",
+              "TEXT_GREY": "#767676",
+              "WARNING": "#ff8800",
+              "disableColor": [Function],
               "hoverColor": [Function],
             },
             "size": Object {
               "font": Object {
-                "grande": 16,
-                "short": 13,
-                "tall": 14,
-                "tasting": 12,
-                "trenta": 22,
-                "venti": 20,
+                "GRANDE": 18,
+                "SHORT": 11,
+                "TALL": 14,
+                "VENTI": 24,
               },
               "mediaQuery": Object {
-                "sp": 599,
-                "tablet": 959,
+                "SP": 599,
+                "TABLET": 959,
               },
               "pxToRem": [Function],
               "space": Object {
-                "l": 40,
-                "m": 32,
-                "s": 24,
-                "xl": 48,
-                "xs": 16,
-                "xxl": 56,
-                "xxs": 8,
+                "L": 40,
+                "M": 32,
+                "S": 24,
+                "XL": 48,
+                "XS": 16,
+                "XXL": 56,
+                "XXS": 8,
               },
             },
           }

src/components/AppNavi/AppNavi.stories.tsx

@@ -0,0 +1,52 @@
+import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react'
+import * as React from 'react'
+import styled from 'styled-components'
+
+import { AppNavi } from './AppNavi'
+
+const buttons = [
+  {
+    children: 'ボタン1',
+    icon: 'fa-file' as const,
+    current: true,
+  },
+  {
+    children: 'ボタン2',
+    icon: 'fa-user-alt' as const,
+    onClick: action('click!!'),
+  },
+  {
+    children: 'ボタン3',
+    icon: 'fa-cog' as const,
+    onClick: action('click!!'),
+  },
+]
+
+storiesOf('AppNavi', module).add('all', () => (
+  <React.Fragment>
+    <Wrapper>
+      <Description>No child component</Description>
+      <AppNavi label="プラスメニュー" buttons={buttons} />
+    </Wrapper>
+    <Wrapper>
+      <Description>With a child component</Description>
+      <AppNavi label="プラスメニュー" buttons={buttons}>
+        <ChildComponent>Some child component</ChildComponent>
+      </AppNavi>
+    </Wrapper>
+  </React.Fragment>
+))
+
+const Wrapper = styled.div`
+  padding-top: 16px;
+`
+
+const Description = styled.p`
+  margin-bottom: 8px;
+  padding: 0 20px;
+`
+
+const ChildComponent = styled.p`
+  margin: 0 0 0 auto;
+`