@coorpacademy/components 11.32.21 → 11.32.22

package/lib/molecule/learning-priority-setup-item/style.css

@@ -0,0 +1,47 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_50 from colors;
+@value cm_grey_700 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_400 from colors;
+
+.container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: cm_grey_50;
+    font-size: 14px;
+    margin-top: 8px;
+    padding: 8px 16px;
+    border-radius: 7px;
+}
+
+.containerInfos {
+    margin-left: 32px;
+    overflow: hidden;
+    flex-grow: 1;
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title {
+    color: cm_grey_700;
+    line-height: 22px;
+    font-family: Gilroy;
+    font-size: 16px;
+    font-weight: bold;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    text-overflow: ellipsis;
+}
+
+.courses {
+    color: cm_grey_500;
+    display: block;
+    font-family: Gilroy;
+    line-height: 20px;
+}

package/lib/molecule/title-and-checkbox-wrapper/index.d.ts

@@ -23,6 +23,9 @@ declare namespace TitleAndCheckBoxWrapper {
                 label: PropTypes.Requireable<string>;
                 type: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<string>;
+                customStyle: PropTypes.Requireable<{
+                    [x: string]: string | null | undefined;
+                }>;
             }>>;
         }>>;
         const child: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{

package/lib/molecule/title-radio-wrapper/index.d.ts

@@ -16,6 +16,9 @@ declare const TitleRadioWrapper: {
                     label: import("prop-types").Requireable<string>;
                     type: import("prop-types").Requireable<string>;
                     size: import("prop-types").Requireable<string>;
+                    customStyle: import("prop-types").Requireable<{
+                        [x: string]: string | null | undefined;
+                    }>;
                 }>>;
             }>>>;
             name: import("prop-types").Requireable<string>;

package/lib/molecule/title-radio-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/title-radio-wrapper/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAqB1D,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/title-radio-wrapper/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAqB1D,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/lib/molecule/title-radio-wrapper/types.d.ts

@@ -16,6 +16,9 @@ declare const propTypes: {
                 label: PropTypes.Requireable<string>;
                 type: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<string>;
+                customStyle: PropTypes.Requireable<{
+                    [x: string]: string | null | undefined;
+                }>;
             }>>;
         }>>>;
         name: PropTypes.Requireable<string>;

package/lib/molecule/title-radio-wrapper/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/title-radio-wrapper/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAC;AACtE,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOd,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,cAAc,EAAE,mBAAmB,CAAC;IACpC,KAAK,EAAE,OAAO,cAAc,CAAC,SAAS,GAAG,OAAO,kBAAkB,CAAC,SAAS,CAAC;IAC7E,SAAS,EAAE,iBAAiB,GAAG,gBAAgB,CAAC;CACjD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/title-radio-wrapper/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAC;AACtE,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOd,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,cAAc,EAAE,mBAAmB,CAAC;IACpC,KAAK,EAAE,OAAO,cAAc,CAAC,SAAS,GAAG,OAAO,kBAAkB,CAAC,SAAS,CAAC;IAC7E,SAAS,EAAE,iBAAiB,GAAG,gBAAgB,CAAC;CACjD,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,167 @@
+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<{
+            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/lib/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":";AAYA,gFAiGC"}

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

@@ -0,0 +1,147 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _cssColorFunction = require("css-color-function");
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _loader = _interopRequireDefault(require("../../atom/loader"));
+
+var _select = require("../../atom/select");
+
+var _draggableList = _interopRequireDefault(require("../../molecule/draggable-list"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _learningPriorityModal = _interopRequireDefault(require("../../molecule/learning-priority-modal"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const BrandLearningPriorities = (props, context) => {
+  const {
+    content,
+    priorities,
+    filters,
+    isLoading,
+    onAdd
+  } = props;
+  const {
+    items,
+    onDrop,
+    itemType
+  } = content;
+  const [itemList, setItemList] = (0, _react.useState)([...items]);
+  const [openModal, setOpenModal] = (0, _react.useState)(false);
+  const {
+    skin,
+    translate
+  } = context;
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
+  const selectedPriorities = (0, _react.useMemo)(() => items.map(priority => priority.priorityRef), [items]);
+  const handleDropItem = (0, _react.useCallback)((dragRef, dropRef) => {
+    const dragIndex = itemList.findIndex(item => item.priorityRef === dragRef);
+    const dropIndex = itemList.findIndex(item => item.priorityRef === dropRef);
+    if (dragIndex === dropIndex) return;
+    const newItems = [...itemList];
+    const [dragItem] = newItems.splice(dragIndex, 1);
+    newItems.splice(dropIndex, 0, dragItem);
+    setItemList(newItems);
+    onDrop(newItems.map(item => {
+      return {
+        type: item.type,
+        ref: item.priorityRef
+      };
+    }));
+  }, [itemList, setItemList, onDrop]);
+  const Loading = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.loading
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, null)), []);
+  (0, _react.useEffect)(() => {
+    setItemList(items);
+  }, [items]);
+  const handleOpenModal = (0, _react.useCallback)(() => setOpenModal(true), [setOpenModal]);
+  const handleCloseModal = (0, _react.useCallback)(() => setOpenModal(false), [setOpenModal]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, /*#__PURE__*/_react.default.createElement(_learningPriorityModal.default, {
+    isLoading: isLoading,
+    isOpen: openModal,
+    onCancel: handleCloseModal,
+    onClose: handleCloseModal,
+    onAdd: onAdd,
+    priorities: priorities,
+    filters: filters,
+    preselected: selectedPriorities
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.LPtitle
+  }, translate('learning_priorities')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.LPdescription
+  }, translate('learning_priorities_brand_description')), isLoading ? /*#__PURE__*/_react.default.createElement(Loading, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.ctaWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.priorityCount
+  }, `${items.length} ${translate('items')}`), /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+    customStyle: {
+      backgroundColor: primarySkinColor,
+      color: '#FFFFFF',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      width: 'fit-content'
+    },
+    hoverBackgroundColor: (0, _cssColorFunction.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.default.createElement(_draggableList.default, {
+    itemType: itemType,
+    items: itemList,
+    onDrop: handleDropItem
+  })));
+};
+
+BrandLearningPriorities.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+BrandLearningPriorities.propTypes = process.env.NODE_ENV !== "production" ? {
+  content: _propTypes.default.shape(_draggableList.default.propTypes),
+  priorities: _propTypes.default.arrayOf(_propTypes.default.shape({
+    ref: _propTypes.default.string,
+    title: _propTypes.default.string,
+    courses: _propTypes.default.number,
+    type: _propTypes.default.string
+  })),
+  filters: _propTypes.default.arrayOf(_propTypes.default.shape(_extends({}, _select.SelectOptionPropTypes, {
+    count: _propTypes.default.number
+  }))),
+  isLoading: _propTypes.default.bool,
+  onAdd: _propTypes.default.func
+} : {};
+var _default = BrandLearningPriorities;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BrandLearningPriorities","props","context","content","priorities","filters","isLoading","onAdd","items","onDrop","itemType","itemList","setItemList","useState","openModal","setOpenModal","skin","translate","primarySkinColor","selectedPriorities","useMemo","map","priority","priorityRef","handleDropItem","useCallback","dragRef","dropRef","dragIndex","findIndex","item","dropIndex","newItems","dragItem","splice","type","ref","Loading","style","loading","useEffect","handleOpenModal","handleCloseModal","container","LPtitle","LPdescription","ctaWrapper","priorityCount","length","backgroundColor","color","transition","width","convert","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","shape","DraggableList","arrayOf","string","title","courses","number","SelectOptionPropTypes","count","bool","func"],"sources":["../../../src/organism/brand-learning-priorities/index.js"],"sourcesContent":["import React, {useState, useCallback, useMemo, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\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 {items, onDrop, itemType} = content;\n  const [itemList, setItemList] = useState([...items]);\n  const [openModal, setOpenModal] = useState(false);\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const selectedPriorities = useMemo(() => items.map(priority => priority.priorityRef), [items]);\n\n  const handleDropItem = useCallback(\n    (dragRef, dropRef) => {\n      const dragIndex = itemList.findIndex(item => item.priorityRef === dragRef);\n      const dropIndex = itemList.findIndex(item => item.priorityRef === dropRef);\n\n      if (dragIndex === dropIndex) return;\n\n      const newItems = [...itemList];\n      const [dragItem] = newItems.splice(dragIndex, 1);\n      newItems.splice(dropIndex, 0, dragItem);\n\n      setItemList(newItems);\n      onDrop(\n        newItems.map(item => {\n          return {type: item.type, ref: item.priorityRef};\n        })\n      );\n    },\n    [itemList, setItemList, onDrop]\n  );\n\n  const Loading = useCallback(\n    () => (\n      <div className={style.loading}>\n        <Loader />\n      </div>\n    ),\n    []\n  );\n\n  useEffect(() => {\n    setItemList(items);\n  }, [items]);\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\n      {isLoading ? (\n        <Loading />\n      ) : (\n        <>\n          <div className={style.ctaWrapper}>\n            <div className={style.priorityCount}>{`${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 itemType={itemType} items={itemList} onDrop={handleDropItem} />\n        </>\n      )}\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.arrayOf(\n    PropTypes.shape({\n      ...SelectOptionPropTypes,\n      count: PropTypes.number\n    })\n  ),\n  isLoading: PropTypes.bool,\n  onAdd: PropTypes.func\n};\n\nexport default BrandLearningPriorities;\n"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+@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;
+}
+
+.loading {
+  position: relative;
+  height: 200px;
+}
+
+.ctaWrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.priorityCount {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px; 
+}

package/lib/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/lib/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;;;;;;;;;;;;;;;;8BAuGC"}