@zohodesk/components 1.4.15 → 1.4.16

package/es/ListItem/ListItemWithCheckBox.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import ListContainer from "./ListContainer";
+import { ListItemWithCheckBoxDefaultProps } from "./props/defaultProps";
+import { ListItemWithCheckBox_Props } from "./props/propTypes";
+import CheckBox from "../CheckBox/CheckBox";
+import { Box, Container } from "../Layout";
+import style from "./ListItem.module.css";
+export default class ListItemWithCheckBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onClick = this.onClick.bind(this);
+    this.getRef = this.getRef.bind(this);
+    this.onHover = this.onHover.bind(this);
+  }
+
+  getRef(ele) {
+    this.ele = ele;
+    let {
+      index,
+      getRef
+    } = this.props;
+    getRef && getRef(ele, index);
+  }
+
+  onClick(e) {
+    let {
+      onClick,
+      id,
+      value,
+      index
+    } = this.props;
+    onClick && onClick(id, value, index, e);
+  }
+
+  onHover(e) {
+    let {
+      onHover,
+      id,
+      value,
+      index
+    } = this.props;
+    onHover && onHover(id, value, index, e);
+  }
+
+  render() {
+    let {
+      size,
+      active,
+      highlight,
+      value,
+      checked,
+      autoHover,
+      palette,
+      dataId,
+      dataSelectorId,
+      title,
+      isDisabled,
+      disableTitle,
+      a11y,
+      customClass,
+      customProps,
+      needMultiLineText,
+      secondaryValue,
+      lhsAlignContent,
+      lhsJustifyContent
+    } = this.props;
+    const listA11y = {
+      role: 'option',
+      ...a11y
+    };
+    let {
+      ListItemProps = {},
+      ContainerProps = {}
+    } = customProps;
+    let {
+      customListItem = '',
+      customCheckBox = '',
+      customLabel = ''
+    } = customClass;
+    return /*#__PURE__*/React.createElement(ListContainer, {
+      a11y: listA11y,
+      size: size,
+      palette: palette,
+      highlight: highlight,
+      isDisabled: isDisabled,
+      active: active,
+      autoHover: autoHover,
+      customClass: customListItem,
+      dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
+      dataSelectorId: dataSelectorId,
+      onClick: this.onClick,
+      onMouseOver: this.onHover,
+      eleRef: this.getRef,
+      disableTitle: disableTitle,
+      title: null,
+      customProps: ListItemProps,
+      ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      dataId: `${dataId ? dataId : value}_checkBox`
+    }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+    }, /*#__PURE__*/React.createElement(CheckBox, {
+      checked: checked,
+      a11y: {
+        ariaHidden: true
+      },
+      customClass: {
+        customCheckBox: customCheckBox,
+        customLabel: customLabel
+      }
+    }))), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : title,
+      className: needMultiLineText ? style.multiLineValue : style.value
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
+    }, secondaryValue) : null)));
+  }
+
+}
+ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;
+ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props; // if (__DOCS__) {
+//   ListItemWithCheckBox.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItemWithIcon.js

