@coorpacademy/components 11.32.19 → 11.32.20-alpha.32

package/es/molecule/learning-priority-modal/index.d.ts

@@ -0,0 +1,33 @@
+export default LearningPriorityModal;
+declare function LearningPriorityModal(props: any, context: any): JSX.Element | null;
+declare namespace LearningPriorityModal {
+    namespace contextTypes {
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        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 preselected: PropTypes.Requireable<(string | null | undefined)[]>;
+        const isOpen: PropTypes.Requireable<boolean>;
+        const isLoading: PropTypes.Requireable<boolean>;
+        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 onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        const onAdd: PropTypes.Requireable<(...args: any[]) => any>;
+        const onClose: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/learning-priority-modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-priority-modal/index.js"],"names":[],"mappings":";AAgEA,qFAsJC"}

package/es/molecule/learning-priority-modal/index.js

@@ -0,0 +1,231 @@
+import _pick from "lodash/fp/pick";
+import _assign from "lodash/fp/assign";
+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, { useEffect, useMemo, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { convert } from 'css-color-function';
+import BaseModal from '../base-modal';
+import ListItem from '../../organism/list-item';
+import ButtonLink from '../../atom/button-link';
+import Loader from '../../atom/loader';
+import Provider from '../../atom/provider';
+import { SelectOptionPropTypes } from '../../atom/select';
+import SearchForm from '../search-form';
+import searchValueIncluded from '../../util/search-value-included';
+import style from './style.css';
+
+const FilterButton = (props, context) => {
+  const {
+    active,
+    filter,
+    itemTotal,
+    onClick
+  } = props;
+  const {
+    skin
+  } = context;
+
+  const primarySkinColor = _get('common.primary', skin);
+
+  const Content = useCallback(() => /*#__PURE__*/React.createElement("div", null, filter, /*#__PURE__*/React.createElement("span", {
+    className: active ? style.skillFilterNumber : style.skillFilterNumberInActive,
+    style: {
+      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',
+      color: active ? primarySkinColor : '#515161'
+    }
+  }, itemTotal)), [filter, itemTotal, active, primarySkinColor]);
+  const buttonProps = {
+    customStyle: {
+      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : 'transparent',
+      color: active ? primarySkinColor : '#9999A8',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      width: 'fit-content'
+    },
+    onClick,
+    content: /*#__PURE__*/React.createElement(Content, null),
+    'data-name': 'change-skill-focus-button'
+  };
+  return /*#__PURE__*/React.createElement(ButtonLink, buttonProps);
+};
+
+FilterButton.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: PropTypes.bool,
+  filter: PropTypes.string,
+  itemTotal: PropTypes.number,
+  onClick: PropTypes.func
+} : {};
+
+const LearningPriorityModal = (props, context) => {
+  const {
+    priorities,
+    preselected,
+    isOpen,
+    isLoading,
+    filters: {
+      options,
+      onChange
+    },
+    onCancel,
+    onAdd,
+    onClose
+  } = props;
+  const {
+    translate
+  } = context;
+  const [selectedPriority, setSelectedPriority] = useState('');
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResults, setSearchResults] = useState(priorities);
+  const handleCancel = useCallback(() => {
+    setSelectedPriority('');
+    onCancel();
+  }, [setSelectedPriority, onCancel]);
+  const handleClose = useCallback(() => {
+    setSelectedPriority('');
+    onClose();
+  }, [setSelectedPriority, onClose]);
+  const handleSearch = useCallback(value => {
+    setSearchValue(value);
+    setSearchResults(priorities.filter(priority => searchValueIncluded(priority.title, value)));
+  }, [priorities, setSearchValue, setSearchResults]);
+  const handleSearchReset = useCallback(() => {
+    setSearchValue('');
+    setSearchResults(priorities);
+  }, [priorities, setSearchValue, setSearchResults]);
+  useEffect(() => {
+    setSearchResults(priorities);
+  }, [priorities]);
+  const priorityList = useMemo(() => {
+    return searchResults.map(priority => {
+      const isPreSelectedPriority = preselected.some(selected => selected === priority.ref);
+      return _assign({
+        selected: isPreSelectedPriority,
+        disabled: isPreSelectedPriority
+      }, _pick(['title', 'ref', 'type', 'courses'], priority));
+    });
+  }, [searchResults, preselected]);
+  const footer = useMemo(() => {
+    return {
+      cancelButton: {
+        onCancel: handleCancel,
+        label: translate('cancel')
+      },
+      confirmButton: {
+        onConfirm: () => onAdd(selectedPriority),
+        label: translate('add'),
+        iconName: 'plus',
+        disabled: isLoading
+      }
+    };
+  }, [handleCancel, onAdd, translate, selectedPriority, isLoading]);
+  if (!isLoading && !priorities || !isOpen) return null;
+  return /*#__PURE__*/React.createElement(BaseModal, {
+    title: translate('learning_priority_modal_title'),
+    description: translate('learning_priority_modal_description'),
+    isOpen: isOpen,
+    onClose: handleClose,
+    footer: footer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.LearningPriorityContainer
+  }, isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: style.loaderContainer
+  }, /*#__PURE__*/React.createElement(Loader, {
+    className: style.loader,
+    theme: "coorpmanager"
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: style.searchWrapper
+  }, /*#__PURE__*/React.createElement(SearchForm, {
+    search: {
+      placeholder: translate('search_priority_place_holder'),
+      value: searchValue,
+      onChange: handleSearch
+    },
+    onReset: handleSearchReset
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.filterWrapper
+  }, searchResults.length > 0 ? options.map((filter, index) => {
+    const {
+      name,
+      value,
+      selected,
+      count
+    } = filter;
+
+    function handleChange() {
+      onChange(value);
+      handleSearchReset();
+    }
+
+    if (count === 0) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: style.filterButtonWrapper
+    }, /*#__PURE__*/React.createElement(FilterButton, {
+      active: selected,
+      filter: name,
+      onClick: handleChange,
+      itemTotal: count
+    }));
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: style.priorityListWrapper
+  }, priorityList.map(priority => {
+    const {
+      title,
+      ref,
+      courses,
+      type,
+      selected,
+      disabled
+    } = priority;
+
+    function handlePriorityClick() {
+      setSelectedPriority(ref);
+    }
+
+    return /*#__PURE__*/React.createElement(ListItem, {
+      title: title,
+      subtitle: `${courses} ${translate('courses')}`,
+      selected: selected || selectedPriority === ref,
+      disabled: disabled,
+      onClick: handlePriorityClick,
+      tags: [{
+        label: type,
+        type: 'default'
+      }],
+      key: ref,
+      backgroundColor: "skin"
+    });
+  })))));
+};
+
+LearningPriorityModal.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+LearningPriorityModal.propTypes = process.env.NODE_ENV !== "production" ? {
+  priorities: PropTypes.arrayOf(PropTypes.shape({
+    ref: PropTypes.string,
+    title: PropTypes.string,
+    courses: PropTypes.number,
+    type: PropTypes.string
+  })),
+  preselected: PropTypes.arrayOf(PropTypes.string),
+  isOpen: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  filters: PropTypes.shape({
+    onChange: PropTypes.func,
+    options: PropTypes.arrayOf(PropTypes.shape(_extends({}, SelectOptionPropTypes, {
+      count: PropTypes.number
+    })))
+  }),
+  onCancel: PropTypes.func,
+  onAdd: PropTypes.func,
+  onClose: PropTypes.func
+} : {};
+export default LearningPriorityModal;
+//# sourceMappingURL=index.js.map

