@desynova-digital/components 8.19.14 → 8.19.15

package/components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
+exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
 
 require("./_helpers/globals");
 
@@ -187,6 +187,38 @@ var _errorScreen = require("./molecules/errorScreen/errorScreen");
 
 var _errorScreen2 = _interopRequireDefault(_errorScreen);
 
+var _CollabErrorScreen = require("./atoms/loader/ShimmerComponent/CollabErrorScreen");
+
+var _CollabErrorScreen2 = _interopRequireDefault(_CollabErrorScreen);
+
+var _CollabShimmerCard = require("./atoms/loader/ShimmerComponent/CollabShimmerCard");
+
+var _CollabShimmerCard2 = _interopRequireDefault(_CollabShimmerCard);
+
+var _CollabShimmerCardTray = require("./atoms/loader/ShimmerComponent/CollabShimmerCardTray");
+
+var _CollabShimmerCardTray2 = _interopRequireDefault(_CollabShimmerCardTray);
+
+var _FiltersShimmer = require("./atoms/loader/ShimmerComponent/FiltersShimmer");
+
+var _FiltersShimmer2 = _interopRequireDefault(_FiltersShimmer);
+
+var _GraphDetailShimmer = require("./atoms/loader/ShimmerComponent/GraphDetailShimmer");
+
+var _GraphDetailShimmer2 = _interopRequireDefault(_GraphDetailShimmer);
+
+var _GraphsComponentShimmer = require("./atoms/loader/ShimmerComponent/GraphsComponentShimmer");
+
+var _GraphsComponentShimmer2 = _interopRequireDefault(_GraphsComponentShimmer);
+
+var _GraphTitleShimmer = require("./atoms/loader/ShimmerComponent/GraphTitleShimmer");
+
+var _GraphTitleShimmer2 = _interopRequireDefault(_GraphTitleShimmer);
+
+var _Shimmer = require("./atoms/loader/ShimmerComponent/Shimmer");
+
+var _Shimmer2 = _interopRequireDefault(_Shimmer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* Molecules */
@@ -243,5 +275,13 @@ exports.Tabs = _tabs2.default;
 exports.Carousel = _carousel2.default;
 exports.ErrorScreen = _errorScreen2.default;
 exports.SideBar = _sidebar2.default;
+exports.CollabErrorScreen = _CollabErrorScreen2.default;
+exports.CollabShimmerCard = _CollabShimmerCard2.default;
+exports.CollabShimmerCardTray = _CollabShimmerCardTray2.default;
+exports.FiltersShimmer = _FiltersShimmer2.default;
+exports.GraphDetailsShimmer = _GraphDetailShimmer2.default;
+exports.GraphsComponentShimmer = _GraphsComponentShimmer2.default;
+exports.GraphTitleShimmer = _GraphTitleShimmer2.default;
+exports.Shimmer = _Shimmer2.default;
 
 /* atoms */

package/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
+exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
 
 var _components = require("./components");
 
@@ -51,4 +51,12 @@ exports.VideoPlayer = _components.VideoPlayer;
 exports.Tabs = _components.Tabs;
 exports.Carousel = _components.Carousel;
 exports.ErrorScreen = _components.ErrorScreen;
-exports.SideBar = _components.SideBar;
+exports.SideBar = _components.SideBar;
+exports.CollabErrorScreen = _components.CollabErrorScreen;
+exports.CollabShimmerCard = _components.CollabShimmerCard;
+exports.CollabShimmerCardTray = _components.CollabShimmerCardTray;
+exports.FiltersShimmer = _components.FiltersShimmer;
+exports.GraphDetailsShimmer = _components.GraphDetailsShimmer;
+exports.GraphsComponentShimmer = _components.GraphsComponentShimmer;
+exports.GraphTitleShimmer = _components.GraphTitleShimmer;
+exports.Shimmer = _components.Shimmer;

package/molecules/table/table.js

@@ -87,6 +87,10 @@ var _inputText = require("../../atoms/inputText");
 
 var _inputText2 = _interopRequireDefault(_inputText);
 
+var _Shimmer = require("../../atoms/loader/ShimmerComponent/Shimmer");
+
+var _Shimmer2 = _interopRequireDefault(_Shimmer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -208,7 +212,7 @@ var Table = function (_Component) {
 
     _this.actionElements = function (item, column, idx) {
       if (item[column.field] === undefined) {
-        return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+        return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
       }
       var arrLength = item[column.field].length;
       var elements = item[column.field].reduce(function (acc, curr) {
@@ -325,7 +329,7 @@ var Table = function (_Component) {
         case "extra_columns":
           {
             if (tableLoading) {
-              return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+              return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
             } else {
               return _react2.default.createElement("div", {
                 onClick: function onClick(e) {
@@ -353,10 +357,10 @@ var Table = function (_Component) {
         case "link_text":
           {
             if (tableLoading) {
-              return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+              return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
             } else {
               if (item.actions === undefined) {
-                return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+                return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
               } else {
                 var isPlayable = item.actions.includes("play");
                 return _react2.default.createElement(
@@ -376,7 +380,7 @@ var Table = function (_Component) {
 
         case "action_icon":
           if (tableLoading) {
-            return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+            return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
           } else {
             return _this.actionElements(item, column, idx);
           }
@@ -386,7 +390,7 @@ var Table = function (_Component) {
 
         case "date":
           if (tableLoading) {
-            return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+            return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
           } else {
             return _react2.default.createElement(
               "div",
@@ -397,7 +401,7 @@ var Table = function (_Component) {
 
         case "time":
           if (tableLoading) {
-            return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+            return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
           } else {
             return _react2.default.createElement(
               "div",
@@ -408,7 +412,7 @@ var Table = function (_Component) {
 
         case "datetime":
           if (tableLoading) {
-            return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+            return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
           } else {
             return _react2.default.createElement(
               "div",
@@ -455,7 +459,7 @@ var Table = function (_Component) {
         case "label":
           {
             if (tableLoading) {
-              return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+              return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
             } else {
               if (item[column.field]) {
                 return _react2.default.createElement(
@@ -472,7 +476,7 @@ var Table = function (_Component) {
         case "dubbing_status":
           {
             if (tableLoading) {
-              return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+              return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
             } else {
               if (item[column.field] && Array.isArray(item[column.field])) {
                 return _react2.default.createElement(
@@ -500,7 +504,7 @@ var Table = function (_Component) {
         case "rowChecked":
           {
             if (tableLoading) {
-              return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+              return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
             } else {
               return _react2.default.createElement(
                 "div",
@@ -521,7 +525,7 @@ var Table = function (_Component) {
 
         default:
           if (tableLoading) {
-            return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
+            return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
           } else {
             if (typeof item[column.field] === "string" || typeof item[column.field] === "number" || Array.isArray(item[column.field])) {
               var className = "text-box";
@@ -1067,15 +1071,15 @@ var Table = function (_Component) {
                 marginBottom: "15px"
               }
             },
-            _react2.default.createElement(Shimmer, { height: "16px", width: "100px" }),
-            _react2.default.createElement(Shimmer, { height: "16px", width: "110px" }),
-            _react2.default.createElement(Shimmer, { height: "16px", width: "110px" }),
-            _react2.default.createElement(Shimmer, { height: "16px", width: "120px" }),
-            _react2.default.createElement(Shimmer, { height: "16px", width: "100px" }),
-            _react2.default.createElement(Shimmer, { height: "16px", width: "110px" }),
-            _react2.default.createElement(Shimmer, { height: "16px", width: "100px" }),
-            _react2.default.createElement(Shimmer, { height: "16px", width: "100px" }),
-            _react2.default.createElement(Shimmer, { height: "16px", width: "50px" })
+            _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100px" }),
+            _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "110px" }),
+            _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "110px" }),
+            _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "120px" }),
+            _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100px" }),
+            _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "110px" }),
+            _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100px" }),
+            _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100px" }),
+            _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "50px" })
           );
         })
       );
@@ -1274,16 +1278,16 @@ var Table = function (_Component) {
           this.props.tableLoading && _react2.default.createElement(
             TableTitleLoadingInitial,
             null,
-            _react2.default.createElement(Shimmer, { height: "20px", width: "150px" }),
+            _react2.default.createElement(_Shimmer2.default, { height: "20px", width: "150px" }),
             _react2.default.createElement(
               RightSideTitleLoadingTable,
               null,
-              _react2.default.createElement(Shimmer, { height: "18px", width: "200px" }),
-              _react2.default.createElement(Shimmer, { height: "18px", width: "100px" }),
-              _react2.default.createElement(Shimmer, { height: "18px", width: "150px" }),
-              _react2.default.createElement(Shimmer, { height: "18px", width: "30px" }),
-              _react2.default.createElement(Shimmer, { height: "18px", width: "30px" }),
-              _react2.default.createElement(Shimmer, { height: "18px", width: "30px" })
+              _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "200px" }),
+              _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "100px" }),
+              _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "150px" }),
+              _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "30px" }),
+              _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "30px" }),
+              _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "30px" })
             )
           ) || _react2.default.createElement(
             "div",

package/molecules/table/table.story.js

@@ -296,6 +296,7 @@ var data = {
         , rowSelectionChange: function rowSelectionChange(selectedRows) {
           console.log("rowSelectionChange::::", selectedRows);
         },
+        tableLoading: true,
         actionLable: {
           play: "Play",
           subtitle: "Subtitle",

package/package.json

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