@desynova-digital/components 8.15.1 → 8.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/atoms/cardV2/cardV2.story.js +3 -1
  2. package/atoms/cardV2/content.js +51 -1
  3. package/atoms/icon/icons.json +1373 -1373
  4. package/atoms/sideBar/sidebar.js +8 -4
  5. package/atoms/sideBar/sidebar.jsx +69 -42
  6. package/molecules/filter/filter.js +1 -1
  7. package/package.json +2 -2
package/atoms/cardV2/cardV2.story.js CHANGED
@@ -30,6 +30,8 @@ var COMMON_SEARCH_PROPS = _extends({}, COMMON_PROPS, {
30
30
  isSegment: true
31
31
  });
32
32
 
33
+ 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 }];
34
+
33
35
  (0, _react3.storiesOf)("CardV2").add("appearance-dark", function () {
34
36
  return _react2.default.createElement(
35
37
  _storyHelpers.Example,
@@ -47,7 +49,7 @@ var COMMON_SEARCH_PROPS = _extends({}, COMMON_PROPS, {
47
49
  h2: "S1 E1",
48
50
  startTime: 1640968200000,
49
51
  endTime: 1640970000000,
50
- overlapping: [],
52
+ overlapping: overllapingShows,
51
53
  type: "timeline"
52
54
  }))
53
55
  ),
package/atoms/cardV2/content.js CHANGED
@@ -12,7 +12,7 @@ var _templateObject = _taggedTemplateLiteral(["\n display: -webkit-box;\n -web
12
12
  _templateObject2 = _taggedTemplateLiteral(["\n font-family: SFUIText-Regular;\n top: ", ";\n word-break: break-all;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #000;\n }\n"], ["\n font-family: SFUIText-Regular;\n top: ", ";\n word-break: break-all;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #000;\n }\n"]),
13
13
  _templateObject3 = _taggedTemplateLiteral(["\n ", ";\n padding: 0;\n margin-right: 10px;\n font-size: 10px;\n color: #afb2ba;\n -webkit-line-clamp: 1;\n height: 10px;\n"], ["\n ", ";\n padding: 0;\n margin-right: 10px;\n font-size: 10px;\n color: #afb2ba;\n -webkit-line-clamp: 1;\n height: 10px;\n"]),
14
14
  _templateObject4 = _taggedTemplateLiteral(["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 27px;\n cursor: ", ";\n"], ["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 27px;\n cursor: ", ";\n"]),
15
- _templateObject5 = _taggedTemplateLiteral(["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px\n }\n }\n"], ["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px\n }\n }\n"]);
15
+ _templateObject5 = _taggedTemplateLiteral(["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container{\n position:absolute;\n bottom:100%;\n margin-right:110px;\n pointer-events: none;\n opacity:0;\n transition: opacity 0.3s ease-out;\n padding-bottom:10px;\n\n .overlappig-popup{\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding:12px;\n width:300px;\n z-index:10;\n\n .popup-pointer{\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #00cec6;\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n \n .overlapping-episod-list-container{\n max-height:165px;\n overflow:scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n \n .divider{\n height:1px;\n width:100%;\n margin:10px 0;\n background:#303F51;\n }\n .header-container{\n display:flex;\n position:relative;\n .thumbnail{\n width:100px;\n height:55px;\n background-size:cover !important;\n background-repeat:no-repeat !important;\n margin-right:10px;\n border-radius:2px;\n }\n .episod-title{\n font-size:12px;\n margin-bottom:8px;\n max-width:180px;\n line-height:14px;\n color:#fff;\n }\n .episod-details{\n font-size:10px;\n color:#AFB2BA;\n }\n }\n \n .overlappig-popup-title{\n font-size: 12px;\n line-height: 12px;\n color: #AFB2BA;\n margin-bottom:15px;\n }\n }\n }\n \n\n\n :hover{\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px\n }\n }\n"], ["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container{\n position:absolute;\n bottom:100%;\n margin-right:110px;\n pointer-events: none;\n opacity:0;\n transition: opacity 0.3s ease-out;\n padding-bottom:10px;\n\n .overlappig-popup{\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding:12px;\n width:300px;\n z-index:10;\n\n .popup-pointer{\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #00cec6;\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n \n .overlapping-episod-list-container{\n max-height:165px;\n overflow:scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n \n .divider{\n height:1px;\n width:100%;\n margin:10px 0;\n background:#303F51;\n }\n .header-container{\n display:flex;\n position:relative;\n .thumbnail{\n width:100px;\n height:55px;\n background-size:cover !important;\n background-repeat:no-repeat !important;\n margin-right:10px;\n border-radius:2px;\n }\n .episod-title{\n font-size:12px;\n margin-bottom:8px;\n max-width:180px;\n line-height:14px;\n color:#fff;\n }\n .episod-details{\n font-size:10px;\n color:#AFB2BA;\n }\n }\n \n .overlappig-popup-title{\n font-size: 12px;\n line-height: 12px;\n color: #AFB2BA;\n margin-bottom:15px;\n }\n }\n }\n \n\n\n :hover{\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px\n }\n }\n"]);
16
16
 
17
17
  var _react = require("react");
18
18
 
@@ -200,6 +200,56 @@ var Content = function Content(props) {
200
200
  _cardV.DivStyles,
201
201
  { display: "flex", className: "overlapping-container" },
202
202
  _react2.default.createElement(_icon2.default, { name: "overlapping" }),
203
+ _react2.default.createElement(
204
+ "div",
205
+ { className: "overlappig-popup-container" },
206
+ _react2.default.createElement(
207
+ "div",
208
+ { className: "overlappig-popup" },
209
+ _react2.default.createElement("div", { className: "popup-pointer" }),
210
+ _react2.default.createElement(
211
+ "div",
212
+ { className: "overlappig-popup-title" },
213
+ "Overlapping with:"
214
+ ),
215
+ _react2.default.createElement(
216
+ "div",
217
+ { className: "overlapping-episod-list-container" },
218
+ overlapping.map(function (value, index) {
219
+ return _react2.default.createElement(
220
+ "span",
221
+ null,
222
+ _react2.default.createElement(
223
+ "div",
224
+ { className: "header-container" },
225
+ _react2.default.createElement("div", { className: "thumbnail", style: { backgroundImage: "url(" + (value.thumbnail ? value.thumbnail : "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png") + " )" } }),
226
+ _react2.default.createElement(
227
+ "div",
228
+ null,
229
+ _react2.default.createElement(
230
+ "div",
231
+ { className: "episod-title" },
232
+ value.episode_name
233
+ ),
234
+ _react2.default.createElement(
235
+ "div",
236
+ { className: "episod-details" },
237
+ "S" + value.season_no + " E" + value.episode_no,
238
+ _react2.default.createElement(
239
+ "span",
240
+ { style: { marginLeft: "10px" } },
241
+ value.duration,
242
+ " Min"
243
+ )
244
+ )
245
+ )
246
+ ),
247
+ index != overlapping.length - 1 && _react2.default.createElement("div", { className: "divider" })
248
+ );
249
+ })
250
+ )
251
+ )
252
+ ),
203
253
  overlapping.length > 1 && _react2.default.createElement(
204
254
  ParaStyles,
205
255
  { margin: "0" },