@@ -0,0 +1,158 @@
+/**** Libraries ****/
+import React from 'react';
+import { Box, Container } from "../Layout";
+import { Icon } from '@zohodesk/icons';
+import ListContainer from "./ListContainer";
+import { ListItemWithIconDefaultProps } from "./props/defaultProps";
+import { ListItemWithIcon_Props } from "./props/propTypes";
+/**** CSS ****/
+
+import style from "./ListItem.module.css";
+export default class ListItemWithIcon extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+    this.getRef = this.getRef.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+  }
+
+  getRef(ele) {
+    this.ele = ele;
+    let {
+      index,
+      getRef,
+      id
+    } = this.props;
+    getRef && getRef(ele, index, id);
+  }
+
+  handleClick(e) {
+    let {
+      onClick,
+      id,
+      value,
+      index
+    } = this.props;
+    onClick && onClick(id, value, index, e);
+  }
+
+  handleMouseEnter(e) {
+    let {
+      onMouseEnter,
+      id,
+      value,
+      index
+    } = this.props;
+    onMouseEnter && onMouseEnter(id, value, index, e);
+  }
+
+  render() {
+    let {
+      size,
+      active,
+      highlight,
+      value,
+      iconName,
+      iconSize,
+      autoHover,
+      palette,
+      iconClass,
+      dataId,
+      dataSelectorId,
+      title,
+      needTick,
+      isLink,
+      href,
+      target,
+      needBorder,
+      isDisabled,
+      disableTitle,
+      a11y,
+      customClass,
+      customProps,
+      needMultiLineText,
+      secondaryValue,
+      lhsAlignContent,
+      lhsJustifyContent
+    } = this.props;
+    let {
+      ListItemProps = {},
+      ContainerProps = {}
+    } = customProps;
+    const listA11y = {
+      ariaHidden: true,
+      role: 'option',
+      ...a11y
+    };
+    let {
+      ariaHidden
+    } = listA11y;
+    let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
+    return /*#__PURE__*/React.createElement(ListContainer, {
+      a11y: listA11y,
+      size: size,
+      palette: palette,
+      highlight: highlight,
+      isDisabled: isDisabled,
+      active: active,
+      autoHover: autoHover,
+      needTick: needTick,
+      needBorder: needBorder,
+      customClass: customClass,
+      dataId: dataIdString,
+      dataSelectorId: dataSelectorId,
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: this.handleClick,
+      onMouseOver: this.handleMouseEnter,
+      eleRef: this.getRef,
+      disableTitle: disableTitle,
+      title: null,
+      customProps: ListItemProps,
+      ...ContainerProps
+    }, iconName && /*#__PURE__*/React.createElement(Box, {
+      "aria-hidden": true,
+      align: lhsAlignContent,
+      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
+    }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+    }, /*#__PURE__*/React.createElement(Icon, {
+      iconClass: iconClass,
+      name: iconName,
+      size: iconSize
+    }))), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
+      className: iconClass
+    }) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
+      className: needMultiLineText ? style.multiLineValue : style.value,
+      "data-title": isDisabled ? null : title,
+      dataId: `${dataIdString}_Text`
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
+    }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+      className: style.tickIcon,
+      "aria-hidden": ariaHidden,
+      dataId: `${dataIdString}_tickIcon`,
+      dataSelectorId: `${dataSelectorId}_tickIcon`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-ticknew",
+      size: "8"
+    })) : null);
+  }
+
+}
+ListItemWithIcon.defaultProps = ListItemWithIconDefaultProps;
+ListItemWithIcon.propTypes = ListItemWithIcon_Props; // if (__DOCS__) {
+//   ListItemWithIcon.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItemWithRadio.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import Radio from "../Radio/Radio";
+import { Box, Container } from "../Layout";
+import ListContainer from "./ListContainer";
+import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
+import { ListItemWithRadio_Props } from "./props/propTypes";
+import style from "./ListItem.module.css";
+export default class ListItemWithRadio extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onClick = this.onClick.bind(this);
+    this.getRef = this.getRef.bind(this);
+    this.onHover = this.onHover.bind(this);
+  }
+
+  getRef(ele) {
+    this.ele = ele;
+    let {
+      index,
+      getRef
+    } = this.props;
+    getRef && getRef(ele, index);
+  }
+
+  onClick(e) {
+    let {
+      onClick,
+      id,
+      value,
+      index
+    } = this.props;
+    onClick && onClick(id, value, index, e);
+  }
+
+  onHover(e) {
+    let {
+      onHover,
+      id,
+      value,
+      index
+    } = this.props;
+    onHover && onHover(id, value, index, e);
+  }
+
+  render() {
+    let {
+      size,
+      active,
+      highlight,
+      value,
+      checked,
+      autoHover,
+      palette,
+      id,
+      dataId,
+      dataSelectorId,
+      title,
+      isDisabled,
+      disableTitle,
+      a11y,
+      customClass,
+      customProps,
+      needMultiLineText,
+      secondaryValue,
+      lhsAlignContent,
+      lhsJustifyContent
+    } = this.props;
+    let {
+      ListItemProps = {},
+      ContainerProps = {}
+    } = customProps;
+    const listA11y = {
+      role: 'option',
+      ...a11y
+    };
+    let {
+      customListItem = '',
+      customRadio = '',
+      customRadioWrap = ''
+    } = customClass;
+    return /*#__PURE__*/React.createElement(ListContainer, {
+      a11y: listA11y,
+      size: size,
+      palette: palette,
+      highlight: highlight,
+      isDisabled: isDisabled,
+      active: active,
+      autoHover: autoHover,
+      customClass: customListItem,
+      dataId: dataId,
+      dataSelectorId: dataSelectorId,
+      onClick: this.onClick,
+      onMouseOver: this.onHover,
+      eleRef: this.getRef,
+      disableTitle: disableTitle,
+      title: null,
+      customProps: ListItemProps,
+      ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
+      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      dataId: `${dataId}_radio`
+    }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+    }, /*#__PURE__*/React.createElement(Radio, {
+      checked: checked,
+      id: id,
+      a11y: {
+        ariaHidden: true
+      },
+      customClass: {
+        customRadio: customRadio,
+        customRadioWrap: customRadioWrap
+      }
+    }))), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": disableTitle ? null : title,
+      className: needMultiLineText ? style.multiLineValue : style.value
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
+    }, secondaryValue) : null)));
+  }
+
+}
+ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;
+ListItemWithRadio.propTypes = ListItemWithRadio_Props; // if (__DOCS__) {
+//   ListItemWithRadio.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/__tests__/ListContainer.spec.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ListContainer from "../ListContainer";
+describe('ListContainer', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListContainer with Align Base Line', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      align: 'baseline'
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ListItem/__tests__/ListItem.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ListItem from "../ListItem";
+describe('ListItem', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ListItem/__tests__/ListItemWithAvatar.spec.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ListItemWithAvatar from "../ListItemWithAvatar";
+describe('ListItemWithAvatar', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      secondaryValue: "secondaryValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue text and LHS align start', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue  text and LHS align center', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue  text and LHS align end', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ListItemWithCheckBox from "../ListItemWithCheckBox";
+describe('ListItemWithCheckBox', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      secondaryValue: "secondaryValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue text and LHS align start', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue  text and LHS align center', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue  text and LHS align end', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ListItem/__tests__/ListItemWithIcon.spec.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ListItemWithIcon from "../ListItemWithIcon";
+describe('ListItemWithIcon', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      secondaryValue: "secondaryValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue text and LHS align start', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue  text and LHS align center', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue  text and LHS align end', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ListItem/__tests__/ListItemWithRadio.spec.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ListItemWithRadio from "../ListItemWithRadio";
+describe('ListItemWithRadio', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      secondaryValue: "secondaryValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue text and LHS align start', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue  text and LHS align center', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue  text and LHS align end', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListContainer ListContainer with Align Base Line 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir baseline"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;