@zohodesk/components 1.2.3 → 1.2.5

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;

package/es/v1/Card/Card.js

@@ -0,0 +1,271 @@
+import React, { Component } from 'react';
+import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from '../../Card/props/propTypes';
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from '../../Card/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 class CardHeader extends Component {
+  constructor(props) {
+    super(props);
+    this.getCardHeaderDom = this.getCardHeaderDom.bind(this);
+    this.cardHeader = null;
+  }
+
+  getCardHeaderDom(ele) {
+    this.cardHeader = ele;
+  }
+
+  setScrollClassName() {
+    if (!this.cardHeader) {
+      return null;
+    }
+  }
+
+  render() {
+    let {
+      isScroll,
+      children,
+      dataId,
+      dataSelectorId,
+      customClass
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
+      eleRef: this.getCardHeaderDom,
+      dataId: dataId,
+      dataSelectorId: dataSelectorId
+    }, children);
+  }
+
+}
+CardHeader.propTypes = CardHeader_propTypes;
+CardHeader.defaultProps = CardHeader_defaultProps;
+export class CardContent extends Component {
+  render() {
+    let {
+      onScroll,
+      eleRef,
+      children,
+      scroll,
+      isScrollAttribute,
+      dataId,
+      dataSelectorId,
+      shrink,
+      customClass,
+      preventParentScroll
+    } = this.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 class Card extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isScroll: false
+    };
+    let {
+      from,
+      limit
+    } = props;
+    this.from = from;
+    this.limit = limit;
+    this.to = from + 3 * limit;
+    this.isFetching = false;
+    this.lastScrollTop = 0;
+    this.onScroll = this.onScroll.bind(this); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
+    //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.from !== nextProps.from) {
+      this.from = nextProps.from;
+    }
+  }
+
+  onScroll(e) {
+    let scrollContainerObj = e.currentTarget;
+    let {
+      scrollHeight
+    } = scrollContainerObj;
+    let {
+      scrollTop
+    } = scrollContainerObj;
+    let {
+      offsetHeight
+    } = scrollContainerObj;
+    let {
+      onScroll
+    } = this.props;
+    onScroll && onScroll(e);
+    let {
+      fetchData,
+      noMoreData,
+      scrollAt,
+      noNeedUpScroll,
+      // isScrollShadow,
+      isPercentageScroll
+    } = this.props;
+
+    if (scrollTop > this.lastScrollTop) {
+      this.scrollDirection = 'down';
+    } else {
+      this.scrollDirection = 'up';
+    }
+
+    this.lastScrollTop = scrollTop;
+
+    if (fetchData && !this.isFetching) {
+      if (this.scrollDirection === 'down' && !noMoreData) {
+        const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
+        const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+
+        if (prefetch) {
+          this.isFetching = true;
+          fetchData(this.from + this.limit, this.limit + this.to, this.scrollDirection).then(() => {
+            this.to = this.limit + this.to;
+            this.isFetching = false;
+          }, () => {
+            this.isFetching = false;
+          });
+        }
+      } else {
+        if (0 >= scrollTop - scrollAt && this.from !== 0 && !noNeedUpScroll) {
+          this.isFetching = true;
+          fetchData(this.from - this.limit, this.to - this.limit, this.scrollDirection).then(() => {
+            this.to = this.to - this.limit;
+            this.isFetching = false;
+          }, () => {
+            this.isFetching = false;
+          });
+        }
+      }
+    }
+
+    if (fetchData && !noNeedUpScroll) {
+      if (this.from !== 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 });
+  //   }
+  // }
+
+
+  render() {
+    let {
+      onClick,
+      children,
+      isScrollAttribute,
+      dataId,
+      eleRef,
+      customClass = '',
+      htmlId,
+      a11y
+    } = this.props;
+    let {
+      isScroll
+    } = this.state;
+    let {
+      role
+    } = a11y;
+    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 || this.props.childTypes && child.type === this.props.childTypes.cardHeader) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          isScroll
+        });
+      } else if (child.type === CardContent || this.props.childTypes && child.type === this.props.childTypes.cardContent) {
+        return /*#__PURE__*/React.createElement(Box, {
+          id: htmlId,
+          role: role,
+          flexible: true,
+          scroll: child.props.scroll,
+          preventParentScroll: child.props.preventParentScroll,
+          onScroll: this.onScroll,
+          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 class CardFooter extends Component {
+  render() {
+    let {
+      children,
+      dataId,
+      customClass,
+      dataSelectorId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      className: `${customClass}`,
+      dataId: dataId,
+      dataSelectorId: dataSelectorId
+    }, children);
+  }
+
+}
+CardFooter.propTypes = CardFooter_propTypes;
+CardFooter.defaultProps = CardFooter_defaultProps;

package/es/v1/CheckBox/CheckBox.js

@@ -0,0 +1,155 @@
+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 { propTypes } from '../../CheckBox/props/propTypes';
+import { defaultProps } from '../../CheckBox/props/defaultProps';
+import Label from '../Label/Label';
+import { Container, Box } from '../Layout';
+import CssProvider from '../../Provider/CssProvider';
+import style from '../../CheckBox/CheckBox.module.css';
+
+const CheckBox = props => {
+  let {
+    id,
+    checked,
+    disabled,
+    isReadOnly,
+    disabledTitle,
+    title,
+    palette,
+    text,
+    size,
+    labelPalette,
+    labelSize,
+    isFilled,
+    isClipped,
+    getRef,
+    variant,
+    active,
+    dataId,
+    name,
+    activeStyle,
+    a11y,
+    customClass,
+    customProps,
+    dataSelectorId
+  } = props;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(!checked, e);
+  }
+
+  let {
+    CheckBoxProps = {},
+    LabelProps = {}
+  } = customProps;
+  let {
+    customCheckBox = '',
+    customLabel = '',
+    customCBoxSize = '',
+    customTickSize = ''
+  } = customClass;
+  let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
+  let toolTip = disabled ? disabledTitle : title ? title : null;
+  let {
+    ariaLabel,
+    ariaLabelledby,
+    ariaHidden,
+    role = 'checkbox',
+    ariaChecked = checked
+  } = a11y;
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    dataId: dataId,
+    isCover: false,
+    isInline: text ? false : true,
+    alignBox: "row",
+    align: "vertical",
+    className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`} 
+      ${checked ? `${style[`checked${palette}`]}` : ''} ${customCheckBox}`,
+    "data-title": toolTip,
+    onClick: isReadOnly || disabled ? null : onChange,
+    tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+    "aria-checked": ariaChecked,
+    role: role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-hidden": ariaHidden,
+    "data-selector-id": dataSelectorId || id
+  }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
+    className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    id: id,
+    ref: getRef,
+    name: name
+  }), /*#__PURE__*/React.createElement("label", {
+    className: `${style.checkbox} ${accessMode} ${style[size]} ${customCBoxSize}`
+  }, activeStyle == 'tick' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 40"
+  }, checked ? /*#__PURE__*/React.createElement("path", {
+    xmlns: "http://www.w3.org/2000/svg",
+    d: "M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44",
+    className: `${style.cbBox}`
+  }) : /*#__PURE__*/React.createElement("rect", {
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "1",
+    y: "1",
+    width: "38",
+    height: "38",
+    rx: "4",
+    className: `${style.cbBox}`
+  })), checked ? /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 44 44",
+    className: `${style.tick} ${style[`${size}tick`]} ${customTickSize} ${disabled ? CssProvider('isDisabled') : ''}`
+  }, /*#__PURE__*/React.createElement("polyline", {
+    points: "12.56 19 19.61 26.06 40.39 5.28",
+    className: `${style.tickPath} ${style.checkedtickPath}`
+  })) : null) : /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 40"
+  }, /*#__PURE__*/React.createElement("rect", {
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "1",
+    y: "1",
+    width: "38",
+    height: "38",
+    rx: "4",
+    className: `${style.cbBox}`
+  }), checked ? /*#__PURE__*/React.createElement("line", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: `${style.linePath} ${style.cbBox}`,
+    x1: "11.47",
+    y1: "20",
+    x2: "28.53",
+    y2: "20"
+  }) : null))), text && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.text
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    text: text,
+    palette: disabled ? 'disable' : labelPalette,
+    id: id,
+    size: labelSize,
+    type: "title",
+    clipped: isClipped,
+    variant: variant,
+    customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
+                          ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
+                          ${accessMode} ${customLabel}`,
+    title: toolTip ? toolTip : text
+  }, LabelProps))));
+};
+
+export default CheckBox;
+CheckBox.defaultProps = defaultProps;
+CheckBox.propTypes = propTypes; // if (__DOCS__) {
+//   CheckBox.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }