@zohodesk/components 1.3.5 → 1.4.1

package/README.md

@@ -2,6 +2,16 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.1
+
+- **Switch(v1)** - labelPlacement top | bottom alignment and hover style issue fixed.
+
+# 1.4.0
+
+- **Switch(v1)** - Existing v1 Switch moved to depreacated folder and all New component Switch created with required accessibility and customization.
+- Theme entry for component_v1 added.
+- **LibraryContext** - `shouldIndicateSwitchState` key added for Switch component.
+
 # 1.3.5
 
 - **AppContainer** - Memory leak issue resolved.

package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='dark'] {
+	/* switch */
+	--zdt_v1_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_bg: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_hover_bg: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_thumb_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_onLabel: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_offLabel: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/assets/Appearance/light/mode/Component_v1_LightMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='light'] {
+	/* switch */
+	--zdt_v1_switch_track_on_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_bg: hsla(213, 27.27%, calc(87.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_on_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_hover_bg: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_thumb_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_onLabel: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_offLabel: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_offLabel_hover: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='pureDark'] {
+	/* switch */
+	--zdt_v1_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_bg: hsla(0, 0.00%, calc(20.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_track_off_hover_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_thumb_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_onLabel: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_switch_offLabel: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/es/Provider/LibraryContext.js

@@ -9,13 +9,15 @@ const LibraryContextProvider = _ref => {
     direction,
     coloredTagVariant,
     hasTagColorInheritedToText,
+    shouldIndicateSwitchState,
     children
   } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
     direction,
     coloredTagVariant,
-    hasTagColorInheritedToText
+    hasTagColorInheritedToText,
+    shouldIndicateSwitchState
   });
 
   function setGlobalContext(key, data) {
@@ -38,12 +40,14 @@ LibraryContextProvider.propTypes = {
   isReducedMotion: PropTypes.bool,
   coloredTagVariant: PropTypes.oneOf(['bold', 'subtle', 'minimal']),
   hasTagColorInheritedToText: PropTypes.bool,
-  direction: PropTypes.string
+  direction: PropTypes.string,
+  shouldIndicateSwitchState: PropTypes.bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: getLibraryConfig('isReducedMotion'),
   direction: getLibraryConfig('direction'),
   coloredTagVariant: 'bold',
-  hasTagColorInheritedToText: true
+  hasTagColorInheritedToText: true,
+  shouldIndicateSwitchState: false
 };
 export default LibraryContextProvider;

package/es/deprecated/Switch/Switch.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { Container, Box } from "../../v1/Layout";
+import Label from "../../v1/Label/Label";
+import style from "../../Switch/Switch.module.css";
+
+const Switch = props => {
+  let {
+    id,
+    name,
+    value,
+    checked,
+    disabled,
+    isReadOnly,
+    size,
+    text,
+    labelSize,
+    labelPalette,
+    title,
+    disableTitle,
+    dataId,
+    dataSelectorId,
+    customClass,
+    customProps
+  } = props;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(!checked, e);
+  }
+
+  let {
+    SwitchProps = {},
+    LabelProps = {}
+  } = customProps;
+  let {
+    customSwitchWrap = '',
+    customSwitch = '',
+    customSwitchSize = '',
+    customLabel = ''
+  } = customClass;
+  size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    isCover: false,
+    alignBox: "row",
+    isInline: true,
+    className: `${style.container} ${customSwitchWrap} ${disabled ? style.disabled : isReadOnly ? style.readonly : style.effect}`,
+    "data-title": disabled ? disableTitle : title,
+    "aria-checked": checked,
+    role: "switch",
+    dataSelectorId: dataSelectorId,
+    ...SwitchProps
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: `${style[size]} ${customSwitchSize}`
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: id,
+    className: `${style.input} ${checked ? style.checked : ''}`,
+    name: name,
+    value: value,
+    checked: checked,
+    disabled: disabled,
+    readOnly: isReadOnly,
+    onClick: !disabled || !isReadOnly ? onChange : null
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+    tabIndex: isReadOnly || disabled ? '-1' : '0'
+  })), text && /*#__PURE__*/React.createElement(Label, {
+    text: text,
+    palette: labelPalette,
+    id: id,
+    size: labelSize,
+    type: "subtitle",
+    onClick: !disabled || !isReadOnly ? onChange : null,
+    customClass: customLabel,
+    ...LabelProps
+  }));
+};
+
+Switch.defaultProps = defaultProps;
+Switch.propTypes = propTypes;
+export default Switch; // if (__DOCS__) {
+//   Switch.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/deprecated/Switch/props/defaultProps.js

@@ -0,0 +1,11 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  labelPalette: 'primary',
+  labelSize: 'medium',
+  size: 'medium',
+  isReadOnly: false,
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'switch'
+};

package/es/deprecated/Switch/props/propTypes.js

@@ -0,0 +1,28 @@
+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,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  value: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customSwitchWrap: PropTypes.string,
+    customSwitch: PropTypes.string,
+    customSwitchSize: PropTypes.string,
+    customLabel: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    SwitchProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  })
+};

package/es/v1/Switch/Switch.js

