@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/button/button.story.js

@@ -12,7 +12,7 @@ var _components = require('../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('Button').add('appearance', function () {
+(0, _react3.storiesOf)('Button').add('light theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
     { title: 'Appearances' },
@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       null,
       _react2.default.createElement(
         _components.Button,
-        { theme: 'nexc' },
+        null,
         'Button'
       ),
       _react2.default.createElement(
@@ -169,4 +169,344 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       })
     )
   );
+});
+
+(0, _react3.storiesOf)('Button').add('dark theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Dark', background: 'black' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark' },
+        'Button'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'default' },
+        'Default'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'primary' },
+        'Primary'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'bordered' },
+        'Bordered'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'cta', display: 'rounded' },
+        'CTA'
+      )
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', display: 'rounded', isLoading: true, showLoader: true, stretchWidth: true },
+        'Button'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'primary', display: 'rounded' },
+        'Primary'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'bordered', display: 'rounded' },
+        'Bordered'
+      )
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', display: 'rounded', disabled: true },
+        'Disabled'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'primary', disabled: true },
+        'Disabled'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'bordered', disabled: true },
+        'Disabled'
+      )
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'link', display: 'rounded', href: 'https://www.google.co.in/' },
+        'Link'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'link', href: 'https://www.google.co.in/' },
+        'Link'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', appearance: 'link', href: 'https://www.google.co.in/' },
+        'Link'
+      )
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        {
+          theme: 'dark',
+          display: 'rounded',
+          icon: 'arrow-right',
+          iconWidth: 20,
+          iconHeight: 14,
+          iconBackground: false
+        },
+        'Next'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'dark', display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 },
+        'Submit'
+      ),
+      _react2.default.createElement(_components.Button, {
+        theme: 'dark',
+        display: 'rounded',
+        icon: 'arrow-right',
+        iconWidth: 20,
+        iconHeight: 14
+      }),
+      _react2.default.createElement(
+        _components.Button,
+        {
+          theme: 'dark',
+          appearance: 'bordered',
+          display: 'rounded',
+          iconLocation: 'left',
+          iconBackground: false,
+          iconHover: true,
+          icon: 'okta-logo',
+          iconWidth: 30,
+          iconHeight: 30
+        },
+        'Sign In with Okta'
+      ),
+      _react2.default.createElement(_components.Button, { theme: 'dark', appearance: 'cta', icon: 'search', iconWidth: 16, iconHeight: 16 }),
+      _react2.default.createElement(_components.Button, {
+        theme: 'dark',
+        appearance: 'cta',
+        icon: 'search',
+        iconWidth: 16,
+        iconHeight: 16,
+        width: 40,
+        height: 40
+      }),
+      _react2.default.createElement(_components.Button, {
+        theme: 'dark',
+        key: 'storyboard',
+        display: 'rounded',
+        icon: 'storyboard',
+        width: 30,
+        appearance: 'cta',
+        height: 30,
+        iconWidth: 13,
+        iconHeight: 13
+      }),
+      _react2.default.createElement(_components.Button, {
+        theme: 'dark',
+        key: 'archive',
+        display: 'rounded',
+        icon: 'archive',
+        width: 30,
+        appearance: 'cta',
+        height: 30,
+        label: 'Archive',
+        disabled: true,
+        iconWidth: 13,
+        iconHeight: 13
+      })
+    )
+  );
+});
+
+(0, _react3.storiesOf)('Button').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Dark', background: 'black' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc' },
+        'Button'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'default' },
+        'Default'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'primary' },
+        'Primary'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'bordered' },
+        'Bordered'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'cta', display: 'rounded' },
+        'CTA'
+      )
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', display: 'rounded', isLoading: true, showLoader: true, stretchWidth: true },
+        'Button'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'primary', display: 'rounded' },
+        'Primary'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'bordered', display: 'rounded' },
+        'Bordered'
+      )
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', display: 'rounded', disabled: true },
+        'Disabled'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'primary', disabled: true },
+        'Disabled'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'bordered', disabled: true },
+        'Disabled'
+      )
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'link', display: 'rounded', href: 'https://www.google.co.in/' },
+        'Link'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'link', href: 'https://www.google.co.in/' },
+        'Link'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', appearance: 'link', href: 'https://www.google.co.in/' },
+        'Link'
+      )
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Button,
+        {
+          theme: 'nexc',
+          display: 'rounded',
+          icon: 'arrow-right',
+          iconWidth: 20,
+          iconHeight: 14,
+          iconBackground: false
+        },
+        'Next'
+      ),
+      _react2.default.createElement(
+        _components.Button,
+        { theme: 'nexc', display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 },
+        'Submit'
+      ),
+      _react2.default.createElement(_components.Button, {
+        theme: 'nexc',
+        display: 'rounded',
+        icon: 'arrow-right',
+        iconWidth: 20,
+        iconHeight: 14
+      }),
+      _react2.default.createElement(
+        _components.Button,
+        {
+          theme: 'nexc',
+          appearance: 'bordered',
+          display: 'rounded',
+          iconLocation: 'left',
+          iconBackground: false,
+          iconHover: true,
+          icon: 'okta-logo',
+          iconWidth: 30,
+          iconHeight: 30
+        },
+        'Sign In with Okta'
+      ),
+      _react2.default.createElement(_components.Button, { theme: 'nexc', appearance: 'cta', icon: 'search', iconWidth: 16, iconHeight: 16 }),
+      _react2.default.createElement(_components.Button, {
+        theme: 'nexc',
+        appearance: 'cta',
+        icon: 'search',
+        iconWidth: 16,
+        iconHeight: 16,
+        width: 40,
+        height: 40
+      }),
+      _react2.default.createElement(_components.Button, {
+        theme: 'nexc',
+        key: 'storyboard',
+        display: 'rounded',
+        icon: 'storyboard',
+        width: 30,
+        appearance: 'cta',
+        height: 30,
+        iconWidth: 13,
+        iconHeight: 13
+      }),
+      _react2.default.createElement(_components.Button, {
+        theme: 'nexc',
+        key: 'archive',
+        display: 'rounded',
+        icon: 'archive',
+        width: 30,
+        appearance: 'cta',
+        height: 30,
+        label: 'Archive',
+        disabled: true,
+        iconWidth: 13,
+        iconHeight: 13
+      })
+    )
+  );
 });

