@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/v1/AvatarTeam/AvatarTeam.js

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

@@ -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

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

@@ -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: {}
+};

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

@@ -0,0 +1,27 @@
+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
+};
+export default propTypes;

package/es/v1/Buttongroup/Buttongroup.js

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

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

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

@@ -0,0 +1,9 @@
+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
+};

package/es/v1/Card/Card.js

@@ -0,0 +1,237 @@
+import React, { useRef, useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
+import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
+import { Container, Box } from '../Layout';
+import { getLibraryConfig } from '../../Provider/Config';
+import style from '../../Card/Card.module.css';
+/* eslint-disable react/forbid-component-props */
+
+/*
+isscroll header border change use ref
+scroll logic remove from here
+scroll logic move to virtualizer list
+*/
+
+/* performance handling pending in card component moving to ref instead of setState */
+
+export function CardHeader(props) {
+  let {
+    isScroll,
+    children,
+    dataId,
+    dataSelectorId,
+    customClass
+  } = props;
+  const cardHeader = useRef(null);
+
+  function getCardHeaderDom(ele) {
+    cardHeader.current = ele;
+  }
+
+  function setScrollClassName() {
+    if (!cardHeader.current) {
+      return null;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Box, {
+    className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
+    eleRef: getCardHeaderDom,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, children);
+}
+CardHeader.propTypes = CardHeader_propTypes;
+CardHeader.defaultProps = CardHeader_defaultProps;
+export function CardContent(props) {
+  let {
+    onScroll,
+    eleRef,
+    children,
+    scroll,
+    isScrollAttribute,
+    dataId,
+    dataSelectorId,
+    shrink,
+    customClass,
+    preventParentScroll
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    onScroll: onScroll,
+    eleRef: eleRef,
+    scroll: scroll,
+    preventParentScroll: preventParentScroll,
+    isScrollAttribute: isScrollAttribute,
+    dataId: dataId,
+    shrink: shrink,
+    className: customClass,
+    dataSelectorId: dataSelectorId
+  }, children);
+}
+CardContent.propTypes = CardContent_propTypes;
+CardContent.defaultProps = CardContent_defaultProps;
+export default function Card(props) {
+  let {
+    onClick,
+    children,
+    isScrollAttribute,
+    dataId,
+    eleRef,
+    customClass = '',
+    htmlId,
+    a11y,
+    from,
+    limit,
+    fetchData,
+    noMoreData,
+    scrollAt,
+    noNeedUpScroll,
+    isPercentageScroll,
+    onScroll
+  } = props;
+  let {
+    role
+  } = a11y;
+  const [isScroll, setScroll] = useState(false);
+  const fromRef = useRef(from);
+  const limitRef = useRef(limit);
+  const to = useRef(from + 3 * limit);
+  const lastScrollTop = useRef(0);
+  const isFetching = useRef(false);
+  const scrollDirection = useRef(null);
+  useEffectCallOnlyAfterState(() => {
+    fromRef.current = from;
+  }, [from]);
+
+  function onCardScroll(e) {
+    let scrollContainerObj = e.currentTarget;
+    let {
+      scrollHeight
+    } = scrollContainerObj;
+    let {
+      scrollTop
+    } = scrollContainerObj;
+    let {
+      offsetHeight
+    } = scrollContainerObj;
+    onScroll && onScroll(e);
+
+    if (scrollTop > lastScrollTop.current) {
+      scrollDirection.current = 'down';
+    } else {
+      scrollDirection.current = 'up';
+    }
+
+    lastScrollTop.current = scrollTop;
+
+    if (fetchData && !isFetching.current) {
+      if (scrollDirection.current === 'down' && !noMoreData) {
+        const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
+        const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+
+        if (prefetch) {
+          isFetching.current = true;
+          fetchData(fromRef.current + limitRef.current, limitRef.current + to.current, scrollDirection.current).then(() => {
+            to.current = limitRef.current + to.current;
+            isFetching.current = false;
+          }, () => {
+            isFetching.current = false;
+          });
+        }
+      } else {
+        if (0 >= scrollTop - scrollAt && fromRef.current !== 0 && !noNeedUpScroll) {
+          isFetching.current = true;
+          fetchData(fromRef.current - limitRef.current, to.current - limitRef.current, scrollDirection.current).then(() => {
+            to.current = to.current - limitRef.current;
+            isFetching.current = false;
+          }, () => {
+            isFetching.current = false;
+          });
+        }
+      }
+    }
+
+    if (fetchData && !noNeedUpScroll) {
+      if (fromRef.current !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+        scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
+      } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
+        scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
+      }
+    } // if (isScrollShadow) {
+    //   this.onSetScroll();
+    // }
+
+  } // setScroll(isScroll) {
+  //   let { isScroll: stateIsScroll } = this.state;
+  //   if (isScroll && !stateIsScroll) {
+  //     this.setState({ isScroll: true }, () => {
+  //       this.onClearScroll();
+  //     });
+  //   } else if (!isScroll && stateIsScroll) {
+  //     this.setState({ isScroll: false });
+  //   }
+  // }
+
+
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${customClass}`,
+    isScrollAttribute: isScrollAttribute,
+    onClick: onClick,
+    dataId: dataId,
+    eleRef: eleRef
+  }, React.Children.map(children, child => {
+    if (!child) {
+      return child;
+    }
+
+    if (child.type === CardHeader || props.childTypes && child.type === props.childTypes.cardHeader) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        isScroll
+      });
+    } else if (child.type === CardContent || props.childTypes && child.type === props.childTypes.cardContent) {
+      return /*#__PURE__*/React.createElement(Box, {
+        id: htmlId,
+        role: role,
+        flexible: true,
+        scroll: child.props.scroll,
+        preventParentScroll: child.props.preventParentScroll,
+        onScroll: onCardScroll,
+        eleRef: child.props.eleRef,
+        isScrollAttribute: child.props.isScrollAttribute,
+        dataId: child.props.dataId,
+        shrink: child.props.shrink,
+        className: child.props.customClass,
+        dataSelectorId: child.props.dataSelectorId
+      }, child.props.children);
+    }
+
+    return child;
+  }));
+}
+Card.propTypes = Card_propTypes;
+Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
+//   Card.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }
+
+export function CardFooter(props) {
+  let {
+    children,
+    dataId,
+    customClass,
+    dataSelectorId
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    className: `${customClass}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, children);
+}
+CardFooter.propTypes = CardFooter_propTypes;
+CardFooter.defaultProps = CardFooter_defaultProps;