@@ -1,94 +1,138 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Label from "../Label/Label";
-import style from "../../Switch/Switch.module.css";
+import React 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 { ALIGN_ITEMS, ITEMS_DIRECTION, OFF_LABEL_RADIUS, THUMB_RADIUS } from "./contants"; // components
+
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Label from "../../Label/Label"; // css
+
+import defaultStyle from "./css/Switch_v1.module.css";
 
 const Switch = props => {
-  let {
-    id,
+  const {
     name,
     value,
-    checked,
-    disabled,
-    isReadOnly,
+    id,
     size,
-    text,
+    isDisabled,
+    isReadOnly,
+    hasStateIndication,
+    label,
+    labelPlacement,
     labelSize,
-    labelPalette,
     title,
-    disableTitle,
-    dataId,
-    dataSelectorId,
-    customClass,
-    customProps
+    customProps,
+    tagAttributes,
+    a11yAttributes,
+    i18nKeys,
+    customId,
+    testId,
+    customStyle
   } = props;
-
-  function onChange(e) {
-    const {
-      onChange
-    } = props;
-    onChange && onChange(!checked, e);
-  }
-
-  let {
-    SwitchProps = {},
-    LabelProps = {}
+  const {
+    container: customProps_container,
+    label: customProps_label
   } = customProps;
-  let {
-    customSwitchWrap = '',
-    customSwitch = '',
-    customSwitchSize = '',
-    customLabel = ''
-  } = customClass;
-  size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-  return /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    isCover: false,
-    alignBox: "row",
-    isInline: true,
-    className: `${style.container} ${customSwitchWrap} ${disabled ? style.disabled : isReadOnly ? style.readonly : style.effect}`,
-    "data-title": disabled ? disableTitle : title,
-    "aria-checked": checked,
-    role: "switch",
-    dataSelectorId: dataSelectorId,
-    ...SwitchProps
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: `${style[size]} ${customSwitchSize}`
-  }, /*#__PURE__*/React.createElement("input", {
+  const {
+    container: tagAttributes_container,
+    switch: tagAttributes_switch
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    switch: a11yAttributes_switch = {},
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    ariaDisabled = isDisabled,
+    ariaLabel,
+    ...restA11yAttributes_switch
+  } = a11yAttributes_switch;
+  const {
+    readOnlyAriaLabel: i18n_readOnlyAriaLabel = 'Read Only'
+  } = i18nKeys;
+  const readOnlyAriaLabel = label ? `${label}, ${i18n_readOnlyAriaLabel}` : i18n_readOnlyAriaLabel;
+  const {
+    isChecked,
+    handleChange
+  } = useSwitch(props);
+  const style = mergeStyle(defaultStyle, customStyle);
+  const {
+    containerClass,
+    labelClass,
+    trackClass,
+    trackWrapperClass,
+    thumbClass,
+    labelIndicationClass
+  } = cssJSLogic({
+    props: { ...props,
+      isChecked
+    },
+    style
+  });
+  return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
+    $ui_displayMode: "inline",
+    $ui_direction: ITEMS_DIRECTION[labelPlacement],
+    $ui_alignItems: ALIGN_ITEMS[labelPlacement],
+    $tagAttributes_container: { ...tagAttributes_container,
+      'data-selector-id': customId
+    },
+    testId: testId,
+    customId: customId,
+    $ui_className: containerClass,
+    $a11yAttributes_container: a11yAttributes_container
+  }, label && /*#__PURE__*/React.createElement(Label, { ...customProps_label,
+    text: label,
+    palette: isDisabled ? 'primary' : 'default',
+    size: labelSize,
+    htmlFor: id,
+    customClass: labelClass,
+    a11y: a11yAttributes_label,
+    clipped: true,
+    title: label
+  }), /*#__PURE__*/React.createElement(Flex, {
+    $flag_shrink: false,
+    $ui_className: trackWrapperClass
+  }, /*#__PURE__*/React.createElement("input", { ...tagAttributes_switch,
+    ...restA11yAttributes_switch,
     type: "checkbox",
     id: id,
-    className: `${style.input} ${checked ? style.checked : ''}`,
     name: name,
     value: value,
-    checked: checked,
-    disabled: disabled,
-    readOnly: isReadOnly,
-    onClick: !disabled || !isReadOnly ? onChange : null
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
-    tabIndex: isReadOnly || disabled ? '-1' : '0'
-  })), text && /*#__PURE__*/React.createElement(Label, {
-    text: text,
-    palette: labelPalette,
-    id: id,
-    size: labelSize,
-    type: "subtitle",
-    onClick: !disabled || !isReadOnly ? onChange : null,
-    customClass: customLabel,
-    ...LabelProps
-  }));
+    checked: isChecked,
+    onChange: handleChange,
+    className: trackClass,
+    "data-title": title,
+    role: "switch",
+    "aria-disabled": ariaDisabled,
+    "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
+  }), /*#__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 ? /*#__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;
-export default Switch; // if (__DOCS__) {
-//   Switch.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+Switch.propTypes = propTypes;

package/es/v1/Switch/__tests__/Switch.spec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Switch from "../Switch";
+describe('Switch', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Switch with Checked', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      id: "switch",
+      isChecked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Switch with Disabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      id: "switch",
+      isChecked: true,
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch rendering the Switch with Checked 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium checked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        checked=""
+        class="track"
+        id="switch"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="onLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="100%"
+          rx="50%"
+          width="100%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch rendering the Switch with Disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium checked disabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        aria-disabled="true"
+        checked=""
+        class="track"
+        id="switch"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="onLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="100%"
+          rx="50%"
+          width="100%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/v1/Switch/contants/index.js

@@ -0,0 +1,24 @@
+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%'
+};
+export const ITEMS_DIRECTION = {
+  start: 'row',
+  end: 'rowReverse',
+  top: 'column',
+  bottom: 'columnReverse'
+};
+export const ALIGN_ITEMS = {
+  start: 'center',
+  end: 'center',
+  top: 'start',
+  bottom: 'start'
+};