@zohodesk/components 1.0.0-temp-215.2 → 1.0.0-temp-212.1

package/README.md

@@ -32,54 +32,6 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
-# 1.2.54
-
-- **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
-- **Radio** - ReadOnly State Radio Cursor and color Fixed
-- **Textarea** - isFocus Prop added
-- **AdvancedGroupMultiSelect** - isFocus Prop added
-- **AdvancedMultiSelect** - isFocus Prop added
-- **MultiSelect** - isFocus Prop added
-- **DateWidget** - onDropboxClose,renderCustomHeader,renderCustomFooter Props added
-- **DateTime** - renderCustomHeader,renderCustomFooter Props added
-- **GroupSelect** - customProps supported
-
-# 1.2.52
-
-- **Typography** - component added in v0
-
-# 1.2.51
-
-- **Popup** - Fixed issue: Error on unmount when target ref is not available.
-
-# 1.2.50
-
-- **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
-
-- **DaysRow (v0&v1)**
-
-  - `holidays` prop added for holiday column indication
-
-# 1.2.49 
-
-- **Popup**
-  - `isOutsideScrollBlocked` prop supported - Scroll blocking behaviours supported
-  - Fixed popup re-positioning on window resize not working properly - Issue fixed
-- **DropBoxElement**
-  - The dot-ui-element attribute has been added to facilitate the use of component-level CSS selectors
-
 # 1.2.48
 
 - **ResizeObserver**
@@ -152,7 +104,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **LibraryContext** - coloredTagVariant, hasTagColorInheritedToText properties added
 - **Tag** - customAttributes prop supported
-- **TextBoxIcon** - needInputFocusOnWrapperClick prop supported
+- **TextBoxIcon** - needInputFocusOnParentClick prop supported
 
 # 1.2.38
 

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

@@ -71,6 +71,11 @@
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
 	
