@coorpacademy/components 11.35.2 → 11.35.3-forcedeploy3.1

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

@@ -1,8 +1,21 @@
-export default ContinueLearning;
-declare function ContinueLearning(props: any, context: any): JSX.Element | null;
-declare namespace ContinueLearning {
-    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 ContinueLearning: {
+    (props: {
+        ongoingCourses: CardsGridProps;
+    }, context: ProviderContext): JSX.Element | null;
+    contextTypes: {
+        skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -23,17 +36,17 @@ declare namespace ContinueLearning {
                 [x: string]: any;
             }>;
         }>>;
-        const translate: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace propTypes {
-        const ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
+        translate: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    propTypes: {
+        ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
-    }
-}
-import PropTypes from "prop-types";
+    };
+};
+export default ContinueLearning;
 //# sourceMappingURL=continue-learning.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";AAQA,gFA0BC"}
+{"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,OAAkB,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAIpE,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;AAED,QAAA,MAAM,gBAAgB;YAAW;QAAC,cAAc,EAAE,cAAc,CAAA;KAAC,WAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B1F,CAAC;AAWF,eAAe,gBAAgB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"continue-learning.js","names":["React","useCallback","PropTypes","Provider","CardsGrid","CardsList","style","ContinueLearning","props","context","ongoingCourses","translate","Title","createElement","Fragment","className","continueLearningTitle","continueLearningNumber","list","length","cards","_sortBy","course","_getOr","title","customStyle","padding","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","shape"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, sortBy} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n  const {ongoingCourses} = props;\n  const {translate} = context;\n\n  const Title = useCallback(\n    () => (\n      <>\n        <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n        <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n      </>\n    ),\n    [ongoingCourses, translate]\n  );\n\n  if (ongoingCourses.list.length === 0) {\n    return null;\n  }\n\n  return (\n    <CardsList\n      cards={sortBy(course => -getOr(0, ['progress'], course), ongoingCourses.list)}\n      title={<Title />}\n      // to override CardList wrapper padding\n      customStyle={{padding: '0px'}}\n    />\n  );\n};\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAGC,WAAW,QAAO,OAAO;AACxC,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,SAAS,MAAM,qCAAqC;AAC3D,OAAOC,KAAK,MAAM,yBAAyB;AAE3C,MAAMC,gBAAgB,GAAGA,CAACC,KAAK,EAAEC,OAAO,KAAK;EAC3C,MAAM;IAACC;EAAc,CAAC,GAAGF,KAAK;EAC9B,MAAM;IAACG;EAAS,CAAC,GAAGF,OAAO;EAE3B,MAAMG,KAAK,GAAGX,WAAW,CACvB,mBACED,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,qBACEd,KAAA,CAAAa,aAAA;IAAME,SAAS,EAAET,KAAK,CAACU;EAAsB,GAAEL,SAAS,CAAC,mBAAmB,CAAQ,CAAC,eACrFX,KAAA,CAAAa,aAAA;IAAME,SAAS,EAAET,KAAK,CAACW;EAAuB,GAAEP,cAAc,CAACQ,IAAI,CAACC,MAAa,CACjF,CACH,EACD,CAACT,cAAc,EAAEC,SAAS,CAC5B,CAAC;EAED,IAAID,cAAc,CAACQ,IAAI,CAACC,MAAM,KAAK,CAAC,EAAE;IACpC,OAAO,IAAI;EACb;EAEA,oBACEnB,KAAA,CAAAa,aAAA,CAACR,SAAS;IACRe,KAAK,EAAEC,OAAA,CAAOC,MAAM,IAAI,CAACC,MAAA,CAAM,CAAC,EAAE,CAAC,UAAU,CAAC,EAAED,MAAM,CAAC,EAAEZ,cAAc,CAACQ,IAAI,CAAE;IAC9EM,KAAK,eAAExB,KAAA,CAAAa,aAAA,CAACD,KAAK,MAAE;IACf;IAAA;IACAa,WAAW,EAAE;MAACC,OAAO,EAAE;IAAK;EAAE,CAC/B,CAAC;AAEN,CAAC;AAEDnB,gBAAgB,CAACoB,YAAY,GAAG;EAC9BC,IAAI,EAAEzB,QAAQ,CAAC0B,iBAAiB,CAACD,IAAI;EACrCjB,SAAS,EAAER,QAAQ,CAAC0B,iBAAiB,CAAClB;AACxC,CAAC;AAEDJ,gBAAgB,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAC3BvB,cAAc,EAAER,SAAS,CAACgC,KAAK,CAAC9B,SAAS,CAAC0B,SAAS;AACrD,CAAC;AAED,eAAevB,gBAAgB","ignoreList":[]}
+{"version":3,"file":"continue-learning.js","names":["React","useCallback","PropTypes","Provider","CardsGrid","CardsList","style","ContinueLearning","props","context","ongoingCourses","translate","Title","createElement","Fragment","className","continueLearningTitle","continueLearningNumber","list","length","cards","_sortBy","course","_getOr","title","customStyle","padding","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","shape"],"sources":["../../../src/template/skill-detail/continue-learning.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, sortBy} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport CardsGrid, {CardsGridProps} from '../../organism/cards-grid';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport style from './continue-learning.css';\n\ninterface ProviderContext {\n  skin: {\n    common: {\n      primary: string;\n      secondary: string;\n    };\n  };\n  translate: (key: string, options?: any) => string;\n}\n\nconst ContinueLearning = (props: {ongoingCourses: CardsGridProps}, context: ProviderContext) => {\n  const {ongoingCourses} = props;\n  const {translate} = context;\n\n  const Title = useCallback(\n    () => (\n      <>\n        <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n        <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n      </>\n    ),\n    [ongoingCourses, translate]\n  );\n\n  if (ongoingCourses.list.length === 0) {\n    return null;\n  }\n\n  return (\n    <CardsList\n      cards={sortBy(course => -getOr(0, ['progress'], course), ongoingCourses.list)}\n      title={<Title />}\n      // to override CardList wrapper padding\n      customStyle={{padding: '0px'}}\n    />\n  );\n};\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAGC,WAAW,QAAO,OAAO;AACxC,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,SAAS,MAAwB,2BAA2B;AACnE,OAAOC,SAAS,MAAM,qCAAqC;AAC3D,OAAOC,KAAK,MAAM,yBAAyB;AAY3C,MAAMC,gBAAgB,GAAGA,CAACC,KAAuC,EAAEC,OAAwB,KAAK;EAC9F,MAAM;IAACC;EAAc,CAAC,GAAGF,KAAK;EAC9B,MAAM;IAACG;EAAS,CAAC,GAAGF,OAAO;EAE3B,MAAMG,KAAK,GAAGX,WAAW,CACvB,mBACED,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,qBACEd,KAAA,CAAAa,aAAA;IAAME,SAAS,EAAET,KAAK,CAACU;EAAsB,GAAEL,SAAS,CAAC,mBAAmB,CAAQ,CAAC,eACrFX,KAAA,CAAAa,aAAA;IAAME,SAAS,EAAET,KAAK,CAACW;EAAuB,GAAEP,cAAc,CAACQ,IAAI,CAACC,MAAa,CACjF,CACH,EACD,CAACT,cAAc,EAAEC,SAAS,CAC5B,CAAC;EAED,IAAID,cAAc,CAACQ,IAAI,CAACC,MAAM,KAAK,CAAC,EAAE;IACpC,OAAO,IAAI;EACb;EAEA,oBACEnB,KAAA,CAAAa,aAAA,CAACR,SAAS;IACRe,KAAK,EAAEC,OAAA,CAAOC,MAAM,IAAI,CAACC,MAAA,CAAM,CAAC,EAAE,CAAC,UAAU,CAAC,EAAED,MAAM,CAAC,EAAEZ,cAAc,CAACQ,IAAI,CAAE;IAC9EM,KAAK,eAAExB,KAAA,CAAAa,aAAA,CAACD,KAAK,MAAE;IACf;IAAA;IACAa,WAAW,EAAE;MAACC,OAAO,EAAE;IAAK;EAAE,CAC/B,CAAC;AAEN,CAAC;AAEDnB,gBAAgB,CAACoB,YAAY,GAAG;EAC9BC,IAAI,EAAEzB,QAAQ,CAAC0B,iBAAiB,CAACD,IAAI;EACrCjB,SAAS,EAAER,QAAQ,CAAC0B,iBAAiB,CAAClB;AACxC,CAAC;AAEDJ,gBAAgB,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAC3BvB,cAAc,EAAER,SAAS,CAACgC,KAAK,CAAC9B,SAAS,CAAC0B,SAAS;AACrD,CAAC;AAED,eAAevB,gBAAgB","ignoreList":[]}

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

@@ -1,7 +1,23 @@
-export function ContinueLearningButton(props: any, context: any): JSX.Element;
-export namespace ContinueLearningButton {
-    namespace contextTypes {
-        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { CardsGridProps } from '../../organism/cards-grid';
+interface ContinueLearningButtonProps {
+    ongoingCoursesAvailable?: boolean;
+    onClick?: () => void;
+}
+interface ProviderContext {
+    skin: {
+        common: {
+            primary: string;
+            secondary: string;
+        };
+    };
+    translate: (key: string) => string;
+}
+export declare const ContinueLearningButton: {
+    (props: ContinueLearningButtonProps, context: ProviderContext): JSX.Element;
+    contextTypes: {
+        skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -22,19 +38,53 @@ export namespace ContinueLearningButton {
                 [x: string]: any;
             }>;
         }>>;
-        const translate: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace propTypes {
-        const ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
-        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    }
+        translate: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    propTypes: {
+        ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+interface Metrics {
+    score?: number;
+    questionsToReview?: number;
+    totalContents?: number;
 }
-export default SkillDetail;
-import PropTypes from "prop-types";
-declare function SkillDetail(props: any, context: any): JSX.Element;
-declare namespace SkillDetail {
-    export namespace contextTypes_1 {
-        const skin_1: PropTypes.Requireable<PropTypes.InferProps<{
+declare type BannerMicrolearning = Record<string, never> | {
+    action: () => void;
+    oldSwitchValue: boolean;
+};
+interface SkillDetailProps {
+    title: string;
+    icon: {
+        name: string;
+        color: string;
+    };
+    skillRef: string;
+    description?: string;
+    metrics?: Metrics;
+    focused?: boolean;
+    availableForReview?: boolean;
+    ongoingCoursesAvailable?: boolean;
+    skillIncludedCourses: CardsGridProps;
+    filters: {
+        onChange?: () => void;
+        options?: unknown[];
+    };
+    onBackClick?: () => void;
+    onReviewClick?: () => void;
+    onContinueLearningClick?: () => void;
+    search: {
+        oldValue: string;
+        onChange: () => void;
+    };
+    bannerMicrolearning?: BannerMicrolearning;
+}
+declare const SkillDetail: {
+    (props: SkillDetailProps, context: ProviderContext): JSX.Element;
+    contextTypes: {
+        translate: PropTypes.Requireable<(...args: any[]) => any>;
+        skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -55,32 +105,31 @@ declare namespace SkillDetail {
                 [x: string]: any;
             }>;
         }>>;
-        export { skin_1 as skin };
-        const translate_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { translate_1 as translate };
-    }
-    export { contextTypes_1 as contextTypes };
-    export namespace propTypes_1 {
-        export const title: PropTypes.Validator<string>;
-        export const skillRef: PropTypes.Validator<string>;
-        export const description: PropTypes.Requireable<string>;
-        export const metrics: PropTypes.Requireable<PropTypes.InferProps<{
+    };
+    propTypes: {
+        title: PropTypes.Validator<string>;
+        icon: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            name: PropTypes.Requireable<string>;
+            color: PropTypes.Requireable<string>;
+        }>>>;
+        skillRef: PropTypes.Validator<string>;
+        description: PropTypes.Requireable<string>;
+        metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;
             questionsToReview: PropTypes.Requireable<number>;
             totalContents: PropTypes.Requireable<number>;
         }>>;
-        export const focused: PropTypes.Requireable<boolean>;
-        export const availableForReview: PropTypes.Requireable<boolean>;
-        const ongoingCoursesAvailable_1: PropTypes.Requireable<boolean>;
-        export { ongoingCoursesAvailable_1 as ongoingCoursesAvailable };
-        export const skillIncludedCourses: PropTypes.Requireable<PropTypes.InferProps<{
+        focused: PropTypes.Requireable<boolean>;
+        availableForReview: PropTypes.Requireable<boolean>;
+        ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
+        skillIncludedCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
-        export const filters: PropTypes.Requireable<PropTypes.InferProps<{
+        filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{
                 name: PropTypes.Validator<string>;
@@ -89,49 +138,18 @@ declare namespace SkillDetail {
                 validOption: PropTypes.Requireable<boolean>;
             }> | null | undefined)[]>;
         }>>;
-        export const sorting: PropTypes.Requireable<PropTypes.InferProps<{
-            title: PropTypes.Requireable<string>;
-            name: PropTypes.Requireable<string>;
-            className: PropTypes.Requireable<string>;
-            borderClassName: PropTypes.Requireable<string>;
-            disabled: PropTypes.Requireable<boolean>;
-            multiple: PropTypes.Requireable<boolean>;
-            description: PropTypes.Requireable<string>;
-            required: PropTypes.Requireable<boolean>;
-            onChange: PropTypes.Requireable<(...args: any[]) => any>;
-            theme: PropTypes.Requireable<string>;
-            options: PropTypes.Requireable<(PropTypes.InferProps<{
-                name: PropTypes.Validator<string>;
-                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-                selected: PropTypes.Requireable<boolean>;
-                validOption: PropTypes.Requireable<boolean>;
-            }> | null | undefined)[]>;
-            optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
-                label: PropTypes.Validator<string>;
-                options: PropTypes.Requireable<(PropTypes.InferProps<{
-                    name: PropTypes.Validator<string>;
-                    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-                    selected: PropTypes.Requireable<boolean>;
-                    validOption: PropTypes.Requireable<boolean>;
-                }> | null | undefined)[]>;
-            }> | null | undefined)[]>;
-            modified: PropTypes.Requireable<boolean>;
-            error: PropTypes.Requireable<boolean>;
-            'aria-label': PropTypes.Requireable<string>;
-            'aria-labelledby': PropTypes.Requireable<string>;
-        }>>;
-        export const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        export const search: PropTypes.Requireable<PropTypes.InferProps<{
+        onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        search: PropTypes.Requireable<PropTypes.InferProps<{
             oldValue: PropTypes.Requireable<string>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        export const bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
+        bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
             action: PropTypes.Requireable<(...args: any[]) => any>;
             oldSwitchValue: PropTypes.Requireable<boolean>;
         }>>;
-    }
-    export { propTypes_1 as propTypes };
-}
+    };
+};
+export default SkillDetail;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAgBO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAgKC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,OAAkB,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAMpE,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,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,KAAK,MAAM,CAAC;CACpC;AAED,eAAO,MAAM,sBAAsB;YAC1B,2BAA2B,WACzB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC;AAYF,UAAU,OAAO;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,aAAK,mBAAmB,GACpB,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACrB;IACE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AACN,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,oBAAoB,EAAE,cAAc,CAAC;IACrC,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;KACrB,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;CAC3C;AACD,QAAA,MAAM,WAAW;YAAW,gBAAgB,WAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0MrE,CAAC;AAyCF,eAAe,WAAW,CAAC"}

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

@@ -2,18 +2,19 @@ import _isNil from "lodash/fp/isNil";
 import _get from "lodash/fp/get";
 import React, { useCallback, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { convert } from 'css-color-function';
 import classnames from 'classnames';
 import Markdown from 'markdown-to-jsx';
+import { convert } from 'css-color-function';
 import Provider from '../../atom/provider';
-import Select, { SelectOptionPropTypes } from '../../atom/select';
-import ButtonLink from '../../atom/button-link';
 import ButtonLinkIcon from '../../atom/button-link-icon';
 import Icon from '../../atom/icon';
+import IconPreview from '../../molecule/icon-preview';
+import ButtonLink from '../../atom/button-link';
 import CardsGrid from '../../organism/cards-grid';
 import { COLORS } from '../../variables/colors';
-import style from './style.css';
+import { SelectOptionPropTypes } from '../../atom/select';
 import AllCourses from './all-courses';
+import style from './style.css';
 export const ContinueLearningButton = (props, context) => {
   const {
     ongoingCoursesAvailable,
@@ -24,7 +25,7 @@ export const ContinueLearningButton = (props, context) => {
     translate
   } = context;
   const primarySkinColor = _get('common.primary', skin);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, {
+  return /*#__PURE__*/React.createElement(ButtonLink, {
     label: ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning'),
     type: "primary",
     customStyle: {
@@ -39,11 +40,11 @@ export const ContinueLearningButton = (props, context) => {
       faIcon: {
         name: 'play',
         color: COLORS.white,
-        size: 16
+        size: 14
       }
     },
     onClick: onClick
-  }));
+  });
 };
 ContinueLearningButton.contextTypes = {
   skin: Provider.childContextTypes.skin,
@@ -56,6 +57,10 @@ ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
 const SkillDetail = (props, context) => {
   const {
     title,
+    icon: {
+      color: iconColor,
+      name: iconName
+    },
     skillRef,
     description,
     metrics = {},
@@ -64,29 +69,27 @@ const SkillDetail = (props, context) => {
     ongoingCoursesAvailable,
     skillIncludedCourses,
     filters,
-    sorting,
     onBackClick,
     onReviewClick,
     onContinueLearningClick,
     search,
-    bannerMicrolearning = {}
+    bannerMicrolearning
   } = props;
-  const descriptionRef = useRef(null);
   const {
     score = 0,
-    questionsToReview,
-    totalContents
+    questionsToReview = 0,
+    totalContents = 0
   } = metrics;
   const {
     translate
   } = context;
-  const {
-    action: bannerMicrolearningAction,
-    oldSwitchValue
-  } = bannerMicrolearning;
+  const bannerMicrolearningAction = bannerMicrolearning?.action;
+  const descriptionRef = useRef(null);
   const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
   const [showMore, setShowMore] = useState(false);
-  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  const handleShowMore = useCallback(() => {
+    setShowMore(!showMore);
+  }, [showMore]);
   useEffect(() => {
     if (descriptionRef.current) {
       const {
@@ -100,29 +103,39 @@ const SkillDetail = (props, context) => {
     return /*#__PURE__*/React.createElement("div", {
       ref: descriptionRef,
       className: classnames(style.description, !showMore && style.truncate)
-    }, /*#__PURE__*/React.createElement(Markdown, null, description));
+    }, description ? /*#__PURE__*/React.createElement(Markdown, null, description) : null);
   }, [showMore, description]);
   const ProgressBar = useCallback(() => {
-    if (score === undefined) return null;
-    const progressBarColor = '#3EC483';
-    const inlineProgressValueStyle = {
+    if (typeof score !== 'number') return null;
+    const progressBarColor = COLORS.cm_positive_500;
+    const inlineProgressStyle = {
       backgroundColor: progressBarColor,
       width: `${score}%`
     };
     return /*#__PURE__*/React.createElement("div", {
+      className: style.progressBarRow
+    }, /*#__PURE__*/React.createElement("div", {
       className: style.progressBarWrapper
     }, /*#__PURE__*/React.createElement("div", {
       "data-name": "progress",
       className: style.progress,
-      style: inlineProgressValueStyle,
-      role: "progressbar"
-    }));
+      style: inlineProgressStyle,
+      role: "progressbar",
+      "aria-valuenow": score,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    })), /*#__PURE__*/React.createElement("span", {
+      className: style.progressInformationNumber
+    }, score.toFixed(1), "%"));
   }, [score]);
+  const hasDescription = Boolean(description && description.trim().length > 0);
   return /*#__PURE__*/React.createElement("div", {
     className: style.backgroundContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: style.container,
     "data-name": skillRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.topSection
   }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
     faIcon: "arrow-left",
     "data-name": "back-button",
@@ -130,9 +143,19 @@ const SkillDetail = (props, context) => {
     onClick: onBackClick,
     className: style.backButton,
     tooltipPlacement: "right"
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    className: style.ctaContainer
-  }, /*#__PURE__*/React.createElement("div", null, focused ? /*#__PURE__*/React.createElement("div", {
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: style.mainSection
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.leftSide
+  }, /*#__PURE__*/React.createElement(IconPreview, {
+    icon: {
+      name: iconName,
+      color: iconColor
+    },
+    title: title
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.rightSide
+  }, focused ? /*#__PURE__*/React.createElement("div", {
     className: style.skillFocusBadge
   }, /*#__PURE__*/React.createElement(Icon, {
     iconName: "bullseye-arrow",
@@ -141,59 +164,77 @@ const SkillDetail = (props, context) => {
       faSize: 10,
       wrapperSize: 16
     }
-  }), translate('skill_focus')) : null, /*#__PURE__*/React.createElement("div", {
+  }), translate('skill_focus')) : /*#__PURE__*/React.createElement("div", {
+    className: style.skillBadge
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "shapes",
+    backgroundColor: COLORS.gray,
+    size: {
+      faSize: 10,
+      wrapperSize: 16
+    }
+  }), translate('skill')), /*#__PURE__*/React.createElement("h2", {
     className: style.title
-  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
+  }, title), description && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
     className: style.showMoreWrapper,
     onClick: handleShowMore
   }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/React.createElement(Icon, {
     iconName: showMore ? 'chevron-up' : 'chevron-down',
     size: {
       faSize: 14,
-      wrapperSize: 16
+      wrapperSize: 14
+    },
+    customStyle: {
+      padding: '8px'
     }
-  })) : null) : null), /*#__PURE__*/React.createElement("div", {
+  })) : null), questionsToReview > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation
+  }, /*#__PURE__*/React.createElement("span", null, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null, /*#__PURE__*/React.createElement("div", {
+    className: classnames(style.progressContainer, !hasDescription && style.noDescriptionSpacing)
+  }, /*#__PURE__*/React.createElement(ProgressBar, null)), /*#__PURE__*/React.createElement("div", {
     className: style.ctaWrapper
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
+  }, /*#__PURE__*/React.createElement(ContinueLearningButton, {
+    ongoingCoursesAvailable: ongoingCoursesAvailable,
+    onClick: onContinueLearningClick
+  }), /*#__PURE__*/React.createElement(ButtonLink, {
     type: "secondary",
-    onClick: onReviewClick,
     label: translate('review_this_skill'),
     disabled: !availableForReview,
+    onClick: onReviewClick,
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'rotate-right',
+        color: COLORS.cm_grey_700,
+        size: 14
+      }
+    },
     customStyle: {
-      width: 'fit-content',
-      borderRadius: '12px'
+      borderRadius: '12px',
+      width: 'fit-content'
     }
-  }), /*#__PURE__*/React.createElement(ContinueLearningButton, {
-    ongoingCoursesAvailable: ongoingCoursesAvailable,
-    onClick: onContinueLearningClick
-  }))), questionsToReview > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: style.skillInformation,
-    "data-name": "skill-questions"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.skillInformationNumber
-  }, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null, /*#__PURE__*/React.createElement("div", {
-    className: style.progressContainer
-  }, /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("span", {
-    className: style.progressInformationNumber
-  }, score.toFixed(1), "%")), /*#__PURE__*/React.createElement(AllCourses, {
+  })))), /*#__PURE__*/React.createElement(AllCourses, {
     content: skillIncludedCourses,
     filters: filters,
-    sorting: sorting,
     totalContents: totalContents,
-    bannerMicrolearning: bannerMicrolearningAction ? {
+    bannerMicrolearning: bannerMicrolearning && bannerMicrolearningAction ? {
       type: 'skill',
       action: bannerMicrolearningAction,
-      oldSwitchValue
-    } : {},
+      oldSwitchValue: bannerMicrolearning.oldSwitchValue
+    } : undefined,
     search: search
   })));
 };
 SkillDetail.contextTypes = {
-  skin: Provider.childContextTypes.skin,
-  translate: Provider.childContextTypes.translate
+  translate: Provider.childContextTypes.translate,
+  skin: Provider.childContextTypes.skin
 };
 SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string.isRequired,
+  icon: PropTypes.shape({
+    name: PropTypes.string,
+    color: PropTypes.string
+  }).isRequired,
   skillRef: PropTypes.string.isRequired,
   description: PropTypes.string,
   metrics: PropTypes.shape({
@@ -209,7 +250,6 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
     onChange: PropTypes.func,
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
   }),
-  sorting: PropTypes.shape(Select.propTypes),
   onBackClick: PropTypes.func,
   onReviewClick: PropTypes.func,
   onContinueLearningClick: PropTypes.func,