package/es/molecule/learning-priority-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useState","useCallback","PropTypes","convert","BaseModal","ListItem","ButtonLink","Loader","Provider","SelectOptionPropTypes","SearchForm","searchValueIncluded","style","FilterButton","props","context","active","filter","itemTotal","onClick","skin","primarySkinColor","Content","skillFilterNumber","skillFilterNumberInActive","backgroundColor","color","buttonProps","customStyle","transition","width","content","contextTypes","childContextTypes","translate","propTypes","bool","string","number","func","LearningPriorityModal","priorities","preselected","isOpen","isLoading","filters","options","onChange","onCancel","onAdd","onClose","selectedPriority","setSelectedPriority","searchValue","setSearchValue","searchResults","setSearchResults","handleCancel","handleClose","handleSearch","value","priority","title","handleSearchReset","priorityList","map","isPreSelectedPriority","some","selected","ref","disabled","footer","cancelButton","label","confirmButton","onConfirm","iconName","LearningPriorityContainer","loaderContainer","loader","searchWrapper","placeholder","filterWrapper","length","index","name","count","handleChange","filterButtonWrapper","priorityListWrapper","courses","type","handlePriorityClick","arrayOf","shape"],"sources":["../../../src/molecule/learning-priority-modal/index.js"],"sourcesContent":["import React, {useEffect, useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, assign, pick} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport BaseModal from '../base-modal';\nimport ListItem from '../../organism/list-item';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport SearchForm from '../search-form';\nimport searchValueIncluded from '../../util/search-value-included';\nimport style from './style.css';\n\nconst FilterButton = (props, context) => {\n  const {active, filter, itemTotal, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span\n          className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}\n          style={{\n            backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',\n            color: active ? primarySkinColor : '#515161'\n          }}\n        >\n          {itemTotal}\n        </span>\n      </div>\n    ),\n    [filter, itemTotal, active, primarySkinColor]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : 'transparent',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  itemTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst LearningPriorityModal = (props, context) => {\n  const {\n    priorities,\n    preselected,\n    isOpen,\n    isLoading,\n    filters: {options, onChange},\n    onCancel,\n    onAdd,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [selectedPriority, setSelectedPriority] = useState('');\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(priorities);\n\n  const handleCancel = useCallback(() => {\n    setSelectedPriority('');\n    onCancel();\n  }, [setSelectedPriority, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedPriority('');\n    onClose();\n  }, [setSelectedPriority, onClose]);\n\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      setSearchResults(priorities.filter(priority => searchValueIncluded(priority.title, value)));\n    },\n    [priorities, setSearchValue, setSearchResults]\n  );\n\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    setSearchResults(priorities);\n  }, [priorities, setSearchValue, setSearchResults]);\n\n  useEffect(() => {\n    setSearchResults(priorities);\n  }, [priorities]);\n\n  const priorityList = useMemo(() => {\n    return searchResults.map(priority => {\n      const isPreSelectedPriority = preselected.some(selected => selected === priority.ref);\n      return assign(\n        {\n          selected: isPreSelectedPriority,\n          disabled: isPreSelectedPriority\n        },\n        pick(['title', 'ref', 'type', 'courses'], priority)\n      );\n    });\n  }, [searchResults, preselected]);\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => onAdd(selectedPriority),\n        label: translate('add'),\n        iconName: 'plus',\n        disabled: isLoading\n      }\n    };\n  }, [handleCancel, onAdd, translate, selectedPriority, isLoading]);\n\n  if ((!isLoading && !priorities) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('learning_priority_modal_title')}\n      description={translate('learning_priority_modal_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n    >\n      <div className={style.LearningPriorityContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_priority_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleSearchReset}\n              />\n            </div>\n            <div className={style.filterWrapper}>\n              {searchResults.length > 0\n                ? options.map((filter, index) => {\n                    const {name, value, selected, count} = filter;\n\n                    function handleChange() {\n                      onChange(value);\n                      handleSearchReset();\n                    }\n\n                    if (count === 0) return null;\n\n                    return (\n                      <div key={index} className={style.filterButtonWrapper}>\n                        <FilterButton\n                          active={selected}\n                          filter={name}\n                          onClick={handleChange}\n                          itemTotal={count}\n                        />\n                      </div>\n                    );\n                  })\n                : null}\n            </div>\n            <div className={style.priorityListWrapper}>\n              {priorityList.map(priority => {\n                const {title, ref, courses, type, selected, disabled} = priority;\n                function handlePriorityClick() {\n                  setSelectedPriority(ref);\n                }\n\n                return (\n                  <ListItem\n                    title={title}\n                    subtitle={`${courses} ${translate('courses')}`}\n                    selected={selected || selectedPriority === ref}\n                    disabled={disabled}\n                    onClick={handlePriorityClick}\n                    tags={[{label: type, type: 'default'}]}\n                    key={ref}\n                    backgroundColor=\"skin\"\n                  />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nLearningPriorityModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearningPriorityModal.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  preselected: PropTypes.arrayOf(PropTypes.string),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\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  onCancel: PropTypes.func,\n  onAdd: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default LearningPriorityModal;\n"],"mappings":"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"}

package/es/molecule/learning-priority-modal/style.css

@@ -0,0 +1,68 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+
+.LearningPriorityContainer {
+  height: 485px;
+  width: 660px;
+  overflow-y: auto;
+}
+
+.loaderContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.loader {
+  width: 40px; 
+  height: 40px;
+}
+
+.searchWrapper {
+  border-radius: 12px;
+  width: 300px;
+  background-color: cm_grey_100;
+  margin-bottom: 20px;
+}
+
+.filterWrapper {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 32px;
+}
+
+.filterButtonWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.skillFilterNumber,
+.skillFilterNumberInActive {
+  border-radius: 50%;
+  background-color: #D6E6FF;
+  color: #0061FF;
+  padding: 2px 4px;
+  margin-left: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 12px;
+}
+
+.skillFilterNumberInActive {
+  background-color: #EAEAEB;
+  color: #515161;
+}
+
+.priorityListWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+@media mobile {
+  .LearningPriorityContainer {
+    width: 100%;
+  }
+}

package/es/molecule/learning-priority-setup-item/index.d.ts

@@ -0,0 +1,18 @@
+export default LearningPrioritySetupItem;
+declare function LearningPrioritySetupItem(props: any, context: any): JSX.Element;
+declare namespace LearningPrioritySetupItem {
+    namespace contextTypes {
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    const propTypes: {
+        '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>;
+    };
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/learning-priority-setup-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-priority-setup-item/index.js"],"names":[],"mappings":";AAOA,kFAyCC"}

package/es/molecule/learning-priority-setup-item/index.js

@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Provider from '../../atom/provider';
+import Tag from '../../atom/tag';
+import ButtonLink from '../../atom/button-link';
+import style from './style.css';
+
+const LearningPrioritySetupItem = (props, context) => {
+  const {
+    priorityRef,
+    id,
+    title,
+    courses,
+    type,
+    'aria-label': ariaLabel,
+    onRemove
+  } = props;
+  const {
+    translate
+  } = context;
+  const handleRemovePriority = useCallback(() => onRemove(priorityRef, type), [priorityRef, type]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container,
+    "aria-label": ariaLabel,
+    "data-name": `learning-priority-setup-item-${id}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.containerInfos
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.titleWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.title
+  }, title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
+    label: translate(type),
+    size: 'S'
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: style.courses
+  }, `${courses} ${translate('courses')}`)), /*#__PURE__*/React.createElement(ButtonLink, {
+    type: "primary",
+    customStyle: {
+      width: 'fit-content',
+      backgroundColor: 'transparent'
+    },
+    hoverBackgroundColor: "#EAEAEB",
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'trash',
+        color: '#515161',
+        size: 16
+      }
+    },
+    onClick: handleRemovePriority
+  }));
+};
+
+LearningPrioritySetupItem.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+LearningPrioritySetupItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': PropTypes.string,
+  id: PropTypes.string,
+  priorityRef: PropTypes.string,
+  title: PropTypes.string,
+  courses: PropTypes.number,
+  type: PropTypes.string,
+  onRemove: PropTypes.func
+} : {};
+export default LearningPrioritySetupItem;
+//# sourceMappingURL=index.js.map

package/es/molecule/learning-priority-setup-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Provider","Tag","ButtonLink","style","LearningPrioritySetupItem","props","context","priorityRef","id","title","courses","type","ariaLabel","onRemove","translate","handleRemovePriority","container","containerInfos","titleWrapper","width","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","string","number","func"],"sources":["../../../src/molecule/learning-priority-setup-item/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst LearningPrioritySetupItem = (props, context) => {\n  const {priorityRef, id, title, courses, type, 'aria-label': ariaLabel, onRemove} = props;\n\n  const {translate} = context;\n\n  const handleRemovePriority = useCallback(() => onRemove(priorityRef, type), [priorityRef, type]);\n\n  return (\n    <div\n      className={style.container}\n      aria-label={ariaLabel}\n      data-name={`learning-priority-setup-item-${id}`}\n    >\n      <div className={style.containerInfos}>\n        <div className={style.titleWrapper}>\n          <div className={style.title}>{title}</div>\n          <div>\n            <Tag label={translate(type)} size={'S'} />\n          </div>\n        </div>\n        <span className={style.courses}>{`${courses} ${translate('courses')}`}</span>\n      </div>\n      <ButtonLink\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          backgroundColor: 'transparent'\n        }}\n        hoverBackgroundColor=\"#EAEAEB\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'trash',\n            color: '#515161',\n            size: 16\n          }\n        }}\n        onClick={handleRemovePriority}\n      />\n    </div>\n  );\n};\n\nLearningPrioritySetupItem.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearningPrioritySetupItem.propTypes = {\n  'aria-label': PropTypes.string,\n  id: PropTypes.string,\n  priorityRef: PropTypes.string,\n  title: PropTypes.string,\n  courses: PropTypes.number,\n  type: PropTypes.string,\n  onRemove: PropTypes.func\n};\n\nexport default LearningPrioritySetupItem;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,GAAP,MAAgB,gBAAhB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,yBAAyB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACpD,MAAM;IAACC,WAAD;IAAcC,EAAd;IAAkBC,KAAlB;IAAyBC,OAAzB;IAAkCC,IAAlC;IAAwC,cAAcC,SAAtD;IAAiEC;EAAjE,IAA6ER,KAAnF;EAEA,MAAM;IAACS;EAAD,IAAcR,OAApB;EAEA,MAAMS,oBAAoB,GAAGjB,WAAW,CAAC,MAAMe,QAAQ,CAACN,WAAD,EAAcI,IAAd,CAAf,EAAoC,CAACJ,WAAD,EAAcI,IAAd,CAApC,CAAxC;EAEA,oBACE;IACE,SAAS,EAAER,KAAK,CAACa,SADnB;IAEE,cAAYJ,SAFd;IAGE,aAAY,gCAA+BJ,EAAG;EAHhD,gBAKE;IAAK,SAAS,EAAEL,KAAK,CAACc;EAAtB,gBACE;IAAK,SAAS,EAAEd,KAAK,CAACe;EAAtB,gBACE;IAAK,SAAS,EAAEf,KAAK,CAACM;EAAtB,GAA8BA,KAA9B,CADF,eAEE,8CACE,oBAAC,GAAD;IAAK,KAAK,EAAEK,SAAS,CAACH,IAAD,CAArB;IAA6B,IAAI,EAAE;EAAnC,EADF,CAFF,CADF,eAOE;IAAM,SAAS,EAAER,KAAK,CAACO;EAAvB,GAAkC,GAAEA,OAAQ,IAAGI,SAAS,CAAC,SAAD,CAAY,EAApE,CAPF,CALF,eAcE,oBAAC,UAAD;IACE,IAAI,EAAC,SADP;IAEE,WAAW,EAAE;MACXK,KAAK,EAAE,aADI;MAEXC,eAAe,EAAE;IAFN,CAFf;IAME,oBAAoB,EAAC,SANvB;IAOE,IAAI,EAAE;MACJC,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,OADA;QAENC,KAAK,EAAE,SAFD;QAGNC,IAAI,EAAE;MAHA;IAFJ,CAPR;IAeE,OAAO,EAAEV;EAfX,EAdF,CADF;AAkCD,CAzCD;;AA2CAX,yBAAyB,CAACsB,YAA1B,GAAyC;EACvCZ,SAAS,EAAEd,QAAQ,CAAC2B,iBAAT,CAA2Bb;AADC,CAAzC;AAIAV,yBAAyB,CAACwB,SAA1B,2CAAsC;EACpC,cAAc7B,SAAS,CAAC8B,MADY;EAEpCrB,EAAE,EAAET,SAAS,CAAC8B,MAFsB;EAGpCtB,WAAW,EAAER,SAAS,CAAC8B,MAHa;EAIpCpB,KAAK,EAAEV,SAAS,CAAC8B,MAJmB;EAKpCnB,OAAO,EAAEX,SAAS,CAAC+B,MALiB;EAMpCnB,IAAI,EAAEZ,SAAS,CAAC8B,MANoB;EAOpChB,QAAQ,EAAEd,SAAS,CAACgC;AAPgB,CAAtC;AAUA,eAAe3B,yBAAf"}

package/es/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/es/molecule/skill-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-card/index.js"],"names":[],"mappings":";AAwBA,kEA0EC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-card/index.js"],"names":[],"mappings":";AAwBA,kEAkEC"}

package/es/molecule/skill-card/index.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { convert } from 'css-color-function';
 import { NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon } from '@coorpacademy/nova-icons';
 import getOr from 'lodash/fp/getOr';
@@ -26,16 +26,15 @@ const SkillCard = (props, context) => {
   const {
     skin
   } = context;
-  const [hovered, setHovered] = useState(false);
   const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);
-  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
-  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
   const buttonProps = {
     customStyle: {
-      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
-      color: hovered ? '#FFFFFF' : primarySkinColor,
+      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),
+      color: primarySkinColor,
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
     },
+    hoverBackgroundColor: primarySkinColor,
+    hoverColor: '#FFFFFF',
     onClick,
     'aria-label': buttonAriaLabel ? `${skillTitle}, ${buttonAriaLabel}` : skillTitle,
     label: buttonLabel,
@@ -66,8 +65,6 @@ const SkillCard = (props, context) => {
     height: 16
   }), reviseLabel), /*#__PURE__*/React.createElement("div", {
     className: style.buttonWrapper,
-    onMouseOver: handleMouseOver,
-    onMouseLeave: handleMouseLeave,
     "data-name": "button-wrapper"
   }, /*#__PURE__*/React.createElement(ButtonLink, buttonProps))));
 };

package/es/molecule/skill-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","convert","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","getOr","ButtonLink","style","propTypes","getGradientBackground","baseColor","gradients","SkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","buttonLabel","buttonAriaLabel","reviseLabel","reviseAriaLabel","onClick","isCustom","skin","hovered","setHovered","primarySkinColor","handleMouseOver","handleMouseLeave","buttonProps","customStyle","backgroundColor","color","transition","label","titleBackgroundColor","titleBackground","skillCardWrapper","background","questionReviseText","questionReviseIcon","buttonWrapper"],"sources":["../../../src/molecule/skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {convert} from 'css-color-function';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst getGradientBackground = baseColor => {\n  const gradients = [\n    convert(`color(${baseColor} lightness(30%))`),\n    convert(`color(${baseColor} lightness(47%))`),\n    convert(`color(${baseColor} lightness(55%))`)\n  ];\n\n  return `radial-gradient(62.12% 56.45% at 0% 77.29%, ${gradients[0]} 0%, ${convert(\n    `color(${gradients[0]} a(0))`\n  )} 100%), radial-gradient(113.85% 103.46% at 93.27% 7.88%, ${gradients[1]} 0%, ${convert(\n    `color(${gradients[1]} a(0))`\n  )} 100%), radial-gradient(49.66% 49.63% at 78.65% 86.26%, ${gradients[2]} 0%, ${convert(\n    `color(${gradients[2]} a(0))`\n  )} 100%), ${baseColor}`;\n};\n\nconst SkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    buttonLabel,\n    buttonAriaLabel,\n    reviseLabel,\n    reviseAriaLabel,\n    onClick,\n    isCustom = false\n  } = props;\n  const {skin} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick,\n    'aria-label': buttonAriaLabel ? `${skillTitle}, ${buttonAriaLabel}` : skillTitle,\n    label: buttonLabel,\n    'data-name': 'skill-card-button'\n  };\n\n  const titleBackgroundColor = useMemo(\n    () => (isCustom ? '#128C72' : primarySkinColor),\n    [isCustom, primarySkinColor]\n  );\n\n  const titleBackground = useMemo(\n    () => getGradientBackground(titleBackgroundColor),\n    [titleBackgroundColor]\n  );\n\n  return (\n    <div className={style.skillCardWrapper} data-name=\"skill-card-wrapper\" aria-label={ariaLabel}>\n      <div\n        data-name=\"skill-title\"\n        className={style.skillTitle}\n        aria-label={skillAriaLabel || skillTitle}\n        style={{\n          background: titleBackground\n        }}\n      >\n        {skillTitle}\n      </div>\n      <div data-name=\"card-content-wrapper\">\n        <div\n          className={style.questionReviseText}\n          data-name=\"questions-to-revise-label\"\n          aria-label={reviseAriaLabel || reviseLabel}\n        >\n          <QuestionIcon className={style.questionReviseIcon} width={16} height={16} />\n          {reviseLabel}\n        </div>\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-wrapper\"\n        >\n          <ButtonLink {...buttonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nSkillCard.propTypes = propTypes;\n\nexport default SkillCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","convert","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","getOr","ButtonLink","style","propTypes","getGradientBackground","baseColor","gradients","SkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","buttonLabel","buttonAriaLabel","reviseLabel","reviseAriaLabel","onClick","isCustom","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","hoverBackgroundColor","hoverColor","label","titleBackgroundColor","titleBackground","skillCardWrapper","background","questionReviseText","questionReviseIcon","buttonWrapper"],"sources":["../../../src/molecule/skill-card/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport {convert} from 'css-color-function';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst getGradientBackground = baseColor => {\n  const gradients = [\n    convert(`color(${baseColor} lightness(30%))`),\n    convert(`color(${baseColor} lightness(47%))`),\n    convert(`color(${baseColor} lightness(55%))`)\n  ];\n\n  return `radial-gradient(62.12% 56.45% at 0% 77.29%, ${gradients[0]} 0%, ${convert(\n    `color(${gradients[0]} a(0))`\n  )} 100%), radial-gradient(113.85% 103.46% at 93.27% 7.88%, ${gradients[1]} 0%, ${convert(\n    `color(${gradients[1]} a(0))`\n  )} 100%), radial-gradient(49.66% 49.63% at 78.65% 86.26%, ${gradients[2]} 0%, ${convert(\n    `color(${gradients[2]} a(0))`\n  )} 100%), ${baseColor}`;\n};\n\nconst SkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    buttonLabel,\n    buttonAriaLabel,\n    reviseLabel,\n    reviseAriaLabel,\n    onClick,\n    isCustom = false\n  } = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverBackgroundColor: primarySkinColor,\n    hoverColor: '#FFFFFF',\n    onClick,\n    'aria-label': buttonAriaLabel ? `${skillTitle}, ${buttonAriaLabel}` : skillTitle,\n    label: buttonLabel,\n    'data-name': 'skill-card-button'\n  };\n\n  const titleBackgroundColor = useMemo(\n    () => (isCustom ? '#128C72' : primarySkinColor),\n    [isCustom, primarySkinColor]\n  );\n\n  const titleBackground = useMemo(\n    () => getGradientBackground(titleBackgroundColor),\n    [titleBackgroundColor]\n  );\n\n  return (\n    <div className={style.skillCardWrapper} data-name=\"skill-card-wrapper\" aria-label={ariaLabel}>\n      <div\n        data-name=\"skill-title\"\n        className={style.skillTitle}\n        aria-label={skillAriaLabel || skillTitle}\n        style={{\n          background: titleBackground\n        }}\n      >\n        {skillTitle}\n      </div>\n      <div data-name=\"card-content-wrapper\">\n        <div\n          className={style.questionReviseText}\n          data-name=\"questions-to-revise-label\"\n          aria-label={reviseAriaLabel || reviseLabel}\n        >\n          <QuestionIcon className={style.questionReviseIcon} width={16} height={16} />\n          {reviseLabel}\n        </div>\n        <div className={style.buttonWrapper} data-name=\"button-wrapper\">\n          <ButtonLink {...buttonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nSkillCard.propTypes = propTypes;\n\nexport default SkillCard;\n"],"mappings":"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"}