package/atoms/card/card.js

@@ -1,12 +1,12 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.StyledCard = undefined;
 
-var _templateObject = _taggedTemplateLiteral(['\n    font-family: \'SFUIText-Medium\';\n    width:100%;\n    background: ', ' ; \n    border-radius: ', ';\n\n    height: ', ';\n'], ['\n    font-family: \'SFUIText-Medium\';\n    width:100%;\n    background: ', ' ; \n    border-radius: ', ';\n\n    height: ', ';\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    \n    display: inline-block;\n    vertical-align: top;\n    padding-top : ', ';\n    padding-bottom : ', ';\n    padding-left : ', ';\n    padding-right : ', ';\n    \n\n    width: ', ';\n\n    ', '\n'], ['\n    \n    display: inline-block;\n    vertical-align: top;\n    padding-top : ', ';\n    padding-bottom : ', ';\n    padding-left : ', ';\n    padding-right : ', ';\n    \n\n    width: ', ';\n\n    ', '\n']);
+var _templateObject = _taggedTemplateLiteral(['\n    font-family: \'SFUIText-Medium\';\n    width:100%;\n    background: ', ' ; \n    border-radius: ', ';\n\n    height: ', ';\n    color ', '\n'], ['\n    font-family: \'SFUIText-Medium\';\n    width:100%;\n    background: ', ' ; \n    border-radius: ', ';\n\n    height: ', ';\n    color ', '\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  display: inline-block;\n  vertical-align: top;\n  padding-top: ', ';\n  padding-bottom: ', ';\n  padding-left: ', ';\n  padding-right: ', ';\n\n  width: ', ';\n\n  ', '\n'], ['\n  display: inline-block;\n  vertical-align: top;\n  padding-top: ', ';\n  padding-bottom: ', ';\n  padding-left: ', ';\n  padding-right: ', ';\n\n  width: ', ';\n\n  ', '\n']);
 
 var _react = require('react');
 
