@coorpacademy/components 11.32.19 → 11.32.20-alpha.32

package/es/organism/brand-learning-priorities/index.d.ts

@@ -0,0 +1,170 @@
+export default BrandLearningPriorities;
+declare function BrandLearningPriorities(props: any, context: any): JSX.Element;
+declare namespace BrandLearningPriorities {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const content: PropTypes.Requireable<PropTypes.InferProps<{
+            items: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
+                title: PropTypes.Validator<string>;
+                onUp: PropTypes.Requireable<(...args: any[]) => any>;
+                onDown: PropTypes.Requireable<(...args: any[]) => any>;
+                display: PropTypes.Requireable<PropTypes.InferProps<{
+                    title: PropTypes.Requireable<string>;
+                    name: PropTypes.Requireable<string>;
+                    id: PropTypes.Requireable<string>;
+                    value: PropTypes.Requireable<boolean>;
+                    disabled: PropTypes.Requireable<boolean>;
+                    onChange: PropTypes.Requireable<(...args: any[]) => any>;
+                    description: PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
+                    'aria-label': PropTypes.Requireable<string>;
+                    modified: PropTypes.Requireable<boolean>;
+                    titlePosition: PropTypes.Requireable<string>;
+                    theme: PropTypes.Requireable<string>;
+                    details: PropTypes.Requireable<string>;
+                    'data-name': PropTypes.Requireable<string>;
+                    requiredSelection: PropTypes.Requireable<boolean>;
+                }>>;
+                contentTypes: PropTypes.Requireable<PropTypes.InferProps<{
+                    modified: PropTypes.Requireable<boolean>;
+                    color: PropTypes.Requireable<string>;
+                    theme: PropTypes.Requireable<string>;
+                    className: PropTypes.Requireable<string>;
+                    list: PropTypes.Requireable<(PropTypes.InferProps<{
+                        color: PropTypes.Requireable<string>;
+                        value: PropTypes.Validator<string>;
+                        name: PropTypes.Requireable<string>;
+                        theme: PropTypes.Requireable<string>;
+                        checked: PropTypes.Requireable<boolean>;
+                        label: PropTypes.Requireable<string>;
+                        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+                    }> | null | undefined)[]>;
+                    onChange: PropTypes.Requireable<(...args: any[]) => any>;
+                }>>;
+            }> | PropTypes.InferProps<{
+                'aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                    title: PropTypes.Requireable<string>;
+                    author: PropTypes.Requireable<string>;
+                    modules: PropTypes.Requireable<string>;
+                    position: PropTypes.Requireable<string>;
+                }>>;
+                image: PropTypes.Requireable<string>;
+                badgeList: PropTypes.Requireable<(PropTypes.InferProps<{
+                    category: PropTypes.Requireable<string>;
+                    label: PropTypes.Requireable<string>;
+                }> | null | undefined)[]>;
+                title: PropTypes.Requireable<string>;
+                author: PropTypes.Requireable<string>;
+                position: PropTypes.Requireable<number>;
+                id: PropTypes.Requireable<string>;
+            }> | PropTypes.InferProps<{
+                title: PropTypes.Validator<string>;
+                subtitle: PropTypes.Requireable<string>;
+                selected: PropTypes.Requireable<boolean>;
+                dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
+                    label: PropTypes.Requireable<string>;
+                    type: PropTypes.Requireable<string>;
+                    className: PropTypes.Requireable<string>;
+                }> | null | undefined)[]>;
+                buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
+                    type: PropTypes.Requireable<string>;
+                    label: PropTypes.Requireable<string>;
+                    ariaLabel: PropTypes.Requireable<string>;
+                    dataName: PropTypes.Requireable<string>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<{
+                        position: PropTypes.Requireable<string>;
+                        type: PropTypes.Requireable<string>;
+                    }>>;
+                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                }>>;
+                secondButtonLink: PropTypes.Requireable<PropTypes.InferProps<{
+                    type: PropTypes.Requireable<string>;
+                    label: PropTypes.Requireable<string>;
+                    ariaLabel: PropTypes.Requireable<string>;
+                    dataName: PropTypes.Requireable<string>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<{
+                        position: PropTypes.Requireable<string>;
+                        type: PropTypes.Requireable<string>;
+                    }>>;
+                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                }>>;
+                bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
+                    buttonAriaLabel: PropTypes.Requireable<string>;
+                    menuAriaLabel: PropTypes.Requireable<string>;
+                    buttons: PropTypes.Requireable<(PropTypes.InferProps<{
+                        'data-name': PropTypes.Requireable<string>;
+                        label: PropTypes.Requireable<string>;
+                        type: PropTypes.Requireable<string>;
+                        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                    }> | null | undefined)[]>;
+                    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                }>>;
+                tags: PropTypes.Requireable<(PropTypes.InferProps<{
+                    label: PropTypes.Requireable<string>;
+                    type: PropTypes.Requireable<string>;
+                }> | null | undefined)[]>;
+                disabled: PropTypes.Requireable<boolean>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                isBulkStyle: PropTypes.Requireable<boolean>;
+                isOverflowHidden: PropTypes.Requireable<boolean>;
+                order: PropTypes.Requireable<number>;
+                'aria-label': PropTypes.Requireable<string>;
+                contentType: PropTypes.Requireable<string>;
+                id: PropTypes.Requireable<string>;
+            }> | PropTypes.InferProps<{
+                'aria-label': PropTypes.Requireable<string>;
+                id: PropTypes.Requireable<string>;
+                priorityRef: PropTypes.Requireable<string>;
+                title: PropTypes.Requireable<string>;
+                courses: PropTypes.Requireable<number>;
+                type: PropTypes.Requireable<string>;
+                onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+            }> | null | undefined> | null | undefined)[]>;
+            onDrop: PropTypes.Requireable<(...args: any[]) => any>;
+            itemType: PropTypes.Requireable<string>;
+        }>>;
+        const priorities: PropTypes.Requireable<(PropTypes.InferProps<{
+            ref: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<string>;
+            courses: PropTypes.Requireable<number>;
+            type: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        const filters: PropTypes.Requireable<PropTypes.InferProps<{
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                count: PropTypes.Requireable<number>;
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+        }>>;
+        const isLoading: PropTypes.Requireable<boolean>;
+        const onAdd: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/organism/brand-learning-priorities/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/brand-learning-priorities/index.js"],"names":[],"mappings":";AAWA,gFAyDC"}

package/es/organism/brand-learning-priorities/index.js

@@ -0,0 +1,99 @@
+import _get from "lodash/fp/get";
+
+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, { useState, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { convert } from 'css-color-function';
+import Provider from '../../atom/provider';
+import { SelectOptionPropTypes } from '../../atom/select';
+import DraggableList from '../../molecule/draggable-list';
+import ButtonLink from '../../atom/button-link';
+import LearningPriorityModal from '../../molecule/learning-priority-modal';
+import style from './style.css';
+
+const BrandLearningPriorities = (props, context) => {
+  const {
+    content,
+    priorities,
+    filters,
+    isLoading,
+    onAdd
+  } = props;
+  const [openModal, setOpenModal] = useState(false);
+  const {
+    skin,
+    translate
+  } = context;
+
+  const primarySkinColor = _get('common.primary', skin);
+
+  const selectedPriorities = useMemo(() => content.items.map(priority => priority.priorityRef), [content.items]);
+  const handleOpenModal = useCallback(() => setOpenModal(true), [setOpenModal]);
+  const handleCloseModal = useCallback(() => setOpenModal(false), [setOpenModal]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement(LearningPriorityModal, {
+    isLoading: isLoading,
+    isOpen: openModal,
+    onCancel: handleCloseModal,
+    onClose: handleCloseModal,
+    onAdd: onAdd,
+    priorities: priorities,
+    filters: filters,
+    preselected: selectedPriorities
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.LPtitle
+  }, translate('learning_priorities')), /*#__PURE__*/React.createElement("div", {
+    className: style.LPdescription
+  }, translate('learning_priorities_brand_description')), /*#__PURE__*/React.createElement("div", {
+    className: style.ctaWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.priorityCount
+  }, `${content.items.length} ${translate('items')}`), /*#__PURE__*/React.createElement(ButtonLink, {
+    customStyle: {
+      backgroundColor: primarySkinColor,
+      color: '#FFFFFF',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      width: 'fit-content'
+    },
+    hoverBackgroundColor: convert(`color(${primarySkinColor} a(0.07))`),
+    hoverColor: primarySkinColor,
+    onClick: handleOpenModal,
+    label: translate('add_learning_priority'),
+    "data-name": "add-learning-priority",
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'plus',
+        backgroundColor: primarySkinColor,
+        color: '#FFFFFF',
+        size: 16
+      }
+    }
+  })), /*#__PURE__*/React.createElement(DraggableList, content));
+};
+
+BrandLearningPriorities.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+BrandLearningPriorities.propTypes = process.env.NODE_ENV !== "production" ? {
+  content: PropTypes.shape(DraggableList.propTypes),
+  priorities: PropTypes.arrayOf(PropTypes.shape({
+    ref: PropTypes.string,
+    title: PropTypes.string,
+    courses: PropTypes.number,
+    type: PropTypes.string
+  })),
+  filters: PropTypes.shape({
+    onChange: PropTypes.func,
+    options: PropTypes.arrayOf(PropTypes.shape(_extends({}, SelectOptionPropTypes, {
+      count: PropTypes.number
+    })))
+  }),
+  isLoading: PropTypes.bool,
+  onAdd: PropTypes.func
+} : {};
+export default BrandLearningPriorities;
+//# sourceMappingURL=index.js.map

