@coorpacademy/components 11.35.2-alpha.4 → 11.35.2-forcedeploy2.15

package/lib/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/lib/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/lib/template/skill-detail/continue-learning.js.map

@@ -1 +1 @@
-{"version":3,"file":"continue-learning.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_cardsGrid","_cardsList","_continueLearning","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContinueLearning","props","context","ongoingCourses","translate","Title","useCallback","createElement","Fragment","className","style","continueLearningTitle","continueLearningNumber","list","length","cards","_sortBy2","course","_getOr2","title","customStyle","padding","contextTypes","skin","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","shape","CardsGrid","_default","exports"],"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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,SAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,UAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,UAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,iBAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAA4C,SAAAO,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAd,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAI,UAAA,GAAAJ,CAAA,KAAAK,OAAA,EAAAL,CAAA;AAE5C,MAAMmB,gBAAgB,GAAGA,CAACC,KAAK,EAAEC,OAAO,KAAK;EAC3C,MAAM;IAACC;EAAc,CAAC,GAAGF,KAAK;EAC9B,MAAM;IAACG;EAAS,CAAC,GAAGF,OAAO;EAE3B,MAAMG,KAAK,GAAG,IAAAC,kBAAW,EACvB,mBACEnC,MAAA,CAAAe,OAAA,CAAAqB,aAAA,CAAApC,MAAA,CAAAe,OAAA,CAAAsB,QAAA,qBACErC,MAAA,CAAAe,OAAA,CAAAqB,aAAA;IAAME,SAAS,EAAEC,yBAAK,CAACC;EAAsB,GAAEP,SAAS,CAAC,mBAAmB,CAAQ,CAAC,eACrFjC,MAAA,CAAAe,OAAA,CAAAqB,aAAA;IAAME,SAAS,EAAEC,yBAAK,CAACE;EAAuB,GAAET,cAAc,CAACU,IAAI,CAACC,MAAa,CACjF,CACH,EACD,CAACX,cAAc,EAAEC,SAAS,CAC5B,CAAC;EAED,IAAID,cAAc,CAACU,IAAI,CAACC,MAAM,KAAK,CAAC,EAAE;IACpC,OAAO,IAAI;EACb;EAEA,oBACE3C,MAAA,CAAAe,OAAA,CAAAqB,aAAA,CAAC7B,UAAA,CAAAQ,OAAS;IACR6B,KAAK,EAAE,IAAAC,QAAA,CAAA9B,OAAA,EAAO+B,MAAM,IAAI,CAAC,IAAAC,OAAA,CAAAhC,OAAA,EAAM,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE+B,MAAM,CAAC,EAAEd,cAAc,CAACU,IAAI,CAAE;IAC9EM,KAAK,eAAEhD,MAAA,CAAAe,OAAA,CAAAqB,aAAA,CAACF,KAAK,MAAE;IACf;IAAA;IACAe,WAAW,EAAE;MAACC,OAAO,EAAE;IAAK;EAAE,CAC/B,CAAC;AAEN,CAAC;AAEDrB,gBAAgB,CAACsB,YAAY,GAAG;EAC9BC,IAAI,EAAEC,iBAAQ,CAACC,iBAAiB,CAACF,IAAI;EACrCnB,SAAS,EAAEoB,iBAAQ,CAACC,iBAAiB,CAACrB;AACxC,CAAC;AAEDJ,gBAAgB,CAAC0B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAC3B1B,cAAc,EAAE2B,kBAAS,CAACC,KAAK,CAACC,kBAAS,CAACN,SAAS;AACrD,CAAC;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAhD,OAAA,GAEac,gBAAgB","ignoreList":[]}
+{"version":3,"file":"continue-learning.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_provider","_cardsGrid","_cardsList","_continueLearning","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContinueLearning","props","context","ongoingCourses","translate","Title","useCallback","createElement","Fragment","className","style","continueLearningTitle","continueLearningNumber","list","length","cards","_sortBy2","course","_getOr2","title","customStyle","padding","contextTypes","skin","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","shape","CardsGrid","_default","exports"],"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":"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","ignoreList":[]}

package/lib/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/lib/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":"AAeO,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/lib/template/skill-detail/index.js

