@desynova-digital/components 8.17.0 → 8.17.2

package/atoms/cardV2/cardV2.story.js

@@ -67,6 +67,7 @@ var overllapingShows = [{ episode_name: "Wicked Tuna: North vs South, East vs We
         h3: "24/05/2021",
         h4: "HINDI",
         h5: "V1",
+        upload_type: "FC",
         isSegment: true,
         upload_status: "Uploading" // if upload_status is present then card_status will be ignored
         , card_status: "Revision",

package/atoms/cardV2/thumbnail.js

@@ -8,8 +8,10 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = [
 
 var _templateObject = _taggedTemplateLiteral(["\n  background: rgba(0, 0, 0, 0.5);\n"], ["\n  background: rgba(0, 0, 0, 0.5);\n"]),
     _templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  background: ", ";\n  background-size: cover;\n  width: ", ";\n  height: ", ";\n\n  .iframe-image-block {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    cursor: ", ";\n    overflow: hidden;\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n"], ["\n  position: relative;\n  background: ", ";\n  background-size: cover;\n  width: ", ";\n  height: ", ";\n\n  .iframe-image-block {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    cursor: ", ";\n    overflow: hidden;\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n"]),
-    _templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"], ["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"]),
-    _templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  &:hover {\n    background-color: #00cec6;\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"], ["\n  ", ";\n  &:hover {\n    background-color: #00cec6;\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"]);
+    _templateObject3 = _taggedTemplateLiteral(["\n  padding:10px;\n  z-index:2;\n  .uploadWrapper{\n    border-radius: 50%;\n    background: ", ";\n    color: ", ";\n    .wrapper{\n      padding:5px;\n      font-size: 10px;\n      font-weight: 600;\n    }\n  }\n"], ["\n  padding:10px;\n  z-index:2;\n  .uploadWrapper{\n    border-radius: 50%;\n    background: ", ";\n    color: ", ";\n    .wrapper{\n      padding:5px;\n      font-size: 10px;\n      font-weight: 600;\n    }\n  }\n"]),
+    _templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"], ["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"]),
+    _templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  &:hover {\n    background-color: #00cec6;\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"], ["\n  ", ";\n  &:hover {\n    background-color: #00cec6;\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"]),
+    _templateObject6 = _taggedTemplateLiteral(["\n  display:flex;\n  justify-content:space-between;\n"], ["\n  display:flex;\n  justify-content:space-between;\n"]);
 
 var _react = require("react");
 
@@ -60,14 +62,22 @@ var ThumbnailStyles = _styledComponents2.default.div(_templateObject2, function
   return !isClickPrevented ? "pointer" : "default";
 });
 
-var StatusBoxStyles = _styledComponents2.default.div(_templateObject3, OverlayBackgroundStyles, function (_ref5) {
+var UploadTypeContainer = _styledComponents2.default.div(_templateObject3, function (props) {
+  return props.upload_type === 'RC' ? '#FF6327' : '#00CEC6';
+}, function (props) {
+  return props.upload_type === 'RC' ? '#FFFFFF' : '#0C141D';
+});
+
+var StatusBoxStyles = _styledComponents2.default.div(_templateObject4, OverlayBackgroundStyles, function (_ref5) {
   var hex = _ref5.hex;
   return hex.background;
 });
 
 var IconButtonStyles = (0, _styledComponents2.default)(function (props) {
   return _react2.default.createElement(_cardV.BaseButtonStyles, props);
-})(_templateObject4, OverlayBackgroundStyles);
+})(_templateObject5, OverlayBackgroundStyles);
+
+var CardHeader = _styledComponents2.default.div(_templateObject6);
 
 var Thumbnail = function Thumbnail(props) {
   var width = props.width,
@@ -77,7 +87,8 @@ var Thumbnail = function Thumbnail(props) {
       actions = props.actions,
       ingest_db_id = props.ingest_db_id,
       actionClick = props.actionClick,
-      upload_status = props.upload_status;
+      upload_status = props.upload_status,
+      upload_type = props.upload_type;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -159,56 +170,73 @@ var Thumbnail = function Thumbnail(props) {
       onClick: handleThumbnailClick
     },
     _react2.default.createElement(
-      _cardV.DivStyles,
-      {
-        className: "asset-card-thumbnail-head",
-        display: "flex",
-        justify: "flex-end",
-        align: "center",
-        padding: "10px",
-        position: "relative",
-        zIndex: "2"
-      },
-      (card_status || upload_status) && statusIndex > -1 && _react2.default.createElement(
-        StatusBoxStyles,
-        {
-          hex: _tokens.CARD_ASSET_STATUS[statusIndex] ? _tokens.CARD_ASSET_STATUS[statusIndex].hex : { background: "#AFB2BA" }
-        },
-        _react2.default.createElement("div", { className: "status-color" }),
+      CardHeader,
+      null,
+      upload_type && _react2.default.createElement(
+        UploadTypeContainer,
+        { upload_type: upload_type },
         _react2.default.createElement(
-          _cardV.BaseParaStyles,
-          {
-            className: "status-text",
-            display: "inline-block",
-            fontSize: "10px",
-            color: "#FFF"
-          },
-          card_status || upload_status
+          "div",
+          { className: "uploadWrapper" },
+          _react2.default.createElement(
+            "div",
+            { className: "wrapper" },
+            upload_type
+          )
         )
-      ) || null,
-      actions && actions.length && actions.map(function (item, i) {
-        return item.icon && _react2.default.createElement(
-          IconButtonStyles,
+      ),
+      _react2.default.createElement(
+        _cardV.DivStyles,
+        {
+          className: "asset-card-thumbnail-head",
+          display: "flex",
+          justify: "flex-end",
+          align: "center",
+          padding: "10px",
+          position: "relative",
+          zIndex: "2"
+        },
+        (card_status || upload_status) && statusIndex > -1 && _react2.default.createElement(
+          StatusBoxStyles,
           {
-            className: "asset-card-thumbnail-icon-button",
-            type: "button",
-            key: i,
-            position: "relative",
-            border: "none",
-            cursor: "pointer",
-            borderRadius: "15px",
-            height: "26px",
-            padding: "0px",
-            width: "26px",
-            margin: actions.length === i + 1 ? "0" : "0 5px 0px 0px",
-            onClick: function onClick(e) {
-              e.stopPropagation();
-              actionClick(e, item.field);
-            }
+            hex: _tokens.CARD_ASSET_STATUS[statusIndex] ? _tokens.CARD_ASSET_STATUS[statusIndex].hex : { background: "#AFB2BA" }
           },
-          _react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14 })
-        );
-      }) || null
+          _react2.default.createElement("div", { className: "status-color" }),
+          _react2.default.createElement(
+            _cardV.BaseParaStyles,
+            {
+              className: "status-text",
+              display: "inline-block",
+              fontSize: "10px",
+              color: "#FFF"
+            },
+            card_status || upload_status
+          )
+        ) || null,
+        actions && actions.length && actions.map(function (item, i) {
+          return item.icon && _react2.default.createElement(
+            IconButtonStyles,
+            {
+              className: "asset-card-thumbnail-icon-button",
+              type: "button",
+              key: i,
+              position: "relative",
+              border: "none",
+              cursor: "pointer",
+              borderRadius: "15px",
+              height: "26px",
+              padding: "0px",
+              width: "26px",
+              margin: actions.length === i + 1 ? "0" : "0 5px 0px 0px",
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                actionClick(e, item.field);
+              }
+            },
+            _react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14 })
+          );
+        }) || null
+      )
     ),
     iframeurl && _react2.default.createElement(
       "div",

package/atoms/icon/icon.story.js

@@ -98,7 +98,8 @@ console.log(iconsArr);
       _react2.default.createElement(_components.Icon, { name: "triangle-double-right", width: 14, height: 13 }),
       _react2.default.createElement(_components.Icon, { name: "delete", width: 12, height: 14 }),
       _react2.default.createElement(_components.Icon, { name: "promo_review", width: 16, height: 14 }),
-      _react2.default.createElement(_components.Icon, { name: "data-refresh", width: 16, height: 18 })
+      _react2.default.createElement(_components.Icon, { name: "data-refresh", width: 16, height: 18 }),
+      _react2.default.createElement(_components.Icon, { name: "back-to-back", width: 16, height: 18 })
     )
   );
 });
