@desynova-digital/components 8.8.1 → 8.9.3

package/_helpers/story-stack.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 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 _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: bottom;\n  justify-content: ', ';\n\n  margin-bottom: 20px;\n\n  > * {\n    flex: ', ';\n    align-self: center;\n    margin-right: ', ';\n  }\n  > *:last-child {\n    margin-right: 0;\n  }\n'], ['\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: bottom;\n  justify-content: ', ';\n\n  margin-bottom: 20px;\n\n  > * {\n    flex: ', ';\n    align-self: center;\n    margin-right: ', ';\n  }\n  > *:last-child {\n    margin-right: 0;\n  }\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: bottom;\n  justify-content: ', ';\n  overflow: auto;\n  margin-bottom: 20px;\n\n  > * {\n    flex: ', ';\n    align-self: center;\n    margin-right: ', ';\n  }\n  > *:last-child {\n    margin-right: 0;\n  }\n'], ['\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: bottom;\n  justify-content: ', ';\n  overflow: auto;\n  margin-bottom: 20px;\n\n  > * {\n    flex: ', ';\n    align-self: center;\n    margin-right: ', ';\n  }\n  > *:last-child {\n    margin-right: 0;\n  }\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  flex-basis: ', '%;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n'], ['\n  flex-basis: ', '%;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n']);
 
 var _react = require('react');

package/atoms/cardV2/cardV2.js

@@ -9,7 +9,7 @@ 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  "], ["\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  "]),
     _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  background-color: ", ";\n  border-radius: 2px;\n"], ["\n  position: relative;\n  background-color: ", ";\n  border-radius: 2px;\n"]);
+    _templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  border-radius: 2px;\n"], ["\n  position: relative;\n  border-radius: 2px;\n"]);
 
 var _react = require("react");
 
@@ -31,6 +31,10 @@ var _content = require("./content");
 
 var _content2 = _interopRequireDefault(_content);
 
+var _timeline = require("./timeline");
+
+var _timeline2 = _interopRequireDefault(_timeline);
+
 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) } })); }