@@ -6,17 +6,19 @@ var _isNil2 = _interopRequireDefault(require("lodash/fp/isNil"));
 var _get2 = _interopRequireDefault(require("lodash/fp/get"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _cssColorFunction = require("css-color-function");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
+var _cssColorFunction = require("css-color-function");
 var _provider = _interopRequireDefault(require("../../atom/provider"));
-var _select = _interopRequireWildcard(require("../../atom/select"));
-var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 var _buttonLinkIcon = _interopRequireDefault(require("../../atom/button-link-icon"));
 var _icon = _interopRequireDefault(require("../../atom/icon"));
+var _iconPreview = _interopRequireDefault(require("../../molecule/icon-preview"));
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
-var _style = _interopRequireDefault(require("./style.css"));
+var _colors = require("../../variables/colors");
+var _select = require("../../atom/select");
 var _allCourses = _interopRequireDefault(require("./all-courses"));
+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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -30,7 +32,7 @@ const ContinueLearningButton = (props, context) => {
     translate
   } = context;
   const primarySkinColor = (0, _get2.default)('common.primary', skin);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+  return /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     label: ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning'),
     type: "primary",
     customStyle: {
@@ -39,17 +41,17 @@ const ContinueLearningButton = (props, context) => {
       backgroundColor: primarySkinColor
     },
     hoverBackgroundColor: (0, _cssColorFunction.convert)(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`),
-    hoverColor: "#FFFFFF",
+    hoverColor: _colors.COLORS.white,
     icon: {
       position: 'left',
       faIcon: {
         name: 'play',
-        color: '#FFFFFF',
-        size: 16
+        color: _colors.COLORS.white,
+        size: 14
       }
     },
     onClick: onClick
-  }));
+  });
 };
 exports.ContinueLearningButton = ContinueLearningButton;
 ContinueLearningButton.contextTypes = {
@@ -63,6 +65,10 @@ ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
 const SkillDetail = (props, context) => {
   const {
     title,
+    icon: {
+      color: iconColor,
+      name: iconName
+    },
     skillRef,
     description,
     metrics = {},
@@ -71,29 +77,27 @@ const SkillDetail = (props, context) => {
     ongoingCoursesAvailable,
     skillIncludedCourses,
     filters,
-    sorting,
     onBackClick,
     onReviewClick,
     onContinueLearningClick,
     search,
-    bannerMicrolearning = {}
+    bannerMicrolearning
   } = props;
-  const descriptionRef = (0, _react.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 = (0, _react.useRef)(null);
   const [isDescriptionTruncated, setIsDescriptionTruncated] = (0, _react.useState)(false);
   const [showMore, setShowMore] = (0, _react.useState)(false);
-  const handleShowMore = (0, _react.useCallback)(() => setShowMore(!showMore), [setShowMore, showMore]);
+  const handleShowMore = (0, _react.useCallback)(() => {
+    setShowMore(!showMore);
+  }, [showMore]);
   (0, _react.useEffect)(() => {
     if (descriptionRef.current) {
       const {
@@ -107,29 +111,39 @@ const SkillDetail = (props, context) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: descriptionRef,
       className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
-    }, /*#__PURE__*/_react.default.createElement(_markdownToJsx.default, null, description));
+    }, description ? /*#__PURE__*/_react.default.createElement(_markdownToJsx.default, null, description) : null);
   }, [showMore, description]);
   const ProgressBar = (0, _react.useCallback)(() => {
-    if (score === undefined) return null;
-    const progressBarColor = '#3EC483';
-    const inlineProgressValueStyle = {
+    if (typeof score !== 'number') return null;
+    const progressBarColor = _colors.COLORS.cm_positive_500;
+    const inlineProgressStyle = {
       backgroundColor: progressBarColor,
       width: `${score}%`
     };
     return /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.progressBarRow
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.progressBarWrapper
     }, /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "progress",
       className: _style.default.progress,
-      style: inlineProgressValueStyle,
-      role: "progressbar"
-    }));
+      style: inlineProgressStyle,
+      role: "progressbar",
+      "aria-valuenow": score,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: _style.default.progressInformationNumber
+    }, score.toFixed(1), "%"));
   }, [score]);
+  const hasDescription = Boolean(description && description.trim().length > 0);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.backgroundContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container,
     "data-name": skillRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.topSection
   }, !(0, _isNil2.default)(onBackClick) ? /*#__PURE__*/_react.default.createElement(_buttonLinkIcon.default, {
     faIcon: "arrow-left",
     "data-name": "back-button",
@@ -137,70 +151,98 @@ const SkillDetail = (props, context) => {
     onClick: onBackClick,
     className: _style.default.backButton,
     tooltipPlacement: "right"
-  }) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.ctaContainer
-  }, /*#__PURE__*/_react.default.createElement("div", null, focused ? /*#__PURE__*/_react.default.createElement("div", {
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.mainSection
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.leftSide
+  }, /*#__PURE__*/_react.default.createElement(_iconPreview.default, {
+    icon: {
+      name: iconName,
+      color: iconColor
+    },
+    title: title
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.rightSide
+  }, focused ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillFocusBadge
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: "bullseye-arrow",
-    backgroundColor: "#DDD1FF",
+    backgroundColor: _colors.COLORS.purple_100,
     size: {
       faSize: 10,
       wrapperSize: 16
     }
-  }), translate('skill_focus')) : null, /*#__PURE__*/_react.default.createElement("div", {
+  }), translate('skill_focus')) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillBadge
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: "shapes",
+    backgroundColor: _colors.COLORS.gray,
+    size: {
+      faSize: 10,
+      wrapperSize: 16
+    }
+  }), translate('skill')), /*#__PURE__*/_react.default.createElement("h2", {
     className: _style.default.title
-  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/_react.default.createElement("div", {
+  }, title), description && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.showMoreWrapper,
     onClick: handleShowMore
   }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: showMore ? 'chevron-up' : 'chevron-down',
     size: {
       faSize: 14,
-      wrapperSize: 16
+      wrapperSize: 14
+    },
+    customStyle: {
+      padding: '8px'
     }
-  })) : null) : null), /*#__PURE__*/_react.default.createElement("div", {
+  })) : null), questionsToReview > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillInformation
+  }, /*#__PURE__*/_react.default.createElement("span", null, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_style.default.progressContainer, !hasDescription && _style.default.noDescriptionSpacing)
+  }, /*#__PURE__*/_react.default.createElement(ProgressBar, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.ctaWrapper
-  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+  }, /*#__PURE__*/_react.default.createElement(ContinueLearningButton, {
+    ongoingCoursesAvailable: ongoingCoursesAvailable,
+    onClick: onContinueLearningClick
+  }), /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     type: "secondary",
-    onClick: onReviewClick,
     label: translate('review_this_skill'),
     disabled: !availableForReview,
+    onClick: onReviewClick,
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'rotate-right',
+        color: _colors.COLORS.cm_grey_700,
+        size: 14
+      }
+    },
     customStyle: {
-      width: 'fit-content',
-      borderRadius: '12px'
+      borderRadius: '12px',
+      width: 'fit-content'
     }
-  }), /*#__PURE__*/_react.default.createElement(ContinueLearningButton, {
-    ongoingCoursesAvailable: ongoingCoursesAvailable,
-    onClick: onContinueLearningClick
-  }))), questionsToReview > 0 ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillInformation,
-    "data-name": "skill-questions"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.skillInformationNumber
-  }, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.progressContainer
-  }, /*#__PURE__*/_react.default.createElement(ProgressBar, null), /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.progressInformationNumber
-  }, score.toFixed(1), "%")), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
+  })))), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
     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.default.childContextTypes.skin,
-  translate: _provider.default.childContextTypes.translate
+  translate: _provider.default.childContextTypes.translate,
+  skin: _provider.default.childContextTypes.skin
 };
 SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string.isRequired,
+  icon: _propTypes.default.shape({
+    name: _propTypes.default.string,
+    color: _propTypes.default.string
+  }).isRequired,
   skillRef: _propTypes.default.string.isRequired,
   description: _propTypes.default.string,
   metrics: _propTypes.default.shape({
@@ -216,7 +258,6 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
     onChange: _propTypes.default.func,
     options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
   }),
-  sorting: _propTypes.default.shape(_select.default.propTypes),
   onBackClick: _propTypes.default.func,
   onReviewClick: _propTypes.default.func,
   onContinueLearningClick: _propTypes.default.func,