@zohodesk/components 1.0.0-alpha-265 → 1.0.0-alpha-267

package/lib/Select/props/defaultProps.js

@@ -43,7 +43,8 @@ var Select_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   customProps: {},
-  isLoading: false
+  isLoading: false,
+  isAbsolutePositioningNeeded: true
 };
 exports.Select_defaultProps = Select_defaultProps;
 var GroupSelect_defaultProps = {

package/lib/Select/props/propTypes.js

@@ -92,7 +92,8 @@ var Select_propTypes = {
     SuggestionsProps: _propTypes["default"].object
   }),
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {

package/lib/Switch/Switch.module.css

@@ -2,22 +2,26 @@
   /* switch default variables */
   --switch_off_bg_color: var(--zdt_switch_default_off_bg);
   --switch_on_bg_color: var(--zdt_switch_default_on_bg);
-  
+
   /* switch circle default variables */
   --switch_circle_bg_color: var(--zdt_switch_circle_bg);
   --switch_circle_border_radius: 50px;
-  --switch_cricle_box_shadow: 0 1px 4px 0 var(--zdt_switch_circle_shadow);
+  --switch_cricle_box_shadow: var(--zd_bs_switch_default);
 }
+
 .container {
   composes: varClass;
   vertical-align: middle;
 }
+
 .disabled {
   composes: disabled from '../common/common.module.css';
 }
+
 .readonly {
   composes: readonly from '../common/common.module.css';
 }
+
 .label {
   display: inline-block;
   position: relative;
@@ -26,9 +30,11 @@
   border-radius: 20px;
   cursor: pointer;
 }
+
 .effect:hover .label
+
 /* .effect:focus .label */
