@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="shrinkOff"
+    data-id="boxComponent"
+    data-selector-id="tabs"
+    data-test-id="boxComponent"
+  >
+    <div
+      class="tab flex cover coldir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="flex cover coldir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Tab/index.js

@@ -0,0 +1,5 @@
+export { default as TabWrapper } from "./TabWrapper";
+export { default as TabContentWrapper } from "./TabContentWrapper";
+export { default as TabContent } from "./TabContent";
+export { default as Tabs } from "./Tabs";
+export { default as Tab } from "./Tab";

package/es/Tab/props/defaultProps.js

@@ -0,0 +1,51 @@
+export const Tab_defaultProps = {
+  dataId: 'tabMenu',
+  customProps: {},
+  dataSelectorId: 'tab'
+};
+export const TabContent_defaultProps = {
+  dataId: 'tabContent',
+  dataSelectorId: 'tabContent'
+};
+export const TabContentWrapper_defaultProps = {
+  children: [],
+  dataSelectorId: 'tabContentWrapper',
+  a11y: {}
+};
+export const Tabs_defaultProps = {
+  isAnimate: false,
+  isResponsive: true,
+  needTabBorder: false,
+  type: 'alpha',
+  dataId: 'highlight',
+  align: 'horizontal',
+  children: [],
+  highlightClass: '',
+  minTabsCount: 0,
+  maxTabsCount: 100,
+  moreButtonClass: '',
+  moreBoxClass: '',
+  menuItemClass: '',
+  iconName: 'ZD-TB-menu',
+  iconSize: '7',
+  containerClass: '',
+  customProps: {},
+  dataSelectorId: 'tabs',
+  searchBoxSize: 'small',
+  searchErrorText: 'No results',
+  placeHolderText: 'Search',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  moreContainerClass: ''
+};
+export const TabWrapper_defaultProps = {
+  hookToDisableInternalState: false,
+  isAnimate: false,
+  needBorder: true,
+  needPadding: true,
+  needTabBorder: false,
+  type: 'alpha',
+  align: 'vertical',
+  needAppearance: true,
+  dataSelectorId: 'tabWrapper'
+};

package/es/Tab/props/propTypes.js

@@ -0,0 +1,117 @@
+import PropTypes from 'prop-types';
+export const Tab_propTypes = {
+  activeClass: PropTypes.string,
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getTabRef: PropTypes.func,
+  href: PropTypes.string,
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLink: PropTypes.bool,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  onClick: PropTypes.func,
+  onSelect: PropTypes.func,
+  style: PropTypes.object,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  titlePosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  tourId: PropTypes.string,
+  type: PropTypes.string,
+  customProps: PropTypes.object,
+  isVirtual: PropTypes.bool,
+  dataSelectorId: PropTypes.string
+};
+export const TabContent_propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  id: PropTypes.string,
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  dataSelectorId: PropTypes.string
+};
+export const TabContentWrapper_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  onScroll: PropTypes.func,
+  selectedTab: PropTypes.string,
+  style: PropTypes.object,
+  dataSelectorId: PropTypes.string,
+  a11y: PropTypes.object,
+  tagName: PropTypes.string
+};
+export const Tabs_propTypes = {
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  boxPosition: PropTypes.string,
+  childType: PropTypes.elementType,
+  children: PropTypes.array,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  highlightClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isResponsive: PropTypes.bool,
+  itemActiveClass: PropTypes.string,
+  itemClass: PropTypes.string,
+  maxTabsCount: PropTypes.number,
+  menuItemClass: PropTypes.string,
+  minTabsCount: PropTypes.number,
+  moreBoxClass: PropTypes.string,
+  moreButtonActiveClass: PropTypes.string,
+  moreButtonClass: PropTypes.string,
+  moreContainerClass: PropTypes.string,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needPadding: PropTypes.bool,
+  needTabBorder: PropTypes.bool,
+  onScroll: PropTypes.func,
+  onSelect: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  selectedTab: PropTypes.string,
+  showTitleInMoreOptions: PropTypes.bool,
+  style: PropTypes.object,
+  togglePopup: PropTypes.func,
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  getTargetRef: PropTypes.func,
+  containerClass: PropTypes.string,
+  customProps: PropTypes.shape({
+    TextBoxIconProps: PropTypes.object,
+    DropBoxProps: PropTypes.object,
+    ListItemProps: PropTypes.object,
+    MoreButtonProps: PropTypes.object
+  }),
+  getCustomDropBoxHeaderPlaceHolder: PropTypes.func,
+  dataSelectorId: PropTypes.string,
+  placeHolderText: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  searchErrorText: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object
+};
+export const TabWrapper_propTypes = {
+  align: PropTypes.oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  defaultTab: PropTypes.string,
+  hookToDisableInternalState: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needPadding: PropTypes.bool,
+  needTabBorder: PropTypes.bool,
+  onSelect: PropTypes.func,
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  dataSelectorId: PropTypes.string
+};