+	/* strikethrough buttons */
+	--zdt_button_danger_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_success_strike: hsla(131, 64.42%, calc(68.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_secondaryfilled_strike: var(--zdtm_cta_grey_40_border_default_inverse_low);
+	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_buttongroup_default_border: hsla(204, 10.64%, calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
 }

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

@@ -71,6 +71,11 @@
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
 	
+	/* strikethrough buttons */
+	--zdt_button_danger_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_success_strike: hsla(123, 60.37%, calc(57.45% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_secondaryfilled_strike: var(--zdtm_cta_grey_40_border_default_inverse_low);
+	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_buttongroup_default_border: hsla(204, 10.64%, calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(10,115,235);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(38,169,66);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(229,119,23);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(26, 100.00%, calc(50.00% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(222,53,53);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(232,185,35);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
 }

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

@@ -71,6 +71,11 @@
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
 	
+	/* strikethrough buttons */
+	--zdt_button_danger_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_success_strike: hsla(131, 64.42%, calc(68.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_secondaryfilled_strike: var(--zdtm_cta_grey_40_border_default_inverse_low);
+	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_buttongroup_default_border: hsla(204, 10.64%, calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
 }

package/es/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Accordion_defaultProps } from "./props/defaultProps";
-import { Accordion_propTypes } from "./props/propTypes";
+import { Accordion_defaultProps } from './props/defaultProps';
+import { Accordion_propTypes } from './props/propTypes';
 export default class Accordion extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/AccordionItem.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from "./props/defaultProps";
-import { AccordionItem_propTypes } from "./props/propTypes";
-import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
-import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
+import { AccordionItem_defaultProps } from './props/defaultProps';
+import { AccordionItem_propTypes } from './props/propTypes';
+import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
+import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 export default class AccordionItem extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/__tests__/Accordion.spec.js

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

package/es/Accordion/__tests__/AccordionItem.spec.js

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

package/es/Accordion/index.js

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

package/es/Animation/Animation.js

@@ -1,8 +1,8 @@
 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 { CSSTransition } from 'react-transition-group';
-import { animationStyle } from "./utils";
+import { animationStyle } from './utils';
 export default class Animation extends React.Component {
   constructor(props) {
     super(props);

package/es/Animation/__tests__/Animation.spec.js

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

package/es/Animation/utils.js

@@ -1,4 +1,4 @@
-import style from "../common/transition.module.css";
+import style from '../common/transition.module.css';
 export const animationStyle = {
   zoomIn: {
     enter: style.zoomInEnter,

package/es/AppContainer/AppContainer.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Tooltip from "../Tooltip/Tooltip";
-import "../common/basic.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Tooltip from '../Tooltip/Tooltip';
+import '../common/basic.module.css';
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
@@ -11,10 +11,10 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../common/a11y.module.css";
-import "../common/boxShadow.module.css";
-import style from "./AppContainer.module.css";
-import { getLibraryConfig, setLibraryConfig } from "../Provider/Config";
+import '../common/a11y.module.css';
+import '../common/boxShadow.module.css';
+import style from './AppContainer.module.css';
+import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);

package/es/AppContainer/__tests__/AppContainer.spec.js

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

package/es/Avatar/Avatar.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getInitial } from "../utils/getInitial";
-import AvatarSize from "../Provider/AvatarSize";
-import style from "./Avatar.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getInitial } from '../utils/getInitial';
+import AvatarSize from '../Provider/AvatarSize';
+import style from './Avatar.module.css';
 /*
 1. need to change name into firstName lastName
 2. pattern support via context as well as props

package/es/Avatar/__tests__/Avatar.spec.js

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

package/es/AvatarTeam/AvatarTeam.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import Avatar from "../Avatar/Avatar";
-import style from "./AvatarTeam.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import Avatar from '../Avatar/Avatar';
+import style from './AvatarTeam.module.css';
 /* once avatar support firstname lastname and pattern
 pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
 

package/es/AvatarTeam/__tests__/AvatarTeam.spec.js

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

package/es/Button/Button.js

@@ -1,9 +1,10 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+import React, { useContext } from 'react';
+import LibraryContext from '../Provider/LibraryContextInit';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import style from "./css/Button.module.css";
+import style from './css/Button.module.css';
 /*
 Button text and children props?
 use children for both cases
@@ -29,13 +30,19 @@ export default function Button(props) {
     a11y,
     id
   } = props;
+  const {
+    a11y_strikeThroughButtons
+  } = useContext(LibraryContext);
   const finalStyle = mergeStyle(style, customStyle);
+  const buttonProps = { ...props,
+    a11y_strikeThroughButtons
+  };
   const {
     buttonClass,
     loaderParentClass,
     loaderChildClass
   } = cssJSLogic({
-    props,
+    props: buttonProps,
     style: finalStyle
   });
   let statusLower = status.toLowerCase();

package/es/Button/__tests__/Button.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from "../Button";
+import Button from '../Button';
 import { render } from "@testing-library/react";
 describe('Button component', () => {
   test('Should be render with the basic set of default props', () => {

package/es/Button/css/Button.module.css

@@ -525,4 +525,88 @@
 
 .loader{
   color:var(--dot_mirror)
+}
+[dir=ltr] .primaryStrike {
+  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_strike), var(--zdt_button_primary_strike) 1px, transparent 0px,transparent 8px);
+}
+[dir=rtl] .primaryStrike {
+  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_strike), var(--zdt_button_primary_strike) 1px, transparent 0px,transparent 8px);
+}
+
+.primaryfilledStrike {
+  --button_border_color: var(--zdt_button_primaryfill_bg);
+  background-color: var(--zdt_button_primaryfill_bg);
+}
+
+[dir=ltr] .primaryfilledStrike {
+  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px);
+}
+
+[dir=rtl] .primaryfilledStrike {
+  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px);
+}
+
+[dir=ltr] .dangerStrike {
+  background: repeating-linear-gradient(120deg,var(--zd_dangertrans6), var(--zd_dangertrans6) 1px, transparent 0px, transparent 8px);
+}
+
+[dir=rtl] .dangerStrike {
+  background: repeating-linear-gradient(-120deg,var(--zd_dangertrans6), var(--zd_dangertrans6) 1px, transparent 0px, transparent 8px);
+}
+
+.dangerfilledStrike {
+  --button_border_color: var(--zdt_button_danger_border);
+  background-color: var(--zdt_button_dangerfill_bg);
+}
+
+[dir=ltr] .dangerfilledStrike {
+  background: repeating-linear-gradient(120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px);
+}
+
+[dir=rtl] .dangerfilledStrike {
+  background: repeating-linear-gradient(-120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px);
+}
+
+[dir=ltr] .secondaryStrike {
+  background: repeating-linear-gradient(120deg, var(--zdt_button_secondary_border), var(--zdt_button_secondary_border) 1px, transparent 0px,transparent 8px);
+}
+
+[dir=rtl] .secondaryStrike {
+  background: repeating-linear-gradient(-120deg, var(--zdt_button_secondary_border), var(--zdt_button_secondary_border) 1px, transparent 0px,transparent 8px);
+}
+
+.secondaryfilledStrike {
+  --button_border_color: var(--zdt_button_secondaryfill_bg);
+}
+
+[dir=ltr] .secondaryfilledStrike {
+  background: repeating-linear-gradient(120deg,var(--zdt_secondaryfilled_strike) , var(--zdt_secondaryfilled_strike) 1px, var(--zdt_button_secondaryfill_bg) 1px,var(--zdt_button_secondaryfill_bg) 8px);
+}
+
+[dir=rtl] .secondaryfilledStrike {
+  background: repeating-linear-gradient(-120deg,var(--zdt_secondaryfilled_strike) , var(--zdt_secondaryfilled_strike) 1px, var(--zdt_button_secondaryfill_bg) 1px,var(--zdt_button_secondaryfill_bg) 8px);
+}
+
+.tertiaryfilledStrike {
+  --button_border_color: var(--zdt_button_tertiaryfill_bg);
+}
+
+[dir=ltr] .tertiaryfilledStrike {
+  background: repeating-linear-gradient(120deg,var(--dot_slateGrey) , var(--dot_slateGrey) 1px, var(--zdt_button_tertiaryfill_bg) 1px,var(--zdt_button_tertiaryfill_bg) 8px);
+}
+
+[dir=rtl] .tertiaryfilledStrike {
+  background: repeating-linear-gradient(-120deg,var(--dot_slateGrey) , var(--dot_slateGrey) 1px, var(--zdt_button_tertiaryfill_bg) 1px,var(--zdt_button_tertiaryfill_bg) 8px);
+}
+
+.successfilledStrike {
+  --button_border_color: var(--zdt_button_successfill_border);
+}
+
+[dir=ltr] .successfilledStrike {
+  background: repeating-linear-gradient(120deg,var(--zdt_success_strike) , var(--zdt_success_strike) 1px, var(--zdt_button_successfill_bg) 1px,var(--zdt_button_successfill_bg) 8px);
+}
+
+[dir=rtl] .successfilledStrike {
+  background: repeating-linear-gradient(-120deg,var(--zdt_success_strike) , var(--zdt_success_strike) 1px, var(--zdt_button_successfill_bg) 1px,var(--zdt_button_successfill_bg) 8px);
 }

package/es/Button/css/cssJSLogic.js

@@ -12,15 +12,19 @@ export default function cssJSLogic(_ref) {
     size,
     children,
     palette,
-    status
+    status,
+    disabled,
+    a11y_strikeThroughButtons
   } = props;
   let {
     customButton = '',
     customStatus = '',
     customStatusSize = ''
   } = customClass;
+  let strikeExcluded = ['plainprimary', 'plainsecondary'];
   let paletteLower = palette.toLowerCase();
   let statusLower = status.toLowerCase();
+  let strikeEnabled = !strikeExcluded.includes(paletteLower);
   let buttonClass = compileClassNames({
     [customButton]: !!customButton,
     [style.bold]: isBold,
@@ -30,6 +34,7 @@ export default function cssJSLogic(_ref) {
     [style[size.toLowerCase()]]: needAppearance && !children,
     [style[`${size}Btn`]]: needAppearance && children,
     [style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
+    [style[`${paletteLower}Strike`]]: disabled && a11y_strikeThroughButtons && strikeEnabled,
     [style.loader]: !!needAppearance && statusLower !== 'none'
   });
   let loaderParentClass = compileClassNames({

package/es/Button/index.js

@@ -1,2 +1,2 @@
-export { default as Button } from "./Button";
-export { default as ButtonPropTypes } from "./props/propTypes";
+export { default as Button } from './Button';
+export { default as ButtonPropTypes } from './props/propTypes';

package/es/Button/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { dummyFunction } from "../../utils/dummyFunction";
+import { dummyFunction } from '../../utils/dummyFunction';
 export const defaultProps = {
   children: null,
   dataId: 'buttonComp',

package/es/Buttongroup/Buttongroup.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./Buttongroup.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Buttongroup.module.css';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
 

package/es/Buttongroup/__tests__/Buttongroup.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Buttongroup from "../Buttongroup.js";
+import Buttongroup from '../Buttongroup.js';
 import { render } from "@testing-library/react";
 describe('Buttongrop - ', () => {
   test('rendering the default props', () => {