@zohodesk/dot 1.0.0-temp-72 → 1.0.0-temp-73

package/lib/NewStar/NewStar.module.css

@@ -1,110 +1,110 @@
-.star {
-  position: absolute;
-
-  height: var(--zd_size20);
-  width: var(--zd_size21);
-}
-.topLeft {
-  top: 0;
-}
-[dir=ltr] .topLeft {
-  transform: translate(-45%, -45%);
-  left: 0;
-}
-[dir=rtl] .topLeft {
-  transform: translate(45%, -45%);
-  right: 0;
-}
-.topRight {
-  top: 0;
-}
-[dir=ltr] .topRight {
-  transform: translate(45%, -45%);
-  right: 0;
-}
-[dir=rtl] .topRight {
-  transform: translate(-45%, -45%);
-  left: 0;
-}
-.bottomLeft {
-  bottom: 0;
-}
-[dir=ltr] .bottomLeft {
-  transform: translate(-45%, 45%);
-  left: 0;
-}
-[dir=rtl] .bottomLeft {
-  transform: translate(45%, 45%);
-  right: 0;
-}
-.bottomRight {
-  bottom: 0;
-}
-[dir=ltr] .bottomRight {
-  transform: translate(45%, 45%);
-  right: 0;
-}
-[dir=rtl] .bottomRight {
-  transform: translate(-45%, 45%);
-  left: 0;
-}
-[dir=ltr] .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
-}
-[dir=rtl] .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
-}
-.green::before {
-  color: var(--zdt_newstar_green_text);
-}
-.yellow::before {
-  color: var(--zdt_newstar_yellow_text);
-}
-.blue::before {
-  color: var(--zdt_newstar_blue_text);
-}
-.starOne {
-  composes: stars;
-}
-.starTwo {
-  composes: stars;
-}
-[dir=ltr] .starTwo {
-  animation-delay: 0.5s;
-}
-[dir=rtl] .starTwo {
-  animation-delay: 0.5s;
-}
-.starThree {
-  composes: stars;
-}
-[dir=ltr] .starThree {
-  animation-delay: 1s;
-}
-[dir=rtl] .starThree {
-  animation-delay: 1s;
-}
-
-@keyframes twinkle {
-  0% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.6;
-  }
-}
-
-@keyframes star-scale {
-  0% {
-    transform: perspective(1px) scale(0.7);
-  }
-  50% {
-    transform: perspective(1px) scale(1, 1);
-  }
-  100% {
-    transform: perspective(1px) scale(0.7);
-  }
-}
+.star {
+  position: absolute;
+
+  height: var(--zd_size20);
+  width: var(--zd_size21);
+}
+.topLeft {
+  top: 0;
+}
+[dir=ltr] .topLeft {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
+[dir=rtl] .topLeft {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+.topRight {
+  top: 0;
+}
+[dir=ltr] .topRight {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+[dir=rtl] .topRight {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
+.bottomLeft {
+  bottom: 0;
+}
+[dir=ltr] .bottomLeft {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
+[dir=rtl] .bottomLeft {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+.bottomRight {
+  bottom: 0;
+}
+[dir=ltr] .bottomRight {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+[dir=rtl] .bottomRight {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
+[dir=ltr] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+[dir=rtl] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+.green::before {
+  color: var(--zdt_newstar_green_text);
+}
+.yellow::before {
+  color: var(--zdt_newstar_yellow_text);
+}
+.blue::before {
+  color: var(--zdt_newstar_blue_text);
+}
+.starOne {
+  composes: stars;
+}
+.starTwo {
+  composes: stars;
+}
+[dir=ltr] .starTwo {
+  animation-delay: 0.5s;
+}
+[dir=rtl] .starTwo {
+  animation-delay: 0.5s;
+}
+.starThree {
+  composes: stars;
+}
+[dir=ltr] .starThree {
+  animation-delay: 1s;
+}
+[dir=rtl] .starThree {
+  animation-delay: 1s;
+}
+
+@keyframes twinkle {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes star-scale {
+  0% {
+    transform: perspective(1px) scale(0.7);
+  }
+  50% {
+    transform: perspective(1px) scale(1, 1);
+  }
+  100% {
+    transform: perspective(1px) scale(0.7);
+  }
+}

package/lib/PlusIcon/PlusIcon.module.css

@@ -1,16 +1,16 @@
-.container {
-  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
-  border-radius: 50%;
-  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
-  cursor: pointer;
-  background-color: var(--zdt_plusicon_bg);
-}
-.plusIcon {
-  border: 1px solid var(--zdt_plusicon_border);
-}
-.icon {
-  color: var(--zdt_plusicon_text);
-}
-.plusIcon:hover {
-  border-color: var(--zdt_plusicon_hover_border);
-}
+.container {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+  border-radius: 50%;
+  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
+  cursor: pointer;
+  background-color: var(--zdt_plusicon_bg);
+}
+.plusIcon {
+  border: 1px solid var(--zdt_plusicon_border);
+}
+.icon {
+  color: var(--zdt_plusicon_text);
+}
+.plusIcon:hover {
+  border-color: var(--zdt_plusicon_hover_border);
+}

package/lib/Provider.js

@@ -65,28 +65,6 @@ require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCom
 
 require("@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css");
 
-require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/mode/pureDarkMode.module.css");
-
 require("@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
 require("@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
@@ -111,22 +89,12 @@ require("@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.m
 
 require("@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css");
 
-require("@zohodesk/svg/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
-
-require("@zohodesk/svg/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
-
-require("@zohodesk/svg/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
-
-require("@zohodesk/svg/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
-
-require("@zohodesk/svg/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
-
-require("@zohodesk/svg/assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css");
-
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
 var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
 
+var _Switch = _interopRequireDefault(require("@zohodesk/components/lib/Switch/Switch"));
+
 require("../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css");
 
 require("../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css");
@@ -173,13 +141,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-/* dot pkg - pure dark mode & themes */
-// import '../assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
-// import '../assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css';
-// import '../assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
-// import '../assets/Appearance/dark/themes/red/redDarkDotTheme.module.css';
-// import '../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
-// import '../assets/Appearance/dark/mode/dotDarkMode.module.css';
 _datetimejs["default"].tz.set({
   timezone: 'Asia/Kolkata',
   _packed: '-5R.s -5R.k -5l.a -5u -6u|01234343|-4Fg5R.s BKo0.8 1rDcw.a 1r2LP.a 1un0 HB0 7zX0|15e6',
@@ -203,16 +164,25 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       appearanceName: 'default',
       themeName: 'blue'
     };
+    _this.switchMode = _this.switchMode.bind(_assertThisInitialized(_this));
     _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Provider, [{
-    key: "setAppearance",
-    value: function setAppearance(mode) {
-      this.setState({
-        appearanceName: mode
-      });
+    key: "switchMode",
+    value: function switchMode() {
+      var appearanceName = this.state.appearanceName;
+
+      if (appearanceName == 'default') {
+        this.setState({
+          appearanceName: 'dark'
+        });
+      } else {
+        this.setState({
+          appearanceName: 'default'
+        });
+      }
     }
   }, {
     key: "setTheme",
@@ -251,29 +221,6 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       var yellow = {
         backgroundColor: '#e8b923'
       };
-      var light = {
-        backgroundColor: '#fff'
-      };
-      var night = {
-        backgroundColor: '#232b38'
-      };
-      var dark = {
-        backgroundColor: '#212121'
-      };
-      var fixedPosition = {
-        position: 'fixed',
-        bottom: '0',
-        backgroundColor: '#272727',
-        padding: '10px',
-        borderRadius: '15px 15px 0 0',
-        minWidth: '100px',
-        textAlign: 'center',
-        boxShadow: '0 0 3px #000',
-        fontSize: '12px',
-        zIndex: '3',
-        display: 'flex',
-        alignItems: 'center'
-      };
       return /*#__PURE__*/_react["default"].createElement(_i18n.I18NProvider, {
         i18n: _i18n2["default"],
         timeZone: "Asia/Kolkata",
@@ -296,46 +243,29 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         scroll: "vertical"
       }, this.props.children), /*#__PURE__*/_react["default"].createElement("div", {
-        style: Object.assign({}, fixedPosition, {
-          left: '20%',
-          transform: 'translate(-20%)'
-        })
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          color: '#fff'
-        }
-      }, "Appearance:"), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Light Mode",
-        style: Object.assign({}, themeClass, light),
-        onClick: function onClick() {
-          return _this2.setAppearance('default');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Night Mode",
-        style: Object.assign({}, themeClass, night),
-        onClick: function onClick() {
-          return _this2.setAppearance('dark');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Dark Mode",
-        style: Object.assign({}, themeClass, dark),
-        onClick: function onClick() {
-          return _this2.setAppearance('pureDark');
-        }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        style: Object.assign({}, fixedPosition, {
-          left: '80%',
-          transform: 'translate(-80%)'
-        })
-      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          color: '#fff'
+          position: 'fixed',
+          bottom: '0',
+          backgroundColor: '#272727',
+          padding: '10px',
+          borderRadius: '15px 15px 0 0',
+          minWidth: '100px',
+          textAlign: 'center',
+          left: '50%',
+          transform: 'translate(-50%)',
+          boxShadow: '0 0 3px #000',
+          fontSize: '12px',
+          zIndex: '1000',
+          display: 'flex',
+          alignItems: 'center'
         }
-      }, "Themes:"), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+        id: "switchMode",
+        text: "Light/Night Mode",
+        labelSize: "small",
+        onChange: this.switchMode,
+        checked: appearanceName == 'dark'
+      })), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           display: 'flex'
         }