@coorpacademy/components 11.32.18 → 11.32.20-alpha.31

package/es/template/my-learning/style.css

@@ -3,6 +3,7 @@
 @value tablet from breakpoints;
 @value mobile from breakpoints;
 @value white from colors;
+@value cm_grey_50 from colors;
 @value cm_grey_100 from colors;
 @value cm_grey_500 from colors;
 
@@ -10,12 +11,11 @@
   background-color: white;
   min-height: 100%;
   width: 100%;
+  font-family: "Gilroy";
+  font-style: normal;
 }
 
 .container {
-  background-color: white;
-  font-family: "Gilroy";
-  font-style: normal;
   margin-top: 48px;
   margin-bottom: 48px;
   margin-left: auto;
@@ -28,10 +28,21 @@
   max-width: calc(1080px + 32px);
 }
 
+.cardsListContainer {
+  background-color: cm_grey_50;
+  padding: 48px 0;
+}
+
+/* to ecrase wrapper's style from CardsList component */
+.cardsListContainer > :first-child {
+  padding: 0;
+}
+
 .skillFocusContainer {
   border-radius: 16px;
   border: 1px solid cm_grey_100;
   overflow: hidden;
+  margin-top: 48px;
   margin-bottom: 40px;
 }
 
@@ -272,4 +283,8 @@
   .skillFocusContent {
     flex-direction: column;
   }
+
+  .cardsListContainer {
+    padding: 24px 16px;
+  }
 }

package/es/template/skill-detail/all-courses.css

@@ -6,6 +6,7 @@
 @value cm_grey_100 from colors;
 @value cm_grey_200 from colors;
 @value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
 
 .continueLearningWrapper {
   margin-top: 40px;
@@ -45,12 +46,16 @@
   display: flex;
   gap: 32px;
   align-items: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
 }
 
 .sortWrapper {
   display: flex;
   align-items: center;
   gap: 12px;
+  color: cm_grey_500;
 }
 
 .filterWrapper {
@@ -104,7 +109,7 @@
   text-decoration: underline;
 }
 
-@media (max-width: 799px) {
+@media (max-width: 940px) {
   .searchAndSortSection {
     flex-direction: column;
   }

package/es/template/skill-detail/continue-learning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";AAOA,gFAyBC"}
+{"version":3,"file":"continue-learning.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/continue-learning.js"],"names":[],"mappings":";AAQA,gFAyBC"}

package/es/template/skill-detail/continue-learning.js

