@coorpacademy/components 11.30.1 → 11.32.1-alpha.16

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","useState","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","useCallback","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","convert","color","icon","position","faIcon","name","size","completedPercentage","Number","parseInt","ProgressBar","progressBarColor","inlineProgressValueStyle","width","style","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","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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"}

package/lib/molecule/learner-skill-card/style.css

@@ -0,0 +1,119 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value colors: "../../variables/colors.css";
+@value cm_grey_400 from colors;
+@value white from colors;
+@value light from colors;
+@value box_shadow_light_dark from colors;
+@value box_shadow_medium_dark from colors;
+
+@keyframes progressbar {
+  0% {
+    width: 0;
+  }
+}
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+}
+
+.learnerSkillCardWrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 258px;
+  width: 100%;
+  min-height: 252px;
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04);
+  transition: box-shadow 0.15s ease-in-out;
+  border-radius: 12px;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+.learnerSkillCardWrapper:hover {
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
+}
+
+.skillCoursesAndQuestionsWrapper,
+.progressInformations {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.skillInformation,
+.progressInformation {
+  composes: textBase;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  color: cm_grey_400;
+}
+
+.skillInformationNumber,
+.progressInformationNumber {
+  color: #000;
+}
+
+.skillTitleWrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 68px;
+  margin-bottom: 24px;
+}
+
+.skillTitle {
+  composes: textBase;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 8px;
+}
+
+.skillFocusBadge {
+  composes: textBase;
+  display: flex;
+  height: 12px;
+  width: 62px;
+  align-items: center;
+  background-color: #DDD1FF;
+  border-radius: 24px;
+  padding: 2px 4px;
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 600;
+  color: #3900D6;
+  margin-right: 8px;
+}
+
+.progressWrapper {
+  position: relative;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  overflow: hidden;
+  background: light;
+  margin-bottom: 8px;
+}
+
+.progress {
+  display: block;
+  height: 4px;
+  animation: progressbar 2s ease-in-out;
+}
+
+.progressInformations {
+  min-height: 12px;
+  margin-bottom: 24px;
+}
+
+.ctaWrapper {
+  margin-top: auto;
+  display: flex;
+}
+
+.buttonWrapper {
+  display: flex;
+}

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