- {
+  {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
 .label:after {
@@ -41,16 +47,19 @@
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
 }
-.checked + .label {
+
+.checked+.label {
   box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
 }
-.checked + .label:after {
+
+.checked+.label:after {
   right: calc(var(--zd_size1) * -1);
 }
 
 .input {
   display: none;
 }
+
 .small {
   height: var(--zd_size14);
   width: var(--zd_size28);
@@ -66,6 +75,7 @@
   height: var(--zd_size12);
   top: calc(var(--zd_size2) * -1);
 }
+
 .medium {
   height: var(--zd_size18);
   width: var(--zd_size34);
@@ -81,31 +91,38 @@
   height: var(--zd_size18);
   top: calc(var(--zd_size3) * -1);
 }
-.input:disabled + .label {
+
+.input:disabled+.label {
   opacity: 0.4;
   border-color: var(--zdt_switch_default_off_bg);
   cursor: not-allowed;
 }
+
 .switch {
   display: inline-block;
   composes: offSelection from '../common/common.module.css';
   vertical-align: middle;
 }
+
 .switch_small {
   composes: small;
   composes: switch;
 }
+
 .switch_medium {
   composes: medium;
   composes: switch;
 }
-.switch + label {
+
+.switch+label {
   position: relative;
   top: calc(var(--zd_size1) * -1);
 }
-[dir=ltr] .switch + label {
+
+[dir=ltr] .switch+label {
   margin-left: var(--zd_size12);
 }
-[dir=rtl] .switch + label {
+
+[dir=rtl] .switch+label {
   margin-right: var(--zd_size12);
 }

package/lib/Tab/Tabs.module.css

@@ -3,6 +3,7 @@
   z-index: 1;
   --tab_position_gap: var(--zd_size22);
 }
+
 .alpha {
   height: var(--zd_size35);
   background-color: var(--zdt_tabs_alpha_bg);
@@ -30,7 +31,7 @@
   bottom: 0;
   height: var(--zd_size10);
   border-radius: 100px / 5px;
-  box-shadow: 0 -2px 9px var(--zdt_tabs_alpha_box_shadow);
+  box-shadow: var(--zd_bs_tabs_shadow);
 }
 
 [dir=ltr] .alpha::after {
@@ -115,6 +116,7 @@
   position: relative;
   cursor: pointer;
 }
+
 .menuBox {
   max-height: var(--zd_size220);
 }
@@ -128,13 +130,15 @@
 [dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
   left: calc(var(--tab_position_gap) * -1);
 }
+
 [dir=ltr] .bottomLeftToRight, [dir=ltr] .topLeftToRight, [dir=ltr] .bottomCenterToRight {
   left: calc(var(--tab_position_gap) * -1);
 }
+
 [dir=rtl] .bottomLeftToRight, [dir=rtl] .topLeftToRight, [dir=rtl] .bottomCenterToRight {
   right: calc(var(--tab_position_gap) * -1);
 }
 
-.hidden{
+.hidden {
   visibility: hidden;
 }

package/lib/Tooltip/Tooltip.module.css

@@ -1,6 +1,7 @@
 .tooltiptext {
   position: fixed;
-  z-index: 9999999; /*Hook for editor alert*/
+  z-index: 9999999;
+  /*Hook for editor alert*/
   pointer-events: none;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   border-radius: var(--zd_size4);
@@ -9,6 +10,7 @@
 }[dir=rtl] .tooltiptext {
   animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
 }
+
 .tooltipcont {
   color: var(--zdt_tooltip_default_text);
   font-size: var(--zd_font_size13);
@@ -24,9 +26,11 @@
   border-color: transparent;
   border-radius: var(--zd_size4);
 }
+
 .tooltipWrapCont {
   white-space: pre-wrap;
 }
+
 .tooltipNormalCont {
   white-space: normal;
 }
@@ -36,6 +40,7 @@
   top: 0;
   border-top-left-radius: 3px;
 }
+
 .arrowUp,
 .arrowDown {
   width: 11px;
@@ -44,10 +49,15 @@
   border-left: solid 6px var(--zdt_tooltip_default_bg);
   border-right: solid 6px transparent;
   border-bottom: solid 6px transparent;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  z-index: -1;
 }
+
 .arrowDown {
-  margin-top: -4px !important; /* put important because of '.wms-mainui *' have margin: 0; */
+  margin-top: -4px !important;
+  /* put important because of '.wms-mainui *' have margin: 0; */
 }
+
 .arrowLeft,
 .arrowRight {
   width: 11px;
@@ -56,22 +66,30 @@
   border-left: solid 6px var(--zdt_tooltip_default_bg);
   border-right: solid 6px transparent;
   border-bottom: solid 6px transparent;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  z-index: -1;
 }
+
 .arrowRight {
   margin-left: -2px;
 }
+
 .arrowLeft {
   margin-left: 1px;
 }
+
 .arrowUp {
   transform: rotate(45deg);
 }
+
 .arrowDown {
   transform: rotate(225deg);
 }
+
 .arrowLeft {
   transform: rotate(315deg) translateY(-50%);
 }
+
 .arrowRight {
   transform: rotate(135deg) translateY(50%);
 }
@@ -79,31 +97,38 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
 }
+
 @-webkit-keyframes tooltip-grow {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
 }
+
 @-moz-keyframes tooltip-grow {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
 }
+
 @-ms-keyframes tooltip-grow {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
-}
+}

package/lib/common/a11y.module.css

@@ -1,4 +1,4 @@
-:root {  
-    --lib_a11y_focusScope_focus_border:var(--zdt_a11y_focusScope_focus_border);
-    --lib_a11y_focusScope_focus_bg:var(--zdt_listitem_highlight_bg);
+:root {
+    --lib_a11y_focusScope_focus_border: var(--zdt_a11y_focusScope_focus_border);
+    --lib_a11y_focusScope_focus_bg: var(--zdt_listitem_highlight_bg);
 }

package/lib/common/boxShadow.module.css

@@ -0,0 +1,34 @@
+:root {
+    /* avatar */
+    --zd_bs_avatar_black: var(--zd_bs_contrast_outline, inset 0px 0px 5px var(--avatar_boxshadow));
+    --zd_bs_avatar_white: var(--zd_bs_contrast_outline, inset 0px 0px 11px var(--avatar_boxshadow));
+
+    /* button */
+    --zd_bs_button_primary: var(--zd_bs_contrast_outline, 0 3px 10px var(--zdt_button_primary_box_shadow));
+    --zd_bs_button_danger: var(--zd_bs_contrast_outline, 0 3px 10px var(--zdt_button_danger_box_shadow));
+
+    /* button group */
+    --zd_bs_buttongroup_footer: var(--zd_bs_contrast_outline, 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow));
+
+    /* dropbox */
+    --zd_bs_dropbox_default: var(--zd_bs_contrast_outline, 4px 3px 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_top: var(--zd_bs_contrast_outline, 0 -3px 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_left: var(--zd_bs_contrast_outline, -4px 0 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_right: var(--zd_bs_contrast_outline, 4px 0 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_bottom: var(--zd_bs_contrast_outline, 0 3px 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_arrow: var(--zd_bs_contrast_outline, 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color));
+
+    /* ribbon */
+    --zd_bs_ribbon_default: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_default_shadow));
+    --zd_bs_ribbon_danger: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_danger_shadow));
+    --zd_bs_ribbon_primary: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_primary_shadow));
+    --zd_bs_ribbon_secondary: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_secondary_shadow));
+    --zd_bs_ribbon_info: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_info_shadow));
+    --zd_bs_ribbon_dark: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_dark_shadow));
+
+    /* switch */
+    --zd_bs_switch_default: var(--zd_bs_contrast_outline, 0 1px 4px 0 var(--zdt_switch_circle_shadow));
+
+    /* tabs */
+    --zd_bs_tabs_shadow: var(--zd_bs_contrast_outline, 0 -2px 9px var(--zdt_tabs_alpha_box_shadow));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-265",
+  "version": "1.0.0-alpha-267",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -22,7 +22,7 @@
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
-    "dubCheck": "node dubFinder  node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
+    "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
     "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
     "build:variables": "node ./preprocess/index",
     "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