package/es/Tab/utils/tabConfigs.js

@@ -0,0 +1,18 @@
+export const TAB_ALIGN_MAPPING = {
+  vertical: 'column',
+  horizontal: 'row',
+  'vertical-reverse': 'column-reverse',
+  'horizontal-reverse': 'row-reverse'
+};
+export const TAB_DIRECTION_MAPPING = {
+  vertical: 'column',
+  horizontal: 'row',
+  'vertical-reverse': 'column',
+  'horizontal-reverse': 'row'
+};
+export const TAB_POPUP_POSITION_MAPPING = {
+  vertical: 'bottomLeft',
+  horizontal: 'rightTop',
+  'vertical-reverse': 'topLeft',
+  'horizontal-reverse': 'leftTop'
+};

package/es/Tag/Tag.js

@@ -0,0 +1,165 @@
+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, { PureComponent } from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { renderNode } from '@zohodesk/utils';
+import { Icon } from '@zohodesk/icons';
+import Avatar from "../Avatar/Avatar";
+import { Container } from "../Layout";
+import Button from "../semantic/Button/Button";
+import { getUniqueId } from "../Provider/IdProvider";
+import style from "./Tag.module.css";
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
+ */
+
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
+ */
+
+export default class Tag extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleRemove = this.handleRemove.bind(this);
+    this.getRef = this.getRef.bind(this);
+    this.getNextAriaId = getUniqueId(this);
+  }
+
+  handleSelect(e) {
+    let {
+      id,
+      onSelectTag = null
+    } = this.props;
+    e && e.preventDefault();
+    e.stopPropagation && e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+    onSelectTag && onSelectTag(id, e);
+  }
+
+  handleRemove(e) {
+    let {
+      onRemove,
+      id
+    } = this.props;
+    e && e.preventDefault();
+    e.stopPropagation && e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+    onRemove && onRemove(id, e);
+  }
+
+  getRef(el) {
+    let {
+      getRef,
+      id
+    } = this.props;
+    getRef && getRef(el, id);
+  }
+
+  render() {
+    let {
+      imageURL,
+      hasAvatar,
+      text,
+      onRemove,
+      initial,
+      active,
+      size,
+      rounded,
+      palette,
+      disabled,
+      closePalette,
+      onSelectTag,
+      closeTitle,
+      dataId,
+      dataSelectorId,
+      iconName,
+      iconSize,
+      tooltip,
+      avatarPalette,
+      customClass,
+      customAttributes,
+      a11y,
+      needEffect,
+      isReadOnly,
+      renderLeftChildren,
+      renderRightChildren,
+      customProps
+    } = this.props;
+    const {
+      avatarProps = {},
+      iconProps = {}
+    } = customProps;
+    let {
+      customTag = '',
+      customTagClose = '',
+      customTagIcon = '',
+      customAvatar = ''
+    } = customClass;
+    let textSizes = size === 'small' ? style.smalltext : style.mediumtext;
+    let getAriaId = this.getNextAriaId();
+    let {
+      clearLabel = 'Delete'
+    } = a11y;
+    let isDarkPalette = palette === 'dark';
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
+      "data-test-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
+      onClick: this.handleSelect,
+      ref: this.getRef,
+      "data-title": tooltip ? tooltip : text,
+      tabIndex: disabled ? '-1' : '0',
+      "aria-labelledby": getAriaId,
+      "data-selector-id": dataSelectorId
+    }, customAttributes), renderNode(renderLeftChildren), hasAvatar ? /*#__PURE__*/React.createElement("div", {
+      className: style.avatar
+    }, /*#__PURE__*/React.createElement(Avatar, _extends({
+      palette: isDarkPalette ? 'info' : avatarPalette,
+      name: initial,
+      size: "small",
+      src: imageURL,
+      textPalette: isDarkPalette ? 'white' : '',
+      customClass: customAvatar
+    }, avatarProps))) : null, iconName ? /*#__PURE__*/React.createElement("div", {
+      className: `${style.icon} ${customTagIcon}`,
+      "aria-hidden": true
+    }, /*#__PURE__*/React.createElement(Icon, _extends({
+      name: iconName,
+      size: iconSize
+    }, iconProps))) : null, /*#__PURE__*/React.createElement("div", {
+      className: `${style.text} ${textSizes}`,
+      "aria-hidden": true,
+      id: getAriaId
+    }, text), onRemove && /*#__PURE__*/React.createElement(Button, {
+      customClass: `${style.close} ${active ? style[`active${closePalette}Close`] : ''}
+            ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}
+            ${customTagClose} ${style[`close${closePalette}`]}`,
+      dataId: `${dataId}_RemoveTag`,
+      title: closeTitle,
+      onClick: this.handleRemove,
+      a11y: {
+        ariaLabel: clearLabel
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      isBold: true,
+      name: "ZD-close2",
+      size: "8"
+    }))), renderNode(renderRightChildren));
+  }
+
+}
+Tag.defaultProps = defaultProps;
+Tag.propTypes = propTypes; // if (__DOCS__) {
+//   Tag.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Tag/Tag.module.css

