@zohodesk/components 1.0.0-temp-180 → 1.0.0-temp-182

package/README.md

@@ -32,6 +32,15 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.X
+
+- **v1/Tabs** - converted to functional component
+- **SelectedOptions** - customProps option provided for Tags
+
+# 1.2.20
+
+- **Avatar, ListContainer, Suggestions, Select, Switch** - Accessibility issue fixes.
+
 # 1.2.19 
 
 - Typography - lineheight unitless prop added

package/es/DateTime/DateTime.module.css

@@ -35,7 +35,7 @@
 .grid {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
-  line-height: var(--zd_size18);
+  line-height: 1.3846;
   /* css:theme-validation:ignore */
   text-align: center;
   padding: var(--zd_size4) 0 ;
@@ -72,7 +72,7 @@
 
 .thMonYear {
   font-size: var(--zd_font_size13) ;
-  line-height: var(--zd_size24);
+  line-height: 1.8462;
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
   display: initial

package/es/DateTime/YearView.module.css

@@ -9,7 +9,7 @@
 .month {
   width: 30.333%;
   font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size26);
+  line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
   text-align: center;

package/es/Label/Label.module.css

@@ -4,8 +4,9 @@
   --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
-  --label_line_height: 18px;
+  --label_line_height: 1.286;
 }
+/* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
   vertical-align: middle;
@@ -18,15 +19,19 @@
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
+  --label_line_height:1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
+  --label_line_height:1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
+  --label_line_height:1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
+  --label_line_height:0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {

package/es/ListItem/ListContainer.js

@@ -55,7 +55,8 @@ const ListContainer = props => {
     role,
     ariaSelected,
     ariaLabel,
-    insetFocus = true
+    insetFocus = true,
+    ...a11yAttributes
   } = a11y;
   const options = {};
 
@@ -89,7 +90,7 @@ const ListContainer = props => {
     eleRef: eleRef,
     tagName: isLink ? 'a' : 'li',
     "data-title": isDisabled ? disableTitle : title
-  }, options, customProps, a11y), children);
+  }, options, customProps, a11yAttributes), children);
 };
 
 ListContainer.defaultProps = ListContainerDefaultProps;

package/es/ListItem/ListItem.module.css

@@ -77,7 +77,7 @@
   composes: dotted from '../common/common.module.css';
 }
 .value, .multiLineValue {
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
 }
 .multiLineValue{
   word-break: break-word;

package/es/MultiSelect/SelectedOptions.js

@@ -34,7 +34,8 @@ export default class SelectedOptions extends React.PureComponent {
         icon,
         optionType,
         iconSize,
-        isDisabled
+        isDisabled,
+        customProps
       } = option;
       const commonProps = {
         disabled: isDisabled,
@@ -56,7 +57,7 @@ export default class SelectedOptions extends React.PureComponent {
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
           imageURL: photoURL
-        })));
+        }, customProps)));
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
@@ -65,7 +66,7 @@ export default class SelectedOptions extends React.PureComponent {
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
           iconSize: iconSize
-        })));
+        }, customProps)));
       }
 
       return /*#__PURE__*/React.createElement(Box, {
@@ -73,7 +74,7 @@ export default class SelectedOptions extends React.PureComponent {
         key: `${id}tag`
       }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
         active: highLightedSelectOptions.indexOf(id) >= 0
-      })));
+      }, customProps)));
     }));
   }
 

package/es/Ribbon/Ribbon.module.css

@@ -32,6 +32,7 @@
   --ribbon_tag_before_border_width: 1px 0 0 1px  ;
 }
 
+/* css:lineheight-validation:ignore */
 .basic {
   composes: varClass;
   position: relative;
@@ -215,7 +216,6 @@
   composes: dotted from '../common/common.module.css';
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_line_height: 20px;
   --ribbon_text_transform: uppercase;
 }
 
@@ -227,6 +227,22 @@
   --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
 