package/es/v1/Card/index.js

@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { CardHeader } from './Card';
+export { CardContent } from './Card';
+export { CardFooter } from './Card';

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

@@ -0,0 +1,25 @@
+export const Card_defaultProps = {
+  isScrollAttribute: false,
+  // isScrollShadow: true,
+  onClick: null,
+  scrollAt: '10',
+  a11y: {},
+  isPercentageScroll: false
+};
+export const CardHeader_defaultProps = {
+  dataId: 'CardHeader',
+  customClass: '',
+  dataSelectorId: 'cardHeader'
+};
+export const CardContent_defaultProps = {
+  isScrollAttribute: false,
+  scroll: 'vertical',
+  dataId: 'CardContent',
+  customClass: '',
+  dataSelectorId: 'cardContent'
+};
+export const CardFooter_defaultProps = {
+  dataId: 'CardFooter',
+  customClass: '',
+  dataSelectorId: 'cardFooter'
+};

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

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+export const CardHeader_propTypes = {
+  children: PropTypes.element,
+  dataId: PropTypes.string,
+  isScroll: PropTypes.bool,
+  customClass: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};
+export const CardContent_propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  isScrollAttribute: PropTypes.bool,
+  onScroll: PropTypes.func,
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  shrink: PropTypes.bool,
+  customClass: PropTypes.string,
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both']),
+  dataSelectorId: PropTypes.string
+};
+export const Card_propTypes = {
+  childTypes: PropTypes.object,
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  fetchData: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  from: PropTypes.number,
+  isScrollAttribute: PropTypes.bool,
+  // isScrollShadow: PropTypes.bool,
+  limit: PropTypes.number,
+  noMoreData: PropTypes.bool,
+  noNeedUpScroll: PropTypes.bool,
+  onClick: PropTypes.func,
+  onScroll: PropTypes.func,
+  scrollAt: PropTypes.string,
+  customClass: PropTypes.string,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  }),
+  isPercentageScroll: PropTypes.bool,
+  eleRef: PropTypes.func
+};
+export const CardFooter_propTypes = {
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};