@coorpacademy/components 11.32.10 → 11.32.12

package/es/molecule/discipline-associated-skills/index.js

@@ -19,19 +19,19 @@ const DisciplineAssociatedSkills = (props, context) => {
   } = props;
   const AnchorElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
     className: style.chipFocusedContent
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, skill.focused ? /*#__PURE__*/React.createElement(Icon, {
     iconName: "bullseye-arrow",
     backgroundColor: "#DDD1FF",
     size: {
       faSize: 12,
       wrapperSize: 12
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: style.chipFocusedContentText
-  }, skill)), []);
+  }, skill.locale)), []);
   const TooltipContentElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
     className: style.tooltipContentWrapper
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('skill_focused_chip_tooltip'))), /*#__PURE__*/React.createElement("div", null, skill)), []);
+  }, skill.focused ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('skill_focused_chip_tooltip'))) : null, /*#__PURE__*/React.createElement("div", null, skill.locale)), []);
   return !_isEmpty(skills) ? /*#__PURE__*/React.createElement("div", {
     "data-name": "discipline-associated-skills",
     className: style.associatedSkillsWrapper
@@ -45,26 +45,26 @@ const DisciplineAssociatedSkills = (props, context) => {
     }
 
     function handleAnchorElement() {
-      return AnchorElement(skill.locale);
+      return AnchorElement(skill);
     }
 
     function handleTooltipContentElement() {
-      return TooltipContentElement(skill.locale);
+      return TooltipContentElement(skill);
     }
 
     return /*#__PURE__*/React.createElement("div", {
       key: _uniqueId(),
       className: classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused),
       onClick: handleSkillClick
-    }, skill.focused ? /*#__PURE__*/React.createElement(ToolTip, {
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       AnchorElement: handleAnchorElement,
       fontSize: 12,
       delayHide: 0,
       iconContainerClassName: style.infoIconTooltip,
-      tooltipClassName: style.tooltip,
+      tooltipClassName: skill.focused ? style.tooltipSkillFocused : style.tooltip,
       TooltipContent: handleTooltipContentElement,
       closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
-    }) : skill.locale);
+    }));
   })))) : null;
 };
 

package/es/molecule/discipline-associated-skills/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Icon","ToolTip","Provider","CatalogSection","style","DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","skill","chipFocusedContent","faSize","wrapperSize","chipFocusedContentText","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","locale","handleTooltipContentElement","chipWrapper","focused","chipWrapperFocused","infoIconTooltip","tooltip","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n  const {translate} = context;\n\n  const {skills = [], onSkillClick} = props;\n\n  const AnchorElement = useCallback(\n    skill => (\n      <div className={style.chipFocusedContent}>\n        <Icon\n          iconName=\"bullseye-arrow\"\n          backgroundColor=\"#DDD1FF\"\n          size={{\n            faSize: 12,\n            wrapperSize: 12\n          }}\n        />\n        <div className={style.chipFocusedContentText}>{skill}</div>\n      </div>\n    ),\n    []\n  );\n\n  const TooltipContentElement = useCallback(\n    skill => (\n      <div className={style.tooltipContentWrapper}>\n        <div>\n          <b>{translate('skill_focused_chip_tooltip')}</b>\n        </div>\n        <div>{skill}</div>\n      </div>\n    ),\n    []\n  );\n\n  return !isEmpty(skills) ? (\n    <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n      <CatalogSection title={translate('associated_skills')}>\n        <div className={style.chipsWrapper}>\n          {skills.map(skill => {\n            function handleSkillClick() {\n              return onSkillClick(skill.ref);\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill.locale);\n            }\n            function handleTooltipContentElement() {\n              return TooltipContentElement(skill.locale);\n            }\n            return (\n              <div\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                {skill.focused ? (\n                  <ToolTip\n                    AnchorElement={handleAnchorElement}\n                    fontSize={12}\n                    delayHide={0}\n                    iconContainerClassName={style.infoIconTooltip}\n                    tooltipClassName={style.tooltip}\n                    TooltipContent={handleTooltipContentElement}\n                    closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n                  />\n                ) : (\n                  skill.locale\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </CatalogSection>\n    </div>\n  ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n  skills: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      locale: PropTypes.string,\n      focused: PropTypes.bool\n    })\n  ),\n  onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Icon","ToolTip","Provider","CatalogSection","style","DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","skill","chipFocusedContent","focused","faSize","wrapperSize","chipFocusedContentText","locale","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","handleTooltipContentElement","chipWrapper","chipWrapperFocused","infoIconTooltip","tooltipSkillFocused","tooltip","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n  const {translate} = context;\n\n  const {skills = [], onSkillClick} = props;\n\n  const AnchorElement = useCallback(\n    skill => (\n      <div className={style.chipFocusedContent}>\n        {skill.focused ? (\n          <Icon\n            iconName=\"bullseye-arrow\"\n            backgroundColor=\"#DDD1FF\"\n            size={{\n              faSize: 12,\n              wrapperSize: 12\n            }}\n          />\n        ) : null}\n        <div className={style.chipFocusedContentText}>{skill.locale}</div>\n      </div>\n    ),\n    []\n  );\n\n  const TooltipContentElement = useCallback(\n    skill => (\n      <div className={style.tooltipContentWrapper}>\n        {skill.focused ? (\n          <div>\n            <b>{translate('skill_focused_chip_tooltip')}</b>\n          </div>\n        ) : null}\n        <div>{skill.locale}</div>\n      </div>\n    ),\n    []\n  );\n\n  return !isEmpty(skills) ? (\n    <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n      <CatalogSection title={translate('associated_skills')}>\n        <div className={style.chipsWrapper}>\n          {skills.map(skill => {\n            function handleSkillClick() {\n              return onSkillClick(skill.ref);\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill);\n            }\n            function handleTooltipContentElement() {\n              return TooltipContentElement(skill);\n            }\n            return (\n              <div\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                <ToolTip\n                  AnchorElement={handleAnchorElement}\n                  fontSize={12}\n                  delayHide={0}\n                  iconContainerClassName={style.infoIconTooltip}\n                  tooltipClassName={skill.focused ? style.tooltipSkillFocused : style.tooltip}\n                  TooltipContent={handleTooltipContentElement}\n                  closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </CatalogSection>\n    </div>\n  ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n  skills: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      locale: PropTypes.string,\n      focused: PropTypes.bool\n    })\n  ),\n  onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":"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"}

package/es/molecule/discipline-associated-skills/style.css

@@ -55,13 +55,14 @@
   background-color: transparent;
 }
 
