@desynova-digital/components 9.0.20 → 9.0.21

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.0.20",
+  "version": "9.0.21",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.0.20",
+    "@desynova-digital/tokens": "9.0.21",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },

package/atoms/select/select.story.js

@@ -1,201 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../_helpers/story-helpers');
-
-var _components = require('../../components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('Select').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Light', background: 'default' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, { label: 'Primary show*',
-          options: [{ text: '', value: null }, { text: 'No value With label', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event.target.value);
-          }, required: true
-        })
-      )
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, { label: 'Primary show*',
-          value: 3,
-          options: [{ text: 'Selected value', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event);
-          }
-        })
-      )
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, { label: 'Primary show*',
-          required: true,
-          value: 2,
-          readOnly: true,
-          options: [{ text: 'readOnly Select', value: 1 }, { text: 'Selected value & readOnly ', value: 2 }, { text: 'Three', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event);
-          }
-        })
-      )
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, { label: 'Primary show*',
-          required: true,
-          value: 2,
-          options: [{ text: 'Selected value & Show error  ', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event);
-          },
-          error: "Invalid Selection"
-        })
-      )
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, {
-          options: [{ text: '', value: null }, { text: 'Without label select', value: 1 }, { text: 'Without label select', value: 2 }, { text: 'Without label select', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event);
-          }
-        })
-      )
-    )
-  );
-});
-
-(0, _react3.storiesOf)('Select').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Light', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, { label: 'Primary show*',
-          options: [{ text: '', value: null }, { text: 'No value With label', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event.target.value);
-          }, required: true,
-          theme: 'dark'
-        })
-      )
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, { label: 'Primary show*',
-          value: 3,
-          options: [{ text: 'Selected value', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event);
-          },
-          theme: 'dark'
-        })
-      )
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, { label: 'Primary show*',
-          required: true,
-          value: 2,
-          readOnly: true,
-          options: [{ text: 'readOnly Select', value: 1 }, { text: 'Selected value & readOnly ', value: 2 }, { text: 'Three', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event);
-          },
-          theme: 'dark'
-        })
-      )
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, { label: 'Primary show*',
-          required: true,
-          value: 2,
-          options: [{ text: 'Selected value & Show error  ', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event);
-          },
-          error: "Invalid Selection",
-          theme: 'dark'
-        })
-      )
-    ),
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '200px' } },
-        _react2.default.createElement(_components.Select, {
-          options: [{ text: '', value: null }, { text: 'Without label select', value: 1 }, { text: 'Without label select', value: 2 }, { text: 'Without label select', value: 3 }],
-          onChange: function onChange(event) {
-            return console.log(event);
-          },
-          theme: 'dark'
-        })
-      )
-    )
-  );
-});
-
-(0, _react3.storiesOf)('Select').add('readonly', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Code' },
-    _react2.default.createElement(_components.Select, {
-      value: 2,
-      readOnly: true,
-      options: [{ text: 'One', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }],
-      onChange: function onChange(event) {
-        return console.log(event);
-      }
-    })
-  );
-});

package/molecules/tabs/tabs.md

@@ -1,70 +0,0 @@
-```meta
-  category: Layout
-  description: Tabs are great for splitting information into sections to make them easy to consume.
-```
-
-```jsx
-<Tabs>
-  <Tabs.Tab label="Tab 1">This is tab 1</Tabs.Tab>
-  <Tabs.Tab label="Tab 2">You can render anything you want here</Tabs.Tab>
-  <Tabs.Tab label="Tab 3">Third tab's the charm!</Tabs.Tab>
-</Tabs>
-```
-
-## Examples
-
-### Default selected tab
-
-By default, the first tab is selected but you can change this behavior attaching the `selected` prop to a `Tab`.
-
-```js
-<Tabs>
-  <Tabs.Tab label="Tab 1">This is tab 1</Tabs.Tab>
-  <Tabs.Tab label="Tab 2">You can render anything you want here</Tabs.Tab>
-  <Tabs.Tab label="Tab 3" selected>
-    Look, third tab is selected by default!
-  </Tabs.Tab>
-</Tabs>
-```
-
-### Controlled tab state
-
-Sometimes you need to have control on what tab is selected anytime. So you can pass the current selected tab index in the `selected` prop, as well as a callback function in the `onSelect` prop, and Cosmos will notify you when the user tries to change the tab so you can act accordingly.
-
-```js
-class TabContainer extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { selected: 0 }
-  }
-
-  handleSelected(selected) {
-    this.setState({ selected })
-  }
-
-  handleInputChange(ev) {
-    const selected = parseInt(ev.target.value)
-    this.setState({ selected })
-  }
-
-  render() {
-    return (
-      <div>
-        <span>
-          Selected tab index:{' '}
-          <input
-            value={this.state.selected}
-            type="number"
-            onChange={ev => this.handleInputChange(ev)}
-          />
-        </span>
-        <Tabs onSelect={nextIndex => this.handleSelected(nextIndex)} selected={this.state.selected}>
-          <Tabs.Tab label="Tab 1">This is tab 1</Tabs.Tab>
-          <Tabs.Tab label="Tab 2">You can render anything you want here</Tabs.Tab>
-          <Tabs.Tab label="Tab 3">Third tabs the charm!</Tabs.Tab>
-        </Tabs>
-      </div>
-    )
-  }
-}
-```

package/molecules/tabs/tabs.sketch.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _cosmos = require('@auth0/cosmos');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('Tabs', module).add('default', function () {
-  return _react2.default.createElement(
-    _cosmos.Tabs,
-    null,
-    _react2.default.createElement(
-      _cosmos.Tabs.Tab,
-      { label: 'Tab 1' },
-      'This is tab 1'
-    ),
-    _react2.default.createElement(
-      _cosmos.Tabs.Tab,
-      { label: 'Tab 2' },
-      'You can render anything you want here'
-    ),
-    _react2.default.createElement(
-      _cosmos.Tabs.Tab,
-      { label: 'Tab 3' },
-      'Third tab\'s the charm!'
-    )
-  );
-});