package/es/organism/brand-learning-priorities/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useState","useCallback","useMemo","PropTypes","convert","Provider","SelectOptionPropTypes","DraggableList","ButtonLink","LearningPriorityModal","style","BrandLearningPriorities","props","context","content","priorities","filters","isLoading","onAdd","openModal","setOpenModal","skin","translate","primarySkinColor","selectedPriorities","items","map","priority","priorityRef","handleOpenModal","handleCloseModal","container","LPtitle","LPdescription","ctaWrapper","priorityCount","length","backgroundColor","color","transition","width","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","shape","arrayOf","ref","string","title","courses","number","type","onChange","func","options","count","bool"],"sources":["../../../src/organism/brand-learning-priorities/index.js"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport DraggableList from '../../molecule/draggable-list';\nimport ButtonLink from '../../atom/button-link';\nimport LearningPriorityModal from '../../molecule/learning-priority-modal';\nimport style from './style.css';\n\nconst BrandLearningPriorities = (props, context) => {\n  const {content, priorities, filters, isLoading, onAdd} = props;\n  const [openModal, setOpenModal] = useState(false);\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const selectedPriorities = useMemo(\n    () => content.items.map(priority => priority.priorityRef),\n    [content.items]\n  );\n\n  const handleOpenModal = useCallback(() => setOpenModal(true), [setOpenModal]);\n  const handleCloseModal = useCallback(() => setOpenModal(false), [setOpenModal]);\n  return (\n    <div className={style.container}>\n      <LearningPriorityModal\n        isLoading={isLoading}\n        isOpen={openModal}\n        onCancel={handleCloseModal}\n        onClose={handleCloseModal}\n        onAdd={onAdd}\n        priorities={priorities}\n        filters={filters}\n        preselected={selectedPriorities}\n      />\n      <div className={style.LPtitle}>{translate('learning_priorities')}</div>\n      <div className={style.LPdescription}>\n        {translate('learning_priorities_brand_description')}\n      </div>\n      <div className={style.ctaWrapper}>\n        <div className={style.priorityCount}>{`${content.items.length} ${translate('items')}`}</div>\n        <ButtonLink\n          customStyle={{\n            backgroundColor: primarySkinColor,\n            color: '#FFFFFF',\n            transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n            width: 'fit-content'\n          }}\n          hoverBackgroundColor={convert(`color(${primarySkinColor} a(0.07))`)}\n          hoverColor={primarySkinColor}\n          onClick={handleOpenModal}\n          label={translate('add_learning_priority')}\n          data-name=\"add-learning-priority\"\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'plus',\n              backgroundColor: primarySkinColor,\n              color: '#FFFFFF',\n              size: 16\n            }\n          }}\n        />\n      </div>\n      <DraggableList {...content} />\n    </div>\n  );\n};\n\nBrandLearningPriorities.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nBrandLearningPriorities.propTypes = {\n  content: PropTypes.shape(DraggableList.propTypes),\n  priorities: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      title: PropTypes.string,\n      courses: PropTypes.number,\n      type: PropTypes.string\n    })\n  ),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(\n      PropTypes.shape({\n        ...SelectOptionPropTypes,\n        count: PropTypes.number\n      })\n    )\n  }),\n  isLoading: PropTypes.bool,\n  onAdd: PropTypes.func\n};\n\nexport default BrandLearningPriorities;\n"],"mappings":"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"}