+.flag.small {
+  --ribbon_line_height: 2.2223;
+}
+
+.flag.medium {
+  --ribbon_line_height: 1.8182;
+}
+
+.flag.large {
+  --ribbon_line_height: 1.5385;
+}
+
+.flag.xlarge {
+  --ribbon_line_height: 1.4286;
+}
+
 .flag::after {
   position: absolute;
   /*  Variable:Ignore  */
@@ -262,10 +278,25 @@
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  --ribbon_line_height: 20px;
   text-align: center;
 }
 
+.ribbon.small {
+  --ribbon_line_height: 2.2223;
+}
+
+.ribbon.medium {
+  --ribbon_line_height: 1.8182;
+}
+
+.ribbon.large {
+  --ribbon_line_height: 1.5385;
+}
+
+.ribbon.xlarge {
+  --ribbon_line_height: 1.4286;
+}
+
 .ribbon::after,
 .ribbon::before {
   position: absolute;
@@ -373,7 +404,6 @@
 .sticker {
   display: block;
   height: var(--zd_size18) ;
-  line-height: var(--zd_size11);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
@@ -383,6 +413,22 @@
   padding: var(--zd_size3) var(--zd_size10) ;
 }
 
+.sticker.small {
+  line-height: 1.2223;
+}
+
+.sticker.medium {
+  line-height: 1;
+}
+
+.sticker.large {
+  line-height: 0.8462;
+}
+
+.sticker.xlarge {
+  line-height: 0.7858;
+}
+
 .after,
 .before {
   position: absolute;

package/es/Select/Select.module.css

@@ -27,6 +27,7 @@
 .container {
   position: relative;
 }
+/* css:lineheight-validation:ignore */
 .arrowIcon {
   height: var(--zd_size8) ;
   line-height: var(--zd_size8);

package/es/Tab/Tab.module.css

@@ -32,7 +32,7 @@
 }
 .alpha {
   font-size: var(--zd_font_size11) ;
-  line-height: var(--zd_size33);
+  line-height: 3;
   padding: 0 var(--zd_size18) ;
 }
 .tabAlpha {
@@ -55,7 +55,7 @@
 }
 .beta {
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size60);
+  line-height: 4.2857;
   text-transform: capitalize;
   padding: 0 var(--zd_size4) ;
 }
@@ -78,7 +78,7 @@
 }
 .delta {
   font-size: var(--zd_font_size11) ;
-  line-height: var(--zd_size33);
+  line-height: 3;
   padding: 0 var(--zd_size4) ;
 }
 [dir=ltr] .delta {

package/es/TextBox/TextBox.module.css

@@ -14,7 +14,7 @@
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
   --textbox_cursor: auto;
-  --textbox_line_height: 35px;
+  --textbox_line_height: 2.5;
 
   /* textbox placeholder default variable */
   --textbox_placeholder_text_color: var(--zdt_textbox_placeholder_text);
@@ -45,6 +45,7 @@
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+/* css:lineheight-validation:ignore */
 .container {
   composes: basic;
   /* css:theme-validation:ignore */
@@ -135,21 +136,21 @@
 }
 .xmedium {
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: 28px;
+  --textbox_line_height: 2;
 }
 .medium {
   --textbox_height: var(--zd_size35);
-  --textbox_line_height: 35px;
+  --textbox_line_height: 2.5;
 }
 .small {
   --textbox_font_size: var(--zd_font_size12);
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: 28px;
+  --textbox_line_height: 2.3334;
 }
 .xsmall {
   --textbox_font_size: var(--zd_font_size13);
   --textbox_height: var(--zd_size25);
-  --textbox_line_height: 25px;
+  --textbox_line_height: 1.9231;
 }
 .default,
 .primary,

package/es/Textarea/Textarea.module.css

@@ -5,7 +5,7 @@
   --textarea_cursor: auto;
   --textarea_text_color: var(--zdt_textarea_default_text);
   --textarea_font_size: var(--zd_font_size14);
-  --textarea_line_height: 22px;
+  --textarea_line_height: 1.5712;
   --textarea_padding: var(--zd_size2) 0;
   --textarea_height: var(--zd_size30);
 
@@ -61,6 +61,7 @@
 .resizeboth {
   composes: resizeboth from '../common/common.module.css';
 }
+/* css:lineheight-validation:ignore */
 .container {
   composes: basic;
   transition: border var(--zd_transition2) linear 0s,
@@ -104,13 +105,13 @@
   --textarea_font_size: var(--zd_font_size14);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size28);
-  --textarea_line_height: 19px;
+  --textarea_line_height: 1.3572;
 }
 .xmedium {
   --textarea_font_size: var(--zd_font_size13);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size25);