@@ -1,3 +1,5 @@
+import _sortBy from "lodash/fp/sortBy";
+import _getOr from "lodash/fp/getOr";
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Provider from '../../atom/provider';
@@ -23,7 +25,7 @@ const ContinueLearning = (props, context) => {
   }
 
   return /*#__PURE__*/React.createElement(CardsList, {
-    cards: ongoingCourses.list,
+    cards: _sortBy(course => -_getOr(0, ['progress'], course), ongoingCourses.list),
     title: /*#__PURE__*/React.createElement(Title, null),
     customStyle: {
       padding: '16px 0px 8px'

package/es/template/skill-detail/continue-learning.js.map

@@ -1 +1 @@
-{"version":3,"file":"continue-learning.js","names":["React","useCallback","PropTypes","Provider","CardsGrid","CardsList","style","ContinueLearning","props","context","ongoingCourses","translate","Title","continueLearningTitle","continueLearningNumber","list","length","padding","contextTypes","skin","childContextTypes","propTypes","shape"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n  const {ongoingCourses} = props;\n  const {translate} = context;\n\n  const Title = useCallback(\n    () => (\n      <>\n        <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n        <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n      </>\n    ),\n    [ongoingCourses, translate]\n  );\n\n  if (ongoingCourses.list.length === 0) {\n    return null;\n  }\n\n  return (\n    <CardsList\n      cards={ongoingCourses.list}\n      title={<Title />}\n      customStyle={{padding: '16px 0px 8px'}}\n    />\n  );\n};\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,SAAP,MAAsB,qCAAtB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;EAEA,MAAMG,KAAK,GAAGX,WAAW,CACvB,mBACE,uDACE;IAAM,SAAS,EAAEK,KAAK,CAACO;EAAvB,GAA+CF,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEL,KAAK,CAACQ;EAAvB,GAAgDJ,cAAc,CAACK,IAAf,CAAoBC,MAApE,CAFF,CAFqB,EAOvB,CAACN,cAAD,EAAiBC,SAAjB,CAPuB,CAAzB;;EAUA,IAAID,cAAc,CAACK,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,oBACE,oBAAC,SAAD;IACE,KAAK,EAAEN,cAAc,CAACK,IADxB;IAEE,KAAK,eAAE,oBAAC,KAAD,OAFT;IAGE,WAAW,EAAE;MAACE,OAAO,EAAE;IAAV;EAHf,EADF;AAOD,CAzBD;;AA2BAV,gBAAgB,CAACW,YAAjB,GAAgC;EAC9BC,IAAI,EAAEhB,QAAQ,CAACiB,iBAAT,CAA2BD,IADH;EAE9BR,SAAS,EAAER,QAAQ,CAACiB,iBAAT,CAA2BT;AAFR,CAAhC;AAKAJ,gBAAgB,CAACc,SAAjB,2CAA6B;EAC3BX,cAAc,EAAER,SAAS,CAACoB,KAAV,CAAgBlB,SAAS,CAACiB,SAA1B;AADW,CAA7B;AAIA,eAAed,gBAAf"}
+{"version":3,"file":"continue-learning.js","names":["React","useCallback","PropTypes","Provider","CardsGrid","CardsList","style","ContinueLearning","props","context","ongoingCourses","translate","Title","continueLearningTitle","continueLearningNumber","list","length","course","padding","contextTypes","skin","childContextTypes","propTypes","shape"],"sources":["../../../src/template/skill-detail/continue-learning.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, sortBy} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport CardsGrid from '../../organism/cards-grid';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport style from './continue-learning.css';\n\nconst ContinueLearning = (props, context) => {\n  const {ongoingCourses} = props;\n  const {translate} = context;\n\n  const Title = useCallback(\n    () => (\n      <>\n        <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n        <span className={style.continueLearningNumber}>{ongoingCourses.list.length}</span>\n      </>\n    ),\n    [ongoingCourses, translate]\n  );\n\n  if (ongoingCourses.list.length === 0) {\n    return null;\n  }\n\n  return (\n    <CardsList\n      cards={sortBy(course => -getOr(0, ['progress'], course), ongoingCourses.list)}\n      title={<Title />}\n      customStyle={{padding: '16px 0px 8px'}}\n    />\n  );\n};\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes)\n};\n\nexport default ContinueLearning;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,SAAP,MAAsB,qCAAtB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IAACC;EAAD,IAAmBF,KAAzB;EACA,MAAM;IAACG;EAAD,IAAcF,OAApB;EAEA,MAAMG,KAAK,GAAGX,WAAW,CACvB,mBACE,uDACE;IAAM,SAAS,EAAEK,KAAK,CAACO;EAAvB,GAA+CF,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAEL,KAAK,CAACQ;EAAvB,GAAgDJ,cAAc,CAACK,IAAf,CAAoBC,MAApE,CAFF,CAFqB,EAOvB,CAACN,cAAD,EAAiBC,SAAjB,CAPuB,CAAzB;;EAUA,IAAID,cAAc,CAACK,IAAf,CAAoBC,MAApB,KAA+B,CAAnC,EAAsC;IACpC,OAAO,IAAP;EACD;;EAED,oBACE,oBAAC,SAAD;IACE,KAAK,EAAE,QAAOC,MAAM,IAAI,CAAC,OAAM,CAAN,EAAS,CAAC,UAAD,CAAT,EAAuBA,MAAvB,CAAlB,EAAkDP,cAAc,CAACK,IAAjE,CADT;IAEE,KAAK,eAAE,oBAAC,KAAD,OAFT;IAGE,WAAW,EAAE;MAACG,OAAO,EAAE;IAAV;EAHf,EADF;AAOD,CAzBD;;AA2BAX,gBAAgB,CAACY,YAAjB,GAAgC;EAC9BC,IAAI,EAAEjB,QAAQ,CAACkB,iBAAT,CAA2BD,IADH;EAE9BT,SAAS,EAAER,QAAQ,CAACkB,iBAAT,CAA2BV;AAFR,CAAhC;AAKAJ,gBAAgB,CAACe,SAAjB,2CAA6B;EAC3BZ,cAAc,EAAER,SAAS,CAACqB,KAAV,CAAgBnB,SAAS,CAACkB,SAA1B;AADW,CAA7B;AAIA,eAAef,gBAAf"}

package/es/template/skill-detail/index.js

@@ -186,7 +186,7 @@ const SkillDetail = (props, context) => {
     "data-name": "completed-percentage"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.progressInformationNumber
-  }, score, "%"))))) : null, /*#__PURE__*/React.createElement(ContinueLearning, {
+  }, score.toFixed(1), "%"))))) : null, /*#__PURE__*/React.createElement(ContinueLearning, {
     ongoingCourses: ongoingCourses
   }), /*#__PURE__*/React.createElement(AllCourses, {
     skillIncludedCourses: skillIncludedCourses,

package/es/template/skill-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","Select","SelectOptionPropTypes","ButtonLink","Icon","CardsGrid","style","AllCourses","ContinueLearning","ContinueLearningButton","props","context","hovered","setHovered","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","totalCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","length","showMoreWrapper","ctaWrapper","list","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\nimport ContinueLearning from './continue-learning';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: hovered\n            ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n            : primarySkinColor\n        }}\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\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                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={!!ongoingCourses.list.length}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {score !== undefined ? (\n          <div className={style.progressInformationsWrapper}>\n            <div className={style.progressTitle}>{translate('your_progress')}</div>\n            <div className={style.skillCoursesAndQuestionsWrapper}>\n              {content ? (\n                <div className={style.skillInformation} data-name=\"skill-courses\">\n                  <span className={style.skillInformationNumber}>{content}</span>{' '}\n                  {translate('courses')}\n                </div>\n              ) : null}\n              {questionsToReview ? (\n                <div className={style.skillInformation} data-name=\"skill-questions\">\n                  <span className={style.skillInformationNumber}>{questionsToReview}</span>\n                  &nbsp;{translate('questions')}\n                </div>\n              ) : null}\n            </div>\n            <ProgressBar />\n            <div className={style.progressInformations}>\n              {content && (\n                <>\n                  <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n                    <span className={style.progressInformationNumber}>{contentCompleted}</span>\n                    {` ${translate('courses_completed')}`}\n                  </div>\n                  <div className={style.progressInformation} data-name=\"completed-percentage\">\n                    <span className={style.progressInformationNumber}>{score}%</span>\n                  </div>\n                </>\n              )}\n            </div>\n          </div>\n        ) : null}\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          skillIncludedCourses={skillIncludedCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","Select","SelectOptionPropTypes","ButtonLink","Icon","CardsGrid","style","AllCourses","ContinueLearning","ContinueLearningButton","props","context","hovered","setHovered","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","totalCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","length","showMoreWrapper","ctaWrapper","list","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\nimport ContinueLearning from './continue-learning';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: hovered\n            ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n            : primarySkinColor\n        }}\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\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                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={!!ongoingCourses.list.length}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {score !== undefined ? (\n          <div className={style.progressInformationsWrapper}>\n            <div className={style.progressTitle}>{translate('your_progress')}</div>\n            <div className={style.skillCoursesAndQuestionsWrapper}>\n              {content ? (\n                <div className={style.skillInformation} data-name=\"skill-courses\">\n                  <span className={style.skillInformationNumber}>{content}</span>{' '}\n                  {translate('courses')}\n                </div>\n              ) : null}\n              {questionsToReview ? (\n                <div className={style.skillInformation} data-name=\"skill-questions\">\n                  <span className={style.skillInformationNumber}>{questionsToReview}</span>\n                  &nbsp;{translate('questions')}\n                </div>\n              ) : null}\n            </div>\n            <ProgressBar />\n            <div className={style.progressInformations}>\n              {content && (\n                <>\n                  <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n                    <span className={style.progressInformationNumber}>{contentCompleted}</span>\n                    {` ${translate('courses_completed')}`}\n                  </div>\n                  <div className={style.progressInformation} data-name=\"completed-percentage\">\n                    <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n                  </div>\n                </>\n              )}\n            </div>\n          </div>\n        ) : null}\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          skillIncludedCourses={skillIncludedCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}

package/lib/atom/circular-progress-bar/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { LearningPriorityCardPropTypes } from './types';
+declare const CircularProgressBar: {
+    ({ label, progression, size, strokeWidth, "aria-label": ariaLabel, "data-name": dataName }: LearningPriorityCardPropTypes): JSX.Element;
+    propTypes: {
+        label: import("prop-types").Requireable<string>;
+        progression: import("prop-types").Validator<number>;
+        size: import("prop-types").Requireable<number>;
+        strokeWidth: import("prop-types").Requireable<number>;
+        'aria-label': import("prop-types").Requireable<string>;
+        'data-name': import("prop-types").Requireable<string>;
+    };
+};
+export default CircularProgressBar;
+//# sourceMappingURL=index.d.ts.map

package/lib/atom/circular-progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,6BAA6B,EAA+B,MAAM,SAAS,CAAC;AAmBpF,QAAA,MAAM,mBAAmB;gGAOtB,6BAA6B;;;;;;;;;CAgD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}

package/lib/atom/circular-progress-bar/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _isNull2 = _interopRequireDefault(require("lodash/fp/isNull"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _types = require("./types");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ProgressionGradient = () => /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  id: "gradient-stroke-progression",
+  x1: "81",
+  y1: "0",
+  x2: "81",
+  y2: "162",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/_react.default.createElement("stop", {
+  stopColor: "#35CC7F"
+}), /*#__PURE__*/_react.default.createElement("stop", {
+  offset: "1",
+  stopColor: "#55F2A7"
+})));
+
+const CircularProgressBar = ({
+  label,
+  progression,
+  size,
+  strokeWidth,
+  'aria-label': ariaLabel,
+  'data-name': dataName
+}) => {
+  const [offset, setOffset] = (0, _react.useState)(null);
+  const {
+    center,
+    radius,
+    length
+  } = (0, _react.useMemo)(() => {
+    const center_ = size / 2;
+    const radius_ = center_ - strokeWidth;
+    const length_ = Math.ceil(2 * Math.PI * radius_);
+    return {
+      center: center_,
+      radius: radius_,
+      length: length_
+    };
+  }, [size, strokeWidth]);
+  (0, _react.useEffect)(() => setOffset(Math.ceil(length * ((100 - progression) / 100))), [length, progression]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container,
+    "aria-label": ariaLabel,
+    "data-name": dataName
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    className: _style.default.svg,
+    width: size,
+    height: size
+  }, /*#__PURE__*/_react.default.createElement(ProgressionGradient, null), /*#__PURE__*/_react.default.createElement("circle", {
+    className: _style.default.mainCircle,
+    cx: center,
+    cy: center,
+    r: radius,
+    strokeWidth: 3,
+    fill: "transparent"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: center,
+    cy: center,
+    r: radius - 10 / radius * 100,
+    fill: "#fafafa"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    className: _style.default.progressionCircle,
+    cx: center,
+    cy: center,
+    r: radius,
+    stroke: `url(#gradient-stroke-progression)`,
+    strokeWidth: strokeWidth,
+    strokeDasharray: length,
+    strokeDashoffset: (0, _isNull2.default)(offset) ? length : offset,
+    fill: "transparent",
+    strokeLinecap: "round"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.infos
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.progression
+  }, progression, "%"), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.label
+  }, label)));
+};
+
+CircularProgressBar.propTypes = process.env.NODE_ENV !== "production" ? _types.CircularProgressBarPropTypes : {};
+var _default = CircularProgressBar;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/atom/circular-progress-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","useState","center","radius","length","useMemo","center_","radius_","length_","Math","ceil","PI","useEffect","style","container","svg","mainCircle","progressionCircle","infos","propTypes","CircularProgressBarPropTypes"],"sources":["../../../src/atom/circular-progress-bar/index.tsx"],"sourcesContent":["import React, {useMemo, useState, useEffect} from 'react';\nimport {isNull} from 'lodash/fp';\nimport {LearningPriorityCardPropTypes, CircularProgressBarPropTypes} from './types';\nimport style from './style.css';\n\nconst ProgressionGradient = () => (\n  <defs>\n    <linearGradient\n      id=\"gradient-stroke-progression\"\n      x1=\"81\"\n      y1=\"0\"\n      x2=\"81\"\n      y2=\"162\"\n      gradientUnits=\"userSpaceOnUse\"\n    >\n      <stop stopColor=\"#35CC7F\" />\n      <stop offset=\"1\" stopColor=\"#55F2A7\" />\n    </linearGradient>\n  </defs>\n);\n\nconst CircularProgressBar = ({\n  label,\n  progression,\n  size,\n  strokeWidth,\n  'aria-label': ariaLabel,\n  'data-name': dataName\n}: LearningPriorityCardPropTypes) => {\n  const [offset, setOffset] = useState<null | number>(null);\n\n  const {center, radius, length} = useMemo(() => {\n    const center_ = size / 2;\n    const radius_ = center_ - strokeWidth;\n    const length_ = Math.ceil(2 * Math.PI * radius_);\n\n    return {center: center_, radius: radius_, length: length_};\n  }, [size, strokeWidth]);\n\n  useEffect(\n    () => setOffset(Math.ceil(length * ((100 - progression) / 100))),\n    [length, progression]\n  );\n\n  return (\n    <div className={style.container} aria-label={ariaLabel} data-name={dataName}>\n      <svg className={style.svg} width={size} height={size}>\n        <ProgressionGradient />\n        <circle\n          className={style.mainCircle}\n          cx={center}\n          cy={center}\n          r={radius}\n          strokeWidth={3}\n          fill=\"transparent\"\n        />\n        <circle cx={center} cy={center} r={radius - (10 / radius) * 100} fill=\"#fafafa\" />\n        <circle\n          className={style.progressionCircle}\n          cx={center}\n          cy={center}\n          r={radius}\n          stroke={`url(#gradient-stroke-progression)`}\n          strokeWidth={strokeWidth}\n          strokeDasharray={length}\n          strokeDashoffset={isNull(offset) ? length : offset}\n          fill=\"transparent\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      <div className={style.infos}>\n        <span className={style.progression}>{progression}%</span>\n        <span className={style.label}>{label}</span>\n      </div>\n    </div>\n  );\n};\n\nCircularProgressBar.propTypes = CircularProgressBarPropTypes;\n\nexport default CircularProgressBar;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,mBAAmB,GAAG,mBAC1B,wDACE;EACE,EAAE,EAAC,6BADL;EAEE,EAAE,EAAC,IAFL;EAGE,EAAE,EAAC,GAHL;EAIE,EAAE,EAAC,IAJL;EAKE,EAAE,EAAC,KALL;EAME,aAAa,EAAC;AANhB,gBAQE;EAAM,SAAS,EAAC;AAAhB,EARF,eASE;EAAM,MAAM,EAAC,GAAb;EAAiB,SAAS,EAAC;AAA3B,EATF,CADF,CADF;;AAgBA,MAAMC,mBAAmB,GAAG,CAAC;EAC3BC,KAD2B;EAE3BC,WAF2B;EAG3BC,IAH2B;EAI3BC,WAJ2B;EAK3B,cAAcC,SALa;EAM3B,aAAaC;AANc,CAAD,KAOS;EACnC,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAwB,IAAxB,CAA5B;EAEA,MAAM;IAACC,MAAD;IAASC,MAAT;IAAiBC;EAAjB,IAA2B,IAAAC,cAAA,EAAQ,MAAM;IAC7C,MAAMC,OAAO,GAAGX,IAAI,GAAG,CAAvB;IACA,MAAMY,OAAO,GAAGD,OAAO,GAAGV,WAA1B;IACA,MAAMY,OAAO,GAAGC,IAAI,CAACC,IAAL,CAAU,IAAID,IAAI,CAACE,EAAT,GAAcJ,OAAxB,CAAhB;IAEA,OAAO;MAACL,MAAM,EAAEI,OAAT;MAAkBH,MAAM,EAAEI,OAA1B;MAAmCH,MAAM,EAAEI;IAA3C,CAAP;EACD,CANgC,EAM9B,CAACb,IAAD,EAAOC,WAAP,CAN8B,CAAjC;EAQA,IAAAgB,gBAAA,EACE,MAAMZ,SAAS,CAACS,IAAI,CAACC,IAAL,CAAUN,MAAM,IAAI,CAAC,MAAMV,WAAP,IAAsB,GAA1B,CAAhB,CAAD,CADjB,EAEE,CAACU,MAAD,EAASV,WAAT,CAFF;EAKA,oBACE;IAAK,SAAS,EAAEmB,cAAA,CAAMC,SAAtB;IAAiC,cAAYjB,SAA7C;IAAwD,aAAWC;EAAnE,gBACE;IAAK,SAAS,EAAEe,cAAA,CAAME,GAAtB;IAA2B,KAAK,EAAEpB,IAAlC;IAAwC,MAAM,EAAEA;EAAhD,gBACE,6BAAC,mBAAD,OADF,eAEE;IACE,SAAS,EAAEkB,cAAA,CAAMG,UADnB;IAEE,EAAE,EAAEd,MAFN;IAGE,EAAE,EAAEA,MAHN;IAIE,CAAC,EAAEC,MAJL;IAKE,WAAW,EAAE,CALf;IAME,IAAI,EAAC;EANP,EAFF,eAUE;IAAQ,EAAE,EAAED,MAAZ;IAAoB,EAAE,EAAEA,MAAxB;IAAgC,CAAC,EAAEC,MAAM,GAAI,KAAKA,MAAN,GAAgB,GAA5D;IAAiE,IAAI,EAAC;EAAtE,EAVF,eAWE;IACE,SAAS,EAAEU,cAAA,CAAMI,iBADnB;IAEE,EAAE,EAAEf,MAFN;IAGE,EAAE,EAAEA,MAHN;IAIE,CAAC,EAAEC,MAJL;IAKE,MAAM,EAAG,mCALX;IAME,WAAW,EAAEP,WANf;IAOE,eAAe,EAAEQ,MAPnB;IAQE,gBAAgB,EAAE,sBAAOL,MAAP,IAAiBK,MAAjB,GAA0BL,MAR9C;IASE,IAAI,EAAC,aATP;IAUE,aAAa,EAAC;EAVhB,EAXF,CADF,eAyBE;IAAK,SAAS,EAAEc,cAAA,CAAMK;EAAtB,gBACE;IAAM,SAAS,EAAEL,cAAA,CAAMnB;EAAvB,GAAqCA,WAArC,MADF,eAEE;IAAM,SAAS,EAAEmB,cAAA,CAAMpB;EAAvB,GAA+BA,KAA/B,CAFF,CAzBF,CADF;AAgCD,CAvDD;;AAyDAD,mBAAmB,CAAC2B,SAApB,2CAAgCC,mCAAhC;eAEe5B,mB"}