@@ -155,7 +156,8 @@ console.log(iconsArr);
       _react2.default.createElement(_components.Icon, { name: "align_middle", width: 16, height: 16 }),
       _react2.default.createElement(_components.Icon, { name: "align_right", width: 16, height: 16 }),
       _react2.default.createElement(_components.Icon, { name: "comment", width: 13, height: 13 }),
-      _react2.default.createElement(_components.Icon, { name: "cut", width: 14, height: 15 })
+      _react2.default.createElement(_components.Icon, { name: "cut", width: 14, height: 15 }),
+      _react2.default.createElement(_components.Icon, { name: "back-to-back", width: 14, height: 15 })
     )
   );
 });
@@ -205,7 +207,8 @@ console.log(iconsArr);
       _react2.default.createElement(_components.Icon, { name: "upload-arrow", width: 12, height: 18 }),
       _react2.default.createElement(_components.Icon, { name: "log-out", width: 12, height: 12 }),
       _react2.default.createElement(_components.Icon, { name: "brief", width: 14, height: 12 }),
-      _react2.default.createElement(_components.Icon, { name: "upload-asset", width: 24, height: 24 })
+      _react2.default.createElement(_components.Icon, { name: "upload-asset", width: 24, height: 24 }),
+      _react2.default.createElement(_components.Icon, { name: "back-to-back", width: 14, height: 15 })
     )
   );
 });

