@zohodesk/components 1.4.12 → 1.4.13

package/es/ListItem/ListItemWithCheckBox.js

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

@@ -1,158 +0,0 @@
-/**** 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

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

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

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

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

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

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

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

@@ -1,27 +0,0 @@
-// 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>
-`;