@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/v1/ListItem/ListItemWithAvatar.js

@@ -0,0 +1,143 @@
+/**** Libraries ****/
+import React, { memo } from 'react';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
+import { ListItemWithAvatarDefaultProps } from './props/defaultProps';
+import { ListItemWithAvatar_Props } from './props/propTypes';
+/**** Components ****/
+
+import Avatar from '../Avatar/Avatar';
+import AvatarTeam from '../AvatarTeam/AvatarTeam';
+import { Icon } from '@zohodesk/icons';
+/**** CSS ****/
+
+import style from '../../ListItem/ListItem.module.css';
+
+const ListItemWithAvatar = props => {
+  let {
+    size,
+    active,
+    highlight,
+    value,
+    name,
+    imgSrc,
+    autoHover,
+    isTeam,
+    palette,
+    title,
+    needTick,
+    dataId,
+    dataSelectorId,
+    initial,
+    isDisabled,
+    needBorder,
+    disableTitle,
+    needAvatarTitle,
+    avatarPalette,
+    a11y,
+    customClass,
+    customProps,
+    needMultiLineText,
+    index,
+    id,
+    getRef,
+    onClick,
+    onMouseEnter
+  } = props;
+
+  function handleRef(ele) {
+    getRef && getRef(ele, index, id);
+  }
+
+  function handleClick(e) {
+    onClick && onClick(id, value, index, e);
+  }
+
+  function handleMouseEnter(e) {
+    onMouseEnter && onMouseEnter(id, value, index, e);
+  }
+
+  let {
+    ListItemProps = {},
+    ContainerProps = {}
+  } = customProps;
+  let {
+    customListItem = '',
+    customAvatar = '',
+    customAvatarTeam = ''
+  } = customClass;
+  const listA11y = {
+    ariaHidden: true,
+    role: 'option',
+    ...a11y
+  };
+  let {
+    ariaHidden
+  } = listA11y;
+  let isDarkPalette = palette === 'dark';
+  let dataIdString = value ? value : dataId;
+  return /*#__PURE__*/React.createElement(ListContainer, {
+    a11y: listA11y,
+    size: size,
+    palette: palette,
+    highlight: highlight,
+    isDisabled: isDisabled,
+    active: active,
+    autoHover: autoHover,
+    needTick: needTick,
+    needBorder: needBorder,
+    customClass: customListItem,
+    dataId: `${dataIdString}_ListItemWithAvatar`,
+    dataSelectorId: `${dataSelectorId}`,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    eleRef: handleRef,
+    disableTitle: disableTitle,
+    title: null,
+    customProps: ListItemProps,
+    ...ContainerProps
+  }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
+    className: style.leftAvatar
+  }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
+    name: name,
+    size: "small",
+    src: imgSrc,
+    needTitle: needAvatarTitle,
+    textPalette: isDarkPalette ? 'white' : '',
+    palette: isDarkPalette ? 'info' : avatarPalette,
+    customClass: {
+      customAvatar: customAvatar,
+      customAvatarTeam: customAvatarTeam
+    }
+  }) : /*#__PURE__*/React.createElement(Avatar, {
+    name: name,
+    size: "small",
+    src: imgSrc,
+    initial: initial,
+    textPalette: isDarkPalette ? 'white' : '',
+    needTitle: needAvatarTitle,
+    palette: isDarkPalette ? 'info' : avatarPalette,
+    customClass: customAvatar
+  })) : null, value ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    "data-title": isDisabled ? null : title,
+    className: needMultiLineText ? style.multiLineValue : style.value
+  }, value) : 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);
+};
+
+ListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
+ListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
+const MemoizedListItemWithAvatar = /*#__PURE__*/memo(ListItemWithAvatar);
+MemoizedListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
+MemoizedListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
+MemoizedListItemWithAvatar.displayName = 'ListItemWithAvatar';
+export default MemoizedListItemWithAvatar;

package/es/v1/ListItem/ListItemWithCheckBox.js

@@ -0,0 +1,103 @@
+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 } from '../Layout';
+import style from '../../ListItem/ListItem.module.css';
+
+const ListItemWithCheckBox = props => {
+  let {
+    size,
+    active,
+    highlight,
+    value,
+    checked,
+    autoHover,
+    palette,
+    dataId,
+    dataSelectorId,
+    title,
+    isDisabled,
+    disableTitle,
+    a11y,
+    customClass,
+    customProps,
+    needMultiLineText,
+    id,
+    index,
+    onHover,
+    onClick,
+    getRef
+  } = props;
+
+  function handleRef(ele) {
+    getRef && getRef(ele, index);
+  }
+
+  function handleClick(e) {
+    onClick && onClick(id, value, index, e);
+  }
+
+  function handleHover(e) {
+    onHover && onHover(id, value, index, e);
+  }
+
+  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: handleClick,
+    onMouseOver: handleHover,
+    eleRef: handleRef,
+    disableTitle: disableTitle,
+    title: null,
+    customProps: ListItemProps,
+    ...ContainerProps
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.iconBox
+  }, /*#__PURE__*/React.createElement(CheckBox, {
+    checked: checked,
+    a11y: {
+      ariaHidden: true
+    },
+    customClass: {
+      customCheckBox: customCheckBox,
+      customLabel: customLabel
+    }
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    "data-title": isDisabled ? null : title,
+    className: needMultiLineText ? style.multiLineValue : style.value
+  }, value));
+};
+
+export default ListItemWithCheckBox;
+ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;
+ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props; // if (__DOCS__) {
+//   ListItemWithCheckBox.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/ListItem/ListItemWithIcon.js

