@coorpacademy/components 11.32.42 → 11.32.44

package/lib/molecule/icon-picker-modal/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _size2 = _interopRequireDefault(require("lodash/fp/size"));
+
+var _slice2 = _interopRequireDefault(require("lodash/fp/slice"));
+
+var _values2 = _interopRequireDefault(require("lodash/fp/values"));
+
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+
+var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
+
+var _map2 = _interopRequireDefault(require("lodash/fp/map"));
+
+var _entries2 = _interopRequireDefault(require("lodash/fp/entries"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _proSolidSvgIcons = require("@fortawesome/pro-solid-svg-icons");
+
+var _baseModal = _interopRequireDefault(require("../base-modal"));
+
+var _selectIcon = _interopRequireDefault(require("../../atom/select-icon"));
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _searchForm = _interopRequireDefault(require("../search-form"));
+
+var _colors = require("../../variables/colors");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+var _useIconSearch = _interopRequireDefault(require("./use-icon-search"));
+
+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 }; }
+
+const ICONS_PER_LOAD = 48;
+
+const IconPickerModal = (props, context) => {
+  const {
+    isOpen,
+    onCancel,
+    onConfirm,
+    onClose
+  } = props;
+  const {
+    translate
+  } = context;
+  const [selectedIcon, setSelectedIcon] = (0, _react.useState)(null);
+  const [displayedIcons, setDisplayedIcons] = (0, _react.useState)([]);
+  const [currentIndex, setCurrentIndex] = (0, _react.useState)(0);
+  const allIcons = (0, _react.useMemo)(() => (0, _pipe2.default)(_values2.default, (0, _map2.default)((0, _get2.default)('iconName')))(_proSolidSvgIcons.fas), []);
+  const {
+    searchValue,
+    searchResults,
+    handleSearch,
+    handleReset
+  } = (0, _useIconSearch.default)(allIcons);
+  const handleCancel = (0, _react.useCallback)(() => {
+    onCancel();
+  }, [onCancel]);
+  const handleClose = (0, _react.useCallback)(() => {
+    onClose();
+  }, [onClose]);
+  const handleIconClick = (0, _react.useCallback)(iconName => () => {
+    setSelectedIcon(prevSelectedIcon => prevSelectedIcon === iconName ? null : iconName);
+  }, []);
+  const loadMoreIcons = (0, _react.useCallback)(() => {
+    const nextIndex = currentIndex + ICONS_PER_LOAD;
+    const newIcons = (0, _slice2.default)(currentIndex, nextIndex, searchResults);
+    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);
+    setCurrentIndex(nextIndex);
+  }, [currentIndex, searchResults]);
+  (0, _react.useEffect)(() => {
+    setDisplayedIcons(() => (0, _slice2.default)(0, ICONS_PER_LOAD, searchResults));
+    setCurrentIndex(ICONS_PER_LOAD);
+  }, [searchResults]);
+  const handleScroll = (0, _react.useCallback)(event => {
+    const {
+      scrollTop,
+      clientHeight,
+      scrollHeight
+    } = event.currentTarget;
+
+    if (scrollHeight - scrollTop <= clientHeight + 1) {
+      loadMoreIcons();
+    }
+  }, [loadMoreIcons]);
+  const icons = (0, _react.useMemo)(() => (0, _pipe2.default)(_entries2.default, (0, _map2.default)(([index, iconName]) => /*#__PURE__*/_react.default.createElement(_selectIcon.default, {
+    key: `icon-${index}`,
+    size: "responsive",
+    "data-name": `icon-${index}`,
+    "aria-label": iconName,
+    faIcon: iconName,
+    onClick: handleIconClick(iconName),
+    options: {
+      isSelected: selectedIcon === iconName
+    }
+  })))(displayedIcons), [displayedIcons, selectedIcon, handleIconClick]);
+  const footer = (0, _react.useMemo)(() => {
+    return {
+      cancelButton: {
+        onCancel: handleCancel,
+        label: translate('cancel')
+      },
+      confirmButton: {
+        onConfirm: () => {
+          onConfirm(selectedIcon);
+          setSelectedIcon(null);
+          onClose();
+        },
+        label: translate('confirm'),
+        iconName: 'plus',
+        disabled: selectedIcon === null,
+        color: _colors.COLORS.cm_primary_blue
+      }
+    };
+  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);
+  if (!isOpen) return null;
+  return /*#__PURE__*/_react.default.createElement(_baseModal.default, {
+    title: translate('icon_picker_title'),
+    description: translate('icon_picker_description'),
+    isOpen: isOpen,
+    onClose: handleClose,
+    onScroll: handleScroll,
+    footer: footer,
+    headerIcon: {
+      name: 'arrows-rotate',
+      backgroundColor: '#D6E6FF'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.iconPicker
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.searchWrapper
+  }, /*#__PURE__*/_react.default.createElement(_searchForm.default, {
+    search: {
+      placeholder: translate('search_place_holder'),
+      value: searchValue,
+      onChange: handleSearch
+    },
+    onReset: handleReset,
+    dataTestId: "search-input"
+  })), searchValue && (0, _size2.default)(searchResults) === 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.emptySearchResultContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.emptySearchResultTitle
+  }, translate('empty_search_result_title', {
+    searchValue
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.emptySearchResultDescription
+  }, translate('empty_search_result_description')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.emptySearchResultClearSearch,
+    onClick: handleReset
+  }, translate('empty_search_result_clear_search'))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.iconsListWrapper
+  }, icons))));
+};
+
+IconPickerModal.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+IconPickerModal.propTypes = process.env.NODE_ENV !== "production" ? {
+  isOpen: _propTypes.default.bool,
+  onCancel: _propTypes.default.func,
+  onConfirm: _propTypes.default.func,
+  onClose: _propTypes.default.func
+} : {};
+var _default = IconPickerModal;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/icon-picker-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","selectedIcon","setSelectedIcon","useState","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","useMemo","fas","searchValue","searchResults","handleSearch","handleReset","useIconSearch","handleCancel","useCallback","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","prevIcons","useEffect","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","index","isSelected","footer","cancelButton","label","confirmButton","disabled","color","COLORS","cm_primary_blue","name","backgroundColor","style","iconPicker","searchWrapper","placeholder","value","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onCancel, onConfirm, onClose} = props;\n  const {translate} = context;\n\n  const [selectedIcon, setSelectedIcon] = useState(null);\n  const [displayedIcons, setDisplayedIcons] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')))(fas), []);\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleIconClick = useCallback(\n    iconName => () => {\n      setSelectedIcon(prevSelectedIcon => (prevSelectedIcon === iconName ? null : iconName));\n    },\n    []\n  );\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => (\n          <SelectIcon\n            key={`icon-${index}`}\n            size=\"responsive\"\n            data-name={`icon-${index}`}\n            aria-label={iconName}\n            faIcon={iconName}\n            onClick={handleIconClick(iconName)}\n            options={{isSelected: selectedIcon === iconName}}\n          />\n        ))\n      )(displayedIcons),\n    [displayedIcons, selectedIcon, handleIconClick]\n  );\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm(selectedIcon);\n          setSelectedIcon(null);\n          onClose();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: selectedIcon === null,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      footer={footer}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        {\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleReset}\n                dataTestId=\"search-input\"\n              />\n            </div>\n            {searchValue && size(searchResults) === 0 ? (\n              <div className={style.emptySearchResultContainer}>\n                <div className={style.emptySearchResultTitle}>\n                  {translate('empty_search_result_title', {searchValue})}\n                </div>\n                <div className={style.emptySearchResultDescription}>\n                  {translate('empty_search_result_description')}\n                </div>\n                <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n                  {translate('empty_search_result_clear_search')}\n                </div>\n              </div>\n            ) : (\n              <div className={style.iconsListWrapper}>{icons}</div>\n            )}\n          </>\n        }\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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"}

package/lib/molecule/icon-picker-modal/style.css

@@ -0,0 +1,61 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_primary_blue from colors;
+@value cm_grey_500 from colors;
+
+.iconPicker {
+  height: 485px;
+  width: calc(71vw - 68px);
+  max-width: 612px;
+}
+
+.searchWrapper {
+  border-radius: 12px;
+  width: 300px;
+  background-color: cm_grey_100;
+  margin-bottom: 20px;
+}
+
+.iconsListWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  margin: auto;
+  gap: 12px;
+  overflow: visible;
+}
+
+.emptySearchResultContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.emptySearchResultTitle {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+
+.emptySearchResultDescription {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 16px;
+}
+
+.emptySearchResultClearSearch {
+  color: #0061FF;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+@media mobile {
+  .iconPicker {
+    width: 100%;
+  }
+}

package/lib/molecule/icon-picker-modal/use-icon-search.d.ts

@@ -0,0 +1,9 @@
+export function filterIcons(query: any, allIcons: any): any;
+export default useIconSearch;
+declare function useIconSearch(allIcons: any): {
+    searchValue: string;
+    searchResults: any;
+    handleSearch: (value: any) => void;
+    handleReset: () => void;
+};
+//# sourceMappingURL=use-icon-search.d.ts.map

package/lib/molecule/icon-picker-modal/use-icon-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-icon-search.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/use-icon-search.js"],"names":[],"mappings":"AAGO,4DAEN;;AACD;;;;;EAiCC"}

package/lib/molecule/icon-picker-modal/use-icon-search.js

@@ -0,0 +1,52 @@
+"use strict";
+
+exports.__esModule = true;
+exports.filterIcons = exports.default = void 0;
+
+var _toLower2 = _interopRequireDefault(require("lodash/fp/toLower"));
+
+var _includes2 = _interopRequireDefault(require("lodash/fp/includes"));
+
+var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
+
+var _filter2 = _interopRequireDefault(require("lodash/fp/filter"));
+
+var _debounce2 = _interopRequireDefault(require("lodash/fp/debounce"));
+
+var _react = require("react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const filterIcons = (query, allIcons) => {
+  return query ? (0, _filter2.default)((0, _pipe2.default)(_toLower2.default, (0, _includes2.default)((0, _toLower2.default)(query))), allIcons) : allIcons;
+};
+
+exports.filterIcons = filterIcons;
+
+const useIconSearch = allIcons => {
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [searchResults, setSearchResults] = (0, _react.useState)(allIcons);
+  const updateSearchResults = (0, _react.useCallback)(query => {
+    const results = filterIcons(query, allIcons);
+    setSearchResults(results);
+  }, [allIcons]);
+  const debouncedSearch = (0, _react.useMemo)(() => (0, _debounce2.default)(300, updateSearchResults), [updateSearchResults]);
+  const handleSearch = (0, _react.useCallback)(value => {
+    setSearchValue(value);
+    debouncedSearch(value);
+  }, [debouncedSearch]);
+  const handleReset = (0, _react.useCallback)(() => {
+    setSearchValue('');
+    updateSearchResults('');
+  }, [updateSearchResults]);
+  return {
+    searchValue,
+    searchResults,
+    handleSearch,
+    handleReset
+  };
+};
+
+var _default = useIconSearch;
+exports.default = _default;
+//# sourceMappingURL=use-icon-search.js.map

package/lib/molecule/icon-picker-modal/use-icon-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-icon-search.js","names":["filterIcons","query","allIcons","useIconSearch","searchValue","setSearchValue","useState","searchResults","setSearchResults","updateSearchResults","useCallback","results","debouncedSearch","useMemo","handleSearch","value","handleReset"],"sources":["../../../src/molecule/icon-picker-modal/use-icon-search.js"],"sourcesContent":["import {useState, useCallback, useMemo} from 'react';\nimport {debounce, filter, pipe, includes, toLower} from 'lodash/fp';\n\nexport const filterIcons = (query, allIcons) => {\n  return query ? filter(pipe(toLower, includes(toLower(query))), allIcons) : allIcons;\n};\nconst useIconSearch = allIcons => {\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(allIcons);\n\n  const updateSearchResults = useCallback(\n    query => {\n      const results = filterIcons(query, allIcons);\n      setSearchResults(results);\n    },\n    [allIcons]\n  );\n\n  const debouncedSearch = useMemo(() => debounce(300, updateSearchResults), [updateSearchResults]);\n\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      debouncedSearch(value);\n    },\n    [debouncedSearch]\n  );\n\n  const handleReset = useCallback(() => {\n    setSearchValue('');\n    updateSearchResults('');\n  }, [updateSearchResults]);\n\n  return {\n    searchValue,\n    searchResults,\n    handleSearch,\n    handleReset\n  };\n};\n\nexport default useIconSearch;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;;;AAGO,MAAMA,WAAW,GAAG,CAACC,KAAD,EAAQC,QAAR,KAAqB;EAC9C,OAAOD,KAAK,GAAG,sBAAO,uCAAc,wBAAS,uBAAQA,KAAR,CAAT,CAAd,CAAP,EAAgDC,QAAhD,CAAH,GAA+DA,QAA3E;AACD,CAFM;;;;AAGP,MAAMC,aAAa,GAAGD,QAAQ,IAAI;EAChC,MAAM,CAACE,WAAD,EAAcC,cAAd,IAAgC,IAAAC,eAAA,EAAS,EAAT,CAAtC;EACA,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAF,eAAA,EAASJ,QAAT,CAA1C;EAEA,MAAMO,mBAAmB,GAAG,IAAAC,kBAAA,EAC1BT,KAAK,IAAI;IACP,MAAMU,OAAO,GAAGX,WAAW,CAACC,KAAD,EAAQC,QAAR,CAA3B;IACAM,gBAAgB,CAACG,OAAD,CAAhB;EACD,CAJyB,EAK1B,CAACT,QAAD,CAL0B,CAA5B;EAQA,MAAMU,eAAe,GAAG,IAAAC,cAAA,EAAQ,MAAM,wBAAS,GAAT,EAAcJ,mBAAd,CAAd,EAAkD,CAACA,mBAAD,CAAlD,CAAxB;EAEA,MAAMK,YAAY,GAAG,IAAAJ,kBAAA,EACnBK,KAAK,IAAI;IACPV,cAAc,CAACU,KAAD,CAAd;IACAH,eAAe,CAACG,KAAD,CAAf;EACD,CAJkB,EAKnB,CAACH,eAAD,CALmB,CAArB;EAQA,MAAMI,WAAW,GAAG,IAAAN,kBAAA,EAAY,MAAM;IACpCL,cAAc,CAAC,EAAD,CAAd;IACAI,mBAAmB,CAAC,EAAD,CAAnB;EACD,CAHmB,EAGjB,CAACA,mBAAD,CAHiB,CAApB;EAKA,OAAO;IACLL,WADK;IAELG,aAFK;IAGLO,YAHK;IAILE;EAJK,CAAP;AAMD,CAjCD;;eAmCeb,a"}