package/es/organism/brand-learning-priorities/style.css

@@ -0,0 +1,35 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_500 from colors;
+
+.container {
+  font-family: "Gilroy";
+  font-style: normal;
+}
+
+.LPtitle {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  margin-bottom: 8px;
+}
+
+.LPdescription {
+  color: cm_grey_500;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  max-width: 620px;
+  margin-bottom: 32px;
+}
+
+.ctaWrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.priorityCount {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px; 
+}

package/es/organism/list-item/index.d.ts

@@ -1,20 +1,50 @@
 export default ListItem;
-declare function ListItem({ buttonLink, secondButtonLink, bulletPointMenuButton, tags, title, dataColumns, order, "aria-label": ariaLabel, contentType, isBulkStyle, isOverflowHidden }: {
+declare function ListItem({ buttonLink, secondButtonLink, bulletPointMenuButton, tags, title, selected, subtitle, dataColumns, order, "aria-label": ariaLabel, disabled, contentType, isBulkStyle, isOverflowHidden, onClick }: {
     buttonLink: any;
     secondButtonLink: any;
     bulletPointMenuButton: any;
     tags: any;
     title: any;
+    selected: any;
+    subtitle: any;
     dataColumns: any;
     order: any;
     "aria-label": any;
+    disabled?: boolean | undefined;
     contentType: any;
     isBulkStyle?: boolean | undefined;
     isOverflowHidden?: boolean | undefined;
-}): JSX.Element;
+    onClick?: import("lodash/fp").LodashNoop | undefined;
+}, context: any): JSX.Element;
 declare namespace ListItem {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
     const propTypes: {
         title: PropTypes.Validator<string>;
+        subtitle: PropTypes.Requireable<string>;
+        selected: PropTypes.Requireable<boolean>;
         dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
@@ -57,6 +87,8 @@ declare namespace ListItem {
             label: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
+        disabled: PropTypes.Requireable<boolean>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
         isBulkStyle: PropTypes.Requireable<boolean>;
         isOverflowHidden: PropTypes.Requireable<boolean>;
         order: PropTypes.Requireable<number>;

package/es/organism/list-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAUA;;;;;;;;;;;;gBA6DC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAaA;;;;;;;;;;;;;;;;8BAsGC"}

package/es/organism/list-item/index.js

@@ -1,9 +1,17 @@
+import _get from "lodash/fp/get";
+import _noop from "lodash/fp/noop";
 import _map from "lodash/fp/map";
 import _isEmpty from "lodash/fp/isEmpty";
+
+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 PropTypes from 'prop-types';
+import { convert } from 'css-color-function';
 import classnames from 'classnames';
+import Provider from '../../atom/provider';
 import Tag from '../../atom/tag';
+import Icon from '../../atom/icon';
 import ButtonLink from '../../atom/button-link';
 import BulletPointMenuButton from '../../molecule/bullet-point-menu-button'; // eslint-disable-next-line css-modules/no-unused-class
 
@@ -15,52 +23,86 @@ const ListItem = ({
   bulletPointMenuButton,
   tags,
   title,
+  selected,
+  subtitle,
   dataColumns,
   order,
   'aria-label': ariaLabel,
+  disabled = false,
   contentType,
   isBulkStyle = false,
-  isOverflowHidden = false
-}) => {
-  let isPublished = false;
+  isOverflowHidden = false,
+  onClick = _noop
+}, context) => {
+  const {
+    skin
+  } = context;
 
-  const tagsView = _map.convert({
+  const primarySkinColor = _get('common.primary', skin);
+
+  const mapUncapped = _map.convert({
     cap: false
-  })((tag, index) => {
+  });
+
+  let isPublished = false;
+  const selectedStyle = selected ? {
+    backgroundColor: convert(`color(${primarySkinColor} a(0.07))`)
+  } : {};
+  const tagSelectedStyle = selected ? {
+    backgroundColor: convert(`color(${primarySkinColor} a(0.15))`),
+    color: primarySkinColor
+  } : {};
+  const tagsView = mapUncapped((tag, index) => {
     isPublished = tag.type === 'success';
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: style.tag
-    }, /*#__PURE__*/React.createElement(Tag, tag));
+    }, /*#__PURE__*/React.createElement(Tag, _extends({}, tag, {
+      customStyle: tagSelectedStyle
+    })));
   })(tags);
-
-  const dataColumnsView = _map.convert({
-    cap: false
-  })((dataColumn, index) => {
+  const dataColumnsView = mapUncapped((dataColumn, index) => {
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: style[dataColumn.className]
     }, dataColumn.type ? /*#__PURE__*/React.createElement(Tag, dataColumn) : dataColumn.label);
   })(dataColumns);
-
   const orderView = order !== null && order !== undefined ? /*#__PURE__*/React.createElement("div", {
     className: style.order,
     "aria-label": ariaLabel
   }, order + 1) : null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(style.wrapper, isBulkStyle && style.gridLayout)
+    className: classnames(style.wrapper, isBulkStyle && style.gridLayout, subtitle && style.withSubtitle, disabled && style.disabled),
+    onClick: !disabled ? onClick : undefined,
+    style: selectedStyle
   }, /*#__PURE__*/React.createElement("div", {
     className: classnames(style.dataColumnsWrapper, isOverflowHidden && style.hiddenOverflowX)
   }, isPublished && contentType === 'certification' ? orderView : null, /*#__PURE__*/React.createElement("div", {
     className: style.title,
     title: title
-  }, title), dataColumnsView), /*#__PURE__*/React.createElement("div", {
+  }, title, /*#__PURE__*/React.createElement("div", {
+    className: style.subtitle
+  }, subtitle)), dataColumnsView), /*#__PURE__*/React.createElement("div", {
     className: style.settings
-  }, tagsView, buttonLink ? /*#__PURE__*/React.createElement(ButtonLink, buttonLink) : null, secondButtonLink ? /*#__PURE__*/React.createElement(ButtonLink, secondButtonLink) : null, !_isEmpty(bulletPointMenuButton) ? /*#__PURE__*/React.createElement(BulletPointMenuButton, bulletPointMenuButton) : null));
+  }, tagsView, selected ? /*#__PURE__*/React.createElement(Icon, {
+    iconName: "circle-check",
+    iconColor: primarySkinColor,
+    backgroundColor: '#ffffff',
+    size: {
+      faSize: 16,
+      wrapperSize: 16
+    }
+  }) : null, buttonLink ? /*#__PURE__*/React.createElement(ButtonLink, buttonLink) : null, secondButtonLink ? /*#__PURE__*/React.createElement(ButtonLink, secondButtonLink) : null, !_isEmpty(bulletPointMenuButton) ? /*#__PURE__*/React.createElement(BulletPointMenuButton, bulletPointMenuButton) : null));
 };
 