package/lib/atom/circular-progress-bar/style.css

@@ -0,0 +1,51 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_400 from colors;
+@value cm_grey_50 from colors;
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.svg {
+  transform: rotate(-90deg);
+}
+
+.mainCircle {
+  stroke: cm_grey_50;
+}
+
+.progressionCircle {
+  transition: stroke-dashoffset 1.5s ease-in-out;
+}
+
+.infos {
+  font-family: Gilroy;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.label {
+  color: cm_grey_400;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 12px;
+}
+
+.progression {
+  color: #2caf6c;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+}

package/lib/atom/circular-progress-bar/types.d.ts

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+export declare type LearningPriorityCardPropTypes = {
+    label: string;
+    progression: number;
+    size: number;
+    strokeWidth: number;
+    'aria-label': string;
+    'data-name': string;
+};
+export declare const CircularProgressBarPropTypes: {
+    label: PropTypes.Requireable<string>;
+    progression: PropTypes.Validator<number>;
+    size: PropTypes.Requireable<number>;
+    strokeWidth: PropTypes.Requireable<number>;
+    'aria-label': PropTypes.Requireable<string>;
+    'data-name': PropTypes.Requireable<string>;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/atom/circular-progress-bar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,oBAAY,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,4BAA4B;;;;;;;CAOxC,CAAC"}

package/lib/atom/circular-progress-bar/types.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports.CircularProgressBarPropTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CircularProgressBarPropTypes = {
+  label: _propTypes.default.string,
+  progression: _propTypes.default.number.isRequired,
+  size: _propTypes.default.number,
+  strokeWidth: _propTypes.default.number,
+  'aria-label': _propTypes.default.string,
+  'data-name': _propTypes.default.string
+};
+exports.CircularProgressBarPropTypes = CircularProgressBarPropTypes;
+//# sourceMappingURL=types.js.map

package/lib/atom/circular-progress-bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["CircularProgressBarPropTypes","label","PropTypes","string","progression","number","isRequired","size","strokeWidth"],"sources":["../../../src/atom/circular-progress-bar/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nexport type LearningPriorityCardPropTypes = {\n  label: string;\n  progression: number;\n  size: number;\n  strokeWidth: number;\n  'aria-label': string;\n  'data-name': string;\n};\n\nexport const CircularProgressBarPropTypes = {\n  label: PropTypes.string,\n  progression: PropTypes.number.isRequired,\n  size: PropTypes.number,\n  strokeWidth: PropTypes.number,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string\n};\n"],"mappings":";;;;;AAAA;;;;AAWO,MAAMA,4BAA4B,GAAG;EAC1CC,KAAK,EAAEC,kBAAA,CAAUC,MADyB;EAE1CC,WAAW,EAAEF,kBAAA,CAAUG,MAAV,CAAiBC,UAFY;EAG1CC,IAAI,EAAEL,kBAAA,CAAUG,MAH0B;EAI1CG,WAAW,EAAEN,kBAAA,CAAUG,MAJmB;EAK1C,cAAcH,kBAAA,CAAUC,MALkB;EAM1C,aAAaD,kBAAA,CAAUC;AANmB,CAArC"}

package/lib/atom/radio-with-title/index.d.ts

@@ -10,6 +10,12 @@ declare const RadioWithTitle: {
             'data-name': import("prop-types").Requireable<string>;
             titleSize: import("prop-types").Requireable<string>;
             subtitleSize: import("prop-types").Requireable<string>;
+            icon: import("prop-types").Requireable<import("prop-types").InferProps<any>>;
+            tag: import("prop-types").Requireable<import("prop-types").InferProps<{
+                label: import("prop-types").Requireable<string>;
+                type: import("prop-types").Requireable<string>;
+                size: import("prop-types").Requireable<string>;
+            }>>;
         }>>>;
         name: import("prop-types").Requireable<string>;
         checked: import("prop-types").Requireable<boolean>;

package/lib/atom/radio-with-title/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAY,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAEvD,QAAA,MAAM,cAAc;YAAW,mBAAmB;;;;;;;;;;;;;;;;CAwBjD,CAAC;AAIF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAY,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAEvD,QAAA,MAAM,cAAc;YAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;CAwBjD,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/lib/atom/radio-with-title/types.d.ts

@@ -7,6 +7,12 @@ export declare const propTypes: {
         'data-name': PropTypes.Requireable<string>;
         titleSize: PropTypes.Requireable<string>;
         subtitleSize: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        tag: PropTypes.Requireable<PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            size: PropTypes.Requireable<string>;
+        }>>;
     }>>>;
     name: PropTypes.Requireable<string>;
     checked: PropTypes.Requireable<boolean>;

package/lib/atom/radio-with-title/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAOrB,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAOrB,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/lib/atom/tag/index.d.ts

@@ -1,9 +1,14 @@
 export default Tag;
-declare function Tag(props: any): JSX.Element;
+declare function Tag({ label, type, size }: {
+    label: any;
+    type?: string | undefined;
+    size?: string | undefined;
+}): JSX.Element;
 declare namespace Tag {
     namespace propTypes {
         const label: PropTypes.Requireable<string>;
         const type: PropTypes.Requireable<string>;
+        const size: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/lib/atom/tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tag/index.js"],"names":[],"mappings":";AAaA,8CAQC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tag/index.js"],"names":[],"mappings":";AAoBA;;;;gBAIC"}

package/lib/atom/tag/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,21 +22,25 @@ const TAG_STYLES = {
   warning: _style.default.warning,
   progress: _style.default.progress
 };
-
-const Tag = props => {
-  const {
-    label,
-    type = 'default'
-  } = props;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: TAG_STYLES[type],
-    "data-name": `content-tag-${label}`
-  }, label);
+const TAG_SIZE = {
+  S: _style.default.small,
+  M: _style.default.medium,
+  L: _style.default.large
 };
 
+const Tag = ({
+  label,
+  type = 'default',
+  size = 'M'
+}) => /*#__PURE__*/_react.default.createElement("span", {
+  className: (0, _classnames.default)(TAG_STYLES[type], TAG_SIZE[size]),
+  "data-name": `content-tag-${label}`
+}, label);
+
 Tag.propTypes = process.env.NODE_ENV !== "production" ? {
   label: _propTypes.default.string,
-  type: _propTypes.default.oneOf((0, _keys2.default)(TAG_STYLES))
+  type: _propTypes.default.oneOf((0, _keys2.default)(TAG_STYLES)),
+  size: _propTypes.default.oneOf(['S', 'M', 'L'])
 } : {};
 var _default = Tag;
 exports.default = _default;

package/lib/atom/tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TAG_STYLES","default","style","success","failure","warning","progress","Tag","props","label","type","propTypes","PropTypes","string","oneOf"],"sources":["../../../src/atom/tag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport style from './style.css';\n\nconst TAG_STYLES = {\n  default: style.default,\n  success: style.success,\n  failure: style.failure,\n  warning: style.warning,\n  progress: style.progress\n};\n\nconst Tag = props => {\n  const {label, type = 'default'} = props;\n\n  return (\n    <span className={TAG_STYLES[type]} data-name={`content-tag-${label}`}>\n      {label}\n    </span>\n  );\n};\n\nTag.propTypes = {\n  label: PropTypes.string,\n  type: PropTypes.oneOf(keys(TAG_STYLES))\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAEA,MAAMA,UAAU,GAAG;EACjBC,OAAO,EAAEC,cAAA,CAAMD,OADE;EAEjBE,OAAO,EAAED,cAAA,CAAMC,OAFE;EAGjBC,OAAO,EAAEF,cAAA,CAAME,OAHE;EAIjBC,OAAO,EAAEH,cAAA,CAAMG,OAJE;EAKjBC,QAAQ,EAAEJ,cAAA,CAAMI;AALC,CAAnB;;AAQA,MAAMC,GAAG,GAAGC,KAAK,IAAI;EACnB,MAAM;IAACC,KAAD;IAAQC,IAAI,GAAG;EAAf,IAA4BF,KAAlC;EAEA,oBACE;IAAM,SAAS,EAAER,UAAU,CAACU,IAAD,CAA3B;IAAmC,aAAY,eAAcD,KAAM;EAAnE,GACGA,KADH,CADF;AAKD,CARD;;AAUAF,GAAG,CAACI,SAAJ,2CAAgB;EACdF,KAAK,EAAEG,kBAAA,CAAUC,MADH;EAEdH,IAAI,EAAEE,kBAAA,CAAUE,KAAV,CAAgB,oBAAKd,UAAL,CAAhB;AAFQ,CAAhB;eAKeO,G"}
+{"version":3,"file":"index.js","names":["TAG_STYLES","default","style","success","failure","warning","progress","TAG_SIZE","S","small","M","medium","L","large","Tag","label","type","size","classnames","propTypes","PropTypes","string","oneOf"],"sources":["../../../src/atom/tag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport style from './style.css';\n\nconst TAG_STYLES = {\n  default: style.default,\n  success: style.success,\n  failure: style.failure,\n  warning: style.warning,\n  progress: style.progress\n};\n\nconst TAG_SIZE = {\n  S: style.small,\n  M: style.medium,\n  L: style.large\n};\n\nconst Tag = ({label, type = 'default', size = 'M'}) => (\n  <span className={classnames(TAG_STYLES[type], TAG_SIZE[size])} data-name={`content-tag-${label}`}>\n    {label}\n  </span>\n);\n\nTag.propTypes = {\n  label: PropTypes.string,\n  type: PropTypes.oneOf(keys(TAG_STYLES)),\n  size: PropTypes.oneOf(['S', 'M', 'L'])\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAEA,MAAMA,UAAU,GAAG;EACjBC,OAAO,EAAEC,cAAA,CAAMD,OADE;EAEjBE,OAAO,EAAED,cAAA,CAAMC,OAFE;EAGjBC,OAAO,EAAEF,cAAA,CAAME,OAHE;EAIjBC,OAAO,EAAEH,cAAA,CAAMG,OAJE;EAKjBC,QAAQ,EAAEJ,cAAA,CAAMI;AALC,CAAnB;AAQA,MAAMC,QAAQ,GAAG;EACfC,CAAC,EAAEN,cAAA,CAAMO,KADM;EAEfC,CAAC,EAAER,cAAA,CAAMS,MAFM;EAGfC,CAAC,EAAEV,cAAA,CAAMW;AAHM,CAAjB;;AAMA,MAAMC,GAAG,GAAG,CAAC;EAACC,KAAD;EAAQC,IAAI,GAAG,SAAf;EAA0BC,IAAI,GAAG;AAAjC,CAAD,kBACV;EAAM,SAAS,EAAE,IAAAC,mBAAA,EAAWlB,UAAU,CAACgB,IAAD,CAArB,EAA6BT,QAAQ,CAACU,IAAD,CAArC,CAAjB;EAA+D,aAAY,eAAcF,KAAM;AAA/F,GACGA,KADH,CADF;;AAMAD,GAAG,CAACK,SAAJ,2CAAgB;EACdJ,KAAK,EAAEK,kBAAA,CAAUC,MADH;EAEdL,IAAI,EAAEI,kBAAA,CAAUE,KAAV,CAAgB,oBAAKtB,UAAL,CAAhB,CAFQ;EAGdiB,IAAI,EAAEG,kBAAA,CAAUE,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,CAAhB;AAHQ,CAAhB;eAMeR,G"}