-.tooltip {
+.tooltip,
+.tooltipSkillFocused {
   width: fit-content;
   color: #FFF;
   font-size: 12px;
   font-style: normal;
   line-height: 16px;
-  top: -64px;
+  top: -48px;
 
   p {
     padding: 8px 8px;
@@ -69,6 +70,10 @@
   }
 }
 
+.tooltipSkillFocused {
+  top: -64px;
+}
+
 .tooltipContentWrapper {
   padding: 8px 12px;
   text-align: left;

package/es/molecule/discipline-header/index.js

@@ -76,7 +76,7 @@ class DisciplineHeader extends React.Component {
     const {
       translate
     } = this.context;
-    const maxHeightCourseInfos = 215;
+    const maxHeightCourseInfos = 210;
     const hasMediaContent = image || video;
     const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');
     const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;

package/es/molecule/discipline-header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","get","getOr","classnames","NovaSolidSynchronizeSynchronize3","SyncIcon","VideoPlayer","Picture","style","Preview","image","video","mimeType","id","jwpOptions","propTypes","src","shape","DisciplineHeader","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n  const mimeType = get('mimeType', video);\n  const id = get('id', video);\n  const jwpOptions = get('jwpOptions', video);\n  if (id) {\n    return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n  } else if (jwpOptions) {\n    return <VideoPlayer {...video} />;\n  } else {\n    return <Picture className={style.image} src={image} />;\n  }\n};\n\nPreview.propTypes = {\n  image: Picture.propTypes.src,\n  video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    image: Preview.propTypes.image,\n    video: Preview.propTypes.video,\n    lastUpdated: PropTypes.string\n  };\n\n  static contextTypes = {\n    translate: PropTypes.func\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      fullDisplay: false,\n      scrollHeightShowMore: 0\n    };\n    this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  handleToggleDisplay() {\n    this.setState(prevState => ({\n      fullDisplay: !prevState.fullDisplay\n    }));\n  }\n\n  setHandle(el) {\n    this.setState({scrollHeightShowMore: getOr(0, 'scrollHeight', el)});\n  }\n\n  render() {\n    const {image, title, description, video, lastUpdated} = this.props;\n    const {fullDisplay, scrollHeightShowMore} = this.state;\n    const {translate} = this.context;\n    const maxHeightCourseInfos = 215;\n    const hasMediaContent = image || video;\n    const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n    const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;\n    const courseSeeMoreButtonStyle = shortCourseText ? style.showMoreHidden : style.showMore;\n\n    return (\n      <div data-name=\"disciplineHeader\" className={style.wrapper}>\n        {hasMediaContent ? (\n          <div className={style.imgWrapper}>\n            <Preview image={image} video={video} />\n          </div>\n        ) : null}\n        <div className={style.courseWrapper}>\n          <div\n            className={fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort}\n            ref={this.setHandle}\n          >\n            <div\n              data-name=\"title\"\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n            />\n          </div>\n          <div className={courseSeeMoreButtonStyle} onClick={this.handleToggleDisplay}>\n            {toggleLabel}\n          </div>\n          {lastUpdated ? (\n            <div\n              className={classnames(\n                style.lastUpdatedWrapper,\n                shortCourseText ? style.lastUpdatedWrapperShort : null\n              )}\n            >\n              <SyncIcon className={style.syncIcon} />\n              <div\n                className={classnames(style.lastUpdatedText, style.innerHTML)}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: lastUpdated}}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default DisciplineHeader;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","get","getOr","classnames","NovaSolidSynchronizeSynchronize3","SyncIcon","VideoPlayer","Picture","style","Preview","image","video","mimeType","id","jwpOptions","propTypes","src","shape","DisciplineHeader","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n  const mimeType = get('mimeType', video);\n  const id = get('id', video);\n  const jwpOptions = get('jwpOptions', video);\n  if (id) {\n    return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n  } else if (jwpOptions) {\n    return <VideoPlayer {...video} />;\n  } else {\n    return <Picture className={style.image} src={image} />;\n  }\n};\n\nPreview.propTypes = {\n  image: Picture.propTypes.src,\n  video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    image: Preview.propTypes.image,\n    video: Preview.propTypes.video,\n    lastUpdated: PropTypes.string\n  };\n\n  static contextTypes = {\n    translate: PropTypes.func\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      fullDisplay: false,\n      scrollHeightShowMore: 0\n    };\n    this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  handleToggleDisplay() {\n    this.setState(prevState => ({\n      fullDisplay: !prevState.fullDisplay\n    }));\n  }\n\n  setHandle(el) {\n    this.setState({scrollHeightShowMore: getOr(0, 'scrollHeight', el)});\n  }\n\n  render() {\n    const {image, title, description, video, lastUpdated} = this.props;\n    const {fullDisplay, scrollHeightShowMore} = this.state;\n    const {translate} = this.context;\n    const maxHeightCourseInfos = 210;\n    const hasMediaContent = image || video;\n    const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n    const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;\n    const courseSeeMoreButtonStyle = shortCourseText ? style.showMoreHidden : style.showMore;\n\n    return (\n      <div data-name=\"disciplineHeader\" className={style.wrapper}>\n        {hasMediaContent ? (\n          <div className={style.imgWrapper}>\n            <Preview image={image} video={video} />\n          </div>\n        ) : null}\n        <div className={style.courseWrapper}>\n          <div\n            className={fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort}\n            ref={this.setHandle}\n          >\n            <div\n              data-name=\"title\"\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n            />\n          </div>\n          <div className={courseSeeMoreButtonStyle} onClick={this.handleToggleDisplay}>\n            {toggleLabel}\n          </div>\n          {lastUpdated ? (\n            <div\n              className={classnames(\n                style.lastUpdatedWrapper,\n                shortCourseText ? style.lastUpdatedWrapperShort : null\n              )}\n            >\n              <SyncIcon className={style.syncIcon} />\n              <div\n                className={classnames(style.lastUpdatedText, style.innerHTML)}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: lastUpdated}}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default DisciplineHeader;\n"],"mappings":"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"}

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

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

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

@@ -43,7 +43,8 @@ const LearnerSkillCard = (props, context) => {
   const buttonReviewProps = {
     customStyle: {
       backgroundColor: '#FFF',
-      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      padding: '0px'
     },
     disabled: !review,
     onClick: onReviewClick,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","contentCompleted","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","contentCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","color","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} 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 {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = get('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 contentCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const ProgressBar = useCallback(() => {\n    if (!content) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\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  }, [score, ariaLabel, content]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {content || questionsToReview ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {content ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{content}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {questionsToReview ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{questionsToReview}</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        {content && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{contentCompleted}</span>\n              {` ${contentCompletedLocale}`}\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 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  skin: Provider.childContextTypes.skin,\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    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","contentCompleted","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","contentCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","color","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} 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 {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = get('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 contentCompletedLocale = 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      padding: '0px'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const ProgressBar = useCallback(() => {\n    if (!content) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\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  }, [score, ariaLabel, content]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {content || questionsToReview ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {content ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{content}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {questionsToReview ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{questionsToReview}</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        {content && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{contentCompleted}</span>\n              {` ${contentCompletedLocale}`}\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 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  skin: Provider.childContextTypes.skin,\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    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}

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

@@ -22,6 +22,7 @@
   display: flex;
   flex-direction: column;
   max-width: 258px;
+  min-width: 254px;
   width: 100%;
   min-height: 252px;
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04);

package/es/template/skill-detail/index.d.ts

@@ -0,0 +1,57 @@
+export default SkillDetail;
+declare function SkillDetail(props: any, context: any): JSX.Element;
+declare namespace SkillDetail {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const title: PropTypes.Validator<string>;
+        const description: PropTypes.Requireable<string>;
+        const metrics: PropTypes.Requireable<PropTypes.InferProps<{
+            score: PropTypes.Requireable<number>;
+            content: PropTypes.Requireable<number>;
+            questionsToReview: PropTypes.Requireable<number>;
+            contentCompleted: PropTypes.Requireable<number>;
+        }>>;
+        const focused: PropTypes.Requireable<boolean>;
+        const availableForReview: PropTypes.Requireable<boolean>;
+        const ongoingCourses: PropTypes.Requireable<(PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            provider: PropTypes.Requireable<string>;
+            progress: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+        const skillIncludedCourses: PropTypes.Requireable<(PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            provider: PropTypes.Requireable<string>;
+            progress: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+        const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onCourseClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/template/skill-detail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AAuDA,oEA6IC"}

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

@@ -0,0 +1,248 @@
+import _get from "lodash/fp/get";
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { convert } from 'css-color-function';
+import classnames from 'classnames';
+import Provider from '../../atom/provider';
+import ButtonLink from '../../atom/button-link';
+import Icon from '../../atom/icon';
+import style from './style.css';
+
+const ContinueLearningButton = (props, context) => {
+  const [hovered, setHovered] = useState(false);
+  const {
+    onClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+
+  const primarySkinColor = _get('common.primary', skin);
+
+  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    label: translate('continue_learning'),
+    type: "primary",
+    customStyle: {
+      width: 'fit-content',
+      borderRadius: '12px',
+      backgroundColor: hovered ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
+    },
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'play',
+        color: '#FFFFFF',
+        size: 16
+      }
+    },
+    onClick: onClick
+  }));
+};
+
+ContinueLearningButton.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: PropTypes.func
+} : {};
+
+const SkillDetail = (props, context) => {
+  const {
+    title,
+    description,
+    metrics,
+    focused,
+    availableForReview,
+    ongoingCourses,
+    skillIncludedCourses,
+    onBackClick,
+    onReviewClick,
+    onContinueLearningClick,
+    onCourseClick
+  } = props;
+  const {
+    score,
+    content,
+    questionsToReview,
+    contentCompleted = 0
+  } = metrics;
+  const {
+    skin,
+    translate
+  } = context;
+  const [showMore, setShowMore] = useState(false);
+  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  const Description = useCallback(() => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(style.description, !showMore && style.truncate)
+    }, description);
+  });
+  const ProgressBar = useCallback(() => {
+    if (score === undefined) return null;
+    const progressBarColor = '#3EC483';
+    const inlineProgressValueStyle = {
+      backgroundColor: progressBarColor,
+      width: `${score}%`
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.progressBarWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-name": "progress",
+      className: style.progress,
+      style: inlineProgressValueStyle,
+      role: "progressbar"
+    }));
+  }, [score]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.backgroundContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.backButtonWrapper,
+    onClick: onBackClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "arrow-left",
+    size: {
+      faSize: 14,
+      wrapperSize: 14
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.ctaContainer
+  }, focused ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillFocusBadge
+  }, /*#__PURE__*/React.createElement(Icon, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
+    size: {
+      faSize: 10,
+      wrapperSize: 16
+    }
+  }), translate('skill_focus')) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.ctaWrapper
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    type: "secondary",
+    onClick: onReviewClick,
+    label: translate('review_this_skill'),
+    disabled: !availableForReview,
+    customStyle: {
+      width: 'fit-content',
+      borderRadius: '12px'
+    }
+  }), /*#__PURE__*/React.createElement(ContinueLearningButton, {
+    onClick: onContinueLearningClick
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: style.title
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= 226 ? /*#__PURE__*/React.createElement("div", {
+    className: style.showMoreWrapper,
+    onClick: handleShowMore
+  }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/React.createElement(Icon, {
+    iconName: showMore ? "chevron-up" : "chevron-down",
+    size: {
+      faSize: 14,
+      wrapperSize: 16
+    }
+  })) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformationsWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.progressTitle
+  }, translate('your_progress')), /*#__PURE__*/React.createElement("div", {
+    className: style.skillCoursesAndQuestionsWrapper
+  }, content ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation,
+    "data-name": "skill-courses"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.skillInformationNumber
+  }, content), " ", translate('courses')) : null, questionsToReview ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillInformation,
+    "data-name": "skill-questions"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.skillInformationNumber
+  }, questionsToReview), "\xA0", translate('questions')) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformations
+  }, content && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformation,
+    "data-name": "skill-completed-courses"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.progressInformationNumber
+  }, contentCompleted), ` ${translate('courses_completed')}`), /*#__PURE__*/React.createElement("div", {
+    className: style.progressInformation,
+    "data-name": "completed-percentage"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.progressInformationNumber
+  }, score, "%"))))), /*#__PURE__*/React.createElement(ContinueLearning, {
+    ongoingCourses: ongoingCourses,
+    onCourseClick: onCourseClick
+  })));
+};
+
+SkillDetail.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  metrics: PropTypes.shape({
+    score: PropTypes.number,
+    content: PropTypes.number,
+    questionsToReview: PropTypes.number,
+    contentCompleted: PropTypes.number
+  }),
+  focused: PropTypes.bool,
+  availableForReview: PropTypes.bool,
+  ongoingCourses: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    provider: PropTypes.string,
+    progress: PropTypes.number
+  })),
+  skillIncludedCourses: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    type: PropTypes.string,
+    provider: PropTypes.string,
+    progress: PropTypes.number
+  })),
+  onBackClick: PropTypes.func,
+  onReviewClick: PropTypes.func,
+  onContinueLearningClick: PropTypes.func,
+  onCourseClick: PropTypes.func
+} : {};
+export default SkillDetail;
+
+const ContinueLearning = (props, context) => {
+  const {
+    ongoingCourses,
+    onCourseClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.continueLearningWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.continueLearningTitle
+  }, translate('continue_learning')), /*#__PURE__*/React.createElement("span", {
+    className: style.continueLearningNumber
+  }, ongoingCourses.length));
+};
+
+ContinueLearning.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
+ContinueLearning.propTypes = process.env.NODE_ENV !== "production" ? {
+  ongoingCourses: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    provider: PropTypes.string,
+    progress: PropTypes.number
+  })),
+  onCourseClick: PropTypes.func
+} : {};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","ButtonLink","Icon","style","ContinueLearningButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","func","SkillDetail","title","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","onBackClick","onReviewClick","onContinueLearningClick","onCourseClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","ctaWrapper","length","showMoreWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","bool","arrayOf","provider","type","ContinueLearning","continueLearningWrapper","continueLearningTitle","continueLearningNumber"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} 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 ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {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={translate('continue_learning')}\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  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    description,\n    metrics,\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    onCourseClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, 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  });\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}>\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          {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\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 onClick={onContinueLearningClick} />\n          </div>\n        </div>\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> : null}\n          </> \n        : null}\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> {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        <ContinueLearning ongoingCourses={ongoingCourses} onCourseClick={onCourseClick} />\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  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.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  skillIncludedCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      type: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  onCourseClick: PropTypes.func\n};\n\nexport default SkillDetail;\n\nconst ContinueLearning = (props, context) => {\n  const {\n    ongoingCourses,\n    onCourseClick\n  } = props;\n  const {skin, translate} = context;\n\n  return (\n    <div className={style.continueLearningWrapper}>\n      <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n      <span className={style.continueLearningNumber}>\n        {ongoingCourses.length}\n      </span>\n    </div>\n  )\n}\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onCourseClick: PropTypes.func\n};\n"],"mappings":";AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,sBAAsB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACjD,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBZ,QAAQ,CAAC,KAAD,CAAtC;EACA,MAAM;IAACa;EAAD,IAAYJ,KAAlB;EACA,MAAM;IAACK,IAAD;IAAOC;EAAP,IAAoBL,OAA1B;;EACA,MAAMM,gBAAgB,GAAG,KAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;;EAEA,MAAMG,eAAe,GAAGlB,WAAW,CAAC,MAAMa,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;EAEA,MAAMM,gBAAgB,GAAGnB,WAAW,CAAC,MAAMa,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;EAEA,oBACE;IAAK,WAAW,EAAEK,eAAlB;IAAmC,YAAY,EAAEC;EAAjD,gBACE,oBAAC,UAAD;IACE,KAAK,EAAEH,SAAS,CAAC,mBAAD,CADlB;IAEE,IAAI,EAAC,SAFP;IAGE,WAAW,EAAE;MACXI,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE,MAFH;MAGXC,eAAe,EAAEV,OAAO,GACpBT,OAAO,CAAE,YAAWc,gBAAiB,0BAA9B,CADa,GAEpBA;IALO,CAHf;IAUE,IAAI,EAAE;MACJM,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,MADA;QAENC,KAAK,EAAE,SAFD;QAGNC,IAAI,EAAE;MAHA;IAFJ,CAVR;IAkBE,OAAO,EAAEb;EAlBX,EADF,CADF;AAwBD,CAlCD;;AAoCAL,sBAAsB,CAACmB,YAAvB,GAAsC;EACpCb,IAAI,EAAEV,QAAQ,CAACwB,iBAAT,CAA2Bd,IADG;EAEpCC,SAAS,EAAEX,QAAQ,CAACwB,iBAAT,CAA2Bb;AAFF,CAAtC;AAKAP,sBAAsB,CAACqB,SAAvB,2CAAmC;EACjChB,OAAO,EAAEZ,SAAS,CAAC6B;AADc,CAAnC;;AAIA,MAAMC,WAAW,GAAG,CAACtB,KAAD,EAAQC,OAAR,KAAoB;EACtC,MAAM;IACJsB,KADI;IAEJC,WAFI;IAGJC,OAHI;IAIJC,OAJI;IAKJC,kBALI;IAMJC,cANI;IAOJC,oBAPI;IAQJC,WARI;IASJC,aATI;IAUJC,uBAVI;IAWJC;EAXI,IAYFjC,KAZJ;EAaA,MAAM;IAACkC,KAAD;IAAQC,OAAR;IAAiBC,iBAAjB;IAAoCC,gBAAgB,GAAG;EAAvD,IAA4DZ,OAAlE;EACA,MAAM;IAACpB,IAAD;IAAOC;EAAP,IAAoBL,OAA1B;EAEA,MAAM,CAACqC,QAAD,EAAWC,WAAX,IAA0BhD,QAAQ,CAAC,KAAD,CAAxC;EAEA,MAAMiD,cAAc,GAAGlD,WAAW,CAAC,MAAMiD,WAAW,CAAC,CAACD,QAAF,CAAlB,EAA+B,CAACC,WAAD,EAAcD,QAAd,CAA/B,CAAlC;EAEA,MAAMG,WAAW,GAAGnD,WAAW,CAAC,MAAM;IACpC,oBACE;MAAK,SAAS,EAAEI,UAAU,CAACI,KAAK,CAAC0B,WAAP,EAAoB,CAACc,QAAD,IAAaxC,KAAK,CAAC4C,QAAvC;IAA1B,GACGlB,WADH,CADF;EAKD,CAN8B,CAA/B;EAQA,MAAMmB,WAAW,GAAGrD,WAAW,CAAC,MAAM;IACpC,IAAI4C,KAAK,KAAKU,SAAd,EAAyB,OAAO,IAAP;IACzB,MAAMC,gBAAgB,GAAG,SAAzB;IACA,MAAMC,wBAAwB,GAAG;MAC/BlC,eAAe,EAAEiC,gBADc;MAE/BnC,KAAK,EAAG,GAAEwB,KAAM;IAFe,CAAjC;IAKA,oBACE;MAAK,SAAS,EAAEpC,KAAK,CAACiD;IAAtB,gBACE;MACE,aAAU,UADZ;MAEE,SAAS,EAAEjD,KAAK,CAACkD,QAFnB;MAGE,KAAK,EAAEF,wBAHT;MAIE,IAAI,EAAC;IAJP,EADF,CADF;EAUD,CAlB8B,EAkB5B,CAACZ,KAAD,CAlB4B,CAA/B;EAoBA,oBACE;IAAK,SAAS,EAAEpC,KAAK,CAACmD;EAAtB,gBACE;IAAK,SAAS,EAAEnD,KAAK,CAACoD;EAAtB,gBACE;IAAK,SAAS,EAAEpD,KAAK,CAACqD,iBAAtB;IAAyC,OAAO,EAAErB;EAAlD,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,YADX;IAEE,IAAI,EAAE;MACJsB,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAFR,EADF,CADF,eAUE;IAAK,SAAS,EAAEvD,KAAK,CAACwD;EAAtB,GACG5B,OAAO,gBACN;IAAK,SAAS,EAAE5B,KAAK,CAACyD;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJH,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASG/C,SAAS,CAAC,aAAD,CATZ,CADM,GAYJ,IAbN,eAeE;IAAK,SAAS,EAAER,KAAK,CAAC0D;EAAtB,gBACE,oBAAC,UAAD;IACE,IAAI,EAAC,WADP;IAEE,OAAO,EAAEzB,aAFX;IAGE,KAAK,EAAEzB,SAAS,CAAC,mBAAD,CAHlB;IAIE,QAAQ,EAAE,CAACqB,kBAJb;IAKE,WAAW,EAAE;MACXjB,KAAK,EAAE,aADI;MAEXC,YAAY,EAAE;IAFH;EALf,EADF,eAWE,oBAAC,sBAAD;IAAwB,OAAO,EAAEqB;EAAjC,EAXF,CAfF,CAVF,eAuCE;IAAK,SAAS,EAAElC,KAAK,CAACyB;EAAtB,GAA8BA,KAA9B,CAvCF,EAwCGC,WAAW,gBACV,uDACE,oBAAC,WAAD,OADF,EAEGA,WAAW,CAACiC,MAAZ,IAAsB,GAAtB,gBACC;IAAK,SAAS,EAAE3D,KAAK,CAAC4D,eAAtB;IAAuC,OAAO,EAAElB;EAAhD,GACGF,QAAQ,GAAGhC,SAAS,CAAC,WAAD,CAAZ,GAA4BA,SAAS,CAAC,WAAD,CADhD,eAEE,oBAAC,IAAD;IACE,QAAQ,EAAEgC,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MACJc,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAFR,EAFF,CADD,GAUU,IAZb,CADU,GAeV,IAvDJ,eAwDE;IAAK,SAAS,EAAEvD,KAAK,CAAC6D;EAAtB,gBACE;IAAK,SAAS,EAAE7D,KAAK,CAAC8D;EAAtB,GAAsCtD,SAAS,CAAC,eAAD,CAA/C,CADF,eAEE;IAAK,SAAS,EAAER,KAAK,CAAC+D;EAAtB,GACG1B,OAAO,gBACN;IAAK,SAAS,EAAErC,KAAK,CAACgE,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAEhE,KAAK,CAACiE;EAAvB,GAAgD5B,OAAhD,CADF,OACmE7B,SAAS,CAAC,SAAD,CAD5E,CADM,GAIJ,IALN,EAMG8B,iBAAiB,gBAChB;IAAK,SAAS,EAAEtC,KAAK,CAACgE,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAEhE,KAAK,CAACiE;EAAvB,GAAgD3B,iBAAhD,CADF,UAES9B,SAAS,CAAC,WAAD,CAFlB,CADgB,GAKd,IAXN,CAFF,eAeE,oBAAC,WAAD,OAfF,eAgBE;IAAK,SAAS,EAAER,KAAK,CAACkE;EAAtB,GACG7B,OAAO,iBACN,uDACE;IAAK,SAAS,EAAErC,KAAK,CAACmE,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEnE,KAAK,CAACoE;EAAvB,GAAmD7B,gBAAnD,CADF,EAEI,IAAG/B,SAAS,CAAC,mBAAD,CAAsB,EAFtC,CADF,eAKE;IAAK,SAAS,EAAER,KAAK,CAACmE,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEnE,KAAK,CAACoE;EAAvB,GAAmDhC,KAAnD,MADF,CALF,CAFJ,CAhBF,CAxDF,eAsFE,oBAAC,gBAAD;IAAkB,cAAc,EAAEN,cAAlC;IAAkD,aAAa,EAAEK;EAAjE,EAtFF,CADF,CADF;AA4FD,CA7ID;;AA+IAX,WAAW,CAACJ,YAAZ,GAA2B;EACzBb,IAAI,EAAEV,QAAQ,CAACwB,iBAAT,CAA2Bd,IADR;EAEzBC,SAAS,EAAEX,QAAQ,CAACwB,iBAAT,CAA2Bb;AAFb,CAA3B;AAKAgB,WAAW,CAACF,SAAZ,2CAAwB;EACtBG,KAAK,EAAE/B,SAAS,CAAC2E,MAAV,CAAiBC,UADF;EAEtB5C,WAAW,EAAEhC,SAAS,CAAC2E,MAFD;EAGtB1C,OAAO,EAAEjC,SAAS,CAAC6E,KAAV,CAAgB;IACvBnC,KAAK,EAAE1C,SAAS,CAAC8E,MADM;IAEvBnC,OAAO,EAAE3C,SAAS,CAAC8E,MAFI;IAGvBlC,iBAAiB,EAAE5C,SAAS,CAAC8E,MAHN;IAIvBjC,gBAAgB,EAAE7C,SAAS,CAAC8E;EAJL,CAAhB,CAHa;EAStB5C,OAAO,EAAElC,SAAS,CAAC+E,IATG;EAUtB5C,kBAAkB,EAAEnC,SAAS,CAAC+E,IAVR;EAWtB3C,cAAc,EAAEpC,SAAS,CAACgF,OAAV,CACdhF,SAAS,CAAC6E,KAAV,CAAgB;IACd9C,KAAK,EAAE/B,SAAS,CAAC2E,MADH;IAEdM,QAAQ,EAAEjF,SAAS,CAAC2E,MAFN;IAGdnB,QAAQ,EAAExD,SAAS,CAAC8E;EAHN,CAAhB,CADc,CAXM;EAkBtBzC,oBAAoB,EAAErC,SAAS,CAACgF,OAAV,CACpBhF,SAAS,CAAC6E,KAAV,CAAgB;IACd9C,KAAK,EAAE/B,SAAS,CAAC2E,MADH;IAEdO,IAAI,EAAElF,SAAS,CAAC2E,MAFF;IAGdM,QAAQ,EAAEjF,SAAS,CAAC2E,MAHN;IAIdnB,QAAQ,EAAExD,SAAS,CAAC8E;EAJN,CAAhB,CADoB,CAlBA;EA0BtBxC,WAAW,EAAEtC,SAAS,CAAC6B,IA1BD;EA2BtBU,aAAa,EAAEvC,SAAS,CAAC6B,IA3BH;EA4BtBW,uBAAuB,EAAExC,SAAS,CAAC6B,IA5Bb;EA6BtBY,aAAa,EAAEzC,SAAS,CAAC6B;AA7BH,CAAxB;AAgCA,eAAeC,WAAf;;AAEA,MAAMqD,gBAAgB,GAAG,CAAC3E,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IACJ2B,cADI;IAEJK;EAFI,IAGFjC,KAHJ;EAIA,MAAM;IAACK,IAAD;IAAOC;EAAP,IAAoBL,OAA1B;EAEA,oBACE;IAAK,SAAS,EAAEH,KAAK,CAAC8E;EAAtB,gBACE;IAAM,SAAS,EAAE9E,KAAK,CAAC+E;EAAvB,GAA+CvE,SAAS,CAAC,mBAAD,CAAxD,CADF,eAEE;IAAM,SAAS,EAAER,KAAK,CAACgF;EAAvB,GACGlD,cAAc,CAAC6B,MADlB,CAFF,CADF;AAQD,CAfD;;AAiBAkB,gBAAgB,CAACzD,YAAjB,GAAgC;EAC9Bb,IAAI,EAAEV,QAAQ,CAACwB,iBAAT,CAA2Bd,IADH;EAE9BC,SAAS,EAAEX,QAAQ,CAACwB,iBAAT,CAA2Bb;AAFR,CAAhC;AAKAqE,gBAAgB,CAACvD,SAAjB,2CAA6B;EAC3BQ,cAAc,EAAEpC,SAAS,CAACgF,OAAV,CACdhF,SAAS,CAAC6E,KAAV,CAAgB;IACd9C,KAAK,EAAE/B,SAAS,CAAC2E,MADH;IAEdM,QAAQ,EAAEjF,SAAS,CAAC2E,MAFN;IAGdnB,QAAQ,EAAExD,SAAS,CAAC8E;EAHN,CAAhB,CADc,CADW;EAQ3BrC,aAAa,EAAEzC,SAAS,CAAC6B;AARE,CAA7B"}