+ListItem.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
 ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string,
+  selected: PropTypes.bool,
   dataColumns: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default']),
@@ -103,6 +145,8 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
     label: PropTypes.string,
     type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default'])
   })),
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
   isBulkStyle: PropTypes.bool,
   isOverflowHidden: PropTypes.bool,
   order: PropTypes.number,

package/es/organism/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Tag","ButtonLink","BulletPointMenuButton","style","ListItem","buttonLink","secondButtonLink","bulletPointMenuButton","tags","title","dataColumns","order","ariaLabel","contentType","isBulkStyle","isOverflowHidden","isPublished","tagsView","convert","cap","tag","index","type","dataColumnsView","dataColumn","className","label","orderView","undefined","wrapper","gridLayout","dataColumnsWrapper","hiddenOverflowX","settings","propTypes","string","isRequired","arrayOf","shape","oneOf","dataName","icon","position","onClick","func","buttonAriaLabel","menuAriaLabel","buttons","bool","number","id"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst ListItem = ({\n  buttonLink,\n  secondButtonLink,\n  bulletPointMenuButton,\n  tags,\n  title,\n  dataColumns,\n  order,\n  'aria-label': ariaLabel,\n  contentType,\n  isBulkStyle = false,\n  isOverflowHidden = false\n}) => {\n  let isPublished = false;\n\n  const tagsView = map.convert({cap: false})((tag, index) => {\n    isPublished = tag.type === 'success';\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} />\n      </div>\n    );\n  })(tags);\n\n  const dataColumnsView = map.convert({cap: false})((dataColumn, index) => {\n    return (\n      <div key={index} className={style[dataColumn.className]}>\n        {dataColumn.type ? <Tag {...dataColumn} /> : dataColumn.label}\n      </div>\n    );\n  })(dataColumns);\n\n  const orderView =\n    order !== null && order !== undefined ? (\n      <div className={style.order} aria-label={ariaLabel}>\n        {order + 1}\n      </div>\n    ) : null;\n\n  return (\n    <div className={classnames(style.wrapper, isBulkStyle && style.gridLayout)}>\n      <div\n        className={classnames(style.dataColumnsWrapper, isOverflowHidden && style.hiddenOverflowX)}\n      >\n        {isPublished && contentType === 'certification' ? orderView : null}\n        <div className={style.title} title={title}>\n          {title}\n        </div>\n        {dataColumnsView}\n      </div>\n\n      <div className={style.settings}>\n        {tagsView}\n        {buttonLink ? <ButtonLink {...buttonLink} /> : null}\n        {secondButtonLink ? <ButtonLink {...secondButtonLink} /> : null}\n        {!isEmpty(bulletPointMenuButton) ? (\n          <BulletPointMenuButton {...bulletPointMenuButton} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nListItem.propTypes = {\n  title: PropTypes.string.isRequired,\n  dataColumns: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default']),\n      className: PropTypes.oneOf(['cell', 'title'])\n    })\n  ),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  secondButtonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default'])\n    })\n  ),\n  isBulkStyle: PropTypes.bool,\n  isOverflowHidden: PropTypes.bool,\n  order: PropTypes.number,\n  'aria-label': PropTypes.string,\n  contentType: PropTypes.string,\n  id: PropTypes.string\n};\n\nexport default ListItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","convert","classnames","Provider","Tag","Icon","ButtonLink","BulletPointMenuButton","style","ListItem","buttonLink","secondButtonLink","bulletPointMenuButton","tags","title","selected","subtitle","dataColumns","order","ariaLabel","disabled","contentType","isBulkStyle","isOverflowHidden","onClick","context","skin","primarySkinColor","mapUncapped","cap","isPublished","selectedStyle","backgroundColor","tagSelectedStyle","color","tagsView","tag","index","type","dataColumnsView","dataColumn","className","label","orderView","undefined","wrapper","gridLayout","withSubtitle","dataColumnsWrapper","hiddenOverflowX","settings","faSize","wrapperSize","contextTypes","childContextTypes","translate","propTypes","string","isRequired","bool","arrayOf","shape","oneOf","dataName","icon","position","func","buttonAriaLabel","menuAriaLabel","buttons","number","id"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map, noop, get} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst ListItem = (\n  {\n    buttonLink,\n    secondButtonLink,\n    bulletPointMenuButton,\n    tags,\n    title,\n    selected,\n    subtitle,\n    dataColumns,\n    order,\n    'aria-label': ariaLabel,\n    disabled = false,\n    contentType,\n    isBulkStyle = false,\n    isOverflowHidden = false,\n    onClick = noop\n  },\n  context\n) => {\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n  const mapUncapped = map.convert({cap: false});\n  let isPublished = false;\n\n  const selectedStyle = selected\n    ? {\n        backgroundColor: convert(`color(${primarySkinColor} a(0.07))`)\n      }\n    : {};\n\n  const tagSelectedStyle = selected\n    ? {\n        backgroundColor: convert(`color(${primarySkinColor} a(0.15))`),\n        color: primarySkinColor\n      }\n    : {};\n\n  const tagsView = mapUncapped((tag, index) => {\n    isPublished = tag.type === 'success';\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} customStyle={tagSelectedStyle} />\n      </div>\n    );\n  })(tags);\n\n  const dataColumnsView = mapUncapped((dataColumn, index) => {\n    return (\n      <div key={index} className={style[dataColumn.className]}>\n        {dataColumn.type ? <Tag {...dataColumn} /> : dataColumn.label}\n      </div>\n    );\n  })(dataColumns);\n\n  const orderView =\n    order !== null && order !== undefined ? (\n      <div className={style.order} aria-label={ariaLabel}>\n        {order + 1}\n      </div>\n    ) : null;\n\n  return (\n    <div\n      className={classnames(\n        style.wrapper,\n        isBulkStyle && style.gridLayout,\n        subtitle && style.withSubtitle,\n        disabled && style.disabled\n      )}\n      onClick={!disabled ? onClick : undefined}\n      style={selectedStyle}\n    >\n      <div\n        className={classnames(style.dataColumnsWrapper, isOverflowHidden && style.hiddenOverflowX)}\n      >\n        {isPublished && contentType === 'certification' ? orderView : null}\n        <div className={style.title} title={title}>\n          {title}\n          <div className={style.subtitle}>{subtitle}</div>\n        </div>\n        {dataColumnsView}\n      </div>\n\n      <div className={style.settings}>\n        {tagsView}\n        {selected ? (\n          <Icon\n            iconName=\"circle-check\"\n            iconColor={primarySkinColor}\n            backgroundColor={'#ffffff'}\n            size={{faSize: 16, wrapperSize: 16}}\n          />\n        ) : null}\n        {buttonLink ? <ButtonLink {...buttonLink} /> : null}\n        {secondButtonLink ? <ButtonLink {...secondButtonLink} /> : null}\n        {!isEmpty(bulletPointMenuButton) ? (\n          <BulletPointMenuButton {...bulletPointMenuButton} />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nListItem.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nListItem.propTypes = {\n  title: PropTypes.string.isRequired,\n  subtitle: PropTypes.string,\n  selected: PropTypes.bool,\n  dataColumns: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default']),\n      className: PropTypes.oneOf(['cell', 'title'])\n    })\n  ),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  secondButtonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['success', 'failure', 'warning', 'progress', 'default'])\n    })\n  ),\n  disabled: PropTypes.bool,\n  onClick: PropTypes.func,\n  isBulkStyle: PropTypes.bool,\n  isOverflowHidden: PropTypes.bool,\n  order: PropTypes.number,\n  'aria-label': PropTypes.string,\n  contentType: PropTypes.string,\n  id: PropTypes.string\n};\n\nexport default ListItem;\n"],"mappings":"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"}

package/es/organism/list-item/style.css

@@ -24,11 +24,16 @@
   grid-template-columns: 60% auto;
 }
 
