@zohodesk/components 1.0.0-temp-225-1 → 1.0.0-temp-228

package/README.md

@@ -32,16 +32,11 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
-# 1.3.3
-
-- **ListItem**
-  - Added `SecondaryValue` prop to supported.
-
 # 1.3.2
 
 - **Popup**
   - Added `scrollDebounceTime` prop to support debounce control for fixed popup scroll behavior.
-
+  
 # 1.3.1
 
 - **dropDownUtils** - The isObjectContainsSearchString function logic has been updated to use some instead of filter, and additional conditions have been added to prevent potential runtime issues.
@@ -49,7 +44,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.3.0
 
 - **AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar** - searchFields prop supported
-- **AdvancedMultiSelect, MultiSelectWithAvatar** - secondaryField prop supported
+-  **AdvancedMultiSelect, MultiSelectWithAvatar** - secondaryField prop supported
 - **ListContainer** - align prop supported
 - **ListItemWithAvatar** - secondaryValue, lhsAlignContent prop supported
 - **ListItemWithCheckBox, ListItemWithIcon, ListItemWithRadio** - secondaryValue, lhsAlignContent, lhsJustifyContent prop supported
@@ -67,11 +62,11 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.2.61
 
-- **Textarea** - Handled the default height and width appropriately based on the rows and cols props.
+- **Textarea** -  Handled the default height and width appropriately based on the rows and cols props.
 
 # 1.2.60
 
-- **Textarea** - Handled the default height and width appropriately based on the rows and cols props.
+- **Textarea** -  Handled the default height and width appropriately based on the rows and cols props.
 
 # 1.2.59
 
@@ -84,25 +79,23 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.2.57
 
 - **Popup**
-
   - Fixed popup scroll behavior is now supported using the `isOutsideScrollBlocked` flag. When set to `false` (default).
 
 - **DropBoxElement**
   - **Attributes Added**: The `data-box-direction` and `data-arrow-position` attributes have been added to facilitate the use of component-level CSS selectors.
   - **CSS Selectors**: Added support for `arrow`, `paddingSpace`, `shadow`, and `boxdirection` to facilitate the behavior of the dropbox using CSS selectors.
-
+  
 # 1.2.56
 
-- **CheckBox**
+- **CheckBox** 
   - `data-selector-id` passing to Container component changed to `dataSelectorId`
 
 # 1.2.55
 
-- **ListItemWithAvatar**
-
+- **ListItemWithAvatar** 
   - `AvatarTeamProps` and `AvatarProps` props has been added under the `customProps` group.
 
-- **Tag**
+- **Tag** 
   - `avatarProps` and `iconProps` prop has been added under the `customProps` group.
 
 # 1.2.54
@@ -110,6 +103,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 - **Reverted 1.2.45 MultiSelect Fix**
   - The issue with the non-scrollable API call trigger in multiselect, introduced in version `1.2.45`, has been `reverted` in this version.
 
+
 # 1.2.53
 
 - **CheckBox** - Disabled State CheckBox Color Fixed
@@ -135,7 +129,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 - **DateTime (v0&v1), CalendarView (v0&v1)**
 
   - Week starting day customization support added with `weekStartDay` props and week holiday customization support with `holidays` prop
-
+  
 - **DateWidget (v0&v1)**
 
   - Support has been added for `weekStartDay`, `holidays` props
@@ -144,7 +138,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
   - `holidays` prop added for holiday column indication
 
-# 1.2.49
+# 1.2.49 
 
 - **Popup**
   - `isOutsideScrollBlocked` prop supported - Scroll blocking behaviours supported
@@ -157,6 +151,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 - **ResizeObserver**
 
   - The ResizeObserver PolyFill code has been removed, and a separate copy with the PolyFill included is saved under the filename ResizeObserverWithPolyfill.js
+  
 
 # 1.2.47
 
@@ -253,10 +248,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **MultiSelect**
 - `dataId` support has been added for the ResponsiveDropBox Component.
-- The `dataId` will be reflected as `dataId` with the suffix "\_dropbox".
+- The `dataId` will be reflected as `dataId` with the suffix "_dropbox".
 - **DateWidget**
 - `dataId` support has been added for the datePicker icon.
-- The `dataId` will be reflected as `dataId` with the suffix "\_datePicker".
+- The `dataId` will be reflected as `dataId` with the suffix "_datePicker".
 
 # 1.2.34
 
@@ -421,7 +416,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.1.1
 
-- ComponentTheme file --zdt\_ prefix missing changes
+- ComponentTheme file --zdt_ prefix missing changes
 
 # 1.1.0
 
@@ -449,7 +444,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-275
 
-- **DateTime** - millisecond and second should work only when customDateFormat is given issue fixed. this fix related to _1.0.0-alpha-272_
+- **DateTime** - millisecond and second should work only when customDateFormat is given issue fixed. this fix related to *1.0.0-alpha-272*
 
 # 1.0.0-alpha-274
 

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

@@ -0,0 +1,11 @@
+[data-mode='dark'] {
+	/* switch */
+	--zdt_v2_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_bg: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_hover_bg: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_thumb_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_onLabel: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_offLabel: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_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_v2_LightMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='light'] {
+	/* switch */
+	--zdt_v2_switch_track_on_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_bg: hsla(213, 27.27%, calc(87.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_on_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_hover_bg: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_thumb_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_onLabel: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_offLabel: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_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_v2_PureDarkMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='pureDark'] {
+	/* switch */
+	--zdt_v2_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_bg: hsla(0, 0.00%, calc(20.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_hover_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_thumb_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_onLabel: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_offLabel: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/es/ListItem/ListItem.js

@@ -1,6 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { Container, Box } from '../Layout';
+import { Box } from '../Layout';
 import ListContainer from './ListContainer';
 import { ListItemDefaultProps } from './props/defaultProps';
 import { ListItem_Props } from './props/propTypes';
@@ -70,8 +70,7 @@ export default class ListItem extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText,
-      secondaryValue
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -114,11 +113,6 @@ export default class ListItem extends React.Component {
       eleRef: this.getRef,
       customProps: ListItemProps,
       ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.leftBox
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
@@ -127,10 +121,7 @@ export default class ListItem extends React.Component {
       shrink: true,
       adjust: true,
       className: style.children
-    }, children) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
-      "data-title": isDisabled ? null : secondaryValue,
-      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItem.module.css

@@ -250,12 +250,3 @@
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
-
-
-.leftBox {
-  composes: dflex flexcolumn from '../common/common.module.css';
-}
-
-.titleBox {
-  composes: dflex alignVertical from '../common/common.module.css';
-}

package/es/ListItem/props/propTypes.js

@@ -64,8 +64,7 @@ export const ListItem_Props = {
   }),
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
-  }),
-  secondaryValue: PropTypes.string
+  })
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,

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) {

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
+};

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

@@ -0,0 +1,29 @@
+import { useState } from "react";
+
+const useSwitch = props => {
+  const {
+    isCheckedProp,
+    isDefaultChecked,
+    onChange
+  } = props;
+  const isControlled = isCheckedProp !== undefined;
+  const [internalChecked, setInternalChecked] = useState(isDefaultChecked);
+  const isChecked = isControlled ? isCheckedProp : internalChecked;
+
+  const handleChange = e => {
+    if (!isControlled) {
+      setInternalChecked(!isChecked);
+    }
+
+    if (onChange) {
+      onChange(!isChecked, e);
+    }
+  };
+
+  return {
+    isChecked,
+    handleChange
+  };
+};
+
+export default useSwitch;