@zohodesk/components 1.0.0-temp-47 → 1.0.0-temp-48

package/es/ListItem/ListItemWithCheckBox.js

@@ -2,9 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import ListContainer from './ListContainer';
 import CheckBox from '../CheckBox/CheckBox';
-import { Box } from '../Layout';
+import { Container, Box } from '../Layout';
+import CssProvider from '../Provider/CssProvider';
 import style from './ListItem.module.css';
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -57,35 +57,42 @@ export default class ListItemWithCheckBox extends React.Component {
       isDisabled,
       disableTitle,
       a11y,
-      customClass,
-      customProps
+      customClass
     } = this.props;
     let {
-      ListItemProps = {},
-      ContainerProps = {}
-    } = customProps;
+      role,
+      ariaSelected
+    } = a11y;
     let {
       customListItem = '',
       customCheckBox = '',
       customLabel = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
-      size: size,
-      palette: palette,
-      highlight: highlight,
-      isDisabled: isDisabled,
-      active: active,
-      autoHover: autoHover,
-      customClass: customListItem,
+    let options = {};
+
+    if (active) {
+      options['data-selected'] = active;
+    }
+
+    if (!isDisabled && active) {
+      options.tabindex = '0';
+    }
+
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      role: role,
+      "aria-selected": ariaSelected,
+      isCover: false,
+      align: "vertical",
+      alignBox: "row",
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
+        ${isDisabled ? CssProvider('isDisable') : ''} ${customListItem}`,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
-      onClick: this.onClick,
+      onClick: !isDisabled && this.onClick,
       onMouseOver: this.onHover,
       eleRef: this.getRef,
-      disableTitle: disableTitle,
-      title: null,
-      customProps: ListItemProps
-    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+      tagName: "li",
+      "data-title": isDisabled ? disableTitle : null
+    }, options), /*#__PURE__*/React.createElement(Box, {
       className: style.iconBox
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
@@ -114,8 +121,7 @@ ListItemWithCheckBox.defaultProps = {
   size: 'medium',
   value: 'List',
   a11y: {},
-  customClass: {},
-  customProps: {}
+  customClass: {}
 };
 ListItemWithCheckBox.propTypes = {
   active: PropTypes.bool,

package/es/ListItem/ListItemWithIcon.js

@@ -1,13 +1,11 @@
-import "core-js/modules/es.string.replace";
-
 function _extends() { _extends = Object.assign || 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 PropTypes from 'prop-types';
-import { Box } from '../Layout';
+import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
-import ListContainer from './ListContainer';
+import CssProvider from '../Provider/CssProvider';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -63,9 +61,6 @@ export default class ListItemWithIcon extends React.Component {
       dataId,
       title,
       needTick,
-      isLink,
-      href,
-      target,
       needBorder,
       isDisabled,
       disableTitle,
@@ -74,35 +69,38 @@ export default class ListItemWithIcon extends React.Component {
       customProps
     } = this.props;
     let {
-      ListItemProps = {},
-      ContainerProps = {}
+      ListItemProps = {}
     } = customProps;
     let {
+      role,
+      ariaSelected,
       ariaHidden = true
     } = a11y;
+    let options = {};
+
+    if (active) {
+      options['data-selected'] = active;
+    }
+
+    if (!isDisabled && active) {
+      options.tabindex = '0';
+    }
+
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
-      size: size,
-      palette: palette,
-      highlight: highlight,
-      isDisabled: isDisabled,
-      active: active,
-      autoHover: autoHover,
-      needTick: needTick,
-      needBorder: needBorder,
-      customClass: customClass,
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      role: role,
+      "aria-selected": ariaSelected,
+      isCover: false,
+      align: "vertical",
+      alignBox: "row",
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
       dataId: dataIdString,
-      isLink: isLink,
-      href: href,
-      target: target,
-      onClick: this.handleClick,
+      onClick: !isDisabled && this.handleClick,
       onMouseOver: this.handleMouseEnter,
       eleRef: this.getRef,
-      disableTitle: disableTitle,
-      title: null,
-      customProps: ListItemProps
-    }, ContainerProps), iconName && /*#__PURE__*/React.createElement(Box, {
+      tagName: "li",
+      "data-title": isDisabled ? disableTitle : null
+    }, options, ListItemProps), iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
       className: style.iconBox,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`

package/es/ListItem/ListItemWithRadio.js

@@ -3,8 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import Radio from '../Radio/Radio';
-import { Box } from '../Layout';
-import ListContainer from './ListContainer';
+import { Container, Box } from '../Layout';
+import CssProvider from '../Provider/CssProvider';
 import style from './ListItem.module.css';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
@@ -58,35 +58,43 @@ export default class ListItemWithRadio extends React.Component {
       isDisabled,
       disableTitle,
       a11y,
-      customClass,
-      customProps
+      customClass
     } = this.props;
-    let {
-      ListItemProps = {},
-      ContainerProps = {}
-    } = customProps;
     let {
       customListItem = '',
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
-      size: size,
-      palette: palette,
-      highlight: highlight,
-      isDisabled: isDisabled,
-      active: active,
-      autoHover: autoHover,
-      customClass: customListItem,
+    let {
+      role,
+      ariaSelected
+    } = a11y;
+    let options = {};
+
+    if (active) {
+      options['data-selected'] = active;
+    }
+
+    if (!isDisabled && active) {
+      options.tabindex = '0';
+    }
+
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      role: role,
+      "aria-selected": ariaSelected,
+      isCover: false,
+      align: "vertical",
+      alignBox: "row",
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''}  ${isDisabled ? CssProvider('isDisable') : ''} `,
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
+        ${isDisabled ? CssProvider('isDisable') : ''} ${customListItem}`,
       dataId: dataId,
-      onClick: this.onClick,
+      onClick: !isDisabled && this.onClick,
       onMouseOver: this.onHover,
       eleRef: this.getRef,
-      disableTitle: disableTitle,
-      title: null,
-      customProps: ListItemProps
-    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+      tagName: "li",
+      "data-title": isDisabled ? disableTitle : null
+    }, options), /*#__PURE__*/React.createElement(Box, {
       className: style.iconBox
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
@@ -117,8 +125,7 @@ ListItemWithRadio.defaultProps = {
   value: 'List',
   dataId: 'listItemWithRadioComp',
   a11y: {},
-  customClass: {},
-  customProps: {}
+  customClass: {}
 };
 ListItemWithRadio.propTypes = {
   active: PropTypes.bool,

package/es/ListItem/docs/ListItemWithAvatar__custom.docs.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import ListItemWithAvatar from '../ListItemWithAvatar';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithAvatar__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bharathi kannan",
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bharathi kannan",
+      autoHover: true,
+      needAvatarTitle: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar,
+        customAvatarTeam: style.listAvatarTeam
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar,
+        customAvatarTeam: style.listAvatarTeam
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem Disabled",
+      name: "Bk",
+      isTeam: true,
+      isDisabled: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithAvatar__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithAvatar__default.docs.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import ListItemWithAvatar from '../ListItemWithAvatar';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithAvatar__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bharathi kannan",
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bharathi kannan",
+      autoHover: true,
+      needAvatarTitle: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem Disabled",
+      name: "Bk",
+      isTeam: true,
+      isDisabled: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithAvatar__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithCheckBox__custom.docs.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import ListItemWithCheckBox from '../ListItemWithCheckBox';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithCheckBox__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithCheckBox__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithCheckBox__default.docs.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ListItemWithCheckBox from '../ListItemWithCheckBox';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithCheckBox__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithCheckBox__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}