+.disabled {
+  opacity: 0.5;
+}
+
 .title {
   color: cm_grey_900;
   display: flex;
+  flex-direction: column;
   height: 56px;
-  align-items: center;
+  justify-content: center;
   flex: 2 0 0;
   font-family: Gilroy;
   font-size: 16px;
@@ -42,6 +47,13 @@
   white-space: nowrap;
 }
 
+.subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: cm_grey_400;
+}
+
 .settings {
   align-items: center;
   display: flex;
@@ -96,4 +108,12 @@
 
 .hiddenOverflowX:hover {
   overflow-x: auto;
+}
+
+.withSubtitle {
+  padding: 8px 16px;
+
+  .setting {
+    gap: 8px;
+  }
 }

package/es/organism/list-items/index.d.ts

@@ -27,6 +27,8 @@ declare namespace ListItems {
                 download: PropTypes.Requireable<boolean>;
                 target: PropTypes.Requireable<string>;
             }>>;
+            hoverBackgroundColor: PropTypes.Requireable<string>;
+            hoverColor: PropTypes.Requireable<string>;
             disabled: PropTypes.Requireable<boolean>;
             className: PropTypes.Requireable<string>;
             customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
@@ -52,6 +54,8 @@ declare namespace ListItems {
         content: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
             items: PropTypes.Requireable<(PropTypes.InferProps<{
                 title: PropTypes.Validator<string>;
+                subtitle: PropTypes.Requireable<string>;
+                selected: PropTypes.Requireable<boolean>;
                 dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
                     label: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
@@ -94,6 +98,8 @@ declare namespace ListItems {
                     label: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
                 }> | null | undefined)[]>;
+                disabled: PropTypes.Requireable<boolean>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 isBulkStyle: PropTypes.Requireable<boolean>;
                 isOverflowHidden: PropTypes.Requireable<boolean>;
                 order: PropTypes.Requireable<number>;
@@ -159,6 +165,8 @@ declare namespace ListItems {
                     download: PropTypes.Requireable<boolean>;
                     target: PropTypes.Requireable<string>;
                 }>>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
+                hoverColor: PropTypes.Requireable<string>;
                 disabled: PropTypes.Requireable<boolean>;
                 className: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;