-  --textarea_line_height: 17px;
+  --textarea_line_height: 1.3077;
 }
 .small {
   --textarea_height: var(--zd_size30);

package/es/Tooltip/Tooltip.module.css

@@ -17,7 +17,7 @@
   font-family: var(--zd_semibold);
   word-break: break-word;
   max-width: var(--zd_size420) ;
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
   min-height: var(--zd_size24) ;
   overflow: hidden;
   background-color: var(--zdt_tooltip_default_bg);

package/es/v1/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { Accordion_defaultProps } from '../../Accordion/props/defaultProps';
-import { Accordion_propTypes } from '../../Accordion/props/propTypes';
+import { Accordion_defaultProps } from './props/defaultProps';
+import { Accordion_propTypes } from './props/propTypes';
 export default function Accordion(props) {
   const {
     className,

package/es/v1/Accordion/AccordionItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from '../../Accordion/props/defaultProps';
-import { AccordionItem_propTypes } from '../../Accordion/props/propTypes';
+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 function AccordionItem(props) {

package/es/v1/Accordion/props/defaultProps.js

@@ -0,0 +1,12 @@
+export const Accordion_defaultProps = {
+  unMount: true,
+  disableInternalState: false,
+  a11y: {},
+  dataId: 'Accordion',
+  dataSelectorId: 'accordion'
+};
+export const AccordionItem_defaultProps = {
+  a11y: {},
+  dataId: 'AccordionItem',
+  dataSelectorId: 'accordionItem'
+};

package/es/v1/Accordion/props/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+export const Accordion_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableInternalState: PropTypes.bool,
+  height: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectedItem: PropTypes.string.isRequired,
+  unMount: PropTypes.bool,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaExpanded: PropTypes.bool,
+    ariaHaspopup: PropTypes.bool
+  })
+};
+export const AccordionItem_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  equalityCheck: PropTypes.func,
+  id: PropTypes.string,
+  selectMenu: PropTypes.func,
+  selectedItem: PropTypes.string,
+  unMount: PropTypes.bool,
+  unMountItem: PropTypes.bool,
+  innerClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  })
+};

package/es/v1/Animation/Animation.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { defaultProps } from '../../Animation/props/defaultProps';
-import { propTypes } from '../../Animation/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
 import style from '../../common/transition.module.css';
 export default function Animation(props) {

package/es/v1/Animation/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  name: 'fadeIn',
+  unmountOnExit: true
+};

package/es/v1/Animation/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  delayClassName: PropTypes.string,
+  enterDuration: PropTypes.number,
+  exitDuration: PropTypes.number,
+  isActive: PropTypes.bool,
+  name: PropTypes.oneOf(['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none']),
+  onEntered: PropTypes.func,
+  onExit: PropTypes.func,
+  unmountOnExit: PropTypes.bool
+};

package/es/v1/AppContainer/AppContainer.js

@@ -1,8 +1,8 @@
 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, { useEffect, useRef, useLayoutEffect } from 'react';
-import { defaultProps } from '../../AppContainer/props/defaultProps';
-import { propTypes } from '../../AppContainer/props/propTypes';
+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';

package/es/v1/AppContainer/props/defaultProps.js

