@zohodesk/components 1.0.0-test-252 → 1.0.0

package/es/Avatar/Avatar.module.css

@@ -11,6 +11,7 @@
   --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
   --avatar_text_transform: uppercase;
 }
+
 .avatar {
   composes: varClass;
   position: relative;
@@ -21,115 +22,155 @@
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
 }
+
 .border {
   border-color: var(--avatar_border_color);
 }
+
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
+
 .avatar, .primary {
   background-color: var(--avatar_bg_color);
 }
+
 .shadow {
   position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
+  height: 100% ;
+  width: 100% ;
+  top: 0 ;
   pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
+
 [dir=ltr] .shadow {
-  left: 0;
+  left: 0 ;
 }
+
 [dir=rtl] .shadow {
-  right: 0;
+  right: 0 ;
 }
+
 .shadow.black {
-  box-shadow: inset 0px 0px 5px var(--avatar_boxshadow);
+  box-shadow: var(--zd_bs_avatar_black);
 }
+
 .shadow.white {
-  box-shadow: inset 0px 0px 11px var(--avatar_boxshadow);
+  box-shadow: var(--zd_bs_avatar_white);
 }
+
 .avatar, .circle {
   border-radius: var(--avatar_border_radius);
 }
+
 .border {
   --avatar_border_width: 1px;
 }
+
 .image {
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
   position: absolute;
-  top:0;
+  top: 0 ;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
 }
+
 [dir=ltr] .image {
-  left:0;
+  left: 0 ;
 }
-[dir=rtl] .image { 
-  right:0;
+
+[dir=rtl] .image {
+  right: 0 ;
 }
-.animate{
-  composes:fadeIn modeForward from './../common/animation.module.css';
+
+.animate {
+  composes: fadeIn modeForward from './../common/animation.module.css';
 }
-[dir=ltr] .animate{
+
+[dir=ltr] .animate {
   animation-duration: var(--zd_transition2);
 }
-[dir=rtl] .animate{
+
+[dir=rtl] .animate {
   animation-duration: var(--zd_transition2);
 }
+
+.innerBorder {
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
+
 .square_small {
   --avatar_border_radius: 4px;
 }
+
 .square_xsmall {
   --avatar_border_radius: 6px;
 }
+
 .square_medium,
 .square_xmedium {
   --avatar_border_radius: 8px;
 }
+
 .square_large,
 .square_xlarge {
   --avatar_border_radius: 10px;
 }
+
 .none {
   display: none;
 }
+
 .default {
   --avatar_border_width: 0;
 }
+
 .secondary {
   --avatar_bg_color: var(--zdt_avatar_secondary_bg);
 }
+
 .info {
   --avatar_bg_color: var(--zdt_avatar_info_bg);
 }
+
 .initial {
   text-transform: var(--avatar_text_transform);
   display: inline-block;
 }
+
+.xxsmall {
+  --avatar_font_size: var(--zd_font_size8);
+}
+
 .small {
   --avatar_font_size: var(--zd_font_size9);
 }
+
 .xsmall {
   --avatar_font_size: var(--zd_font_size12);
 }
+
 .medium {
   --avatar_font_size: var(--zd_font_size14);
 }
+
 .xmedium {
   --avatar_font_size: var(--zd_font_size14);
 }
+
 .large {
   --avatar_font_size: var(--zd_font_size18);
 }
+
 .xlarge {
   --avatar_font_size: var(--zd_font_size28);
 }
+
 .white {
   --avatar_text_color: var(--zdt_avatar_white_text);
   --avatar_border_color: var(--zdt_avatar_white_border);
   --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
   --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
-}
+}

package/es/Avatar/props/defaultProps.js

@@ -10,5 +10,8 @@ export const defaultProps = {
   borderOnActive: false,
   borderOnHover: false,
   customProps: {},
-  isAnimate: true
+  isAnimate: true,
+  dataSelectorId: 'avatar',
+  needInnerBorder: false,
+  needDefaultBorder: false
 };

package/es/Avatar/props/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   initial: PropTypes.string,
   name: PropTypes.string.isRequired,
   needBorder: PropTypes.bool,
@@ -8,7 +9,7 @@ export const propTypes = {
   onClick: PropTypes.func,
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   shape: PropTypes.oneOf(['circle', 'square']),
-  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,
@@ -19,5 +20,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     AvatarProps: PropTypes.object
   }),
-  isAnimate: PropTypes.bool
+  isAnimate: PropTypes.bool,
+  needInnerBorder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool
 };

package/es/AvatarTeam/AvatarTeam.js

@@ -1,4 +1,5 @@
 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';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -31,7 +32,11 @@ export default class AvatarTeam extends React.Component {
       customClass,
       borderOnActive,
       borderOnHover,
-      customProps
+      dataSelectorId,
+      customProps,
+      needInnerBorder,
+      needBorder,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarTeamProps = {},
@@ -44,7 +49,9 @@ export default class AvatarTeam extends React.Component {
     let border = borderOnHover || onClick;
     return /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId,
+      "data-selector-id": dataSelectorId
     }, AvatarTeamProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       name: name,
       onClick: onClick,
@@ -56,19 +63,22 @@ export default class AvatarTeam extends React.Component {
       needTitle: needTitle,
       customClass: customAvatar,
       borderOnActive: borderOnActive,
-      borderOnHover: border
+      borderOnHover: border,
+      needInnerBorder: needInnerBorder,
+      needBorder: needBorder,
+      needDefaultBorder: needDefaultBorder
     }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
       className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
           ${style[`${size}team`]} ${customAvatarTeam}`
     }));
   }
+
 }
 AvatarTeam.defaultProps = defaultProps;
-AvatarTeam.propTypes = propTypes;
-if (false) {
-  AvatarTeam.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    external: true
-  };
-}
+AvatarTeam.propTypes = propTypes; // if (__DOCS__) {
+//   AvatarTeam.docs = {
+//     componentGroup: 'Avatar Group',
+//     folderName: 'Style Guide',
+//     external: true
+//   };
+// }

package/es/AvatarTeam/AvatarTeam.module.css

@@ -1,8 +1,11 @@
 .varClass {
   /* avatar team default variables */
-  --avatarteam_border_width: var(--zd_size1);
+  --avatarteam_border_width: 1px;
   --avatarteam_border_style: solid;
   --avatarteam_border_color: var(--zdt_avatarteam_default_border);
+  --avatarteam_outline_width: 1px;
+  --avatarteam_outline_style: solid;
+  --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
   --avatarteam_width: var(--zd_size5);
   --avatarteam_height: var(--zd_size5);
@@ -15,7 +18,8 @@
 .container {
   position: relative;
   display: inline-block;
-  font-size: 0;
+  font-size: 0 ;
+  vertical-align: middle;
 }
 .team {
   composes: varClass;
@@ -23,6 +27,9 @@
   top: var(--avatarteam_top_top);
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var(--avatarteam_outline_color);
   border-width: var(--avatarteam_border_width);
   border-style: var(--avatarteam_border_style);
   border-color: var(--avatarteam_border_color);
@@ -31,18 +38,18 @@
 }
 [dir=ltr] .team {
   transform: translate(-50%, -50%);
-  left: 50%;
+  left: 50% ;
 }
 [dir=rtl] .team {
   transform: translate(50%, -50%);
-  right: 50%;
+  right: 50% ;
 }
 .nofill {
-  --avatarteam_border_color: var(--zdt_avatarteam_nofill_border);
+  --avatarteam_border_color: var(--zdt_avatarteam_nofill_hover_border);
 }
 .primaryFilled,
 .infoFilled {
-  --avatarteam_bg_color: var(--zdt_avatarteam_primary_bg);
+  --avatarteam_bg_color: var(--zdt_avatarteam_primary_hover_bg);
 }
 .secondaryFilled {
   --avatarteam_bg_color: var(--zdt_avatarteam_secondary_bg);
@@ -61,9 +68,12 @@
 .team:before {
   position: absolute;
   content: '';
-  height: inherit;
-  width: inherit;
+  height: inherit ;
+  width: inherit ;
   top: var(--avatarteam_bottom_top);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var( --avatarteam_outline_color);
 }
 .team:after, .team:before {
   border: inherit;
@@ -80,7 +90,8 @@
   left: var(--avatarteam_bottom_right);
 }
 .smallteam,
-.xsmallteam {
+.xsmallteam,
+.xxsmallteam {
   --avatarteam_height: var(--zd_size3);
   --avatarteam_width: var(--zd_size3);
 }
@@ -94,15 +105,32 @@
   --avatarteam_height: var(--zd_size7);
   --avatarteam_width: var(--zd_size7);
 }
+
+.xxsmallteam {
+  /*  Variable:Ignore  */
+  --avatarteam_top_top: 0px;
+}
+.xxsmallteam::after,
+.xxsmallteam:before {
+  --avatarteam_bottom_top: var(--zd_size13);
+}
+.xxsmallteam:after {
+  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+}
+.xxsmallteam:before {
+  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+}
+
+
 .smallteam::after,
 .smallteam:before {
   --avatarteam_bottom_top: var(--zd_size17);
 }
 .smallteam:after {
-  --avatarteam_bottom_left: calc(var(--zd_size8) * -1);
+  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
 }
 .smallteam:before {
-  --avatarteam_bottom_right: calc(var(--zd_size8) * -1);
+  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
 }
 
 .xsmallteam::after,
@@ -110,10 +138,10 @@
   --avatarteam_bottom_top: var(--zd_size24);
 }
 .xsmallteam:after {
-  --avatarteam_bottom_left: calc(var(--zd_size10) * -1);
+  --avatarteam_bottom_left: calc( var(--zd_size10) * -1 );
 }
 .xsmallteam:before {
-  --avatarteam_bottom_right: calc(var(--zd_size10) * -1);
+  --avatarteam_bottom_right: calc( var(--zd_size10) * -1 );
 }
 
 .mediumteam::after,
@@ -121,10 +149,10 @@
   --avatarteam_bottom_top: var(--zd_size26);
 }
 .mediumteam:after {
-  --avatarteam_bottom_left: calc(var(--zd_size13) * -1);
+  --avatarteam_bottom_left: calc( var(--zd_size13) * -1 );
 }
 .mediumteam:before {
-  --avatarteam_bottom_right: calc(var(--zd_size13) * -1);
+  --avatarteam_bottom_right: calc( var(--zd_size13) * -1 );
 }
 
 .xmediumteam::after,
@@ -132,10 +160,10 @@
   --avatarteam_bottom_top: var(--zd_size30);
 }
 .xmediumteam:after {
-  --avatarteam_bottom_left: calc(var(--zd_size16) * -1);
+  --avatarteam_bottom_left: calc( var(--zd_size16) * -1 );
 }
 .xmediumteam:before {
-  --avatarteam_bottom_right: calc(var(--zd_size16) * -1);
+  --avatarteam_bottom_right: calc( var(--zd_size16) * -1 );
 }
 
 .largeteam::after,
@@ -143,10 +171,10 @@
   --avatarteam_bottom_top: var(--zd_size46);
 }
 .largeteam:after {
-  --avatarteam_bottom_left: calc(var(--zd_size24) * -1);
+  --avatarteam_bottom_left: calc( var(--zd_size24) * -1 );
 }
 .largeteam:before {
-  --avatarteam_bottom_right: calc(var(--zd_size24) * -1);
+  --avatarteam_bottom_right: calc( var(--zd_size24) * -1 );
 }
 
 .xlargeteam::after,
@@ -154,8 +182,8 @@
   --avatarteam_bottom_top: var(--zd_size65);
 }
 .xlargeteam:after {
-  --avatarteam_bottom_left: calc(var(--zd_size29) * -1);
+  --avatarteam_bottom_left: calc( var(--zd_size29) * -1 );
 }
 .xlargeteam:before {
-  --avatarteam_bottom_right: calc(var(--zd_size29) * -1);
+  --avatarteam_bottom_right: calc( var(--zd_size29) * -1 );
 }

package/es/AvatarTeam/props/defaultProps.js

@@ -5,9 +5,13 @@ export const defaultProps = {
   src: null,
   title: null,
   dataId: 'avatarTeamComp',
+  dataSelectorId: 'avatarTeam',
   needTitle: true,
   customClass: {},
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  needInnerBorder: true,
+  needBorder: true,
+  needDefaultBorder: true
 };

package/es/AvatarTeam/props/propTypes.js

@@ -1,14 +1,16 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   isFilled: PropTypes.bool,
   name: PropTypes.string.isRequired,
   needTitle: PropTypes.bool,
   onClick: PropTypes.func,
   palette: PropTypes.oneOf(['primary', 'secondary', 'info']),
-  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
+  needBorder: PropTypes.bool,
   title: PropTypes.string,
   customClass: PropTypes.shape({
     customAvatar: PropTypes.string,
@@ -16,6 +18,8 @@ export const propTypes = {
   }),
   borderOnActive: PropTypes.bool,
   borderOnHover: PropTypes.bool,
+  needInnerBorder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool,
   customProps: PropTypes.shape({
     AvatarTeamProps: PropTypes.object,
     AvatarProps: PropTypes.object

package/es/Button/Button.js

@@ -1,62 +1,66 @@
+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';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import style from './Button.module.css';
+import cssJSLogic from './css/cssJSLogic';
+import { mergeStyle } from './../utils/';
+import style from './css/Button.module.css';
 /*
 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'] }] */
-export default class Button extends React.Component {
-  render() {
-    let {
-      text,
-      palette,
-      disabled,
-      size,
-      onClick,
-      rounded,
-      status,
-      children,
-      isBold,
-      dataId,
-      needAppearance,
-      getRef,
-      title,
-      customClass
-    } = this.props;
-    let {
-      customButton = '',
-      customStatus = '',
-      customStatusSize = ''
-    } = customClass;
-    let paletteLower = palette.toLowerCase();
-    let statusLower = status.toLowerCase();
-    let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]} 
-             ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
-    return /*#__PURE__*/React.createElement("button", {
-      className: `${customButton} ${classList} ${isBold ? style.bold : ''}  `,
-      "data-id": disabled ? `${dataId}_disabled` : dataId,
-      disabled: disabled || statusLower === 'loading',
-      onClick: onClick,
-      "data-title": title,
-      type: "button",
-      ref: getRef
-    }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
-      className: style.overlay
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`] ? style[`${size}loading`] : ''}` : style.success}`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatus} ${statusLower === 'loading' ? `${style.loadingelement} ${style[`${paletteLower}element`] ? style[`${paletteLower}element`] : ''}` : `${style.successelement} ${style[`${paletteLower}success`] ? style[`${paletteLower}success`] : ''}`}`
-    }))));
-  }
+
+export default function Button(props) {
+  let {
+    text,
+    disabled,
+    onClick,
+    status,
+    children,
+    dataId,
+    needAppearance,
+    getRef,
+    title,
+    dataSelectorId,
+    customProps,
+    customStyle
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    buttonClass,
+    loaderParentClass,
+    loaderChildClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  let statusLower = status.toLowerCase();
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: buttonClass,
+    "data-id": disabled ? `${dataId}_disabled` : dataId,
+    "data-test-id": disabled ? `${dataId}_disabled` : dataId,
+    disabled: disabled || statusLower === 'loading',
+    onClick: onClick,
+    "data-title": title,
+    type: "button",
+    ref: getRef,
+    "data-selector-id": dataSelectorId
+  }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    className: finalStyle.overlay
+  }, /*#__PURE__*/React.createElement("div", {
+    className: loaderParentClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: loaderChildClass
+  }))));
 }
 Button.defaultProps = defaultProps;
-Button.propTypes = propTypes;
-if (false) {
-  Button.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+Button.propTypes = propTypes; // if (__DOCS__) {
+//   Button.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }