@coorpacademy/components 11.32.11 → 11.32.12-alpha.0

package/es/template/skill-detail/all-courses.js

@@ -0,0 +1,168 @@
+import _get from "lodash/fp/get";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Provider from '../../atom/provider';
+import Select, { SelectOptionPropTypes } from '../../atom/select';
+import ButtonLink from '../../atom/button-link';
+import SearchForm from '../../molecule/search-form';
+import CardsGrid from '../../organism/cards-grid';
+import searchValueIncluded from '../../util/search-value-included';
+import InputSwitch from '../../atom/input-switch';
+import style from './all-courses.css';
+
+const FilterButton = (props, context) => {
+  const {
+    selected,
+    filter,
+    onClick
+  } = props;
+  const {
+    skin
+  } = context;
+
+  const primarySkinColor = _get('common.primary', skin);
+
+  const buttonProps = {
+    customStyle: {
+      backgroundColor: selected ? primarySkinColor : '#E1E1E3',
+      color: selected ? '#FFFFFF' : '#515161',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      width: 'fit-content'
+    },
+    label: filter,
+    onClick,
+    'data-name': 'filter-type-course-button'
+  };
+  return /*#__PURE__*/React.createElement(ButtonLink, buttonProps);
+};
+
+FilterButton.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  selected: PropTypes.bool,
+  filter: PropTypes.string,
+  onClick: PropTypes.func
+} : {};
+
+const AllCourses = (props, context) => {
+  const {
+    skillIncludedCourses,
+    filters,
+    sorting
+  } = props;
+  const {
+    options,
+    onChange
+  } = filters;
+  const {
+    list
+  } = skillIncludedCourses;
+  const {
+    translate
+  } = context;
+  const [showCompleted, setShowCompleted] = useState(true);
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResults, setSearchResults] = useState(list.sort((a, b) => {
+    const progressA = a.progress ?? 0;
+    const progressB = b.progress ?? 0;
+    return progressB - progressA;
+  }));
+  const sortView = sorting !== undefined ? /*#__PURE__*/React.createElement("div", {
+    "data-name": "choice"
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, sorting, {
+    "aria-label": "All courses sort"
+  }))) : null;
+  const handleSearch = useCallback(value => {
+    setSearchValue(value);
+    setSearchResults(list.filter(skill => searchValueIncluded(skill.title, value)));
+  }, [list, setSearchValue, setSearchResults]);
+  const handleSearchReset = useCallback(() => {
+    setSearchValue('');
+    setSearchResults(list);
+  }, [list, setSearchValue, setSearchResults]);
+  const handleShowCompletedToggle = useCallback(() => {
+    const tempShowCompleted = !showCompleted;
+    setShowCompleted(tempShowCompleted);
+
+    if (tempShowCompleted) {
+      setSearchResults(list);
+      handleSearchReset();
+    } else {
+      setSearchResults(searchResults.filter(skill => skill.progress === 0));
+    }
+  }, [searchResults, showCompleted, setShowCompleted]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: style.continueLearningWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.continueLearningTitle
+  }, translate('all_courses')), /*#__PURE__*/React.createElement("span", {
+    className: style.continueLearningNumber
+  }, skillIncludedCourses.list.length)), /*#__PURE__*/React.createElement("div", {
+    className: style.searchAndSortSection
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.searchWrapper
+  }, /*#__PURE__*/React.createElement(SearchForm, {
+    search: {
+      placeholder: translate('search_place_holder'),
+      value: searchValue,
+      onChange: handleSearch
+    },
+    onReset: handleSearchReset
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.sortSection
+  }, /*#__PURE__*/React.createElement(InputSwitch, {
+    type: "switch",
+    title: translate('show_completed'),
+    value: showCompleted,
+    onChange: handleShowCompletedToggle
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.sortWrapper
+  }, translate('sort_by'), sortView))), /*#__PURE__*/React.createElement("div", {
+    className: style.filterWrapper
+  }, options.length > 2 ? options.map((filter, index) => {
+    const {
+      name,
+      value,
+      selected
+    } = filter;
+
+    function handleChange() {
+      onChange(value);
+      handleSearchReset();
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: style.filterButtonWrapper
+    }, /*#__PURE__*/React.createElement(FilterButton, {
+      selected: selected,
+      filter: name,
+      onClick: handleChange
+    }), value === 'ALL' ? /*#__PURE__*/React.createElement("div", {
+      className: style.divider
+    }) : null);
+  }) : null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardsGrid, {
+    list: searchResults,
+    justifyContent: "left"
+  })));
+};
+
+AllCourses.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+AllCourses.propTypes = process.env.NODE_ENV !== "production" ? {
+  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),
+  filters: PropTypes.shape({
+    onChange: PropTypes.func,
+    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
+  }),
+  sorting: PropTypes.shape(Select.propTypes)
+} : {};
+export default AllCourses;
+//# sourceMappingURL=all-courses.js.map

package/es/template/skill-detail/all-courses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"all-courses.js","names":["React","useState","useCallback","PropTypes","Provider","Select","SelectOptionPropTypes","ButtonLink","SearchForm","CardsGrid","searchValueIncluded","InputSwitch","style","FilterButton","props","context","selected","filter","onClick","skin","primarySkinColor","buttonProps","customStyle","backgroundColor","color","transition","width","label","contextTypes","childContextTypes","translate","propTypes","bool","string","func","AllCourses","skillIncludedCourses","filters","sorting","options","onChange","list","showCompleted","setShowCompleted","searchValue","setSearchValue","searchResults","setSearchResults","sort","a","b","progressA","progress","progressB","sortView","undefined","handleSearch","value","skill","title","handleSearchReset","handleShowCompletedToggle","tempShowCompleted","continueLearningWrapper","continueLearningTitle","continueLearningNumber","length","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","map","index","name","handleChange","filterButtonWrapper","divider","shape","arrayOf"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport searchValueIncluded from '../../util/search-value-included';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './all-courses.css';\n\nconst FilterButton = (props, context) => {\n  const {selected, filter, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n      color: selected ? '#FFFFFF' : '#515161',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    label: filter,\n    onClick,\n    'data-name': 'filter-type-course-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  selected: PropTypes.bool,\n  filter: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n  const {skillIncludedCourses, filters, sorting} = props;\n  const {options, onChange} = filters;\n  const {list} = skillIncludedCourses;\n  const {translate} = context;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    list.sort((a, b) => {\n      const progressA = a.progress ?? 0;\n      const progressB = b.progress ?? 0;\n      return progressB - progressA;\n    })\n  );\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      setSearchResults(list.filter(skill => searchValueIncluded(skill.title, value)));\n    },\n    [list, setSearchValue, setSearchResults]\n  );\n\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    setSearchResults(list);\n  }, [list, setSearchValue, setSearchResults]);\n\n  const handleShowCompletedToggle = useCallback(() => {\n    const tempShowCompleted = !showCompleted;\n    setShowCompleted(tempShowCompleted);\n    if (tempShowCompleted) {\n      setSearchResults(list);\n      handleSearchReset();\n    } else {\n      setSearchResults(searchResults.filter(skill => skill.progress === 0));\n    }\n  }, [searchResults, showCompleted, setShowCompleted]);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_courses')}</span>\n        <span className={style.continueLearningNumber}>{skillIncludedCourses.list.length}</span>\n      </div>\n      <div className={style.searchAndSortSection}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: handleSearch\n            }}\n            onReset={handleSearchReset}\n          />\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            type=\"switch\"\n            title={translate('show_completed')}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          <div className={style.sortWrapper}>\n            {translate('sort_by')}\n            {sortView}\n          </div>\n        </div>\n      </div>\n      <div className={style.filterWrapper}>\n        {options.length > 2\n          ? options.map((filter, index) => {\n              const {name, value, selected} = filter;\n\n              function handleChange() {\n                onChange(value);\n                handleSearchReset();\n              }\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton selected={selected} filter={name} onClick={handleChange} />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            })\n          : null}\n      </div>\n      <div>\n        <CardsGrid list={searchResults} justifyContent=\"left\" />\n      </div>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default AllCourses;\n"],"mappings":"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"}

package/es/template/skill-detail/continue-learning.css

@@ -0,0 +1,21 @@
+.continueLearningWrapper {
+  margin-top: 40px;
+  margin-bottom: 16px;
+}
+
+.continueLearningTitle {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.continueLearningNumber {
+  border-radius: 50%;
+  background-color: #EAEAEB;
+  color: #515161;
+  padding: 2px 4px;
+  margin-left: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 12px;
+}

package/es/template/skill-detail/continue-learning.d.ts

@@ -0,0 +1,37 @@
+export default ContinueLearning;
+declare function ContinueLearning(props: any, context: any): JSX.Element | null;
+declare namespace ContinueLearning {
+    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 ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            justifyContent: PropTypes.Requireable<string>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=continue-learning.d.ts.map

package/es/template/skill-detail/continue-learning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";AAMA,gFAmBC"}

package/es/template/skill-detail/continue-learning.js

@@ -0,0 +1,40 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Provider from '../../atom/provider';
+import CardsGrid from '../../organism/cards-grid';
+import style from './continue-learning.css';
+
+const ContinueLearning = (props, context) => {
+  const {
+    ongoingCourses
+  } = props;
+  const {
+    translate
+  } = context;
+
+  if (ongoingCourses.list.length === 0) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: style.continueLearningWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.continueLearningTitle
+  }, translate('continue_learning')), /*#__PURE__*/React.createElement("span", {
+    className: style.continueLearningNumber
+  }, ongoingCourses.list.length)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardsGrid, _extends({}, ongoingCourses, {
+    justifyContent: "left"
+  }))));
+};
+
+ContinueLearning.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+ContinueLearning.propTypes = process.env.NODE_ENV !== "production" ? {
+  ongoingCourses: PropTypes.shape(CardsGrid.propTypes)
+} : {};
+export default ContinueLearning;
+//# sourceMappingURL=continue-learning.js.map