package/atoms/icon/icons.json

@@ -1363,6 +1363,14 @@
       "width": 24,
       "height": 24
     },
+    "back-to-back": {
+      "paths": [
+        "M1.49967 11.2707L0.395508 10.7082L5.45801 0.729004L6.56217 1.2915L1.49967 11.2707ZM6.99967 11.2707L5.89551 10.7082L10.958 0.729004L12.0622 1.2915L6.99967 11.2707ZM12.4997 11.2707L11.3955 10.7082L16.458 0.729004L17.5622 1.2915L12.4997 11.2707Z"
+      ],
+      "fillRule": "nonzero",
+      "width": 24,
+      "height": 12
+    },
     "users": {
       "paths": [
         "M6.75 10.3125C4.995 10.3125 1.5 11.19 1.5 12.9375V14.25H12V12.9375C12 11.19 8.505 10.3125 6.75 10.3125ZM3.255 12.75C3.885 12.315 5.4075 11.8125 6.75 11.8125C8.0925 11.8125 9.615 12.315 10.245 12.75H3.255ZM6.75 9C8.1975 9 9.375 7.8225 9.375 6.375C9.375 4.9275 8.1975 3.75 6.75 3.75C5.3025 3.75 4.125 4.9275 4.125 6.375C4.125 7.8225 5.3025 9 6.75 9ZM6.75 5.25C7.3725 5.25 7.875 5.7525 7.875 6.375C7.875 6.9975 7.3725 7.5 6.75 7.5C6.1275 7.5 5.625 6.9975 5.625 6.375C5.625 5.7525 6.1275 5.25 6.75 5.25ZM12.03 10.3575C12.9 10.9875 13.5 11.8275 13.5 12.9375V14.25H16.5V12.9375C16.5 11.4225 13.875 10.56 12.03 10.3575ZM11.25 9C12.6975 9 13.875 7.8225 13.875 6.375C13.875 4.9275 12.6975 3.75 11.25 3.75C10.845 3.75 10.47 3.8475 10.125 4.0125C10.5975 4.68 10.875 5.4975 10.875 6.375C10.875 7.2525 10.5975 8.07 10.125 8.7375C10.47 8.9025 10.845 9 11.25 9Z"

package/package.json

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