@desynova-digital/components 9.0.1 → 9.0.3

package/atoms/card/card.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledCard = undefined;
 
-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']),
+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');
@@ -33,8 +33,8 @@ var StyledCard = _styledComponents2.default.div(_templateObject, function (props
 }, function (props) {
   return props.height + 'px';
 }, function (props) {
-  if (props.theme == 'dark') return _tokens.colors.light.card.background;else {
-    return _tokens.colors.dark.card.background;
+  if (props.theme == 'light') return _tokens.colors.dark.card.background;else {
+    return _tokens.colors.light.card.background;
   }
 });
 

package/atoms/cardV2/cardV2.js

@@ -128,7 +128,7 @@ CardV2.propTypes = {
 
 CardV2.defaultProps = {
   isSegment: false,
-  theme: 'light',
+  theme: 'dark',
   width: 'lg',
   type: 'asset',
   bgColor: 'primary',

package/atoms/customSelect/customSelect.js

@@ -319,7 +319,7 @@ var CustomSelect = function (_Component) {
                   { className: 'selected-chips' },
                   _react2.default.createElement(
                     _tag2.default.Group,
-                    null,
+                    { theme: this.props.theme },
                     this.state.selected.map(function (selectedoption, index) {
                       return _react2.default.createElement(
                         _tag2.default,

package/atoms/popup/popup.js

@@ -227,7 +227,7 @@ var Popup = function (_Component) {
             loading ? _react2.default.createElement(
               'div',
               { className: 'loading-box' },
-              typeof loading == 'boolean' ? _react2.default.createElement(_loader2.default, { loaderName: loaderName ? loaderName : null }) : loading
+              typeof loading == 'boolean' ? _react2.default.createElement(_loader2.default, { theme: this.props.theme, loaderName: loaderName ? loaderName : null }) : loading
             ) : null
           )
         ) : null

package/atoms/radio/radio.story.js

@@ -361,7 +361,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       _react2.default.createElement(
         _components.Radio.Group,
         {
-          theme: 'dark',
+          theme: 'nexc',
           radioname: 'example21',
           onChange: function onChange(e) {
             console.log(e.target.value);

package/atoms/sideBar/sidebar.js

@@ -117,7 +117,7 @@ var SideBar = function (_Component) {
         _react2.default.createElement(SideBarOverlay, { open: showSideBar }),
         _react2.default.createElement(
           SideBarBlock,
-          { theme: this.props.theme, className: showSideBar ? 'open' : 'close' },
+          { theme: theme, className: showSideBar ? 'open' : 'close' },
           _react2.default.createElement(
             'div',
             { className: 'sidebar-header' },
@@ -127,6 +127,7 @@ var SideBar = function (_Component) {
               title
             ),
             _react2.default.createElement(_index2.default, {
+              theme: theme,
               appearance: 'cta',
               iconWidth: 12,
               iconHeight: 12,
@@ -144,7 +145,7 @@ var SideBar = function (_Component) {
           ),
           sideBarButtonObject && sideBarButtonObject.length ? _react2.default.createElement(
             ButtonContainer,
-            { theme: this.props.theme, className: 'button-container' },
+            { theme: theme, className: 'button-container' },
             sideBarButtonObject.map(function (object) {
               return _react2.default.createElement(
                 'div',
@@ -156,7 +157,7 @@ var SideBar = function (_Component) {
                   }
                 },
                 object.title,
-                object.isLoading ? _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader' }) : null
+                object.isLoading ? _react2.default.createElement(_components.Loader, { theme: theme, loaderName: 'SpinningLoader' }) : null
               );
             })
           ) : null
@@ -182,5 +183,5 @@ SideBar.propTypes = {
 };
 
 SideBar.defaultProps = {
-  theme: 'light'
+  theme: 'dark'
 };

package/atoms/sideBar/sidebar.jsx

@@ -192,10 +192,11 @@ export default class SideBar extends Component {
     return (
       <React.Fragment>
         <SideBarOverlay open={showSideBar} />
-        <SideBarBlock theme={this.props.theme} className={showSideBar ? 'open' : 'close'}>
+        <SideBarBlock theme={theme} className={showSideBar ? 'open' : 'close'}>
           <div className="sidebar-header">
             <p className="header-title">{title}</p>
             <Button
+            theme={theme}
               appearance="cta"
               iconWidth={12}
               iconHeight={12}
@@ -209,7 +210,7 @@ export default class SideBar extends Component {
           <div className={`bodyContainer ${!sideBarButtonObject.length && 'bodyContainer-without-footer'}`}>
             {content}
           </div>
-          {sideBarButtonObject && sideBarButtonObject.length ? <ButtonContainer theme={this.props.theme} className="button-container" >
+          {sideBarButtonObject && sideBarButtonObject.length ? <ButtonContainer theme={theme} className="button-container" >
             {
               sideBarButtonObject.map((object) => {
                 return (
@@ -220,7 +221,7 @@ export default class SideBar extends Component {
                   >
                     {object.title}
                     {object.isLoading ?
-                      <Loader theme="dark" loaderName='SpinningLoader' />
+                      <Loader theme={theme} loaderName='SpinningLoader' />
                       : null}
                   </div>
                 )
@@ -245,5 +246,5 @@ SideBar.propTypes = {
 }
 
 SideBar.defaultProps = {
-  theme: 'light'
+  theme: 'dark'
 };

package/atoms/timeCodeInput/timCodeInput.story.js

@@ -22,6 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_timeCodeInput2.default, {
+        theme: 'nexc',
         inputValue: '00:00:00:00' //time code input value
         , onFocus: function onFocus() {
           //perform your function here eg pause the video that is playing

package/molecules/filter/filter.js

@@ -885,7 +885,7 @@ Filter.propTypes = {
 
 Filter.defaultProps = {
   width: '360px',
-  theme: 'light'
+  theme: 'dark'
 };
 
 exports.default = Filter;

package/molecules/graphCard/graphCard.js

@@ -111,8 +111,7 @@ var GraphCard = function (_React$Component) {
           onClick: this.props.onClickHandler,
           width: '100%',
           height: this.props.loading ? this.props.minHeight : 'auto',
-          styled: { minHeight: '300px' },
-          theme: this.props.theme
+          styled: { minHeight: '300px' }
         },
         this.props.loading ? _react2.default.createElement(
           GraphBoxLoading,

package/molecules/pagination/pagination.js

@@ -243,7 +243,7 @@ Pagination.propTypes = {
 };
 
 Pagination.defaultProps = {
-  theme: 'light',
+  theme: 'dark',
   pagesPerSlice: 3
 };
 

package/molecules/table/table.js

@@ -360,10 +360,10 @@ var Table = function (_Component) {
         case 'link_text':
           {
             if (tableLoading) {
-              return _react2.default.createElement(_Shimmer2.default, { theme: _this.props.theme, height: '16px', width: '100%' });
+              return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
             } else {
               if (item.actions === undefined) {
-                return _react2.default.createElement(_Shimmer2.default, { theme: _this.props.theme, height: '16px', width: '100%' });
+                return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
               } else {
                 var isPlayable = Array.isArray(item.actions) ? item.actions.includes("play") : false;
                 return _react2.default.createElement(
@@ -383,7 +383,7 @@ var Table = function (_Component) {
 
         case 'action_icon':
           if (tableLoading) {
-            return _react2.default.createElement(_Shimmer2.default, { theme: _this.props.theme, height: '16px', width: '100%' });
+            return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
           } else {
             return _this.actionElements(item, column, idx);
           }
@@ -393,7 +393,7 @@ var Table = function (_Component) {
 
         case 'date':
           if (tableLoading) {
-            return _react2.default.createElement(_Shimmer2.default, { theme: _this.props.theme, height: '16px', width: '100%' });
+            return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
           } else {
             return _react2.default.createElement(
               'div',
@@ -480,7 +480,6 @@ var Table = function (_Component) {
                 return _react2.default.createElement(
                   _label2.default,
                   {
-                    theme: _this.props.theme,
                     percentageStatus: column.percentageField && column.percentageField.field && item[column.percentageField.field],
                     percentageField: column.percentageField,
                     status: item[column.field]
@@ -1506,7 +1505,7 @@ var Table = function (_Component) {
                         this.columns ? this.columns.map(function (item) {
                           return _react2.default.createElement(
                             _checkbox2.default,
-                            { value: item.field },
+                            { theme: _this4.props.theme, value: item.field },
                             item.title
                           );
                         }) : null
@@ -1742,7 +1741,7 @@ Table.propTypes = {
 };
 
 Table.defaultProps = {
-  theme: 'light',
+  theme: 'dark',
   videoPlayBtn: false,
   showActions: true,
   onSort: function onSort() {

package/molecules/tabs/tabs.js

@@ -278,7 +278,7 @@ Tabs.propTypes = {
 };
 
 Tabs.defaultProps = {
-  theme: 'light',
+  theme: 'dark',
   children: []
 };
 

package/package.json

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