@@ -0,0 +1,126 @@
+/**** Libraries ****/
+import React from 'react';
+import { Box } 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/ListItem.module.css';
+
+const ListItemWithIcon = props => {
+  let {
+    size,
+    active,
+    highlight,
+    value,
+    iconName,
+    iconSize,
+    autoHover,
+    palette,
+    iconClass,
+    dataId,
+    dataSelectorId,
+    title,
+    needTick,
+    isLink,
+    href,
+    target,
+    needBorder,
+    isDisabled,
+    disableTitle,
+    a11y,
+    customClass,
+    customProps,
+    needMultiLineText,
+    getRef,
+    onClick,
+    onMouseEnter,
+    index,
+    id
+  } = props;
+
+  function handleRef(ele) {
+    getRef && getRef(ele, index, id);
+  }
+
+  function handleClick(e) {
+    onClick && onClick(id, value, index, e);
+  }
+
+  function handleMouseEnter(e) {
+    onMouseEnter && onMouseEnter(id, value, index, e);
+  }
+
+  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: handleClick,
+    onMouseOver: handleMouseEnter,
+    eleRef: handleRef,
+    disableTitle: disableTitle,
+    title: null,
+    customProps: ListItemProps,
+    ...ContainerProps
+  }, iconName && /*#__PURE__*/React.createElement(Box, {
+    "aria-hidden": true,
+    className: style.iconBox,
+    dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconClass: iconClass,
+    name: iconName,
+    size: iconSize
+  })), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
+    className: iconClass
+  }) : null, value && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    className: needMultiLineText ? style.multiLineValue : style.value,
+    "data-title": isDisabled ? null : title,
+    dataId: `${dataIdString}_Text`
+  }, value), 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);
+};
+
+export default ListItemWithIcon;
+ListItemWithIcon.defaultProps = ListItemWithIconDefaultProps;
+ListItemWithIcon.propTypes = ListItemWithIcon_Props; // if (__DOCS__) {
+//   ListItemWithIcon.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/ListItem/ListItemWithRadio.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import Radio from '../Radio/Radio';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
+import { ListItemWithRadioDefaultProps } from './props/defaultProps';
+import { ListItemWithRadio_Props } from './props/propTypes';
+import style from '../../ListItem/ListItem.module.css';
+
+const ListItemWithRadio = props => {
+  let {
+    size,
+    active,
+    highlight,
+    value,
+    checked,
+    autoHover,
+    palette,
+    id,
+    dataId,
+    dataSelectorId,
+    title,
+    isDisabled,
+    disableTitle,
+    a11y,
+    customClass,
+    customProps,
+    needMultiLineText,
+    getRef,
+    onClick,
+    onHover,
+    index
+  } = props;
+  let {
+    ListItemProps = {},
+    ContainerProps = {}
+  } = customProps;
+  const listA11y = {
+    role: 'option',
+    ...a11y
+  };
+
+  function handleRef(ele) {
+    getRef && getRef(ele, index);
+  }
+
+  function handleClick(e) {
+    onClick && onClick(id, value, index, e);
+  }
+
+  function handleHover(e) {
+    onHover && onHover(id, value, index, e);
+  }
+
+  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: handleClick,
+    onMouseOver: handleHover,
+    eleRef: handleRef,
+    disableTitle: disableTitle,
+    title: null,
+    customProps: ListItemProps,
+    ...ContainerProps
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.iconBox
+  }, /*#__PURE__*/React.createElement(Radio, {
+    checked: checked,
+    id: id,
+    a11y: {
+      ariaHidden: true
+    },
+    customClass: {
+      customRadio: customRadio,
+      customRadioWrap: customRadioWrap
+    }
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    "data-title": disableTitle ? null : title,
+    className: needMultiLineText ? style.multiLineValue : style.value
+  }, value));
+};
+
+export default ListItemWithRadio;
+ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;
+ListItemWithRadio.propTypes = ListItemWithRadio_Props; // if (__DOCS__) {
+//   ListItemWithRadio.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/ListItem/index.js

@@ -0,0 +1,6 @@
+export { default as ListContainer } from './ListContainer';
+export { default as ListItem } from './ListItem';
+export { default as ListItemWithAvatar } from './ListItemWithAvatar';
+export { default as ListItemWithCheckBox } from './ListItemWithCheckBox';
+export { default as ListItemWithIcon } from './ListItemWithIcon';
+export { default as ListItemWithRadio } from './ListItemWithRadio';

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

@@ -0,0 +1,97 @@
+export const ListContainerDefaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  isLink: false,
+  target: 'blank',
+  needBorder: true,
+  a11y: {},
+  customClass: '',
+  customProps: {},
+  dataSelectorId: 'listContainer',
+  needMultiLineText: false
+};
+export const ListItemDefaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  id: '',
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  isLink: false,
+  target: 'blank',
+  needBorder: true,
+  a11y: {},
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'listItem',
+  needMultiLineText: false
+};
+export const ListItemWithAvatarDefaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  isTeam: false,
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  dataId: 'listAvatar',
+  needBorder: true,
+  needAvatarTitle: true,
+  a11y: {},
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'listItemWithAvatar',
+  needMultiLineText: false
+};
+export const ListItemWithCheckBoxDefaultProps = {
+  active: false,
+  autoHover: false,
+  checked: false,
+  highlight: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  a11y: {},
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'listItemWithCheckBox',
+  needMultiLineText: false
+};
+export const ListItemWithIconDefaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  iconName: '',
+  iconSize: '10',
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  needBorder: true,
+  a11y: {},
+  customClass: '',
+  customProps: {},
+  dataSelectorId: 'listItemWithIcon',
+  needMultiLineText: false
+};
+export const ListItemWithRadioDefaultProps = {
+  active: false,
+  autoHover: false,
+  checked: false,
+  highlight: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  dataId: 'listItemWithRadioComp',
+  a11y: {},
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'listItemWithRadio',
+  needMultiLineText: false
+};