@@ -0,0 +1,10 @@
+export const defaultProps = {
+  dataId: 'AppContainer',
+  tagName: 'div',
+  className: '',
+  tooltipClass: '',
+  tooltipParentClass: '',
+  customProps: {},
+  dataSelectorId: 'appContainer',
+  needTooltip: true
+};

package/es/v1/AppContainer/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  eleRef: PropTypes.func,
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  needTooltip: PropTypes.bool,
+  tooltipClass: PropTypes.string,
+  tooltipParentClass: PropTypes.string,
+  customProps: PropTypes.shape({
+    ContainerProps: PropTypes.object,
+    TooltipProps: PropTypes.object,
+    ExtraProps: PropTypes.object
+  })
+};

package/es/v1/Avatar/Avatar.js

@@ -2,8 +2,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { defaultProps } from '../../Avatar/props/defaultProps';
-import { propTypes } from '../../Avatar/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { getInitial } from '../../utils/getInitial';
 import AvatarSize from '../../Provider/AvatarSize';
 import style from '../../Avatar/Avatar.module.css';

package/es/v1/Avatar/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  needTitle: true,
+  palette: 'primary',
+  shape: 'circle',
+  size: 'medium',
+  src: null,
+  title: null,
+  dataId: 'Avatar',
+  needBorder: true,
+  borderOnActive: false,
+  borderOnHover: false,
+  customProps: {},
+  isAnimate: true,
+  dataSelectorId: 'avatar',
+  needInnerBorder: false,
+  needDefaultBorder: false
+};

package/es/v1/Avatar/props/propTypes.js

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

package/es/v1/AvatarTeam/AvatarTeam.js

@@ -1,8 +1,8 @@
 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 '../../AvatarTeam/props/defaultProps';
-import { propTypes } from '../../AvatarTeam/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Avatar from '../Avatar/Avatar';
 import style from '../../AvatarTeam/AvatarTeam.module.css';
 /* once avatar support firstname lastname and pattern
@@ -62,7 +62,7 @@ export default function AvatarTeam(props) {
     needBorder: needBorder,
     needDefaultBorder: needDefaultBorder
   }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
-    className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
+    className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill}
           ${style[`${size}team`]} ${customAvatarTeam}`
   }));
 }

package/es/v1/AvatarTeam/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  isFilled: false,
+  palette: 'primary',
+  size: 'medium',
+  src: null,
+  title: null,
+  dataId: 'avatarTeamComp',
+  dataSelectorId: 'avatarTeam',
+  needTitle: true,
+  customClass: {},
+  borderOnActive: false,
+  borderOnHover: false,
+  customProps: {},
+  needInnerBorder: true,
+  needBorder: true,
+  needDefaultBorder: true
+};

package/es/v1/AvatarTeam/props/propTypes.js

@@ -0,0 +1,27 @@
+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(['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,
+    customAvatarTeam: PropTypes.string
+  }),
+  borderOnActive: PropTypes.bool,
+  borderOnHover: PropTypes.bool,
+  needInnerBorder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool,
+  customProps: PropTypes.shape({
+    AvatarTeamProps: PropTypes.object,
+    AvatarProps: PropTypes.object
+  })
+};

package/es/v1/Button/Button.js

@@ -1,8 +1,8 @@
 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 '../../Button/props/defaultProps';
-import { propTypes } from '../../Button/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import cssJSLogic from '../../Button/css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
 import style from '../../Button/css/Button.module.css';

package/es/v1/Button/props/defaultProps.js

@@ -0,0 +1,18 @@
+import { dummyFunction } from '../../../utils/dummyFunction';
+export const defaultProps = {
+  children: null,
+  dataId: 'buttonComp',
+  dataSelectorId: 'button',
+  disabled: false,
+  isBold: true,
+  needAppearance: true,
+  onClick: dummyFunction,
+  palette: 'primary',
+  rounded: false,
+  size: 'medium',
+  status: 'none',
+  text: 'Button',
+  customClass: {},
+  customProps: {},
+  a11y: {}
+};