@@ -27,61 +27,65 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var StyledCard = _styledComponents2.default.div(_templateObject, function (props) {
-    return _tokens.colors[props.theme].card.background;
+  return _tokens.colors[props.theme].card.background;
 }, function (props) {
-    return props.radius + 'px';
+  return props.radius + 'px';
 }, function (props) {
-    return props.height + 'px';
+  return props.height + 'px';
+}, function (props) {
+  if (props.theme == 'dark') return _tokens.colors.light.card.background;else {
+    return _tokens.colors.dark.card.background;
+  }
 });
 
 var StyledCardBox = _styledComponents2.default.div(_templateObject2, function (props) {
-    return props.paddingTop ? props.paddingTop + 'px' : props.paddingTopBottom ? props.paddingTopBottom + 'px' : '';
+  return props.paddingTop ? props.paddingTop + 'px' : props.paddingTopBottom ? props.paddingTopBottom + 'px' : '';
 }, function (props) {
-    return props.paddingBottom ? props.paddingBottom + 'px' : props.paddingTopBottom ? props.paddingTopBottom + 'px' : '';
+  return props.paddingBottom ? props.paddingBottom + 'px' : props.paddingTopBottom ? props.paddingTopBottom + 'px' : '';
 }, function (props) {
-    return props.paddingLeft ? props.paddingLeft + 'px' : props.paddingLeftRight ? props.paddingLeftRight + 'px' : '';
+  return props.paddingLeft ? props.paddingLeft + 'px' : props.paddingLeftRight ? props.paddingLeftRight + 'px' : '';
 }, function (props) {
-    return props.paddingRight ? props.paddingRight + 'px' : props.paddingLeftRight ? props.paddingLeftRight + 'px' : '';
+  return props.paddingRight ? props.paddingRight + 'px' : props.paddingLeftRight ? props.paddingLeftRight + 'px' : '';
 }, function (props) {
-    return props.width && (props.width + '').split("%").length == 2 ? props.width : props.width + 'px';
+  return props.width && (props.width + '').split('%').length == 2 ? props.width : props.width + 'px';
 }, function (props) {
-    return props.padding ? 'padding:' + props.padding + 'px' : '';
+  return props.padding ? 'padding:' + props.padding + 'px' : '';
 });
 
 var Card = function Card(props) {
-    return _react2.default.createElement(
-        StyledCardBox,
-        {
-            paddingTopBottom: props.paddingTopBottom,
-            paddingTop: props.paddingTop,
-            paddingBottom: props.paddingBottom,
-            paddingLeftRight: props.paddingLeftRight,
-            paddingLeft: props.paddingLeft,
-            paddingRight: props.paddingRight,
-            width: props.width,
-            className: 'card-box'
-        },
-        _react2.default.createElement(
-            StyledCard,
-            props,
-            props.children
-        )
-    );
+  return _react2.default.createElement(
+    StyledCardBox,
+    {
+      paddingTopBottom: props.paddingTopBottom,
+      paddingTop: props.paddingTop,
+      paddingBottom: props.paddingBottom,
+      paddingLeftRight: props.paddingLeftRight,
+      paddingLeft: props.paddingLeft,
+      paddingRight: props.paddingRight,
+      width: props.width,
+      className: 'card-box'
+    },
+    _react2.default.createElement(
+      StyledCard,
+      props,
+      props.children
+    )
+  );
 };
 
 Card.propTypes = {
-    /** The visual style used to convey the label's purpose */
-    theme: _propTypes2.default.oneOf(['light', 'dark']),
-    width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-    height: _propTypes2.default.number,
-    radius: _propTypes2.default.number
+  /** The visual style used to convey the label's purpose */
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
+  width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  height: _propTypes2.default.number,
+  radius: _propTypes2.default.number
 };
 
 Card.defaultProps = {
-    theme: 'light',
-    width: 100,
-    height: 100,
-    radius: 0
+  theme: 'light',
+  width: 100,
+  height: 100,
+  radius: 0
 };
 
 exports.default = Card;

package/atoms/card/card.story.js

@@ -12,54 +12,80 @@ var _components = require('../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('Card').add('appearance-light', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances Light', background: 'default' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(
-                _components.Card,
-                null,
-                'Light Theme'
-            ),
-            _react2.default.createElement(
-                _components.Card,
-                { width: '100%', radius: 5 },
-                'Radius Light Theme'
-            ),
-            _react2.default.createElement(
-                _components.Card,
-                null,
-                'Dark Theme'
-            )
-        )
-    );
+(0, _react3.storiesOf)('Card').add('light theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Light', background: 'default' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Card,
+        null,
+        'Light Theme'
+      ),
+      _react2.default.createElement(
+        _components.Card,
+        { width: '100%', radius: 5 },
+        'Radius Light Theme'
+      ),
+      _react2.default.createElement(
+        _components.Card,
+        null,
+        'Dark Theme'
+      )
+    )
+  );
 });
 
-(0, _react3.storiesOf)('Card').add('appearance-dark', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Appearances Dark', background: 'black' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(
-                _components.Card,
-                { theme: 'dark' },
-                'Light Theme'
-            ),
-            _react2.default.createElement(
-                _components.Card,
-                { theme: 'dark', radius: 5 },
-                'Radius Light Theme'
-            ),
-            _react2.default.createElement(
-                _components.Card,
-                { theme: 'dark' },
-                'Dark Theme'
-            )
-        )
-    );
+(0, _react3.storiesOf)('Card').add('dark theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Dark', background: 'black' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Card,
+        { theme: 'dark' },
+        'Light Theme'
+      ),
+      _react2.default.createElement(
+        _components.Card,
+        { theme: 'dark', radius: 5 },
+        'Radius Light Theme'
+      ),
+      _react2.default.createElement(
+        _components.Card,
+        { theme: 'dark' },
+        'Dark Theme'
+      )
+    )
+  );
+});
+
+(0, _react3.storiesOf)('Card').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Appearances Dark', background: 'black' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(
+        _components.Card,
+        { theme: 'nexc' },
+        'Light Theme'
+      ),
+      _react2.default.createElement(
+        _components.Card,
+        { theme: 'nexc', radius: 5 },
+        'Radius Light Theme'
+      ),
+      _react2.default.createElement(
+        _components.Card,
+        { theme: 'nexc' },
+        'Dark Theme'
+      )
+    )
+  );
 });