Merge pull request #280 from kiwicom/refactor-styled-components

DEV: Styled-components theming refactoring
kiwicom · Jul 31, 2018 · 3edc7ac · 3edc7ac
2 parents dd4ede3 + c06feae
commit 3edc7ac
Show file tree

Hide file tree

Showing 175 changed files with 15,317 additions and 20,548 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,6 @@
 {
   "presets": ["react", "env"],
   "plugins": [
-    "styled-jsx/babel",
     "transform-class-properties",
     "transform-object-rest-spread",
     "babel-plugin-styled-components"

diff --git a/docs/theming.md b/docs/theming.md
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "storybook": "start-storybook -p 6007 -c .storybook",
     "build": "yarn clean && yarn build:icons && yarn build:lib && yarn build:module",
     "build:lib": "babel --out-dir lib --ignore *.stories.js,*.test.js,*.storyshot src --copy-files",
-    "build:module": "babel --presets react --plugins styled-jsx/babel,babel-plugin-styled-components,transform-class-properties,transform-object-rest-spread --no-babelrc --out-dir es --ignore *.stories.js,*.test.js,*.storyshot src --copy-files",
+    "build:module": "babel --presets react --plugins babel-plugin-styled-components,transform-class-properties,transform-object-rest-spread --no-babelrc --out-dir es --ignore *.stories.js,*.test.js,*.storyshot src --copy-files",
     "build:icons": "node config/build.js",
     "clean": "rimraf lib es src/icons/*.js",
     "prepare": "npm run build",
@@ -39,8 +39,7 @@
   "peerDependencies": {
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "styled-components": "^3.2.6",
-    "styled-jsx": "^2.2.6"
+    "styled-components": "^3.2.6"
   },
   "dependencies": {
     "@kiwicom/orbit-design-tokens": "^0.1.1",
@@ -97,7 +96,6 @@
     "react-test-renderer": "^16.3.2",
     "rimraf": "^2.6.2",
     "styled-components": "^3.2.6",
-    "styled-jsx": "^2.2.6",
     "svg2png": "^4.1.1",
     "svgo": "^1.0.5"
   },

diff --git a/readme.md b/readme.md
@@ -40,3 +40,45 @@ Please checkout our [Contribution Guide](./.github/contributing.md). It includes
 Orbit Components provides a set of icons easily used following these [instructions](./src/icons/readme.md).
 
 A list of all supported icons is [here](./src/icons/icons.md)
+
+
+## Theming
+
+Orbit uses `styled-components` Theme provider
+
+```javascript
+  import { ThemeProvider } from "styled-components";
+  import { defaultTokens } from "@kiwicom/orbit-design-tokens";
+
+  ...
+
+  return (
+    <ThemeProvider theme={{ yourCustomTheme: { black: "#000" }, orbit: defaultTokens }}>
+      <Button type="secondary" size="large" />
+    </ThemeProvider>
+  )
+```
+
+### Using custom colors with orbit-components
+
+```javascript
+  import { getTokens } from "@kiwicom/orbit-design-tokens"; 
+  import { ThemeProvider } from "styled-components";
+
+  const customTokens = getTokens({
+    product: {
+      light: "#9ae5da",
+      lightHover: "#7fded0",
+      lightActive: "#64d7c6",
+      normal: "#00a991",
+      normalHover: "#009882",
+      normalActive: "#008f7b",
+      dark: "#005448"
+    },
+  })
+
+  <ThemeProvider theme={{ yourCustomTheme: { black: "#000" }, orbit: customTokens }}>
+    <Button type="secondary" size="large" />
+  </ThemeProvider>
+```
+
diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js
diff --git a/src/Alert/Alert.js.flow b/src/Alert/Alert.js.flow
diff --git a/src/Alert/Alert.stories.js b/src/Alert/Alert.stories.js
@@ -7,10 +7,11 @@ import chaptersAddon from "react-storybook-addon-chapters";
 import { withKnobs, text, boolean, select } from "@storybook/addon-knobs/react";
 
 import * as Icons from "../icons";
-import Alert from "./Alert";
-import Button from "../Button/Button";
+import Button from "../Button";
 import TYPE_OPTIONS from "./consts";
 
+import Alert from "./index";
+
 setAddon(chaptersAddon);
 
 const getIcons = defaultIcon => select("Icon", [undefined, ...Object.keys(Icons)], defaultIcon);

diff --git a/src/Alert/__snapshots__/Alert.stories.storyshot b/src/Alert/__snapshots__/Alert.stories.storyshot
@@ -99,7 +99,7 @@ exports[`Storyshots Alert Critical alert 1`] = `
           }
         >
           <div
-            className="Alert__StyledAlert-dqYNhl ilDRCe"
+            className="Alert__StyledAlert-dqYNhl edSqTu"
           >
             <div
               className="Alert__IconContainer-haMrUK gUzVST"
@@ -640,7 +640,7 @@ exports[`Storyshots Alert Info alert 1`] = `
           }
         >
           <div
-            className="Alert__StyledAlert-dqYNhl doPSCL"
+            className="Alert__StyledAlert-dqYNhl fUtCMj"
           >
             <div
               className="Alert__IconContainer-haMrUK jvDZTe"
@@ -927,7 +927,7 @@ exports[`Storyshots Alert Playground 1`] = `
           }
         >
           <div
-            className="Alert__StyledAlert-dqYNhl doPSCL"
+            className="Alert__StyledAlert-dqYNhl fUtCMj"
           >
             <div
               className="Alert__IconContainer-haMrUK jvDZTe"
@@ -1583,7 +1583,7 @@ Avoid using success banner if there is any follow-up action, for example, in cas
           }
         >
           <div
-            className="Alert__StyledAlert-dqYNhl gnhZp"
+            className="Alert__StyledAlert-dqYNhl kchFYJ"
           >
             <div
               className="Alert__IconContainer-haMrUK kMFpuN"
@@ -1897,7 +1897,7 @@ exports[`Storyshots Alert Warning alert 1`] = `
           }
         >
           <div
-            className="Alert__StyledAlert-dqYNhl kbCxwb"
+            className="Alert__StyledAlert-dqYNhl eMMGtz"
           >
             <div
               className="Alert__IconContainer-haMrUK iInTvA"