@@ -43,17 +43,22 @@
     "sstest": "npm run init && react-cli sstest",
     "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
     "download": "rm package-lock.json && rm -rf node_modules/ && npm install",
-    "expublish": "npm publish --tag experimental-version"
+    "expublish": "npm publish --tag experimental-version",
+    "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
+    "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
+    "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
   },
   "devDependencies": {
+    "@zohodesk-private/css-variable-migrator": "1.0.1",
+    "@zohodesk-private/node-plugins": "^1.0.0",
+    "@zohodesk/a11y": "1.3.7",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/variables": "1.0.0-beta.30",
-    "@zohodesk/icons": "1.0.0-beta.119",
+    "@zohodesk/icons": "1.0.0-beta.125",
+    "@zohodesk/svg": "1.0.0-beta.56",
+    "@zohodesk/variables": "1.0.0-beta.31",
     "@zohodesk/virtualizer": "1.0.3",
-    "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.54",
-    "@zohodesk/a11y": "1.3.7"
+    "velocity-react": "1.4.3"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -62,9 +67,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.0-beta.119",
-    "@zohodesk/variables": "1.0.0-beta.30",
-    "@zohodesk/svg": "1.0.0-beta.54",
+    "@zohodesk/icons": "1.0.0-beta.125",
+    "@zohodesk/variables": "1.0.0-beta.31",
+    "@zohodesk/svg": "1.0.0-beta.56",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
@@ -74,16 +79,24 @@
     "preprocess": {
       "runner": "./preprocess/index.js"
     },
+    "app": {
+      "plugins": {
+        "cssVariableReplacement": true
+      },
+      "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
+    },
     "css": {
       "plugins": {
-        "hasRTL": true
+        "hasRTL": true,
+        "cssVariableReplacement": true
       },
       "exclude": {
         "rtl": [
           "@zohodesk/icons",
           "@zohodesk/variables"
         ]
-      }
+      },
+      "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
     },
     "docs": {
       "plugins": {

package/es/Button/__tests__/Button.spec.js

@@ -1,190 +0,0 @@
-import React from 'react';
-import Button from '../Button';
-import TestUtils from 'react-dom/test-utils';
-import renderer from 'react-test-renderer';
-describe('Button component', () => {
-  it('should display text', () => {
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Button, {
-      text: "primary",
-      palette: "primary"
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'buttonComp').textContent.contains('primary')).toBe(true);
-  });
-  it('should be able to click', () => {
-    let mockfn = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Button, {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn
-    }));
-    let buttonEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'buttonComp');
-    TestUtils.Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-  it('should not able to click', () => {
-    let mockfn = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Button, {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn,
-      disabled: true
-    }));
-    let buttonEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'buttonComp_disabled');
-    TestUtils.Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(0);
-  });
-  it('should not able to click on loading status', () => {
-    let mockfn = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Button, {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn,
-      status: "loading"
-    }));
-    let buttonEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'buttonComp');
-    TestUtils.Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(0);
-  });
-  it('should able to click other than loading status', () => {
-    let mockfn = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Button, {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn,
-      status: "success"
-    }));
-    let buttonEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'buttonComp');
-    TestUtils.Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-  it('should able to click and click arguments should be event object', () => {
-    let mockfn = jest.fn();
-    let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Button, {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn,
-      status: "success"
-    }));
-    let buttonEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'buttonComp');
-    TestUtils.Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-    expect(mockfn.mock.calls[0].length).toBe(1);
-  });
-  it('should the palette is plainPrimary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "primary",
-      palette: "plainPrimary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is plainSecondary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "plainSecondary",
-      palette: "plainSecondary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is primaryFilled', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "primaryFilled",
-      palette: "primaryFilled"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is danger', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "danger",
-      palette: "danger"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is dangerFilled', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "dangerFilled",
-      palette: "dangerFilled"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is secondary', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "secondary",
-      palette: "secondary"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is secondaryFilled', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "secondaryFilled",
-      palette: "secondaryFilled"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should is not bold', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "secondaryFilled",
-      isBold: false
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should is rounded', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "secondaryFilled",
-      rounded: true
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is small', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "small",
-      rounded: true,
-      size: "small"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is large', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "large",
-      rounded: true,
-      size: "large"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is xlarge', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "xlarge",
-      rounded: true,
-      size: "xlarge"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the status is loading', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "secondaryFilled",
-      rounded: true,
-      status: "loading"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the status is success', () => {
-    let ele = renderer.create( /*#__PURE__*/React.createElement(Button, {
-      text: "secondaryFilled",
-      rounded: true,
-      status: "success"
-    }));
-    let tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});