@@ -4,7 +4,7 @@ export declare const formatData: (legend: {
     [ref: string]: string;
 }, data_: LearningProfileRadarChartPropTypes['data']) => FormatedDataType[];
 export declare const LearningProfileRadarChart: {
-    ({ data, legend, totalDataset, colors: colorsProps, onClick, width, height }: LearningProfileRadarChartPropTypes): JSX.Element;
+    ({ data, legend, totalDataset, colors: colorsProps, onClick, width, height, margin }: LearningProfileRadarChartPropTypes): JSX.Element;
     propTypes: {
         data: import("prop-types").Validator<{
             [x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;

package/lib/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;kFAQnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAiHpC,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;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"}

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

@@ -129,10 +129,10 @@ const CHART_CONFIGS = {
   }
 };
 const DOT_DEFAULT_PROPS = {
-  strokeWidth: 4,
-  strokeOpacity: 0.2,
+  strokeWidth: 2,
+  strokeOpacity: 0.4,
   fill: '#fff',
-  r: 8,
+  r: 4,
   pointerEvents: 'all',
   style: {
     cursor: 'pointer'
@@ -140,12 +140,12 @@ const DOT_DEFAULT_PROPS = {
 };
 const DOT_ACTIVE_PROPS = {
   fill: '#fff',
-  r: 8,
-  strokeWidth: 6,
-  strokeOpacity: 0.5
+  r: 6,
+  strokeWidth: 4,
+  strokeOpacity: 0.6
 };
 const RADAR_DEFAULT_PROPS = {
-  strokeWidth: 6,
+  strokeWidth: 3,
   strokeOpacity: 0.2,
   fillOpacity: 0.2
 };
@@ -310,7 +310,8 @@ const LearningProfileRadarChart = ({
   colors: colorsProps,
   onClick,
   width,
-  height
+  height,
+  margin
 }) => {
   const [isMobile, setIsMobile] = (0, _react.useState)(false);
   const [activeDot, setActiveDot] = (0, _react.useState)();
@@ -341,7 +342,10 @@ const LearningProfileRadarChart = ({
   }, [isMobile_]);
   (0, _react.useEffect)(() => setIsMobile_(), [setIsMobile_]);
   (0, _react.useEffect)(() => {
-    const handleClick = () => setActiveDot(undefined);
+    const handleClick = () => {
+      setActiveDot(undefined);
+      onClick(undefined);
+    };
 
     !(0, _isEmpty2.default)(activeDot) && window.addEventListener('click', handleClick);
     return () => {
@@ -397,13 +401,14 @@ const LearningProfileRadarChart = ({
   return /*#__PURE__*/_react.default.createElement(_recharts.RadarChart, {
     width: width,
     height: height,
+    margin: margin,
     cx: "50%",
     cy: "50%",
     outerRadius: "80%",
     data: formatedData
   }, gradients, buildRadars(totalDataset, handleOnDotClick, activeDot), /*#__PURE__*/_react.default.createElement(_recharts.PolarGrid, {
-    strokeDasharray: 15,
-    strokeWidth: 3,
+    strokeDasharray: 10,
+    strokeWidth: 2,
     radialLines: false
   }), /*#__PURE__*/_react.default.createElement(_recharts.PolarAngleAxis, {
     dataKey: "subject",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["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","style","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","classnames","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","isMobile","setIsMobile","useState","setActiveDot","Object","assign","useMemo","gradients","userAgent","navigator","isMobile_","getIsMobile","setIsMobile_","useCallback","useEffect","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes","learningProfileRadarChartPropTypes"],"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: -65}, 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: 4,\n  strokeOpacity: 0.2,\n  fill: '#fff',\n  r: 8,\n  pointerEvents: 'all',\n  style: {cursor: 'pointer'}\n} as const;\n\nconst DOT_ACTIVE_PROPS = {\n  fill: '#fff',\n  r: 8,\n  strokeWidth: 6,\n  strokeOpacity: 0.5\n} as const;\n\nconst RADAR_DEFAULT_PROPS = {\n  strokeWidth: 6,\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 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}: 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 = () => setActiveDot(undefined);\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      cx=\"50%\"\n      cy=\"50%\"\n      outerRadius=\"80%\"\n      data={formatedData}\n    >\n      {gradients}\n      {buildRadars(totalDataset, handleOnDotClick, activeDot)}\n      <PolarGrid strokeDasharray={15} strokeWidth={3} 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":["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","style","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","classnames","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","isMobile","setIsMobile","useState","setActiveDot","Object","assign","useMemo","gradients","userAgent","navigator","isMobile_","getIsMobile","setIsMobile_","useCallback","useEffect","handleClick","undefined","window","addEventListener","removeEventListener","formatedData","find","indexOf","skillRef","key","renderCustomLabel","currentData","ResponsiveLearningProfileRadarChart","props","propTypes","learningProfileRadarChartPropTypes"],"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: -65}, 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 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}\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/lib/molecule/learning-profile-radar-chart/types.d.ts

@@ -73,10 +73,16 @@ export declare type LearningProfileRadarChartPropTypes = {
         [ref: string]: string;
     };
     totalDataset: number;
-    onClick: (skillRef: string) => void;
+    onClick: (skillRef?: string) => void;
     colors?: ColorType[];
     width?: number;
     height?: number;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
 };
 export declare type CustomDotPropTypes = {
     cx: number;

package/lib/molecule/learning-profile-radar-chart/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"names":[],"mappings":"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"}

package/lib/molecule/learning-profile-radar-chart/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["learningProfileRadarChartPropTypes","data","PropTypes","objectOf","oneOfType","arrayOf","number","isRequired","totalDataset","onDotClick","func","colors","shape","gradient","fill","string","stroke","percentage","color","background","label","width","height","customDotPropTypes","cx","cy","payload","value","subject","name","index","activeDot","key","dataKey","customTooltipPropTypes","active","bool","gradientPropTypes","type"],"sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\n// PROPTYPES\nexport const learningProfileRadarChartPropTypes = {\n  data: PropTypes.objectOf(\n    PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])\n  ).isRequired,\n  totalDataset: PropTypes.number.isRequired,\n  onDotClick: PropTypes.func,\n  colors: PropTypes.arrayOf(\n    PropTypes.shape({\n      gradient: PropTypes.shape({\n        fill: PropTypes.arrayOf(PropTypes.string),\n        stroke: PropTypes.arrayOf(PropTypes.string)\n      }),\n      percentage: PropTypes.shape({\n        color: PropTypes.string,\n        background: PropTypes.string\n      }),\n      label: PropTypes.shape({\n        color: PropTypes.string\n      })\n    })\n  ),\n  width: PropTypes.number,\n  height: PropTypes.number\n};\n\nexport const customDotPropTypes = {\n  cx: PropTypes.number,\n  cy: PropTypes.number,\n  payload: PropTypes.shape({\n    payload: PropTypes.shape({\n      value: PropTypes.number,\n      subject: PropTypes.string\n    }),\n    name: PropTypes.string\n  }),\n  onDotClick: PropTypes.func,\n  index: PropTypes.number,\n  activeDot: PropTypes.shape({\n    label: PropTypes.string,\n    value: PropTypes.number,\n    key: PropTypes.string\n  }),\n  dataKey: PropTypes.string,\n  stroke: PropTypes.string\n};\n\nexport const customTooltipPropTypes = {\n  active: PropTypes.bool,\n  payload: PropTypes.arrayOf(\n    PropTypes.shape({\n      value: PropTypes.number\n    })\n  ),\n  label: PropTypes.string\n};\n\nexport const gradientPropTypes = {\n  type: PropTypes.string,\n  colors: PropTypes.arrayOf(PropTypes.string)\n};\n\n// TYPES\nexport type ColorType = {\n  gradient?: {\n    fill?: string[];\n    stroke?: string[];\n  };\n  percentage?: {\n    color?: string;\n    background?: string;\n  };\n  label?: {\n    color?: string;\n  };\n};\n\nexport type LearningProfileRadarChartPropTypes = {\n  data: {\n    [ref: string]: number | number[];\n  };\n  legend: {\n    [ref: string]: string;\n  };\n  totalDataset: number;\n  onClick: (skillRef: string) => void;\n  colors?: ColorType[];\n  width?: number;\n  height?: number;\n};\n\nexport type CustomDotPropTypes = {\n  cx: number;\n  cy: number;\n  payload: {\n    payload: {\n      value: number;\n      subject: string;\n    };\n    name: string;\n  };\n  onDotClick: (name: string) => void;\n  index: number;\n  activeDot?: {\n    label: string;\n    value: number;\n    key: string;\n  };\n  dataKey: string;\n  stroke: string;\n};\n\nexport type CustomTooltipPropTypes = {\n  active: boolean;\n  payload: {\n    value: number;\n  }[];\n  label: string;\n};\n\nexport type GradientPropTypes = {\n  type: string;\n  colors: string[];\n};\n\nexport type TickType = {\n  offset: {x: number; y: number};\n  alignment: 'center' | 'start' | 'end';\n  margin?: 'auto';\n  marginLeft?: 'auto';\n  marginRight?: 'auto';\n};\n\nexport type FormatedColorsType = {\n  gradient: {\n    fill: string[];\n    stroke: string[];\n  };\n  percentage: {\n    color: string;\n    background: string;\n  };\n  label: {\n    color: string;\n  };\n};\n\nexport type FormatedDataType = {\n  subject: string;\n} & {\n  [key: string]: number | string;\n};\n\nexport type ActiveDotType = {\n  key: string;\n  value: number | string;\n  label: string;\n};\n"],"mappings":";;;;;AAAA;;;;AAEA;AACO,MAAMA,kCAAkC,GAAG;EAChDC,IAAI,EAAEC,kBAAA,CAAUC,QAAV,CACJD,kBAAA,CAAUE,SAAV,CAAoB,CAACF,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUI,MAA5B,CAAD,EAAsCJ,kBAAA,CAAUI,MAAhD,CAApB,CADI,EAEJC,UAH8C;EAIhDC,YAAY,EAAEN,kBAAA,CAAUI,MAAV,CAAiBC,UAJiB;EAKhDE,UAAU,EAAEP,kBAAA,CAAUQ,IAL0B;EAMhDC,MAAM,EAAET,kBAAA,CAAUG,OAAV,CACNH,kBAAA,CAAUU,KAAV,CAAgB;IACdC,QAAQ,EAAEX,kBAAA,CAAUU,KAAV,CAAgB;MACxBE,IAAI,EAAEZ,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B,CADkB;MAExBC,MAAM,EAAEd,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B;IAFgB,CAAhB,CADI;IAKdE,UAAU,EAAEf,kBAAA,CAAUU,KAAV,CAAgB;MAC1BM,KAAK,EAAEhB,kBAAA,CAAUa,MADS;MAE1BI,UAAU,EAAEjB,kBAAA,CAAUa;IAFI,CAAhB,CALE;IASdK,KAAK,EAAElB,kBAAA,CAAUU,KAAV,CAAgB;MACrBM,KAAK,EAAEhB,kBAAA,CAAUa;IADI,CAAhB;EATO,CAAhB,CADM,CANwC;EAqBhDM,KAAK,EAAEnB,kBAAA,CAAUI,MArB+B;EAsBhDgB,MAAM,EAAEpB,kBAAA,CAAUI;AAtB8B,CAA3C;;AAyBA,MAAMiB,kBAAkB,GAAG;EAChCC,EAAE,EAAEtB,kBAAA,CAAUI,MADkB;EAEhCmB,EAAE,EAAEvB,kBAAA,CAAUI,MAFkB;EAGhCoB,OAAO,EAAExB,kBAAA,CAAUU,KAAV,CAAgB;IACvBc,OAAO,EAAExB,kBAAA,CAAUU,KAAV,CAAgB;MACvBe,KAAK,EAAEzB,kBAAA,CAAUI,MADM;MAEvBsB,OAAO,EAAE1B,kBAAA,CAAUa;IAFI,CAAhB,CADc;IAKvBc,IAAI,EAAE3B,kBAAA,CAAUa;EALO,CAAhB,CAHuB;EAUhCN,UAAU,EAAEP,kBAAA,CAAUQ,IAVU;EAWhCoB,KAAK,EAAE5B,kBAAA,CAAUI,MAXe;EAYhCyB,SAAS,EAAE7B,kBAAA,CAAUU,KAAV,CAAgB;IACzBQ,KAAK,EAAElB,kBAAA,CAAUa,MADQ;IAEzBY,KAAK,EAAEzB,kBAAA,CAAUI,MAFQ;IAGzB0B,GAAG,EAAE9B,kBAAA,CAAUa;EAHU,CAAhB,CAZqB;EAiBhCkB,OAAO,EAAE/B,kBAAA,CAAUa,MAjBa;EAkBhCC,MAAM,EAAEd,kBAAA,CAAUa;AAlBc,CAA3B;;AAqBA,MAAMmB,sBAAsB,GAAG;EACpCC,MAAM,EAAEjC,kBAAA,CAAUkC,IADkB;EAEpCV,OAAO,EAAExB,kBAAA,CAAUG,OAAV,CACPH,kBAAA,CAAUU,KAAV,CAAgB;IACde,KAAK,EAAEzB,kBAAA,CAAUI;EADH,CAAhB,CADO,CAF2B;EAOpCc,KAAK,EAAElB,kBAAA,CAAUa;AAPmB,CAA/B;;AAUA,MAAMsB,iBAAiB,GAAG;EAC/BC,IAAI,EAAEpC,kBAAA,CAAUa,MADe;EAE/BJ,MAAM,EAAET,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B;AAFuB,CAA1B,C,CAKP"}
+{"version":3,"file":"types.js","names":["learningProfileRadarChartPropTypes","data","PropTypes","objectOf","oneOfType","arrayOf","number","isRequired","totalDataset","onDotClick","func","colors","shape","gradient","fill","string","stroke","percentage","color","background","label","width","height","customDotPropTypes","cx","cy","payload","value","subject","name","index","activeDot","key","dataKey","customTooltipPropTypes","active","bool","gradientPropTypes","type"],"sources":["../../../src/molecule/learning-profile-radar-chart/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\n// PROPTYPES\nexport const learningProfileRadarChartPropTypes = {\n  data: PropTypes.objectOf(\n    PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])\n  ).isRequired,\n  totalDataset: PropTypes.number.isRequired,\n  onDotClick: PropTypes.func,\n  colors: PropTypes.arrayOf(\n    PropTypes.shape({\n      gradient: PropTypes.shape({\n        fill: PropTypes.arrayOf(PropTypes.string),\n        stroke: PropTypes.arrayOf(PropTypes.string)\n      }),\n      percentage: PropTypes.shape({\n        color: PropTypes.string,\n        background: PropTypes.string\n      }),\n      label: PropTypes.shape({\n        color: PropTypes.string\n      })\n    })\n  ),\n  width: PropTypes.number,\n  height: PropTypes.number\n};\n\nexport const customDotPropTypes = {\n  cx: PropTypes.number,\n  cy: PropTypes.number,\n  payload: PropTypes.shape({\n    payload: PropTypes.shape({\n      value: PropTypes.number,\n      subject: PropTypes.string\n    }),\n    name: PropTypes.string\n  }),\n  onDotClick: PropTypes.func,\n  index: PropTypes.number,\n  activeDot: PropTypes.shape({\n    label: PropTypes.string,\n    value: PropTypes.number,\n    key: PropTypes.string\n  }),\n  dataKey: PropTypes.string,\n  stroke: PropTypes.string\n};\n\nexport const customTooltipPropTypes = {\n  active: PropTypes.bool,\n  payload: PropTypes.arrayOf(\n    PropTypes.shape({\n      value: PropTypes.number\n    })\n  ),\n  label: PropTypes.string\n};\n\nexport const gradientPropTypes = {\n  type: PropTypes.string,\n  colors: PropTypes.arrayOf(PropTypes.string)\n};\n\n// TYPES\nexport type ColorType = {\n  gradient?: {\n    fill?: string[];\n    stroke?: string[];\n  };\n  percentage?: {\n    color?: string;\n    background?: string;\n  };\n  label?: {\n    color?: string;\n  };\n};\n\nexport type LearningProfileRadarChartPropTypes = {\n  data: {\n    [ref: string]: number | number[];\n  };\n  legend: {\n    [ref: string]: string;\n  };\n  totalDataset: number;\n  onClick: (skillRef?: string) => void;\n  colors?: ColorType[];\n  width?: number;\n  height?: number;\n  margin?: {\n    top?: number;\n    right?: number;\n    bottom?: number;\n    left?: number;\n  };\n};\n\nexport type CustomDotPropTypes = {\n  cx: number;\n  cy: number;\n  payload: {\n    payload: {\n      value: number;\n      subject: string;\n    };\n    name: string;\n  };\n  onDotClick: (name: string) => void;\n  index: number;\n  activeDot?: {\n    label: string;\n    value: number;\n    key: string;\n  };\n  dataKey: string;\n  stroke: string;\n};\n\nexport type CustomTooltipPropTypes = {\n  active: boolean;\n  payload: {\n    value: number;\n  }[];\n  label: string;\n};\n\nexport type GradientPropTypes = {\n  type: string;\n  colors: string[];\n};\n\nexport type TickType = {\n  offset: {x: number; y: number};\n  alignment: 'center' | 'start' | 'end';\n  margin?: 'auto';\n  marginLeft?: 'auto';\n  marginRight?: 'auto';\n};\n\nexport type FormatedColorsType = {\n  gradient: {\n    fill: string[];\n    stroke: string[];\n  };\n  percentage: {\n    color: string;\n    background: string;\n  };\n  label: {\n    color: string;\n  };\n};\n\nexport type FormatedDataType = {\n  subject: string;\n} & {\n  [key: string]: number | string;\n};\n\nexport type ActiveDotType = {\n  key: string;\n  value: number | string;\n  label: string;\n};\n"],"mappings":";;;;;AAAA;;;;AAEA;AACO,MAAMA,kCAAkC,GAAG;EAChDC,IAAI,EAAEC,kBAAA,CAAUC,QAAV,CACJD,kBAAA,CAAUE,SAAV,CAAoB,CAACF,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUI,MAA5B,CAAD,EAAsCJ,kBAAA,CAAUI,MAAhD,CAApB,CADI,EAEJC,UAH8C;EAIhDC,YAAY,EAAEN,kBAAA,CAAUI,MAAV,CAAiBC,UAJiB;EAKhDE,UAAU,EAAEP,kBAAA,CAAUQ,IAL0B;EAMhDC,MAAM,EAAET,kBAAA,CAAUG,OAAV,CACNH,kBAAA,CAAUU,KAAV,CAAgB;IACdC,QAAQ,EAAEX,kBAAA,CAAUU,KAAV,CAAgB;MACxBE,IAAI,EAAEZ,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B,CADkB;MAExBC,MAAM,EAAEd,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B;IAFgB,CAAhB,CADI;IAKdE,UAAU,EAAEf,kBAAA,CAAUU,KAAV,CAAgB;MAC1BM,KAAK,EAAEhB,kBAAA,CAAUa,MADS;MAE1BI,UAAU,EAAEjB,kBAAA,CAAUa;IAFI,CAAhB,CALE;IASdK,KAAK,EAAElB,kBAAA,CAAUU,KAAV,CAAgB;MACrBM,KAAK,EAAEhB,kBAAA,CAAUa;IADI,CAAhB;EATO,CAAhB,CADM,CANwC;EAqBhDM,KAAK,EAAEnB,kBAAA,CAAUI,MArB+B;EAsBhDgB,MAAM,EAAEpB,kBAAA,CAAUI;AAtB8B,CAA3C;;AAyBA,MAAMiB,kBAAkB,GAAG;EAChCC,EAAE,EAAEtB,kBAAA,CAAUI,MADkB;EAEhCmB,EAAE,EAAEvB,kBAAA,CAAUI,MAFkB;EAGhCoB,OAAO,EAAExB,kBAAA,CAAUU,KAAV,CAAgB;IACvBc,OAAO,EAAExB,kBAAA,CAAUU,KAAV,CAAgB;MACvBe,KAAK,EAAEzB,kBAAA,CAAUI,MADM;MAEvBsB,OAAO,EAAE1B,kBAAA,CAAUa;IAFI,CAAhB,CADc;IAKvBc,IAAI,EAAE3B,kBAAA,CAAUa;EALO,CAAhB,CAHuB;EAUhCN,UAAU,EAAEP,kBAAA,CAAUQ,IAVU;EAWhCoB,KAAK,EAAE5B,kBAAA,CAAUI,MAXe;EAYhCyB,SAAS,EAAE7B,kBAAA,CAAUU,KAAV,CAAgB;IACzBQ,KAAK,EAAElB,kBAAA,CAAUa,MADQ;IAEzBY,KAAK,EAAEzB,kBAAA,CAAUI,MAFQ;IAGzB0B,GAAG,EAAE9B,kBAAA,CAAUa;EAHU,CAAhB,CAZqB;EAiBhCkB,OAAO,EAAE/B,kBAAA,CAAUa,MAjBa;EAkBhCC,MAAM,EAAEd,kBAAA,CAAUa;AAlBc,CAA3B;;AAqBA,MAAMmB,sBAAsB,GAAG;EACpCC,MAAM,EAAEjC,kBAAA,CAAUkC,IADkB;EAEpCV,OAAO,EAAExB,kBAAA,CAAUG,OAAV,CACPH,kBAAA,CAAUU,KAAV,CAAgB;IACde,KAAK,EAAEzB,kBAAA,CAAUI;EADH,CAAhB,CADO,CAF2B;EAOpCc,KAAK,EAAElB,kBAAA,CAAUa;AAPmB,CAA/B;;AAUA,MAAMsB,iBAAiB,GAAG;EAC/BC,IAAI,EAAEpC,kBAAA,CAAUa,MADe;EAE/BJ,MAAM,EAAET,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUa,MAA5B;AAFuB,CAA1B,C,CAKP"}

package/lib/molecule/questions/template/index.d.ts

@@ -29,7 +29,7 @@ declare namespace Template {
             theme: PropTypes.Requireable<string>;
             'aria-label': PropTypes.Requireable<string>;
             groupAriaLabel: PropTypes.Requireable<string>;
-        }, "aria-label" | "theme" | "onChange" | "options" | "groupAriaLabel">>>) | null | undefined)[]>;
+        }, "aria-label" | "onChange" | "theme" | "options" | "groupAriaLabel">>>) | null | undefined)[]>;
         const groupAriaLabel: PropTypes.Requireable<string>;
     }
 }

package/lib/molecule/quick-access-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-access-card/index.js"],"names":[],"mappings":";AAiIA,wEAkEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-access-card/index.js"],"names":[],"mappings":";AAoIA,wEAkEC"}

package/lib/molecule/quick-access-card/index.js

@@ -11,10 +11,16 @@ var _novaIcons = require("@coorpacademy/nova-icons");
 
 var _link = _interopRequireDefault(require("../../atom/link"));
 
+var _colors = require("../../variables/colors");
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const {
+  cm_primary_blue
+} = _colors.COLORS;
+
 const getIcon = feature => {
   switch (feature) {
     case 'manage_users':
@@ -116,7 +122,7 @@ const getBackgroudRadialColors = feature => {
       return {
         iconBackgroundColor: '#F1F6FE',
         degrees: '0',
-        iconColor: '#0061FF'
+        iconColor: cm_primary_blue
       };
 
     case 'network':

package/lib/molecule/quick-access-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getIcon","feature","ManageUserIcon","UploadUserIcon","ManageEmailIcon","MassiveBattleIcon","CmsIcon","LookAndFeelIcon","DashboardIcon","CockpitIcon","AnalyticsIcon","Binoculaire","ContentBook","NetworkAlert","ChatBubbleCircleQuestionMark","MobilePhone","getBackgroudRadialColors","iconBackgroundColor","degrees","iconColor","QuickAccessCard","props","context","title","description","href","openInNewTab","isMoocCard","Icon","newTabOnClick","style","newTabIcon","quickAccess","link","background","content","iconFeatureWrapper","backgroundColor","iconFeature","color","cta","iconGotoWrapper","hoverMooc","hover","iconGoto","propTypes","PropTypes","string","bool","oneOf"],"sources":["../../../src/molecule/quick-access-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidContentContentBookAdd as CockpitIcon,\n  NovaSolidUsersActionsUser as ManageUserIcon,\n  NovaSolidFilesBasicFileUpload2 as UploadUserIcon,\n  NovaSolidEmailAtSign as ManageEmailIcon,\n  NovaSolidDesignPaintBrush2 as LookAndFeelIcon,\n  NovaSolidContentContentViewList as DashboardIcon,\n  NovaSolidContentEditionFlash as MassiveBattleIcon,\n  NovaSolidApplicationsWindowApplication5 as CmsIcon,\n  NovaSolidBusinessBusinessGraphLine2 as AnalyticsIcon,\n  NovaCompositionNavigationArrowRight as ActionIcon,\n  NovaCompositionCoorpacademyOpenInNewTab as NewTabIcon,\n  NovaLinePhoneMobilePhone as MobilePhone,\n  NovaLineMessagesChatChatBubbleCircleQuestionMark as ChatBubbleCircleQuestionMark,\n  NovaLineNetworkNetworkAlert as NetworkAlert,\n  NovaLineObjectsBinoculars as Binoculaire,\n  NovaLineContentEditionContentBook as ContentBook\n} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/link';\nimport style from './style.css';\n\nconst getIcon = feature => {\n  switch (feature) {\n    case 'manage_users':\n      return ManageUserIcon;\n    case 'upload_users':\n      return UploadUserIcon;\n    case 'manage_email':\n      return ManageEmailIcon;\n    case 'massive_battle':\n      return MassiveBattleIcon;\n    case 'cms':\n      return CmsIcon;\n    case 'look_and_feel':\n      return LookAndFeelIcon;\n    case 'dashboard':\n      return DashboardIcon;\n    case 'cockpit':\n      return CockpitIcon;\n    case 'analytics':\n      return AnalyticsIcon;\n    case 'binoculaire':\n      return Binoculaire;\n    case 'book':\n      return ContentBook;\n    case 'network':\n      return NetworkAlert;\n    case 'chat-bubble-question':\n      return ChatBubbleCircleQuestionMark;\n    case 'mobile-phone':\n      return MobilePhone;\n    default:\n      return CockpitIcon;\n  }\n};\n\nconst getBackgroudRadialColors = feature => {\n  switch (feature) {\n    case 'manage_users':\n    case 'upload_users':\n      return {\n        iconBackgroundColor: '#2EC1D6',\n        degrees: '187',\n        iconColor: null\n      };\n    case 'look_and_feel':\n    case 'dashboard':\n      return {\n        iconBackgroundColor: '#18BB98',\n        degrees: '167',\n        iconColor: null\n      };\n    case 'cockpit':\n      return {\n        iconBackgroundColor: '#FF7043',\n        degrees: '14',\n        iconColor: null\n      };\n    case 'manage_email':\n    case 'massive_battle':\n    case 'cms':\n      return {\n        iconBackgroundColor: '#7340FF',\n        degrees: '256',\n        iconColor: null\n      };\n    case 'analytics':\n      return {\n        iconBackgroundColor: '#FF4040',\n        degrees: '0',\n        iconColor: null\n      };\n    case 'binoculaire':\n      return {\n        iconBackgroundColor: '#FFEFEB',\n        iconColor: '#FF541F',\n        degrees: '0'\n      };\n    case 'book':\n      return {\n        iconBackgroundColor: '#F1F6FE',\n        degrees: '0',\n        iconColor: '#0061FF'\n      };\n    case 'network':\n      return {\n        iconBackgroundColor: '#FFE5E6',\n        iconColor: '#FF0A0A',\n        degrees: '0'\n      };\n    case 'chat-bubble-question':\n      return {\n        iconBackgroundColor: '#E8FCF8',\n        iconColor: '#16AC8C',\n        degrees: '0'\n      };\n    case 'mobile-phone':\n      return {\n        iconBackgroundColor: '#F4F0FF',\n        degrees: '0',\n        iconColor: '#5C21FF'\n      };\n    default:\n      return null;\n  }\n};\n\nconst QuickAccessCard = (props, context) => {\n  const {title, description, feature, href, openInNewTab = false, isMoocCard = false} = props;\n  const {iconBackgroundColor, degrees, iconColor} = getBackgroudRadialColors(feature);\n  const Icon = getIcon(feature);\n  const newTabOnClick = openInNewTab ? <NewTabIcon className={style.newTabIcon} /> : null;\n\n  return (\n    <div data-name=\"quick-access-card\" data-type={feature} className={style.quickAccess}>\n      <Link href={href} target={openInNewTab ? '_blank' : '_self'} className={style.link}>\n        <div\n          style={\n            !isMoocCard\n              ? {\n                  background: `radial-gradient(62.12% 56.45% at 0% 77.29%, \n            hsl(${degrees}deg 68% 40% / 20%) 0%, \n            hsl(${degrees}deg 68% 40% / 0%) 100%), \n          radial-gradient(113.85% 103.46% at 93.27% 7.88%,\n            hsl(${degrees}deg 67% 51% / 15%) 0%, \n            hsl(${degrees}deg 67% 51% / 0%) 100%),\n          radial-gradient(49.66% 49.63% at 78.65% 86.26%, \n            hsl(${degrees}deg 87% 91%) 0%, \n            hsl(${degrees}deg 87% 91% / 0%) 100%), \n          #FAFAFA`\n                }\n              : null\n          }\n          className={style.content}\n        >\n          <div\n            className={style.iconFeatureWrapper}\n            style={{\n              backgroundColor: iconBackgroundColor\n            }}\n          >\n            <Icon className={style.iconFeature} style={{color: iconColor}} />\n          </div>\n          <div className={style.title}>\n            {title}\n            {newTabOnClick}\n          </div>\n          <div className={style.description}>{description}</div>\n          <div className={style.cta}>\n            <div\n              className={!isMoocCard ? style.iconGotoWrapper : null}\n              style={\n                !isMoocCard\n                  ? {\n                      backgroundColor: iconBackgroundColor\n                    }\n                  : null\n              }\n            >\n              <div\n                className={isMoocCard ? style.hoverMooc : style.hover}\n                style={{\n                  color: isMoocCard ? '#FFFFFF' : iconBackgroundColor\n                }}\n              >\n                <ActionIcon className={style.iconGoto} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Link>\n    </div>\n  );\n};\n\nQuickAccessCard.propTypes = {\n  title: PropTypes.string,\n  description: PropTypes.string,\n  href: PropTypes.string,\n  openInNewTab: PropTypes.bool,\n  isMoocCard: PropTypes.bool,\n  feature: PropTypes.oneOf([\n    'analytics',\n    'cms',\n    'cockpit',\n    'massive_battle',\n    'manage_email',\n    'dashboard',\n    'look_and_feel',\n    'manage_users',\n    'upload_users',\n    'binoculaire',\n    'book',\n    'network',\n    'chat-bubble-question',\n    'mobile-phone'\n  ])\n};\n\nexport default QuickAccessCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["cm_primary_blue","COLORS","getIcon","feature","ManageUserIcon","UploadUserIcon","ManageEmailIcon","MassiveBattleIcon","CmsIcon","LookAndFeelIcon","DashboardIcon","CockpitIcon","AnalyticsIcon","Binoculaire","ContentBook","NetworkAlert","ChatBubbleCircleQuestionMark","MobilePhone","getBackgroudRadialColors","iconBackgroundColor","degrees","iconColor","QuickAccessCard","props","context","title","description","href","openInNewTab","isMoocCard","Icon","newTabOnClick","style","newTabIcon","quickAccess","link","background","content","iconFeatureWrapper","backgroundColor","iconFeature","color","cta","iconGotoWrapper","hoverMooc","hover","iconGoto","propTypes","PropTypes","string","bool","oneOf"],"sources":["../../../src/molecule/quick-access-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidContentContentBookAdd as CockpitIcon,\n  NovaSolidUsersActionsUser as ManageUserIcon,\n  NovaSolidFilesBasicFileUpload2 as UploadUserIcon,\n  NovaSolidEmailAtSign as ManageEmailIcon,\n  NovaSolidDesignPaintBrush2 as LookAndFeelIcon,\n  NovaSolidContentContentViewList as DashboardIcon,\n  NovaSolidContentEditionFlash as MassiveBattleIcon,\n  NovaSolidApplicationsWindowApplication5 as CmsIcon,\n  NovaSolidBusinessBusinessGraphLine2 as AnalyticsIcon,\n  NovaCompositionNavigationArrowRight as ActionIcon,\n  NovaCompositionCoorpacademyOpenInNewTab as NewTabIcon,\n  NovaLinePhoneMobilePhone as MobilePhone,\n  NovaLineMessagesChatChatBubbleCircleQuestionMark as ChatBubbleCircleQuestionMark,\n  NovaLineNetworkNetworkAlert as NetworkAlert,\n  NovaLineObjectsBinoculars as Binoculaire,\n  NovaLineContentEditionContentBook as ContentBook\n} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/link';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst {cm_primary_blue} = COLORS;\n\nconst getIcon = feature => {\n  switch (feature) {\n    case 'manage_users':\n      return ManageUserIcon;\n    case 'upload_users':\n      return UploadUserIcon;\n    case 'manage_email':\n      return ManageEmailIcon;\n    case 'massive_battle':\n      return MassiveBattleIcon;\n    case 'cms':\n      return CmsIcon;\n    case 'look_and_feel':\n      return LookAndFeelIcon;\n    case 'dashboard':\n      return DashboardIcon;\n    case 'cockpit':\n      return CockpitIcon;\n    case 'analytics':\n      return AnalyticsIcon;\n    case 'binoculaire':\n      return Binoculaire;\n    case 'book':\n      return ContentBook;\n    case 'network':\n      return NetworkAlert;\n    case 'chat-bubble-question':\n      return ChatBubbleCircleQuestionMark;\n    case 'mobile-phone':\n      return MobilePhone;\n    default:\n      return CockpitIcon;\n  }\n};\n\nconst getBackgroudRadialColors = feature => {\n  switch (feature) {\n    case 'manage_users':\n    case 'upload_users':\n      return {\n        iconBackgroundColor: '#2EC1D6',\n        degrees: '187',\n        iconColor: null\n      };\n    case 'look_and_feel':\n    case 'dashboard':\n      return {\n        iconBackgroundColor: '#18BB98',\n        degrees: '167',\n        iconColor: null\n      };\n    case 'cockpit':\n      return {\n        iconBackgroundColor: '#FF7043',\n        degrees: '14',\n        iconColor: null\n      };\n    case 'manage_email':\n    case 'massive_battle':\n    case 'cms':\n      return {\n        iconBackgroundColor: '#7340FF',\n        degrees: '256',\n        iconColor: null\n      };\n    case 'analytics':\n      return {\n        iconBackgroundColor: '#FF4040',\n        degrees: '0',\n        iconColor: null\n      };\n    case 'binoculaire':\n      return {\n        iconBackgroundColor: '#FFEFEB',\n        iconColor: '#FF541F',\n        degrees: '0'\n      };\n    case 'book':\n      return {\n        iconBackgroundColor: '#F1F6FE',\n        degrees: '0',\n        iconColor: cm_primary_blue\n      };\n    case 'network':\n      return {\n        iconBackgroundColor: '#FFE5E6',\n        iconColor: '#FF0A0A',\n        degrees: '0'\n      };\n    case 'chat-bubble-question':\n      return {\n        iconBackgroundColor: '#E8FCF8',\n        iconColor: '#16AC8C',\n        degrees: '0'\n      };\n    case 'mobile-phone':\n      return {\n        iconBackgroundColor: '#F4F0FF',\n        degrees: '0',\n        iconColor: '#5C21FF'\n      };\n    default:\n      return null;\n  }\n};\n\nconst QuickAccessCard = (props, context) => {\n  const {title, description, feature, href, openInNewTab = false, isMoocCard = false} = props;\n  const {iconBackgroundColor, degrees, iconColor} = getBackgroudRadialColors(feature);\n  const Icon = getIcon(feature);\n  const newTabOnClick = openInNewTab ? <NewTabIcon className={style.newTabIcon} /> : null;\n\n  return (\n    <div data-name=\"quick-access-card\" data-type={feature} className={style.quickAccess}>\n      <Link href={href} target={openInNewTab ? '_blank' : '_self'} className={style.link}>\n        <div\n          style={\n            !isMoocCard\n              ? {\n                  background: `radial-gradient(62.12% 56.45% at 0% 77.29%, \n            hsl(${degrees}deg 68% 40% / 20%) 0%, \n            hsl(${degrees}deg 68% 40% / 0%) 100%), \n          radial-gradient(113.85% 103.46% at 93.27% 7.88%,\n            hsl(${degrees}deg 67% 51% / 15%) 0%, \n            hsl(${degrees}deg 67% 51% / 0%) 100%),\n          radial-gradient(49.66% 49.63% at 78.65% 86.26%, \n            hsl(${degrees}deg 87% 91%) 0%, \n            hsl(${degrees}deg 87% 91% / 0%) 100%), \n          #FAFAFA`\n                }\n              : null\n          }\n          className={style.content}\n        >\n          <div\n            className={style.iconFeatureWrapper}\n            style={{\n              backgroundColor: iconBackgroundColor\n            }}\n          >\n            <Icon className={style.iconFeature} style={{color: iconColor}} />\n          </div>\n          <div className={style.title}>\n            {title}\n            {newTabOnClick}\n          </div>\n          <div className={style.description}>{description}</div>\n          <div className={style.cta}>\n            <div\n              className={!isMoocCard ? style.iconGotoWrapper : null}\n              style={\n                !isMoocCard\n                  ? {\n                      backgroundColor: iconBackgroundColor\n                    }\n                  : null\n              }\n            >\n              <div\n                className={isMoocCard ? style.hoverMooc : style.hover}\n                style={{\n                  color: isMoocCard ? '#FFFFFF' : iconBackgroundColor\n                }}\n              >\n                <ActionIcon className={style.iconGoto} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Link>\n    </div>\n  );\n};\n\nQuickAccessCard.propTypes = {\n  title: PropTypes.string,\n  description: PropTypes.string,\n  href: PropTypes.string,\n  openInNewTab: PropTypes.bool,\n  isMoocCard: PropTypes.bool,\n  feature: PropTypes.oneOf([\n    'analytics',\n    'cms',\n    'cockpit',\n    'massive_battle',\n    'manage_email',\n    'dashboard',\n    'look_and_feel',\n    'manage_users',\n    'upload_users',\n    'binoculaire',\n    'book',\n    'network',\n    'chat-bubble-question',\n    'mobile-phone'\n  ])\n};\n\nexport default QuickAccessCard;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAkBA;;AACA;;AACA;;;;AAEA,MAAM;EAACA;AAAD,IAAoBC,cAA1B;;AAEA,MAAMC,OAAO,GAAGC,OAAO,IAAI;EACzB,QAAQA,OAAR;IACE,KAAK,cAAL;MACE,OAAOC,oCAAP;;IACF,KAAK,cAAL;MACE,OAAOC,yCAAP;;IACF,KAAK,cAAL;MACE,OAAOC,+BAAP;;IACF,KAAK,gBAAL;MACE,OAAOC,uCAAP;;IACF,KAAK,KAAL;MACE,OAAOC,kDAAP;;IACF,KAAK,eAAL;MACE,OAAOC,qCAAP;;IACF,KAAK,WAAL;MACE,OAAOC,0CAAP;;IACF,KAAK,SAAL;MACE,OAAOC,yCAAP;;IACF,KAAK,WAAL;MACE,OAAOC,8CAAP;;IACF,KAAK,aAAL;MACE,OAAOC,oCAAP;;IACF,KAAK,MAAL;MACE,OAAOC,4CAAP;;IACF,KAAK,SAAL;MACE,OAAOC,sCAAP;;IACF,KAAK,sBAAL;MACE,OAAOC,2DAAP;;IACF,KAAK,cAAL;MACE,OAAOC,mCAAP;;IACF;MACE,OAAON,yCAAP;EA9BJ;AAgCD,CAjCD;;AAmCA,MAAMO,wBAAwB,GAAGf,OAAO,IAAI;EAC1C,QAAQA,OAAR;IACE,KAAK,cAAL;IACA,KAAK,cAAL;MACE,OAAO;QACLgB,mBAAmB,EAAE,SADhB;QAELC,OAAO,EAAE,KAFJ;QAGLC,SAAS,EAAE;MAHN,CAAP;;IAKF,KAAK,eAAL;IACA,KAAK,WAAL;MACE,OAAO;QACLF,mBAAmB,EAAE,SADhB;QAELC,OAAO,EAAE,KAFJ;QAGLC,SAAS,EAAE;MAHN,CAAP;;IAKF,KAAK,SAAL;MACE,OAAO;QACLF,mBAAmB,EAAE,SADhB;QAELC,OAAO,EAAE,IAFJ;QAGLC,SAAS,EAAE;MAHN,CAAP;;IAKF,KAAK,cAAL;IACA,KAAK,gBAAL;IACA,KAAK,KAAL;MACE,OAAO;QACLF,mBAAmB,EAAE,SADhB;QAELC,OAAO,EAAE,KAFJ;QAGLC,SAAS,EAAE;MAHN,CAAP;;IAKF,KAAK,WAAL;MACE,OAAO;QACLF,mBAAmB,EAAE,SADhB;QAELC,OAAO,EAAE,GAFJ;QAGLC,SAAS,EAAE;MAHN,CAAP;;IAKF,KAAK,aAAL;MACE,OAAO;QACLF,mBAAmB,EAAE,SADhB;QAELE,SAAS,EAAE,SAFN;QAGLD,OAAO,EAAE;MAHJ,CAAP;;IAKF,KAAK,MAAL;MACE,OAAO;QACLD,mBAAmB,EAAE,SADhB;QAELC,OAAO,EAAE,GAFJ;QAGLC,SAAS,EAAErB;MAHN,CAAP;;IAKF,KAAK,SAAL;MACE,OAAO;QACLmB,mBAAmB,EAAE,SADhB;QAELE,SAAS,EAAE,SAFN;QAGLD,OAAO,EAAE;MAHJ,CAAP;;IAKF,KAAK,sBAAL;MACE,OAAO;QACLD,mBAAmB,EAAE,SADhB;QAELE,SAAS,EAAE,SAFN;QAGLD,OAAO,EAAE;MAHJ,CAAP;;IAKF,KAAK,cAAL;MACE,OAAO;QACLD,mBAAmB,EAAE,SADhB;QAELC,OAAO,EAAE,GAFJ;QAGLC,SAAS,EAAE;MAHN,CAAP;;IAKF;MACE,OAAO,IAAP;EAlEJ;AAoED,CArED;;AAuEA,MAAMC,eAAe,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC1C,MAAM;IAACC,KAAD;IAAQC,WAAR;IAAqBvB,OAArB;IAA8BwB,IAA9B;IAAoCC,YAAY,GAAG,KAAnD;IAA0DC,UAAU,GAAG;EAAvE,IAAgFN,KAAtF;EACA,MAAM;IAACJ,mBAAD;IAAsBC,OAAtB;IAA+BC;EAA/B,IAA4CH,wBAAwB,CAACf,OAAD,CAA1E;EACA,MAAM2B,IAAI,GAAG5B,OAAO,CAACC,OAAD,CAApB;EACA,MAAM4B,aAAa,GAAGH,YAAY,gBAAG,6BAAC,kDAAD;IAAY,SAAS,EAAEI,cAAA,CAAMC;EAA7B,EAAH,GAAiD,IAAnF;EAEA,oBACE;IAAK,aAAU,mBAAf;IAAmC,aAAW9B,OAA9C;IAAuD,SAAS,EAAE6B,cAAA,CAAME;EAAxE,gBACE,6BAAC,aAAD;IAAM,IAAI,EAAEP,IAAZ;IAAkB,MAAM,EAAEC,YAAY,GAAG,QAAH,GAAc,OAApD;IAA6D,SAAS,EAAEI,cAAA,CAAMG;EAA9E,gBACE;IACE,KAAK,EACH,CAACN,UAAD,GACI;MACEO,UAAU,EAAG;AAC/B,kBAAkBhB,OAAQ;AAC1B,kBAAkBA,OAAQ;AAC1B;AACA,kBAAkBA,OAAQ;AAC1B,kBAAkBA,OAAQ;AAC1B;AACA,kBAAkBA,OAAQ;AAC1B,kBAAkBA,OAAQ;AAC1B;IAVgB,CADJ,GAaI,IAfR;IAiBE,SAAS,EAAEY,cAAA,CAAMK;EAjBnB,gBAmBE;IACE,SAAS,EAAEL,cAAA,CAAMM,kBADnB;IAEE,KAAK,EAAE;MACLC,eAAe,EAAEpB;IADZ;EAFT,gBAME,6BAAC,IAAD;IAAM,SAAS,EAAEa,cAAA,CAAMQ,WAAvB;IAAoC,KAAK,EAAE;MAACC,KAAK,EAAEpB;IAAR;EAA3C,EANF,CAnBF,eA2BE;IAAK,SAAS,EAAEW,cAAA,CAAMP;EAAtB,GACGA,KADH,EAEGM,aAFH,CA3BF,eA+BE;IAAK,SAAS,EAAEC,cAAA,CAAMN;EAAtB,GAAoCA,WAApC,CA/BF,eAgCE;IAAK,SAAS,EAAEM,cAAA,CAAMU;EAAtB,gBACE;IACE,SAAS,EAAE,CAACb,UAAD,GAAcG,cAAA,CAAMW,eAApB,GAAsC,IADnD;IAEE,KAAK,EACH,CAACd,UAAD,GACI;MACEU,eAAe,EAAEpB;IADnB,CADJ,GAII;EAPR,gBAUE;IACE,SAAS,EAAEU,UAAU,GAAGG,cAAA,CAAMY,SAAT,GAAqBZ,cAAA,CAAMa,KADlD;IAEE,KAAK,EAAE;MACLJ,KAAK,EAAEZ,UAAU,GAAG,SAAH,GAAeV;IAD3B;EAFT,gBAME,6BAAC,8CAAD;IAAY,SAAS,EAAEa,cAAA,CAAMc;EAA7B,EANF,CAVF,CADF,CAhCF,CADF,CADF,CADF;AA4DD,CAlED;;AAoEAxB,eAAe,CAACyB,SAAhB,2CAA4B;EAC1BtB,KAAK,EAAEuB,kBAAA,CAAUC,MADS;EAE1BvB,WAAW,EAAEsB,kBAAA,CAAUC,MAFG;EAG1BtB,IAAI,EAAEqB,kBAAA,CAAUC,MAHU;EAI1BrB,YAAY,EAAEoB,kBAAA,CAAUE,IAJE;EAK1BrB,UAAU,EAAEmB,kBAAA,CAAUE,IALI;EAM1B/C,OAAO,EAAE6C,kBAAA,CAAUG,KAAV,CAAgB,CACvB,WADuB,EAEvB,KAFuB,EAGvB,SAHuB,EAIvB,gBAJuB,EAKvB,cALuB,EAMvB,WANuB,EAOvB,eAPuB,EAQvB,cARuB,EASvB,cATuB,EAUvB,aAVuB,EAWvB,MAXuB,EAYvB,SAZuB,EAavB,sBAbuB,EAcvB,cAduB,CAAhB;AANiB,CAA5B;eAwBe7B,e"}

package/lib/molecule/skill-picker-modal/index.d.ts

@@ -0,0 +1,23 @@
+export default SkillPickerModal;
+declare function SkillPickerModal(props: any, context: any): JSX.Element | null;
+declare namespace SkillPickerModal {
+    namespace contextTypes {
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const skills: PropTypes.Requireable<(string | null | undefined)[]>;
+        const selectedSkills: PropTypes.Requireable<(string | null | undefined)[]>;
+        const skillsLocales: PropTypes.Requireable<{
+            [x: string]: string | null | undefined;
+        }>;
+        const isOpen: PropTypes.Requireable<boolean>;
+        const isLoading: PropTypes.Requireable<boolean>;
+        const minSelectedSkills: PropTypes.Requireable<number>;
+        const maxSelectedSkills: PropTypes.Requireable<number>;
+        const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        const onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        const onClose: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

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

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