@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/v1/Switch/Switch.js

@@ -0,0 +1,139 @@
+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'; // 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 => {
+  const {
+    name,
+    value,
+    id,
+    size,
+    isDisabled,
+    isReadOnly,
+    hasStateIndication,
+    label,
+    labelPlacement,
+    labelSize,
+    title,
+    customProps,
+    tagAttributes,
+    a11yAttributes,
+    i18nKeys,
+    customId,
+    testId,
+    customStyle
+  } = props;
+  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 {
+    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, _extends({}, 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, _extends({}, 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", _extends({}, tagAttributes_switch, restA11yAttributes_switch, {
+    type: "checkbox",
+    id: id,
+    name: name,
+    value: value,
+    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;

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Switch from "../Switch";
+describe('Switch - Snapshot', () => {
+  test('Render with default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isChecked=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      isChecked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      isChecked: true,
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      customId: "switch-customId",
+      testId: "switch-testId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      tagAttributes: {
+        'data-custom-attr': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      a11yAttributes: {
+        role: 'switch'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Switch, {
+      customClass: "my-switch"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,306 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch - Snapshot Render with a11y attributes 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>
+`;
+
+exports[`Switch - Snapshot Render with customClass 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>
+`;
+
+exports[`Switch - Snapshot Render with customId and testId 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="switch-customId"
+    data-selector-id="switch-customId"
+    data-test-id="switch-testId"
+  >
+    <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>
+`;
+
+exports[`Switch - Snapshot Render with default 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>
+`;
+
+exports[`Switch - Snapshot Render with isChecked=true 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"
+        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 - Snapshot Render with isDisabled=true 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"
+        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 - Snapshot Render with tag attributes 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'
+};

package/es/v1/Switch/css/Switch_v1.module.css

@@ -0,0 +1,140 @@
+.container {
+    --local-switch-cursor: pointer;
+    --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel);
+    gap: var(--zd_size6) ;
+}
+.small {
+    --local-switch-track-width: 22px;
+    --local-switch-track-height: 12px;
+    --local-switch-track-border-radius: 8px;
+    --local-switch-thumb-size: 10px;
+    --local-switch-onLabel-height: 6px;
+    --local-switch-onLabel-left: 5px;
+    --local-switch-offLabel-size: 7px;
+    --local-switch-offLabel-right: 2px;
+    --local-switch-onLabel-scaleX: 1.2;
+}
+.medium {
+    --local-switch-track-width: 28px;
+    --local-switch-track-height: 16px;
+    --local-switch-track-border-radius: 16px;
+    --local-switch-thumb-size: 14px;
+    --local-switch-onLabel-height: 8px;
+    --local-switch-onLabel-left: 6px;
+    --local-switch-offLabel-size: 8px;
+    --local-switch-offLabel-right: 3px;
+    --local-switch-onLabel-scaleX: 1.4;
+}
+.large {
+    --local-switch-track-width: 34px;
+    --local-switch-track-height: 20px;
+    --local-switch-track-border-radius: 10px;
+    --local-switch-thumb-size: 18px;
+    --local-switch-onLabel-height: 10px;
+    --local-switch-onLabel-left: 7px;
+    --local-switch-offLabel-size: 9px;
+    --local-switch-offLabel-right: 4px;
+    --local-switch-onLabel-scaleX: 1.6;
+}
+.xlarge {
+    --local-switch-track-width: 40px;
+    --local-switch-track-height: 24px;
+    --local-switch-track-border-radius: 12px;
+    --local-switch-thumb-size: 22px;
+    --local-switch-onLabel-height: 12px;
+    --local-switch-onLabel-left: 8px;
+    --local-switch-offLabel-size: 10px;
+    --local-switch-offLabel-right: 5px;
+    --local-switch-onLabel-scaleX: 1.8;
+}
+.disabled, .readonly {
+    --local-switch-cursor: not-allowed;
+}
+.checked.enabled > .trackWrapper:hover {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_on_hover_bg);
+}
+.unChecked.enabled > .trackWrapper:hover {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_off_hover_bg);
+}
+.enabled > .trackWrapper:hover {
+    --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel_hover);
+}
+.trackWrapper {
+    position: relative;
+}
+.disabled > .trackWrapper {
+    opacity: 0.4;
+}
+.track {
+    appearance: none;
+    display: block;
+    position: relative;
+    height: var(--local-switch-track-height);
+    width: var(--local-switch-track-width);
+    margin: 0 ;
+    border-radius: var(--local-switch-track-border-radius);
+    background-color: var(--local-switch-track-background-color);
+    cursor: var(--local-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_v1_switch_thumb_bg);   
+    height: var(--local-switch-thumb-size);
+    width: var(--local-switch-thumb-size);
+    transform: translateX(var(--local-switch-thumb-translateX)) translateY(-50%);
+}
+[dir=ltr] .thumb {
+    left: var(--zd_size1) ;
+}
+[dir=rtl] .thumb {
+    right: var(--zd_size1) ;
+}
+.label {
+    max-width: 100% ;
+    cursor: var(--local-switch-cursor);
+}
+.onLabel {
+    height: var(--local-switch-onLabel-height);
+    fill: var(--zdt_v1_switch_onLabel);
+    width: var(--zd_size1) ;
+    transform: translateY(-50%) scaleX(var(--local-switch-onLabel-scaleX));
+}
+[dir=ltr] .onLabel {
+    left: var(--local-switch-onLabel-left);
+}
+[dir=rtl] .onLabel {
+    right: var(--local-switch-onLabel-left);
+}
+.offLabel {
+    height: var(--local-switch-offLabel-size);
+    width: var(--local-switch-offLabel-size);
+    fill: transparent;
+    stroke: var(--local-switch-offLabel-stroke);
+    transform: translateY(-50%);
+}
+[dir=ltr] .offLabel {
+    right: var(--local-switch-offLabel-right);
+}
+[dir=rtl] .offLabel {
+    left: var(--local-switch-offLabel-right);
+}
+.checked {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_on_bg);
+}
+[dir=ltr] .checked {
+    --local-switch-thumb-translateX: calc(var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px) 
+    /*rtl: calc(-1 * (var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px))*/;
+}
+[dir=rtl] .checked {
+    --local-switch-thumb-translateX: calc(-1 * (var(--local-switch-track-width) - var(--local-switch-thumb-size) - 2px));
+}
+.unChecked {
+    --local-switch-track-background-color: var(--zdt_v1_switch_track_off_bg);
+    --local-switch-thumb-translateX: 0;
+}