@coorpacademy/components 11.40.10-alpha.16.0 → 11.40.11-alpha.0

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

@@ -20,7 +20,7 @@ const LearnerSkillCard = (props, context) => {
     label,
     focus,
     metrics,
-    progress,
+    progress = 0,
     icon,
     onClick
   } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useRef","PropTypes","Provider","GetTranslateFromContext","ProgressBar","COLORS","createGradientBackground","FaIcon","style","MAX_SCORE","updateBackgroundImage","ref","background","current","backgroundImage","LearnerSkillCard","props","context","ariaLabel","cardIndex","title","label","focus","metrics","progress","icon","onClick","content","questionsToReview","translate","color","name","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","defaultBackground","focusBackground","handleMouseEnter","handleMouseLeave","createElement","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","skillTitle","contentAndQuestionsWrapper","dangerouslySetInnerHTML","__html","count","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","type","oneOf","isRequired","string","number","bool","shape","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref, background) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    title,\n    label,\n    focus,\n    metrics,\n    progress,\n    icon,\n    onClick\n  } = props;\n  const {content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus'), COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill'), COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      data-name={`skill-card-${label}`}\n      onClick={onClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            <span style={{color: tagTextColor}}>{badgeLocale}</span>\n          </div>\n\n          <div className={style.questionWrapper}>\n            <div\n              data-name=\"skill-card-title\"\n              className={style.skillTitle}\n              aria-label={ariaLabel || title}\n            >\n              {title}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div\n                data-name=\"learner-skill-card-skill-content-number\"\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: translate('content', {count: content})}}\n              />\n              {questionsToReview ? (\n                <div\n                  className={style.skillInformation}\n                  data-name=\"learner-skill-card-skill-questions-wrapper\"\n                >\n                  <FaIcon\n                    {...{\n                      iconName: 'circle',\n                      iconColor: COLORS.cm_grey_400,\n                      backgroundColor: 'transparent',\n                      size: {faSize: 4, wrapperSize: 0}\n                    }}\n                  />\n                  <span\n                    data-name=\"learner-skill-card-questions-to-review\"\n                    // eslint-disable-next-line react/no-danger\n                    dangerouslySetInnerHTML={{\n                      __html: translate('skill_chart_side_panel_questions_to_review', {\n                        count: questionsToReview\n                      })\n                    }}\n                  />\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={progress}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  type: PropTypes.oneOf(['skill']).isRequired,\n  title: PropTypes.string.isRequired,\n  label: PropTypes.string,\n  'aria-label': PropTypes.string,\n  cardIndex: PropTypes.number,\n  focus: PropTypes.bool,\n  progress: PropTypes.number,\n  metrics: PropTypes.shape({\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  icon: PropTypes.shape({\n    color: PropTypes.string,\n    name: PropTypes.string\n  }),\n  onClick: PropTypes.func\n};\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useRef","PropTypes","Provider","GetTranslateFromContext","ProgressBar","COLORS","createGradientBackground","FaIcon","style","MAX_SCORE","updateBackgroundImage","ref","background","current","backgroundImage","LearnerSkillCard","props","context","ariaLabel","cardIndex","title","label","focus","metrics","progress","icon","onClick","content","questionsToReview","translate","color","name","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","defaultBackground","focusBackground","handleMouseEnter","handleMouseLeave","createElement","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","skillTitle","contentAndQuestionsWrapper","dangerouslySetInnerHTML","__html","count","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","type","oneOf","isRequired","string","number","bool","shape","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref, background) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    title,\n    label,\n    focus,\n    metrics,\n    progress = 0,\n    icon,\n    onClick\n  } = props;\n  const {content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus'), COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill'), COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      data-name={`skill-card-${label}`}\n      onClick={onClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            <span style={{color: tagTextColor}}>{badgeLocale}</span>\n          </div>\n\n          <div className={style.questionWrapper}>\n            <div\n              data-name=\"skill-card-title\"\n              className={style.skillTitle}\n              aria-label={ariaLabel || title}\n            >\n              {title}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div\n                data-name=\"learner-skill-card-skill-content-number\"\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: translate('content', {count: content})}}\n              />\n              {questionsToReview ? (\n                <div\n                  className={style.skillInformation}\n                  data-name=\"learner-skill-card-skill-questions-wrapper\"\n                >\n                  <FaIcon\n                    {...{\n                      iconName: 'circle',\n                      iconColor: COLORS.cm_grey_400,\n                      backgroundColor: 'transparent',\n                      size: {faSize: 4, wrapperSize: 0}\n                    }}\n                  />\n                  <span\n                    data-name=\"learner-skill-card-questions-to-review\"\n                    // eslint-disable-next-line react/no-danger\n                    dangerouslySetInnerHTML={{\n                      __html: translate('skill_chart_side_panel_questions_to_review', {\n                        count: questionsToReview\n                      })\n                    }}\n                  />\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={progress}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  type: PropTypes.oneOf(['skill']).isRequired,\n  title: PropTypes.string.isRequired,\n  label: PropTypes.string,\n  'aria-label': PropTypes.string,\n  cardIndex: PropTypes.number,\n  focus: PropTypes.bool,\n  progress: PropTypes.number,\n  metrics: PropTypes.shape({\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  icon: PropTypes.shape({\n    color: PropTypes.string,\n    name: PropTypes.string\n  }),\n  onClick: PropTypes.func\n};\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/playlist-card/style.css

@@ -3,6 +3,7 @@
 @value cm_grey_100 from colors;
 @value cm_grey_400 from colors;
 @value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
 @value cm_grey_75 from colors;
 
 .container {
@@ -46,14 +47,14 @@
   left: 0;
   width: 100%;
   height: 160px;
-  background: #1d1d2b80;
+  background: color(cm_grey_700 a(50%)); 
   border-top-right-radius: 12px;
   border-top-left-radius: 12px;
   transition: all 0.5s ease-out;
 }
 
 .container:hover .imageContainer::after {
-  background: #1d1d2b00;
+  background: color(cm_grey_700 a(0%)); 
 }
 .container:hover {
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);

package/es/template/common/search-page/index.d.ts

@@ -78,6 +78,66 @@ declare namespace SearchPage {
             filterGroupAriaLabel: PropTypes.Requireable<string>;
             sortAriaLabel: PropTypes.Requireable<string>;
         }>>;
+        const quickFilters: PropTypes.Requireable<PropTypes.InferProps<{
+            primaryOption: PropTypes.Requireable<PropTypes.InferProps<{
+                defaultLabel: PropTypes.Requireable<string>;
+                defaultValue: PropTypes.Requireable<string>;
+                defaultIconName: PropTypes.Requireable<string>;
+                defaultSelected: PropTypes.Requireable<boolean>;
+                defaultAriaLabel: PropTypes.Requireable<string>;
+                onDefaultClick: PropTypes.Requireable<(...args: any[]) => any>;
+            }>>;
+            nextFilterAriaLabel: PropTypes.Requireable<string>;
+            previousFilterAriaLabel: PropTypes.Requireable<string>;
+            filterOptionsAriaLabel: PropTypes.Requireable<string>;
+            filterOptions: PropTypes.Requireable<(PropTypes.InferProps<{
+                iconName: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+                value: PropTypes.Requireable<string>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                selected: PropTypes.Requireable<boolean>;
+                ariaLabel: PropTypes.Requireable<string>;
+            }> | null | undefined)[]>;
+            filterButton: PropTypes.Requireable<PropTypes.InferProps<{
+                type: PropTypes.Requireable<string>;
+                usage: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+                content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+                'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
+                'data-name': PropTypes.Requireable<string>;
+                'data-testid': PropTypes.Requireable<string>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<{
+                    position: PropTypes.Requireable<string>;
+                    type: PropTypes.Requireable<string>;
+                    faIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                        name: PropTypes.Validator<string>;
+                        color: PropTypes.Requireable<string>;
+                        backgroundColor: PropTypes.Requireable<string>;
+                        size: PropTypes.Requireable<number>;
+                        customStyle: PropTypes.Requireable<{
+                            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+                        }>;
+                    }>>;
+                }>>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                link: PropTypes.Requireable<PropTypes.InferProps<{
+                    href: PropTypes.Requireable<string>;
+                    download: PropTypes.Requireable<boolean>;
+                    target: PropTypes.Requireable<string>;
+                }>>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
+                hoverColor: PropTypes.Requireable<string>;
+                disabled: PropTypes.Requireable<boolean>;
+                className: PropTypes.Requireable<string>;
+                customStyle: PropTypes.Requireable<{
+                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+                }>;
+                useTitle: PropTypes.Requireable<boolean>;
+                customLabelClassName: PropTypes.Requireable<string>;
+            }>>;
+        }>>;
         const cards: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<((PropTypes.InferPropsInner<Pick<any, any>> & Partial<PropTypes.InferPropsInner<Pick<any, never>>>) | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{

package/es/template/common/search-page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAkBA,mEAiJC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAmBA,mEAoJC"}

package/es/template/common/search-page/index.js

@@ -1,3 +1,7 @@
+import _sortBy from "lodash/fp/sortBy";
+import _size from "lodash/fp/size";
+import _pipe from "lodash/fp/pipe";
+import _map from "lodash/fp/map";
 import _keys from "lodash/fp/keys";
 import _isEmpty from "lodash/fp/isEmpty";
 import _getOr from "lodash/fp/getOr";
@@ -17,11 +21,13 @@ import Tag from '../../../atom/tag';
 import { cardPropTypes } from '../../../molecule/card';
 import LearningPriorityCard from '../../../molecule/learning-priority-card';
 import { COLORS } from '../../../variables/colors';
+import QuickFilters from '../../../molecule/quick-filters';
 import style from './style.css';
 const SearchPage = (props, context) => {
   const {
     title,
     searchFilters,
+    quickFilters,
     cards,
     count,
     noresultsfound,
@@ -102,12 +108,11 @@ const SearchPage = (props, context) => {
   }))), recommendationsView) : /*#__PURE__*/React.createElement(CardsGrid, cards);
 
   // Convert sections object to array and sort by order
