Merge pull request #16 from comfortdelgro/develop

Develop

.npmignore

@@ -0,0 +1,6 @@
+src
+public
+build
+.storybook
+.github
+.git

.storybook/contexts.js

@@ -1,14 +1,15 @@
-import { ThemeProvider } from "styled-components";
+import Theme from "../src/Theme";
 import { defaultTheme } from "../src/utils";
+import {Client as Styletron} from 'styletron-engine-atomic';
 
 export const contexts = [
   {
     icon: "box", // a icon displayed in the Storybook toolbar to control contextual props
     title: "Themes", // an unique name of a contextual environment
-    components: [ThemeProvider],
+    components: [Theme],
     params: [
       // an array of params contains a set of predefined `props` for `components`
-      { name: "Default Theme", props: { theme: defaultTheme, default: true } },
+      { name: "Default Theme", props: { theme: defaultTheme, engine: new Styletron() } },
       // { name: "Dark Theme", props: { theme: darkTheme } }
     ],
     options: {

.storybook/main.js

@@ -5,7 +5,6 @@ module.exports = {
     "@storybook/addon-contexts",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
   ],
   "framework": "@storybook/react",
   "core": {

.storybook/manager.js

@@ -0,0 +1,24 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'right',
+  enableShortcuts: true,
+  isToolshown: true,
+  theme: undefined,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  sidebar: {
+    showRoots: false,
+    collapsedRoots: ['other'],
+  },
+  toolbar: {
+    title: { hidden: false, },
+    zoom: { hidden: false, },
+    eject: { hidden: false, },
+    copy: { hidden: false, },
+    fullscreen: { hidden: false, },
+  },
+});

.storybook/preview.js

@@ -1,11 +1,12 @@
-import { addParameters } from "@storybook/react";
 import { addDecorator } from "@storybook/react";
 import { withContexts } from "@storybook/addon-contexts/react";
+import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { contexts } from "./contexts";
-
-addParameters({
-  showPanel: true,
-  panelPosition: "bottom",
-});
+export const parameters = {
+  viewport: {
+    viewports: {  ...MINIMAL_VIEWPORTS },
+  },
+};
 
 addDecorator(withContexts(contexts));
+

README.md

@@ -7,11 +7,11 @@ npm i @comfortdelgro/design-system
 
 ### Usage
 ```
-import { defaultTheme, Theme, Button, RadioGroup, Radio, Badge } from "@comfortdelgro/design-system";
+import { defaultTheme, Theme, Button, RadioGroup, Radio, Checkbox } from "@comfortdelgro/design-system";
 
 function App() {
   const [selectedRadioValue, setSelectedRadioValue] = useState("");
-  const [checkBoxChecked, setCheckBoxChecked] = useState(false); // use diff state for each checkbox
+  const [checkboxChecked, setCheckboxChecked] = useState(false); // use diff state for each checkbox
 
   return (
     <Theme theme={defaultTheme}>
@@ -25,44 +25,19 @@ function App() {
 
       <br/>
 
+      <Checkbox style={{ margin: "16px" }} checked={checkboxChecked} onChecked={setCheckboxChecked}>Primary Checkbox</Checkbox>
+      <Checkbox style={{ margin: "16px" }} checked={checkboxChecked} onChecked={setCheckboxChecked} disabled>Disabled Checkbox</Checkbox>
+      <br/>
       <RadioGroup
         name="setRadioType"
         onClickRadioButton={setSelectedRadioValue}
         selectedValue={selectedRadioValue}
       >
-        <Radio style={{ margin: "16px" }} value="primary" labelText="Primary"/>
+        <Radio style={{ margin: "16px" }} value="primary" labelText="Choose an option"/>
+        <Radio style={{ margin: "16px" }} value="primary-2" labelText="Choose an option"/>
         <Radio style={{ margin: "16px" }} value="primary-disabled" labelText="Disabled" disabled/>
-        <Radio style={{ margin: "16px" }} type="secondary" value="secondary" labelText="Secondary" />
-        <Radio style={{ margin: "16px" }} type="orange" value="orange" labelText="Orange" />
-        <Radio style={{ margin: "16px" }} type="light" value="light" labelText="Light" />
-        <Radio style={{ margin: "16px" }} type="light-secondary" value="light-secondary" labelText="Light Secondary" />
       </RadioGroup>
 
-      <br/>
-
-      <Badge style={{ margin: "16px" }}> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="primary"> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="orange"> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="purple"> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="red"> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="green"> Label </Badge>
-
-      <Badge style={{ margin: "16px" }} type="default-light"> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="primary-light"> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="orange-light"> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="purple-light"> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="red-light"> Label </Badge>
-      <Badge style={{ margin: "16px" }} type="green-light"> Label </Badge>
-
-      <br/>
-
-      <CheckBox style={{ margin: "16px" }} checked={checkBoxChecked} onChecked={setCheckBoxChecked}>Primary CheckBox</CheckBox>
-      <CheckBox style={{ margin: "16px" }} type="secondary" checked={checkBoxChecked} onChecked={setCheckBoxChecked}>Secondary CheckBox</CheckBox>
-      <CheckBox style={{ margin: "16px" }} type="orange" checked={checkBoxChecked} onChecked={setCheckBoxChecked}>Orange CheckBox</CheckBox>
-      <CheckBox style={{ margin: "16px" }} type="light" checked={checkBoxChecked} onChecked={setCheckBoxChecked}>Light CheckBox</CheckBox>
-      <CheckBox style={{ margin: "16px" }} type="light-secondary" checked={checkBoxChecked} onChecked={setCheckBoxChecked}>Light Secondary CheckBox</CheckBox>
-      <CheckBox style={{ margin: "16px" }} checked={checkBoxChecked} onChecked={setCheckBoxChecked} disabled>Disabled CheckBox</CheckBox>
-
     </Theme>
   );
 }