@zohodesk/components 1.0.0-test-252 → 1.0.0

package/es/Switch/Switch.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -10,6 +11,7 @@ export default class Switch extends React.Component {
     super(props);
     this.onChange = this.onChange.bind(this);
   }
+
   onChange(e) {
     let {
       onChange,
@@ -17,6 +19,7 @@ export default class Switch extends React.Component {
     } = this.props;
     onChange && onChange(!checked, e);
   }
+
   render() {
     let {
       id,
@@ -32,6 +35,7 @@ export default class Switch extends React.Component {
       title,
       disableTitle,
       dataId,
+      dataSelectorId,
       customClass,
       customProps
     } = this.props;
@@ -55,7 +59,8 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      tabIndex: isReadOnly || disabled ? '-1' : '0'
+      tabIndex: isReadOnly || disabled ? '-1' : '0',
+      dataSelectorId: dataSelectorId
     }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -71,6 +76,7 @@ export default class Switch extends React.Component {
     }), /*#__PURE__*/React.createElement("label", {
       htmlFor: id,
       "data-id": dataId,
+      "data-test-id": dataId,
       className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`
     })), text && /*#__PURE__*/React.createElement(Label, _extends({
       text: text,
@@ -82,12 +88,12 @@ export default class Switch extends React.Component {
       customClass: customLabel
     }, LabelProps)));
   }
+
 }
 Switch.defaultProps = defaultProps;
-Switch.propTypes = propTypes;
-if (false) {
-  Switch.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+Switch.propTypes = propTypes; // if (__DOCS__) {
+//   Switch.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/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,86 +30,99 @@
   border-radius: 20px;
   cursor: pointer;
 }
+
 .effect:hover .label
+
 /* .effect:focus .label */
- {
+  {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
 .label:after {
   content: '';
   display: block;
   position: absolute;
-  right: 50%;
+  right: 50% ;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
   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 {
-  right: calc(var(--zd_size1) * -1);
+
+.checked+.label:after {
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 .input {
   display: none;
 }
+
 .small {
-  height: var(--zd_size14);
-  width: var(--zd_size28);
+  height: var(--zd_size14) ;
+  width: var(--zd_size28) ;
 }
 .switch_smallLabel {
-  height: var(--zd_size9);
-  width: var(--zd_size22);
-  top: calc(var(--zd_size2) * -1);
-  left: var(--zd_size2);
+  height: var(--zd_size9) ;
+  width: var(--zd_size22) ;
+  top: calc( var(--zd_size2) * -1 ) ;
+  left: var(--zd_size2) ;
 }
 .switch_smallLabel:after {
-  width: var(--zd_size12);
-  height: var(--zd_size12);
-  top: calc(var(--zd_size2) * -1);
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: calc( var(--zd_size2) * -1 ) ;
 }
+
 .medium {
-  height: var(--zd_size18);
-  width: var(--zd_size34);
+  height: var(--zd_size18) ;
+  width: var(--zd_size34) ;
 }
 .switch_mediumLabel {
-  height: var(--zd_size13);
-  width: var(--zd_size31);
-  top: var(--zd_size2);
-  left: var(--zd_size2);
+  height: var(--zd_size13) ;
+  width: var(--zd_size31) ;
+  top: var(--zd_size2) ;
+  left: var(--zd_size2) ;
 }
 .switch_mediumLabel:after {
-  width: var(--zd_size18);
-  height: var(--zd_size18);
-  top: calc(var(--zd_size3) * -1);
+  width: var(--zd_size18) ;
+  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);
+  top: calc( var(--zd_size1) * -1 ) ;
 }
-[dir=ltr] .switch + label {
-  margin-left: var(--zd_size12);
+
+[dir=ltr] .switch+label {
+  margin-left: var(--zd_size12) ;
 }
-[dir=rtl] .switch + label {
-  margin-right: var(--zd_size12);
+
+[dir=rtl] .switch+label {
+  margin-right: var(--zd_size12) ;
 }

package/es/Switch/props/defaultProps.js

@@ -6,5 +6,6 @@ export const defaultProps = {
   size: 'medium',
   isReadOnly: false,
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'switch'
 };

package/es/Switch/props/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   disabled: PropTypes.bool,
   id: PropTypes.string.isRequired,

package/es/Tab/Tab.js

@@ -1,7 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
+
 /* eslint-disable react/forbid-component-props */
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'zetaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta', 'tabZeta', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'zetaActive_border', 'deltaActive_border'] }] */
 
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
 import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from './props/defaultProps';
 import { Tab_propTypes } from './props/propTypes';
@@ -30,6 +31,7 @@ export default function Tab(_ref) {
     children,
     className,
     dataId,
+    dataSelectorId,
     title,
     titlePosition,
     activeClass,
@@ -54,6 +56,7 @@ export default function Tab(_ref) {
       event && event.stopPropagation();
       return;
     }
+
     event && event.preventDefault();
     onSelect(id);
     onClick && onClick(event);
@@ -80,11 +83,12 @@ export default function Tab(_ref) {
     adjust: true,
     href: isLink ? href : undefined,
     "data-key": id,
-    role: "tab",
+    role: "link",
     "aria-controls": id,
     "aria-selected": isActive ? true : false,
-    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '-1',
-    "aria-label": text ? text : null
+    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
+    "aria-label": text ? text : null,
+    dataSelectorId: dataSelectorId
   }, customProps), /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: "both",
@@ -98,10 +102,9 @@ export default function Tab(_ref) {
   }, children) : null));
 }
 Tab.defaultProps = Tab_defaultProps;
-Tab.propTypes = Tab_propTypes;
-if (false) {
-  Tab.docs = {
-    componentGroup: 'Tab',
-    folderName: 'Style Guide'
-  };
-}
+Tab.propTypes = Tab_propTypes; // if (__DOCS__) {
+//   Tab.docs = {
+//     componentGroup: 'Tab',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Tab/Tab.module.css

@@ -1,20 +1,19 @@
 .tab {
   text-transform: uppercase;
-  composes: offSelection from '../common/common.module.css';
   letter-spacing: 0.6px;
   text-decoration: none;
   cursor: pointer;
 }
 .vertical {
-  height: 100%;
+  height: 100% ;
 }
 .horizontal {
-  width: 100%;
-  max-width: 100%;
+  width: 100% ;
+  max-width: 100% ;
 }
 .textContainer,
 .tabText {
-  max-width: inherit;
+  max-width: inherit ;
 }
 .tabText {
   composes: dotted from '../common/common.module.css';
@@ -32,9 +31,9 @@
   transition: all var(--zd_transition2);
 }
 .alpha {
-  font-size: var(--zd_font_size11);
+  font-size: var(--zd_font_size11) ;
   line-height: var(--zd_size33);
-  padding: 0 var(--zd_size18);
+  padding: 0 var(--zd_size18) ;
 }
 .tabAlpha {
   composes: alpha;
@@ -55,16 +54,16 @@
   border-color: var(--zdt_tab_delta_active_border);
 }
 .beta {
-  font-size: var(--zd_font_size14);
+  font-size: var(--zd_font_size14) ;
   line-height: var(--zd_size60);
   text-transform: capitalize;
-  padding: 0 var(--zd_size4);
+  padding: 0 var(--zd_size4) ;
 }
 [dir=ltr] .beta {
-  margin-right: var(--zd_size40);
+  margin-right: var(--zd_size40) ;
 }
 [dir=rtl] .beta {
-  margin-left: var(--zd_size40);
+  margin-left: var(--zd_size40) ;
 }
 .tabBeta {
   composes: beta;
@@ -78,15 +77,15 @@
   color: var(--zdt_tab_alpha_hover_text);
 }
 .delta {
-  font-size: var(--zd_font_size11);
+  font-size: var(--zd_font_size11) ;
   line-height: var(--zd_size33);
-  padding: 0 var(--zd_size4);
+  padding: 0 var(--zd_size4) ;
 }
 [dir=ltr] .delta {
-  margin-right: var(--zd_size10);
+  margin-right: var(--zd_size10) ;
 }
 [dir=rtl] .delta {
-  margin-left: var(--zd_size10);
+  margin-left: var(--zd_size10) ;
 }
 .tabDelta {
   composes: delta;

package/es/Tab/TabContent.js

@@ -10,7 +10,8 @@ const TabContent = _ref => {
     children,
     scroll,
     dataId,
-    id
+    id,
+    dataSelectorId
   } = _ref;
   return /*#__PURE__*/React.createElement(Container, {
     className: style.container,
@@ -18,10 +19,12 @@ const TabContent = _ref => {
     dataId: `${dataId}_TabContent`,
     isScrollAttribute: true,
     "aria-labelledby": id,
-    tabindex: "0",
-    role: "tabpanel"
+    tabindex: "-1",
+    role: "tabpanel",
+    dataSelectorId: dataSelectorId
   }, children);
 };
+
 TabContent.defaultProps = TabContent_defaultProps;
 TabContent.propTypes = TabContent_propTypes;
 export default TabContent;

package/es/Tab/TabContentWrapper.js

@@ -3,6 +3,7 @@ import { TabContentWrapper_defaultProps } from './props/defaultProps';
 import { TabContentWrapper_propTypes } from './props/propTypes';
 import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
+
 const TabContentWrapper = _ref => {
   let {
     style,
@@ -10,16 +11,19 @@ const TabContentWrapper = _ref => {
     children,
     dataId,
     selectedTab,
-    onScroll
+    onScroll,
+    dataSelectorId
   } = _ref;
   return /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
-    onScroll: onScroll
+    onScroll: onScroll,
+    dataSelectorId: dataSelectorId
   }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 };
+
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
 TabContentWrapper.propTypes = TabContentWrapper_propTypes;
 export default TabContentWrapper;

package/es/Tab/TabWrapper.js

@@ -1,8 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
+
 import React, { useState, useCallback } from 'react';
 import { TabWrapper_defaultProps } from './props/defaultProps';
 import { TabWrapper_propTypes } from './props/propTypes';
 import { Container } from '../Layout';
+
 function TabWrapper(_ref) {
   let {
     defaultTab,
@@ -16,23 +18,25 @@ function TabWrapper(_ref) {
     needAppearance,
     align,
     dataId,
-    children
+    children,
+    dataSelectorId
   } = _ref;
   let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
   const setSelectedTab = useCallback(id => {
     if (!hookToDisableInternalState) {
       setSelected(id);
     }
+
     onSelect && onSelect(id);
   }, [hookToDisableInternalState, onSelect]);
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: align === 'vertical' ? 'column' : 'row',
-    dataId: dataId
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
   }, React.Children.map(children, child => {
     let TabsChild = child.type;
     let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
-    return /*#__PURE__*/React.createElement(TabsChild
-    // eslint-disable-next-line react/no-array-index-key
+    return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
     , _extends({}, child.props, {
       selectedTab: selectedTab,
       onSelect: setSelectedTab,
@@ -47,6 +51,7 @@ function TabWrapper(_ref) {
     }));
   }));
 }
+
 TabWrapper.propTypes = TabWrapper_propTypes;
 TabWrapper.defaultProps = TabWrapper_defaultProps;
 export default TabWrapper;