@coorpacademy/components 11.32.1-alpha.21 → 11.32.1-alpha.25

package/es/atom/input-search/style.css

@@ -33,6 +33,7 @@
 }
 
 .search {
+  background-color: unset;
   font-family: "Gilroy";
   text-transform: none;
   margin: 0 3px;

package/es/molecule/learner-skill-card/index.js

@@ -46,7 +46,7 @@ const LearnerSkillCard = (props, context) => {
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
     },
     disabled: !review,
-    onClick: () => onReviewClick(skillTitle),
+    onClick: onReviewClick,
     'aria-label': `${skillTitle}, ${reviewLocale}`,
     label: reviewLocale,
     'data-name': 'learner-skill-card-review-button'
@@ -57,7 +57,7 @@ const LearnerSkillCard = (props, context) => {
       color: hovered ? '#FFFFFF' : primarySkinColor,
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
     },
-    onClick: () => onExploreClick(skillTitle),
+    onClick: onExploreClick,
     'aria-label': `${skillTitle}, ${exploreLocale}`,
     label: exploreLocale,
     'data-name': 'learner-skill-card-explore-button',

package/es/molecule/learner-skill-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","color","icon","position","faIcon","name","size","completedPercentage","Number","parseInt","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {skillCourses, skillQuestions, completedCourses = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const coursesCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    disabled: !review,\n    onClick: () => onReviewClick(skillTitle),\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick: () => onExploreClick(skillTitle),\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const completedPercentage =\n    skillCourses && Number.parseInt((completedCourses / skillCourses) * 100);\n\n  const ProgressBar = useCallback(() => {\n    if (!skillCourses) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${completedPercentage}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [completedPercentage, ariaLabel, skillCourses]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {skillCourses || skillQuestions ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {skillCourses ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {skillQuestions ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{skillQuestions}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\n          <div className={style.skillFocusBadge}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{\n                faSize: 10,\n                wrapperSize: 16\n              }}\n            />\n            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {skillCourses && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{completedCourses}</span>\n              {coursesCompletedLocale}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{completedPercentage}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    skillCourses: PropTypes.number,\n    skillQuestions: PropTypes.number,\n    completedCourses: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","color","icon","position","faIcon","name","size","completedPercentage","Number","parseInt","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {skillCourses, skillQuestions, completedCourses = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const coursesCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const completedPercentage =\n    skillCourses && Number.parseInt((completedCourses / skillCourses) * 100);\n\n  const ProgressBar = useCallback(() => {\n    if (!skillCourses) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${completedPercentage}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [completedPercentage, ariaLabel, skillCourses]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {skillCourses || skillQuestions ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {skillCourses ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {skillQuestions ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{skillQuestions}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\n          <div className={style.skillFocusBadge}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{\n                faSize: 10,\n                wrapperSize: 16\n              }}\n            />\n            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {skillCourses && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{completedCourses}</span>\n              {coursesCompletedLocale}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{completedPercentage}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    skillCourses: PropTypes.number,\n    skillQuestions: PropTypes.number,\n    completedCourses: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}

package/es/molecule/learning-profile-radar-chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAwPjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0FASnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAqHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAkQjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0FASnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAqHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}

package/es/molecule/learning-profile-radar-chart/index.js

@@ -162,6 +162,10 @@ const CustomDot = ({
   stroke,
   cx,
   cy,
+  onTouchStart: () => {
+    if (!payload?.name) return;
+    onDotClick(payload.name);
+  },
   onClick: e => {
     e.stopPropagation();
     if (!payload?.name) return;
@@ -323,7 +327,7 @@ export const LearningProfileRadarChart = ({
     return () => {
       window.removeEventListener('click', handleClick);
     };
-  }, [activeDot]);
+  }, [activeDot, onClick, setActiveDot]);
 
   function handleOnDotClick(label) {
     const payload = formatedData.find(({

package/es/molecule/learning-profile-radar-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Fragment","useCallback","useEffect","useMemo","useState","Radar","RadarChart","PolarGrid","PolarAngleAxis","ResponsiveContainer","Tooltip","PolarRadiusAxis","classnames","isMobile","getIsMobile","style","learningProfileRadarChartPropTypes","top","offset","x","y","alignment","margin","bottom","right","marginRight","left","marginLeft","BLACK","WHITE","DEFAULT_MAIN_COLOR","DEFAULT_COLORS","gradient","fill","stroke","percentage","color","background","label","CHART_CONFIGS","triangle","name","ticks","sideCount","quadrilateral","pentagon","hexagon","DOT_DEFAULT_PROPS","strokeWidth","strokeOpacity","r","pointerEvents","cursor","DOT_ACTIVE_PROPS","RADAR_DEFAULT_PROPS","fillOpacity","Gradient","type","colors","firstColor","secondColor","CustomTooltip","active","payload","length","tooltip","tooltipLabel","tooltipValue","value","CustomDot","cx","cy","onDotClick","activeDot","dataName","subject","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","tickeForeignObject","tickWrapper","tickWrapperFocus","alignItems","textAlign","opacity","map","colorLabel","i","tickValue","tickLabel","CHART_CONFIGS_BY_SIDE_COUNT","formatValues","values_","val","formatData","legend","data_","ref","LearningProfileRadarChart","data","colorsProps","width","height","setIsMobile","setActiveDot","Object","assign","gradients","userAgent","navigator","isMobile_","setIsMobile_","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes"],"sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"sourcesContent":["import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';\nimport {\n  Radar,\n  RadarChart,\n  PolarGrid,\n  PolarAngleAxis,\n  ResponsiveContainer,\n  Tooltip,\n  PolarRadiusAxis\n} from 'recharts';\nimport {\n  pipe,\n  keyBy,\n  mapValues,\n  size,\n  getOr,\n  map,\n  toPairs,\n  values,\n  isEmpty,\n  omit,\n  fromPairs,\n  times,\n  flatten,\n  findKey\n} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {isMobile as getIsMobile} from '../../util/check-is-mobile';\nimport style from './style.css';\nimport {\n  ActiveDotType,\n  FormatedColorsType,\n  FormatedDataType,\n  LearningProfileRadarChartPropTypes,\n  TickType,\n  learningProfileRadarChartPropTypes\n} from './types';\n\ntype CHART_TYPE_TYPE = keyof typeof CHART_CONFIGS;\n\n/* TICK_POSITIONS */\nconst top: TickType = {offset: {x: -100, y: -75}, alignment: 'center', margin: 'auto'};\nconst bottom: TickType = {offset: {x: -100, y: 10}, alignment: 'center', margin: 'auto'};\nconst right: TickType = {offset: {x: 30, y: -10}, alignment: 'start', marginRight: 'auto'};\nconst left: TickType = {offset: {x: -230, y: -10}, alignment: 'end', marginLeft: 'auto'};\n\n/* CONSTANTS */\nconst BLACK = '#000000ff';\nconst WHITE = '#ffffffff';\nconst DEFAULT_MAIN_COLOR = '#0062ffff';\n\nconst DEFAULT_COLORS: FormatedColorsType = {\n  gradient: {\n    fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],\n    stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]\n  },\n  percentage: {\n    color: BLACK,\n    background: WHITE\n  },\n  label: {\n    color: BLACK\n  }\n};\n\nconst CHART_CONFIGS = {\n  triangle: {\n    name: 'triangle',\n    ticks: [top, right, left],\n    sideCount: 3\n  },\n  quadrilateral: {\n    name: 'quadrilateral',\n    ticks: [top, right, bottom, left],\n    sideCount: 4\n  },\n  pentagon: {\n    name: 'pentagon',\n    ticks: [top, right, right, left, left],\n    sideCount: 5\n  },\n  hexagon: {\n    name: 'hexagon',\n    ticks: [top, right, right, bottom, left, left],\n    sideCount: 6\n  }\n} as const;\n\nconst DOT_DEFAULT_PROPS = {\n  strokeWidth: 2,\n  strokeOpacity: 0.4,\n  fill: '#fff',\n  r: 4,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 6,\n  strokeWidth: 4,\n  strokeOpacity: 0.6\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 3,\n  strokeOpacity: 0.2,\n  fillOpacity: 0.2\n} as const;\n\n/* COMPONENTS */\nconst Gradient = ({type, colors: [firstColor, secondColor]}: {type: string; colors: string[]}) => (\n  <defs>\n    <linearGradient id={`gradient-${type}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n      <stop offset=\"0%\" stopColor={firstColor} />\n      <stop offset=\"100%\" stopColor={secondColor} />\n    </linearGradient>\n  </defs>\n);\n\nconst CustomTooltip = ({\n  active,\n  payload,\n  label\n}: {\n  active?: boolean;\n  payload?: {value: number}[];\n  label?: string;\n}) =>\n  active && !!payload?.length ? (\n    <div className={style.tooltip}>\n      <span className={style.tooltipLabel}>{label}</span>\n      <span className={style.tooltipValue}>{payload[0].value}%</span>\n    </div>\n  ) : null;\n\nconst CustomDot = ({\n  cx,\n  cy,\n  payload,\n  onDotClick,\n  stroke,\n  activeDot,\n  dataName\n}: {\n  cx?: number;\n  cy?: number;\n  payload?: {payload: {subject: string} & {[datakey: string]: number}; name: string};\n  onDotClick: (name: string) => void;\n  dataKey: string;\n  stroke: string;\n  activeDot?: ActiveDotType;\n  dataName: string;\n}) => (\n  <circle\n    {...{\n      ...DOT_DEFAULT_PROPS,\n      ...(payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS),\n      stroke,\n      cx,\n      cy,\n      onClick: e => {\n        e.stopPropagation();\n\n        if (!payload?.name) return;\n        onDotClick(payload.name);\n      },\n      'data-name': dataName\n    }}\n  />\n);\n\nconst buildRadars = (\n  totalDataset: number,\n  handleOnDotClick: (name: string) => void,\n  activeDot?: ActiveDotType\n) =>\n  times(index => {\n    const datakey = `value${index + 1}`;\n    const dataset = `dataset-${index + 1}`;\n\n    return (\n      <Radar\n        {...RADAR_DEFAULT_PROPS}\n        fill={`url(#gradient-fill-${index})`}\n        stroke={`url(#gradient-stroke-${index})`}\n        key={dataset}\n        name={dataset}\n        dataKey={datakey}\n        activeDot={{\n          ...DOT_ACTIVE_PROPS,\n          stroke: `url(#gradient-stroke-${index})`\n        }}\n        // only on mobile\n        // to handle dot style on hover (convert to click)\n        // use with the tooltip component\n        dot={\n          <CustomDot\n            onDotClick={handleOnDotClick}\n            activeDot={activeDot}\n            dataKey={datakey}\n            stroke={`url(#gradient-stroke-${index})`}\n            dataName={`dot-${dataset}`}\n          />\n        }\n      />\n    );\n  }, totalDataset);\n\nconst buildCustomLabel = ({\n  index,\n  x,\n  y,\n  percentagesValues,\n  label,\n  activeDot,\n  chartType,\n  formatedColors,\n  onClick\n}: {\n  index: number;\n  x: number;\n  y: number;\n  percentagesValues: number[];\n  label: string;\n  chartType: CHART_TYPE_TYPE;\n  formatedColors: FormatedColorsType[];\n  activeDot?: ActiveDotType;\n  onClick: (name: string) => void;\n}) => {\n  const isCurrentDotActive = activeDot?.label === label;\n  const {\n    offset: {x: offsetX, y: offsetY},\n    alignment,\n    ...rest\n  } = CHART_CONFIGS[chartType].ticks[index];\n\n  function onLabelClick(e: React.MouseEvent) {\n    e.stopPropagation();\n    onClick(label);\n  }\n\n  return (\n    <g>\n      <foreignObject className={style.tickeForeignObject} x={x + offsetX} y={y + offsetY} width=\"200\" height=\"65\">\n        <div\n          data-name={label}\n          onClick={onLabelClick}\n          className={classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus)}\n          style={{\n            ...rest,\n            alignItems: alignment,\n            textAlign: alignment,\n            opacity: !isEmpty(activeDot) && !isCurrentDotActive ? 0.3 : 1\n          }}\n        >\n          {formatedColors.map(\n            ({percentage: {color, background}, label: {color: colorLabel}}, i) => (\n              <Fragment key={i}>\n                <span className={style.tickValue} style={{color, background}}>\n                  {percentagesValues[i]}\n                </span>\n                <span className={style.tickLabel} style={{color: colorLabel}}>\n                  {label}\n                </span>\n              </Fragment>\n            )\n          )}\n        </div>\n      </foreignObject>\n    </g>\n  );\n};\n\n/* UTILS */\nconst CHART_CONFIGS_BY_SIDE_COUNT = pipe(keyBy('sideCount'), mapValues('name'))(CHART_CONFIGS);\n\nconst formatValues: (values_: number | number[]) => Record<string, number> = pipe(\n  values_ => flatten([values_]),\n  values_ => values_.map((val: number, i: number): [string, number] => [`value${i + 1}`, val]),\n  fromPairs\n);\n\n/* this convert incoming component data to rechart data structure */\nexport const formatData: (\n  legend: {[ref: string]: string},\n  data_: LearningProfileRadarChartPropTypes['data']\n) => FormatedDataType[] = (legend, data_) =>\n  pipe(\n    toPairs,\n    map(([ref, values_]: [string, number | number[]]) => ({\n      ...formatValues(values_),\n      subject: legend[ref]\n    }))\n  )(data_);\n\nexport const LearningProfileRadarChart = ({\n  data,\n  legend,\n  totalDataset,\n  colors: colorsProps,\n  onClick,\n  width,\n  height,\n  margin\n}: LearningProfileRadarChartPropTypes) => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [activeDot, setActiveDot] = useState<ActiveDotType>();\n\n  const formatedColors = times(i => {\n    if (!colorsProps?.length) return DEFAULT_COLORS;\n\n    const colors = colorsProps[i];\n    return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;\n  })(totalDataset);\n\n  const chartType: CHART_TYPE_TYPE = useMemo(\n    () => getOr('hexagon', size(data), CHART_CONFIGS_BY_SIDE_COUNT),\n    [data]\n  );\n\n  const gradients = useMemo(\n    () =>\n      formatedColors.map(({gradient: {fill, stroke}}, index) => (\n        <svg key={`gradient-${index}`}>\n          <Gradient type={`fill-${index}`} colors={fill} />\n          <Gradient type={`stroke-${index}`} colors={stroke} />\n        </svg>\n      )),\n    [formatedColors]\n  );\n\n  const userAgent = navigator?.userAgent;\n  const isMobile_ = useMemo(() => getIsMobile(userAgent), [userAgent]);\n\n  const setIsMobile_ = useCallback(() => {\n    setIsMobile(isMobile_);\n  }, [isMobile_]);\n\n  useEffect(() => setIsMobile_(), [setIsMobile_]);\n\n  useEffect(() => {\n    const handleClick = () => {\n      setActiveDot(undefined);\n      onClick(undefined);\n    };\n\n    !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n    return () => {\n      window.removeEventListener('click', handleClick);\n    };\n  }, [activeDot]);\n\n  function handleOnDotClick(label: string) {\n    const payload = formatedData.find(({subject}) => subject === label);\n    if (!payload) return;\n\n    const index = formatedData.indexOf(payload);\n    const datakey = `value${index + 1}`;\n    const skillRef = findKey(val => val === payload?.subject, legend);\n\n    if (skillRef) {\n      setActiveDot({\n        key: datakey,\n        value: payload[datakey],\n        label: payload.subject\n      });\n      onClick(skillRef);\n    }\n  }\n\n  function renderCustomLabel({\n    x,\n    y,\n    payload: {value: label},\n    index\n  }: {\n    x: number;\n    y: number;\n    payload: {value: string};\n    index: number;\n  }) {\n    const currentData = formatedData.find(({subject}) => subject === label);\n    const percentagesValues: number[] = pipe(\n      omit('subject'),\n      mapValues(value => `${value}%`),\n      values\n    )(currentData);\n\n    return buildCustomLabel({\n      index,\n      x,\n      y,\n      percentagesValues,\n      label,\n      activeDot,\n      chartType,\n      formatedColors,\n      onClick: handleOnDotClick\n    });\n  }\n  const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n  return (\n    <RadarChart\n      width={width}\n      height={height}\n      margin={margin ?? (isMobile ? {top: 80} : {top: 180})}\n      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={10} strokeWidth={2} radialLines={false} />\n      <PolarAngleAxis dataKey=\"subject\" tick={!isMobile && renderCustomLabel} />\n      <PolarRadiusAxis tick={false} axisLine={false} domain={[0, 100]} />\n      {isMobile ? <Tooltip cursor={false} content={<CustomTooltip />} /> : null}\n    </RadarChart>\n  );\n};\n\nconst ResponsiveLearningProfileRadarChart = (props: LearningProfileRadarChartPropTypes) => (\n  <ResponsiveContainer width=\"100%\" height=\"100%\">\n    <LearningProfileRadarChart {...props} />\n  </ResponsiveContainer>\n);\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","Fragment","useCallback","useEffect","useMemo","useState","Radar","RadarChart","PolarGrid","PolarAngleAxis","ResponsiveContainer","Tooltip","PolarRadiusAxis","classnames","isMobile","getIsMobile","style","learningProfileRadarChartPropTypes","top","offset","x","y","alignment","margin","bottom","right","marginRight","left","marginLeft","BLACK","WHITE","DEFAULT_MAIN_COLOR","DEFAULT_COLORS","gradient","fill","stroke","percentage","color","background","label","CHART_CONFIGS","triangle","name","ticks","sideCount","quadrilateral","pentagon","hexagon","DOT_DEFAULT_PROPS","strokeWidth","strokeOpacity","r","pointerEvents","cursor","DOT_ACTIVE_PROPS","RADAR_DEFAULT_PROPS","fillOpacity","Gradient","type","colors","firstColor","secondColor","CustomTooltip","active","payload","length","tooltip","tooltipLabel","tooltipValue","value","CustomDot","cx","cy","onDotClick","activeDot","dataName","subject","onTouchStart","onClick","e","stopPropagation","buildRadars","totalDataset","handleOnDotClick","index","datakey","dataset","buildCustomLabel","percentagesValues","chartType","formatedColors","isCurrentDotActive","offsetX","offsetY","rest","onLabelClick","tickeForeignObject","tickWrapper","tickWrapperFocus","alignItems","textAlign","opacity","map","colorLabel","i","tickValue","tickLabel","CHART_CONFIGS_BY_SIDE_COUNT","formatValues","values_","val","formatData","legend","data_","ref","LearningProfileRadarChart","data","colorsProps","width","height","setIsMobile","setActiveDot","Object","assign","gradients","userAgent","navigator","isMobile_","setIsMobile_","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes"],"sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"sourcesContent":["import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';\nimport {\n  Radar,\n  RadarChart,\n  PolarGrid,\n  PolarAngleAxis,\n  ResponsiveContainer,\n  Tooltip,\n  PolarRadiusAxis\n} from 'recharts';\nimport {\n  pipe,\n  keyBy,\n  mapValues,\n  size,\n  getOr,\n  map,\n  toPairs,\n  values,\n  isEmpty,\n  omit,\n  fromPairs,\n  times,\n  flatten,\n  findKey\n} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {isMobile as getIsMobile} from '../../util/check-is-mobile';\nimport style from './style.css';\nimport {\n  ActiveDotType,\n  FormatedColorsType,\n  FormatedDataType,\n  LearningProfileRadarChartPropTypes,\n  TickType,\n  learningProfileRadarChartPropTypes\n} from './types';\n\ntype CHART_TYPE_TYPE = keyof typeof CHART_CONFIGS;\n\n/* TICK_POSITIONS */\nconst top: TickType = {offset: {x: -100, y: -75}, alignment: 'center', margin: 'auto'};\nconst bottom: TickType = {offset: {x: -100, y: 10}, alignment: 'center', margin: 'auto'};\nconst right: TickType = {offset: {x: 30, y: -10}, alignment: 'start', marginRight: 'auto'};\nconst left: TickType = {offset: {x: -230, y: -10}, alignment: 'end', marginLeft: 'auto'};\n\n/* CONSTANTS */\nconst BLACK = '#000000ff';\nconst WHITE = '#ffffffff';\nconst DEFAULT_MAIN_COLOR = '#0062ffff';\n\nconst DEFAULT_COLORS: FormatedColorsType = {\n  gradient: {\n    fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],\n    stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]\n  },\n  percentage: {\n    color: BLACK,\n    background: WHITE\n  },\n  label: {\n    color: BLACK\n  }\n};\n\nconst CHART_CONFIGS = {\n  triangle: {\n    name: 'triangle',\n    ticks: [top, right, left],\n    sideCount: 3\n  },\n  quadrilateral: {\n    name: 'quadrilateral',\n    ticks: [top, right, bottom, left],\n    sideCount: 4\n  },\n  pentagon: {\n    name: 'pentagon',\n    ticks: [top, right, right, left, left],\n    sideCount: 5\n  },\n  hexagon: {\n    name: 'hexagon',\n    ticks: [top, right, right, bottom, left, left],\n    sideCount: 6\n  }\n} as const;\n\nconst DOT_DEFAULT_PROPS = {\n  strokeWidth: 2,\n  strokeOpacity: 0.4,\n  fill: '#fff',\n  r: 4,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 6,\n  strokeWidth: 4,\n  strokeOpacity: 0.6\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 3,\n  strokeOpacity: 0.2,\n  fillOpacity: 0.2\n} as const;\n\n/* COMPONENTS */\nconst Gradient = ({type, colors: [firstColor, secondColor]}: {type: string; colors: string[]}) => (\n  <defs>\n    <linearGradient id={`gradient-${type}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n      <stop offset=\"0%\" stopColor={firstColor} />\n      <stop offset=\"100%\" stopColor={secondColor} />\n    </linearGradient>\n  </defs>\n);\n\nconst CustomTooltip = ({\n  active,\n  payload,\n  label\n}: {\n  active?: boolean;\n  payload?: {value: number}[];\n  label?: string;\n}) =>\n  active && !!payload?.length ? (\n    <div className={style.tooltip}>\n      <span className={style.tooltipLabel}>{label}</span>\n      <span className={style.tooltipValue}>{payload[0].value}%</span>\n    </div>\n  ) : null;\n\nconst CustomDot = ({\n  cx,\n  cy,\n  payload,\n  onDotClick,\n  stroke,\n  activeDot,\n  dataName\n}: {\n  cx?: number;\n  cy?: number;\n  payload?: {payload: {subject: string} & {[datakey: string]: number}; name: string};\n  onDotClick: (name: string) => void;\n  dataKey: string;\n  stroke: string;\n  activeDot?: ActiveDotType;\n  dataName: string;\n}) => (\n  <circle\n    {...{\n      ...DOT_DEFAULT_PROPS,\n      ...(payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS),\n      stroke,\n      cx,\n      cy,\n      onTouchStart: () => {\n        if (!payload?.name) return;\n        onDotClick(payload.name);\n      },\n      onClick: e => {\n        e.stopPropagation();\n\n        if (!payload?.name) return;\n        onDotClick(payload.name);\n      },\n      'data-name': dataName\n    }}\n  />\n);\n\nconst buildRadars = (\n  totalDataset: number,\n  handleOnDotClick: (name: string) => void,\n  activeDot?: ActiveDotType\n) =>\n  times(index => {\n    const datakey = `value${index + 1}`;\n    const dataset = `dataset-${index + 1}`;\n\n    return (\n      <Radar\n        {...RADAR_DEFAULT_PROPS}\n        fill={`url(#gradient-fill-${index})`}\n        stroke={`url(#gradient-stroke-${index})`}\n        key={dataset}\n        name={dataset}\n        dataKey={datakey}\n        activeDot={{\n          ...DOT_ACTIVE_PROPS,\n          stroke: `url(#gradient-stroke-${index})`\n        }}\n        // only on mobile\n        // to handle dot style on hover (convert to click)\n        // use with the tooltip component\n        dot={\n          <CustomDot\n            onDotClick={handleOnDotClick}\n            activeDot={activeDot}\n            dataKey={datakey}\n            stroke={`url(#gradient-stroke-${index})`}\n            dataName={`dot-${dataset}`}\n          />\n        }\n      />\n    );\n  }, totalDataset);\n\nconst buildCustomLabel = ({\n  index,\n  x,\n  y,\n  percentagesValues,\n  label,\n  activeDot,\n  chartType,\n  formatedColors,\n  onClick\n}: {\n  index: number;\n  x: number;\n  y: number;\n  percentagesValues: number[];\n  label: string;\n  chartType: CHART_TYPE_TYPE;\n  formatedColors: FormatedColorsType[];\n  activeDot?: ActiveDotType;\n  onClick: (name: string) => void;\n}) => {\n  const isCurrentDotActive = activeDot?.label === label;\n  const {\n    offset: {x: offsetX, y: offsetY},\n    alignment,\n    ...rest\n  } = CHART_CONFIGS[chartType].ticks[index];\n\n  function onLabelClick(e: React.MouseEvent) {\n    e.stopPropagation();\n    onClick(label);\n  }\n\n  return (\n    <g>\n      <foreignObject\n        className={style.tickeForeignObject}\n        x={x + offsetX}\n        y={y + offsetY}\n        width=\"200\"\n        height=\"65\"\n      >\n        <div\n          data-name={label}\n          onClick={onLabelClick}\n          className={classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus)}\n          style={{\n            ...rest,\n            alignItems: alignment,\n            textAlign: alignment,\n            opacity: !isEmpty(activeDot) && !isCurrentDotActive ? 0.3 : 1\n          }}\n        >\n          {formatedColors.map(\n            ({percentage: {color, background}, label: {color: colorLabel}}, i) => (\n              <Fragment key={i}>\n                <span className={style.tickValue} style={{color, background}}>\n                  {percentagesValues[i]}\n                </span>\n                <span className={style.tickLabel} style={{color: colorLabel}}>\n                  {label}\n                </span>\n              </Fragment>\n            )\n          )}\n        </div>\n      </foreignObject>\n    </g>\n  );\n};\n\n/* UTILS */\nconst CHART_CONFIGS_BY_SIDE_COUNT = pipe(keyBy('sideCount'), mapValues('name'))(CHART_CONFIGS);\n\nconst formatValues: (values_: number | number[]) => Record<string, number> = pipe(\n  values_ => flatten([values_]),\n  values_ => values_.map((val: number, i: number): [string, number] => [`value${i + 1}`, val]),\n  fromPairs\n);\n\n/* this convert incoming component data to rechart data structure */\nexport const formatData: (\n  legend: {[ref: string]: string},\n  data_: LearningProfileRadarChartPropTypes['data']\n) => FormatedDataType[] = (legend, data_) =>\n  pipe(\n    toPairs,\n    map(([ref, values_]: [string, number | number[]]) => ({\n      ...formatValues(values_),\n      subject: legend[ref]\n    }))\n  )(data_);\n\nexport const LearningProfileRadarChart = ({\n  data,\n  legend,\n  totalDataset,\n  colors: colorsProps,\n  onClick,\n  width,\n  height,\n  margin\n}: LearningProfileRadarChartPropTypes) => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [activeDot, setActiveDot] = useState<ActiveDotType>();\n\n  const formatedColors = times(i => {\n    if (!colorsProps?.length) return DEFAULT_COLORS;\n\n    const colors = colorsProps[i];\n    return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;\n  })(totalDataset);\n\n  const chartType: CHART_TYPE_TYPE = useMemo(\n    () => getOr('hexagon', size(data), CHART_CONFIGS_BY_SIDE_COUNT),\n    [data]\n  );\n\n  const gradients = useMemo(\n    () =>\n      formatedColors.map(({gradient: {fill, stroke}}, index) => (\n        <svg key={`gradient-${index}`}>\n          <Gradient type={`fill-${index}`} colors={fill} />\n          <Gradient type={`stroke-${index}`} colors={stroke} />\n        </svg>\n      )),\n    [formatedColors]\n  );\n\n  const userAgent = navigator?.userAgent;\n  const isMobile_ = useMemo(() => getIsMobile(userAgent), [userAgent]);\n\n  const setIsMobile_ = useCallback(() => {\n    setIsMobile(isMobile_);\n  }, [isMobile_]);\n\n  useEffect(() => setIsMobile_(), [setIsMobile_]);\n\n  useEffect(() => {\n    const handleClick = () => {\n      setActiveDot(undefined);\n      onClick(undefined);\n    };\n\n    !isEmpty(activeDot) && window.addEventListener('click', handleClick);\n\n    return () => {\n      window.removeEventListener('click', handleClick);\n    };\n  }, [activeDot, onClick, setActiveDot]);\n\n  function handleOnDotClick(label: string) {\n    const payload = formatedData.find(({subject}) => subject === label);\n    if (!payload) return;\n\n    const index = formatedData.indexOf(payload);\n    const datakey = `value${index + 1}`;\n    const skillRef = findKey(val => val === payload?.subject, legend);\n\n    if (skillRef) {\n      setActiveDot({\n        key: datakey,\n        value: payload[datakey],\n        label: payload.subject\n      });\n      onClick(skillRef);\n    }\n  }\n\n  function renderCustomLabel({\n    x,\n    y,\n    payload: {value: label},\n    index\n  }: {\n    x: number;\n    y: number;\n    payload: {value: string};\n    index: number;\n  }) {\n    const currentData = formatedData.find(({subject}) => subject === label);\n    const percentagesValues: number[] = pipe(\n      omit('subject'),\n      mapValues(value => `${value}%`),\n      values\n    )(currentData);\n\n    return buildCustomLabel({\n      index,\n      x,\n      y,\n      percentagesValues,\n      label,\n      activeDot,\n      chartType,\n      formatedColors,\n      onClick: handleOnDotClick\n    });\n  }\n  const formatedData = useMemo(() => formatData(legend, data), [legend, data]);\n\n  return (\n    <RadarChart\n      width={width}\n      height={height}\n      margin={margin ?? (isMobile ? {top: 80} : {top: 180})}\n      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={10} strokeWidth={2} radialLines={false} />\n      <PolarAngleAxis dataKey=\"subject\" tick={!isMobile && renderCustomLabel} />\n      <PolarRadiusAxis tick={false} axisLine={false} domain={[0, 100]} />\n      {isMobile ? <Tooltip cursor={false} content={<CustomTooltip />} /> : null}\n    </RadarChart>\n  );\n};\n\nconst ResponsiveLearningProfileRadarChart = (props: LearningProfileRadarChartPropTypes) => (\n  <ResponsiveContainer width=\"100%\" height=\"100%\">\n    <LearningProfileRadarChart {...props} />\n  </ResponsiveContainer>\n);\n\nLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\nResponsiveLearningProfileRadarChart.propTypes = learningProfileRadarChartPropTypes;\n\nexport default ResponsiveLearningProfileRadarChart;\n"],"mappings":"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"}

package/es/molecule/skill-picker-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AAQA,gFAsHC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AASA,gFA6HC"}

package/es/molecule/skill-picker-modal/index.js

@@ -1,5 +1,6 @@
 import React, { useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import filter from 'lodash/fp/filter';
 import BaseModal from '../base-modal';
 import Chip from '../../atom/chip';
 import Loader from '../../atom/loader';
@@ -22,7 +23,7 @@ const SkillPickerModal = (props, context) => {
   const {
     translate
   } = context;
-  const [selectedSkillList, setSelectedSkillList] = useState([...selectedSkills]);
+  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);
   const handleCancel = useCallback(() => {
     setSelectedSkillList(selectedSkills);
     onCancel();
@@ -62,7 +63,7 @@ const SkillPickerModal = (props, context) => {
         disabled: isLoading || isError
       }
     };
-  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills]);
+  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills, minSelectedSkills]);
   if (!isLoading && !skills || !isOpen) return null;
   return /*#__PURE__*/React.createElement(BaseModal, {
     title: translate('skill_focus'),
@@ -94,19 +95,13 @@ const SkillPickerModal = (props, context) => {
   }, skillList.map((skill, index) => {
     const {
       skillTitle,
+      skillRef,
       focus
     } = skill;
 
     function handleChipClick() {
-      let filteredSelectedSkillList = [...selectedSkillList];
-
-      if (selectedSkillList.includes(skill.skillRef)) {
-        filteredSelectedSkillList = filteredSelectedSkillList.filter(ref => ref !== skill.skillRef);
-      } else {
-        filteredSelectedSkillList.push(skill.skillRef);
-      }
-
-      setSelectedSkillList(filteredSelectedSkillList);
+      const newSelectedSkillList = focus ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList) : [...selectedSkillList, skill.skillRef];
+      setSelectedSkillList(newSelectedSkillList);
     }
 
     return /*#__PURE__*/React.createElement(Chip, {

package/es/molecule/skill-picker-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","BaseModal","Chip","Loader","Provider","style","SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","selectedSkillList","setSelectedSkillList","handleCancel","handleClose","skillList","map","skill","skillTitle","skillRef","focus","includes","isError","length","footer","footerDescription","skillNumber","text","replace","cancelButton","label","disabled","confirmButton","iconName","name","backgroundColor","skillPickerContainer","loaderContainer","loader","marginBottom","display","gap","flexWrap","index","handleChipClick","filteredSelectedSkillList","filter","ref","push","contextTypes","childContextTypes","propTypes","arrayOf","string","objectOf","bool","number","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [selectedSkillList, setSelectedSkillList] = useState([...selectedSkills]);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillList = useMemo(() => {\n    return skills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill)\n      };\n    });\n  }, [skills, selectedSkillList, skillsLocales])\n\n  const isError = useMemo(\n    () => selectedSkillList.length > maxSelectedSkills,\n    [selectedSkillList, maxSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription = isError\n      ? translate('skill_focus_footer_error_description', {\n          skillNumber: selectedSkillList.length - maxSelectedSkills\n        })\n      : translate('skill_focus_footer_description', {\n          skillNumber: minSelectedSkills - selectedSkillList.length\n        });\n    return {\n      text:\n        isLoading ||\n        (selectedSkillList.length <= maxSelectedSkills && selectedSkillList.length >= minSelectedSkills)\n          ? ''\n          : footerDescription.replace('.'),\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div style={{marginBottom: '16px'}}>\n              {`${selectedSkillList.length} ${translate('selected')}`}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, focus} = skill;\n                function handleChipClick() {\n                  let filteredSelectedSkillList = [...selectedSkillList];\n                  if (selectedSkillList.includes(skill.skillRef)) {\n                    filteredSelectedSkillList = filteredSelectedSkillList.filter(ref => ref !== skill.skillRef);\n                  } else {\n                    filteredSelectedSkillList.push(skill.skillRef);\n                  }\n                  setSelectedSkillList(filteredSelectedSkillList);\n                }\n\n                return (\n                  <Chip text={skillTitle} selected={focus} onClick={handleChipClick} key={index} />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","filter","BaseModal","Chip","Loader","Provider","style","SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","selectedSkillList","setSelectedSkillList","handleCancel","handleClose","skillList","map","skill","skillTitle","skillRef","focus","includes","isError","length","footer","footerDescription","skillNumber","text","replace","cancelButton","label","disabled","confirmButton","iconName","name","backgroundColor","skillPickerContainer","loaderContainer","loader","marginBottom","display","gap","flexWrap","index","handleChipClick","newSelectedSkillList","selectedSkill","contextTypes","childContextTypes","propTypes","arrayOf","string","objectOf","bool","number","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport filter from 'lodash/fp/filter';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillList = useMemo(() => {\n    return skills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill)\n      };\n    });\n  }, [skills, selectedSkillList, skillsLocales]);\n\n  const isError = useMemo(\n    () => selectedSkillList.length > maxSelectedSkills,\n    [selectedSkillList, maxSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription = isError\n      ? translate('skill_focus_footer_error_description', {\n          skillNumber: selectedSkillList.length - maxSelectedSkills\n        })\n      : translate('skill_focus_footer_description', {\n          skillNumber: minSelectedSkills - selectedSkillList.length\n        });\n    return {\n      text:\n        isLoading ||\n        (selectedSkillList.length <= maxSelectedSkills &&\n          selectedSkillList.length >= minSelectedSkills)\n          ? ''\n          : footerDescription.replace('.'),\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [\n    isError,\n    handleCancel,\n    onConfirm,\n    translate,\n    selectedSkillList,\n    isLoading,\n    maxSelectedSkills,\n    minSelectedSkills\n  ]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div style={{marginBottom: '16px'}}>\n              {`${selectedSkillList.length} ${translate('selected')}`}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, skillRef, focus} = skill;\n                function handleChipClick() {\n                  const newSelectedSkillList = focus\n                    ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList)\n                    : [...selectedSkillList, skill.skillRef];\n                  setSelectedSkillList(newSelectedSkillList);\n                }\n\n                return (\n                  <Chip text={skillTitle} selected={focus} onClick={handleChipClick} key={index} />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":"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"}

package/es/molecule/skills-chart-side-information-panel/style.css

@@ -1,6 +1,7 @@
 @value breakpoints: "../../variables/breakpoints.css";
-@value tablet from breakpoints;
 @value mobile from breakpoints;
+@value tablet from breakpoints;
+
 
 .sidePanel {
   display: flex;
@@ -16,4 +17,10 @@
   .sidePanel {
     width: 100%;
   }
+}
+
+@media tablet {
+  .sidePanel {
+    width: 100%;
+  }
 }

package/es/organism/review-no-skills/index.d.ts

@@ -1,8 +1,9 @@
 export default ReviewNoSkills;
-declare function ReviewNoSkills({ titleNoSkills, textNoSkills, iconSkillAriaLabel }: {
+declare function ReviewNoSkills({ titleNoSkills, textNoSkills, iconSkillAriaLabel, directionReverse }: {
     titleNoSkills: any;
     textNoSkills: any;
     iconSkillAriaLabel: any;
+    directionReverse?: boolean | undefined;
 }): JSX.Element;
 declare namespace ReviewNoSkills {
     export { propTypes };

package/es/organism/review-no-skills/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-no-skills/index.js"],"names":[],"mappings":";AAKA;;;;gBAQC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-no-skills/index.js"],"names":[],"mappings":";AAKA;;;;;gBAqBC"}

package/es/organism/review-no-skills/index.js

@@ -6,18 +6,22 @@ import propTypes from './prop-types';
 const ReviewNoSkills = ({
   titleNoSkills,
   textNoSkills,
-  iconSkillAriaLabel
+  iconSkillAriaLabel,
+  directionReverse = false
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     className: style.noSkillsContainer
-  }, /*#__PURE__*/React.createElement("div", {
+  }, directionReverse ? /*#__PURE__*/React.createElement(EmptyStateHomeRevision, {
+    className: style.imgNoSkillsReverse,
+    "aria-label": iconSkillAriaLabel
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: style.titleNoSkills
   }, titleNoSkills), /*#__PURE__*/React.createElement("div", {
     className: style.textNoSkills
-  }, " ", textNoSkills), /*#__PURE__*/React.createElement(EmptyStateHomeRevision, {
+  }, " ", textNoSkills), !directionReverse ? /*#__PURE__*/React.createElement(EmptyStateHomeRevision, {
     className: style.imgNoSkills,
     "aria-label": iconSkillAriaLabel
-  }));
+  }) : null);
 };
 
 ReviewNoSkills.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};

package/es/organism/review-no-skills/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","NovaCompositionCoorpacademyEmptyStateHomeRevision","EmptyStateHomeRevision","style","propTypes","ReviewNoSkills","titleNoSkills","textNoSkills","iconSkillAriaLabel","noSkillsContainer","imgNoSkills"],"sources":["../../../src/organism/review-no-skills/index.js"],"sourcesContent":["import React from 'react';\nimport {NovaCompositionCoorpacademyEmptyStateHomeRevision as EmptyStateHomeRevision} from '@coorpacademy/nova-icons';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst ReviewNoSkills = ({titleNoSkills, textNoSkills, iconSkillAriaLabel}) => {\n  return (\n    <div className={style.noSkillsContainer}>\n      <div className={style.titleNoSkills}>{titleNoSkills}</div>\n      <div className={style.textNoSkills}> {textNoSkills}</div>\n      <EmptyStateHomeRevision className={style.imgNoSkills} aria-label={iconSkillAriaLabel} />\n    </div>\n  );\n};\n\nReviewNoSkills.propTypes = propTypes;\n\nexport default ReviewNoSkills;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,iDAAiD,IAAIC,sBAA7D,QAA0F,0BAA1F;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,MAAsB,cAAtB;;AAEA,MAAMC,cAAc,GAAG,CAAC;EAACC,aAAD;EAAgBC,YAAhB;EAA8BC;AAA9B,CAAD,KAAuD;EAC5E,oBACE;IAAK,SAAS,EAAEL,KAAK,CAACM;EAAtB,gBACE;IAAK,SAAS,EAAEN,KAAK,CAACG;EAAtB,GAAsCA,aAAtC,CADF,eAEE;IAAK,SAAS,EAAEH,KAAK,CAACI;EAAtB,QAAsCA,YAAtC,CAFF,eAGE,oBAAC,sBAAD;IAAwB,SAAS,EAAEJ,KAAK,CAACO,WAAzC;IAAsD,cAAYF;EAAlE,EAHF,CADF;AAOD,CARD;;AAUAH,cAAc,CAACD,SAAf,2CAA2BA,SAA3B;AAEA,eAAeC,cAAf"}
+{"version":3,"file":"index.js","names":["React","NovaCompositionCoorpacademyEmptyStateHomeRevision","EmptyStateHomeRevision","style","propTypes","ReviewNoSkills","titleNoSkills","textNoSkills","iconSkillAriaLabel","directionReverse","noSkillsContainer","imgNoSkillsReverse","imgNoSkills"],"sources":["../../../src/organism/review-no-skills/index.js"],"sourcesContent":["import React from 'react';\nimport {NovaCompositionCoorpacademyEmptyStateHomeRevision as EmptyStateHomeRevision} from '@coorpacademy/nova-icons';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst ReviewNoSkills = ({\n  titleNoSkills,\n  textNoSkills,\n  iconSkillAriaLabel,\n  directionReverse = false\n}) => {\n  return (\n    <div className={style.noSkillsContainer}>\n      {directionReverse ? (\n        <EmptyStateHomeRevision\n          className={style.imgNoSkillsReverse}\n          aria-label={iconSkillAriaLabel}\n        />\n      ) : null}\n      <div className={style.titleNoSkills}>{titleNoSkills}</div>\n      <div className={style.textNoSkills}> {textNoSkills}</div>\n      {!directionReverse ? (\n        <EmptyStateHomeRevision className={style.imgNoSkills} aria-label={iconSkillAriaLabel} />\n      ) : null}\n    </div>\n  );\n};\n\nReviewNoSkills.propTypes = propTypes;\n\nexport default ReviewNoSkills;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,iDAAiD,IAAIC,sBAA7D,QAA0F,0BAA1F;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,MAAsB,cAAtB;;AAEA,MAAMC,cAAc,GAAG,CAAC;EACtBC,aADsB;EAEtBC,YAFsB;EAGtBC,kBAHsB;EAItBC,gBAAgB,GAAG;AAJG,CAAD,KAKjB;EACJ,oBACE;IAAK,SAAS,EAAEN,KAAK,CAACO;EAAtB,GACGD,gBAAgB,gBACf,oBAAC,sBAAD;IACE,SAAS,EAAEN,KAAK,CAACQ,kBADnB;IAEE,cAAYH;EAFd,EADe,GAKb,IANN,eAOE;IAAK,SAAS,EAAEL,KAAK,CAACG;EAAtB,GAAsCA,aAAtC,CAPF,eAQE;IAAK,SAAS,EAAEH,KAAK,CAACI;EAAtB,QAAsCA,YAAtC,CARF,EASG,CAACE,gBAAD,gBACC,oBAAC,sBAAD;IAAwB,SAAS,EAAEN,KAAK,CAACS,WAAzC;IAAsD,cAAYJ;EAAlE,EADD,GAEG,IAXN,CADF;AAeD,CArBD;;AAuBAH,cAAc,CAACD,SAAf,2CAA2BA,SAA3B;AAEA,eAAeC,cAAf"}

package/es/organism/review-no-skills/prop-types.d.ts

@@ -3,11 +3,13 @@ declare const propTypes: {
     titleNoSkills: PropTypes.Validator<string>;
     textNoSkills: PropTypes.Validator<string>;
     iconSkillAriaLabel: PropTypes.Validator<string>;
+    directionReverse: PropTypes.Requireable<boolean>;
 };
 export default propTypes;
 export declare type NoSkillsProps = {
     titleNoSkills: string;
     textNoSkills: string;
     iconSkillAriaLabel: string;
+    directionReverse?: boolean;
 };
 //# sourceMappingURL=prop-types.d.ts.map

package/es/organism/review-no-skills/prop-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/organism/review-no-skills/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;CAId,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,aAAa,GAAG;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/organism/review-no-skills/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;CAKd,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,aAAa,GAAG;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC"}

package/es/organism/review-no-skills/prop-types.js

@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 const propTypes = {
   titleNoSkills: PropTypes.string.isRequired,
   textNoSkills: PropTypes.string.isRequired,
-  iconSkillAriaLabel: PropTypes.string.isRequired
+  iconSkillAriaLabel: PropTypes.string.isRequired,
+  directionReverse: PropTypes.bool
 };
 export default propTypes;
 //# sourceMappingURL=prop-types.js.map

package/es/organism/review-no-skills/prop-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.js","names":["PropTypes","propTypes","titleNoSkills","string","isRequired","textNoSkills","iconSkillAriaLabel"],"sources":["../../../src/organism/review-no-skills/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n  titleNoSkills: PropTypes.string.isRequired,\n  textNoSkills: PropTypes.string.isRequired,\n  iconSkillAriaLabel: PropTypes.string.isRequired\n};\n\nexport default propTypes;\n\nexport type NoSkillsProps = {\n  titleNoSkills: string;\n  textNoSkills: string;\n  iconSkillAriaLabel: string;\n};\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,MAAMC,SAAS,GAAG;EAChBC,aAAa,EAAEF,SAAS,CAACG,MAAV,CAAiBC,UADhB;EAEhBC,YAAY,EAAEL,SAAS,CAACG,MAAV,CAAiBC,UAFf;EAGhBE,kBAAkB,EAAEN,SAAS,CAACG,MAAV,CAAiBC;AAHrB,CAAlB;AAMA,eAAeH,SAAf"}
+{"version":3,"file":"prop-types.js","names":["PropTypes","propTypes","titleNoSkills","string","isRequired","textNoSkills","iconSkillAriaLabel","directionReverse","bool"],"sources":["../../../src/organism/review-no-skills/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n  titleNoSkills: PropTypes.string.isRequired,\n  textNoSkills: PropTypes.string.isRequired,\n  iconSkillAriaLabel: PropTypes.string.isRequired,\n  directionReverse: PropTypes.bool\n};\n\nexport default propTypes;\n\nexport type NoSkillsProps = {\n  titleNoSkills: string;\n  textNoSkills: string;\n  iconSkillAriaLabel: string;\n  directionReverse?: boolean;\n};\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,MAAMC,SAAS,GAAG;EAChBC,aAAa,EAAEF,SAAS,CAACG,MAAV,CAAiBC,UADhB;EAEhBC,YAAY,EAAEL,SAAS,CAACG,MAAV,CAAiBC,UAFf;EAGhBE,kBAAkB,EAAEN,SAAS,CAACG,MAAV,CAAiBC,UAHrB;EAIhBG,gBAAgB,EAAEP,SAAS,CAACQ;AAJZ,CAAlB;AAOA,eAAeP,SAAf"}

package/es/organism/review-no-skills/style.css

@@ -46,6 +46,13 @@
   width: 361px;
 }
 
+.imgNoSkillsReverse {
+  height: 361px;
+  margin-top: 0px;
+  margin-bottom: 8px;
+  width: 361px;
+}
+
 @media tablet {
   .titleNoSkills, .textNoSkills {
     width: 90%;

package/es/template/my-learning/index.d.ts

@@ -7,23 +7,22 @@ declare namespace MyLearning {
     namespace propTypes {
         const skills: PropTypes.Requireable<(string | null | undefined)[]>;
         const selectedSkills: PropTypes.Requireable<(string | null | undefined)[]>;
-        const skillsStats: PropTypes.Requireable<{
+        const skillsInformation: PropTypes.Requireable<{
             [x: string]: PropTypes.InferProps<{
-                score: PropTypes.Requireable<number>;
-                courses: PropTypes.Requireable<number>;
-                coursesCompleted: PropTypes.Requireable<number>;
-                questionsAnswered: PropTypes.Requireable<number>;
-                learningHours: PropTypes.Requireable<number>;
-            }> | null | undefined;
-        }>;
-        const skillsFilters: PropTypes.Requireable<{
-            [x: string]: PropTypes.InferProps<{
-                review: any;
+                availableForReview: PropTypes.Requireable<boolean>;
+                stats: PropTypes.Requireable<PropTypes.InferProps<{
+                    score: PropTypes.Requireable<number>;
+                    courses: PropTypes.Requireable<number>;
+                    coursesCompleted: PropTypes.Requireable<number>;
+                    questionsAnswered: PropTypes.Requireable<number>;
+                    learningHours: PropTypes.Requireable<number>;
+                }>>;
             }> | null | undefined;
         }>;
         const skillsLocales: PropTypes.Requireable<{
             [x: string]: string | null | undefined;
         }>;
+        const learnerFeature: PropTypes.Requireable<boolean>;
         const isLoading: PropTypes.Requireable<boolean>;
         const onSkillFocusConfirm: PropTypes.Requireable<(...args: any[]) => any>;
         const onReviewSkill: PropTypes.Requireable<(...args: any[]) => any>;

package/es/template/my-learning/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AA2GA,mEAoRC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AA+GA,mEAoVC"}