package/lib/molecule/progress-wrapper/index.js

@@ -75,7 +75,7 @@ const DetailSection = ({
   });
 
   const LockedTag = /*#__PURE__*/_react.default.createElement(_tag.default, {
-    label: "Locked",
+    label: translate('locked'),
     size: "S",
     icon: {
       position: 'left',

package/lib/molecule/progress-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["uncappedMap","convert","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","isTypeStars","DownloadButton","target","href","backgroundColor","color","width","position","faIcon","name","size","customStyle","padding","LockedTag","iconName","iconColor","preset","style","detailsInfo","detailsInfoText","detailsTitle","img","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","container","titleContainer","statscontainer","stats","statsNumber","customProgressBar","COLORS","positive","statsProgressionMobile","details","section","commonDetailSectionPropTypes","PropTypes","oneOf","string","number","contextTypes","Provider","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, downloadUrl, stars}, context) => {\n  const {translate} = context;\n  const isTypeStars = type === 'stars';\n\n  const DownloadButton = (\n    <ButtonLink\n      label={translate('download')}\n      link={{\n        target: '_blank',\n        href: downloadUrl\n      }}\n      data-name={`download-${type}-button`}\n      aria-label={`download ${type} button`}\n      customStyle={{backgroundColor: '#F1F6FE', color: '#0061FF', width: 'auto'}}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'download',\n          color: '#0061FF',\n          size: 14,\n          customStyle: {padding: 0}\n        }\n      }}\n      disabled={isLocked}\n    />\n  );\n\n  const LockedTag = (\n    <Tag\n      label=\"Locked\"\n      size=\"S\"\n      icon={{\n        position: 'left',\n        iconName: 'lock',\n        iconColor: '#515161',\n        preset: 's',\n        customStyle: {padding: 0}\n      }}\n    />\n  );\n\n  return isTypeStars ? (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n          {isLocked ? LockedTag : null}\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n          {isLocked ? LockedTag : null}\n        </div>\n\n        <div className={style.buttonContainer}>{DownloadButton}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocale = translate('modules_completed_mandatory');\n  const isLocked = progression !== 100;\n\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      aria-label=\"progress wrapper section\"\n    >\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div>\n            <span className={style.statsNumber} data-name=\"progress-stats\">\n              {`${\n                completedModules > mandatoryModules ? mandatoryModules : completedModules\n              } / ${mandatoryModules}`}\n            </span>\n            {mandatoryCompletedModulesLocale}\n          </div>\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.positive}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {isEmpty(sections) ? null : (\n        <div className={style.details}>\n          {uncappedMap(\n            (section, index) => (\n              <DetailSection\n                {...section}\n                isLocked={isLocked}\n                key={`${section.type}-${index}`}\n                index={index}\n              />\n            ),\n            sections\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["uncappedMap","convert","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","isTypeStars","DownloadButton","target","href","backgroundColor","color","width","position","faIcon","name","size","customStyle","padding","LockedTag","iconName","iconColor","preset","style","detailsInfo","detailsInfoText","detailsTitle","img","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","container","titleContainer","statscontainer","stats","statsNumber","customProgressBar","COLORS","positive","statsProgressionMobile","details","section","commonDetailSectionPropTypes","PropTypes","oneOf","string","number","contextTypes","Provider","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, downloadUrl, stars}, context) => {\n  const {translate} = context;\n  const isTypeStars = type === 'stars';\n\n  const DownloadButton = (\n    <ButtonLink\n      label={translate('download')}\n      link={{\n        target: '_blank',\n        href: downloadUrl\n      }}\n      data-name={`download-${type}-button`}\n      aria-label={`download ${type} button`}\n      customStyle={{backgroundColor: '#F1F6FE', color: '#0061FF', width: 'auto'}}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'download',\n          color: '#0061FF',\n          size: 14,\n          customStyle: {padding: 0}\n        }\n      }}\n      disabled={isLocked}\n    />\n  );\n\n  const LockedTag = (\n    <Tag\n      label={translate('locked')}\n      size=\"S\"\n      icon={{\n        position: 'left',\n        iconName: 'lock',\n        iconColor: '#515161',\n        preset: 's',\n        customStyle: {padding: 0}\n      }}\n    />\n  );\n\n  return isTypeStars ? (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n          {isLocked ? LockedTag : null}\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n          {isLocked ? LockedTag : null}\n        </div>\n\n        <div className={style.buttonContainer}>{DownloadButton}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocale = translate('modules_completed_mandatory');\n  const isLocked = progression !== 100;\n\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      aria-label=\"progress wrapper section\"\n    >\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div>\n            <span className={style.statsNumber} data-name=\"progress-stats\">\n              {`${\n                completedModules > mandatoryModules ? mandatoryModules : completedModules\n              } / ${mandatoryModules}`}\n            </span>\n            {mandatoryCompletedModulesLocale}\n          </div>\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.positive}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {isEmpty(sections) ? null : (\n        <div className={style.details}>\n          {uncappedMap(\n            (section, index) => (\n              <DetailSection\n                {...section}\n                isLocked={isLocked}\n                key={`${section.type}-${index}`}\n                index={index}\n              />\n            ),\n            sections\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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"}