@@ -63,24 +67,22 @@ var BaseParaStyles = exports.BaseParaStyles = _styledComponents2.default.p(_temp
 
 var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents2.default.button(_templateObject4, CommonStyles);
 
-var CardStyles = _styledComponents2.default.div(_templateObject5, function (_ref2) {
-  var bgColor = _ref2.bgColor,
-      type = _ref2.type;
-  return type === "search" ? "transparent" : bgColor === "secondary" && type !== "search" ? "#0C141D" : "#15212F";
-});
+var CardStyles = _styledComponents2.default.div(_templateObject5);
 
 var CardV2 = function CardV2(props) {
-  var width = props.width;
+  var width = props.width,
+      type = props.type;
 
 
   var content = (0, _react.useCallback)(function () {
     return _react2.default.createElement(
       _react.Fragment,
       null,
+      type === 'timeline' && _react2.default.createElement(_timeline2.default, props) || null,
       _react2.default.createElement(_thumbnail2.default, props),
       _react2.default.createElement(_content2.default, props)
     );
-  }, []);
+  }, [props]);
 
   /**
    * based on width will render the card
@@ -96,7 +98,7 @@ var CardV2 = function CardV2(props) {
         content()
       );
     } else return content();
-  }, []);
+  }, [props]);
 
   return _react2.default.createElement(
     CardStyles,

package/atoms/cardV2/cardV2.story.js

@@ -34,6 +34,23 @@ var COMMON_SEARCH_PROPS = _extends({}, COMMON_PROPS, {
   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, {
+        h1: "Wicked Tuna: North vs South, East vs West, All Sides",
+        h2: "S1 E1",
+        startTime: 1640968200000,
+        endTime: 1640970000000,
+        overlapping: [],
+        type: "timeline"
+      }))
+    ),
     _react2.default.createElement(
       "h1",
       { style: { marginBottom: "10px" } },

package/atoms/cardV2/content.js

@@ -12,7 +12,7 @@ var _templateObject = _taggedTemplateLiteral(["\n  display: -webkit-box;\n  -web
     _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"]),
     _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"]),
     _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"]),
-    _templateObject5 = _taggedTemplateLiteral(["\n  height: 74px;\n  width: ", ";\n  padding: ", ";\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"], ["\n  height: 74px;\n  width: ", ";\n  padding: ", ";\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"]);
+    _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"]);
 
 var _react = require("react");
 
@@ -28,6 +28,10 @@ var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
 var _cardV = require("./cardV2");
 
+var _icon = require("../../atoms/icon");
+
+var _icon2 = _interopRequireDefault(_icon);
+
 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) } })); }
@@ -63,6 +67,10 @@ var ContentStyles = _styledComponents2.default.div(_templateObject5, function (_
   } else if (type === "search" && width !== "sm") {
     return "13px 0px";
   } else return "13px 15px";
+}, function (_ref4) {
+  var bgColor = _ref4.bgColor,
+      type = _ref4.type;
+  return type === "search" ? "transparent" : bgColor === "secondary" && type !== "search" ? "#0C141D" : "#15212F";
 });
 
 var Content = function Content(props) {
@@ -75,7 +83,8 @@ var Content = function Content(props) {
       type = props.type,
       width = props.width,
       titleClick = props.titleClick,
-      show_page_id = props.show_page_id;
+      show_page_id = props.show_page_id,
+      overlapping = props.overlapping;
 
   var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -187,6 +196,16 @@ var Content = function Content(props) {
           h5
         )
       ),
+      overlapping && overlapping.length && _react2.default.createElement(
+        _cardV.DivStyles,
+        { display: "flex", className: "overlapping-container" },
+        _react2.default.createElement(_icon2.default, { name: "overlapping" }),
+        overlapping.length > 1 && _react2.default.createElement(
+          ParaStyles,
+          { margin: "0" },
+          overlapping.length
+        )
+      ) || null,
       tooltipVisibleSection == "bottom" && _react2.default.createElement(
         ToolTipStyles,
         {

package/atoms/cardV2/thumbnail.js

@@ -48,7 +48,7 @@ var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject);
 
 var ThumbnailStyles = _styledComponents2.default.div(_templateObject2, function (_ref) {
   var thumbnail = _ref.thumbnail;
-  return "url(" + thumbnail + ") no-repeat 100%";
+  return "url(" + thumbnail + ") no-repeat 50%";
 }, function (_ref2) {
   var width = _ref2.width;
   return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
@@ -210,7 +210,7 @@ var Thumbnail = function Thumbnail(props) {
         );
       })
     ),
-    _react2.default.createElement(
+    iframeurl && _react2.default.createElement(
       "div",
       {
         onMouseMove: handleMouseMove,
@@ -219,7 +219,7 @@ var Thumbnail = function Thumbnail(props) {
       },
       _react2.default.createElement("div", { className: "hover-pointer", ref: hoverPointerRef }),
       _react2.default.createElement("img", { ref: iframeImageRef, className: "iframe-image", src: iframeurl })
-    )
+    ) || null
   );
 };
 

package/atoms/cardV2/timeline.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    height: 50px;\n    .start-time {\n        position: absolute;\n        top: 0px;\n        .hours {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Medium';\n        }\n        .seperator {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Light';\n        }\n        .minutes {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Light';\n            align-self: 1;\n        }\n    }\n    .image-block {\n        position: absolute;\n        bottom: 0;\n    }\n    .end-time {\n        position: absolute;\n        right: 0;\n        top: 8px;\n        font-size: 10px;\n        font-family: 'SFUIText-Light';\n        color: #AFB2BA;\n        .am-pm {\n            margin-left: 4px;\n        }\n    }\n    .am-pm {\n        font-size: 10px;\n        align-self: end;\n        font-family: 'SFUIText-Light';\n        color: #AFB2BA;\n        margin-left: 3px;\n    }\n"], ["\n    position: relative;\n    height: 50px;\n    .start-time {\n        position: absolute;\n        top: 0px;\n        .hours {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Medium';\n        }\n        .seperator {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Light';\n        }\n        .minutes {\n            font-size: 20px;\n            color: #fff;\n            font-family: 'SFUIText-Light';\n            align-self: 1;\n        }\n    }\n    .image-block {\n        position: absolute;\n        bottom: 0;\n    }\n    .end-time {\n        position: absolute;\n        right: 0;\n        top: 8px;\n        font-size: 10px;\n        font-family: 'SFUIText-Light';\n        color: #AFB2BA;\n        .am-pm {\n            margin-left: 4px;\n        }\n    }\n    .am-pm {\n        font-size: 10px;\n        align-self: end;\n        font-family: 'SFUIText-Light';\n        color: #AFB2BA;\n        margin-left: 3px;\n    }\n"]);
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require("styled-components");
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _dateTime = require("../dateTime");
+
+var _dateTime2 = _interopRequireDefault(_dateTime);
+
+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) } })); }
+
+var TimelineBlock = _styledComponents2.default.div(_templateObject);
+
+var Timeline = function Timeline(props) {
+    var startTime = props.startTime,
+        endTime = props.endTime;
+
+
+    var getTimeString = function getTimeString(date, type) {
+        var string = '';
+        if (date) {
+            var timeString = _dateTime2.default.toTimeString(date, "HH:MM AP");
+
+            if (type === 'hours') {
+                string = timeString.split(':')[0];
+            } else if (type === 'minutes') {
+                string = timeString.split(':')[1].split(' ')[0];
+            } else if (type === 'ampm') {
+                string = timeString.split(' ')[1];
+            }
+        }
+        return string;
+    };
+
+    return _react2.default.createElement(
+        TimelineBlock,
+        null,
+        _react2.default.createElement(
+            "div",
+            { className: "start-time" },
+            _react2.default.createElement(
+                "span",
+                { className: "hours" },
+                getTimeString(startTime, 'hours')
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "seperator" },
+                ":"
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "minutes" },
+                getTimeString(startTime, 'minutes')
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "am-pm" },
+                getTimeString(startTime, 'ampm')
+            )
+        ),
+        _react2.default.createElement(
+            "div",
+            { className: "image-block" },
+            _react2.default.createElement(
+                "svg",
+                { width: "222", height: "23", viewBox: "0 0 222 23", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                _react2.default.createElement("rect", { width: "2", height: "23", rx: "1", fill: "#00CEC6" }),
+                _react2.default.createElement("rect", { x: "15", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "29", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "42", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "56", y: "8", width: "1", height: "15", rx: "0.5", fill: "#303F51" }),
+                _react2.default.createElement("rect", { x: "70", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "84", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "97", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "111", y: "8", width: "1", height: "15", rx: "0.5", fill: "#303F51" }),
+                _react2.default.createElement("rect", { x: "125", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "139", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "152", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "166", y: "8", width: "1", height: "15", rx: "0.5", fill: "#303F51" }),
+                _react2.default.createElement("rect", { x: "180", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "194", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "207", y: "19", width: "1", height: "4", rx: "0.5", fill: "#1B2B3F" }),
+                _react2.default.createElement("rect", { x: "221", y: "8", width: "1", height: "15", rx: "0.5", fill: "#FF6C56" })
+            )
+        ),
+        _react2.default.createElement(
+            "div",
+            { className: "end-time" },
+            _react2.default.createElement(
+                "span",
+                { className: "hours" },
+                getTimeString(endTime, 'hours')
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "seperator" },
+                ":"
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "minutes" },
+                getTimeString(endTime, 'minutes')
+            ),
+            _react2.default.createElement(
+                "span",
+                { className: "am-pm" },
+                getTimeString(endTime, 'ampm')
+            )
+        )
+    );
+};
+
+Timeline.propTypes = {
+    startTime: _propTypes2.default.string,
+    endTime: _propTypes2.default.string
+};
+
+exports.default = Timeline;

package/atoms/checkbox/checkbox.js

@@ -114,7 +114,7 @@ var Checkbox = function Checkbox(props) {
       {
         theme: props.theme,
         selected: props.defaultChecked,
-        className: props.isDisabled ? "disabled" : ""
+        className: props.isDisabled && props.access !== 'read' ? "disabled" : ""
       },
       props.children
     ) : null,
@@ -166,7 +166,8 @@ var CheckboxGroup = function CheckboxGroup(props) {
         onChange: child.props.isDisabled ? props.onChange : function () {},
         theme: props.theme,
         type: props.type,
-        fillRule: props.fillRule || ''
+        fillRule: props.fillRule || '',
+        access: child.props.access
       }) : null;
     })
   );
@@ -184,7 +185,8 @@ Checkbox.propTypes = {
   /** Callback function which is called when the user selects an option */
   onChange: _propTypes2.default.func,
   type: _propTypes2.default.oneOf(["default", "label", "switch"]),
