@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/ListItem/ListItem.js

@@ -0,0 +1,124 @@
+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); }
+
+/**** Libraries ****/
+import React from 'react';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
+import { ListItemDefaultProps } from '../../ListItem/props/defaultProps';
+import { ListItem_Props } from '../../ListItem/props/propTypes';
+/**** Components ****/
+
+import { Icon } from '@zohodesk/icons';
+/**** CSS ****/
+
+import style from '../../ListItem/ListItem.module.css';
+
+const ListItem = props => {
+  let {
+    size,
+    active,
+    highlight,
+    value,
+    autoHover,
+    palette,
+    title,
+    disableTitle,
+    needTick,
+    isLink,
+    href,
+    target,
+    needBorder,
+    isDisabled,
+    children,
+    dataId,
+    dataSelectorId,
+    a11y,
+    customClass,
+    customProps,
+    needMultiLineText,
+    getRef,
+    index,
+    id,
+    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 = '',
+    customTickIcon = ''
+  } = customClass;
+  const listA11y = {
+    ariaHidden: true,
+    role: 'option',
+    ...a11y
+  };
+  let {
+    ariaHidden
+  } = listA11y;
+  let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
+  let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
+  return /*#__PURE__*/React.createElement(ListContainer, _extends({
+    a11y: listA11y,
+    size: size,
+    palette: palette,
+    highlight: highlight,
+    isDisabled: isDisabled,
+    active: active,
+    autoHover: autoHover,
+    needTick: needTick,
+    needBorder: needBorder,
+    customClass: customListItem,
+    dataId: dataIdString,
+    dataSelectorId: `${dataSelectorId}`,
+    isLink: isLink,
+    href: href,
+    target: target,
+    disableTitle: disableTitle,
+    title: title,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    eleRef: handleRef,
+    customProps: ListItemProps
+  }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    adjust: true,
+    className: needMultiLineText ? style.multiLineValue : style.value
+  }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    adjust: true,
+    className: style.children
+  }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
+    "aria-hidden": ariaHidden,
+    dataId: `${dataIdString}_tickIcon`,
+    dataSelectorId: `${dataSelectorId}_tickIcon`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-ticknew",
+    size: "8"
+  })) : null);
+};
+
+export default ListItem;
+ListItem.defaultProps = ListItemDefaultProps;
+ListItem.propTypes = ListItem_Props; // if (__DOCS__) {
+//   ListItem.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/ListItem/ListItemWithAvatar.js

@@ -0,0 +1,145 @@
+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); }
+
+/**** Libraries ****/
+import React from 'react';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
+import { ListItemWithAvatarDefaultProps } from '../../ListItem/props/defaultProps';
+import { ListItemWithAvatar_Props } from '../../ListItem/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, _extends({
+    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);
+};
+
+export default ListItemWithAvatar;
+ListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
+ListItemWithAvatar.propTypes = ListItemWithAvatar_Props; // if (__DOCS__) {
+//   ListItemWithAvatar.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/ListItem/ListItemWithCheckBox.js

@@ -0,0 +1,104 @@
+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 ListContainer from './ListContainer';
+import { ListItemWithCheckBoxDefaultProps } from '../../ListItem/props/defaultProps';
+import { ListItemWithCheckBox_Props } from '../../ListItem/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, _extends({
+    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,127 @@
+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); }
+
+/**** Libraries ****/
+import React from 'react';
+import { Box } from '../Layout';
+import { Icon } from '@zohodesk/icons';
+import ListContainer from './ListContainer';
+import { ListItemWithIconDefaultProps } from '../../ListItem/props/defaultProps';
+import { ListItemWithIcon_Props } from '../../ListItem/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, _extends({
+    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,105 @@
+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 Radio from '../Radio/Radio';
+import { Box } from '../Layout';
+import ListContainer from './ListContainer';
+import { ListItemWithRadioDefaultProps } from '../../ListItem/props/defaultProps';
+import { ListItemWithRadio_Props } from '../../ListItem/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, _extends({
+    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';