package/es/template/skill-detail/continue-learning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"continue-learning.js","names":["React","PropTypes","Provider","CardsGrid","style","ContinueLearning","props","context","ongoingCourses","translate","list","length","continueLearningWrapper","continueLearningTitle","continueLearningNumber","contextTypes","skin","childContextTypes","propTypes","shape"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n  const {ongoingCourses} = props;\n  const {translate} = context;\n\n  if (ongoingCourses.list.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n        <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n      </div>\n      <div>\n        <CardsGrid {...ongoingCourses} justifyContent=\"left\" />\n      </div>\n    </>\n  );\n};\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;;EAEA,IAAIC,cAAc,CAACE,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,oBACE,uDACE;IAAK,SAAS,EAAEP,KAAK,CAACQ;EAAtB,gBACE;IAAM,SAAS,EAAER,KAAK,CAACS;EAAvB,GAA+CJ,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEL,KAAK,CAACU;EAAvB,GAAgDN,cAAc,CAACE,IAAf,CAAoBC,MAApE,CAFF,CADF,eAKE,8CACE,oBAAC,SAAD,eAAeH,cAAf;IAA+B,cAAc,EAAC;EAA9C,GADF,CALF,CADF;AAWD,CAnBD;;AAqBAH,gBAAgB,CAACU,YAAjB,GAAgC;EAC9BC,IAAI,EAAEd,QAAQ,CAACe,iBAAT,CAA2BD,IADH;EAE9BP,SAAS,EAAEP,QAAQ,CAACe,iBAAT,CAA2BR;AAFR,CAAhC;AAKAJ,gBAAgB,CAACa,SAAjB,2CAA6B;EAC3BV,cAAc,EAAEP,SAAS,CAACkB,KAAV,CAAgBhB,SAAS,CAACe,SAA1B;AADW,CAA7B;AAIA,eAAeb,gBAAf"}

package/es/template/skill-detail/index.d.ts

@@ -0,0 +1,95 @@
+export default SkillDetail;
+declare function SkillDetail(props: any, context: any): JSX.Element;
+declare namespace SkillDetail {
+    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 title: PropTypes.Validator<string>;
+        const description: PropTypes.Requireable<string>;
+        const metrics: PropTypes.Requireable<PropTypes.InferProps<{
+            score: PropTypes.Requireable<number>;
+            content: PropTypes.Requireable<number>;
+            questionsToReview: PropTypes.Requireable<number>;
+            contentCompleted: PropTypes.Requireable<number>;
+        }>>;
+        const focused: PropTypes.Requireable<boolean>;
+        const availableForReview: PropTypes.Requireable<boolean>;
+        const ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            justifyContent: PropTypes.Requireable<string>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+        const skillIncludedCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            justifyContent: PropTypes.Requireable<string>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+        const filters: PropTypes.Requireable<PropTypes.InferProps<{
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+        }>>;
+        const sorting: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            borderClassName: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            multiple: PropTypes.Requireable<boolean>;
+            description: PropTypes.Requireable<string>;
+            required: PropTypes.Requireable<boolean>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            theme: PropTypes.Requireable<string>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+            optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+                label: PropTypes.Validator<string>;
+                options: PropTypes.Requireable<(PropTypes.InferProps<{
+                    name: PropTypes.Validator<string>;
+                    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                    selected: PropTypes.Requireable<boolean>;
+                    validOption: PropTypes.Requireable<boolean>;
+                }> | null | undefined)[]>;
+            }> | null | undefined)[]>;
+            modified: PropTypes.Requireable<boolean>;
+            error: PropTypes.Requireable<boolean>;
+            'aria-label': PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
+        }>>;
+        const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/template/skill-detail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AA2DA,oEAuJC"}

package/es/template/skill-detail/index.js

@@ -0,0 +1,219 @@
+import _get from "lodash/fp/get";
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { convert } from 'css-color-function';
+import classnames from 'classnames';
+import Provider from '../../atom/provider';
+import Select, { SelectOptionPropTypes } from '../../atom/select';
+import ButtonLink from '../../atom/button-link';
+import Icon from '../../atom/icon';
+import CardsGrid from '../../organism/cards-grid';
+import style from './style.css';
+import AllCourses from './all-courses';
+import ContinueLearning from './continue-learning';
+
+const ContinueLearningButton = (props, context) => {
+  const [hovered, setHovered] = useState(false);
+  const {
+    onClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+
+  const primarySkinColor = _get('common.primary', skin);
+
+  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    label: translate('continue_learning'),
+    type: "primary",
+    customStyle: {
+      width: 'fit-content',
+      borderRadius: '12px',
+      backgroundColor: hovered ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
+    },
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'play',
+        color: '#FFFFFF',
+        size: 16
+      }
+    },
+    onClick: onClick
+  }));
+};
+
+ContinueLearningButton.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: PropTypes.func
+} : {};
+
+const SkillDetail = (props, context) => {
+  const {
+    title,
+    description,
+    metrics,
+    focused,
+    availableForReview,
+    ongoingCourses,
+    skillIncludedCourses,
+    filters,
+    sorting,
+    onBackClick,
+    onReviewClick,
+    onContinueLearningClick
+  } = props;
+  const {
+    score,
+    content,
+    questionsToReview,
+    contentCompleted = 0
+  } = metrics;
+  const {
+    translate
+  } = context;
+  const [showMore, setShowMore] = useState(false);
+  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  const Description = useCallback(() => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(style.description, !showMore && style.truncate)
+    }, description);
+  });
+  const ProgressBar = useCallback(() => {
+    if (score === undefined) return null;
+    const progressBarColor = '#3EC483';
+    const inlineProgressValueStyle = {
+      backgroundColor: progressBarColor,
+      width: `${score}%`
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.progressBarWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-name": "progress",
+      className: style.progress,
+      style: inlineProgressValueStyle,
+      role: "progressbar"
+    }));
+  }, [score]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.backgroundContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.backButtonWrapper,
+    onClick: onBackClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "arrow-left",
+    size: {
+      faSize: 14,
+      wrapperSize: 14
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.ctaContainer
+  }, /*#__PURE__*/React.createElement("div", null, focused ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusBadge
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
+    size: {
+      faSize: 10,
+      wrapperSize: 16
+    }
+  }), translate('skill_focus')) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.title
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= 226 ? /*#__PURE__*/React.createElement("div", {
+    className: style.showMoreWrapper,
+    onClick: handleShowMore
+  }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/React.createElement(Icon, {
+    iconName: showMore ? 'chevron-up' : 'chevron-down',
+    size: {
+      faSize: 14,
+      wrapperSize: 16
+    }
+  })) : null) : null), /*#__PURE__*/React.createElement("div", {
+    className: style.ctaWrapper
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    type: "secondary",
+    onClick: onReviewClick,
+    label: translate('review_this_skill'),
+    disabled: !availableForReview,
+    customStyle: {
+      width: 'fit-content',
+      borderRadius: '12px'
+    }
+  }), /*#__PURE__*/React.createElement(ContinueLearningButton, {
+    onClick: onContinueLearningClick
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformationsWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.progressTitle
+  }, translate('your_progress')), /*#__PURE__*/React.createElement("div", {
+    className: style.skillCoursesAndQuestionsWrapper
+  }, content ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation,
+    "data-name": "skill-courses"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.skillInformationNumber
+  }, content), ' ', translate('courses')) : null, questionsToReview ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation,
+    "data-name": "skill-questions"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.skillInformationNumber
+  }, questionsToReview), "\xA0", translate('questions')) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformations
+  }, content && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformation,
+    "data-name": "skill-completed-courses"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.progressInformationNumber
+  }, contentCompleted), ` ${translate('courses_completed')}`), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformation,
+    "data-name": "completed-percentage"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.progressInformationNumber
+  }, score, "%"))))), /*#__PURE__*/React.createElement(ContinueLearning, {
+    ongoingCourses: ongoingCourses
+  }), /*#__PURE__*/React.createElement(AllCourses, {
+    skillIncludedCourses: skillIncludedCourses,
+    filters: filters,
+    sorting: sorting
+  })));
+};
+
+SkillDetail.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  metrics: PropTypes.shape({
+    score: PropTypes.number,
+    content: PropTypes.number,
+    questionsToReview: PropTypes.number,
+    contentCompleted: PropTypes.number
+  }),
+  focused: PropTypes.bool,
+  availableForReview: PropTypes.bool,
+  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),
+  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),
+  filters: PropTypes.shape({
+    onChange: PropTypes.func,
+    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
+  }),
+  sorting: PropTypes.shape(Select.propTypes),
+  onBackClick: PropTypes.func,
+  onReviewClick: PropTypes.func,
+  onContinueLearningClick: PropTypes.func
+} : {};
+export default SkillDetail;
+//# sourceMappingURL=index.js.map