-  fillRule: _propTypes2.default.string
+  fillRule: _propTypes2.default.string,
+  access: _propTypes2.default.string
 };
 
 Checkbox.defaultProps = {

package/atoms/icon/icon.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.__ICONNAMES__ = undefined;
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  line-height: 1;\n'], ['\n  display: inline-block;\n  line-height: 1;\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  line-height: 1;\n  user-select: none;\n  -webkit-user-select: none; /* webkit (safari, chrome) browsers */\n  -moz-user-select: none; /* mozilla browsers */\n  -khtml-user-select: none; /* webkit (konqueror) browsers */\n  -ms-user-select: none; /* IE10+ */\n'], ['\n  display: inline-block;\n  line-height: 1;\n  user-select: none;\n  -webkit-user-select: none; /* webkit (safari, chrome) browsers */\n  -moz-user-select: none; /* mozilla browsers */\n  -khtml-user-select: none; /* webkit (konqueror) browsers */\n  -ms-user-select: none; /* IE10+ */\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 1;\n  path {\n    fill: ', ';\n  }\n'], ['\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 1;\n  path {\n    fill: ', ';\n  }\n']);
 
 var _react = require('react');
@@ -51,7 +51,8 @@ var Icon = function Icon(props) {
           fill: props.color,
           stroke: props.stroke,
           strokeWidth: icon.strokeWidth,
-          fillRule: icon.fillRule
+          fillRule: icon.fillRule,
+          clipRule: icon.clipRule
         });
       })
     )

