@zohodesk/components 1.6.1 → 1.6.3

package/es/v1/Avatar/Avatar.js

@@ -1,139 +0,0 @@
-import React, { useState } from 'react';
-import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-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";
-/*
-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
-*/
-
-function Avatar(props) {
-  let {
-    src,
-    name,
-    size,
-    palette,
-    onClick,
-    title,
-    shape,
-    needTitle,
-    dataId,
-    initial,
-    needBorder,
-    borderOnActive,
-    borderOnHover,
-    textPalette,
-    customClass,
-    alternateSrc,
-    isAnimate,
-    dataSelectorId,
-    customProps,
-    needInnerBorder,
-    needDefaultBorder
-  } = props;
-  let {
-    AvatarProps = {}
-  } = customProps;
-  const [isLoaded, setLoaded] = useState(false);
-
-  const putInvalidImageURLJSON = () => {
-    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;
-    setLoaded(isLoaded => !isLoaded);
-  };
-
-  const putValidImageURLJSON = () => {
-    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;
-      setLoaded(isLoaded => !isLoaded);
-    }
-  };
-  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
-
-
-  const getInitialByFullName = function () {
-    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]);
-  };
-
-  useEffectCallOnlyAfterState(() => {
-    setLoaded(isLoaded => !isLoaded);
-  }, [src]);
-  let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
-  let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
-  initial = initial || 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: putInvalidImageURLJSON,
-    onLoad: putValidImageURLJSON,
-    src: showAlternateAvatar ? alternateSrc : src,
-    alt: name
-  }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
-    className: `${style.shadow} ${textStyle} `
-  })));
-}
-
-export default Avatar;
-Avatar.defaultProps = defaultProps;
-Avatar.propTypes = propTypes;
-Avatar.invalidImageURLs = [];
-Avatar.validImageURLs = [];

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

@@ -1,17 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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,70 +0,0 @@
-import React from 'react';
-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
-pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
-
-Not going to export to external then can kept inside supportapp
-*/
-
-export default function AvatarTeam(props) {
-  const {
-    src,
-    name,
-    size,
-    palette,
-    textPalette,
-    onClick,
-    title,
-    isFilled,
-    dataId,
-    needTitle,
-    customClass,
-    borderOnActive,
-    borderOnHover,
-    dataSelectorId,
-    customProps,
-    needInnerBorder,
-    needBorder,
-    needDefaultBorder
-  } = props;
-  const {
-    AvatarTeamProps = {},
-    AvatarProps = {}
-  } = customProps;
-  const {
-    customAvatar = '',
-    customAvatarTeam = ''
-  } = customClass;
-  const border = borderOnHover || onClick;
-  return /*#__PURE__*/React.createElement("span", {
-    className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId,
-    ...AvatarTeamProps
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    name: name,
-    onClick: onClick,
-    palette: palette,
-    textPalette: textPalette,
-    size: size,
-    src: src,
-    title: title,
-    needTitle: needTitle,
-    customClass: customAvatar,
-    borderOnActive: borderOnActive,
-    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;

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

@@ -1,17 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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,67 +0,0 @@
-import React from 'react';
-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";
-/*
-Button text and children props?
-use children for both cases
-toLowerCase check needed?
-*/
-
-export default function Button(props) {
-  let {
-    text,
-    disabled,
-    onClick,
-    status,
-    children,
-    dataId,
-    needAppearance,
-    getRef,
-    title,
-    dataSelectorId,
-    customProps,
-    customStyle,
-    a11y,
-    id
-  } = props;
-  const finalStyle = mergeStyle(style, customStyle);
-  const {
-    buttonClass,
-    loaderParentClass,
-    loaderChildClass
-  } = cssJSLogic({
-    props,
-    style: finalStyle
-  });
-  let statusLower = status.toLowerCase();
-  return /*#__PURE__*/React.createElement("button", {
-    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,
-    ...a11y,
-    id: id
-  }, 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 (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }

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

@@ -1,18 +0,0 @@
-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: {}
-};

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

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  disabled: PropTypes.bool,
-  getRef: PropTypes.func,
-  isBold: PropTypes.bool,
-  needAppearance: PropTypes.bool,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled']),
-  rounded: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
-  status: PropTypes.oneOf(['loading', 'success', 'none']),
-  text: PropTypes.string,
-  title: PropTypes.string,
-  customClass: PropTypes.shape({
-    customButton: PropTypes.string,
-    customStatus: PropTypes.string,
-    customStatusSize: PropTypes.string
-  }),
-  customStyle: PropTypes.object,
-  customProps: PropTypes.object,
-  id: PropTypes.string,
-  a11y: PropTypes.object,
-  shouldStrikeThroughDisabled: PropTypes.bool
-};
-export default propTypes;

package/es/v1/Buttongroup/Buttongroup.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Buttongroup/Buttongroup.module.css";
-export default function Buttongroup(props) {
-  const {
-    children,
-    type,
-    buttonPosition,
-    customClass,
-    dataId,
-    dataSelectorId
-  } = props;
-  const btnGroup = [];
-  children && children.forEach(child => {
-    let btnRight = /*#__PURE__*/React.createElement("span", {
-      className: style[type]
-    }, child);
-    btnGroup.push(btnRight);
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style[`align${buttonPosition}`]
-  }, children));
-}
-Buttongroup.defaultProps = defaultProps;
-Buttongroup.propTypes = propTypes;

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

@@ -1,6 +0,0 @@
-export const defaultProps = {
-  buttonPosition: 'left',
-  children: null,
-  dataId: 'ButtonGroup',
-  dataSelectorId: 'buttonGroup'
-};

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

@@ -1,9 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  buttonPosition: PropTypes.oneOf(['left', 'right', 'center']),
-  children: PropTypes.node,
-  type: PropTypes.string.isRequired,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string
-};