@zohodesk/components 1.4.12 → 1.4.13

package/es/AppContainer/__tests__/AppContainer.spec.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import AppContainer from "../AppContainer.js";
-describe('AppContainer', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the customClass', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      className: "AppcontainerClass"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the needTooltip is false', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      needTooltip: false
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the tooltipClass', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      tooltipClass: "customTooltipClass"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the tooltipParentClass', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      tooltipParentClass: "tooltipParentClass"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the Custom props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, {
-      customProps: {
-        ExtraProps: {
-          'data-props': true
-        },
-        ContainerProps: {
-          'data-container': true
-        }
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('eleRef prop is a function', () => {
-    const mockEleRef = jest.fn();
-    render( /*#__PURE__*/React.createElement(AppContainer, {
-      eleRef: mockEleRef
-    }));
-    expect(mockEleRef).toHaveBeenCalled();
-  });
-  test('rendering the childern as element', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement("div", null, "Children")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the childern as element in array', () => {
-    const children = [/*#__PURE__*/React.createElement("div", {
-      key: "child1"
-    }, "Child 1"), /*#__PURE__*/React.createElement("span", {
-      key: "child2"
-    }, "Child 2")];
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AppContainer, null, children));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,201 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AppContainer rendering the Custom props 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-container="true"
-    data-id="AppContainer"
-    data-props="true"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-props="true"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the childern as element 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <div>
-        Children
-      </div>
-    </div>
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the childern as element in array 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <div>
-        Child 1
-      </div>
-      <span>
-        Child 2
-      </span>
-    </div>
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the customClass 1`] = `
-<DocumentFragment>
-  <div
-    class="container AppcontainerClass flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the needTooltip is false 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the tooltipClass 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip "
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;
-
-exports[`AppContainer rendering the tooltipParentClass 1`] = `
-<DocumentFragment>
-  <div
-    class="container  flex cover coldir"
-    data-id="AppContainer"
-    data-selector-id="appContainer"
-    data-test-id="AppContainer"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-  </div>
-  <div
-    class="container tooltip tooltipParentClass"
-    data-id="AppContainer_tooltip"
-    data-selector-id="appContainer_tooltip"
-    data-test-id="AppContainer_tooltip"
-  />
-</DocumentFragment>
-`;

package/es/AppContainer/props/defaultProps.js

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

package/es/AppContainer/props/propTypes.js

@@ -1,17 +0,0 @@
-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/Avatar/Avatar.js

@@ -1,195 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-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
-*/
-
-/*
-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 {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isLoaded: false
-    };
-    this.putInvalidImageURLJSON = this.putInvalidImageURLJSON.bind(this);
-    this.putValidImageURLJSON = this.putValidImageURLJSON.bind(this);
-    this.getInitialByFullName = this.getInitialByFullName.bind(this);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    let {
-      src
-    } = this.props;
-    let {
-      isLoaded
-    } = this.state;
-
-    if (prevProps.src !== src) {
-      this.setState({
-        isLoaded: !isLoaded
-      });
-    }
-  }
-
-  putInvalidImageURLJSON() {
-    const {
-      src,
-      alternateSrc
-    } = this.props;
-    let {
-      isLoaded
-    } = this.state;
-    let _validImgArr = [...Avatar.validImageURLs];
-    let _invalidImgArr = [...Avatar.invalidImageURLs]; // if (alternateSrc) {
-    //   _validImgArr.push(alternateSrc);
-    // }
-
-    const validIndex = _validImgArr.indexOf(src);
-
-    if (validIndex !== -1) {
-      _validImgArr.splice(validIndex, 1);
-    }
-
-    _invalidImgArr.push(src);
-
-    Avatar.invalidImageURLs = _invalidImgArr;
-    Avatar.validImageURLs = _validImgArr;
-    this.setState({
-      isLoaded: !isLoaded
-    });
-  }
-
-  putValidImageURLJSON() {
-    const {
-      src
-    } = this.props;
-    let {
-      isLoaded
-    } = this.state;
-    const validImgArr = Avatar.validImageURLs;
-    const invalidImgArr = Avatar.invalidImageURLs;
-
-    if (src && validImgArr.indexOf(src) === -1 && invalidImgArr.indexOf(src) === -1) {
-      let _validImgArr = [...validImgArr];
-
-      _validImgArr.push(src);
-
-      Avatar.validImageURLs = _validImgArr;
-      this.setState({
-        isLoaded: !isLoaded
-      });
-    }
-  }
-  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
-
-
-  getInitialByFullName() {
-    let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    fullName = (fullName || '').trim();
-    let nameList = fullName.split(' ');
-
-    if (nameList.length === 1) {
-      return getInitial('', nameList[0]);
-    }
-
-    return getInitial(nameList[0], nameList[1]);
-  } // componentDidMount() {
-  //   const { src } = this.props;
-  //   const validImgArr = Avatar.validImageURLs;
-  //   if (validImgArr.indexOf(src) === -1) {
-  //     let _validImgArr = [...validImgArr];
-  //     _validImgArr.push(src);
-  //   }
-  // }
-
-
-  render() {
-    let {
-      src,
-      name,
-      size,
-      palette,
-      onClick,
-      title,
-      shape,
-      needTitle,
-      dataId,
-      initial,
-      needBorder,
-      borderOnActive,
-      borderOnHover,
-      textPalette,
-      customClass,
-      alternateSrc,
-      isAnimate,
-      dataSelectorId,
-      customProps,
-      needInnerBorder,
-      needDefaultBorder
-    } = this.props;
-    let {
-      AvatarProps = {}
-    } = customProps;
-    let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
-    let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
-    initial = initial || this.getInitialByFullName(name);
-    let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
-
-    let showAvatar = src && !isInvalidImageList;
-    let showInitial = !showAvatar || showAvatar && isInvalidImageList;
-    const showAlternateAvatar = alternateSrc ? showInitial : false;
-    let border = borderOnHover || onClick;
-    let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
-    let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
-    borderStyle = showAlternateAvatar ? '' : borderStyle;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
-      "data-title": needTitle ? title ? title : name : null,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      onClick: onClick,
-      "data-selector-id": dataSelectorId,
-      tabIndex: onClick ? 0 : null,
-      ...AvatarProps
-    }, showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
-      className: `${style.initial}`,
-      "data-id": `${dataId}_AvatarInitial`,
-      "data-test-id": `${dataId}_AvatarInitial`,
-      "data-selector-id": `${dataSelectorId}_AvatarInitial`
-    }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-      className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
-      "data-id": `${dataId}_AvatarImg`,
-      "data-test-id": `${dataId}_AvatarImg`,
-      "data-selector-id": `${dataSelectorId}_AvatarImg`,
-      name: name,
-      onError: this.putInvalidImageURLJSON,
-      onLoad: this.putValidImageURLJSON,
-      src: showAlternateAvatar ? alternateSrc : src,
-      alt: name
-    }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
-      className: `${style.shadow} ${textStyle} `
-    })));
-  }
-
-}
-Avatar.defaultProps = defaultProps;
-Avatar.propTypes = propTypes;
-Avatar.invalidImageURLs = [];
-Avatar.validImageURLs = []; // if (__DOCS__) {
-//   Avatar.docs = {
-//     componentGroup: 'Avatar Group',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/Avatar/Avatar.module.css

@@ -1,176 +0,0 @@
-.varClass {
-  /* avatar default variables */
-  --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: var(--zd_font_size14);
-  --avatar_bg_color: var(--zdt_avatar_default_bg);
-  --avatar_border_radius: 50%;
-  --avatar_border_width: 0;
-  --avatar_border_style: solid;
-  --avatar_border_color: var(--zdt_avatar_default_border);
-  --avatar_border_hoverColor: var(--zdt_avatar_default_borderHover);
-  --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
-  --avatar_text_transform: uppercase;
-}
-
-.avatar {
-  composes: varClass;
-  position: relative;
-  composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
-  vertical-align: middle;
-  font-size: var(--avatar_font_size);
-  color: var(--avatar_text_color);
-  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 ;
-  pointer-events: none;
-  border-radius: var(--avatar_border_radius);
-}
-
-[dir=ltr] .shadow {
-  left: 0 ;
-}
-
-[dir=rtl] .shadow {
-  right: 0 ;
-}
-
-.shadow.black {
-  box-shadow: var(--zd_bs_avatar_black);
-}
-
-.shadow.white {
-  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% ;
-  position: absolute;
-  top: 0 ;
-  z-index: 0;
-  border-radius: var(--avatar_border_radius);
-}
-
-[dir=ltr] .image {
-  left: 0 ;
-}
-
-[dir=rtl] .image {
-  right: 0 ;
-}
-
-.animate {
-  composes: fadeIn modeForward from './../common/animation.module.css';
-}
-
-[dir=ltr] .animate {
-  animation-duration: var(--zd_transition2);
-}
-
-[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);
-}