@coorpacademy/components 11.40.22 → 11.40.24

package/es/molecule/progress-wrapper/index.js

@@ -18,12 +18,18 @@ import style from './style.css';
 const uncappedMap = _map.convert({
   cap: false
 });
+
+// LinkedIn brand colors so the share CTA reads unmistakably as LinkedIn.
+const LINKEDIN_BLUE = '#0A66C2';
+const LINKEDIN_BLUE_HOVER = '#004182';
 const DetailSection = ({
   index,
   type,
   isLocked,
   downloadUrl,
-  stars
+  stars,
+  linkedinShareUrl,
+  onLinkedinShareClick
 }, context) => {
   const {
     translate
@@ -31,6 +37,31 @@ const DetailSection = ({
   const skin = GetSkinFromContext(context);
   const primarySkinColor = _get('common.primary', skin);
   const isTypeStars = type === 'stars';
+  const showLinkedinButton = type === 'badge' && !_isEmpty(linkedinShareUrl) && !isLocked;
+  const linkedinButtonProps = {
+    label: translate('publish_on_linkedin'),
+    link: {
+      target: '_blank',
+      href: linkedinShareUrl,
+      rel: 'noopener noreferrer'
+    },
+    onClick: onLinkedinShareClick,
+    'data-name': 'publish-linkedin-button',
+    'aria-label': translate('publish_on_linkedin'),
+    customStyle: {
+      backgroundColor: LINKEDIN_BLUE,
+      color: COLORS.white,
+      width: 'auto',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    hoverBackgroundColor: LINKEDIN_BLUE_HOVER,
+    hoverColor: COLORS.white,
+    // The nova LinkedIn glyph uses fill: currentColor, so it inherits the white label color.
+    icon: {
+      position: 'left',
+      type: 'linkedin'
+    }
+  };
   const downloadButtonProps = {
     label: translate('download'),
     link: {
@@ -63,6 +94,7 @@ const DetailSection = ({
   return isTypeStars ? /*#__PURE__*/React.createElement("div", {
     className: style[`detailsSection${index}`],
     "data-name": type,
+    role: "group",
     "aria-label": `${type} informations`
   }, /*#__PURE__*/React.createElement("div", {
     className: style.detailsInfo
@@ -80,6 +112,7 @@ const DetailSection = ({
   }), /*#__PURE__*/React.createElement("span", null, stars)))) : /*#__PURE__*/React.createElement("div", {
     className: style[`detailsSection${index}`],
     "data-name": type,
+    role: "group",
     "aria-label": `${type} informations`
   }, /*#__PURE__*/React.createElement("img", {
     className: style.img,
@@ -92,7 +125,7 @@ const DetailSection = ({
     className: style.detailsTitle
   }, type === 'diploma' ? translate('diploma') : translate('badge'))), /*#__PURE__*/React.createElement("div", {
     className: style.buttonContainer
-  }, /*#__PURE__*/React.createElement(ButtonLink, downloadButtonProps))));
+  }, /*#__PURE__*/React.createElement(ButtonLink, downloadButtonProps), showLinkedinButton ? /*#__PURE__*/React.createElement(ButtonLink, linkedinButtonProps) : null)));
 };
 const ProgressWrapper = ({
   completedModules,
@@ -117,6 +150,7 @@ const ProgressWrapper = ({
   return /*#__PURE__*/React.createElement("div", {
     className: style.container,
     "data-name": "prgress-wrapper",
+    role: "group",
     "aria-label": "progress wrapper section"
   }, /*#__PURE__*/React.createElement("div", {
     className: style.titleContainer
@@ -190,7 +224,9 @@ const ProgressWrapper = ({
 const commonDetailSectionPropTypes = process.env.NODE_ENV !== "production" ? {
   type: PropTypes.oneOf(['diploma', 'badge', 'stars']),
   downloadUrl: PropTypes.string,
-  stars: PropTypes.number
+  stars: PropTypes.number,
+  linkedinShareUrl: PropTypes.string,
+  onLinkedinShareClick: PropTypes.func
 } : {};
 DetailSection.contextTypes = {
   translate: Provider.childContextTypes.translate,

package/es/molecule/progress-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","classNames","PropTypes","convert","Title","ProgressBar","COLORS","Tag","ButtonLink","Icon","Provider","GetSkinFromContext","style","uncappedMap","_map","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","skin","primarySkinColor","_get","isTypeStars","downloadButtonProps","label","link","target","href","customStyle","backgroundColor","color","width","transition","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","size","padding","disabled","createElement","className","detailsInfo","detailsInfoText","detailsTitle","iconName","iconColor","preset","img","src","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","total","count","showDetails","setShowDetails","handleToggleDetails","container","titleContainer","titleSize","statscontainer","stats","dangerouslySetInnerHTML","__html","statsNumber","customProgressBar","cm_positive_500","displayInfo","value","max","statsProgressionMobile","_isEmpty","Fragment","toggleDetailsButton","onClick","toggleDetailsLabel","toggleDetailsTitle","cm_grey_500","cm_grey_700","faSize","wrapperSize","details","visibleDetails","hiddenDetails","section","_extends","key","commonDetailSectionPropTypes","process","env","NODE_ENV","oneOf","string","number","contextTypes","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {isEmpty, map, get} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, downloadUrl, stars}, context) => {\n  const {translate} = context;\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const isTypeStars = type === 'stars';\n\n  const downloadButtonProps = {\n    label: translate('download'),\n    link: {\n      target: '_blank',\n      href: downloadUrl\n    },\n    'data-name': `download-${type}-button`,\n    'aria-label': `download ${type} button`,\n    customStyle: {\n      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      width: 'auto',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverBackgroundColor: primarySkinColor,\n    hoverColor: COLORS.white,\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'download',\n        color: primarySkinColor,\n        size: 14,\n        customStyle: {padding: 0}\n      }\n    },\n    disabled: isLocked\n  };\n\n  return isTypeStars ? (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n        </div>\n\n        <div className={style.buttonContainer}>\n          <ButtonLink {...downloadButtonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocale = translate('modules_completed_mandatory', {\n    total: mandatoryModules,\n    count: completedModules > mandatoryModules ? mandatoryModules : completedModules\n  });\n  const isLocked = progression !== 100;\n\n  const [showDetails, setShowDetails] = useState(false);\n\n  const handleToggleDetails = useCallback(() => {\n    setShowDetails(!showDetails);\n  }, [showDetails]);\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      aria-label=\"progress wrapper section\"\n    >\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: mandatoryCompletedModulesLocale}}\n          />\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.cm_positive_500}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {!isEmpty(sections) ? (\n        <>\n          <div\n            className={style.toggleDetailsButton}\n            onClick={handleToggleDetails}\n            data-testid=\"progress-wrapper-toggle-details-button\"\n          >\n            <div className={style.toggleDetailsLabel}>\n              <span className={style.toggleDetailsTitle}>{translate('rewards')}</span>\n              {isLocked ? (\n                <Tag\n                  label={translate('locked')}\n                  size=\"S\"\n                  icon={{\n                    position: 'left',\n                    iconName: 'lock',\n                    iconColor: COLORS.cm_grey_500,\n                    preset: 's',\n                    customStyle: {padding: 0}\n                  }}\n                />\n              ) : null}\n            </div>\n            <Icon\n              iconColor={COLORS.cm_grey_700}\n              iconName={showDetails ? 'chevron-up' : 'chevron-down'}\n              size={{faSize: 20, wrapperSize: 24}}\n            />\n          </div>\n\n          <div\n            className={classNames(\n              style.details,\n              showDetails ? style.visibleDetails : style.hiddenDetails\n            )}\n            data-testid=\"progress-wrapper-details\"\n          >\n            {uncappedMap(\n              (section, index) => (\n                <DetailSection\n                  {...section}\n                  isLocked={isLocked}\n                  key={`${section.type}-${index}`}\n                  index={index}\n                />\n              ),\n              sections\n            )}\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,QAAQ,QAAO,OAAO;AAClD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAAQC,OAAO,QAAO,oBAAoB;AAE1C,OAAOC,KAAK,MAAM,kBAAkB;AACpC,OAAOC,WAAW,MAAM,iBAAiB;AACzC,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,OAAOC,GAAG,MAAM,gBAAgB;AAChC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,QAAQ,IAAGC,kBAAkB,QAAO,qBAAqB;AAChE;AACA,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,WAAW,GAAGC,IAAA,CAAIX,OAAO,CAAC;EAACY,GAAG,EAAE;AAAK,CAAC,CAAC;AAE7C,MAAMC,aAAa,GAAGA,CAAC;EAACC,KAAK;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,WAAW;EAAEC;AAAK,CAAC,EAAEC,OAAO,KAAK;EAC9E,MAAM;IAACC;EAAS,CAAC,GAAGD,OAAO;EAC3B,MAAME,IAAI,GAAGb,kBAAkB,CAACW,OAAO,CAAC;EACxC,MAAMG,gBAAgB,GAAGC,IAAA,CAAI,gBAAgB,EAAEF,IAAI,CAAC;EACpD,MAAMG,WAAW,GAAGT,IAAI,KAAK,OAAO;EAEpC,MAAMU,mBAAmB,GAAG;IAC1BC,KAAK,EAAEN,SAAS,CAAC,UAAU,CAAC;IAC5BO,IAAI,EAAE;MACJC,MAAM,EAAE,QAAQ;MAChBC,IAAI,EAAEZ;IACR,CAAC;IACD,WAAW,EAAE,YAAYF,IAAI,SAAS;IACtC,YAAY,EAAE,YAAYA,IAAI,SAAS;IACvCe,WAAW,EAAE;MACXC,eAAe,EAAE/B,OAAO,CAAC,SAASsB,gBAAgB,WAAW,CAAC;MAC9DU,KAAK,EAAEV,gBAAgB;MACvBW,KAAK,EAAE,MAAM;MACbC,UAAU,EAAE;IACd,CAAC;IACDC,oBAAoB,EAAEb,gBAAgB;IACtCc,UAAU,EAAEjC,MAAM,CAACkC,KAAK;IACxBC,IAAI,EAAE;MACJC,QAAQ,EAAE,MAAM;MAChBC,MAAM,EAAE;QACNC,IAAI,EAAE,UAAU;QAChBT,KAAK,EAAEV,gBAAgB;QACvBoB,IAAI,EAAE,EAAE;QACRZ,WAAW,EAAE;UAACa,OAAO,EAAE;QAAC;MAC1B;IACF,CAAC;IACDC,QAAQ,EAAE5B;EACZ,CAAC;EAED,OAAOQ,WAAW,gBAChB7B,KAAA,CAAAkD,aAAA;IACEC,SAAS,EAAErC,KAAK,CAAC,iBAAiBK,KAAK,EAAE,CAAE;IAC3C,aAAWC,IAAK;IAChB,cAAY,GAAGA,IAAI;EAAgB,gBAEnCpB,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAACsC;EAAY,gBAChCpD,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAACuC;EAAgB,gBACpCrD,KAAA,CAAAkD,aAAA;IAAMC,SAAS,EAAErC,KAAK,CAACwC;EAAa,GAAE7B,SAAS,CAAC,aAAa,CAAQ,CAClE,CAAC,eACNzB,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAACS;EAAM,gBAC1BvB,KAAA,CAAAkD,aAAA,CAACvC,IAAI;IAAC4C,QAAQ,EAAC,MAAM;IAACC,SAAS,EAAC,SAAS;IAACpB,eAAe,EAAC,SAAS;IAACqB,MAAM,EAAC;EAAI,CAAE,CAAC,eAClFzD,KAAA,CAAAkD,aAAA,eAAO3B,KAAY,CAChB,CACF,CACF,CAAC,gBAENvB,KAAA,CAAAkD,aAAA;IACEC,SAAS,EAAErC,KAAK,CAAC,iBAAiBK,KAAK,EAAE,CAAE;IAC3C,aAAWC,IAAK;IAChB,cAAY,GAAGA,IAAI;EAAgB,gBAEnCpB,KAAA,CAAAkD,aAAA;IACEC,SAAS,EAAErC,KAAK,CAAC4C,GAAI;IACrBC,GAAG,EACDvC,IAAI,KAAK,OAAO,GACZE,WAAW,GACX;EACL,CACF,CAAC,eACFtB,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAACsC;EAAY,gBAChCpD,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAACuC;EAAgB,gBACpCrD,KAAA,CAAAkD,aAAA;IAAMC,SAAS,EAAErC,KAAK,CAACwC;EAAa,GACjClC,IAAI,KAAK,SAAS,GAAGK,SAAS,CAAC,SAAS,CAAC,GAAGA,SAAS,CAAC,OAAO,CAC1D,CACH,CAAC,eAENzB,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAAC8C;EAAgB,gBACpC5D,KAAA,CAAAkD,aAAA,CAACxC,UAAU,EAAKoB,mBAAsB,CACnC,CACF,CACF,CACN;AACH,CAAC;AAED,MAAM+B,eAAe,GAAGA,CACtB;EAACC,gBAAgB;EAAEC,gBAAgB;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,WAAW;EAAEC;AAAQ,CAAC,EAC5E3C,OAAO,KACJ;EACH,MAAM;IAACC;EAAS,CAAC,GAAGD,OAAO;EAC3B,MAAM4C,+BAA+B,GAAG3C,SAAS,CAAC,6BAA6B,EAAE;IAC/E4C,KAAK,EAAEN,gBAAgB;IACvBO,KAAK,EAAER,gBAAgB,GAAGC,gBAAgB,GAAGA,gBAAgB,GAAGD;EAClE,CAAC,CAAC;EACF,MAAMzC,QAAQ,GAAG6C,WAAW,KAAK,GAAG;EAEpC,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGtE,QAAQ,CAAC,KAAK,CAAC;EAErD,MAAMuE,mBAAmB,GAAGxE,WAAW,CAAC,MAAM;IAC5CuE,cAAc,CAAC,CAACD,WAAW,CAAC;EAC9B,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EACjB,oBACEvE,KAAA,CAAAkD,aAAA;IACEC,SAAS,EAAErC,KAAK,CAAC4D,SAAU;IAC3B,aAAU,iBAAiB;IAC3B,cAAW;EAA0B,gBAErC1E,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAAC6D;EAAe,gBACnC3E,KAAA,CAAAkD,aAAA,CAAC5C,KAAK;IAACc,IAAI,EAAC,YAAY;IAACwD,SAAS,EAAC,QAAQ;IAACZ,KAAK,EAAEA,KAAM;IAACC,QAAQ,EAAEA;EAAS,CAAE,CAC5E,CAAC,eACNjE,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAAC+D;EAAe,gBACnC7E,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAACgE;EAAM,gBAC1B9E,KAAA,CAAAkD,aAAA;IACE;IACA6B,uBAAuB,EAAE;MAACC,MAAM,EAAEZ;IAA+B;EAAE,CACpE,CACE,CAAC,eACNpE,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAACoD;EAAY,gBAChClE,KAAA,CAAAkD,aAAA;IAAMC,SAAS,EAAErC,KAAK,CAACmE,WAAY;IAAC,aAAU;EAAgB,GAC3Df,WAAW,EAAC,GACT,CACH,CACF,CAAC,eACNlE,KAAA,CAAAkD,aAAA,CAAC3C,WAAW;IACV4C,SAAS,EAAErC,KAAK,CAACoE,iBAAkB;IACnCpE,KAAK,EAAE;MAACsB,eAAe,EAAE5B,MAAM,CAAC2E;IAAe,CAAE;IACjDC,WAAW,EAAE,KAAM;IACnBC,KAAK,EAAEnB,WAAY;IACnBoB,GAAG,EAAE;EAAI,CACV,CAAC,eACFtF,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAACyE;EAAuB,gBAC3CvF,KAAA,CAAAkD,aAAA;IAAMC,SAAS,EAAErC,KAAK,CAACmE;EAAY,GAAEf,WAAW,EAAC,GAAO,CACrD,CAAC,EAEL,CAACsB,QAAA,CAAQrB,QAAQ,CAAC,gBACjBnE,KAAA,CAAAkD,aAAA,CAAAlD,KAAA,CAAAyF,QAAA,qBACEzF,KAAA,CAAAkD,aAAA;IACEC,SAAS,EAAErC,KAAK,CAAC4E,mBAAoB;IACrCC,OAAO,EAAElB,mBAAoB;IAC7B,eAAY;EAAwC,gBAEpDzE,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAErC,KAAK,CAAC8E;EAAmB,gBACvC5F,KAAA,CAAAkD,aAAA;IAAMC,SAAS,EAAErC,KAAK,CAAC+E;EAAmB,GAAEpE,SAAS,CAAC,SAAS,CAAQ,CAAC,EACvEJ,QAAQ,gBACPrB,KAAA,CAAAkD,aAAA,CAACzC,GAAG;IACFsB,KAAK,EAAEN,SAAS,CAAC,QAAQ,CAAE;IAC3BsB,IAAI,EAAC,GAAG;IACRJ,IAAI,EAAE;MACJC,QAAQ,EAAE,MAAM;MAChBW,QAAQ,EAAE,MAAM;MAChBC,SAAS,EAAEhD,MAAM,CAACsF,WAAW;MAC7BrC,MAAM,EAAE,GAAG;MACXtB,WAAW,EAAE;QAACa,OAAO,EAAE;MAAC;IAC1B;EAAE,CACH,CAAC,GACA,IACD,CAAC,eACNhD,KAAA,CAAAkD,aAAA,CAACvC,IAAI;IACH6C,SAAS,EAAEhD,MAAM,CAACuF,WAAY;IAC9BxC,QAAQ,EAAEgB,WAAW,GAAG,YAAY,GAAG,cAAe;IACtDxB,IAAI,EAAE;MAACiD,MAAM,EAAE,EAAE;MAAEC,WAAW,EAAE;IAAE;EAAE,CACrC,CACE,CAAC,eAENjG,KAAA,CAAAkD,aAAA;IACEC,SAAS,EAAEhD,UAAU,CACnBW,KAAK,CAACoF,OAAO,EACb3B,WAAW,GAAGzD,KAAK,CAACqF,cAAc,GAAGrF,KAAK,CAACsF,aAC7C,CAAE;IACF,eAAY;EAA0B,GAErCrF,WAAW,CACV,CAACsF,OAAO,EAAElF,KAAK,kBACbnB,KAAA,CAAAkD,aAAA,CAAChC,aAAa,EAAAoF,QAAA,KACRD,OAAO;IACXhF,QAAQ,EAAEA,QAAS;IACnBkF,GAAG,EAAE,GAAGF,OAAO,CAACjF,IAAI,IAAID,KAAK,EAAG;IAChCA,KAAK,EAAEA;EAAM,EACd,CACF,EACDgD,QACF,CACG,CACL,CAAC,GACD,IACD,CAAC;AAEV,CAAC;AAED,MAAMqC,4BAA4B,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACnCvF,IAAI,EAAEhB,SAAS,CAACwG,KAAK,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACpDtF,WAAW,EAAElB,SAAS,CAACyG,MAAM;EAC7BtF,KAAK,EAAEnB,SAAS,CAAC0G;AACnB,CAAC;AAED5F,aAAa,CAAC6F,YAAY,GAAG;EAC3BtF,SAAS,EAAEb,QAAQ,CAACoG,iBAAiB,CAACvF,SAAS;EAC/CC,IAAI,EAAEd,QAAQ,CAACoG,iBAAiB,CAACtF;AACnC,CAAC;AAEDR,aAAa,CAAC+F,SAAS,GAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACxBxF,KAAK,EAAEf,SAAS,CAAC0G,MAAM;EACvBzF,QAAQ,EAAEjB,SAAS,CAAC8G,IAAI;EACxB,GAAGV;AACL,CAAC;AAED3C,eAAe,CAACkD,YAAY,GAAG;EAC7BtF,SAAS,EAAEb,QAAQ,CAACoG,iBAAiB,CAACvF;AACxC,CAAC;AAEDoC,eAAe,CAACoD,SAAS,GAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAC1B3C,KAAK,EAAE5D,SAAS,CAACyG,MAAM;EACvB5C,QAAQ,EAAE7D,SAAS,CAACyG,MAAM;EAC1B/C,gBAAgB,EAAE1D,SAAS,CAAC0G,MAAM;EAClC/C,gBAAgB,EAAE3D,SAAS,CAAC0G,MAAM;EAClC5C,WAAW,EAAE9D,SAAS,CAAC0G,MAAM;EAC7B3C,QAAQ,EAAE/D,SAAS,CAAC+G,OAAO,CAAC/G,SAAS,CAACgH,KAAK,CAACZ,4BAA4B,CAAC;AAC3E,CAAC;AAED,eAAe3C,eAAe","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","classNames","PropTypes","convert","Title","ProgressBar","COLORS","Tag","ButtonLink","Icon","Provider","GetSkinFromContext","style","uncappedMap","_map","cap","LINKEDIN_BLUE","LINKEDIN_BLUE_HOVER","DetailSection","index","type","isLocked","downloadUrl","stars","linkedinShareUrl","onLinkedinShareClick","context","translate","skin","primarySkinColor","_get","isTypeStars","showLinkedinButton","_isEmpty","linkedinButtonProps","label","link","target","href","rel","onClick","customStyle","backgroundColor","color","white","width","transition","hoverBackgroundColor","hoverColor","icon","position","downloadButtonProps","faIcon","name","size","padding","disabled","createElement","className","role","detailsInfo","detailsInfoText","detailsTitle","iconName","iconColor","preset","img","src","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","total","count","showDetails","setShowDetails","handleToggleDetails","container","titleContainer","titleSize","statscontainer","stats","dangerouslySetInnerHTML","__html","statsNumber","customProgressBar","cm_positive_500","displayInfo","value","max","statsProgressionMobile","Fragment","toggleDetailsButton","toggleDetailsLabel","toggleDetailsTitle","cm_grey_500","cm_grey_700","faSize","wrapperSize","details","visibleDetails","hiddenDetails","section","_extends","key","commonDetailSectionPropTypes","process","env","NODE_ENV","oneOf","string","number","func","contextTypes","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {isEmpty, map, get} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\n// LinkedIn brand colors so the share CTA reads unmistakably as LinkedIn.\nconst LINKEDIN_BLUE = '#0A66C2';\nconst LINKEDIN_BLUE_HOVER = '#004182';\n\nconst DetailSection = (\n  {index, type, isLocked, downloadUrl, stars, linkedinShareUrl, onLinkedinShareClick},\n  context\n) => {\n  const {translate} = context;\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const isTypeStars = type === 'stars';\n  const showLinkedinButton = type === 'badge' && !isEmpty(linkedinShareUrl) && !isLocked;\n\n  const linkedinButtonProps = {\n    label: translate('publish_on_linkedin'),\n    link: {\n      target: '_blank',\n      href: linkedinShareUrl,\n      rel: 'noopener noreferrer'\n    },\n    onClick: onLinkedinShareClick,\n    'data-name': 'publish-linkedin-button',\n    'aria-label': translate('publish_on_linkedin'),\n    customStyle: {\n      backgroundColor: LINKEDIN_BLUE,\n      color: COLORS.white,\n      width: 'auto',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverBackgroundColor: LINKEDIN_BLUE_HOVER,\n    hoverColor: COLORS.white,\n    // The nova LinkedIn glyph uses fill: currentColor, so it inherits the white label color.\n    icon: {\n      position: 'left',\n      type: 'linkedin'\n    }\n  };\n\n  const downloadButtonProps = {\n    label: translate('download'),\n    link: {\n      target: '_blank',\n      href: downloadUrl\n    },\n    'data-name': `download-${type}-button`,\n    'aria-label': `download ${type} button`,\n    customStyle: {\n      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      width: 'auto',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverBackgroundColor: primarySkinColor,\n    hoverColor: COLORS.white,\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'download',\n        color: primarySkinColor,\n        size: 14,\n        customStyle: {padding: 0}\n      }\n    },\n    disabled: isLocked\n  };\n\n  return isTypeStars ? (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      role=\"group\"\n      aria-label={`${type} informations`}\n    >\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      role=\"group\"\n      aria-label={`${type} informations`}\n    >\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n        </div>\n\n        <div className={style.buttonContainer}>\n          <ButtonLink {...downloadButtonProps} />\n          {showLinkedinButton ? <ButtonLink {...linkedinButtonProps} /> : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocale = translate('modules_completed_mandatory', {\n    total: mandatoryModules,\n    count: completedModules > mandatoryModules ? mandatoryModules : completedModules\n  });\n  const isLocked = progression !== 100;\n\n  const [showDetails, setShowDetails] = useState(false);\n\n  const handleToggleDetails = useCallback(() => {\n    setShowDetails(!showDetails);\n  }, [showDetails]);\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      role=\"group\"\n      aria-label=\"progress wrapper section\"\n    >\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: mandatoryCompletedModulesLocale}}\n          />\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.cm_positive_500}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {!isEmpty(sections) ? (\n        <>\n          <div\n            className={style.toggleDetailsButton}\n            onClick={handleToggleDetails}\n            data-testid=\"progress-wrapper-toggle-details-button\"\n          >\n            <div className={style.toggleDetailsLabel}>\n              <span className={style.toggleDetailsTitle}>{translate('rewards')}</span>\n              {isLocked ? (\n                <Tag\n                  label={translate('locked')}\n                  size=\"S\"\n                  icon={{\n                    position: 'left',\n                    iconName: 'lock',\n                    iconColor: COLORS.cm_grey_500,\n                    preset: 's',\n                    customStyle: {padding: 0}\n                  }}\n                />\n              ) : null}\n            </div>\n            <Icon\n              iconColor={COLORS.cm_grey_700}\n              iconName={showDetails ? 'chevron-up' : 'chevron-down'}\n              size={{faSize: 20, wrapperSize: 24}}\n            />\n          </div>\n\n          <div\n            className={classNames(\n              style.details,\n              showDetails ? style.visibleDetails : style.hiddenDetails\n            )}\n            data-testid=\"progress-wrapper-details\"\n          >\n            {uncappedMap(\n              (section, index) => (\n                <DetailSection\n                  {...section}\n                  isLocked={isLocked}\n                  key={`${section.type}-${index}`}\n                  index={index}\n                />\n              ),\n              sections\n            )}\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number,\n  linkedinShareUrl: PropTypes.string,\n  onLinkedinShareClick: PropTypes.func\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/progress-wrapper/style.css

@@ -78,7 +78,7 @@
   gap: 20px;
   padding: 16px;
   background-color: white;
-  height: 114px;
+  min-height: 114px;
   flex: 1;
 }
 
@@ -115,6 +115,9 @@
 }
 
 .buttonContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   width: fit-content;
 }
 

package/es/molecule/questions/qcm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm/index.js"],"names":[],"mappings":";AASA,kEAwDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm/index.js"],"names":[],"mappings":";AAiBA,kEA2DC"}

package/es/molecule/questions/qcm/index.js

@@ -6,6 +6,13 @@ import maxBy from 'lodash/fp/maxBy';
 import Provider, { GetSkinFromContext } from '../../../atom/provider';
 import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
+const handleAnswerKeyDown = onClick => event => {
+  if (!onClick) return;
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    onClick(event);
+  }
+};
 const QCM = (props, legacyContext) => {
   const {
     answers,
@@ -27,10 +34,13 @@ const QCM = (props, legacyContext) => {
     const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;
     return /*#__PURE__*/React.createElement("div", {
       "data-name": "answer",
+      role: "button",
+      tabIndex: 0,
       "aria-label": ariaLabel || title,
       title: ariaLabel || title,
       className: classnames(longAnswerClass, style.innerHTML, selectedAnswerClass),
       onClick: onClick,
+      onKeyDown: handleAnswerKeyDown(onClick),
       style: {
         ...(selected && {
           boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`

package/es/molecule/questions/qcm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","createElement","className","innerHTML","boxShadow","backgroundColor","background","answerText","dangerouslySetInnerHTML","__html","wrapper","role","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            title={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div\n      data-name=\"qcm\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCM;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","handleAnswerKeyDown","onClick","event","key","preventDefault","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","createElement","role","tabIndex","className","innerHTML","onKeyDown","boxShadow","backgroundColor","background","answerText","dangerouslySetInnerHTML","__html","wrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst handleAnswerKeyDown = onClick => event => {\n  if (!onClick) return;\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onClick(event);\n  }\n};\n\nconst QCM = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            role=\"button\"\n            tabIndex={0}\n            aria-label={ariaLabel || title}\n            title={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            onKeyDown={handleAnswerKeyDown(onClick)}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div\n      data-name=\"qcm\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCM;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/questions/qcm-graphic/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":[],"mappings":";AAQA,uEAwEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":[],"mappings":";AAQA,uEAyEC"}

package/es/molecule/questions/qcm-graphic/index.js

@@ -44,6 +44,7 @@ const QCMImage = (props, legacyContext) => {
     }, /*#__PURE__*/React.createElement("div", {
       className: style.imageWrapper,
       "data-name": "answerImage",
+      role: "img",
       "aria-label": ariaLabel || title,
       title: ariaLabel || title,
       style: {

package/es/molecule/questions/qcm-graphic/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","primarySkinColor","_getOr","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","checkboxId","createElement","boxShadow","className","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","htmlFor","id","type","value","checked","onChange","hiddenCheckbox","wrapper","role","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n    const checkboxId = `checkbox-graphic-${key}`;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            title={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div title={title} className={classnames(style.title, style.innerHTML)}>\n              <label htmlFor={checkboxId}>\n                <input\n                  id={checkboxId}\n                  type=\"checkbox\"\n                  value={title}\n                  title={title}\n                  aria-label={title}\n                  checked={selected}\n                  onChange={onClick}\n                  className={style.hiddenCheckbox}\n                />\n                {title}\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div\n      data-name=\"qcm-graphic-wrapper\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCMImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","primarySkinColor","_getOr","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","checkboxId","createElement","boxShadow","className","backgroundColor","background","content","imageWrapper","role","backgroundImage","titleWrapper","innerHTML","htmlFor","id","type","value","checked","onChange","hiddenCheckbox","wrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n    const checkboxId = `checkbox-graphic-${key}`;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            role=\"img\"\n            aria-label={ariaLabel || title}\n            title={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div title={title} className={classnames(style.title, style.innerHTML)}>\n              <label htmlFor={checkboxId}>\n                <input\n                  id={checkboxId}\n                  type=\"checkbox\"\n                  value={title}\n                  title={title}\n                  aria-label={title}\n                  checked={selected}\n                  onChange={onClick}\n                  className={style.hiddenCheckbox}\n                />\n                {title}\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div\n      data-name=\"qcm-graphic-wrapper\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCMImage;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/quick-filters/index.d.ts

@@ -58,6 +58,7 @@ declare const QuickFilters: {
                 href: import("prop-types").Requireable<string>;
                 download: import("prop-types").Requireable<boolean>;
                 target: import("prop-types").Requireable<string>;
+                rel: import("prop-types").Requireable<string>;
             }>>;
             hoverBackgroundColor: import("prop-types").Requireable<string>;
             hoverColor: import("prop-types").Requireable<string>;

package/es/molecule/quick-filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAAC,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,YAAY,cAAe,MAAM,WAAW,MAAM,SAAS,CAAC,cAAc,CAAC,SAOvF,CAAC;AAyCF,QAAA,MAAM,YAAY;6EACsD,iBAAiB,WAC9E,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmH1B,CAAC;AAMF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAAC,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,YAAY,cAAe,MAAM,WAAW,MAAM,SAAS,CAAC,cAAc,CAAC,SAOvF,CAAC;AAyCF,QAAA,MAAM,YAAY;6EACsD,iBAAiB,WAC9E,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH1B,CAAC;AAMF,eAAe,YAAY,CAAC"}

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

@@ -128,6 +128,7 @@ const QuickFilters = ({
     className: style.filtersList,
     ref: filtersListRef,
     "data-testid": "filters-options-list",
+    role: "group",
     "aria-label": filterOptionsAriaLabel
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "all-option",

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

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

package/es/molecule/quick-filters/types.d.ts

@@ -79,6 +79,7 @@ export declare const propTypes: {
             href: PropTypes.Requireable<string>;
             download: PropTypes.Requireable<boolean>;
             target: PropTypes.Requireable<string>;
+            rel: PropTypes.Requireable<string>;
         }>>;
         hoverBackgroundColor: PropTypes.Requireable<string>;
         hoverColor: PropTypes.Requireable<string>;

package/es/molecule/quick-filters/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAG7D,oBAAY,iBAAiB,GAAG;IAC9B,aAAa,EAAE;QACb,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,OAAO,CAAC;QACzB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,sBAAsB,EAAE,MAAM,CAAC;IAC/B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAG7D,oBAAY,iBAAiB,GAAG;IAC9B,aAAa,EAAE;QACb,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,OAAO,CAAC;QACzB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,sBAAsB,EAAE,MAAM,CAAC;IAC/B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAC"}

package/es/molecule/review-correction-popin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.js"],"names":[],"mappings":";AA6EA,gEAqDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.js"],"names":[],"mappings":";AA6EA,gEAsDC"}

package/es/molecule/review-correction-popin/index.js

@@ -93,14 +93,17 @@ const ReviewCorrectionPopin = props => {
     className: style.feedbackSection
   }, /*#__PURE__*/React.createElement("div", {
     className: style.information,
+    role: "group",
     "aria-label": "answer-information"
   }, /*#__PURE__*/React.createElement("div", {
     className: style.labelContainer
   }, /*#__PURE__*/React.createElement("span", {
     className: style.label,
+    role: "group",
     "aria-label": information.label
   }, information.label)), /*#__PURE__*/React.createElement("span", {
     className: style.message,
+    role: "group",
     "aria-label": information.message
     // eslint-disable-next-line react/no-danger
     ,

package/es/molecule/review-correction-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","classnames","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","ButtonLink","Provider","GetTranslateFromContext","Tooltip","style","propTypes","KlfButton","klf","legacyContext","translate","klfButtonProps","icon","position","type","AnchorButton","onKeyDown","createElement","className","klfButtonContainer","_extends","klfButton","useTitle","TooltipContent","tooltipText","dangerouslySetInnerHTML","__html","tooltip","toolTipProps","closeToolTipInformationTextAriaLabel","AnchorElement","tooltipClassName","toolTipCustomization","klfContainer","process","env","NODE_ENV","contextTypes","childContextTypes","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","wrong","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","role","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton"],"sources":["../../../src/molecule/review-correction-popin/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Tooltip from '../../atom/tooltip';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst KlfButton = ({klf}, legacyContext) => {\n  const translate = GetTranslateFromContext(legacyContext);\n  const klfButtonProps = useMemo(\n    () => ({\n      ...klf,\n      icon: {\n        position: 'left',\n        type: 'key'\n      },\n      type: 'primary'\n    }),\n    [klf]\n  );\n\n  const AnchorButton = useCallback(\n    ({onKeyDown}) => (\n      <div className={style.klfButtonContainer}>\n        <ButtonLink\n          {...klfButtonProps}\n          className={style.klfButton}\n          onKeyDown={onKeyDown}\n          useTitle={false}\n        />\n      </div>\n    ),\n    [klfButtonProps]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <span\n        className={style.tooltipText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: klf.tooltip}}\n      />\n    ),\n    [klf.tooltip]\n  );\n\n  const toolTipProps = useMemo(\n    () => ({\n      closeToolTipInformationTextAriaLabel: translate('close_tooltip_information'),\n      AnchorElement: AnchorButton,\n      TooltipContent,\n      'aria-label': translate('More details'),\n      tooltipClassName: style.toolTipCustomization\n    }),\n    [AnchorButton, TooltipContent, translate]\n  );\n\n  return (\n    <div className={style.klfContainer}>\n      <Tooltip {...toolTipProps} />\n    </div>\n  );\n};\n\nKlfButton.propTypes = {\n  klf: propTypes.klf\n};\n\nKlfButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst ReviewCorrectionPopin = props => {\n  const {information, resultLabel, type, klf, next} = props;\n\n  const nextQuestionButtonProps = {\n    ...next,\n    type: 'primary'\n  };\n\n  const cta = type === 'wrong' ? <KlfButton klf={klf} /> : null;\n\n  const ICONS = {\n    right: RightIcon,\n    wrong: WrongIcon\n  };\n  const Icon = ICONS[type];\n\n  return (\n    <div className={style.wrapper} data-testid=\"review-correction-popin\">\n      <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n        <div className={style.correctionSection}>\n          <div className={style.iconCircle}>\n            <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n          </div>\n          <div className={style.resultLabel}>\n            <span aria-label={resultLabel} role=\"status\">\n              {resultLabel}\n            </span>\n          </div>\n        </div>\n        <div className={style.feedbackSection}>\n          <div className={style.information} aria-label=\"answer-information\">\n            <div className={style.labelContainer}>\n              <span className={style.label} aria-label={information.label}>\n                {information.label}\n              </span>\n            </div>\n            <span\n              className={style.message}\n              aria-label={information.message}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: information.message}}\n            />\n          </div>\n        </div>\n        <div className={type === 'right' ? style.actions : style.actionsWrong}>\n          {cta}\n          <div className={style.nextQuestionContainer} data-testid=\"next-question-button-container\">\n            <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCorrectionPopin.propTypes = propTypes;\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","classnames","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","ButtonLink","Provider","GetTranslateFromContext","Tooltip","style","propTypes","KlfButton","klf","legacyContext","translate","klfButtonProps","icon","position","type","AnchorButton","onKeyDown","createElement","className","klfButtonContainer","_extends","klfButton","useTitle","TooltipContent","tooltipText","dangerouslySetInnerHTML","__html","tooltip","toolTipProps","closeToolTipInformationTextAriaLabel","AnchorElement","tooltipClassName","toolTipCustomization","klfContainer","process","env","NODE_ENV","contextTypes","childContextTypes","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","wrong","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","role","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton"],"sources":["../../../src/molecule/review-correction-popin/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Tooltip from '../../atom/tooltip';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst KlfButton = ({klf}, legacyContext) => {\n  const translate = GetTranslateFromContext(legacyContext);\n  const klfButtonProps = useMemo(\n    () => ({\n      ...klf,\n      icon: {\n        position: 'left',\n        type: 'key'\n      },\n      type: 'primary'\n    }),\n    [klf]\n  );\n\n  const AnchorButton = useCallback(\n    ({onKeyDown}) => (\n      <div className={style.klfButtonContainer}>\n        <ButtonLink\n          {...klfButtonProps}\n          className={style.klfButton}\n          onKeyDown={onKeyDown}\n          useTitle={false}\n        />\n      </div>\n    ),\n    [klfButtonProps]\n  );\n\n  const TooltipContent = useCallback(\n    () => (\n      <span\n        className={style.tooltipText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: klf.tooltip}}\n      />\n    ),\n    [klf.tooltip]\n  );\n\n  const toolTipProps = useMemo(\n    () => ({\n      closeToolTipInformationTextAriaLabel: translate('close_tooltip_information'),\n      AnchorElement: AnchorButton,\n      TooltipContent,\n      'aria-label': translate('More details'),\n      tooltipClassName: style.toolTipCustomization\n    }),\n    [AnchorButton, TooltipContent, translate]\n  );\n\n  return (\n    <div className={style.klfContainer}>\n      <Tooltip {...toolTipProps} />\n    </div>\n  );\n};\n\nKlfButton.propTypes = {\n  klf: propTypes.klf\n};\n\nKlfButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst ReviewCorrectionPopin = props => {\n  const {information, resultLabel, type, klf, next} = props;\n\n  const nextQuestionButtonProps = {\n    ...next,\n    type: 'primary'\n  };\n\n  const cta = type === 'wrong' ? <KlfButton klf={klf} /> : null;\n\n  const ICONS = {\n    right: RightIcon,\n    wrong: WrongIcon\n  };\n  const Icon = ICONS[type];\n\n  return (\n    <div className={style.wrapper} data-testid=\"review-correction-popin\">\n      <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n        <div className={style.correctionSection}>\n          <div className={style.iconCircle}>\n            <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n          </div>\n          <div className={style.resultLabel}>\n            <span aria-label={resultLabel} role=\"status\">\n              {resultLabel}\n            </span>\n          </div>\n        </div>\n        <div className={style.feedbackSection}>\n          <div className={style.information} role=\"group\" aria-label=\"answer-information\">\n            <div className={style.labelContainer}>\n              <span className={style.label} role=\"group\" aria-label={information.label}>\n                {information.label}\n              </span>\n            </div>\n            <span\n              className={style.message}\n              role=\"group\"\n              aria-label={information.message}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: information.message}}\n            />\n          </div>\n        </div>\n        <div className={type === 'right' ? style.actions : style.actionsWrong}>\n          {cta}\n          <div className={style.nextQuestionContainer} data-testid=\"next-question-button-container\">\n            <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCorrectionPopin.propTypes = propTypes;\n\nexport default ReviewCorrectionPopin;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,OAAO,QAAO,OAAO;AACjD,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,gCAAgC,IAAIC,SAAS,EAC7CC,oBAAoB,IAAIC,SAAS,QAC5B,0BAA0B;AACjC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,QAAQ,IAAGC,uBAAuB,QAAO,qBAAqB;AACrE,OAAOC,OAAO,MAAM,oBAAoB;AACxC,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,SAAS,MAAM,cAAc;AAEpC,MAAMC,SAAS,GAAGA,CAAC;EAACC;AAAG,CAAC,EAAEC,aAAa,KAAK;EAC1C,MAAMC,SAAS,GAAGP,uBAAuB,CAACM,aAAa,CAAC;EACxD,MAAME,cAAc,GAAGhB,OAAO,CAC5B,OAAO;IACL,GAAGa,GAAG;IACNI,IAAI,EAAE;MACJC,QAAQ,EAAE,MAAM;MAChBC,IAAI,EAAE;IACR,CAAC;IACDA,IAAI,EAAE;EACR,CAAC,CAAC,EACF,CAACN,GAAG,CACN,CAAC;EAED,MAAMO,YAAY,GAAGrB,WAAW,CAC9B,CAAC;IAACsB;EAAS,CAAC,kBACVvB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAACc;EAAmB,gBACvC1B,KAAA,CAAAwB,aAAA,CAAChB,UAAU,EAAAmB,QAAA,KACLT,cAAc;IAClBO,SAAS,EAAEb,KAAK,CAACgB,SAAU;IAC3BL,SAAS,EAAEA,SAAU;IACrBM,QAAQ,EAAE;EAAM,EACjB,CACE,CACN,EACD,CAACX,cAAc,CACjB,CAAC;EAED,MAAMY,cAAc,GAAG7B,WAAW,CAChC,mBACED,KAAA,CAAAwB,aAAA;IACEC,SAAS,EAAEb,KAAK,CAACmB;IACjB;IAAA;IACAC,uBAAuB,EAAE;MAACC,MAAM,EAAElB,GAAG,CAACmB;IAAO;EAAE,CAChD,CACF,EACD,CAACnB,GAAG,CAACmB,OAAO,CACd,CAAC;EAED,MAAMC,YAAY,GAAGjC,OAAO,CAC1B,OAAO;IACLkC,oCAAoC,EAAEnB,SAAS,CAAC,2BAA2B,CAAC;IAC5EoB,aAAa,EAAEf,YAAY;IAC3BQ,cAAc;IACd,YAAY,EAAEb,SAAS,CAAC,cAAc,CAAC;IACvCqB,gBAAgB,EAAE1B,KAAK,CAAC2B;EAC1B,CAAC,CAAC,EACF,CAACjB,YAAY,EAAEQ,cAAc,EAAEb,SAAS,CAC1C,CAAC;EAED,oBACEjB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAAC4B;EAAa,gBACjCxC,KAAA,CAAAwB,aAAA,CAACb,OAAO,EAAKwB,YAAe,CACzB,CAAC;AAEV,CAAC;AAEDrB,SAAS,CAACD,SAAS,GAAA4B,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACpB5B,GAAG,EAAEF,SAAS,CAACE;AACjB,CAAC;AAEDD,SAAS,CAAC8B,YAAY,GAAG;EACvB3B,SAAS,EAAER,QAAQ,CAACoC,iBAAiB,CAAC5B;AACxC,CAAC;AAED,MAAM6B,qBAAqB,GAAGC,KAAK,IAAI;EACrC,MAAM;IAACC,WAAW;IAAEC,WAAW;IAAE5B,IAAI;IAAEN,GAAG;IAAEmC;EAAI,CAAC,GAAGH,KAAK;EAEzD,MAAMI,uBAAuB,GAAG;IAC9B,GAAGD,IAAI;IACP7B,IAAI,EAAE;EACR,CAAC;EAED,MAAM+B,GAAG,GAAG/B,IAAI,KAAK,OAAO,gBAAGrB,KAAA,CAAAwB,aAAA,CAACV,SAAS;IAACC,GAAG,EAAEA;EAAI,CAAE,CAAC,GAAG,IAAI;EAE7D,MAAMsC,KAAK,GAAG;IACZC,KAAK,EAAEjD,SAAS;IAChBkD,KAAK,EAAEhD;EACT,CAAC;EACD,MAAMiD,IAAI,GAAGH,KAAK,CAAChC,IAAI,CAAC;EAExB,oBACErB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAAC6C,OAAQ;IAAC,eAAY;EAAyB,gBAClEzD,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEtB,UAAU,CAACS,KAAK,CAAC8C,KAAK,EAAErC,IAAI,KAAK,OAAO,GAAGT,KAAK,CAAC0C,KAAK,GAAG1C,KAAK,CAAC2C,KAAK;EAAE,gBACpFvD,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAAC+C;EAAkB,gBACtC3D,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAACgD;EAAW,gBAC/B5D,KAAA,CAAAwB,aAAA,CAACgC,IAAI;IAAC/B,SAAS,EAAEJ,IAAI,KAAK,OAAO,GAAGT,KAAK,CAACiD,SAAS,GAAGjD,KAAK,CAACkD;EAAU,CAAE,CACrE,CAAC,eACN9D,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAACqC;EAAY,gBAChCjD,KAAA,CAAAwB,aAAA;IAAM,cAAYyB,WAAY;IAACc,IAAI,EAAC;EAAQ,GACzCd,WACG,CACH,CACF,CAAC,eACNjD,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAACoD;EAAgB,gBACpChE,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAACoC,WAAY;IAACe,IAAI,EAAC,OAAO;IAAC,cAAW;EAAoB,gBAC7E/D,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAACqD;EAAe,gBACnCjE,KAAA,CAAAwB,aAAA;IAAMC,SAAS,EAAEb,KAAK,CAACsD,KAAM;IAACH,IAAI,EAAC,OAAO;IAAC,cAAYf,WAAW,CAACkB;EAAM,GACtElB,WAAW,CAACkB,KACT,CACH,CAAC,eACNlE,KAAA,CAAAwB,aAAA;IACEC,SAAS,EAAEb,KAAK,CAACuD,OAAQ;IACzBJ,IAAI,EAAC,OAAO;IACZ,cAAYf,WAAW,CAACmB;IACxB;IAAA;IACAnC,uBAAuB,EAAE;MAACC,MAAM,EAAEe,WAAW,CAACmB;IAAO;EAAE,CACxD,CACE,CACF,CAAC,eACNnE,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEJ,IAAI,KAAK,OAAO,GAAGT,KAAK,CAACwD,OAAO,GAAGxD,KAAK,CAACyD;EAAa,GACnEjB,GAAG,eACJpD,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAEb,KAAK,CAAC0D,qBAAsB;IAAC,eAAY;EAAgC,gBACvFtE,KAAA,CAAAwB,aAAA,CAAChB,UAAU,EAAAmB,QAAA,KAAKwB,uBAAuB;IAAE1B,SAAS,EAAEb,KAAK,CAAC2D;EAAmB,EAAE,CAC5E,CACF,CACF,CACF,CAAC;AAEV,CAAC;AAEDzB,qBAAqB,CAACjC,SAAS,GAAA4B,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG9B,SAAS;AAE3C,eAAeiC,qBAAqB","ignoreList":[]}

package/es/molecule/search-form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/search-form/index.js"],"names":[],"mappings":";AAOA,mEAoEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/search-form/index.js"],"names":[],"mappings":";AAOA,mEA8EC"}

package/es/molecule/search-form/index.js

@@ -30,6 +30,10 @@ const SearchForm = (props, context) => {
     evt.stopPropagation();
     return onReset && onReset(evt);
   }, [onReset]);
+  const handleResetKeyDown = useMemo(() => evt => {
+    if (evt.key !== 'Enter' && evt.key !== ' ') return;
+    return handleReset(evt);
+  }, [handleReset]);
   const isMooc = theme === 'mooc';
   const clearClassName = search.value ? classnames(style.wrapperClear, isMooc && style.wrapperClearMooc) : style.wrapperNoClear;
   return /*#__PURE__*/React.createElement("form", {
@@ -49,8 +53,11 @@ const SearchForm = (props, context) => {
     searchIconAriaLabel: searchIconAriaLabel
   })), /*#__PURE__*/React.createElement("div", {
     "data-name": "search-form-reset",
+    role: "button",
+    tabIndex: 0,
     "aria-label": searchResetAriaLabel,
     onMouseDown: handleReset,
+    onKeyDown: handleResetKeyDown,
     className: clearClassName
   }, /*#__PURE__*/React.createElement(Icon, {
     iconName: "xmark",

package/es/molecule/search-form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","Search","Icon","style","SearchForm","props","context","action","method","onSubmit","onReset","search","onSearchFocus","onSearchBlur","onSearchKeyDown","inputRef","searchResetAriaLabel","dataTestId","theme","searchIconAriaLabel","handleSubmit","evt","preventDefault","handleReset","stopPropagation","isMooc","clearClassName","value","wrapperClear","wrapperClearMooc","wrapperNoClear","createElement","className","form","placeholder","_extends","onFocus","onBlur","onKeyDown","onMouseDown","iconName","clearIcon","propTypes","process","env","NODE_ENV","string","func","shape"],"sources":["../../../src/molecule/search-form/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Search from '../../atom/input-search';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst SearchForm = (props, context) => {\n  const {\n    action,\n    method,\n    onSubmit,\n    onReset,\n    search,\n    onSearchFocus,\n    onSearchBlur,\n    onSearchKeyDown,\n    inputRef,\n    'search-reset-aria-label': searchResetAriaLabel,\n    dataTestId,\n    theme,\n    searchIconAriaLabel\n  } = props;\n  const handleSubmit = useMemo(\n    () => evt => {\n      evt.preventDefault();\n      return onSubmit && onSubmit(evt);\n    },\n    [onSubmit]\n  );\n\n  const handleReset = useMemo(\n    () => evt => {\n      evt.preventDefault();\n      evt.stopPropagation();\n      return onReset && onReset(evt);\n    },\n    [onReset]\n  );\n\n  const isMooc = theme === 'mooc';\n\n  const clearClassName = search.value\n    ? classnames(style.wrapperClear, isMooc && style.wrapperClearMooc)\n    : style.wrapperNoClear;\n\n  return (\n    <form\n      className={style.form}\n      action={action}\n      method={method}\n      onSubmit={handleSubmit}\n      data-name=\"searchForm\"\n      aria-label={search.placeholder}\n    >\n      <Search\n        {...search}\n        onFocus={onSearchFocus}\n        onBlur={onSearchBlur}\n        onKeyDown={onSearchKeyDown}\n        inputRef={inputRef}\n        dataTestId={dataTestId}\n        theme={theme}\n        searchIconAriaLabel={searchIconAriaLabel}\n      />\n      <div\n        data-name=\"search-form-reset\"\n        aria-label={searchResetAriaLabel}\n        onMouseDown={handleReset}\n        className={clearClassName}\n      >\n        <Icon iconName=\"xmark\" className={style.clearIcon} aria-label={searchResetAriaLabel} />\n      </div>\n    </form>\n  );\n};\n\nSearchForm.propTypes = {\n  action: PropTypes.string,\n  method: PropTypes.string,\n  onSubmit: PropTypes.func,\n  onReset: PropTypes.func,\n  onSearchFocus: PropTypes.func,\n  onSearchBlur: PropTypes.func,\n  onSearchKeyDown: PropTypes.func,\n  inputRef: PropTypes.func,\n  search: PropTypes.shape(Search.propTypes),\n  'search-reset-aria-label': PropTypes.string,\n  dataTestId: PropTypes.string,\n  theme: PropTypes.string,\n  searchIconAriaLabel: PropTypes.string\n};\n\nexport default SearchForm;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","Search","Icon","style","SearchForm","props","context","action","method","onSubmit","onReset","search","onSearchFocus","onSearchBlur","onSearchKeyDown","inputRef","searchResetAriaLabel","dataTestId","theme","searchIconAriaLabel","handleSubmit","evt","preventDefault","handleReset","stopPropagation","handleResetKeyDown","key","isMooc","clearClassName","value","wrapperClear","wrapperClearMooc","wrapperNoClear","createElement","className","form","placeholder","_extends","onFocus","onBlur","onKeyDown","role","tabIndex","onMouseDown","iconName","clearIcon","propTypes","process","env","NODE_ENV","string","func","shape"],"sources":["../../../src/molecule/search-form/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Search from '../../atom/input-search';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst SearchForm = (props, context) => {\n  const {\n    action,\n    method,\n    onSubmit,\n    onReset,\n    search,\n    onSearchFocus,\n    onSearchBlur,\n    onSearchKeyDown,\n    inputRef,\n    'search-reset-aria-label': searchResetAriaLabel,\n    dataTestId,\n    theme,\n    searchIconAriaLabel\n  } = props;\n  const handleSubmit = useMemo(\n    () => evt => {\n      evt.preventDefault();\n      return onSubmit && onSubmit(evt);\n    },\n    [onSubmit]\n  );\n\n  const handleReset = useMemo(\n    () => evt => {\n      evt.preventDefault();\n      evt.stopPropagation();\n      return onReset && onReset(evt);\n    },\n    [onReset]\n  );\n  const handleResetKeyDown = useMemo(\n    () => evt => {\n      if (evt.key !== 'Enter' && evt.key !== ' ') return;\n      return handleReset(evt);\n    },\n    [handleReset]\n  );\n\n  const isMooc = theme === 'mooc';\n\n  const clearClassName = search.value\n    ? classnames(style.wrapperClear, isMooc && style.wrapperClearMooc)\n    : style.wrapperNoClear;\n\n  return (\n    <form\n      className={style.form}\n      action={action}\n      method={method}\n      onSubmit={handleSubmit}\n      data-name=\"searchForm\"\n      aria-label={search.placeholder}\n    >\n      <Search\n        {...search}\n        onFocus={onSearchFocus}\n        onBlur={onSearchBlur}\n        onKeyDown={onSearchKeyDown}\n        inputRef={inputRef}\n        dataTestId={dataTestId}\n        theme={theme}\n        searchIconAriaLabel={searchIconAriaLabel}\n      />\n      <div\n        data-name=\"search-form-reset\"\n        role=\"button\"\n        tabIndex={0}\n        aria-label={searchResetAriaLabel}\n        onMouseDown={handleReset}\n        onKeyDown={handleResetKeyDown}\n        className={clearClassName}\n      >\n        <Icon iconName=\"xmark\" className={style.clearIcon} aria-label={searchResetAriaLabel} />\n      </div>\n    </form>\n  );\n};\n\nSearchForm.propTypes = {\n  action: PropTypes.string,\n  method: PropTypes.string,\n  onSubmit: PropTypes.func,\n  onReset: PropTypes.func,\n  onSearchFocus: PropTypes.func,\n  onSearchBlur: PropTypes.func,\n  onSearchKeyDown: PropTypes.func,\n  inputRef: PropTypes.func,\n  search: PropTypes.shape(Search.propTypes),\n  'search-reset-aria-label': PropTypes.string,\n  dataTestId: PropTypes.string,\n  theme: PropTypes.string,\n  searchIconAriaLabel: PropTypes.string\n};\n\nexport default SearchForm;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/skill-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-card/index.js"],"names":[],"mappings":";AAwBA,kEAkEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-card/index.js"],"names":[],"mappings":";AAwBA,kEAyEC"}