Add toggle element to @meetfranz/forms

6 files changed, 108 insertions, 17 deletions

diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
index a1c9ee343..6a5c578f2 100644
--- a/uidev/src/app.tsx
+++ b/uidev/src/app.tsx
@@ -1,20 +1,34 @@
+import CSS from 'csstype';
 import { Classes } from 'jss';
+import { observer } from 'mobx-react';
+import DevTools from 'mobx-react-devtools';
 import React, { Component } from 'react';
-import { render } from 'react-dom';
 import injectSheet from 'react-jss';
-import './stories/input';
+
 import { WithTheme } from './withTheme';
 
+import './stories/input.stories';
+import './stories/toggle.stories';
+
 import { store } from './stores';
 
 const styles = {
+  '@global body': {
+    margin: 0,
+  },
   container: {
     display: 'flex',
     width: '100%',
   },
   menu: {
     width: 300,
-    position: 'fixed' as any,
+    position: 'fixed' as CSS.PositionProperty,
+    listStyleType: 'none',
+  },
+  storyList: {
+    paddingLeft: 18,
+    marginTop: 5,
+    marginBottom: 20,
   },
   stories: {
     width: '100%',
@@ -22,6 +36,7 @@ const styles = {
     paddingLeft: 40,
     paddingRight: 40,
     borderLeft: '1px solid #CFCFCF',
+    background: '#f7f7f7',
   },
   sectionHeadline: {
     fontSize: 30,
@@ -34,24 +49,29 @@ const styles = {
     marginBottom: 40,
     borderBottom: '1px solid #CFCFCF',
   },
+  sectionLink: {
+    fontWeight: 'bold' as CSS.FontWeightProperty,
+    color: '#000',
+    textDecoration: 'none',
+  },
+  storyLink: {
+    color: '#000',
+    textDecoration: 'none',
+  },
 };
 
-const foo = {
-  seas: 'bar',
-};
-
-export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => (
+export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes }) => (
   <div className={classes.container}>
     <ul className={classes.menu}>
       {store.stories.sections.map((section, key) => (
         <li key={key}>
-          <a href={`#section-${key}`}>{
+          <a href={`#section-${key}`} className={classes.sectionLink}>{
             section.name}
           </a>
-          <ul>
+          <ul className={classes.storyList}>
             {section.stories.map((story, storyKey) => (
               <li key={storyKey}>
-                <a href={`#section-${key}-story-${storyKey}`}>
+                <a href={`#section-${key}-story-${storyKey}`} className={classes.storyLink}>
                   {story.name}
                 </a>
               </li>
@@ -78,12 +98,13 @@ export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => (
                 {story.name}
               </h2>
               <WithTheme>
-                {story.component()}
+                <story.component />
               </WithTheme>
             </div>
           ))}
         </div>
       ))}
     </div>
+    <DevTools />
   </div>
-));
+)));
diff --git a/uidev/src/stores/stories.ts b/uidev/src/stores/stories.ts
index 064bf275f..6a98c9fd3 100644
--- a/uidev/src/stores/stories.ts
+++ b/uidev/src/stores/stories.ts
@@ -2,7 +2,7 @@ import { store } from './index';
 
 export type StorySectionName = string;
 export type StoryName = string;
-export type StoryComponent = Function;
+export type StoryComponent = () => JSX.Element;
 
 export interface IStories {
   name: string;
diff --git a/uidev/src/stories/input.tsx b/uidev/src/stories/input.stories.tsx
index dc8f6e997..9862ee479 100644
--- a/uidev/src/stories/input.tsx
+++ b/uidev/src/stories/input.stories.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 import { Input } from '@meetfranz/forms';
 import { storiesOf } from '../stores/stories';
 
-export const stories = () => (<div>input stories</div>);
-
 const defaultProps = {
   label: 'Label',
   id: 'test1',
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx
new file mode 100644
index 000000000..091342496
--- /dev/null
+++ b/uidev/src/stories/toggle.stories.tsx
@@ -0,0 +1,70 @@
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+import uuid from 'uuid/v4';
+
+import { Toggle } from '@meetfranz/forms';
+import { storiesOf } from '../stores/stories';
+
+interface IStoreArgs {
+  value?: boolean;
+  checked?: boolean;
+  label?: string;
+  id?: string;
+  name?: string;
+  disabled?: boolean;
+  error?: string;
+}
+
+const createStore = (args?: IStoreArgs) => {
+  return observable(Object.assign({
+    id: `element-${uuid()}`,
+    name: 'toggle',
+    label: 'Label',
+    value: true,
+    checked: false,
+    disabled: false,
+    error: '',
+  },                              args));
+};
+
+const WithStoreToggle = observer(({ store }: { store: any }) => (
+  <>
+    <Toggle
+      value={store.value}
+      checked={store.checked}
+      label={store.label}
+      id={store.id}
+      name={store.name}
+      disabled={store.disabled}
+      error={store.error}
+      onChange={() => store.checked = !store.checked}
+    />
+  </>
+));
+
+storiesOf('Toggle')
+  .add('Basic', () => (
+    <WithStoreToggle store={createStore()} />
+  ))
+  .add('Checked', () => (
+    <WithStoreToggle store={createStore({
+      checked: true,
+    })} />
+  ))
+  .add('Disabled', () => (
+    <WithStoreToggle store={createStore({
+      checked: true,
+      disabled: true,
+    })} />
+  ))
+  .add('Long label', () => (
+    <WithStoreToggle store={createStore({
+      label: 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.',
+    })} />
+  ))
+  .add('With error', () => (
+    <WithStoreToggle store={createStore({
+      error: 'Something went wrong',
+    })} />
+  ));
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx
index 17a1074d3..d7d4be3de 100644
--- a/uidev/src/withTheme/index.tsx
+++ b/uidev/src/withTheme/index.tsx
@@ -24,6 +24,7 @@ const styles = (theme: Theme) => ({
     borderRadius: theme.borderRadiusSmall,
     marginBottom: 20,
     padding: 20,
+    paddingBottom: 5,
     background: theme.colorContentBackground,
   },
 });
diff --git a/uidev/tsconfig.json b/uidev/tsconfig.json
index 23a59e665..fb57639c8 100644
--- a/uidev/tsconfig.json
+++ b/uidev/tsconfig.json
@@ -1,8 +1,9 @@
 {
   "extends": "../tsconfig.settings.json",
   "compilerOptions": {
+    "baseUrl": "..",
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
   },
   "references": [{
     "path": "../packages/theme"