@@ -0,0 +1,255 @@
+.varClass {
+  /* tag default variables */
+  --tag_text_color: var(--zdt_tag_default_text);
+  --tag_font_size: 13px;
+  --tag_letter_spacing: normal;
+  --tag_bg_color: var(--zdt_tag_default_bg);
+  --tag_border_radius: 25px;
+  --tag_height: auto;
+  --tag_border_width: 0;
+  --tag_border_style: dashed;
+  --tag_border_color: var(--zdt_tag_default_border);
+  --tag_padding: 2px;
+  --tag_inner_text_padding: 0 6px;
+  --tag_cursor: default;
+
+  /* tag close icon default variables */
+  --tag_closeicon_color: var(--zdt_tag_secondary_text);
+  --tag_closeicon_cursor: pointer;
+  --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
+
+  /* tag normal icon default variables */
+  --tag_icon_bg_color: var(--zdt_tag_icon_bg);
+}[dir=ltr] .varClass {
+  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
+  --tag_closeicon_padding: 0 7px 0 6px
+    /*rtl: 0 6px 0 7px*/;
+  --tag_icon_margin: 0 0 0 5px /*rtl: 0 5px 0 0*/;
+}[dir=rtl] .varClass {
+  --tag_closeicon_border_radius: 12px 0 0 12px;
+  --tag_closeicon_padding: 0 6px 0 7px;
+  --tag_icon_margin: 0 5px 0 0;
+}
+.container {
+  composes: varClass;
+  composes: dInflex alignVertical flexrow from '../common/common.module.css';
+  position: relative;
+  vertical-align: middle;
+  color: var(--tag_text_color);
+  font-size: var(--tag_font_size);
+  letter-spacing: var(--tag_letter_spacing);
+  height: var(--tag_height);
+  max-width: 100% ;
+  background-color: var(--tag_bg_color);
+  border-radius: var(--tag_border_radius);
+  border-width: var(--tag_border_width);
+  border-style: var(--tag_border_style);
+  border-color: var(--tag_border_color);
+  padding: var(--tag_padding);
+  cursor: var(--tag_cursor);
+}
+.disabled {
+  pointer-events: none;
+  --tag_text_color: var(--zdt_tag_disabled_text);
+}
+.readonly,
+.disabled {
+  --tag_cursor: not-allowed;
+}
+.pointer {
+  --tag_cursor: pointer;
+}
+.lgRadius {
+  --tag_border_radius: 25px;
+}
+.smRadius {
+  --tag_border_radius: 3px;
+}
+.text {
+  composes: dotted flexgrow from '../common/common.module.css';
+}
+.smalltext,
+.mediumtext {
+  font-size: var(--tag_font_size);
+}
+.smalltext, .mediumtext {
+  padding: var(--tag_inner_text_padding);
+}
+.small {
+  --tag_height: 20px;
+  --tag_padding: 1px;
+  --tag_inner_text_padding: 0 7px;
+}
+[dir=ltr] .small .avatar {
+  transform: scale(0.8) translateX(-2px);
+  margin-right: calc( var(--zd_size8) * -1 ) ;
+}
+[dir=rtl] .small .avatar {
+  transform: scale(0.8) translateX(2px);
+  margin-left: calc( var(--zd_size8) * -1 ) ;
+}
+.smalltext {
+  --tag_font_size: 12px;
+}
+.activesmallEffect {
+  --tag_inner_text_padding: 0 25px 0 7px;
+}
+
+.medium {
+  --tag_height: 26px;
+  --tag_padding: 2px;
+  --tag_inner_text_padding: 0 6px;
+}
+.mediumtext {
+  --tag_font_size: 13px;
+}
+.activemediumEffect {
+  --tag_inner_text_padding: 0 25px 0 6px;
+}
+
+.selected .close {
+  display: block;
+}
+.activedanger,
+.closedanger:hover {
+  --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
+}
+.activeprimary,
+.closeprimary:hover {
+  --tag_closeicon_bg_color: var(--zdt_tag_primary_hover_bg);
+}
+
+.container:hover .close {
+  display: block;
+}
+.close {
+  color: var(--tag_closeicon_color);
+  display: none;
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  padding: var(--tag_closeicon_padding);
+  cursor: var(--tag_closeicon_cursor);
+  border-radius: var(--tag_closeicon_border_radius);
+  background: var(--tag_closeicon_bg_color);
+}
+[dir=ltr] .close {
+  right: 0 ;
+}
+[dir=rtl] .close {
+  left: 0 ;
+}
+[dir=ltr] .lgRadiusClose {
+  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
+}
+[dir=rtl] .lgRadiusClose {
+  --tag_closeicon_border_radius: 12px 0 0 12px;
+}
+[dir=ltr] .smRadiusClose {
+  --tag_closeicon_border_radius: 0 3px 3px 0 /*rtl: 3px 0 0 3px*/;
+}
+[dir=rtl] .smRadiusClose {
+  --tag_closeicon_border_radius: 3px 0 0 3px;
+}
+.closedanger {
+  --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
+}
+.closeprimary {
+  --tag_closeicon_bg_color: var(--zdt_tag_closeprimary_bg);
+}
+.default,
+.danger,.defaultLink {
+  --tag_bg_color: var(--zdt_tag_default_danger_bg);
+}
+.effect.default:hover {
+  --tag_bg_color: var(--zdt_tag_default_hover_bg);
+}
+.activedefault,
+.effect.activedefault:hover {
+  --tag_bg_color: var(--zdt_tag_active_default_bg);
+}
+.activeprimaryClose,
+.activeprimaryClose:hover {
+  --tag_closeicon_bg_color: var(--zdt_tag_primary_bg);
+}
+
+.effect.danger:hover {
+  --tag_bg_color: var(--zdt_tag_danger_hover_bg);
+}
+.activedanger,
+.effect.activedanger:hover {
+  --tag_bg_color: var(--zdt_tag_danger_hover_bg);
+}
+.activedangerClose,
+.activedangerClose:hover {
+  --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
+}
+.secondary {
+  --tag_bg_color: var(--zdt_tag_secondary_bg);
+  --tag_text_color: var(--zdt_tag_secondary_text);
+}
+.activesecondary,
+.effect.secondary:hover {
+  --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
+}
+.activedefaultLink,
+.effect.defaultLink:hover{
+--tag_bg_color: var(--zdt_tag_defaultLink_hover_bg);
+--tag_text_color: var(--zdt_tag_defaultLink_hover_text);
+};
+
+.pureDotted {
+  --tag_bg_color: var(--zdt_tag_pure_bg);
+  --tag_border_width: 1px;
+  --tag_border_color: var(--zdt_tag_pure_border);
+}
+.effect.pureDotted:hover {
+  --tag_bg_color: var(--zdt_tag_pure_hover_bg);
+  --tag_border_color: var(--zdt_tag_pure_hover_border);
+}
+.activepureDotted,
+.effect.activepureDotted:hover {
+  --tag_bg_color: var(--zdt_tag_pure_bg);
+}
+
+.primaryDotted {
+  --tag_bg_color: var(--zdt_tag_active_default_bg);
+  --tag_border_width: 1px;
+  --tag_border_color: var(--zdt_tag_primary_border);
+}
+.effect.primaryDotted:hover,
+.activeprimaryDotted,
+.primary,
+.effect.primary:hover {
+  --tag_bg_color: var(--zdt_tag_active_default_bg);
+}
+
+.icon {
+  margin: var(--tag_icon_margin);
+  background-color: var(--tag_icon_bg_color);
+}
+.icon > i {
+  display: block;
+}
+.dark {
+  --tag_bg_color: var(--zdt_tag_dark_bg);
+  --tag_text_color: var(--zdt_tag_dark_text);
+}
+.effect.dark:hover {
+  --tag_bg_color: var(--zdt_tag_dark_hover_bg);
+  --tag_text_color: var(--zdt_tag_dark_hover_text);
+}
+.darkTagClose {
+  --tag_closeicon_bg_color: var(--zdt_tag_dark_close_bg);
+  --tag_closeicon_color: var(--zdt_tag_dark_close_text);
+}
+.darkTagClose:hover {
+  --tag_closeicon_bg_color: var(--zdt_tag_dark_close_hover_bg);
+  --tag_closeicon_color: var(--zdt_tag_secondary_text);
+}
+.pureDarkDotted {
+  composes: dark pureDotted;
+}
+.darkPrimaryDotted {
+  composes: dark primaryDotted;
+}