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

package/install.md

@@ -1,10 +1,10 @@
-- For New :
-
-# npm i
-# npm run common_package_build
-
-For Update:
-
-# npm run download
-# npm run common_package_build
-
+- For New :
+
+# npm i
+# npm run common_package_build
+
+For Update:
+
+# npm run download
+# npm run common_package_build
+

package/lib/AppContainer/AppContainer.js

@@ -35,6 +35,8 @@ require("@zohodesk/variables/assets/no_transitionVariables.module.css");
 
 require("../common/a11y.module.css");
 
+require("../common/boxShadow.module.css");
+
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
 
 var _Config = require("../Provider/Config");

package/lib/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/lib/Avatar/Avatar.js

@@ -55,17 +55,17 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-/*
-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"] }]
 */
 var Avatar = /*#__PURE__*/function (_React$Component) {
   _inherits(Avatar, _React$Component);

package/lib/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/lib/AvatarTeam/AvatarTeam.js

@@ -41,15 +41,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-/* 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"] }]
 */
 var AvatarTeam = /*#__PURE__*/function (_React$Component) {
   _inherits(AvatarTeam, _React$Component);

package/lib/Button/Button.js

@@ -21,10 +21,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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); }
 
-/*
-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/lib/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/lib/Buttongroup/Buttongroup.js

@@ -37,7 +37,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
 var Buttongroup = /*#__PURE__*/function (_React$Component) {
   _inherits(Buttongroup, _React$Component);

package/lib/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 {