@zohodesk/components 1.0.0-temp-168 → 1.0.0-temp-170

package/es/v1/Animation/Animation.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { defaultProps } from '../../Animation/props/defaultProps';
+import { propTypes } from '../../Animation/props/propTypes';
+import { CSSTransition } from 'react-transition-group';
+import style from '../../common/transition.module.css';
+export default function Animation(props) {
+  let {
+    name,
+    enterDuration,
+    exitDuration,
+    children,
+    isActive,
+    unmountOnExit,
+    onEntered = () => {},
+    onExit = () => {},
+    delayClassName = null
+  } = props;
+  const animation = {
+    zoomIn: {
+      enter: style.zoomInEnter,
+      enterActive: style.zoomInEnterActive,
+      enterDone: style.zoomInEnterActive,
+      exit: style.zoomInLeave,
+      exitActive: style.zoomInLeaveActive,
+      exitDone: style.zoomInLeaveActive,
+      appear: style.zoomInEnter,
+      appearActive: style.zoomInEnterActive
+    },
+    scaleIn: {
+      enter: style.scaleInEnter,
+      enterActive: style.scaleInEnterActive,
+      enterDone: style.scaleInEnterActive,
+      exit: style.scaleInLeave,
+      exitActive: style.scaleInLeaveActive,
+      exitDone: style.scaleInLeaveActive,
+      appear: style.scaleInEnter,
+      appearActive: style.scaleInEnterActive
+    },
+    fadeIn: {
+      enter: style.fadeInEnter,
+      enterActive: style.fadeInEnterActive,
+      enterDone: style.fadeInEnterActive,
+      exit: style.fadeInLeave,
+      exitActive: style.fadeInLeaveActive,
+      exitDone: style.fadeInLeaveActive,
+      appear: style.fadeInEnter,
+      appearActive: style.fadeInEnterActive
+    },
+    slideLeft: {
+      enter: style.slideLeftEnter,
+      enterActive: style.slideLeftEnterActive,
+      enterDone: style.slideLeftEnterActive,
+      exit: style.slideLeftLeave,
+      exitActive: style.slideLeftLeaveActive,
+      exitDone: style.slideLeftLeaveActive,
+      appear: style.slideLeftEnter,
+      appearActive: style.slideLeftEnterActive
+    },
+    slideDown: {
+      enter: style.slideDownEnter,
+      enterActive: style.slideDownEnterActive,
+      enterDone: style.slideDownEnterActive,
+      exit: style.slideDownLeave,
+      exitActive: style.slideDownLeaveActive,
+      exitDone: style.slideDownLeaveActive,
+      appear: style.slideDownEnter,
+      appearActive: style.slideDownEnterActive
+    },
+    skewIn: {
+      enter: style.skewInEnter,
+      enterActive: style.skewInEnterActive,
+      enterDone: style.skewInEnterActive,
+      exit: style.skewInLeave,
+      exitActive: style.skewInLeaveActive,
+      exitDone: style.skewInLeaveActive,
+      appear: style.skewInEnter,
+      appearActive: style.skewInEnterActive
+    },
+    none: {
+      enter: style.noneEnter,
+      enterActive: style.noneEnterActive,
+      enterDone: style.noneEnterActive,
+      exit: style.noneLeave,
+      exitActive: style.noneLeaveActive,
+      exitDone: style.noneLeaveActive,
+      appear: style.noneEnter,
+      appearActive: style.noneEnterActive
+    },
+    default: {
+      enter: style.defaultEnter,
+      enterActive: style.defaultEnterActive,
+      enterDone: style.defaultEnterActive,
+      exit: style.defaultLeave,
+      exitActive: style.defaultLeaveActive,
+      exitDone: style.defaultLeaveActive,
+      appear: style.defaultEnter,
+      appearActive: style.defaultEnterActive
+    }
+  };
+  let newClassNames = delayClassName ? Object.assign({}, animation[name], {
+    exit: `${delayClassName} ${animation[name].exit}`
+  }) : animation[name];
+  return /*#__PURE__*/React.createElement(CSSTransition, {
+    classNames: newClassNames && newClassNames,
+    in: isActive,
+    appear: true,
+    enter: true,
+    exit: true,
+    mountOnEnter: false,
+    unmountOnExit: unmountOnExit,
+    timeout: {
+      enter: enterDuration,
+      exit: exitDuration
+    },
+    onEntered: onEntered,
+    onExit: onExit
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
+}
+Animation.propTypes = propTypes;
+Animation.defaultProps = defaultProps; // if (__DOCS__) {
+//   Animation.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/v1/AppContainer/AppContainer.js

@@ -0,0 +1,120 @@
+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 { Container, Box } from '../Layout';
+import Tooltip from '../Tooltip/Tooltip';
+import '../../common/basic.module.css';
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+import '@zohodesk/variables/assets/fontsizeVariables.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/variables/assets/transitionVariables.module.css';
+import '@zohodesk/variables/assets/no_transitionVariables.module.css';
+import '../../common/a11y.module.css';
+import '../../common/boxShadow.module.css';
+import style from '../../AppContainer/AppContainer.module.css';
+import { getLibraryConfig, setLibraryConfig } from '../../Provider/Config';
+export default function AppContainer(props) {
+  let {
+    className,
+    children,
+    tagName,
+    dataId,
+    dataSelectorId,
+    tooltipClass,
+    tooltipParentClass,
+    needTooltip,
+    customProps,
+    eleRef
+  } = props;
+  let {
+    ContainerProps = {},
+    TooltipProps = {},
+    ExtraProps = {}
+  } = customProps;
+  const tooltipRef = useRef(null);
+  const containerElement = useRef(null);
+  const timer = useRef(null);
+  const tooltipDebounce = useRef(getLibraryConfig('tooltipDebounce'));
+  useLayoutEffect(() => {
+    setLibraryConfig({
+      getTooltipContainer: () => containerElement.current
+    });
+  }, []);
+
+  function mouseOverDispatch(e) {
+    if (tooltipRef.current) {
+      tooltipRef.current.handleOver(e, containerElement.current);
+    }
+  }
+
+  function removeTimeout() {
+    if (timer.current) {
+      timer.current = clearTimeout(timer.current);
+    }
+  }
+
+  function handleOver(e) {
+    if (timer.current) {
+      timer.current = clearTimeout(timer.current);
+    }
+
+    timer.current = setTimeout(() => mouseOverDispatch(e), tooltipDebounce.current);
+  }
+
+  function getContainerRef(ref) {
+    containerElement.current = ref;
+    eleRef && eleRef(ref);
+  }
+
+  function setTooltipRef(ref) {
+    tooltipRef.current = ref;
+  }
+
+  useEffect(() => {
+    if (containerElement.current && needTooltip) {
+      containerElement.current.addEventListener('mouseover', handleOver, false);
+      containerElement.current.addEventListener('mouseout', removeTimeout, false);
+      tooltipRef.current.observeElement();
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (containerElement.current && needTooltip) {
+        containerElement.current.removeEventListener('mouseover', handleOver, false);
+        containerElement.current.addEventListener('mouseout', removeTimeout, false);
+        tooltipRef.current.unObserveElement();
+        setLibraryConfig({
+          getTooltipContainer: () => null
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
+    className: `${style.container} ${className}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId,
+    tagName: tagName,
+    eleRef: getContainerRef
+  }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
+    className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
+    "data-id": `${dataId}_tooltip`,
+    "data-test-id": `${dataId}_tooltip`,
+    "data-selector-id": `${dataSelectorId}_tooltip`
+  }), /*#__PURE__*/React.createElement(Tooltip, _extends({
+    ref: setTooltipRef,
+    customClass: tooltipClass
+  }, TooltipProps))) : null);
+}
+AppContainer.propTypes = propTypes;
+AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
+//   AppContainer.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Avatar/Avatar.js

@@ -0,0 +1,139 @@
+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, { useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
+import { defaultProps } from '../../Avatar/props/defaultProps';
+import { propTypes } from '../../Avatar/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", _extends({
+    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
+  }, 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/AvatarTeam/AvatarTeam.js

@@ -0,0 +1,70 @@
+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 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", _extends({
+    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, _extends({
+    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/Button/Button.js

@@ -0,0 +1,68 @@
+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 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", _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, 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/Buttongroup/Buttongroup.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { defaultProps } from '../../Buttongroup/props/defaultProps';
+import { propTypes } from '../../Buttongroup/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;