package/lib/molecule/progress-wrapper/style.css

@@ -108,6 +108,7 @@
 
 .img {
   height: 100%;
+  max-width: 160px;
 }
 
 .buttonContainer {

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

@@ -62,6 +62,7 @@ declare namespace BrandLearningPriorities {
             }> | PropTypes.InferProps<{
                 title: PropTypes.Validator<string>;
                 subtitle: PropTypes.Requireable<string>;
+                provider: PropTypes.Requireable<string>;
                 selected: PropTypes.Requireable<boolean>;
                 selectedColor: PropTypes.Requireable<string>;
                 dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -114,6 +115,17 @@ declare namespace BrandLearningPriorities {
                 'aria-label': PropTypes.Requireable<string>;
                 contentType: PropTypes.Requireable<string>;
                 id: PropTypes.Requireable<string>;
+                leftIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                    iconName: PropTypes.Requireable<string>;
+                    iconColor: PropTypes.Requireable<string>;
+                    backgroundColor: PropTypes.Requireable<string>;
+                    borderRadius: PropTypes.Requireable<string>;
+                    preset: PropTypes.Requireable<string>;
+                    gradientBackground: PropTypes.Requireable<boolean>;
+                    size: PropTypes.Requireable<number>;
+                    wrapperSize: PropTypes.Requireable<number>;
+                }>>;
+                editAsIcon: PropTypes.Requireable<boolean>;
             }> | PropTypes.InferProps<{
                 'aria-label': PropTypes.Requireable<string>;
                 id: PropTypes.Requireable<string>;

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

@@ -1,10 +1,11 @@
 export default ListItem;
-declare function ListItem({ buttonLink, secondButtonLink, bulletPointMenuButton, tags, title, selected, selectedColor, subtitle, dataColumns, order, "aria-label": ariaLabel, disabled, contentType, isBulkStyle, isOverflowHidden, onClick }: {
+declare function ListItem({ buttonLink, secondButtonLink, bulletPointMenuButton, tags, title, provider, selected, selectedColor, subtitle, dataColumns, order, "aria-label": ariaLabel, disabled, contentType, isBulkStyle, isOverflowHidden, onClick, leftIcon, editAsIcon }: {
     buttonLink: any;
     secondButtonLink: any;
     bulletPointMenuButton: any;
     tags: any;
     title: any;
+    provider: any;
     selected: any;
     selectedColor: any;
     subtitle: any;
@@ -16,6 +17,8 @@ declare function ListItem({ buttonLink, secondButtonLink, bulletPointMenuButton,
     isBulkStyle?: boolean | undefined;
     isOverflowHidden?: boolean | undefined;
     onClick?: import("lodash/fp").LodashNoop | undefined;
+    leftIcon: any;
+    editAsIcon?: boolean | undefined;
 }, context: any): JSX.Element;
 declare namespace ListItem {
     namespace contextTypes {
@@ -45,6 +48,7 @@ declare namespace ListItem {
     const propTypes: {
         title: PropTypes.Validator<string>;
         subtitle: PropTypes.Requireable<string>;
+        provider: PropTypes.Requireable<string>;
         selected: PropTypes.Requireable<boolean>;
         selectedColor: PropTypes.Requireable<string>;
         dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -97,6 +101,17 @@ declare namespace ListItem {
         'aria-label': PropTypes.Requireable<string>;
         contentType: PropTypes.Requireable<string>;
         id: PropTypes.Requireable<string>;
+        leftIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            iconName: PropTypes.Requireable<string>;
+            iconColor: PropTypes.Requireable<string>;
+            backgroundColor: PropTypes.Requireable<string>;
+            borderRadius: PropTypes.Requireable<string>;
+            preset: PropTypes.Requireable<string>;
+            gradientBackground: PropTypes.Requireable<boolean>;
+            size: PropTypes.Requireable<number>;
+            wrapperSize: PropTypes.Requireable<number>;
+        }>>;
+        editAsIcon: PropTypes.Requireable<boolean>;
     };
 }
 import PropTypes from "prop-types";

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":";AAaA;;;;;;;;;;;;;;;;;8BAwGC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAaA;;;;;;;;;;;;;;;;;;;;8BAiJC"}

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

@@ -29,6 +29,8 @@ var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 
 var _bulletPointMenuButton = _interopRequireDefault(require("../../molecule/bullet-point-menu-button"));
 
+var _colors = _interopRequireDefault(require("../../variables/colors"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,6 +43,7 @@ const ListItem = ({
   bulletPointMenuButton,
   tags,
   title,
+  provider,
   selected,
   selectedColor,
   subtitle,
@@ -51,7 +54,9 @@ const ListItem = ({
   contentType,
   isBulkStyle = false,
   isOverflowHidden = false,
-  onClick = _noop2.default
+  onClick = _noop2.default,
+  leftIcon,
+  editAsIcon = false
 }, context) => {
   const {
     skin
@@ -89,6 +94,24 @@ const ListItem = ({
     className: _style.default.order,
     "aria-label": ariaLabel
   }, order + 1) : null;
+  const handleButtonLinkClick = buttonLink?.onClick || _noop2.default;
+
+  const handleRenderButtonLink = () => {
+    if (editAsIcon && buttonLink) {
+      return /*#__PURE__*/_react.default.createElement(_icon.default, {
+        iconName: buttonLink.icon?.type || 'edit',
+        onClick: handleButtonLinkClick,
+        className: _style.default.editIcon
+      });
+    }
+
+    if (buttonLink) {
+      return /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonLink);
+    }
+
+    return null;
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_style.default.wrapper, isBulkStyle && _style.default.gridLayout, subtitle && _style.default.withSubtitle, disabled && _style.default.disabled, onClick !== _noop2.default && !disabled && _style.default.cursorPointer),
     onClick: !disabled ? onClick : undefined,
@@ -96,21 +119,37 @@ const ListItem = ({
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_style.default.dataColumnsWrapper, isOverflowHidden && _style.default.hiddenOverflowX)
   }, isPublished && contentType === 'certification' ? orderView : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.leftSection
+  }, leftIcon ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: leftIcon.iconName,
+    gradientBackground: leftIcon.gradientBackground || true,
+    iconColor: leftIcon.iconColor || primarySelectedColor,
+    preset: leftIcon.preset || 'xl',
+    borderRadius: leftIcon.borderRadius || '25%'
+  })) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.titleWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.titleProviderWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.title,
     title: title
-  }, title, subtitle ? /*#__PURE__*/_react.default.createElement("div", {
+  }, title), provider ? /*#__PURE__*/_react.default.createElement(_tag.default, {
+    label: provider,
+    type: "default",
+    className: _style.default.providerTag
+  }) : null), subtitle ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.subtitle
   }, subtitle) : null), dataColumnsView), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.settings
   }, tagsView, selected ? /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: "circle-check",
     iconColor: primarySelectedColor,
-    backgroundColor: '#ffffff',
+    backgroundColor: _colors.default.white,
     size: {
       faSize: 16,
       wrapperSize: 16
     }
-  }) : null, buttonLink ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonLink) : null, secondButtonLink ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, secondButtonLink) : null, !(0, _isEmpty2.default)(bulletPointMenuButton) ? /*#__PURE__*/_react.default.createElement(_bulletPointMenuButton.default, bulletPointMenuButton) : null));
+  }) : null, handleRenderButtonLink(), secondButtonLink ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, secondButtonLink) : null, !(0, _isEmpty2.default)(bulletPointMenuButton) ? /*#__PURE__*/_react.default.createElement(_bulletPointMenuButton.default, bulletPointMenuButton) : null));
 };
 
 ListItem.contextTypes = {
@@ -120,6 +159,7 @@ ListItem.contextTypes = {
 ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string.isRequired,
   subtitle: _propTypes.default.string,
+  provider: _propTypes.default.string,
   selected: _propTypes.default.bool,
   selectedColor: _propTypes.default.string,
   dataColumns: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -171,7 +211,18 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   order: _propTypes.default.number,
   'aria-label': _propTypes.default.string,
   contentType: _propTypes.default.string,
-  id: _propTypes.default.string
+  id: _propTypes.default.string,
+  leftIcon: _propTypes.default.shape({
+    iconName: _propTypes.default.string,
+    iconColor: _propTypes.default.string,
+    backgroundColor: _propTypes.default.string,
+    borderRadius: _propTypes.default.string,
+    preset: _propTypes.default.string,
+    gradientBackground: _propTypes.default.bool,
+    size: _propTypes.default.number,
+    wrapperSize: _propTypes.default.number
+  }),
+  editAsIcon: _propTypes.default.bool
 } : {};
 var _default = ListItem;
 exports.default = _default;