@coorpacademy/components 11.32.21 → 11.32.23-alpha.2

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

@@ -0,0 +1,96 @@
+export default PlaylistDetail;
+declare function PlaylistDetail(props: any, context: any): JSX.Element;
+declare namespace PlaylistDetail {
+    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 coverImages: PropTypes.Requireable<(PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+            url: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        const playlistRef: PropTypes.Validator<string>;
+        const description: PropTypes.Requireable<string>;
+        const ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: string | null | undefined;
+            }>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+        const playlistCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: string | null | undefined;
+            }>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+        const totalCourses: PropTypes.Requireable<number>;
+        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 onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,112 @@
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Provider from '../../atom/provider';
+import Tag from '../../atom/tag';
+import Select, { SelectOptionPropTypes } from '../../atom/select';
+import Icon from '../../atom/icon';
+import CardsGrid from '../../organism/cards-grid';
+import AllCourses from '../skill-detail/all-courses';
+import ContinueLearning from '../skill-detail/continue-learning';
+import PlaylistDetailCover from '../../molecule/playlist-detail-cover';
+import { ContinueLearningButton } from '../skill-detail';
+import style from './style.css';
+const DESCRIPTION_BREAKPOINT = 382;
+
+const PlaylistDetail = (props, context) => {
+  const {
+    title,
+    coverImages,
+    playlistRef,
+    description,
+    ongoingCourses,
+    playlistCourses,
+    totalCourses,
+    filters,
+    sorting,
+    onBackClick,
+    onContinueLearningClick
+  } = props;
+  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);
+  }, [showMore, description]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.backgroundContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container,
+    "data-name": playlistRef
+  }, /*#__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", {
+    className: style.coverWrapper
+  }, /*#__PURE__*/React.createElement(PlaylistDetailCover, {
+    images: coverImages
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
+    label: translate('playlist')
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.title
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= DESCRIPTION_BREAKPOINT ? /*#__PURE__*/React.createElement("div", {
+    className: style.showMoreWrapper,
+    onClick: handleShowMore
+  }, translate(showMore ? 'Show less' : '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.continueLearningButton
+  }, /*#__PURE__*/React.createElement(ContinueLearningButton, {
+    ongoingCoursesAvailable: !!ongoingCourses.list.length,
+    onClick: onContinueLearningClick
+  })))), /*#__PURE__*/React.createElement(ContinueLearning, {
+    ongoingCourses: ongoingCourses
+  }), /*#__PURE__*/React.createElement(AllCourses, {
+    courses: playlistCourses,
+    totalCourses: totalCourses,
+    filters: filters,
+    sorting: sorting
+  })));
+};
+
+PlaylistDetail.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string.isRequired,
+  coverImages: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['podcast', 'video', 'interactive', 'document']),
+    url: PropTypes.string
+  })),
+  playlistRef: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),
+  playlistCourses: PropTypes.shape(CardsGrid.propTypes),
+  totalCourses: PropTypes.number,
+  filters: PropTypes.shape({
+    onChange: PropTypes.func,
+    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
+  }),
+  sorting: PropTypes.shape(Select.propTypes),
+  onBackClick: PropTypes.func,
+  onContinueLearningClick: PropTypes.func
+} : {};
+export default PlaylistDetail;
+//# sourceMappingURL=index.js.map

package/es/template/playlist-detail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","Icon","CardsGrid","AllCourses","ContinueLearning","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","coverWrapper","length","showMoreWrapper","continueLearningButton","list","contextTypes","skin","childContextTypes","propTypes","string","isRequired","arrayOf","shape","type","oneOf","url","number","onChange","func","options"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport ContinueLearning from '../skill-detail/continue-learning';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCourses,\n    playlistCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon iconName=\"arrow-left\" size={{faSize: 14, wrapperSize: 14}} />\n        </div>\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={!!ongoingCourses.list.length}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          courses={playlistCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PropTypes.arrayOf(\n    PropTypes.shape({\n      type: PropTypes.oneOf(['podcast', 'video', 'interactive', 'document']),\n      url: PropTypes.string\n    })\n  ),\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

package/es/template/playlist-detail/style.css

@@ -0,0 +1,109 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value xtraLightGrey from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_400 from colors;
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+}
+
+.backgroundContainer {
+  background-color: white;
+  min-height: 100%;
+  width: 100%;
+}
+
+.container {
+  composes: textBase;
+  background-color: white;
+  font-family: "Gilroy";
+  font-style: normal;
+  margin-top: 48px;
+  margin-bottom: 48px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 16px;
+  position: relative;
+  box-sizing: border-box;
+  min-height: 100%;
+  width: 100%;
+  max-width: calc(1080px + 40px);
+}
+
+.backButtonWrapper {
+  margin-bottom: 16px;
+  background-color: cm_grey_100;
+  border-radius: 8px;
+  width: fit-content;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.ctaContainer {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: 40px;
+}
+
+.coverWrapper {
+  width: 420px;
+  height: 280px;
+}
+
+.showMoreWrapper {
+  display: flex;
+  gap: 8px;
+}
+
+.showMoreWrapper {
+  align-items: center;
+  margin-top: 8px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.title {
+  margin-top: 8px;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+}
+
+.description {
+  margin-top: 8px;
+  max-width: 620px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: cm_grey_400;
+}
+
+.truncate {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.continueLearningButton {
+  margin-top: 24px;
+}
+
+@media tablet {
+  .ctaContainer {
+    flex-direction: column;
+  }
+}
+
+@media mobile {
+  .coverWrapper {
+    width: 100%;
+  }
+}

package/es/template/skill-detail/all-courses.d.ts

@@ -26,7 +26,7 @@ declare namespace AllCourses {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace propTypes {
-        const skillIncludedCourses: PropTypes.Requireable<PropTypes.InferProps<{
+        const courses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;

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

@@ -53,7 +53,7 @@ FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
 
 const AllCourses = (props, context) => {
   const {
-    skillIncludedCourses,
+    courses,
     totalCourses,
     filters,
     sorting
@@ -65,7 +65,7 @@ const AllCourses = (props, context) => {
   const {
     list,
     loading
-  } = skillIncludedCourses;
+  } = courses;
   const {
     translate
   } = context;
@@ -177,7 +177,7 @@ AllCourses.contextTypes = {
   translate: Provider.childContextTypes.translate
 };
 AllCourses.propTypes = process.env.NODE_ENV !== "production" ? {
-  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),
+  courses: PropTypes.shape(CardsGrid.propTypes),
   totalCourses: PropTypes.number,
   filters: PropTypes.shape({
     onChange: PropTypes.func,

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

@@ -1 +1 @@
-{"version":3,"file":"all-courses.js","names":["React","useState","useCallback","useEffect","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","totalCourses","filters","sorting","options","onChange","list","loading","showCompleted","setShowCompleted","searchValue","setSearchValue","searchResults","setSearchResults","course","sortView","undefined","handleSearch","value","skill","title","handleSearchReset","handleShowCompletedToggle","toggledShowCompleted","progress","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","length","map","index","name","handleChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, sortBy} 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, totalCourses, filters, sorting} = props;\n  const {options, onChange} = filters;\n  const {list, loading} = skillIncludedCourses;\n  const {translate} = context;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    sortBy(course => -getOr(0, ['progress'], course), list)\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  useEffect(() => {\n    setSearchResults(sortBy(course => -getOr(0, ['progress'], course), list));\n  }, [list]);\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 toggledShowCompleted = !showCompleted;\n    setShowCompleted(toggledShowCompleted);\n    if (toggledShowCompleted) {\n      setSearchResults(list);\n      handleSearchReset();\n    } else {\n      setSearchResults(searchResults.filter(skill => skill.progress === 0));\n    }\n  }, [list, searchResults, showCompleted, setShowCompleted, setSearchResults, handleSearchReset]);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_courses')}</span>\n        <span className={style.continueLearningNumber}>{totalCourses}</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            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\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 && searchResults.length > 0\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        {searchResults.length > 0 ? (\n          <CardsGrid\n            list={searchResults}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\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={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        )}\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  totalCourses: PropTypes.number,\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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"}
+{"version":3,"file":"all-courses.js","names":["React","useState","useCallback","useEffect","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","courses","totalCourses","filters","sorting","options","onChange","list","loading","showCompleted","setShowCompleted","searchValue","setSearchValue","searchResults","setSearchResults","course","sortView","undefined","handleSearch","value","skill","title","handleSearchReset","handleShowCompletedToggle","toggledShowCompleted","progress","continueLearningWrapper","continueLearningTitle","continueLearningNumber","searchAndSortSection","searchWrapper","placeholder","sortSection","sortWrapper","filterWrapper","length","map","index","name","handleChange","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, sortBy} 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 {courses, totalCourses, filters, sorting} = props;\n  const {options, onChange} = filters;\n  const {list, loading} = courses;\n  const {translate} = context;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    sortBy(course => -getOr(0, ['progress'], course), list)\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  useEffect(() => {\n    setSearchResults(sortBy(course => -getOr(0, ['progress'], course), list));\n  }, [list]);\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 toggledShowCompleted = !showCompleted;\n    setShowCompleted(toggledShowCompleted);\n    if (toggledShowCompleted) {\n      setSearchResults(list);\n      handleSearchReset();\n    } else {\n      setSearchResults(searchResults.filter(skill => skill.progress === 0));\n    }\n  }, [list, searchResults, showCompleted, setShowCompleted, setSearchResults, handleSearchReset]);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_courses')}</span>\n        <span className={style.continueLearningNumber}>{totalCourses}</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            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\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 && searchResults.length > 0\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        {searchResults.length > 0 ? (\n          <CardsGrid\n            list={searchResults}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\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={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  courses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\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/index.d.ts

@@ -1,6 +1,5 @@
-export default SkillDetail;
-declare function SkillDetail(props: any, context: any): JSX.Element;
-declare namespace SkillDetail {
+export function ContinueLearningButton(props: any, context: any): JSX.Element;
+export namespace ContinueLearningButton {
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
@@ -26,6 +25,42 @@ declare namespace SkillDetail {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace propTypes {
+        const ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+export default SkillDetail;
+import PropTypes from "prop-types";
+declare function SkillDetail(props: any, context: any): JSX.Element;
+declare namespace SkillDetail {
+    export namespace contextTypes_1 {
+        const skin_1: 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;
+            }>;
+        }>>;
+        export { skin_1 as skin };
+        const translate_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { translate_1 as translate };
+    }
+    export { contextTypes_1 as contextTypes };
+    export namespace propTypes_1 {
         const title: PropTypes.Validator<string>;
         const skillRef: PropTypes.Validator<string>;
         const description: PropTypes.Requireable<string>;
@@ -96,6 +131,6 @@ declare namespace SkillDetail {
         const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
     }
+    export { propTypes_1 as propTypes };
 }
-import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AAyDA,oEA+JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAcO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEA+JC"}

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

@@ -11,8 +11,7 @@ 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) => {
+export const ContinueLearningButton = (props, context) => {
   const {
     ongoingCoursesAvailable,
     onClick
@@ -45,7 +44,6 @@ const ContinueLearningButton = (props, context) => {
     onClick: onClick
   }));
 };
-
 ContinueLearningButton.contextTypes = {
   skin: Provider.childContextTypes.skin,
   translate: Provider.childContextTypes.translate
@@ -185,7 +183,7 @@ const SkillDetail = (props, context) => {
   }, score.toFixed(1), "%"))))) : null, /*#__PURE__*/React.createElement(ContinueLearning, {
     ongoingCourses: ongoingCourses
   }), /*#__PURE__*/React.createElement(AllCourses, {
-    skillIncludedCourses: skillIncludedCourses,
+    courses: skillIncludedCourses,
     totalCourses: totalCourses,
     filters: filters,
     sorting: sorting

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","Select","SelectOptionPropTypes","ButtonLink","Icon","CardsGrid","style","AllCourses","ContinueLearning","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","totalCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","length","showMoreWrapper","ctaWrapper","list","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\nimport ContinueLearning from './continue-learning';\n\nconst ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={!!ongoingCourses.list.length}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {score !== undefined ? (\n          <div className={style.progressInformationsWrapper}>\n            <div className={style.progressTitle}>{translate('your_progress')}</div>\n            <div className={style.skillCoursesAndQuestionsWrapper}>\n              {content ? (\n                <div className={style.skillInformation} data-name=\"skill-courses\">\n                  <span className={style.skillInformationNumber}>{content}</span>{' '}\n                  {translate('courses')}\n                </div>\n              ) : null}\n              {questionsToReview ? (\n                <div className={style.skillInformation} data-name=\"skill-questions\">\n                  <span className={style.skillInformationNumber}>{questionsToReview}</span>\n                  &nbsp;{translate('questions')}\n                </div>\n              ) : null}\n            </div>\n            <ProgressBar />\n            <div className={style.progressInformations}>\n              {content && (\n                <>\n                  <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n                    <span className={style.progressInformationNumber}>{contentCompleted}</span>\n                    {` ${translate('courses_completed')}`}\n                  </div>\n                  <div className={style.progressInformation} data-name=\"completed-percentage\">\n                    <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n                  </div>\n                </>\n              )}\n            </div>\n          </div>\n        ) : null}\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          skillIncludedCourses={skillIncludedCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","Select","SelectOptionPropTypes","ButtonLink","Icon","CardsGrid","style","AllCourses","ContinueLearning","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","totalCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","length","showMoreWrapper","ctaWrapper","list","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\nimport ContinueLearning from './continue-learning';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\n              <div className={style.skillFocusBadge}>\n                <Icon\n                  iconName=\"bullseye-arrow\"\n                  backgroundColor=\"#DDD1FF\"\n                  size={{\n                    faSize: 10,\n                    wrapperSize: 16\n                  }}\n                />\n                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={!!ongoingCourses.list.length}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {score !== undefined ? (\n          <div className={style.progressInformationsWrapper}>\n            <div className={style.progressTitle}>{translate('your_progress')}</div>\n            <div className={style.skillCoursesAndQuestionsWrapper}>\n              {content ? (\n                <div className={style.skillInformation} data-name=\"skill-courses\">\n                  <span className={style.skillInformationNumber}>{content}</span>{' '}\n                  {translate('courses')}\n                </div>\n              ) : null}\n              {questionsToReview ? (\n                <div className={style.skillInformation} data-name=\"skill-questions\">\n                  <span className={style.skillInformationNumber}>{questionsToReview}</span>\n                  &nbsp;{translate('questions')}\n                </div>\n              ) : null}\n            </div>\n            <ProgressBar />\n            <div className={style.progressInformations}>\n              {content && (\n                <>\n                  <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n                    <span className={style.progressInformationNumber}>{contentCompleted}</span>\n                    {` ${translate('courses_completed')}`}\n                  </div>\n                  <div className={style.progressInformation} data-name=\"completed-percentage\">\n                    <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n                  </div>\n                </>\n              )}\n            </div>\n          </div>\n        ) : null}\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          courses={skillIncludedCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

package/es/variables/courses.d.ts

@@ -0,0 +1,3 @@
+declare const COURSE_TYPES: string[];
+export { COURSE_TYPES };
+//# sourceMappingURL=courses.d.ts.map

package/es/variables/courses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"courses.d.ts","sourceRoot":"","sources":["../../src/variables/courses.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,UAAkD,CAAC;AAErE,OAAO,EAAC,YAAY,EAAC,CAAC"}

package/es/variables/courses.js

@@ -0,0 +1,3 @@
+const COURSE_TYPES = ['podcast', 'video', 'interactive', 'document'];
+export { COURSE_TYPES };
+//# sourceMappingURL=courses.js.map

package/es/variables/courses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"courses.js","names":["COURSE_TYPES"],"sources":["../../src/variables/courses.ts"],"sourcesContent":["const COURSE_TYPES = ['podcast', 'video', 'interactive', 'document'];\n\nexport {COURSE_TYPES};\n"],"mappings":"AAAA,MAAMA,YAAY,GAAG,CAAC,SAAD,EAAY,OAAZ,EAAqB,aAArB,EAAoC,UAApC,CAArB;AAEA,SAAQA,YAAR"}