package/atoms/icon/icon.story.js

@@ -10,9 +10,33 @@ var _storyHelpers = require("../../_helpers/story-helpers");
 
 var _components = require("../../components");
 
+var _icons = require("./icons.json");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var iconsArr = Object.keys(_icons.icons).map(function (icon) {
+  var iconObj = {
+    name: icon,
+    width: _icons.icons[icon].width,
+    height: _icons.icons[icon].height
+  };
+  return iconObj;
+});
+console.log(iconsArr);
 (0, _react3.storiesOf)("Icon").add("default", function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: "Icons", background: "dark" },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      iconsArr.map(function (icon) {
+        return _react2.default.createElement(_components.Icon, { name: icon.name, width: icon.width, height: icon.height, color: "#fff" });
+      })
+    )
+  );
+});
+(0, _react3.storiesOf)("Icon").add("default 1", function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
     { title: "Icons", background: "dark" },

package/atoms/icon/icons.json

@@ -1230,6 +1230,26 @@
       ],
       "width": 16,
       "height": 18
+    },
+    "overlapping": {
+      "paths": [
+        "M0 8.57143V10H12.8571V8.57143H0ZM0 5.71429H12.8571V7.14286H0V5.71429ZM0 0H12.8571V4.28571H0V0Z"
+      ],
+      "width": 13,
+      "height": 10,
+      "fillRule": "evenodd",
+      "clipRule": "evenodd"
+    },
+    "curate": {
+      "paths": ["M0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8ZM14.5455 8C14.5455 11.615 11.615 14.5455 8 14.5455C4.38505 14.5455 1.45455 11.615 1.45455 8C1.45455 4.38505 4.38505 1.45455 8 1.45455C11.615 1.45455 14.5455 4.38505 14.5455 8ZM10.1818 5.09091C10.5835 5.09091 10.9091 5.41652 10.9091 5.81818V10.1818C10.9091 10.5835 10.5835 10.9091 10.1818 10.9091H5.81818C5.41652 10.9091 5.09091 10.5835 5.09091 10.1818V5.81818C5.09091 5.41652 5.41652 5.09091 5.81818 5.09091H10.1818ZM6.54545 9.45455V6.54545H9.45455V9.45455H6.54545Z"],
+      "width": 16,
+      "height": 16,
+      "fillRule": "evenodd"
+    },
+    "camera": {
+      "paths": ["M6.22222 0L4.59556 1.77778H1.77778C0.8 1.77778 0 2.57778 0 3.55556V14.2222C0 15.2 0.8 16 1.77778 16H16C16.9778 16 17.7778 15.2 17.7778 14.2222V3.55556C17.7778 2.57778 16.9778 1.77778 16 1.77778H13.1822L11.5556 0H6.22222ZM8.88889 13.3333C6.43556 13.3333 4.44444 11.3422 4.44444 8.88889C4.44444 6.43556 6.43556 4.44444 8.88889 4.44444C11.3422 4.44444 13.3333 6.43556 13.3333 8.88889C13.3333 11.3422 11.3422 13.3333 8.88889 13.3333ZM8.88889 11.7333C10.4598 11.7333 11.7333 10.4598 11.7333 8.88889C11.7333 7.31795 10.4598 6.04444 8.88889 6.04444C7.31795 6.04444 6.04444 7.31795 6.04444 8.88889C6.04444 10.4598 7.31795 11.7333 8.88889 11.7333Z"],
+      "width": 18,
+      "height": 16
     }
   }
 }

package/package.json

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