@coorpacademy/components 11.35.2 → 11.35.3-forcedeploy3.1

package/es/template/common/dashboard/index.d.ts

@@ -19,7 +19,7 @@ declare namespace Dashboard {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -27,7 +27,17 @@ declare namespace Dashboard {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -114,8 +124,8 @@ declare namespace Dashboard {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -553,7 +563,7 @@ declare namespace Dashboard {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -561,7 +571,17 @@ declare namespace Dashboard {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -776,7 +796,7 @@ declare namespace Dashboard {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -784,7 +804,17 @@ declare namespace Dashboard {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -871,8 +901,8 @@ declare namespace Dashboard {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -1310,7 +1340,7 @@ declare namespace Dashboard {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -1318,7 +1348,17 @@ declare namespace Dashboard {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -1521,4 +1561,5 @@ declare namespace Dashboard {
     };
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

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

@@ -200,7 +200,7 @@ declare namespace SearchPage {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -208,7 +208,17 @@ declare namespace SearchPage {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -295,8 +305,8 @@ declare namespace SearchPage {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -734,7 +744,7 @@ declare namespace SearchPage {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -742,7 +752,17 @@ declare namespace SearchPage {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -945,4 +965,5 @@ declare namespace SearchPage {
     }
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

package/es/template/external-course/index.d.ts

@@ -37,7 +37,7 @@ declare namespace ExternalCourse {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -45,7 +45,17 @@ declare namespace ExternalCourse {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -132,8 +142,8 @@ declare namespace ExternalCourse {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -571,7 +581,7 @@ declare namespace ExternalCourse {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -579,7 +589,17 @@ declare namespace ExternalCourse {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -805,4 +825,5 @@ declare namespace ExternalCourse {
     }
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

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

@@ -21,8 +21,8 @@
 
 .continueLearningNumber {
   border-radius: 12px;
-  background-color: #EAEAEB;
-  color: #515161;
+  background-color: cm_grey_100;
+  color: cm_grey_500;
   padding: 2px 4px;
   margin-left: 8px;
   font-size: 10px;
@@ -49,6 +49,7 @@
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
+  margin-right: 16px;
 }
 
 .sortWrapper {

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

@@ -1,8 +1,43 @@
-export default AllCourses;
-declare function AllCourses(props: any, context: any): JSX.Element;
-declare namespace AllCourses {
-    namespace contextTypes {
-        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { CardsGridProps } from '../../organism/cards-grid';
+interface ProviderContext {
+    skin: {
+        common: {
+            primary: string;
+            secondary: string;
+        };
+    };
+    translate: (key: string, options?: any) => string;
+}
+declare const AllCourses: {
+    (props: {
+        dataName?: string | undefined;
+        ariaLabel?: string | undefined;
+        selected?: boolean | undefined;
+        label?: string | undefined;
+        content: {
+            list: CardsGridProps['list'];
+            loading?: boolean;
+        };
+        totalContents?: number | undefined;
+        search: {
+            oldValue: string;
+            onChange: (value: string) => void;
+        };
+        bannerMicrolearning?: {
+            type: 'skill' | 'playlist';
+            action: () => void;
+            oldSwitchValue: boolean;
+        } | undefined;
+        filters: {
+            onChange?: ((value: string) => void) | undefined;
+            options?: unknown[] | undefined;
+        };
+        sorting?: unknown;
+    }, context: ProviderContext): JSX.Element;
+    contextTypes: {
+        skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -23,18 +58,18 @@ declare namespace AllCourses {
                 [x: string]: any;
             }>;
         }>>;
-        const translate: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace propTypes {
-        const content: PropTypes.Requireable<PropTypes.InferProps<{
+        translate: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    propTypes: {
+        content: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
-        const totalContents: PropTypes.Requireable<number>;
-        const filters: PropTypes.Requireable<PropTypes.InferProps<{
+        totalContents: PropTypes.Requireable<number>;
+        filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{
                 name: PropTypes.Validator<string>;
@@ -43,7 +78,7 @@ declare namespace AllCourses {
                 validOption: PropTypes.Requireable<boolean>;
             }> | null | undefined)[]>;
         }>>;
-        const sorting: PropTypes.Requireable<PropTypes.InferProps<{
+        sorting: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
             name: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
@@ -74,16 +109,16 @@ declare namespace AllCourses {
             'aria-label': PropTypes.Requireable<string>;
             'aria-labelledby': PropTypes.Requireable<string>;
         }>>;
-        const bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
+        bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             action: PropTypes.Requireable<(...args: any[]) => any>;
             oldSwitchValue: PropTypes.Requireable<boolean>;
         }>>;
-        const search: PropTypes.Requireable<PropTypes.InferProps<{
+        search: PropTypes.Requireable<PropTypes.InferProps<{
             oldValue: PropTypes.Requireable<string>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-    }
-}
-import PropTypes from "prop-types";
+    };
+};
+export default AllCourses;
 //# sourceMappingURL=all-courses.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEA8JC"}
+{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC,OAAkB,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAQpE,UAAU,eAAe;IACvB,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,OAAO,EAAE,MAAM,CAAC;YAChB,SAAS,EAAE,MAAM,CAAC;SACnB,CAAC;KACH,CAAC;IACF,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;CACnD;AAgDD,QAAA,MAAM,UAAU;;;;;;iBAMH;YACP,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;YAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;SACnB;;;sBAGW,MAAM;8BACE,MAAM,KAAK,IAAI;;;kBAG3B,OAAO,GAAG,UAAU;oBAClB,MAAM,IAAI;4BACF,OAAO;;;gCAGJ,MAAM,KAAK,IAAI;;;kBAG1B,OAAO;gBAEV,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKzB,CAAC;AA0BF,eAAe,UAAU,CAAC"}

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

@@ -15,7 +15,10 @@ import SearchForm from '../../molecule/search-form';
 import CardsGrid from '../../organism/cards-grid';
 import InputSwitch from '../../atom/input-switch';
 import Banner from '../../molecule/banner';
+import { COLORS } from '../../variables/colors';
 import style from './all-courses.css';
+
+// @ts-expect-error convert untypped
 const uncappedMap = _map.convert({
   cap: false
 });
@@ -33,8 +36,8 @@ const FilterButton = (props, context) => {
   const primarySkinColor = _get('common.primary', skin);
   const buttonProps = {
     customStyle: {
-      backgroundColor: selected ? primarySkinColor : '#E1E1E3',
-      color: selected ? '#FFFFFF' : '#515161',
+      backgroundColor: selected ? primarySkinColor : COLORS.cm_grey_150,
+      color: selected ? COLORS.white : COLORS.cm_grey_500,
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
       width: 'fit-content'
     },
@@ -65,7 +68,7 @@ const AllCourses = (props, context) => {
     filters,
     sorting,
     totalContents,
-    bannerMicrolearning = {},
+    bannerMicrolearning = undefined,
     search: {
       oldValue: oldSearchValue,
       onChange: handleSearch
@@ -79,11 +82,9 @@ const AllCourses = (props, context) => {
     list,
     loading
   } = content;
-  const {
-    type: bannerMessageType,
-    action: bannerAction,
-    oldSwitchValue
-  } = bannerMicrolearning;
+  const bannerMessageType = bannerMicrolearning?.type;
+  const bannerAction = bannerMicrolearning?.action;
+  const oldSwitchValue = bannerMicrolearning?.oldSwitchValue;
   const [showCompleted, setShowCompleted] = useState(true);
   const [searchValue, setSearchValue] = useState(oldSearchValue || '');
   const sortView = sorting !== undefined ? /*#__PURE__*/React.createElement("div", {
@@ -103,7 +104,7 @@ const AllCourses = (props, context) => {
     setSearchValue(value);
     debounceHandleSearch(value);
   }, [debounceHandleSearch]);
-  const handleSearchReset = useCallback(value => {
+  const handleSearchReset = useCallback(() => {
     setSearchValue('');
     debounceHandleSearch('');
   }, [debounceHandleSearch]);
@@ -132,9 +133,9 @@ const AllCourses = (props, context) => {
     className: style.sortSection
   }, /*#__PURE__*/React.createElement(InputSwitch, {
     id: 'show-completed-courses-switch',
-    type: "switch",
     name: translate('show_completed'),
     title: translate('show_completed'),
+    theme: "default",
     "aria-label": 'Show completed courses aria label',
     value: showCompleted,
     onChange: handleShowCompletedToggle
@@ -160,7 +161,7 @@ const AllCourses = (props, context) => {
       selected
     } = filterProps;
     function handleFilterChange() {
-      onChange(value);
+      onChange && onChange(value);
     }
     return /*#__PURE__*/React.createElement("div", {
       key: index,

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

@@ -1 +1 @@
-{"version":3,"file":"all-courses.js","names":["React","useState","useCallback","useMemo","PropTypes","Provider","Select","SelectOptionPropTypes","ButtonLink","SearchForm","CardsGrid","InputSwitch","Banner","style","uncappedMap","_map","convert","cap","FilterButton","props","context","dataName","ariaLabel","selected","label","onClick","skin","primarySkinColor","_get","buttonProps","customStyle","backgroundColor","color","transition","width","createElement","contextTypes","childContextTypes","translate","propTypes","process","env","NODE_ENV","string","bool","func","AllCourses","content","filters","sorting","totalContents","bannerMicrolearning","search","oldValue","oldSearchValue","onChange","handleSearch","options","list","loading","type","bannerMessageType","action","bannerAction","oldSwitchValue","showCompleted","setShowCompleted","searchValue","setSearchValue","sortView","undefined","_extends","filteredContent","_filter","course","progress","debounceHandleSearch","_debounce","value","onSearchChange","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","Fragment","className","continueLearningWrapper","continueLearningTitle","continueLearningNumber","_isNil","_size","searchAndSortSection","searchWrapper","placeholder","onReset","dataTestId","sortSection","id","name","title","sortWrapper","_isEmpty","bannerWrapper","message","cta","filterWrapper","filterProps","index","handleFilterChange","key","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf","oneOf"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, filter, map, size, isNil, isEmpty, debounce} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport InputSwitch from '../../atom/input-switch';\nimport Banner from '../../molecule/banner';\nimport style from './all-courses.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst FilterButton = (props, context) => {\n  const {dataName, ariaLabel, selected, label, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n      color: selected ? '#FFFFFF' : '#515161',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    label,\n    onClick,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  dataName: PropTypes.string,\n  ariaLabel: PropTypes.string,\n  selected: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n  const {translate} = context;\n  const {\n    content,\n    filters,\n    sorting,\n    totalContents,\n    bannerMicrolearning = {},\n    search: {oldValue: oldSearchValue, onChange: handleSearch}\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {type: bannerMessageType, action: bannerAction, oldSwitchValue} = bannerMicrolearning;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState(oldSearchValue || '');\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const filteredContent = useMemo(() => {\n    return showCompleted ? list : filter(course => course.progress < 1, list);\n  }, [list, showCompleted]);\n\n  const debounceHandleSearch = useMemo(() => {\n    return debounce(800, value => {\n      handleSearch(value);\n    });\n  }, [handleSearch]);\n\n  const onSearchChange = useCallback(\n    value => {\n      setSearchValue(value);\n      debounceHandleSearch(value);\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleSearchReset = useCallback(\n    value => {\n      setSearchValue('');\n      debounceHandleSearch('');\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(prevShowCompleted => !prevShowCompleted);\n  }, []);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_content')}</span>\n        <span className={style.continueLearningNumber}>\n          {isNil(totalContents) ? size(filteredContent) : totalContents}\n        </span>\n      </div>\n      <div className={style.searchAndSortSection}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: onSearchChange\n            }}\n            onReset={handleSearchReset}\n            dataTestId=\"all-courses-search-input\"\n          />\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          {sortView ? (\n            <div className={style.sortWrapper}>\n              {translate('sort_by')}\n              {sortView}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      {!isEmpty(bannerMicrolearning) ? (\n        <div className={style.bannerWrapper}>\n          <Banner\n            type=\"info\"\n            message={\n              bannerMessageType === 'skill'\n                ? translate('banner_microlearning_rule_message_skill')\n                : translate('banner_microlearning_rule_message')\n            }\n            cta={[\n              {\n                type: 'switch',\n                label: translate('banner_microlearning_rule_label'),\n                action: bannerAction,\n                oldSwitchValue\n              }\n            ]}\n          />\n        </div>\n      ) : null}\n      <div className={style.filterWrapper}>\n        {size(options) > 2\n          ? uncappedMap((filterProps, index) => {\n              const {name, value, selected} = filterProps;\n\n              function handleFilterChange() {\n                onChange(value);\n              }\n\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton\n                    dataName={`filter-button-${value}`}\n                    ariaLabel={`Filter by ${name}`}\n                    selected={selected}\n                    label={name}\n                    onClick={handleFilterChange}\n                  />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            }, options)\n          : null}\n      </div>\n      <div>\n        {size(filteredContent) ? (\n          <CardsGrid\n            list={filteredContent}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  content: PropTypes.shape(CardsGrid.propTypes),\n  totalContents: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  bannerMicrolearning: PropTypes.shape({\n    type: PropTypes.oneOf(['skill', 'playlist']),\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\n};\n\nexport default AllCourses;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"all-courses.js","names":["React","useState","useCallback","useMemo","PropTypes","Provider","Select","SelectOptionPropTypes","ButtonLink","SearchForm","CardsGrid","InputSwitch","Banner","COLORS","style","uncappedMap","_map","convert","cap","FilterButton","props","context","dataName","ariaLabel","selected","label","onClick","skin","primarySkinColor","_get","buttonProps","customStyle","backgroundColor","cm_grey_150","color","white","cm_grey_500","transition","width","createElement","contextTypes","childContextTypes","translate","propTypes","process","env","NODE_ENV","string","bool","func","AllCourses","content","filters","sorting","totalContents","bannerMicrolearning","undefined","search","oldValue","oldSearchValue","onChange","handleSearch","options","list","loading","bannerMessageType","type","bannerAction","action","oldSwitchValue","showCompleted","setShowCompleted","searchValue","setSearchValue","sortView","_extends","filteredContent","_filter","course","progress","debounceHandleSearch","_debounce","value","onSearchChange","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","Fragment","className","continueLearningWrapper","continueLearningTitle","continueLearningNumber","_isNil","_size","searchAndSortSection","searchWrapper","placeholder","onReset","dataTestId","sortSection","id","name","title","theme","sortWrapper","_isEmpty","bannerWrapper","message","cta","filterWrapper","filterProps","index","handleFilterChange","key","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf","oneOf"],"sources":["../../../src/template/skill-detail/all-courses.tsx"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, filter, map, size, isNil, isEmpty, debounce} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid, {CardsGridProps} from '../../organism/cards-grid';\nimport InputSwitch from '../../atom/input-switch';\nimport Banner from '../../molecule/banner';\nimport {COLORS} from '../../variables/colors';\nimport style from './all-courses.css';\n\n// @ts-expect-error convert untypped\nconst uncappedMap = map.convert({cap: false});\ninterface ProviderContext {\n  skin: {\n    common: {\n      primary: string;\n      secondary: string;\n    };\n  };\n  translate: (key: string, options?: any) => string;\n}\n\ninterface FilterOption {\n  name: string;\n  value: string;\n  selected: boolean;\n}\n\ninterface FilterButtonProps {\n  dataName?: string;\n  ariaLabel?: string;\n  selected?: boolean;\n  label?: string;\n  onClick?: () => void;\n}\nconst FilterButton = (props: FilterButtonProps, context: ProviderContext) => {\n  const {dataName, ariaLabel, selected, label, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: selected ? primarySkinColor : COLORS.cm_grey_150,\n      color: selected ? COLORS.white : COLORS.cm_grey_500,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    label,\n    onClick,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\nFilterButton.propTypes = {\n  dataName: PropTypes.string,\n  ariaLabel: PropTypes.string,\n  selected: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (\n  props: {\n    dataName?: string;\n    ariaLabel?: string;\n    selected?: boolean;\n    label?: string;\n    content: {\n      list: CardsGridProps['list'];\n      loading?: boolean;\n    };\n    totalContents?: number;\n    search: {\n      oldValue: string;\n      onChange: (value: string) => void;\n    };\n    bannerMicrolearning?: {\n      type: 'skill' | 'playlist';\n      action: () => void;\n      oldSwitchValue: boolean;\n    };\n    filters: {\n      onChange?: (value: string) => void;\n      options?: unknown[];\n    };\n    sorting?: unknown;\n  },\n  context: ProviderContext\n) => {\n  const {translate} = context;\n  const {\n    content,\n    filters,\n    sorting,\n    totalContents,\n    bannerMicrolearning = undefined,\n    search: {oldValue: oldSearchValue, onChange: handleSearch}\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const bannerMessageType = bannerMicrolearning?.type;\n  const bannerAction = bannerMicrolearning?.action;\n  const oldSwitchValue = bannerMicrolearning?.oldSwitchValue;\n\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState(oldSearchValue || '');\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const filteredContent = useMemo(() => {\n    return showCompleted ? list : filter(course => course.progress < 1, list);\n  }, [list, showCompleted]);\n\n  const debounceHandleSearch = useMemo(() => {\n    return debounce(800, value => {\n      handleSearch(value);\n    });\n  }, [handleSearch]);\n\n  const onSearchChange = useCallback(\n    value => {\n      setSearchValue(value);\n      debounceHandleSearch(value);\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    debounceHandleSearch('');\n  }, [debounceHandleSearch]);\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(prevShowCompleted => !prevShowCompleted);\n  }, []);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_content')}</span>\n        <span className={style.continueLearningNumber}>\n          {isNil(totalContents) ? size(filteredContent) : totalContents}\n        </span>\n      </div>\n      <div className={style.searchAndSortSection}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: onSearchChange\n            }}\n            onReset={handleSearchReset}\n            dataTestId=\"all-courses-search-input\"\n          />\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            theme=\"default\"\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          {sortView ? (\n            <div className={style.sortWrapper}>\n              {translate('sort_by')}\n              {sortView}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      {!isEmpty(bannerMicrolearning) ? (\n        <div className={style.bannerWrapper}>\n          <Banner\n            type=\"info\"\n            message={\n              bannerMessageType === 'skill'\n                ? translate('banner_microlearning_rule_message_skill')\n                : translate('banner_microlearning_rule_message')\n            }\n            cta={[\n              {\n                type: 'switch',\n                label: translate('banner_microlearning_rule_label'),\n                action: bannerAction,\n                oldSwitchValue\n              }\n            ]}\n          />\n        </div>\n      ) : null}\n\n      <div className={style.filterWrapper}>\n        {size(options) > 2\n          ? uncappedMap((filterProps: FilterOption, index: number) => {\n              const {name, value, selected} = filterProps;\n\n              function handleFilterChange() {\n                onChange && onChange(value);\n              }\n\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton\n                    dataName={`filter-button-${value}`}\n                    ariaLabel={`Filter by ${name}`}\n                    selected={selected}\n                    label={name}\n                    onClick={handleFilterChange}\n                  />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            }, options)\n          : null}\n      </div>\n      <div>\n        {size(filteredContent) ? (\n          <CardsGrid\n            list={filteredContent}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  content: PropTypes.shape(CardsGrid.propTypes),\n  totalContents: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  bannerMicrolearning: PropTypes.shape({\n    type: PropTypes.oneOf(['skill', 'playlist']),\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\n};\n\nexport default AllCourses;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,8 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_grey_500 from colors;
+
+
 .continueLearningTitle {
   font-size: 16px;
   font-weight: 600;
@@ -6,8 +11,8 @@
 
 .continueLearningNumber {
   border-radius: 50%;
-  background-color: #EAEAEB;
-  color: #515161;
+  background-color: cm_grey_100;
+  color: cm_grey_500;
   padding: 2px 4px;
   margin-left: 8px;
   font-size: 10px;