-  const sectionsArray = _keys(sections).map(key => ({
+  const sortedSections = _pipe(_keys, _map(key => ({
     key,
     ...sections[key]
-  }));
-  const sortedSections = sectionsArray.sort((a, b) => a.order - b.order);
-  const hasSections = sortedSections.length > 0;
+  })), _sortBy('order'))(sections);
+  const hasSections = _size(sortedSections) > 0;
   const contentGridSection = /*#__PURE__*/React.createElement("div", {
     className: style.contentSection
   }, /*#__PURE__*/React.createElement("div", {
@@ -125,12 +130,15 @@ const SearchPage = (props, context) => {
   })), /*#__PURE__*/React.createElement("div", {
     className: style.contentGrid
   }, " ", cardsView)));
-  return /*#__PURE__*/React.createElement("div", null, searchFilters ? /*#__PURE__*/React.createElement(Filters, _extends({}, searchFilters, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-name": "filters",
+    className: quickFilters ? style.quickFilters : null
+  }, searchFilters ? /*#__PURE__*/React.createElement(Filters, _extends({}, searchFilters, {
     moreSortAriaLabel: moreSortAriaLabel,
     moreFilterAriaLabel: moreFilterAriaLabel,
     filterGroupAriaLabel: filterGroupAriaLabel,
     sortAriaLabel: sortAriaLabel
-  })) : null, hasSections ? /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React.createElement(QuickFilters, quickFilters), hasSections ? /*#__PURE__*/React.createElement("div", {
     "data-name": "explorerSections",
     className: style.sectionsWrapper
   }, sortedSections.map((section, index) => /*#__PURE__*/React.createElement("div", {
@@ -154,6 +162,7 @@ SearchPage.propTypes = process.env.NODE_ENV !== "production" ? {
   noresultsfound: PropTypes.string,
   title: PropTypes.string,
   searchFilters: PropTypes.shape(Filters.propTypes),
+  quickFilters: PropTypes.shape(QuickFilters.propTypes),
   cards: PropTypes.shape(CardsGrid.propTypes),
   count: PropTypes.number,
   clearFilters: PropTypes.shape(Button.propTypes),

package/es/template/common/search-page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useRef","PropTypes","Provider","Button","Filters","CardsGrid","CardsList","CertificationCard","LearnerSkillCard","PlaylistCard","CMPopin","Tag","cardPropTypes","LearningPriorityCard","COLORS","style","SearchPage","props","context","title","searchFilters","cards","count","noresultsfound","clearFilters","recommendations","moreSortAriaLabel","moreFilterAriaLabel","filterGroupAriaLabel","sortAriaLabel","popinWithCards","sections","skin","defaultColor","_getOr","nodeRef","recommendationsView","_isEmpty","createElement","renderSection","section","sectionCount","length","titleWithCount","className","sectionTitle","label","toString","type","size","customStyle","backgroundColor","cm_grey_100","color","neutral_500","sectionProps","dataName","key","_extends","cardsView","list","noresults","noresultstxt","clear","background","sectionsArray","_keys","map","sortedSections","sort","a","b","order","hasSections","contentGridSection","contentSection","sectionHeader","contentGrid","sectionsWrapper","index","cardsWrapper","role","ref","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","number","objectOf","arrayOf","oneOfType","showMore","onShowMore","func","showMoreOnLeftAriaLabel","showMoreOnRightAriaLabel"],"sources":["../../../../src/template/common/search-page/index.js"],"sourcesContent":["import React, {useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, isEmpty, keys} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport Filters from '../../../molecule/filters';\nimport CardsGrid from '../../../organism/cards-grid';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport CertificationCard from '../../../molecule/certification-card';\nimport LearnerSkillCard from '../../../molecule/learner-skill-card';\nimport PlaylistCard from '../../../molecule/playlist-card';\nimport CMPopin from '../../../molecule/cm-popin';\nimport Tag from '../../../atom/tag';\nimport {cardPropTypes} from '../../../molecule/card';\nimport LearningPriorityCard from '../../../molecule/learning-priority-card';\nimport {COLORS} from '../../../variables/colors';\nimport style from './style.css';\n\nconst SearchPage = (props, context) => {\n  const {\n    title,\n    searchFilters,\n    cards,\n    count,\n    noresultsfound,\n    clearFilters,\n    recommendations,\n    moreSortAriaLabel,\n    moreFilterAriaLabel,\n    filterGroupAriaLabel,\n    sortAriaLabel,\n    popinWithCards,\n    sections = {}\n  } = props;\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n  const nodeRef = useRef(null);\n  const recommendationsView = isEmpty(recommendations) ? null : <CardsList {...recommendations} />;\n\n  // Helper function to render content sections\n  const renderSection = section => {\n    if (!section || isEmpty(section.cards)) return null;\n\n    // Use count from props, fallback to cards.length\n    const sectionCount = section.count || section.cards.length;\n\n    // Create title with count tag\n    const titleWithCount = (\n      <div className={style.sectionTitle}>\n        <span data-name=\"section-title\">{section.title}</span>\n        <Tag\n          label={sectionCount.toString()}\n          type=\"default\"\n          size=\"S\"\n          customStyle={{backgroundColor: COLORS.cm_grey_100, color: COLORS.neutral_500}}\n        />\n      </div>\n    );\n\n    const sectionProps = {\n      ...section,\n      title: titleWithCount,\n      dataName: `${section.key}-section`\n    };\n\n    // Use CardsList with appropriate type for all sections\n    if (section.key === 'certifications') {\n      return <CardsList {...sectionProps} type=\"certifications\" />;\n    }\n\n    if (section.key === 'skills') {\n      return <CardsList {...sectionProps} type=\"skills\" />;\n    }\n\n    if (section.key === 'playlists') {\n      return <CardsList {...sectionProps} type=\"playlists\" />;\n    }\n\n    // For new content, use standard cards\n    return <CardsList {...sectionProps} />;\n  };\n\n  const cardsView = isEmpty(cards?.list) ? (\n    <div>\n      <div className={style.noresults}>\n        <div className={style.noresultstxt}>{noresultsfound}</div>\n        <Button\n          {...clearFilters}\n          data-name=\"searchPageClear\"\n          className={style.clear}\n          style={{background: defaultColor}}\n          type=\"link\"\n        />\n      </div>\n      {recommendationsView}\n    </div>\n  ) : (\n    <CardsGrid {...cards} />\n  );\n\n  // Convert sections object to array and sort by order\n  const sectionsArray = keys(sections).map(key => ({\n    key,\n    ...sections[key]\n  }));\n  const sortedSections = sectionsArray.sort((a, b) => a.order - b.order);\n\n  const hasSections = sortedSections.length > 0;\n\n  const contentGridSection = (\n    <div className={style.contentSection}>\n      <div className={style.sectionHeader}>\n        <div className={style.sectionTitle}>\n          <span>{title}</span>\n          <Tag\n            label={count || cards.list.length.toString()}\n            type=\"default\"\n            size=\"S\"\n            customStyle={{backgroundColor: COLORS.cm_grey_100, color: COLORS.neutral_500}}\n          />\n        </div>\n        <div className={style.contentGrid}> {cardsView}</div>\n      </div>\n    </div>\n  );\n\n  return (\n    <div>\n      {searchFilters ? (\n        <Filters\n          {...searchFilters}\n          moreSortAriaLabel={moreSortAriaLabel}\n          moreFilterAriaLabel={moreFilterAriaLabel}\n          filterGroupAriaLabel={filterGroupAriaLabel}\n          sortAriaLabel={sortAriaLabel}\n        />\n      ) : null}\n\n      {hasSections ? (\n        <div data-name=\"explorerSections\" className={style.sectionsWrapper}>\n          {sortedSections.map((section, index) => (\n            <div data-name={`section-${section.key}`} key={`${section.key}-${index}`}>\n              {renderSection(section)}\n            </div>\n          ))}\n          {contentGridSection ? <div>{contentGridSection}</div> : null}\n        </div>\n      ) : (\n        <div data-name=\"searchResult\" className={style.cardsWrapper}>\n          <div className={style.title} role=\"status\">\n            {title}\n          </div>\n          {cardsView}\n        </div>\n      )}\n\n      {popinWithCards ? (\n        <div className={style.popinWithCards} ref={nodeRef}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  noresultsfound: PropTypes.string,\n  title: PropTypes.string,\n  searchFilters: PropTypes.shape(Filters.propTypes),\n  cards: PropTypes.shape(CardsGrid.propTypes),\n  count: PropTypes.number,\n  clearFilters: PropTypes.shape(Button.propTypes),\n  recommendations: PropTypes.shape(CardsList.propTypes),\n  moreSortAriaLabel: PropTypes.string,\n  moreFilterAriaLabel: PropTypes.string,\n  filterGroupAriaLabel: PropTypes.string,\n  sortAriaLabel: PropTypes.string,\n  popinWithCards: PropTypes.shape(CMPopin.propTypes),\n  sections: PropTypes.objectOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      cards: PropTypes.arrayOf(\n        PropTypes.oneOfType([\n          PropTypes.shape(cardPropTypes),\n          PropTypes.shape(LearnerSkillCard.propTypes),\n          PropTypes.shape(CertificationCard.propTypes),\n          PropTypes.shape(PlaylistCard.propTypes),\n          PropTypes.shape(LearningPriorityCard.propTypes)\n        ])\n      ),\n      showMore: PropTypes.string,\n      onShowMore: PropTypes.func,\n      order: PropTypes.number,\n      count: PropTypes.number,\n      'arrows-aria-label': PropTypes.shape({\n        showMoreOnLeftAriaLabel: PropTypes.string,\n        showMoreOnRightAriaLabel: PropTypes.string\n      })\n    })\n  )\n};\n\nexport default SearchPage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useRef","PropTypes","Provider","Button","Filters","CardsGrid","CardsList","CertificationCard","LearnerSkillCard","PlaylistCard","CMPopin","Tag","cardPropTypes","LearningPriorityCard","COLORS","QuickFilters","style","SearchPage","props","context","title","searchFilters","quickFilters","cards","count","noresultsfound","clearFilters","recommendations","moreSortAriaLabel","moreFilterAriaLabel","filterGroupAriaLabel","sortAriaLabel","popinWithCards","sections","skin","defaultColor","_getOr","nodeRef","recommendationsView","_isEmpty","createElement","renderSection","section","sectionCount","length","titleWithCount","className","sectionTitle","label","toString","type","size","customStyle","backgroundColor","cm_grey_100","color","neutral_500","sectionProps","dataName","key","_extends","cardsView","list","noresults","noresultstxt","clear","background","sortedSections","_pipe","_keys","_map","_sortBy","hasSections","_size","contentGridSection","contentSection","sectionHeader","contentGrid","sectionsWrapper","map","index","cardsWrapper","role","ref","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","number","objectOf","arrayOf","oneOfType","showMore","onShowMore","func","order","showMoreOnLeftAriaLabel","showMoreOnRightAriaLabel"],"sources":["../../../../src/template/common/search-page/index.js"],"sourcesContent":["import React, {useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, isEmpty, keys, map, pipe, size, sortBy} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport Filters from '../../../molecule/filters';\nimport CardsGrid from '../../../organism/cards-grid';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport CertificationCard from '../../../molecule/certification-card';\nimport LearnerSkillCard from '../../../molecule/learner-skill-card';\nimport PlaylistCard from '../../../molecule/playlist-card';\nimport CMPopin from '../../../molecule/cm-popin';\nimport Tag from '../../../atom/tag';\nimport {cardPropTypes} from '../../../molecule/card';\nimport LearningPriorityCard from '../../../molecule/learning-priority-card';\nimport {COLORS} from '../../../variables/colors';\nimport QuickFilters from '../../../molecule/quick-filters';\nimport style from './style.css';\n\nconst SearchPage = (props, context) => {\n  const {\n    title,\n    searchFilters,\n    quickFilters,\n    cards,\n    count,\n    noresultsfound,\n    clearFilters,\n    recommendations,\n    moreSortAriaLabel,\n    moreFilterAriaLabel,\n    filterGroupAriaLabel,\n    sortAriaLabel,\n    popinWithCards,\n    sections = {}\n  } = props;\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n  const nodeRef = useRef(null);\n  const recommendationsView = isEmpty(recommendations) ? null : <CardsList {...recommendations} />;\n\n  // Helper function to render content sections\n  const renderSection = section => {\n    if (!section || isEmpty(section.cards)) return null;\n\n    // Use count from props, fallback to cards.length\n    const sectionCount = section.count || section.cards.length;\n\n    // Create title with count tag\n    const titleWithCount = (\n      <div className={style.sectionTitle}>\n        <span data-name=\"section-title\">{section.title}</span>\n        <Tag\n          label={sectionCount.toString()}\n          type=\"default\"\n          size=\"S\"\n          customStyle={{backgroundColor: COLORS.cm_grey_100, color: COLORS.neutral_500}}\n        />\n      </div>\n    );\n\n    const sectionProps = {\n      ...section,\n      title: titleWithCount,\n      dataName: `${section.key}-section`\n    };\n\n    // Use CardsList with appropriate type for all sections\n    if (section.key === 'certifications') {\n      return <CardsList {...sectionProps} type=\"certifications\" />;\n    }\n\n    if (section.key === 'skills') {\n      return <CardsList {...sectionProps} type=\"skills\" />;\n    }\n\n    if (section.key === 'playlists') {\n      return <CardsList {...sectionProps} type=\"playlists\" />;\n    }\n\n    // For new content, use standard cards\n    return <CardsList {...sectionProps} />;\n  };\n\n  const cardsView = isEmpty(cards?.list) ? (\n    <div>\n      <div className={style.noresults}>\n        <div className={style.noresultstxt}>{noresultsfound}</div>\n        <Button\n          {...clearFilters}\n          data-name=\"searchPageClear\"\n          className={style.clear}\n          style={{background: defaultColor}}\n          type=\"link\"\n        />\n      </div>\n      {recommendationsView}\n    </div>\n  ) : (\n    <CardsGrid {...cards} />\n  );\n\n  // Convert sections object to array and sort by order\n  const sortedSections = pipe(\n    keys,\n    map(key => ({key, ...sections[key]})),\n    sortBy('order')\n  )(sections);\n\n  const hasSections = size(sortedSections) > 0;\n\n  const contentGridSection = (\n    <div className={style.contentSection}>\n      <div className={style.sectionHeader}>\n        <div className={style.sectionTitle}>\n          <span>{title}</span>\n          <Tag\n            label={count || cards.list.length.toString()}\n            type=\"default\"\n            size=\"S\"\n            customStyle={{backgroundColor: COLORS.cm_grey_100, color: COLORS.neutral_500}}\n          />\n        </div>\n        <div className={style.contentGrid}> {cardsView}</div>\n      </div>\n    </div>\n  );\n\n  return (\n    <div data-name=\"filters\" className={quickFilters ? style.quickFilters : null}>\n      {searchFilters ? (\n        <Filters\n          {...searchFilters}\n          moreSortAriaLabel={moreSortAriaLabel}\n          moreFilterAriaLabel={moreFilterAriaLabel}\n          filterGroupAriaLabel={filterGroupAriaLabel}\n          sortAriaLabel={sortAriaLabel}\n        />\n      ) : (\n        <QuickFilters {...quickFilters} />\n      )}\n\n      {hasSections ? (\n        <div data-name=\"explorerSections\" className={style.sectionsWrapper}>\n          {sortedSections.map((section, index) => (\n            <div data-name={`section-${section.key}`} key={`${section.key}-${index}`}>\n              {renderSection(section)}\n            </div>\n          ))}\n          {contentGridSection ? <div>{contentGridSection}</div> : null}\n        </div>\n      ) : (\n        <div data-name=\"searchResult\" className={style.cardsWrapper}>\n          <div className={style.title} role=\"status\">\n            {title}\n          </div>\n          {cardsView}\n        </div>\n      )}\n\n      {popinWithCards ? (\n        <div className={style.popinWithCards} ref={nodeRef}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  noresultsfound: PropTypes.string,\n  title: PropTypes.string,\n  searchFilters: PropTypes.shape(Filters.propTypes),\n  quickFilters: PropTypes.shape(QuickFilters.propTypes),\n  cards: PropTypes.shape(CardsGrid.propTypes),\n  count: PropTypes.number,\n  clearFilters: PropTypes.shape(Button.propTypes),\n  recommendations: PropTypes.shape(CardsList.propTypes),\n  moreSortAriaLabel: PropTypes.string,\n  moreFilterAriaLabel: PropTypes.string,\n  filterGroupAriaLabel: PropTypes.string,\n  sortAriaLabel: PropTypes.string,\n  popinWithCards: PropTypes.shape(CMPopin.propTypes),\n  sections: PropTypes.objectOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      cards: PropTypes.arrayOf(\n        PropTypes.oneOfType([\n          PropTypes.shape(cardPropTypes),\n          PropTypes.shape(LearnerSkillCard.propTypes),\n          PropTypes.shape(CertificationCard.propTypes),\n          PropTypes.shape(PlaylistCard.propTypes),\n          PropTypes.shape(LearningPriorityCard.propTypes)\n        ])\n      ),\n      showMore: PropTypes.string,\n      onShowMore: PropTypes.func,\n      order: PropTypes.number,\n      count: PropTypes.number,\n      'arrows-aria-label': PropTypes.shape({\n        showMoreOnLeftAriaLabel: PropTypes.string,\n        showMoreOnRightAriaLabel: PropTypes.string\n      })\n    })\n  )\n};\n\nexport default SearchPage;\n"],"mappings":"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","ignoreList":[]}

package/es/template/common/search-page/style.css

@@ -31,6 +31,13 @@
   margin: 8px 0;
 }
 
+.quickFilters {
+  position: relative;
+  max-width: 1080px;
+  margin: auto;
+  box-sizing: border-box;
+}
+
 .title {
   font-family: "Gilroy";
   font-size: 20px;

package/lib/molecule/learner-skill-card/index.js

@@ -28,7 +28,7 @@ const LearnerSkillCard = (props, context) => {
     label,
     focus,
     metrics,
-    progress,
+    progress = 0,
     icon,
     onClick
   } = props;

package/lib/molecule/learner-skill-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_progressBar","_colors","_getBackgroundGradientColor","_icon","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MAX_SCORE","updateBackgroundImage","ref","background","current","style","backgroundImage","exports","LearnerSkillCard","props","context","ariaLabel","cardIndex","title","label","focus","metrics","progress","icon","onClick","content","questionsToReview","translate","GetTranslateFromContext","color","name","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","COLORS","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","useRef","defaultBackground","useMemo","createGradientBackground","focusBackground","handleMouseEnter","useCallback","handleMouseLeave","createElement","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","skillTitle","contentAndQuestionsWrapper","dangerouslySetInnerHTML","__html","count","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","type","PropTypes","oneOf","isRequired","string","number","bool","shape","func","_default"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref, background) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    title,\n    label,\n    focus,\n    metrics,\n    progress,\n    icon,\n    onClick\n  } = props;\n  const {content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus'), COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill'), COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      data-name={`skill-card-${label}`}\n      onClick={onClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            <span style={{color: tagTextColor}}>{badgeLocale}</span>\n          </div>\n\n          <div className={style.questionWrapper}>\n            <div\n              data-name=\"skill-card-title\"\n              className={style.skillTitle}\n              aria-label={ariaLabel || title}\n            >\n              {title}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div\n                data-name=\"learner-skill-card-skill-content-number\"\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: translate('content', {count: content})}}\n              />\n              {questionsToReview ? (\n                <div\n                  className={style.skillInformation}\n                  data-name=\"learner-skill-card-skill-questions-wrapper\"\n                >\n                  <FaIcon\n                    {...{\n                      iconName: 'circle',\n                      iconColor: COLORS.cm_grey_400,\n                      backgroundColor: 'transparent',\n                      size: {faSize: 4, wrapperSize: 0}\n                    }}\n                  />\n                  <span\n                    data-name=\"learner-skill-card-questions-to-review\"\n                    // eslint-disable-next-line react/no-danger\n                    dangerouslySetInnerHTML={{\n                      __html: translate('skill_chart_side_panel_questions_to_review', {\n                        count: questionsToReview\n                      })\n                    }}\n                  />\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={progress}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  type: PropTypes.oneOf(['skill']).isRequired,\n  title: PropTypes.string.isRequired,\n  label: PropTypes.string,\n  'aria-label': PropTypes.string,\n  cardIndex: PropTypes.number,\n  focus: PropTypes.bool,\n  progress: PropTypes.number,\n  metrics: PropTypes.shape({\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  icon: PropTypes.shape({\n    color: PropTypes.string,\n    name: PropTypes.string\n  }),\n  onClick: PropTypes.func\n};\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_progressBar","_colors","_getBackgroundGradientColor","_icon","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MAX_SCORE","updateBackgroundImage","ref","background","current","style","backgroundImage","exports","LearnerSkillCard","props","context","ariaLabel","cardIndex","title","label","focus","metrics","progress","icon","onClick","content","questionsToReview","translate","GetTranslateFromContext","color","name","badgeIconName","badgeLocale","tagTextColor","tagBackgroundColor","COLORS","purple_700","purple_100","neutral_500","cm_grey_100","headerBackgroundRef","useRef","defaultBackground","useMemo","createGradientBackground","focusBackground","handleMouseEnter","useCallback","handleMouseLeave","createElement","className","learnerSkillCardContainer","onMouseEnter","onMouseLeave","iconHeaderWrapper","iconWrapper","iconName","iconColor","size","faSize","wrapperSize","borderRadius","gradientBackground","customStyle","border","learnerSkillCardContent","skillTitleWrapper","skillFocusBadge","backgroundColor","questionWrapper","skillTitle","contentAndQuestionsWrapper","dangerouslySetInnerHTML","__html","count","skillInformation","cm_grey_400","progressInformations","value","displayInfo","max","progressWrapper","cm_positive_500","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","type","PropTypes","oneOf","isRequired","string","number","bool","shape","func","_default"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport {createGradientBackground} from '../../util/get-background-gradient-color';\nimport FaIcon from '../../atom/icon';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\n\nexport const updateBackgroundImage = (ref, background) => {\n  if (ref.current) {\n    ref.current.style.backgroundImage = background;\n  }\n};\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    cardIndex,\n    title,\n    label,\n    focus,\n    metrics,\n    progress = 0,\n    icon,\n    onClick\n  } = props;\n  const {content, questionsToReview = 0} = metrics;\n  const translate = GetTranslateFromContext(context);\n  const {color, name} = icon;\n  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus\n    ? ['bullseye-arrow', translate('skill_focus'), COLORS.purple_700, COLORS.purple_100]\n    : ['shapes', translate('skill'), COLORS.neutral_500, COLORS.cm_grey_100];\n  const headerBackgroundRef = useRef(null);\n  const defaultBackground = useMemo(() => createGradientBackground(color, '93%', '100%'), [color]);\n  const focusBackground = useMemo(() => createGradientBackground(color, '83%', '100%'), [color]);\n  const handleMouseEnter = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, focusBackground);\n  }, [focusBackground]);\n  const handleMouseLeave = useCallback(() => {\n    updateBackgroundImage(headerBackgroundRef, defaultBackground);\n  }, [defaultBackground]);\n  return (\n    <div\n      data-testid={`learner-skill-card-wrapper-${cardIndex}`}\n      data-name={`skill-card-${label}`}\n      onClick={onClick}\n      className={style.learnerSkillCardContainer}\n      aria-label={ariaLabel}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div\n        data-testid=\"learner-skill-card-icon-header-wrapper\"\n        ref={headerBackgroundRef}\n        className={style.iconHeaderWrapper}\n        style={{backgroundImage: defaultBackground, color: tagTextColor}}\n      >\n        <div className={style.iconWrapper} data-testid=\"learner-skill-card-icon-wrapper\">\n          <FaIcon\n            {...{\n              iconName: name,\n              iconColor: color,\n              size: {\n                faSize: 20,\n                wrapperSize: 44\n              },\n              borderRadius: '12px',\n              gradientBackground: true,\n              customStyle: {border: '4px solid white'}\n            }}\n          />\n        </div>\n      </div>\n      <div className={style.learnerSkillCardContent}>\n        <div className={style.skillTitleWrapper}>\n          <div\n            className={style.skillFocusBadge}\n            style={{\n              backgroundColor: tagBackgroundColor,\n              color: tagTextColor\n            }}\n          >\n            <FaIcon\n              {...{\n                iconName: badgeIconName,\n                backgroundColor: tagBackgroundColor,\n                size: {\n                  faSize: 10,\n                  wrapperSize: 16\n                }\n              }}\n            />\n            <span style={{color: tagTextColor}}>{badgeLocale}</span>\n          </div>\n\n          <div className={style.questionWrapper}>\n            <div\n              data-name=\"skill-card-title\"\n              className={style.skillTitle}\n              aria-label={ariaLabel || title}\n            >\n              {title}\n            </div>\n            <div className={style.contentAndQuestionsWrapper}>\n              <div\n                data-name=\"learner-skill-card-skill-content-number\"\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: translate('content', {count: content})}}\n              />\n              {questionsToReview ? (\n                <div\n                  className={style.skillInformation}\n                  data-name=\"learner-skill-card-skill-questions-wrapper\"\n                >\n                  <FaIcon\n                    {...{\n                      iconName: 'circle',\n                      iconColor: COLORS.cm_grey_400,\n                      backgroundColor: 'transparent',\n                      size: {faSize: 4, wrapperSize: 0}\n                    }}\n                  />\n                  <span\n                    data-name=\"learner-skill-card-questions-to-review\"\n                    // eslint-disable-next-line react/no-danger\n                    dangerouslySetInnerHTML={{\n                      __html: translate('skill_chart_side_panel_questions_to_review', {\n                        count: questionsToReview\n                      })\n                    }}\n                  />\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className={style.progressInformations}>\n        <ProgressBar\n          value={progress}\n          displayInfo={false}\n          max={MAX_SCORE}\n          className={style.progressWrapper}\n          style={{backgroundColor: COLORS.cm_positive_500}}\n        />\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  type: PropTypes.oneOf(['skill']).isRequired,\n  title: PropTypes.string.isRequired,\n  label: PropTypes.string,\n  'aria-label': PropTypes.string,\n  cardIndex: PropTypes.number,\n  focus: PropTypes.bool,\n  progress: PropTypes.number,\n  metrics: PropTypes.shape({\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  icon: PropTypes.shape({\n    color: PropTypes.string,\n    name: PropTypes.string\n  }),\n  onClick: PropTypes.func\n};\nexport default LearnerSkillCard;\n"],"mappings":"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","ignoreList":[]}

package/lib/molecule/playlist-card/style.css

@@ -3,6 +3,7 @@
 @value cm_grey_100 from colors;
 @value cm_grey_400 from colors;
 @value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
 @value cm_grey_75 from colors;
 
 .container {
@@ -46,14 +47,14 @@
   left: 0;
   width: 100%;
   height: 160px;
-  background: #1d1d2b80;
+  background: color(cm_grey_700 a(50%)); 
   border-top-right-radius: 12px;
   border-top-left-radius: 12px;
   transition: all 0.5s ease-out;
 }
 
 .container:hover .imageContainer::after {
-  background: #1d1d2b00;
+  background: color(cm_grey_700 a(0%)); 
 }
 .container:hover {
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);

package/lib/template/common/search-page/index.d.ts

@@ -78,6 +78,66 @@ declare namespace SearchPage {
             filterGroupAriaLabel: PropTypes.Requireable<string>;
             sortAriaLabel: PropTypes.Requireable<string>;
         }>>;
+        const quickFilters: PropTypes.Requireable<PropTypes.InferProps<{
+            primaryOption: PropTypes.Requireable<PropTypes.InferProps<{
+                defaultLabel: PropTypes.Requireable<string>;
+                defaultValue: PropTypes.Requireable<string>;
+                defaultIconName: PropTypes.Requireable<string>;
+                defaultSelected: PropTypes.Requireable<boolean>;
+                defaultAriaLabel: PropTypes.Requireable<string>;
+                onDefaultClick: PropTypes.Requireable<(...args: any[]) => any>;
+            }>>;
+            nextFilterAriaLabel: PropTypes.Requireable<string>;
+            previousFilterAriaLabel: PropTypes.Requireable<string>;
+            filterOptionsAriaLabel: PropTypes.Requireable<string>;
+            filterOptions: PropTypes.Requireable<(PropTypes.InferProps<{
+                iconName: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+                value: PropTypes.Requireable<string>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                selected: PropTypes.Requireable<boolean>;
+                ariaLabel: PropTypes.Requireable<string>;
+            }> | null | undefined)[]>;
+            filterButton: PropTypes.Requireable<PropTypes.InferProps<{
+                type: PropTypes.Requireable<string>;
+                usage: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+                content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+                'aria-label': PropTypes.Requireable<string>;
+                tooltipText: PropTypes.Requireable<string>;
+                tooltipPlacement: PropTypes.Requireable<string>;
+                'data-name': PropTypes.Requireable<string>;
+                'data-testid': PropTypes.Requireable<string>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<{
+                    position: PropTypes.Requireable<string>;
+                    type: PropTypes.Requireable<string>;
+                    faIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                        name: PropTypes.Validator<string>;
+                        color: PropTypes.Requireable<string>;
+                        backgroundColor: PropTypes.Requireable<string>;
+                        size: PropTypes.Requireable<number>;
+                        customStyle: PropTypes.Requireable<{
+                            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+                        }>;
+                    }>>;
+                }>>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                link: PropTypes.Requireable<PropTypes.InferProps<{
+                    href: PropTypes.Requireable<string>;
+                    download: PropTypes.Requireable<boolean>;
+                    target: PropTypes.Requireable<string>;
+                }>>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
+                hoverColor: PropTypes.Requireable<string>;
+                disabled: PropTypes.Requireable<boolean>;
+                className: PropTypes.Requireable<string>;
+                customStyle: PropTypes.Requireable<{
+                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+                }>;
+                useTitle: PropTypes.Requireable<boolean>;
+                customLabelClassName: PropTypes.Requireable<string>;
+            }>>;
+        }>>;
         const cards: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<((PropTypes.InferPropsInner<Pick<any, any>> & Partial<PropTypes.InferPropsInner<Pick<any, never>>>) | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{

package/lib/template/common/search-page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAkBA,mEAiJC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAmBA,mEAoJC"}

package/lib/template/common/search-page/index.js

@@ -2,6 +2,10 @@
 
 exports.__esModule = true;
 exports.default = void 0;
+var _sortBy2 = _interopRequireDefault(require("lodash/fp/sortBy"));
+var _size2 = _interopRequireDefault(require("lodash/fp/size"));
+var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
+var _map2 = _interopRequireDefault(require("lodash/fp/map"));
 var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
 var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
 var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
@@ -20,6 +24,7 @@ var _tag = _interopRequireDefault(require("../../../atom/tag"));
 var _card = require("../../../molecule/card");
 var _learningPriorityCard = _interopRequireDefault(require("../../../molecule/learning-priority-card"));
 var _colors = require("../../../variables/colors");
+var _quickFilters = _interopRequireDefault(require("../../../molecule/quick-filters"));
 var _style = _interopRequireDefault(require("./style.css"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -29,6 +34,7 @@ const SearchPage = (props, context) => {
   const {
     title,
     searchFilters,
+    quickFilters,
     cards,
     count,
     noresultsfound,
@@ -109,12 +115,11 @@ const SearchPage = (props, context) => {
   }))), recommendationsView) : /*#__PURE__*/_react.default.createElement(_cardsGrid.default, cards);
 
   // Convert sections object to array and sort by order
-  const sectionsArray = (0, _keys2.default)(sections).map(key => ({
+  const sortedSections = (0, _pipe2.default)(_keys2.default, (0, _map2.default)(key => ({
     key,
     ...sections[key]
-  }));
-  const sortedSections = sectionsArray.sort((a, b) => a.order - b.order);
-  const hasSections = sortedSections.length > 0;
+  })), (0, _sortBy2.default)('order'))(sections);
+  const hasSections = (0, _size2.default)(sortedSections) > 0;
   const contentGridSection = /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.contentSection
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -132,12 +137,15 @@ const SearchPage = (props, context) => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.contentGrid
   }, " ", cardsView)));
-  return /*#__PURE__*/_react.default.createElement("div", null, searchFilters ? /*#__PURE__*/_react.default.createElement(_filters.default, _extends({}, searchFilters, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "filters",
+    className: quickFilters ? _style.default.quickFilters : null
+  }, searchFilters ? /*#__PURE__*/_react.default.createElement(_filters.default, _extends({}, searchFilters, {
     moreSortAriaLabel: moreSortAriaLabel,
     moreFilterAriaLabel: moreFilterAriaLabel,
     filterGroupAriaLabel: filterGroupAriaLabel,
     sortAriaLabel: sortAriaLabel
-  })) : null, hasSections ? /*#__PURE__*/_react.default.createElement("div", {
+  })) : /*#__PURE__*/_react.default.createElement(_quickFilters.default, quickFilters), hasSections ? /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "explorerSections",
     className: _style.default.sectionsWrapper
   }, sortedSections.map((section, index) => /*#__PURE__*/_react.default.createElement("div", {
@@ -161,6 +169,7 @@ SearchPage.propTypes = process.env.NODE_ENV !== "production" ? {
   noresultsfound: _propTypes.default.string,
   title: _propTypes.default.string,
   searchFilters: _propTypes.default.shape(_filters.default.propTypes),
+  quickFilters: _propTypes.default.shape(_quickFilters.default.propTypes),
   cards: _propTypes.default.shape(_cardsGrid.default.propTypes),
   count: _propTypes.default.number,
   clearFilters: _propTypes.default.shape(_button.default.propTypes),