diff --git a/packages/devui/src/Button/Button.stories.js b/packages/devui/src/Button/Button.stories.js
index 447a6b23..f87480f0 100644
--- a/packages/devui/src/Button/Button.stories.js
+++ b/packages/devui/src/Button/Button.stories.js
@@ -31,10 +31,10 @@ Default.args = {
children: 'Hello Button',
};
Default.argTypes = {
- onClick: { table: { disable: true } },
- type: { table: { disable: true } },
- mark: { table: { disable: true } },
- theme: { table: { disable: true } },
+ onClick: { control: { disable: true } },
+ type: { control: { disable: true } },
+ mark: { control: { disable: true } },
+ theme: { control: { disable: true } },
};
export const Mark = Template.bind({});
@@ -46,9 +46,9 @@ Mark.args = {
children: ,
};
Mark.argTypes = {
- children: { table: { disable: true } },
- onClick: { table: { disable: true } },
- type: { table: { disable: true } },
- primary: { table: { disable: true } },
- theme: { table: { disable: true } },
+ children: { control: { disable: true } },
+ onClick: { control: { disable: true } },
+ type: { control: { disable: true } },
+ primary: { control: { disable: true } },
+ theme: { control: { disable: true } },
};
diff --git a/packages/devui/src/ContextMenu/ContextMenu.stories.js b/packages/devui/src/ContextMenu/ContextMenu.stories.js
index 4ff20129..123e911e 100644
--- a/packages/devui/src/ContextMenu/ContextMenu.stories.js
+++ b/packages/devui/src/ContextMenu/ContextMenu.stories.js
@@ -30,7 +30,7 @@ Default.args = {
items,
};
Default.argTypes = {
- visible: { table: { disable: true } },
- items: { table: { disable: true } },
- onClick: { table: { disable: true } },
+ visible: { control: { disable: true } },
+ items: { control: { disable: true } },
+ onClick: { control: { disable: true } },
};
diff --git a/packages/devui/src/Dialog/Dialog.stories.js b/packages/devui/src/Dialog/Dialog.stories.js
index 9573ba5e..c43fc37d 100644
--- a/packages/devui/src/Dialog/Dialog.stories.js
+++ b/packages/devui/src/Dialog/Dialog.stories.js
@@ -1,6 +1,6 @@
import React from 'react';
import Dialog from './';
-import { schema, uiSchema, formData } from '../Form/stories/schema';
+import { schema, uiSchema, formData } from '../Form/schema';
export default {
title: 'Dialog',
@@ -21,10 +21,10 @@ Default.args = {
children: 'Hello Dialog!',
};
Default.argTypes = {
- actions: { table: { disable: true } },
- onDismiss: { table: { disable: true } },
- onSubmit: { table: { disable: true } },
- theme: { table: { disable: true } },
+ actions: { control: { disable: true } },
+ onDismiss: { control: { disable: true } },
+ onSubmit: { control: { disable: true } },
+ theme: { control: { disable: true } },
};
export const WithForm = Template.bind({});
@@ -39,11 +39,11 @@ WithForm.args = {
uiSchema,
};
WithForm.argTypes = {
- title: { table: { disable: true } },
- children: { table: { disable: true } },
- actions: { table: { disable: true } },
- modal: { table: { disable: true } },
- onDismiss: { table: { disable: true } },
- onSubmit: { table: { disable: true } },
- theme: { table: { disable: true } },
+ title: { control: { disable: true } },
+ children: { control: { disable: true } },
+ actions: { control: { disable: true } },
+ modal: { control: { disable: true } },
+ onDismiss: { control: { disable: true } },
+ onSubmit: { control: { disable: true } },
+ theme: { control: { disable: true } },
};
diff --git a/packages/devui/src/Editor/Editor.js b/packages/devui/src/Editor/Editor.js
index 8f01bb55..c2d5ab5e 100644
--- a/packages/devui/src/Editor/Editor.js
+++ b/packages/devui/src/Editor/Editor.js
@@ -8,6 +8,9 @@ const EditorContainer = styled.div('', ({ theme }) =>
theme.scheme === 'default' && theme.light ? defaultStyle : themedStyle(theme)
);
+/**
+ * Based on [CodeMirror](http://codemirror.net/).
+ */
export default class Editor extends Component {
componentDidMount() {
this.cm = CodeMirror(this.node, {
diff --git a/packages/devui/src/Editor/Editor.stories.js b/packages/devui/src/Editor/Editor.stories.js
index dc6b5f04..06a041ff 100644
--- a/packages/devui/src/Editor/Editor.stories.js
+++ b/packages/devui/src/Editor/Editor.stories.js
@@ -26,6 +26,12 @@ Default.args = {
readOnly: false,
autofocus: true,
};
+Default.argTypes = {
+ autofocus: { control: { disable: true } },
+ mode: { control: { disable: true } },
+ theme: { control: { disable: true } },
+ onChange: { control: { disable: true } },
+};
const WithTabsTemplate = (args) => ;
@@ -34,23 +40,13 @@ WithTabs.args = {
lineNumbers: true,
align: 'left',
};
-// storiesOf('Editor', module)
-// .addDecorator(withKnobs)
-// .add(
-// 'default',
-// () => (
-//
-// ),
-// { info: 'Based on [CodeMirror](http://codemirror.net/).' }
-// )
-// .add('with tabs', () => (
-//
-// ));
+WithTabs.argTypes = {
+ value: { control: { disable: true } },
+ mode: { control: { disable: true } },
+ lineWrapping: { control: { disable: true } },
+ readOnly: { control: { disable: true } },
+ theme: { control: { disable: true } },
+ foldGutter: { control: { disable: true } },
+ autofocus: { control: { disable: true } },
+ onChange: { control: { disable: true } },
+};
diff --git a/packages/devui/src/Form/Form.js b/packages/devui/src/Form/Form.js
index f982269d..12bb2999 100644
--- a/packages/devui/src/Form/Form.js
+++ b/packages/devui/src/Form/Form.js
@@ -8,6 +8,9 @@ import customWidgets from './widgets';
const FormContainer = createStyledComponent(styles, JSONSchemaForm);
+/**
+ * Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form) with custom widgets.
+ */
export default class Form extends (PureComponent || Component) {
render() {
const {
diff --git a/packages/devui/src/Form/Form.stories.js b/packages/devui/src/Form/Form.stories.js
new file mode 100644
index 00000000..f4a17674
--- /dev/null
+++ b/packages/devui/src/Form/Form.stories.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import Form from './';
+import { schema, uiSchema, formData } from './schema';
+
+export default {
+ title: 'Form',
+ component: Form,
+};
+
+const Template = (args) =>
;
+
+export const Default = Template.bind({});
+Default.args = {
+ formData,
+ schema,
+ uiSchema,
+ submitText: 'Submit',
+};
+Default.argTypes = {
+ children: { control: { disable: true } },
+ primaryButton: { control: { disable: true } },
+ noSubmit: { control: { disable: true } },
+ widgets: { control: { disable: true } },
+};
diff --git a/packages/devui/src/Form/stories/schema.js b/packages/devui/src/Form/schema.js
similarity index 100%
rename from packages/devui/src/Form/stories/schema.js
rename to packages/devui/src/Form/schema.js
diff --git a/packages/devui/src/Form/stories/index.js b/packages/devui/src/Form/stories/index.js
deleted file mode 100755
index 7a5f9da1..00000000
--- a/packages/devui/src/Form/stories/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, object, text } from '@storybook/addon-knobs';
-import Form from '../';
-import { schema, uiSchema, formData } from './schema';
-
-storiesOf('Form', module)
- .addDecorator(withKnobs)
- .add(
- 'default',
- () => (
-
- ),
- {
- info:
- 'Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form)' +
- ' with custom widgets.',
- }
- );
diff --git a/packages/devui/src/Notification/Notification.stories.js b/packages/devui/src/Notification/Notification.stories.js
new file mode 100644
index 00000000..445b07c0
--- /dev/null
+++ b/packages/devui/src/Notification/Notification.stories.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import Notification from './';
+
+const Container = styled.div`
+ display: flex;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+`;
+
+export default {
+ title: 'Notification',
+ component: Notification,
+};
+
+const Template = (args) => (
+
+
+
+);
+
+export const Default = Template.bind({});
+Default.args = {
+ type: 'warning',
+ children: 'Hello Notification',
+};
+Default.argTypes = {
+ onClose: { control: { disable: true } },
+ theme: { control: { disable: true } },
+};
diff --git a/packages/devui/src/Notification/stories/index.js b/packages/devui/src/Notification/stories/index.js
deleted file mode 100644
index 52ad1a60..00000000
--- a/packages/devui/src/Notification/stories/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { withKnobs, text, select } from '@storybook/addon-knobs';
-import Notification from '../';
-
-export const Container = styled.div`
- display: flex;
- height: 100%;
- width: 100%;
- justify-content: center;
- align-items: center;
-`;
-
-storiesOf('Notification', module)
- .addDecorator(withKnobs)
- .add('default', () => (
-
-
- {text('Message', 'Hello Notification')}
-
-
- ));
diff --git a/packages/devui/src/SegmentedControl/SegmentedControl.stories.js b/packages/devui/src/SegmentedControl/SegmentedControl.stories.js
new file mode 100644
index 00000000..cb74011f
--- /dev/null
+++ b/packages/devui/src/SegmentedControl/SegmentedControl.stories.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import SegmentedControl from './';
+
+const Container = styled.div`
+ display: flex;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+`;
+
+export default {
+ title: 'SegmentedControl',
+ component: SegmentedControl,
+};
+
+const Template = (args) => (
+
+
+
+);
+
+export const Default = Template.bind({});
+Default.args = {
+ selected: 'Button1',
+ disabled: false,
+};
+Default.argTypes = {
+ values: { control: { disable: true } },
+ onClick: { control: { disable: true } },
+ theme: { control: { disable: true } },
+};
diff --git a/packages/devui/src/SegmentedControl/stories/index.js b/packages/devui/src/SegmentedControl/stories/index.js
deleted file mode 100644
index 0912c897..00000000
--- a/packages/devui/src/SegmentedControl/stories/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import SegmentedControl from '../';
-
-export const Container = styled.div`
- display: flex;
- height: 100%;
- width: 100%;
- justify-content: center;
- align-items: center;
-`;
-
-storiesOf('SegmentedControl', module)
- .addDecorator(withKnobs)
- .add('default', () => (
-
-
-
- ));
diff --git a/packages/devui/src/Select/Select.js b/packages/devui/src/Select/Select.js
index f34b53c0..014fd5bc 100644
--- a/packages/devui/src/Select/Select.js
+++ b/packages/devui/src/Select/Select.js
@@ -6,6 +6,9 @@ import styles from './styles';
const SelectContainer = createStyledComponent(styles, ReactSelect);
+/**
+ * Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes and new props like `openOuterUp` and `menuMaxHeight`.
+ */
export default class Select extends (PureComponent || Component) {
render() {
return ;
diff --git a/packages/devui/src/Select/Select.stories.js b/packages/devui/src/Select/Select.stories.js
new file mode 100644
index 00000000..43400152
--- /dev/null
+++ b/packages/devui/src/Select/Select.stories.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import Select from './';
+import { options } from './options';
+
+const Container = styled.div`
+ display: flex;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+
+ > div {
+ width: 90%;
+ }
+`;
+
+export default {
+ title: 'Select',
+ component: Select,
+};
+
+const Template = (args) => (
+
+
+
+);
+
+export const Default = Template.bind({});
+Default.args = {
+ value: 'one',
+ menuMaxHeight: 200,
+ autosize: false,
+ clearable: false,
+ disabled: false,
+ isLoading: false,
+ multi: false,
+ searchable: true,
+ openOuterUp: false,
+};
+Default.argTypes = {
+ simpleValue: { control: { disable: true } },
+ valueKey: { control: { disable: true } },
+};
diff --git a/packages/devui/src/Select/stories/options.js b/packages/devui/src/Select/options.js
similarity index 100%
rename from packages/devui/src/Select/stories/options.js
rename to packages/devui/src/Select/options.js
diff --git a/packages/devui/src/Select/stories/index.js b/packages/devui/src/Select/stories/index.js
deleted file mode 100755
index 54c6cba5..00000000
--- a/packages/devui/src/Select/stories/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text, number, boolean } from '@storybook/addon-knobs';
-import Select from '../';
-import { options } from './options';
-
-export const Container = styled.div`
- display: flex;
- height: 100%;
- width: 100%;
- justify-content: center;
- align-items: center;
-
- > div {
- width: 90%;
- }
-`;
-
-storiesOf('Select', module)
- .addDecorator(withKnobs)
- .add(
- 'default',
- () => (
-
-
-
- ),
- {
- info:
- 'Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes ' +
- 'and new props like `openOuterUp` and `menuMaxHeight`.',
- }
- );
diff --git a/packages/devui/src/Slider/Slider.stories.js b/packages/devui/src/Slider/Slider.stories.js
new file mode 100644
index 00000000..5978ad9e
--- /dev/null
+++ b/packages/devui/src/Slider/Slider.stories.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+import Slider from './';
+
+const Container = styled.div`
+ display: flex;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+`;
+
+export default {
+ title: 'Slider',
+ component: Slider,
+};
+
+const Template = (args) => (
+
+
+
+);
+
+export const Default = Template.bind({});
+Default.args = {
+ value: 0,
+ min: 0,
+ max: 100,
+ label: 'Slider label',
+ sublabel: '(sublabel}',
+ withValue: false,
+ disabled: false,
+};
+Default.argTypes = {
+ onChange: { control: { disable: true } },
+ theme: { control: { disable: true } },
+};
+
+// storiesOf('Slider', module)
+// .addDecorator(withKnobs)
+// .add('default', () => (
+//
+//
+//
+// ));
diff --git a/packages/devui/src/Slider/stories/index.js b/packages/devui/src/Slider/stories/index.js
deleted file mode 100755
index a94384b0..00000000
--- a/packages/devui/src/Slider/stories/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { withKnobs, number, text, boolean } from '@storybook/addon-knobs';
-import Slider from '../';
-
-export const Container = styled.div`
- display: flex;
- height: 100%;
- width: 100%;
- justify-content: center;
- align-items: center;
-`;
-
-storiesOf('Slider', module)
- .addDecorator(withKnobs)
- .add('default', () => (
-
-
-
- ));
diff --git a/packages/devui/src/Tabs/Tabs.stories.js b/packages/devui/src/Tabs/Tabs.stories.js
new file mode 100644
index 00000000..2f7999ad
--- /dev/null
+++ b/packages/devui/src/Tabs/Tabs.stories.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+import Tabs from './';
+import { tabs, simple10Tabs } from './data';
+
+const Container = styled.div`
+ display: flex;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+`;
+
+export default {
+ title: 'Tabs',
+ component: Tabs,
+};
+
+const Template = (args) => (
+
+
+
+);
+
+export const Default = Template.bind({});
+Default.args = {
+ tabs: simple10Tabs,
+ selected: '2',
+ main: true,
+ collapsible: true,
+ position: 'left',
+};
+Default.argTypes = {
+ tabs: { control: { disable: true } },
+ onClick: { control: { disable: true } },
+};
+
+export const WithContent = Template.bind({});
+WithContent.args = {
+ tabs,
+ selected: 'Tab2',
+ main: false,
+ collapsible: false,
+ position: 'left',
+};
+WithContent.argTypes = {
+ tabs: { control: { disable: true } },
+ onClick: { control: { disable: true } },
+};
diff --git a/packages/devui/src/Tabs/stories/data.js b/packages/devui/src/Tabs/data.js
similarity index 100%
rename from packages/devui/src/Tabs/stories/data.js
rename to packages/devui/src/Tabs/data.js
diff --git a/packages/devui/src/Tabs/stories/index.js b/packages/devui/src/Tabs/stories/index.js
deleted file mode 100755
index 4f5eb370..00000000
--- a/packages/devui/src/Tabs/stories/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
-import styled from 'styled-components';
-import Tabs from '../';
-import { tabs, simple10Tabs } from './data';
-
-const Container = styled.div`
- display: flex;
- height: 100%;
- width: 100%;
- justify-content: center;
- align-items: center;
-`;
-
-storiesOf('Tabs', module)
- .addDecorator(withKnobs)
- .add('default', () => (
-
-
-
- ))
- .add('with content', () => (
-
- ));
diff --git a/packages/devui/src/Toolbar/Toolbar.stories.js b/packages/devui/src/Toolbar/Toolbar.stories.js
new file mode 100644
index 00000000..925e8658
--- /dev/null
+++ b/packages/devui/src/Toolbar/Toolbar.stories.js
@@ -0,0 +1,296 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MdPlayArrow } from 'react-icons/md';
+import { MdFiberManualRecord } from 'react-icons/md';
+import { MdKeyboardArrowLeft } from 'react-icons/md';
+import { MdKeyboardArrowRight } from 'react-icons/md';
+import {
+ Toolbar,
+ Divider,
+ Spacer,
+ Button,
+ Select,
+ Slider,
+ SegmentedControl,
+ Tabs as TabsComponent,
+} from '../';
+import { options } from '../Select/options';
+import { simple10Tabs } from '../Tabs/data';
+
+const Container = styled.div`
+ display: flex;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+`;
+
+const SliderContainer = styled.div`
+ width: 90%;
+ height: 80px;
+`;
+
+export default {
+ title: 'Toolbar',
+ component: Toolbar,
+};
+
+const Template = ({
+ borderPosition,
+ title,
+ tooltipPosition,
+ disabled,
+ onClick,
+ label,
+}) => (
+
+
+
+
+
+
+
+
+
+
+);
+
+export const Default = Template.bind({});
+Default.args = {
+ borderPosition: 'top',
+ title: 'Hello Tooltip',
+ tooltipPosition: 'top',
+ disabled: false,
+ label: 'Hello Button',
+};
+Default.argTypes = {
+ borderPosition: {
+ control: {
+ type: 'select',
+ options: ['top', 'bottom'],
+ },
+ },
+ tooltipPosition: {
+ control: {
+ type: 'select',
+ options: [
+ 'top',
+ 'bottom',
+ 'left',
+ 'right',
+ 'bottom-left',
+ 'bottom-right',
+ 'top-left',
+ 'top-right',
+ ],
+ },
+ },
+ onClick: {
+ action: 'button clicked',
+ },
+};
+
+const TabsTemplate = ({
+ title,
+ tooltipPosition,
+ disabled,
+ buttonOnClick,
+ label,
+ selected,
+ main,
+ tabOnClick,
+ collapsible,
+ position,
+}) => (
+
+
+
+
+
+
+
+);
+
+export const Tabs = TabsTemplate.bind({});
+Tabs.args = {
+ title: 'Hello Tooltip',
+ tooltipPosition: 'top',
+ disabled: false,
+ label: 'Hello Button',
+ selected: '2',
+ main: true,
+ collapsible: true,
+ position: 'center',
+};
+Tabs.argTypes = {
+ tooltipPosition: {
+ control: {
+ type: 'select',
+ options: [
+ 'top',
+ 'bottom',
+ 'left',
+ 'right',
+ 'bottom-left',
+ 'bottom-right',
+ 'top-left',
+ 'top-right',
+ ],
+ },
+ },
+ buttonOnClick: {
+ action: 'button clicked',
+ },
+ tabOnClick: {
+ action: 'tab selected',
+ },
+ position: {
+ control: {
+ type: 'select',
+ options: ['left', 'right', 'center'],
+ },
+ },
+};
+
+const WithSliderTemplate = ({
+ title,
+ tooltipPosition,
+ playOnClick,
+ value,
+ min,
+ max,
+ label,
+ withValue,
+ onChange,
+ previousStateOnClick,
+ nextStateOnClick,
+ selected,
+ segmentedControlOnClick,
+}) => (
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export const WithSlider = WithSliderTemplate.bind({});
+WithSlider.args = {
+ title: 'Play',
+ tooltipPosition: 'top',
+ value: 80,
+ min: 0,
+ max: 100,
+ label: 'Slider label',
+ withValue: false,
+ selected: 'live',
+};
+WithSlider.argTypes = {
+ tooltipPosition: {
+ control: {
+ type: 'select',
+ options: [
+ 'top',
+ 'bottom',
+ 'left',
+ 'right',
+ 'bottom-left',
+ 'bottom-right',
+ 'top-left',
+ 'top-right',
+ ],
+ },
+ },
+ playOnClick: {
+ action: 'button clicked',
+ },
+ onChange: {
+ action: 'slider changed',
+ },
+ previousStateOnClick: {
+ action: 'previous state clicked',
+ },
+ nextStateOnClick: {
+ action: 'next state clicked',
+ },
+ selected: {
+ control: {
+ type: 'select',
+ options: ['live', '1x'],
+ },
+ },
+ segmentedControlOnClick: {
+ action: 'button selected',
+ },
+};
diff --git a/packages/devui/src/Toolbar/stories/index.js b/packages/devui/src/Toolbar/stories/index.js
deleted file mode 100755
index d60b6631..00000000
--- a/packages/devui/src/Toolbar/stories/index.js
+++ /dev/null
@@ -1,205 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import {
- withKnobs,
- text,
- number,
- boolean,
- select,
-} from '@storybook/addon-knobs';
-import { MdPlayArrow } from 'react-icons/md';
-import { MdFiberManualRecord } from 'react-icons/md';
-import { MdKeyboardArrowLeft } from 'react-icons/md';
-import { MdKeyboardArrowRight } from 'react-icons/md';
-import {
- Toolbar,
- Divider,
- Spacer,
- Button,
- Select,
- Slider,
- SegmentedControl,
- Tabs,
-} from '../../';
-import { options } from '../../Select/stories/options';
-import { simple10Tabs } from '../../Tabs/stories/data';
-
-export const Container = styled.div`
- display: flex;
- height: 100%;
- width: 100%;
- justify-content: center;
- align-items: center;
-`;
-
-export const SliderContainer = styled.div`
- width: 90%;
- height: 80px;
-`;
-
-storiesOf('Toolbar', module)
- .addDecorator(withKnobs)
- .add('default', () => (
-
-
-
-
-
-
-
-
-
-
- ))
- .add('tabs', () => (
-
-
-
-
-
-
-
- ))
- .add('with slider', () => (
-
-
-
-
-
-
-
-
-
-
-
- ));