@zohodesk/components 1.0.0-temp-197 → 1.0.0-temp-199

package/es/AppContainer/AppContainer.module.css

@@ -1,18 +1,18 @@
-.container,
-.container *,
-.container ::after,
-.container ::before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-.container {
-  font-family: var(--zd_regular);
-}
-.tooltip {
-  height: 0 ;
-  font-size: 0 ;
-  /* contain:strict */
-}
+.container,
+.container *,
+.container ::after,
+.container ::before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+.container {
+  font-family: var(--zd_regular);
+}
+.tooltip {
+  height: 0 ;
+  font-size: 0 ;
+  /* contain:strict */
+}

package/es/Avatar/Avatar.js

@@ -4,17 +4,17 @@ 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
-3. prop high priority to arrange firstName lastName
-4. team pass name as lastName and pass pattern via prop
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
 */
 
-/*
-eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
-'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
-"info","default"] }]
+/*
+eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
+'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
+"info","default"] }]
 */
 
 export default class Avatar extends React.Component {

package/es/Avatar/Avatar.module.css

@@ -53,11 +53,11 @@
 }
 
 .shadow.black {
-  box-shadow: var(--zd_bs_contrast_outline, inset 0px 0px 5px var(--avatar_boxshadow));
+  box-shadow: var(--zd_bs_avatar_black);
 }
 
 .shadow.white {
-  box-shadow: var(--zd_bs_contrast_outline, inset 0px 0px 11px var(--avatar_boxshadow));
+  box-shadow: var(--zd_bs_avatar_white);
 }
 
 .avatar, .circle {

package/es/AvatarTeam/AvatarTeam.js

@@ -3,15 +3,15 @@ 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
-
-Not going to export to external then can kept inside supportapp
+/* once avatar support firstname lastname and pattern
+pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
+
+Not going to export to external then can kept inside supportapp
 */
 
-/*
-eslint css-modules/no-unused-class: [2, { markAsUsed: ["primary", "secondary",
-"small", "xsmall", "medium", "xmedium", "large", "xlarge"] }]
+/*
+eslint css-modules/no-unused-class: [2, { markAsUsed: ["primary", "secondary",
+"small", "xsmall", "medium", "xmedium", "large", "xlarge"] }]
 */
 
 export default class AvatarTeam extends React.Component {

package/es/Button/Button.js

@@ -4,10 +4,10 @@ import { propTypes } from './props/propTypes';
 import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
 import style from './css/Button.module.css';
-/*
-Button text and children props?
-use children for both cases
-toLowerCase check needed?
+/*
+Button text and children props?
+use children for both cases
+toLowerCase check needed?
 */
 
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */

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

@@ -25,7 +25,6 @@
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
-
 .native {
   composes: varClass;
   /* transition: all var(--zd_transition2) ease 0s; */
@@ -112,14 +111,14 @@
 .smallBtnprimaryfilled,
 .mediumBtnprimary,
 .mediumBtnprimaryfilled {
-  --button_box_shadow: var(--zd_bs_contrast_outline, 0 3px 10px var(--zdt_button_primary_box_shadow));
+  --button_box_shadow: var(--zd_bs_button_primary);
 }
 
 .smallBtndanger,
 .smallBtndangerfilled,
 .mediumBtndanger,
 .mediumBtndangerfilled {
-  --button_box_shadow: var(--zd_bs_contrast_outline, 0 3px 10px var(--zdt_button_danger_box_shadow));
+  --button_box_shadow: var(--zd_bs_button_danger);
 }
 
 .small,
@@ -137,7 +136,6 @@
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
-
 .plainprimary:hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
@@ -148,7 +146,6 @@
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
-
 .plainsecondary:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -163,7 +160,6 @@
 .tertiaryfilled {
   --button_border_width: 1px;
 }
-
 .primary:hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
@@ -174,7 +170,6 @@
   --button_bg_color: var(--zdt_button_primaryfill_bg);
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
-
 .primaryfilled:hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
@@ -184,7 +179,6 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_danger_text);
 }
-
 .danger:hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
@@ -195,7 +189,6 @@
   --button_bg_color: var(--zdt_button_dangerfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
-
 .dangerfilled:hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
@@ -205,7 +198,6 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
-
 .secondary:hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
@@ -216,7 +208,6 @@
   --button_bg_color: var(--zdt_button_secondaryfill_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
-
 .secondaryfilled:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -226,7 +217,6 @@
   --button_bg_color: var(--zdt_button_successfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
-
 .successfilled:hover {
   --button_border_color: var(--zdt_button_successfill_hover_border);
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
@@ -237,7 +227,6 @@
   --button_bg_color: var(--zdt_button_tertiaryfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
-
 .tertiaryfilled:hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
@@ -337,23 +326,18 @@
 .loadingelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
-
 .primaryelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
-
 .primaryfilledelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
-
 .dangerelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
-
 .dangerfilledelement {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
-
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
@@ -382,13 +366,13 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
@@ -539,6 +523,6 @@
   }
 }
 
-.loader {
-  color: var(--dot_mirror)
+.loader{
+  color:var(--dot_mirror)
 }

package/es/Buttongroup/Buttongroup.js

@@ -2,7 +2,7 @@ import React from 'react';
 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',
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
 
 export default class Buttongroup extends React.Component {

package/es/Buttongroup/Buttongroup.module.css

@@ -20,7 +20,7 @@
 }
 
 .footer {
-  --buttongroup_box_shadow: var(--zd_bs_contrast_outline, 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow));
+  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
 }
 
 [dir=ltr] .footer {

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

@@ -1,191 +1,191 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Buttongrop -  Checking the "customclass" 1`] = `
-<DocumentFragment>
-  <div
-    class="buttonGroup undefined customClassButtonGroup"
-    data-id="ButtonGroup"
-    data-selector-id="buttonGroup"
-    data-test-id="ButtonGroup"
-  >
-    <div
-      class="alignleft"
-    >
-      <span>
-        Element 1
-      </span>
-      <span>
-        Element 2
-      </span>
-      <span>
-        Element 3
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Buttongrop -  rendering the "buttonPosition" to  - center 1`] = `
-<DocumentFragment>
-  <div
-    class="buttonGroup undefined "
-    data-id="ButtonGroup"
-    data-selector-id="buttonGroup"
-    data-test-id="ButtonGroup"
-  >
-    <div
-      class="aligncenter"
-    >
-      <span>
-        Element 1
-      </span>
-      <span>
-        Element 2
-      </span>
-      <span>
-        Element 3
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Buttongrop -  rendering the "buttonPosition" to  - left 1`] = `
-<DocumentFragment>
-  <div
-    class="buttonGroup undefined "
-    data-id="ButtonGroup"
-    data-selector-id="buttonGroup"
-    data-test-id="ButtonGroup"
-  >
-    <div
-      class="alignleft"
-    >
-      <span>
-        Element 1
-      </span>
-      <span>
-        Element 2
-      </span>
-      <span>
-        Element 3
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Buttongrop -  rendering the "buttonPosition" to  - right 1`] = `
-<DocumentFragment>
-  <div
-    class="buttonGroup undefined "
-    data-id="ButtonGroup"
-    data-selector-id="buttonGroup"
-    data-test-id="ButtonGroup"
-  >
-    <div
-      class="alignright"
-    >
-      <span>
-        Element 1
-      </span>
-      <span>
-        Element 2
-      </span>
-      <span>
-        Element 3
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Buttongrop -  rendering the "type"   - footer 1`] = `
-<DocumentFragment>
-  <div
-    class="buttonGroup footer "
-    data-id="ButtonGroup"
-    data-selector-id="buttonGroup"
-    data-test-id="ButtonGroup"
-  >
-    <div
-      class="alignleft"
-    >
-      <span>
-        Element 1
-      </span>
-      <span>
-        Element 2
-      </span>
-      <span>
-        Element 3
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Buttongrop -  rendering the "type"   - header 1`] = `
-<DocumentFragment>
-  <div
-    class="buttonGroup header "
-    data-id="ButtonGroup"
-    data-selector-id="buttonGroup"
-    data-test-id="ButtonGroup"
-  >
-    <div
-      class="alignleft"
-    >
-      <span>
-        Element 1
-      </span>
-      <span>
-        Element 2
-      </span>
-      <span>
-        Element 3
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Buttongrop -  rendering the "type"   - tab 1`] = `
-<DocumentFragment>
-  <div
-    class="buttonGroup tab "
-    data-id="ButtonGroup"
-    data-selector-id="buttonGroup"
-    data-test-id="ButtonGroup"
-  >
-    <div
-      class="alignleft"
-    >
-      <span>
-        Element 1
-      </span>
-      <span>
-        Element 2
-      </span>
-      <span>
-        Element 3
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Buttongrop -  rendering the default props 1`] = `
-<DocumentFragment>
-  <div
-    class="buttonGroup undefined "
-    data-id="ButtonGroup"
-    data-selector-id="buttonGroup"
-    data-test-id="ButtonGroup"
-  >
-    <div
-      class="alignleft"
-    />
-  </div>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buttongrop -  Checking the "customclass" 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined customClassButtonGroup"
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "buttonPosition" to  - center 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="aligncenter"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "buttonPosition" to  - left 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "buttonPosition" to  - right 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignright"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "type"   - footer 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup footer "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "type"   - header 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup header "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the "type"   - tab 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup tab "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    >
+      <span>
+        Element 1
+      </span>
+      <span>
+        Element 2
+      </span>
+      <span>
+        Element 3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Buttongrop -  rendering the default props 1`] = `
+<DocumentFragment>
+  <div
+    class="buttonGroup undefined "
+    data-id="ButtonGroup"
+    data-selector-id="buttonGroup"
+    data-test-id="ButtonGroup"
+  >
+    <div
+      class="alignleft"
+    />
+  </div>
+</DocumentFragment>
+`;

package/es/Card/Card.js

@@ -6,10 +6,10 @@ import { getLibraryConfig } from '../Provider/Config';
 import style from './Card.module.css';
 /* eslint-disable react/forbid-component-props */
 
-/*
-isscroll header border change use ref
-scroll logic remove from here
-scroll logic move to virtualizer list
+/*
+isscroll header border change use ref
+scroll logic remove from here
+scroll logic move to virtualizer list
 */
 
 /* performance handling pending in card component moving to ref instead of setState */