@desynova-digital/components 8.19.63 → 9.0.0

package/atoms/cardV2/cardV2.js

@@ -1,37 +1,37 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BaseButtonStyles = exports.BaseParaStyles = exports.DivStyles = exports.CommonStyles = undefined;
 
-var _templateObject = _taggedTemplateLiteral(["\n  ", "\n"], ["\n  ", "\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    margin: ", ";\n    padding: ", ";\n    display: ", ";\n    justify-content: ", ";\n    align-items: ", ";\n    font-size: ", ";\n    color: ", ";\n    position: ", ";\n    border: ", ";\n    z-index: ", ";\n    cursor: ", ";\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n    margin-left: ", "\n  "], ["\n    background-color: ", ";\n    margin: ", ";\n    padding: ", ";\n    display: ", ";\n    justify-content: ", ";\n    align-items: ", ";\n    font-size: ", ";\n    color: ", ";\n    position: ", ";\n    border: ", ";\n    z-index: ", ";\n    cursor: ", ";\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n    margin-left: ", "\n  "]),
-    _templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"], ["\n  ", ";\n"]),
-    _templateObject4 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  ", ";\n"], ["\n  font-family: SFUIText-Regular;\n  ", ";\n"]),
-    _templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  border-radius: 2px;\n"], ["\n  position: relative;\n  border-radius: 2px;\n"]);
+var _templateObject = _taggedTemplateLiteral(['\n  ', '\n'], ['\n  ', '\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n    background-color: ', ';\n    margin: ', ';\n    padding: ', ';\n    display: ', ';\n    justify-content: ', ';\n    align-items: ', ';\n    font-size: ', ';\n    color: ', ';\n    position: ', ';\n    border: ', ';\n    z-index: ', ';\n    cursor: ', ';\n    border-radius: ', ';\n    height: ', ';\n    width: ', ';\n    margin-left: ', ';\n  '], ['\n    background-color: ', ';\n    margin: ', ';\n    padding: ', ';\n    display: ', ';\n    justify-content: ', ';\n    align-items: ', ';\n    font-size: ', ';\n    color: ', ';\n    position: ', ';\n    border: ', ';\n    z-index: ', ';\n    cursor: ', ';\n    border-radius: ', ';\n    height: ', ';\n    width: ', ';\n    margin-left: ', ';\n  ']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  ', ';\n'], ['\n  ', ';\n']),
+    _templateObject4 = _taggedTemplateLiteral(['\n  font-family: SFUIText-Regular;\n  ', ';\n'], ['\n  font-family: SFUIText-Regular;\n  ', ';\n']),
+    _templateObject5 = _taggedTemplateLiteral(['\n  position: relative;\n  border-radius: 2px;\n'], ['\n  position: relative;\n  border-radius: 2px;\n']);
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require("prop-types");
+var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styledComponents = require("styled-components");
+var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _thumbnail = require("./thumbnail");
+var _thumbnail = require('./thumbnail');
 
 var _thumbnail2 = _interopRequireDefault(_thumbnail);
 
-var _content = require("./content");
+var _content = require('./content');
 
 var _content2 = _interopRequireDefault(_content);
 
-var _timeline = require("./timeline");
+var _timeline = require('./timeline');
 
 var _timeline2 = _interopRequireDefault(_timeline);
 
@@ -92,10 +92,10 @@ var CardV2 = function CardV2(props) {
    * @function
    */
   var renderBasedOnWidth = (0, _react.useCallback)(function () {
-    if (width === "sm") {
+    if (width === 'sm') {
       return _react2.default.createElement(
         DivStyles,
-        { display: "flex" },
+        { display: 'flex' },
         content()
       );
     } else return content();
@@ -121,19 +121,19 @@ CardV2.propTypes = {
   ingestDbId: _propTypes2.default.string,
   actionClick: _propTypes2.default.func,
   actions: _propTypes2.default.arrayOf(_propTypes2.default.object),
-  theme: _propTypes2.default.oneOf(["light", "dark"]),
-  type: _propTypes2.default.oneOf(["asset", "search"]),
-  bgColor: _propTypes2.default.oneOf(["primary", "secondary"])
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
+  type: _propTypes2.default.oneOf(['asset', 'search']),
+  bgColor: _propTypes2.default.oneOf(['primary', 'secondary'])
 };
 
 CardV2.defaultProps = {
   isSegment: false,
-  theme: "light",
-  width: "lg",
-  type: "asset",
-  bgColor: "primary",
-  thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
-  preview: ""
+  theme: 'light',
+  width: 'lg',
+  type: 'asset',
+  bgColor: 'primary',
+  thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
+  preview: ''
 };
 
 exports.default = CardV2;

package/atoms/cardV2/cardV2.story.js

@@ -1,104 +1,255 @@
-"use strict";
+'use strict';
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _react3 = require("@storybook/react");
+var _react3 = require('@storybook/react');
 
-var _storyHelpers = require("../../_helpers/story-helpers");
+var _storyHelpers = require('../../_helpers/story-helpers');
 
-var _components = require("../../components");
+var _components = require('../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var COMMON_PROPS = {
-  iframeurl: "https://ctdnstgthumbnail.contido.io/5f36421a95eabf451fe82554_v1_thumbnail_preview.jpg",
-  thumbnail: "https://ctdnstgthumbnail.contido.io/5f36421a95eabf451fe82554_v1_thumbnail.jpg",
-  ingest_db_id: "123",
+  iframeurl: 'https://ctdnstgthumbnail.contido.io/5f36421a95eabf451fe82554_v1_thumbnail_preview.jpg',
+  thumbnail: 'https://ctdnstgthumbnail.contido.io/5f36421a95eabf451fe82554_v1_thumbnail.jpg',
+  ingest_db_id: '123',
   actionClick: function actionClick(e, field, ingest) {
     return console.log(field, ingest);
   }
 };
 
 var COMMON_SEARCH_PROPS = _extends({}, COMMON_PROPS, {
-  type: "search",
-  h1: "Carnival Row",
-  h3: "24/05/2021",
+  type: 'search',
+  h1: 'Carnival Row',
+  h3: '24/05/2021',
   isSegment: true
 });
 
-var overllapingShows = [{ episode_name: "Wicked Tuna: North vs South, East vs West, All Sides", season_no: 2, episode_no: 3, duration: 30, thumbnail: "https://ctdnstgthumbnail.contido.io/5f36421a95eabf451fe82554_v1_thumbnail_preview.jpg" }, { episode_name: "Carnival Row", season_no: 2, episode_no: 3, duration: 30 }, { episode_name: "Carnival Row", season_no: 2, episode_no: 4, duration: 30 }];
+var overllapingShows = [{
+  episode_name: 'Wicked Tuna: North vs South, East vs West, All Sides',
+  season_no: 2,
+  episode_no: 3,
+  duration: 30,
+  thumbnail: 'https://ctdnstgthumbnail.contido.io/5f36421a95eabf451fe82554_v1_thumbnail_preview.jpg'
+}, { episode_name: 'Carnival Row', season_no: 2, episode_no: 3, duration: 30 }, { episode_name: 'Carnival Row', season_no: 2, episode_no: 4, duration: 30 }];
 
-(0, _react3.storiesOf)("CardV2").add("appearance-dark", function () {
+(0, _react3.storiesOf)('CardV2').add('dark theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
-    { title: "Dark Mode", background: "dark" },
+    { title: 'Dark Mode', background: 'dark' },
     _react2.default.createElement(
-      "h1",
-      { style: { marginBottom: "10px" } },
-      "Timeline Cards"
+      'h1',
+      { style: { marginBottom: '10px' } },
+      'Timeline Cards'
     ),
     _react2.default.createElement(
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.CardV2, _extends({}, COMMON_PROPS, {
-        h1: "Wicked Tuna: North vs South, East vs West, All Sides",
-        h2: "S1 E1",
+        h1: 'Wicked Tuna: North vs South, East vs West, All Sides',
+        h2: 'S1 E1',
         startTime: 1640968200000,
         endTime: 1640970000000,
         overlapping: overllapingShows,
-        type: "timeline"
+        type: 'timeline'
       }))
     ),
     _react2.default.createElement(
-      "h1",
-      { style: { marginBottom: "10px" } },
-      "Collab Cards"
+      'h1',
+      { style: { marginBottom: '10px' } },
+      'Collab Cards'
     ),
     _react2.default.createElement(
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.CardV2, _extends({}, COMMON_PROPS, {
-        h1: "Wicked Tuna: North vs South, East vs West, All Sides",
-        h2: "S1 E1",
-        h3: "24/05/2021",
-        h4: "HINDI",
-        h5: "V1",
-        upload_type: "rc",
+        h1: 'Wicked Tuna: North vs South, East vs West, All Sides',
+        h2: 'S1 E1',
+        h3: '24/05/2021',
+        h4: 'HINDI',
+        h5: 'V1',
+        upload_type: 'rc',
         isSegment: true,
-        file_type: "document",
-        upload_status: "Uploading" // if upload_status is present then card_status will be ignored
-        , card_status: "Revision",
+        file_type: 'document',
+        upload_status: 'Uploading' // if upload_status is present then card_status will be ignored
+        , card_status: 'Revision',
         actions: [{
-          title: "Download",
-          field: "download",
-          icon: "download"
+          title: 'Download',
+          field: 'download',
+          icon: 'download'
         }, {
-          title: "Tagging",
-          field: "tagging",
-          icon: "tagging"
+          title: 'Tagging',
+          field: 'tagging',
+          icon: 'tagging'
         }]
       }))
     ),
     _react2.default.createElement(
-      "h1",
-      { style: { marginBottom: "10px" } },
-      "Search Cards"
+      'h1',
+      { style: { marginBottom: '10px' } },
+      'Search Cards'
     ),
     _react2.default.createElement(
       _storyHelpers.Stack,
       null,
       _react2.default.createElement(_components.CardV2, COMMON_SEARCH_PROPS),
       _react2.default.createElement(_components.CardV2, _extends({
-        type: "search",
-        width: "md"
+        type: 'search',
+        width: 'md'
       }, COMMON_SEARCH_PROPS, {
-        h1: "1234567890 1234567890 1234567890 1234"
+        h1: '1234567890 1234567890 1234567890 1234'
       })),
-      _react2.default.createElement(_components.CardV2, _extends({ type: "search", width: "sm" }, COMMON_SEARCH_PROPS))
+      _react2.default.createElement(_components.CardV2, _extends({ type: 'search', width: 'sm' }, COMMON_SEARCH_PROPS))
+    )
+  );
+});
+
+(0, _react3.storiesOf)('CardV2').add('light theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    null,
+    _react2.default.createElement(
+      'h1',
+      { style: { marginBottom: '10px' } },
+      'Timeline Cards'
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.CardV2, _extends({}, COMMON_PROPS, {
+        h1: 'Wicked Tuna: North vs South, East vs West, All Sides',
+        h2: 'S1 E1',
+        startTime: 1640968200000,
+        endTime: 1640970000000,
+        overlapping: overllapingShows,
+        type: 'timeline'
+      }))
+    ),
+    _react2.default.createElement(
+      'h1',
+      { style: { marginBottom: '10px' } },
+      'Collab Cards'
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.CardV2, _extends({}, COMMON_PROPS, {
+        h1: 'Wicked Tuna: North vs South, East vs West, All Sides',
+        h2: 'S1 E1',
+        h3: '24/05/2021',
+        h4: 'HINDI',
+        h5: 'V1',
+        upload_type: 'rc',
+        isSegment: true,
+        file_type: 'document',
+        upload_status: 'Uploading' // if upload_status is present then card_status will be ignored
+        , card_status: 'Revision',
+        actions: [{
+          title: 'Download',
+          field: 'download',
+          icon: 'download'
+        }, {
+          title: 'Tagging',
+          field: 'tagging',
+          icon: 'tagging'
+        }]
+      }))
+    ),
+    _react2.default.createElement(
+      'h1',
+      { style: { marginBottom: '10px' } },
+      'Search Cards'
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.CardV2, COMMON_SEARCH_PROPS),
+      _react2.default.createElement(_components.CardV2, _extends({
+        type: 'search',
+        width: 'md'
+      }, COMMON_SEARCH_PROPS, {
+        h1: '1234567890 1234567890 1234567890 1234'
+      })),
+      _react2.default.createElement(_components.CardV2, _extends({ type: 'search', width: 'sm' }, COMMON_SEARCH_PROPS))
+    )
+  );
+});
+
+(0, _react3.storiesOf)('CardV2').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Dark Mode', background: 'dark' },
+    _react2.default.createElement(
+      'h1',
+      { style: { marginBottom: '10px' } },
+      'Timeline Cards'
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.CardV2, _extends({}, COMMON_PROPS, {
+        theme: 'nexc',
+        h1: 'Wicked Tuna: North vs South, East vs West, All Sides',
+        h2: 'S1 E1',
+        startTime: 1640968200000,
+        endTime: 1640970000000,
+        overlapping: overllapingShows,
+        type: 'timeline'
+      }))
+    ),
+    _react2.default.createElement(
+      'h1',
+      { style: { marginBottom: '10px' } },
+      'Collab Cards'
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.CardV2, _extends({}, COMMON_PROPS, {
+        theme: 'nexc',
+        h1: 'Wicked Tuna: North vs South, East vs West, All Sides',
+        h2: 'S1 E1',
+        h3: '24/05/2021',
+        h4: 'HINDI',
+        h5: 'V1',
+        upload_type: 'rc',
+        isSegment: true,
+        file_type: 'document',
+        upload_status: 'Uploading' // if upload_status is present then card_status will be ignored
+        , card_status: 'Revision',
+        actions: [{
+          title: 'Download',
+          field: 'download',
+          icon: 'download'
+        }, {
+          title: 'Tagging',
+          field: 'tagging',
+          icon: 'tagging'
+        }]
+      }))
+    ),
+    _react2.default.createElement(
+      'h1',
+      { style: { marginBottom: '10px' } },
+      'Search Cards'
+    ),
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.CardV2, _extends({ theme: 'nexc' }, COMMON_SEARCH_PROPS)),
+      _react2.default.createElement(_components.CardV2, _extends({
+        theme: 'nexc',
+        type: 'search',
+        width: 'md'
+      }, COMMON_SEARCH_PROPS, {
+        h1: '1234567890 1234567890 1234567890 1234'
+      })),
+      _react2.default.createElement(_components.CardV2, _extends({ theme: 'nexc', type: 'search', width: 'sm' }, COMMON_SEARCH_PROPS))
     )
   );
 });