@zohodesk/components 1.0.0-temp-217.2 → 1.0.0-temp-219

package/lib/Switch/Switch.module.css

@@ -37,7 +37,7 @@
   {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
-.thumb {
+.label:after {
   content: '';
   display: block;
   position: absolute;
@@ -46,21 +46,14 @@
   box-shadow: var(--switch_cricle_box_shadow);
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
-  left: var(--zd_size1) ;
-}
-.onOffIndicationHolder{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100% ;
 }
 
 .checked+.label {
   box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
 }
-.checked+label .thumb {
-  right: var(--zd_size1) ;
-  left: auto ;
+
+.checked+.label:after {
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 .input {
@@ -72,15 +65,15 @@
   width: var(--zd_size28) ;
 }
 .switch_smallLabel {
-  height: var(--zd_size12) ;
+  height: var(--zd_size9) ;
   width: var(--zd_size22) ;
-  bottom: var(--zd_size1) ;
+  top: calc( var(--zd_size2) * -1 ) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel .thumb{
-  width: var(--zd_size10) ;
-  height: var(--zd_size10) ;
-  top: var(--zd_size1) ;
+.switch_smallLabel:after {
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: calc( var(--zd_size2) * -1 ) ;
 }
 
 .medium {
@@ -88,21 +81,15 @@
   width: var(--zd_size34) ;
 }
 .switch_mediumLabel {
-  height: var(--zd_size16) ;
+  height: var(--zd_size13) ;
   width: var(--zd_size31) ;
   top: var(--zd_size2) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel.labelOnTrack{
-  width: var(--zd_size32) ;
-}
-.switch_mediumLabel.labelOnTrack{
-  width: var(--zd_size42) ;
-}
-.switch_mediumLabel .thumb{
-  width: var(--zd_size12) ;
-  height: var(--zd_size12) ;
-  top: var(--zd_size2) ;
+.switch_mediumLabel:after {
+  width: var(--zd_size18) ;
+  height: var(--zd_size18) ;
+  top: calc( var(--zd_size3) * -1 ) ;
 }
 
 .input:disabled+.label {
@@ -138,102 +125,4 @@
 
 [dir=rtl] .switch+label {
   margin-right: var(--zd_size12) ;
-}
-.onOffLabel{
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-}
-.onOffIndication{    
-  /* css:theme-validation:ignore */
-  border: 0.5px solid;
-}
-.offIndication{
- /* css:theme-validation:ignore */
- border-color: #868585;
- border-radius: 50%;
-}
-.onIndication{
-  /* css:theme-validation:ignore */
-  border-color: var(--switch_on_bg_color);
-  border-radius: 5px;
-}
-.thumbIndication.onIndication{
-   /* css:theme-validation:ignore */
-  border-color: #fff;
-}
-.switch_small .thumbIndication.onOffLabel{
-  top: calc( var(--zd_size10) * -1 ) ;
-}
-[dir=ltr] .switch_small .thumbIndication.onOffLabel{
-  right: var(--zd_size3) ;
-}
-[dir=rtl] .switch_small .thumbIndication.onOffLabel{
-  left: var(--zd_size3) ;
-}
-.switch_small .offIndication{
-  width: var(--zd_size5) ;
-  height: var(--zd_size5) ;
-}
-.switch_small .thumbIndication.offIndication{
-    margin: 0 var(--zd_size3) ;
-}
-.switch_small .onIndication{
-  width: var(--zd_size1) ;
-  height: var(--zd_size5) ;
-}
-.switch_small .thumbIndication.onIndication{
-  margin: 0 var(--zd_size5) ;
-}
-.switch_medium .thumbIndication.onOffLabel{
-  top: calc( var(--zd_size10) * -1 ) ;
-}
-[dir=ltr] .switch_medium .thumbIndication.onOffLabel{
-  right: var(--zd_size3) ;
-}
-[dir=rtl] .switch_medium .thumbIndication.onOffLabel{
-  left: var(--zd_size3) ;
-}
-.switch_medium .offIndication{
-  width: var(--zd_size7) ;
-  height: var(--zd_size7) ;
-}
-.switch_medium .thumbIndication.offIndication{
-  margin: 0 var(--zd_size5) ;
-}
-.switch_medium .onIndication{
-  width: var(--zd_size1) ;
-  height: var(--zd_size7) ;
-}
-.switch_medium .thumbIndication.onIndication{
-  margin: 0 var(--zd_size7) ;
-}
-.onOffIndicationText{
-    /* css:theme-validation:ignore */
-  color: #fff;
-}
-.switch_small .onOffIndicationText{
-  font-size: var(--zd_font_size7) ;
-  margin: 0 var(--zd_size4) ;
-}
-.switch_medium .onOffIndicationText{
-  font-size: var(--zd_font_size10) ;
-  margin: 0 var(--zd_size6) ;
-}
-.labelText{
-    /* css:theme-validation:ignore */
-  color: #000;
-}
-.smallLabelText{
-  font-size: var(--zd_font_size11) ;
-  margin: var(--zd_size1) 0 0 ;
-}
-.mediumLabelText{
-  font-size: var(--zd_font_size12) ;
-}
-[dir=ltr] .mediumLabelText{
-  margin : var(--zd_size1) 0 0 var(--zd_size2) ;
-}
-[dir=rtl] .mediumLabelText{
-  margin  : var(--zd_size1) var(--zd_size2) 0 0 ;
 }

package/lib/TextBox/TextBox.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _ComponentCustomizer = require("@zohodesk/dotkit/es/react/components/ComponentCustomizer");
+
 var _TextBoxModule = _interopRequireDefault(require("./TextBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -221,7 +223,6 @@ var TextBox = /*#__PURE__*/function (_React$PureComponent) {
   return TextBox;
 }(_react["default"].PureComponent);
 
-exports["default"] = TextBox;
 TextBox.defaultProps = _defaultProps.defaultProps;
 TextBox.propTypes = _propTypes.propTypes; // if (__DOCS__) {
 //   Textbox.docs = {
@@ -230,4 +231,10 @@ TextBox.propTypes = _propTypes.propTypes; // if (__DOCS__) {
 //     external: true,
 //     description: ' '
 //   };
-// }
+// }
+
+var _default = (0, _ComponentCustomizer.ComponentCustomizer)(TextBox, {
+  name: 'TextBox'
+});
+
+exports["default"] = _default;

package/lib/index.js

@@ -26,7 +26,6 @@ var _exportNames = {
   RippleEffect: true,
   Stencils: true,
   Switch: true,
-  SwitchNew: true,
   Tag: true,
   Textarea: true,
   TextBox: true,
@@ -145,12 +144,6 @@ Object.defineProperty(exports, "Switch", {
     return _Switch["default"];
   }
 });
-Object.defineProperty(exports, "SwitchNew", {
-  enumerable: true,
-  get: function get() {
-    return _SwitchNew["default"];
-  }
-});
 Object.defineProperty(exports, "Tag", {
   enumerable: true,
   get: function get() {
@@ -359,8 +352,6 @@ var _Stencils = _interopRequireDefault(require("./Stencils/Stencils"));
 
 var _Switch = _interopRequireDefault(require("./Switch/Switch"));
 
-var _SwitchNew = _interopRequireDefault(require("./SwitchNew/SwitchNew"));
-
 var _Tab = require("./Tab");
 
 Object.keys(_Tab).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-217.2",
+  "version": "1.0.0-temp-219",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -38,7 +38,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
-    "prepublishOnly": "node prePublish.js && npm run download",
+    "prepublishOnly": "node prePublish.js && npm run test && npm run download && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -69,6 +69,7 @@
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.2.7",
+    "@zohodesk/dotkit": "1.0.0-temp-1",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/icons": "1.0.70",
@@ -86,6 +87,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
+    "@zohodesk/dotkit": "1.0.0-temp-1",
     "@zohodesk/icons": "1.0.70",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",