@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

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

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card rendering the a11y 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+      role="button"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the children 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+     
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="customClass flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the dataId value 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="customdataId"
+    data-selector-id="container"
+    data-test-id="customdataId"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  />
+</DocumentFragment>
+`;
+
+exports[`Card rendering the htmlId 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+      id="customHtmlId"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the isScrollAttribute is true 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-scroll="true"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+     
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="scrollToBottomCardContent"
+      data-selector-id="cardContent"
+      data-test-id="scrollToBottomCardContent"
+    >
+      <div>
+        Hello Zam
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="scrollToTopCardContent"
+      data-selector-id="cardContent"
+      data-test-id="scrollToTopCardContent"
+    >
+      <div>
+        Hello Zam
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardContent Should render with name - both 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollboth"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - both 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleBoth"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - horizontal 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollx"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - horizontal 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleX"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - none 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollnone"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - vertical 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - vertical 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleY"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering children 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering customClass is true 1`] = `
+<DocumentFragment>
+  <div
+    class="cardCustomClass grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering isScrollAttribute is true 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering shrink is true 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOn scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  />
+</DocumentFragment>
+`;

package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardHeader rendering the Children is true 1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the customClass  1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll cardHeader-class shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  />
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the isScroll is true 1`] = `
+<DocumentFragment>
+  <div
+    class="scroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;

package/es/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/Card/props/defaultProps.js

@@ -0,0 +1,26 @@
+export const Card_defaultProps = {
+  isScrollAttribute: false,
+  // isScrollShadow: true,
+  onClick: null,
+  scrollAt: '10',
+  a11y: {},
+  isPercentageScroll: false,
+  scrollDirection: 'topToBottom'
+};
+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/Card/props/propTypes.js

@@ -0,0 +1,49 @@
+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,
+  scrollDirection: PropTypes.oneOf(['topToBottom', 'bottomToTop'])
+};
+export const CardFooter_propTypes = {
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};

package/es/CheckBox/CheckBox.js

@@ -0,0 +1,183 @@
+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 "./props/propTypes";
+import { defaultProps } from "./props/defaultProps";
+import Label from "../Label/Label";
+import Typography from "../Typography/Typography";
+import { Container, Box } from "../Layout";
+import CssProvider from "../Provider/CssProvider";
+import style from "./CheckBox.module.css";
+export default class CheckBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.handleGetContainerRef = this.handleGetContainerRef.bind(this);
+  }
+
+  onChange(e) {
+    let {
+      onChange,
+      checked
+    } = this.props;
+    onChange && onChange(!checked, e);
+  }
+
+  handleGetContainerRef(ele) {
+    let {
+      getContainerRef,
+      id
+    } = this.props;
+    getContainerRef && getContainerRef(ele, id);
+  }
+
+  render() {
+    let {
+      id,
+      checked,
+      disabled,
+      isReadOnly,
+      disabledTitle,
+      title,
+      palette,
+      text,
+      size,
+      labelPalette,
+      labelSize,
+      isFilled,
+      isClipped,
+      getRef,
+      variant,
+      active,
+      dataId,
+      name,
+      activeStyle,
+      a11y,
+      customClass,
+      customProps,
+      dataSelectorId,
+      renderRightPlaceholderNode,
+      secondaryText
+    } = this.props;
+    let {
+      CheckBoxProps = {},
+      LabelProps = {},
+      secondaryTextProps = {}
+    } = customProps;
+    let {
+      customCheckBox = '',
+      customLabel = '',
+      customCBoxSize = '',
+      customTickSize = '',
+      customSecondaryText = ''
+    } = 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;
+    const isEditable = !(isReadOnly || disabled);
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      dataId: dataId,
+      isCover: false,
+      isInline: text ? false : true,
+      alignBox: "row",
+      align: "vertical",
+      className: `${style.container} ${accessMode} ${!isEditable ? '' : `${style[palette]}`} 
+        ${checked ? `${style[`checked${palette}`]}` : ''}  ${customCheckBox}`,
+      "data-title": toolTip,
+      onClick: !isEditable ? null : this.onChange,
+      tabIndex: !isEditable || ariaHidden ? '-1' : '0',
+      "aria-checked": ariaChecked,
+      eleRef: this.handleGetContainerRef,
+      role: role,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-hidden": ariaHidden,
+      dataSelectorId: dataSelectorId || id
+    }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.boxContainer} ${secondaryText ? style.withSecondaryText : ''} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`,
+      align: secondaryText ? "start" : undefined
+    }, /*#__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 || secondaryText) && /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.labelContainer
+    }, 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)), secondaryText ? /*#__PURE__*/React.createElement(Typography, _extends({
+      $ui_size: "12",
+      $ui_lineHeight: "1.2"
+    }, secondaryTextProps, {
+      $i18n_dataTitle: toolTip ? null : secondaryText,
+      $ui_className: `${style.secondaryText} ${customSecondaryText}`
+    }), secondaryText) : null), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+  }
+
+}
+CheckBox.defaultProps = defaultProps;
+CheckBox.propTypes = propTypes; // if (__DOCS__) {
+//   CheckBox.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }