@coorpacademy/components 11.40.13 → 11.40.14-alpha.5

package/es/molecule/quick-filters/index.js

@@ -175,7 +175,9 @@ const QuickFilters = ({
         wrapperSize: 20
       },
       "aria-label": ariaLabel
-    }), /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("span", {
+      className: style.filterLabel
+    }, label), /*#__PURE__*/React.createElement("div", {
       className: style.bar,
       style: {
         background: primarySkinColor

package/es/molecule/quick-filters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","Provider","GetSkinFromContext","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","filterButtonWrapper","borderColor","label","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","_get","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","Provider","GetSkinFromContext","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","filterButtonWrapper","borderColor","label","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","_get","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span className={style.filterLabel}>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/quick-filters/style.css

@@ -113,6 +113,8 @@
 
 .filterLabel {
     min-width: 70px;
+    user-select: none;
+    text-align: center;
 }
 
 .filterSeparator {

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

@@ -25,6 +25,8 @@ declare namespace SearchPage {
         }>>;
     }
     namespace propTypes {
+        const newVersion: PropTypes.Requireable<boolean>;
+        const searchMessage: PropTypes.Requireable<string>;
         const noresultsfound: PropTypes.Requireable<string>;
         const title: PropTypes.Requireable<string>;
         const searchFilters: PropTypes.Requireable<PropTypes.InferProps<{
@@ -1113,6 +1115,40 @@ declare namespace SearchPage {
                 disabled: PropTypes.Requireable<boolean>;
             }>>;
         }>>;
+        const filtersModal: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            titleAriaLabel: PropTypes.Requireable<string>;
+            headerIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                name: PropTypes.Requireable<string>;
+                color: PropTypes.Requireable<string>;
+                backgroundColor: PropTypes.Requireable<string>;
+            }>>;
+            description: PropTypes.Requireable<string>;
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            isOpen: PropTypes.Requireable<boolean>;
+            footer: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+                text: PropTypes.Requireable<string>;
+                isError: any;
+                cancelButton: PropTypes.Requireable<PropTypes.InferProps<{
+                    label: PropTypes.Requireable<string>;
+                    onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+                    disabled: PropTypes.Requireable<boolean>;
+                }>>;
+                confirmButton: PropTypes.Requireable<PropTypes.InferProps<{
+                    label: PropTypes.Requireable<string>;
+                    onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+                    iconName: PropTypes.Requireable<string>;
+                    disabled: PropTypes.Requireable<boolean>;
+                    color: PropTypes.Requireable<string>;
+                }>>;
+            }> | null | undefined>>;
+            onClose: PropTypes.Requireable<(...args: any[]) => any>;
+            onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+            detectScrollbar: PropTypes.Requireable<boolean>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+            }>;
+        }>>;
         const sections: PropTypes.Requireable<{
             [x: string]: PropTypes.InferProps<{
                 title: PropTypes.Requireable<string>;

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":";AAmBA,mEAqJC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAqBA,mEAkLC"}

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

@@ -1,5 +1,4 @@
 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";
@@ -22,6 +21,8 @@ import { cardPropTypes } from '../../../molecule/card';
 import LearningPriorityCard from '../../../molecule/learning-priority-card';
 import { COLORS } from '../../../variables/colors';
 import QuickFilters from '../../../molecule/quick-filters';
+import BaseModal from '../../../molecule/base-modal';
+import MultiFilterPanel from '../../../molecule/multi-filter-panel';
 import style from './style.css';
 const SearchPage = (props, context) => {
   const {
@@ -38,7 +39,10 @@ const SearchPage = (props, context) => {
     filterGroupAriaLabel,
     sortAriaLabel,
     popinWithCards,
-    sections = {}
+    sections = {},
+    filtersModal,
+    searchMessage,
+    newVersion = false
   } = props;
   const {
     skin
@@ -116,7 +120,6 @@ const SearchPage = (props, context) => {
     key,
     ...sections[key]
   })), _sortBy('order'))(sections);
-  const hasSections = _size(sortedSections) > 0;
   const contentGridSection = /*#__PURE__*/React.createElement("div", {
     className: style.contentSection
   }, /*#__PURE__*/React.createElement("div", {
@@ -141,7 +144,26 @@ const SearchPage = (props, context) => {
     moreFilterAriaLabel: moreFilterAriaLabel,
     filterGroupAriaLabel: filterGroupAriaLabel,
     sortAriaLabel: sortAriaLabel
-  })) : null, quickFilters ? /*#__PURE__*/React.createElement(QuickFilters, quickFilters) : null, hasSections ? /*#__PURE__*/React.createElement("div", {
+  })) : null, quickFilters ? /*#__PURE__*/React.createElement(QuickFilters, quickFilters) : null, searchMessage ? /*#__PURE__*/React.createElement("div", {
+    className: style.searchMessageWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.searchMessage
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: searchMessage
+    }
+  }), /*#__PURE__*/React.createElement(Button, _extends({}, clearFilters, {
+    "data-name": "searchMeassageClear",
+    className: style.clear,
+    style: {
+      background: 'transparent',
+      color: defaultColor,
+      padding: '0 5px',
+      fontSize: '14px'
+    },
+    type: "link"
+  }))) : null, newVersion ? /*#__PURE__*/React.createElement("div", {
     "data-name": "explorerSections",
     className: style.sectionsWrapper
   }, sortedSections.map((section, index) => /*#__PURE__*/React.createElement("div", {
@@ -156,12 +178,14 @@ const SearchPage = (props, context) => {
   }, title), cardsView), popinWithCards ? /*#__PURE__*/React.createElement("div", {
     className: style.popinWithCards,
     ref: nodeRef
-  }, /*#__PURE__*/React.createElement(CMPopin, popinWithCards)) : null);
+  }, /*#__PURE__*/React.createElement(CMPopin, popinWithCards)) : null, filtersModal ? /*#__PURE__*/React.createElement(BaseModal, filtersModal, filtersModal.filterPanelProps ? /*#__PURE__*/React.createElement(MultiFilterPanel, filtersModal.filterPanelProps) : null) : null);
 };
 SearchPage.contextTypes = {
   skin: Provider.childContextTypes.skin
 };
 SearchPage.propTypes = process.env.NODE_ENV !== "production" ? {
+  newVersion: PropTypes.bool,
+  searchMessage: PropTypes.string,
   noresultsfound: PropTypes.string,
   title: PropTypes.string,
   searchFilters: PropTypes.shape(Filters.propTypes),
@@ -175,6 +199,7 @@ SearchPage.propTypes = process.env.NODE_ENV !== "production" ? {
   filterGroupAriaLabel: PropTypes.string,
   sortAriaLabel: PropTypes.string,
   popinWithCards: PropTypes.shape(CMPopin.propTypes),
+  filtersModal: PropTypes.shape(BaseModal.propTypes),
   sections: PropTypes.objectOf(PropTypes.shape({
     title: PropTypes.string,
     cards: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(cardPropTypes), PropTypes.shape(LearnerSkillCard.propTypes), PropTypes.shape(CertificationCard.propTypes), PropTypes.shape(PlaylistCard.propTypes), PropTypes.shape(LearningPriorityCard.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","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","_extends","customStyle","padding","renderSection","section","sectionCount","length","titleWithCount","className","sectionTitle","label","toString","type","size","backgroundColor","cm_grey_100","color","neutral_500","sectionProps","dataName","key","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 : (\n    <CardsList {...recommendations} customStyle={{padding: 0}} />\n  );\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\">\n      {searchFilters ? (\n        <Filters\n          {...searchFilters}\n          moreSortAriaLabel={moreSortAriaLabel}\n          moreFilterAriaLabel={moreFilterAriaLabel}\n          filterGroupAriaLabel={filterGroupAriaLabel}\n          sortAriaLabel={sortAriaLabel}\n        />\n      ) : null}\n      {quickFilters ? <QuickFilters {...quickFilters} /> : 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  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":[]}
+{"version":3,"file":"index.js","names":["React","useRef","PropTypes","Provider","Button","Filters","CardsGrid","CardsList","CertificationCard","LearnerSkillCard","PlaylistCard","CMPopin","Tag","cardPropTypes","LearningPriorityCard","COLORS","QuickFilters","BaseModal","MultiFilterPanel","style","SearchPage","props","context","title","searchFilters","quickFilters","cards","count","noresultsfound","clearFilters","recommendations","moreSortAriaLabel","moreFilterAriaLabel","filterGroupAriaLabel","sortAriaLabel","popinWithCards","sections","filtersModal","searchMessage","newVersion","skin","defaultColor","_getOr","nodeRef","recommendationsView","_isEmpty","createElement","_extends","customStyle","padding","renderSection","section","sectionCount","length","titleWithCount","className","sectionTitle","label","toString","type","size","backgroundColor","cm_grey_100","color","neutral_500","sectionProps","dataName","key","cardsView","list","noresults","noresultstxt","clear","background","sortedSections","_pipe","_keys","_map","_sortBy","contentGridSection","contentSection","sectionHeader","contentGrid","searchMessageWrapper","dangerouslySetInnerHTML","__html","fontSize","sectionsWrapper","map","index","cardsWrapper","role","ref","filterPanelProps","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","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, 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 BaseModal from '../../../molecule/base-modal';\nimport MultiFilterPanel from '../../../molecule/multi-filter-panel';\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    filtersModal,\n    searchMessage,\n    newVersion = false\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 : (\n    <CardsList {...recommendations} customStyle={{padding: 0}} />\n  );\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 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\">\n      {searchFilters ? (\n        <Filters\n          {...searchFilters}\n          moreSortAriaLabel={moreSortAriaLabel}\n          moreFilterAriaLabel={moreFilterAriaLabel}\n          filterGroupAriaLabel={filterGroupAriaLabel}\n          sortAriaLabel={sortAriaLabel}\n        />\n      ) : null}\n      {quickFilters ? <QuickFilters {...quickFilters} /> : null}\n      {searchMessage ? (\n        <div className={style.searchMessageWrapper}>\n          <span\n            className={style.searchMessage}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: searchMessage}}\n          />\n          <Button\n            {...clearFilters}\n            data-name=\"searchMeassageClear\"\n            className={style.clear}\n            style={{\n              background: 'transparent',\n              color: defaultColor,\n              padding: '0 5px',\n              fontSize: '14px'\n            }}\n            type=\"link\"\n          />\n        </div>\n      ) : null}\n      {newVersion ? (\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\n      {filtersModal ? (\n        <BaseModal {...filtersModal}>\n          {filtersModal.filterPanelProps ? (\n            <MultiFilterPanel {...filtersModal.filterPanelProps} />\n          ) : null}\n        </BaseModal>\n      ) : null}\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  newVersion: PropTypes.bool,\n  searchMessage: PropTypes.string,\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  filtersModal: PropTypes.shape(BaseModal.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

@@ -11,7 +11,6 @@
 .cardsWrapper {
   display: block;
   width: 100%;
-  max-width: 1100px;
   margin: 0px auto;
   height: auto;
   box-sizing: border-box;
@@ -19,6 +18,33 @@
   background: white;
 }
 
+.searchMessageWrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 1100px;
+  width: 100%;
+  margin: 60px auto 0px;
+  position: relative;
+  align-items: baseline;
+}
+
+.searchMessage {
+  font-family: "Gilroy";
+  font-size: 18px;
+  font-weight: 400;
+  color: cm_grey_500;
+  padding: 0 10px;
+  display: block;
+  line-height: 28px;
+  user-select: none;
+}
+
+.clear {
+  min-width: auto;
+  line-height: 28px;
+}
+
 .noresults {
   font-family: "Gilroy";
   border-top: solid 1px xtraLightGrey;

package/lib/molecule/quick-filters/index.js

@@ -183,7 +183,9 @@ const QuickFilters = ({
         wrapperSize: 20
       },
       "aria-label": ariaLabel
-    }), /*#__PURE__*/_react.default.createElement("span", null, label), /*#__PURE__*/_react.default.createElement("div", {
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: _style.default.filterLabel
+    }, label), /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.bar,
       style: {
         background: primarySkinColor

package/lib/molecule/quick-filters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_icon","_colors","_buttonLink","_provider","_style","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","exports","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","style","filterButtonWrapper","borderColor","label","filterButton","icon","position","faIcon","name","size","color","COLORS","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","GetSkinFromContext","_get2","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","React","useRef","rightBtnRef","leftBtnRef","handleScrollRight","useCallback","handleScrollLeft","useEffect","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","classNames","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","propTypes","process","env","NODE_ENV","contextTypes","Provider","childContextTypes","_default"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_icon","_colors","_buttonLink","_provider","_style","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","exports","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","style","filterButtonWrapper","borderColor","label","filterButton","icon","position","faIcon","name","size","color","COLORS","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","GetSkinFromContext","_get2","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","React","useRef","rightBtnRef","leftBtnRef","handleScrollRight","useCallback","handleScrollLeft","useEffect","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","classNames","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","propTypes","process","env","NODE_ENV","contextTypes","Provider","childContextTypes","_default"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span className={style.filterLabel}>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}

package/lib/molecule/quick-filters/style.css

@@ -113,6 +113,8 @@
 
 .filterLabel {
     min-width: 70px;
+    user-select: none;
+    text-align: center;
 }
 
 .filterSeparator {

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

@@ -25,6 +25,8 @@ declare namespace SearchPage {
         }>>;
     }
     namespace propTypes {
+        const newVersion: PropTypes.Requireable<boolean>;
+        const searchMessage: PropTypes.Requireable<string>;
         const noresultsfound: PropTypes.Requireable<string>;
         const title: PropTypes.Requireable<string>;
         const searchFilters: PropTypes.Requireable<PropTypes.InferProps<{
@@ -1113,6 +1115,40 @@ declare namespace SearchPage {
                 disabled: PropTypes.Requireable<boolean>;
             }>>;
         }>>;
+        const filtersModal: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            titleAriaLabel: PropTypes.Requireable<string>;
+            headerIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                name: PropTypes.Requireable<string>;
+                color: PropTypes.Requireable<string>;
+                backgroundColor: PropTypes.Requireable<string>;
+            }>>;
+            description: PropTypes.Requireable<string>;
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            isOpen: PropTypes.Requireable<boolean>;
+            footer: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+                text: PropTypes.Requireable<string>;
+                isError: any;
+                cancelButton: PropTypes.Requireable<PropTypes.InferProps<{
+                    label: PropTypes.Requireable<string>;
+                    onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+                    disabled: PropTypes.Requireable<boolean>;
+                }>>;
+                confirmButton: PropTypes.Requireable<PropTypes.InferProps<{
+                    label: PropTypes.Requireable<string>;
+                    onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+                    iconName: PropTypes.Requireable<string>;
+                    disabled: PropTypes.Requireable<boolean>;
+                    color: PropTypes.Requireable<string>;
+                }>>;
+            }> | null | undefined>>;
+            onClose: PropTypes.Requireable<(...args: any[]) => any>;
+            onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+            detectScrollbar: PropTypes.Requireable<boolean>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+            }>;
+        }>>;
         const sections: PropTypes.Requireable<{
             [x: string]: PropTypes.InferProps<{
                 title: PropTypes.Requireable<string>;

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":";AAmBA,mEAqJC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAqBA,mEAkLC"}

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

@@ -3,7 +3,6 @@
 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"));
@@ -25,6 +24,8 @@ 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 _baseModal = _interopRequireDefault(require("../../../molecule/base-modal"));
+var _multiFilterPanel = _interopRequireDefault(require("../../../molecule/multi-filter-panel"));
 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; }
@@ -45,7 +46,10 @@ const SearchPage = (props, context) => {
     filterGroupAriaLabel,
     sortAriaLabel,
     popinWithCards,
-    sections = {}
+    sections = {},
+    filtersModal,
+    searchMessage,
+    newVersion = false
   } = props;
   const {
     skin
@@ -123,7 +127,6 @@ const SearchPage = (props, context) => {
     key,
     ...sections[key]
   })), (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", {
@@ -148,7 +151,26 @@ const SearchPage = (props, context) => {
     moreFilterAriaLabel: moreFilterAriaLabel,
     filterGroupAriaLabel: filterGroupAriaLabel,
     sortAriaLabel: sortAriaLabel
-  })) : null, quickFilters ? /*#__PURE__*/_react.default.createElement(_quickFilters.default, quickFilters) : null, hasSections ? /*#__PURE__*/_react.default.createElement("div", {
+  })) : null, quickFilters ? /*#__PURE__*/_react.default.createElement(_quickFilters.default, quickFilters) : null, searchMessage ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.searchMessageWrapper
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.searchMessage
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: searchMessage
+    }
+  }), /*#__PURE__*/_react.default.createElement(_button.default, _extends({}, clearFilters, {
+    "data-name": "searchMeassageClear",
+    className: _style.default.clear,
+    style: {
+      background: 'transparent',
+      color: defaultColor,
+      padding: '0 5px',
+      fontSize: '14px'
+    },
+    type: "link"
+  }))) : null, newVersion ? /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "explorerSections",
     className: _style.default.sectionsWrapper
   }, sortedSections.map((section, index) => /*#__PURE__*/_react.default.createElement("div", {
@@ -163,12 +185,14 @@ const SearchPage = (props, context) => {
   }, title), cardsView), popinWithCards ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.popinWithCards,
     ref: nodeRef
-  }, /*#__PURE__*/_react.default.createElement(_cmPopin.default, popinWithCards)) : null);
+  }, /*#__PURE__*/_react.default.createElement(_cmPopin.default, popinWithCards)) : null, filtersModal ? /*#__PURE__*/_react.default.createElement(_baseModal.default, filtersModal, filtersModal.filterPanelProps ? /*#__PURE__*/_react.default.createElement(_multiFilterPanel.default, filtersModal.filterPanelProps) : null) : null);
 };
 SearchPage.contextTypes = {
   skin: _provider.default.childContextTypes.skin
 };
 SearchPage.propTypes = process.env.NODE_ENV !== "production" ? {
+  newVersion: _propTypes.default.bool,
+  searchMessage: _propTypes.default.string,
   noresultsfound: _propTypes.default.string,
   title: _propTypes.default.string,
   searchFilters: _propTypes.default.shape(_filters.default.propTypes),
@@ -182,6 +206,7 @@ SearchPage.propTypes = process.env.NODE_ENV !== "production" ? {
   filterGroupAriaLabel: _propTypes.default.string,
   sortAriaLabel: _propTypes.default.string,
   popinWithCards: _propTypes.default.shape(_cmPopin.default.propTypes),
+  filtersModal: _propTypes.default.shape(_baseModal.default.propTypes),
   sections: _propTypes.default.objectOf(_propTypes.default.shape({
     title: _propTypes.default.string,
     cards: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(_card.cardPropTypes), _propTypes.default.shape(_learnerSkillCard.default.propTypes), _propTypes.default.shape(_certificationCard.default.propTypes), _propTypes.default.shape(_playlistCard.default.propTypes), _propTypes.default.shape(_learningPriorityCard.default.propTypes)])),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_button","_filters","_cardsGrid","_cardsList","_certificationCard","_learnerSkillCard","_playlistCard","_cmPopin","_tag","_card","_learningPriorityCard","_colors","_quickFilters","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","SearchPage","props","context","title","searchFilters","quickFilters","cards","count","noresultsfound","clearFilters","recommendations","moreSortAriaLabel","moreFilterAriaLabel","filterGroupAriaLabel","sortAriaLabel","popinWithCards","sections","skin","defaultColor","_getOr2","nodeRef","useRef","recommendationsView","_isEmpty2","createElement","customStyle","padding","renderSection","section","sectionCount","titleWithCount","className","style","sectionTitle","label","toString","type","size","backgroundColor","COLORS","cm_grey_100","color","neutral_500","sectionProps","dataName","key","cardsView","list","noresults","noresultstxt","clear","background","sortedSections","_pipe2","_keys2","_map2","_sortBy2","hasSections","_size2","contentGridSection","contentSection","sectionHeader","contentGrid","sectionsWrapper","map","index","cardsWrapper","role","ref","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","shape","Filters","QuickFilters","CardsGrid","number","Button","CardsList","CMPopin","objectOf","arrayOf","oneOfType","cardPropTypes","LearnerSkillCard","CertificationCard","PlaylistCard","LearningPriorityCard","showMore","onShowMore","func","order","showMoreOnLeftAriaLabel","showMoreOnRightAriaLabel","_default","exports"],"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 : (\n    <CardsList {...recommendations} customStyle={{padding: 0}} />\n  );\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\">\n      {searchFilters ? (\n        <Filters\n          {...searchFilters}\n          moreSortAriaLabel={moreSortAriaLabel}\n          moreFilterAriaLabel={moreFilterAriaLabel}\n          filterGroupAriaLabel={filterGroupAriaLabel}\n          sortAriaLabel={sortAriaLabel}\n        />\n      ) : null}\n      {quickFilters ? <QuickFilters {...quickFilters} /> : 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  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":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_button","_filters","_cardsGrid","_cardsList","_certificationCard","_learnerSkillCard","_playlistCard","_cmPopin","_tag","_card","_learningPriorityCard","_colors","_quickFilters","_baseModal","_multiFilterPanel","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","SearchPage","props","context","title","searchFilters","quickFilters","cards","count","noresultsfound","clearFilters","recommendations","moreSortAriaLabel","moreFilterAriaLabel","filterGroupAriaLabel","sortAriaLabel","popinWithCards","sections","filtersModal","searchMessage","newVersion","skin","defaultColor","_getOr2","nodeRef","useRef","recommendationsView","_isEmpty2","createElement","customStyle","padding","renderSection","section","sectionCount","titleWithCount","className","style","sectionTitle","label","toString","type","size","backgroundColor","COLORS","cm_grey_100","color","neutral_500","sectionProps","dataName","key","cardsView","list","noresults","noresultstxt","clear","background","sortedSections","_pipe2","_keys2","_map2","_sortBy2","contentGridSection","contentSection","sectionHeader","contentGrid","searchMessageWrapper","dangerouslySetInnerHTML","__html","fontSize","sectionsWrapper","map","index","cardsWrapper","role","ref","filterPanelProps","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","bool","string","shape","Filters","QuickFilters","CardsGrid","number","Button","CardsList","CMPopin","BaseModal","objectOf","arrayOf","oneOfType","cardPropTypes","LearnerSkillCard","CertificationCard","PlaylistCard","LearningPriorityCard","showMore","onShowMore","func","order","showMoreOnLeftAriaLabel","showMoreOnRightAriaLabel","_default","exports"],"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, 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 BaseModal from '../../../molecule/base-modal';\nimport MultiFilterPanel from '../../../molecule/multi-filter-panel';\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    filtersModal,\n    searchMessage,\n    newVersion = false\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 : (\n    <CardsList {...recommendations} customStyle={{padding: 0}} />\n  );\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 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\">\n      {searchFilters ? (\n        <Filters\n          {...searchFilters}\n          moreSortAriaLabel={moreSortAriaLabel}\n          moreFilterAriaLabel={moreFilterAriaLabel}\n          filterGroupAriaLabel={filterGroupAriaLabel}\n          sortAriaLabel={sortAriaLabel}\n        />\n      ) : null}\n      {quickFilters ? <QuickFilters {...quickFilters} /> : null}\n      {searchMessage ? (\n        <div className={style.searchMessageWrapper}>\n          <span\n            className={style.searchMessage}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: searchMessage}}\n          />\n          <Button\n            {...clearFilters}\n            data-name=\"searchMeassageClear\"\n            className={style.clear}\n            style={{\n              background: 'transparent',\n              color: defaultColor,\n              padding: '0 5px',\n              fontSize: '14px'\n            }}\n            type=\"link\"\n          />\n        </div>\n      ) : null}\n      {newVersion ? (\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\n      {filtersModal ? (\n        <BaseModal {...filtersModal}>\n          {filtersModal.filterPanelProps ? (\n            <MultiFilterPanel {...filtersModal.filterPanelProps} />\n          ) : null}\n        </BaseModal>\n      ) : null}\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  newVersion: PropTypes.bool,\n  searchMessage: PropTypes.string,\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  filtersModal: PropTypes.shape(BaseModal.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/lib/template/common/search-page/style.css

@@ -11,7 +11,6 @@
 .cardsWrapper {
   display: block;
   width: 100%;
-  max-width: 1100px;
   margin: 0px auto;
   height: auto;
   box-sizing: border-box;
@@ -19,6 +18,33 @@
   background: white;
 }
 
+.searchMessageWrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 1100px;
+  width: 100%;
+  margin: 60px auto 0px;
+  position: relative;
+  align-items: baseline;
+}
+
+.searchMessage {
+  font-family: "Gilroy";
+  font-size: 18px;
+  font-weight: 400;
+  color: cm_grey_500;
+  padding: 0 10px;
+  display: block;
+  line-height: 28px;
+  user-select: none;
+}
+
+.clear {
+  min-width: auto;
+  line-height: 28px;
+}
+
 .noresults {
   font-family: "Gilroy";
   border-top: solid 1px xtraLightGrey;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.40.13",
+  "version": "11.40.14-alpha.5+7765938ad",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -166,5 +166,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "36d6a6975c473e57415f97de7039d9a853d43e6d"
+  "gitHead": "7765938ad82bc87913792240f42dd267750b45e9"
 }