@coorpacademy/components 11.40.5 → 11.40.6-alpha.7

package/es/template/app-player/player/slides/header/index.d.ts

@@ -16,6 +16,14 @@ declare namespace SlidesHeader {
             count: PropTypes.Requireable<number>;
         }>>;
         const mode: PropTypes.Requireable<string>;
+        const multiLang: PropTypes.Requireable<PropTypes.InferProps<{
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            currentLang: PropTypes.Requireable<string>;
+            supportedLangs: PropTypes.Requireable<(PropTypes.InferProps<{
+                code: PropTypes.Validator<string>;
+                label: PropTypes.Validator<string>;
+            }> | null | undefined)[]>;
+        }>>;
     }
 }
 import PropTypes from "prop-types";

package/es/template/app-player/player/slides/header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"names":[],"mappings":";AAaA,4EAYC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"names":[],"mappings":";AAmFA,4EAeC"}

package/es/template/app-player/player/slides/header/index.js

@@ -1,6 +1,11 @@
+import _upperCase from "lodash/fp/upperCase";
+import _map from "lodash/fp/map";
+import _isEmpty from "lodash/fp/isEmpty";
 import React from 'react';
 import PropTypes from 'prop-types';
 import Link from '../../../../../atom/link';
+import ButtonMenuAction from '../../../../../molecule/button-menu-action';
+import { COLORS } from '../../../../../variables/colors';
 import Learner from './learner';
 import Microlearning from './microlearning';
 import Lives from './lives';
@@ -10,14 +15,90 @@ const HEADER_TYPE = {
   LEARNER: 'learner',
   MICROLEARNING: 'microlearning'
 };
+const STYLE_CHECKED = {
+  icon: {
+    position: 'right',
+    faIcon: {
+      name: 'check',
+      color: COLORS.white,
+      backgroundColor: COLORS.cm_primary_blue,
+      size: 10,
+      customStyle: {
+        padding: '0px',
+        height: '16px',
+        width: '16px'
+      }
+    }
+  },
+  customStyle: {
+    backgroundColor: COLORS.cm_blue_50
+  },
+  contentCustomStyle: {
+    width: '100%',
+    justifyContent: 'space-between'
+  }
+};
+const buttonMenuActionProps = multiLangOptions => {
+  console.log('TCL ------>  ~ buttonMenuActionProps ~ multiLangOptions:', multiLangOptions);
+  const {
+    currentLang = 'en',
+    supportedLangs = [],
+    onClick
+  } = multiLangOptions;
+  return {
+    button: {
+      type: 'text',
+      label: _upperCase(currentLang),
+      'aria-label': `${currentLang}-button`,
+      'data-name': 'button-multi-lang',
+      onClick: () => null,
+      icon: {
+        position: 'left',
+        faIcon: {
+          name: 'globe',
+          color: COLORS.neutral_700,
+          size: 14
+        }
+      },
+      customStyle: {
+        width: 'fit-content',
+        color: COLORS.neutral_500,
+        fontWeight: 600
+      },
+      withChevron: true
+    },
+    menu: {
+      buttons: _map(({
+        code,
+        label
+      }) => ({
+        ...(currentLang === code ? STYLE_CHECKED : {}),
+        type: 'defaultLeft',
+        onClick: () => onClick(code),
+        label,
+        'data-name': `${code}-button`,
+        disabled: false
+      }), supportedLangs)
+    },
+    menuWrapper: {
+      customStyle: {
+        maxHeight: '248px',
+        width: '209px'
+      }
+    }
+  };
+};
 const SlidesHeader = (props = {}, context = undefined) => {
   const {
     type,
     content,
     subcontent,
     lives,
-    mode
+    mode,
+    multiLang
   } = props;
+  console.log('TCL ------>  ~ SlidesHeader ~ props:', props);
+  console.log('TCL ------>  ~ SlidesHeader ~ multiLang:', multiLang);
   return /*#__PURE__*/React.createElement("div", {
     "data-name": "slidesHeader",
     className: style.wrapper
@@ -28,7 +109,7 @@ const SlidesHeader = (props = {}, context = undefined) => {
   }) : null, type === HEADER_TYPE.MICROLEARNING ? /*#__PURE__*/React.createElement(Microlearning, {
     content: content,
     mode: mode
-  }) : null, lives ? /*#__PURE__*/React.createElement(Lives, {
+  }) : null, _isEmpty(multiLang) ? null : /*#__PURE__*/React.createElement(ButtonMenuAction, buttonMenuActionProps(multiLang)), lives ? /*#__PURE__*/React.createElement(Lives, {
     count: lives.count
   }) : null);
 };
@@ -44,7 +125,15 @@ SlidesHeader.propTypes = process.env.NODE_ENV !== "production" ? {
     details: PropTypes.string
   }),
   lives: PropTypes.shape(Lives.propTypes),
-  mode: PropTypes.string
+  mode: PropTypes.string,
+  multiLang: PropTypes.shape({
+    onClick: PropTypes.func,
+    currentLang: PropTypes.string,
+    supportedLangs: PropTypes.arrayOf(PropTypes.shape({
+      code: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired
+    }))
+  })
 } : {};
 export default SlidesHeader;
 //# sourceMappingURL=index.js.map

package/es/template/app-player/player/slides/header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Link","Learner","Microlearning","Lives","style","HEADER_TYPE","LEARNER","MICROLEARNING","SlidesHeader","props","context","undefined","type","content","subcontent","lives","mode","createElement","className","wrapper","count","propTypes","process","env","NODE_ENV","oneOf","shape","href","title","string","isRequired","details"],"sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Link from '../../../../../atom/link';\nimport Learner from './learner';\nimport Microlearning from './microlearning';\nimport Lives from './lives';\nimport style from './style.css'; // eslint-disable-line css-modules/no-unused-class\n\nconst HEADER_TYPE = {\n  LEARNER: 'learner',\n  MICROLEARNING: 'microlearning'\n};\n\nconst SlidesHeader = (props = {}, context = undefined) => {\n  const {type, content, subcontent, lives, mode} = props;\n\n  return (\n    <div data-name=\"slidesHeader\" className={style.wrapper}>\n      {type === HEADER_TYPE.LEARNER ? (\n        <Learner content={content} subcontent={subcontent} mode={mode} />\n      ) : null}\n      {type === HEADER_TYPE.MICROLEARNING ? <Microlearning content={content} mode={mode} /> : null}\n      {lives ? <Lives count={lives.count} /> : null}\n    </div>\n  );\n};\n\nSlidesHeader.propTypes = {\n  type: PropTypes.oneOf([HEADER_TYPE.LEARNER, HEADER_TYPE.MICROLEARNING]),\n  content: PropTypes.shape({\n    href: Link.propTypes.href,\n    title: PropTypes.string.isRequired,\n    details: PropTypes.string\n  }),\n  subcontent: PropTypes.shape({\n    title: PropTypes.string,\n    details: PropTypes.string\n  }),\n  lives: PropTypes.shape(Lives.propTypes),\n  mode: PropTypes.string\n};\n\nexport default SlidesHeader;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,0BAA0B;AAC3C,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,KAAK,MAAM,aAAa,CAAC,CAAC;;AAEjC,MAAMC,WAAW,GAAG;EAClBC,OAAO,EAAE,SAAS;EAClBC,aAAa,EAAE;AACjB,CAAC;AAED,MAAMC,YAAY,GAAGA,CAACC,KAAK,GAAG,CAAC,CAAC,EAAEC,OAAO,GAAGC,SAAS,KAAK;EACxD,MAAM;IAACC,IAAI;IAAEC,OAAO;IAAEC,UAAU;IAAEC,KAAK;IAAEC;EAAI,CAAC,GAAGP,KAAK;EAEtD,oBACEX,KAAA,CAAAmB,aAAA;IAAK,aAAU,cAAc;IAACC,SAAS,EAAEd,KAAK,CAACe;EAAQ,GACpDP,IAAI,KAAKP,WAAW,CAACC,OAAO,gBAC3BR,KAAA,CAAAmB,aAAA,CAAChB,OAAO;IAACY,OAAO,EAAEA,OAAQ;IAACC,UAAU,EAAEA,UAAW;IAACE,IAAI,EAAEA;EAAK,CAAE,CAAC,GAC/D,IAAI,EACPJ,IAAI,KAAKP,WAAW,CAACE,aAAa,gBAAGT,KAAA,CAAAmB,aAAA,CAACf,aAAa;IAACW,OAAO,EAAEA,OAAQ;IAACG,IAAI,EAAEA;EAAK,CAAE,CAAC,GAAG,IAAI,EAC3FD,KAAK,gBAAGjB,KAAA,CAAAmB,aAAA,CAACd,KAAK;IAACiB,KAAK,EAAEL,KAAK,CAACK;EAAM,CAAE,CAAC,GAAG,IACtC,CAAC;AAEV,CAAC;AAEDZ,YAAY,CAACa,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACvBZ,IAAI,EAAEb,SAAS,CAAC0B,KAAK,CAAC,CAACpB,WAAW,CAACC,OAAO,EAAED,WAAW,CAACE,aAAa,CAAC,CAAC;EACvEM,OAAO,EAAEd,SAAS,CAAC2B,KAAK,CAAC;IACvBC,IAAI,EAAE3B,IAAI,CAACqB,SAAS,CAACM,IAAI;IACzBC,KAAK,EAAE7B,SAAS,CAAC8B,MAAM,CAACC,UAAU;IAClCC,OAAO,EAAEhC,SAAS,CAAC8B;EACrB,CAAC,CAAC;EACFf,UAAU,EAAEf,SAAS,CAAC2B,KAAK,CAAC;IAC1BE,KAAK,EAAE7B,SAAS,CAAC8B,MAAM;IACvBE,OAAO,EAAEhC,SAAS,CAAC8B;EACrB,CAAC,CAAC;EACFd,KAAK,EAAEhB,SAAS,CAAC2B,KAAK,CAACvB,KAAK,CAACkB,SAAS,CAAC;EACvCL,IAAI,EAAEjB,SAAS,CAAC8B;AAClB,CAAC;AAED,eAAerB,YAAY","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","Link","ButtonMenuAction","COLORS","Learner","Microlearning","Lives","style","HEADER_TYPE","LEARNER","MICROLEARNING","STYLE_CHECKED","icon","position","faIcon","name","color","white","backgroundColor","cm_primary_blue","size","customStyle","padding","height","width","cm_blue_50","contentCustomStyle","justifyContent","buttonMenuActionProps","multiLangOptions","console","log","currentLang","supportedLangs","onClick","button","type","label","_upperCase","neutral_700","neutral_500","fontWeight","withChevron","menu","buttons","_map","code","disabled","menuWrapper","maxHeight","SlidesHeader","props","context","undefined","content","subcontent","lives","mode","multiLang","createElement","className","wrapper","_isEmpty","count","propTypes","process","env","NODE_ENV","oneOf","shape","href","title","string","isRequired","details","func","arrayOf"],"sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map, upperCase} from 'lodash/fp';\nimport Link from '../../../../../atom/link';\nimport ButtonMenuAction from '../../../../../molecule/button-menu-action';\nimport {COLORS} from '../../../../../variables/colors';\nimport Learner from './learner';\nimport Microlearning from './microlearning';\nimport Lives from './lives';\nimport style from './style.css'; // eslint-disable-line css-modules/no-unused-class\n\nconst HEADER_TYPE = {\n  LEARNER: 'learner',\n  MICROLEARNING: 'microlearning'\n};\n\nconst STYLE_CHECKED = {\n  icon: {\n    position: 'right',\n    faIcon: {\n      name: 'check',\n      color: COLORS.white,\n      backgroundColor: COLORS.cm_primary_blue,\n      size: 10,\n      customStyle: {\n        padding: '0px',\n        height: '16px',\n        width: '16px'\n      }\n    }\n  },\n  customStyle: {backgroundColor: COLORS.cm_blue_50},\n  contentCustomStyle: {\n    width: '100%',\n    justifyContent: 'space-between'\n  }\n};\n\nconst buttonMenuActionProps = multiLangOptions => {\n  console.log('TCL ------>  ~ buttonMenuActionProps ~ multiLangOptions:', multiLangOptions);\n  const {currentLang = 'en', supportedLangs = [], onClick} = multiLangOptions;\n\n  return {\n    button: {\n      type: 'text',\n      label: upperCase(currentLang),\n      'aria-label': `${currentLang}-button`,\n      'data-name': 'button-multi-lang',\n      onClick: () => null,\n      icon: {\n        position: 'left',\n        faIcon: {\n          name: 'globe',\n          color: COLORS.neutral_700,\n          size: 14\n        }\n      },\n      customStyle: {\n        width: 'fit-content',\n        color: COLORS.neutral_500,\n        fontWeight: 600\n      },\n      withChevron: true\n    },\n    menu: {\n      buttons: map(\n        ({code, label}) => ({\n          ...(currentLang === code ? STYLE_CHECKED : {}),\n          type: 'defaultLeft',\n          onClick: () => onClick(code),\n          label,\n          'data-name': `${code}-button`,\n          disabled: false\n        }),\n        supportedLangs\n      )\n    },\n    menuWrapper: {\n      customStyle: {maxHeight: '248px', width: '209px'}\n    }\n  };\n};\n\nconst SlidesHeader = (props = {}, context = undefined) => {\n  const {type, content, subcontent, lives, mode, multiLang} = props;\n  console.log('TCL ------>  ~ SlidesHeader ~ props:', props);\n  console.log('TCL ------>  ~ SlidesHeader ~ multiLang:', multiLang);\n\n  return (\n    <div data-name=\"slidesHeader\" className={style.wrapper}>\n      {type === HEADER_TYPE.LEARNER ? (\n        <Learner content={content} subcontent={subcontent} mode={mode} />\n      ) : null}\n      {type === HEADER_TYPE.MICROLEARNING ? <Microlearning content={content} mode={mode} /> : null}\n      {isEmpty(multiLang) ? null : <ButtonMenuAction {...buttonMenuActionProps(multiLang)} />}\n      {lives ? <Lives count={lives.count} /> : null}\n    </div>\n  );\n};\n\nSlidesHeader.propTypes = {\n  type: PropTypes.oneOf([HEADER_TYPE.LEARNER, HEADER_TYPE.MICROLEARNING]),\n  content: PropTypes.shape({\n    href: Link.propTypes.href,\n    title: PropTypes.string.isRequired,\n    details: PropTypes.string\n  }),\n  subcontent: PropTypes.shape({\n    title: PropTypes.string,\n    details: PropTypes.string\n  }),\n  lives: PropTypes.shape(Lives.propTypes),\n  mode: PropTypes.string,\n  multiLang: PropTypes.shape({\n    onClick: PropTypes.func,\n    currentLang: PropTypes.string,\n    supportedLangs: PropTypes.arrayOf(\n      PropTypes.shape({\n        code: PropTypes.string.isRequired,\n        label: PropTypes.string.isRequired\n      })\n    )\n  })\n};\n\nexport default SlidesHeader;\n"],"mappings":"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","ignoreList":[]}

package/es/template/app-player/player/slides/header/style.css

@@ -8,7 +8,7 @@
   justify-content: space-between;
   background-color: light;
   border-radius: 3px 3px 0 0;
-  overflow: hidden;
+  align-items: center;
 }
 
 .backIcon {