@zohodesk/components 1.0.0-temp-227 → 1.0.0-temp-228

package/es/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import TextBox from "../TextBox/TextBox";
-import { Container, Box } from "../Layout";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import TextBox from '../TextBox/TextBox';
+import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import btnStyle from "../semantic/Button/semanticButton.module.css";
-import style from "./TextBoxIcon.module.css";
+import btnStyle from '../semantic/Button/semanticButton.module.css';
+import style from './TextBoxIcon.module.css';
 /* eslint-disable react/forbid-component-props */
 
 export default class TextBoxIcon extends React.Component {
@@ -109,8 +109,7 @@ export default class TextBoxIcon extends React.Component {
       isScrollPrevent,
       customProps,
       needInputFocusOnWrapperClick,
-      renderRightPlaceholderNode,
-      renderCustomClearComponent
+      renderRightPlaceholderNode
     } = this.props;
     const {
       isActive
@@ -168,10 +167,7 @@ export default class TextBoxIcon extends React.Component {
       className: `${style.iconContainer} ${customTBoxIcon}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"
-    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? typeof renderCustomClearComponent == 'function' ? renderCustomClearComponent({
-      clearText,
-      handleClear: this.handleClear
-    }) : /*#__PURE__*/React.createElement(Box, {
+    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? /*#__PURE__*/React.createElement(Box, {
       className: `${btnStyle.buttonReset} ${style.icon}`,
       onClick: this.handleClear,
       dataId: `${dataId}_ClearIcon`,

package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TextBoxIcon from "../TextBoxIcon";
+import TextBoxIcon from '../TextBoxIcon';
 import { render } from "@testing-library/react";
 describe('TextBoxIcon component', () => {
   const type = ['text', 'password', 'number'];

package/es/TextBoxIcon/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
+import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,
@@ -50,6 +50,5 @@ export const propTypes = { ...TextBox_propTypes,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object
   }),
-  renderRightPlaceholderNode: PropTypes.node,
-  renderCustomClearComponent: PropTypes.func
+  renderRightPlaceholderNode: PropTypes.node
 };

package/es/Textarea/Textarea.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
 
-import style from "./Textarea.module.css";
+import style from './Textarea.module.css';
 export default class Textarea extends React.Component {
   constructor(props) {
     super(props);

package/es/Textarea/__tests__/Textarea.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Textarea from "../Textarea";
+import Textarea from '../Textarea';
 import { render } from "@testing-library/react";
 describe('Textarea component', () => {
   const size = ['xsmall', 'small', 'xmedium', 'medium', 'large'];

package/es/Tooltip/Tooltip.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getLibraryConfig } from "../Provider/Config";
-import ResizeObserver from "../Responsive/ResizeObserver";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getLibraryConfig } from '../Provider/Config';
+import ResizeObserver from '../Responsive/ResizeObserver';
 import selectn from 'selectn';
-import { whiteSpaceClassMapping } from "../utils/cssUtils";
-import style from "./Tooltip.module.css";
+import { whiteSpaceClassMapping } from '../utils/cssUtils';
+import style from './Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);

package/es/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from "./css/Typography.module.css";
+import defaultStyle from './css/Typography.module.css';
 
 const Typography = props => {
   const {

package/es/Typography/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping, lineheightMapping } from "../utils";
+import { letterspacingMapping, lineheightMapping } from '../utils';
 export default function cssJSLogic(_ref) {
   let {
     props,

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../Provider/LibraryContextInit";
+import LibraryContext from '../../Provider/LibraryContextInit';
 export default class VelocityAnimation extends React.Component {
   constructor(props) {
     super(props);

package/es/VelocityAnimation/VelocityAnimation/__tests__/VelocityAnimation.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import VelocityAnimation from "../VelocityAnimation";
+import VelocityAnimation from '../VelocityAnimation';
 describe('VelocityAnimation', () => {
   test('rendering the defult props', () => {
     const {

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from "../../Provider/LibraryContextInit";
+import LibraryContext from '../../Provider/LibraryContextInit';
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);
@@ -16,38 +16,6 @@ function clearProps(props) {
 export default class VelocityAnimationGroup extends React.Component {
   constructor(props) {
     super(props);
-    this.handleEnterComplete = this.handleEnterComplete.bind(this);
-    this.handleExitComplete = this.handleExitComplete.bind(this);
-  }
-
-  handleEnterComplete(elements) {
-    const {
-      onEnterComplete,
-      postEnterStyles
-    } = this.props;
-
-    if (typeof onEnterComplete === 'function') {
-      onEnterComplete(elements);
-    }
-
-    if (postEnterStyles && typeof postEnterStyles === 'object') {
-      elements.forEach(rootElement => {
-        Object.entries(postEnterStyles).forEach(_ref => {
-          let [cssProperty, cssValue] = _ref;
-          rootElement.style[cssProperty] = cssValue;
-        });
-      });
-    }
-  }
-
-  handleExitComplete(elements) {
-    const {
-      onExitComplete
-    } = this.props;
-
-    if (typeof onExitComplete === 'function') {
-      onExitComplete(elements);
-    }
   }
 
   render() {
@@ -67,10 +35,7 @@ export default class VelocityAnimationGroup extends React.Component {
       enterDelay,
       isCustomized,
       name,
-      needUIPack,
-      onEnterComplete,
-      onExitComplete,
-      postEnterStyles
+      needUIPack
     } = this.props;
     let {
       direction,
@@ -111,15 +76,13 @@ export default class VelocityAnimationGroup extends React.Component {
       animation: isCustomized ? enterAnimationObj[name] : needUIPack ? `transition.${enterName}In` : enterName,
       duration: !isReducedMotion ? enterDuration : 0,
       delay: enterDelay ? enterDelay : 0,
-      display: isFlex ? 'flex' : '',
-      complete: onEnterComplete || postEnterStyles ? this.handleEnterComplete : undefined
+      display: isFlex ? 'flex' : ''
     };
     let exitAnimation = {
       animation: isCustomized ? exitAnimationObj[name] : needUIPack ? `transition.${exitName ? exitName : enterName}Out` : exitName ? exitName : enterName,
       duration: !isReducedMotion ? exitDuration : 0,
       delay: exitDelay ? exitDelay : 0,
-      display: 'none',
-      complete: onExitComplete ? this.handleExitComplete : undefined
+      display: 'none'
     };
     return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
       enter: enterAnimation,

package/es/VelocityAnimation/VelocityAnimationGroup/__tests__/VelocityAnimationGroup.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import VelocityAnimationGroup from "../VelocityAnimationGroup";
+import VelocityAnimationGroup from '../VelocityAnimationGroup';
 describe('VelocityAnimationGroup', () => {
   test('rendering the defult props', () => {
     const {

package/es/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -15,8 +15,5 @@ export const propTypes = {
   isFlex: PropTypes.bool,
   name: PropTypes.oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
   needUIPack: PropTypes.bool,
-  runOnMount: PropTypes.bool,
-  onEnterComplete: PropTypes.func,
-  onExitComplete: PropTypes.func,
-  postEnterStyles: PropTypes.object
+  runOnMount: PropTypes.bool
 };

package/es/VelocityAnimation/index.js

@@ -1,2 +1,2 @@
-export { default as VelocityAnimation } from "./VelocityAnimation/VelocityAnimation";
-export { default as VelocityAnimationGroup } from "./VelocityAnimationGroup/VelocityAnimationGroup";
+export { default as VelocityAnimation } from './VelocityAnimation/VelocityAnimation';
+export { default as VelocityAnimationGroup } from './VelocityAnimationGroup/VelocityAnimationGroup';

package/es/components-v2/Switch/Switch.js

@@ -0,0 +1,151 @@
+import React, { useContext } from 'react'; // props
+
+import defaultProps from "./props/defaultProps";
+import { propTypes } from "./props/propTypes"; // methods
+
+import cssJSLogic from './css/cssJSLogic';
+import { mergeStyle } from '@zohodesk/utils'; // hooks
+
+import useSwitch from './useSwitch'; // constants
+
+import { OFF_LABEL_RADIUS, THUMB_RADIUS } from './contants'; // components
+
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Label from '../../Label/Label'; // context
+
+import LibraryContext from '../../Provider/LibraryContextInit'; // css
+
+import defaultStyle from './css/Switch_v2.module.css';
+
+const Switch = props => {
+  const {
+    name,
+    value,
+    id,
+    size,
+    isChecked: isCheckedProp,
+    isDefaultChecked,
+    isDisabled,
+    isReadOnly,
+    onChange,
+    hasStateIndication,
+    label,
+    labelPlacement,
+    labelSize,
+    title,
+    customProps,
+    tagAttributes,
+    a11yAttributes,
+    customId,
+    testId,
+    customStyle
+  } = props;
+  const {
+    shouldIndicateSwitchState
+  } = useContext(LibraryContext);
+  const {
+    container: customProps_container,
+    label: customProps_label
+  } = customProps;
+  const {
+    container: tagAttributes_container,
+    switch: tagAttributes_switch
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    switch: a11yAttributes_switch = {},
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    role = 'switch',
+    ariaDisabled = isDisabled,
+    restA11yAttributes_switch
+  } = a11yAttributes_switch;
+  const {
+    isChecked,
+    handleChange
+  } = useSwitch({
+    isCheckedProp,
+    isDefaultChecked,
+    onChange
+  });
+  const style = mergeStyle(defaultStyle, customStyle);
+  const {
+    containerClass,
+    labelClass,
+    trackClass,
+    trackWrapperClass,
+    thumbClass,
+    labelIndicationClass
+  } = cssJSLogic({
+    props: { ...props,
+      isChecked
+    },
+    style
+  });
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "inline",
+    $ui_direction: labelPlacement === 'left' ? 'row' : 'rowReverse',
+    $ui_alignItems: "center",
+    $tagAttributes_container: {
+      'data-selector-id': customId,
+      ...tagAttributes_container
+    },
+    testId: testId,
+    customId: customId,
+    customStyle: {
+      inlineFlex: containerClass
+    },
+    $a11yAttributes_container: a11yAttributes_container,
+    ...customProps_container
+  }, label && /*#__PURE__*/React.createElement(Label, {
+    text: label,
+    palette: isDisabled || isReadOnly ? 'primary' : 'default',
+    size: labelSize,
+    htmlFor: id,
+    customClass: labelClass,
+    a11y: a11yAttributes_label,
+    ...customProps_label
+  }), /*#__PURE__*/React.createElement(Flex, {
+    $flag_shrink: false,
+    customStyle: {
+      noShrink: trackWrapperClass
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: id,
+    name: name,
+    value: value,
+    checked: isChecked,
+    readOnly: isReadOnly,
+    onChange: !isDisabled && !isReadOnly ? handleChange : null,
+    className: trackClass,
+    "data-title": title,
+    role: role,
+    "aria-disabled": ariaDisabled,
+    ...tagAttributes_switch,
+    ...restA11yAttributes_switch
+  }), /*#__PURE__*/React.createElement("svg", {
+    className: thumbClass,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "50%",
+    cy: "50%",
+    r: THUMB_RADIUS[size]
+  })), hasStateIndication || shouldIndicateSwitchState ? /*#__PURE__*/React.createElement("svg", {
+    className: labelIndicationClass,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, isChecked ? /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    rx: "50%"
+  }) : /*#__PURE__*/React.createElement("circle", {
+    cx: "50%",
+    cy: "50%",
+    r: OFF_LABEL_RADIUS[size]
+  })) : null));
+};
+
+export default Switch;
+Switch.defaultProps = defaultProps;
+Switch.propTypes = propTypes;

package/es/components-v2/Switch/contants/index.js

@@ -0,0 +1,12 @@
+export const OFF_LABEL_RADIUS = {
+  small: '35.7%',
+  medium: '37.5%',
+  large: '38.9%',
+  xlarge: '40%'
+};
+export const THUMB_RADIUS = {
+  small: '40%',
+  medium: '42.85%',
+  large: '44.45%',
+  xlarge: '45.45%'
+};

package/es/components-v2/Switch/css/Switch_v2.module.css

@@ -0,0 +1,140 @@
+.container {
+    --switch-cursor: pointer;
+    --switch-offLabel-stroke: var(--zdt_v2_switch_offLabel);
+    gap: var(--zd_size6) ;
+}
+.small {
+    --switch-track-width: var(--zd_size22);
+    --switch-track-height: var(--zd_size12);
+    --switch-track-border-radius: 8px;
+    --switch-thumb-size: 10px;
+    --switch-onLabel-height: var(--zd_size6);
+    --switch-onLabel-left: var(--zd_size5);
+    --switch-offLabel-size: var(--zd_size7);
+    --switch-offLabel-right: var(--zd_size2);
+}
+.medium {
+    --switch-track-width: var(--zd_size28);
+    --switch-track-height: var(--zd_size16);
+    --switch-track-border-radius: 16px;
+    --switch-thumb-size: 14px;
+    --switch-onLabel-height: var(--zd_size8);
+    --switch-onLabel-left: var(--zd_size6);
+    --switch-offLabel-size: var(--zd_size8);
+    --switch-offLabel-right: var(--zd_size3);
+}
+.large {
+    --switch-track-width: var(--zd_size34);
+    --switch-track-height: var(--zd_size20);
+    --switch-track-border-radius: 10px;
+    --switch-thumb-size: 18px;
+    --switch-onLabel-height: var(--zd_size10);
+    --switch-onLabel-left: var(--zd_size7);
+    --switch-offLabel-size: var(--zd_size9);
+    --switch-offLabel-right: var(--zd_size4);
+}
+.xlarge {
+    --switch-track-width: var(--zd_size40);
+    --switch-track-height: var(--zd_size24);
+    --switch-track-border-radius: 12px;
+    --switch-thumb-size: 22px;
+    --switch-onLabel-height: var(--zd_size12);
+    --switch-onLabel-left: var(--zd_size8);
+    --switch-offLabel-size: var(--zd_size10);
+    --switch-offLabel-right: var(--zd_size5);
+}
+.checked {
+    --switch-track-background-color: var(--zdt_v2_switch_track_on_bg);
+    --switch-thumb-translateX-value: calc(var(--switch-track-width) - var(--switch-thumb-size) - 2px)
+}
+.unChecked {
+    --switch-track-background-color: var(--zdt_v2_switch_track_off_bg);
+    --switch-thumb-translateX-value: 0;
+}
+.disabled, .readonly {
+    --switch-cursor: not-allowed;
+}
+.checked.enabled:hover {
+    --switch-track-background-color: var(--zdt_v2_switch_track_on_hover_bg);
+}
+.unChecked.enabled:hover {
+    --switch-track-background-color: var(--zdt_v2_switch_track_off_hover_bg);
+}
+.enabled:hover {
+    --switch-offLabel-stroke: var(--zdt_v2_switch_offLabel_hover);
+}
+.trackWrapper {
+    position: relative;
+}
+.disabled .trackWrapper {
+    opacity: 0.4;
+}
+.track {
+    appearance: none;
+    display: block;
+    position: relative;
+    height: var(--switch-track-height);
+    width: var(--switch-track-width);
+    margin: 0 ;
+    border-radius: var(--switch-track-border-radius);
+    background-color: var(--switch-track-background-color);
+    cursor: var(--switch-cursor);
+}
+.commonSvg {
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    top: 50% ;
+}
+.thumb {
+    transition: transform var(--zd_transition2) cubic-bezier(0.4, 0, 0.2, 1);
+    fill: var(--zdt_v2_switch_thumb_bg);   
+    height: var(--switch-thumb-size);
+    width: var(--switch-thumb-size);
+    transform: translateX(var(--switch-thumb-translateX-value)) translateY(-50%);
+}
+[dir=ltr] .thumb {
+    left: var(--zd_size1) ;
+}
+[dir=rtl] .thumb {
+    right: var(--zd_size1) ;
+}
+.label {
+    cursor: var(--switch-cursor);
+}
+.onLabel {
+    height: var(--switch-onLabel-height);
+    fill: var(--zdt_v2_switch_onLabel);
+    transform: translateY(-50%);
+}
+[dir=ltr] .onLabel {
+    left: var(--switch-onLabel-left);
+}
+[dir=rtl] .onLabel {
+    right: var(--switch-onLabel-left);
+}
+.offLabel {
+    height: var(--switch-offLabel-size);
+    width: var(--switch-offLabel-size);
+    fill: transparent;
+    stroke: var(--switch-offLabel-stroke);
+    transform: translateY(-50%);
+}
+[dir=ltr] .offLabel {
+    right: var(--switch-offLabel-right);
+}
+[dir=rtl] .offLabel {
+    left: var(--switch-offLabel-right);
+}
+.small .onLabel {
+    width: 1.2px;
+}
+.medium .onLabel {
+    width: 1.4px;
+}
+.large .onLabel {
+    width: 1.6px;
+}
+.xlarge .onLabel {
+    width: 1.8px;
+}

package/es/components-v2/Switch/css/cssJSLogic.js

@@ -0,0 +1,48 @@
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  const {
+    size,
+    isChecked,
+    isDisabled,
+    isReadOnly
+  } = props;
+  let containerClass = compileClassNames({
+    [style.container]: true,
+    [style[size]]: true,
+    [style.checked]: isChecked,
+    [style.unChecked]: !isChecked,
+    [style.disabled]: isDisabled,
+    [style.enabled]: !isDisabled,
+    [style.readonly]: isReadOnly
+  });
+  let trackClass = compileClassNames({
+    [style.track]: true
+  });
+  let labelClass = compileClassNames({
+    [style.label]: true
+  });
+  let trackWrapperClass = compileClassNames({
+    [style.trackWrapper]: true
+  });
+  let thumbClass = compileClassNames({
+    [style.thumb]: true,
+    [style.commonSvg]: true
+  });
+  let labelIndicationClass = compileClassNames({
+    [style.onLabel]: isChecked,
+    [style.offLabel]: !isChecked,
+    [style.commonSvg]: true
+  });
+  return {
+    containerClass,
+    trackClass,
+    labelClass,
+    trackWrapperClass,
+    thumbClass,
+    labelIndicationClass
+  };
+}

package/es/components-v2/Switch/props/defaultProps.js

@@ -0,0 +1,12 @@
+export default {
+  size: 'medium',
+  isDisabled: false,
+  isReadOnly: false,
+  // hasStateIndication: true,
+  labelPlacement: 'left',
+  labelSize: 'medium',
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customStyle: {}
+};

package/es/components-v2/Switch/props/propTypes.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+export default {
+  name: PropTypes.string,
+  value: PropTypes.string,
+  id: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+  isChecked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onChange: PropTypes.func,
+  hasStateIndication: PropTypes.bool,
+  label: PropTypes.string,
+  labelPlacement: PropTypes.oneOf(['left', 'right']),
+  labelSize: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
+  title: PropTypes.string,
+  customProps: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    switch: PropTypes.object
+  }),
+  a11yAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    switch: PropTypes.object,
+    label: PropTypes.object
+  }),
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  customStyle: PropTypes.object
+};