@coorpacademy/components 11.32.42 → 11.32.44-alpha.55

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","questionsToReview","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","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, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\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: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\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    ongoingCoursesAvailable,\n    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score = 0, questionsToReview} = 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        <Markdown>{description}</Markdown>\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        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label=\"Back\"\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\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={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalCourses}\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    questionsToReview: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\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","useRef","useEffect","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","descriptionRef","score","questionsToReview","totalContents","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useRef, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\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: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\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    ongoingCoursesAvailable,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const descriptionRef = useRef(null);\n  const {score = 0, questionsToReview, totalContents} = metrics;\n  const {translate} = context;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\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        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label={translate('back')}\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\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                {isDescriptionTruncated ? (\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={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalContents}\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    questionsToReview: PropTypes.number,\n    totalContents: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\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/es/variables/colors.d.ts

@@ -2,6 +2,7 @@ export declare const COLORS: {
     readonly gray: "#EAEAEB";
     readonly negative: "#ed3436";
     readonly positive: "#35CC7F";
+    readonly white: "#ffffff";
     readonly cm_grey_800: "#171721";
     readonly cm_primary_blue: "#0061FF";
 };

package/es/variables/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}

package/es/variables/colors.js

@@ -2,6 +2,7 @@ export const COLORS = {
   gray: '#EAEAEB',
   negative: '#ed3436',
   positive: '#35CC7F',
+  white: '#ffffff',
   cm_grey_800: '#171721',
   cm_primary_blue: '#0061FF'
 };

package/es/variables/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","cm_grey_800","cm_primary_blue"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,WAAW,EAAE,SAJO;EAKpBC,eAAe,EAAE;AALG,CAAf"}
+{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","white","cm_grey_800","cm_primary_blue"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  white: '#ffffff',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,KAAK,EAAE,SAJa;EAKpBC,WAAW,EAAE,SALO;EAMpBC,eAAe,EAAE;AANG,CAAf"}

package/lib/atom/button-link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AAgD7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;CA8FzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AAoD7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;CAoGzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/lib/atom/button-link/index.js

@@ -37,7 +37,6 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
     position: ''
   };
   const Icon = type && _buttonIcons.ICONS[type];
-  const isApplyHover = hovered && hoverBackgroundColor && hoverColor;
 
   if (!Icon && !faIcon) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -49,8 +48,9 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
 
   const iconComponent = faIcon ? /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: faIcon.name,
-    iconColor: isApplyHover ? hoverColor : faIcon.color,
-    backgroundColor: isApplyHover ? hoverBackgroundColor : faIcon.backgroundColor,
+    iconColor: hovered && hoverColor ? hoverColor : faIcon.color,
+    // eslint-disable-next-line no-nested-ternary
+    backgroundColor: !faIcon?.backgroundColor ? 'transparent' : hovered && hoverBackgroundColor ? hoverBackgroundColor : faIcon.backgroundColor,
     size: {
       faSize: faIcon.size,
       wrapperSize: faIcon.size
@@ -91,7 +91,9 @@ const ButtonLink = props => {
   const [hovered, setHovered] = (0, _react.useState)(false);
   const handleOnClick = (0, _react.useCallback)(event => onClick(event), [onClick]);
   const handleOnKeyDown = (0, _react.useCallback)(event => onKeyDown(event), [onKeyDown]);
-  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseOver = (0, _react.useCallback)(() => {
+    setHovered(true);
+  }, [setHovered]);
   const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
 
   const _customStyle = (0, _react.useMemo)(() => {
@@ -109,8 +111,12 @@ const ButtonLink = props => {
       className: styleButton,
       "data-name": dataName,
       "data-testid": dataTestId,
-      "aria-label": ariaLabel || label
-    }), getButtonContent(icon, content ?? label));
+      "aria-label": ariaLabel || label,
+      hoverColor: hoverColor,
+      hoverBackgroundColor: hoverBackgroundColor,
+      onMouseOver: handleMouseOver,
+      onMouseLeave: handleMouseLeave
+    }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor));
   }
 
   return /*#__PURE__*/_react.default.createElement("button", _extends({}, useTitle && {

package/lib/atom/button-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","ICONS","isApplyHover","style","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","useTitle","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","setHovered","useState","handleOnClick","useCallback","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","_customStyle","useMemo","title","propTypes"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n  const isApplyHover = hovered && hoverBackgroundColor && hoverColor;\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...{\n        iconName: faIcon.name,\n        iconColor: isApplyHover ? hoverColor : faIcon.color,\n        backgroundColor: isApplyHover ? hoverBackgroundColor : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        },\n        customStyle: faIcon.customStyle\n      }}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    usage = 'button',\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n      >\n        {getButtonContent(icon, content ?? label)}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","ICONS","style","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","useTitle","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","setHovered","useState","handleOnClick","useCallback","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","_customStyle","useMemo","title","propTypes"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...{\n        iconName: faIcon.name,\n        iconColor: hovered && hoverColor ? hoverColor : faIcon.color,\n        // eslint-disable-next-line no-nested-ternary\n        backgroundColor: !faIcon?.backgroundColor\n          ? 'transparent'\n          : hovered && hoverBackgroundColor\n          ? hoverBackgroundColor\n          : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        },\n        customStyle: faIcon.customStyle\n      }}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    usage = 'button',\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => {\n    setHovered(true);\n  }, [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n        hoverColor={hoverColor}\n        hoverBackgroundColor={hoverBackgroundColor}\n        onMouseOver={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n      >\n        {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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"}

package/lib/atom/cta/index.js

@@ -52,7 +52,7 @@ const CTA = (props, legacyContext) => {
     useButtonTag = false
   } = props;
   const [hovered, setHovered] = (0, _react.useState)(false);
-  const handleMouseEnter = (0, _react.useCallback)(() => {
+  const handleMouseOver = (0, _react.useCallback)(() => {
     setHovered(true);
   }, []);
   const handleMouseLeave = (0, _react.useCallback)(() => {
@@ -94,7 +94,7 @@ const CTA = (props, legacyContext) => {
   return /*#__PURE__*/_react.default.createElement(_link.default, {
     href: href,
     onClick: disabled ? _noop2.default : onClick,
-    onMouseEnter: handleMouseEnter,
+    onMouseOver: handleMouseOver,
     onMouseLeave: handleMouseLeave,
     target: target,
     className: (0, _classnames.default)(_style.default.button, disabled ? _style.default.disabled : null, small ? _style.default.smallButton : null, light ? _style.default.lightButton : null, secondary ? _style.default.secondaryButton : null, logout ? _style.default.logoutButton : null, rectangular ? _style.default.rectangularButton : null, fullWidth ? _style.default.fullWidth : null, certificationButton ? _style.default.certificationButton : null, className),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CTA","props","legacyContext","skin","ariaLabel","submitValue","name","ctaName","href","target","disabled","light","small","secondary","onClick","className","logout","rectangular","fullWidth","certificationButton","useButtonTag","hovered","setHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","getStyle","color","grey","backgroundColor","borderColor","opacity","darkenColor","convert","classnames","style","button","smallButton","lightButton","secondaryButton","logoutButton","rectangularButton","logoutWrapper","logoutIcon","propTypes","contextTypes","Provider","childContextTypes"],"sources":["../../../src/atom/cta/index.tsx"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {NovaCompositionCoorpacademyLogout as LogoutIcon} from '@coorpacademy/nova-icons';\nimport Link from '../link';\nimport type {WebContextValues} from '../provider/web-context';\nimport Provider from '../provider';\nimport style from './style.css';\nimport propTypes from './prop-types';\nimport type {CTAProps} from './prop-types';\n\nconst CTA = (props: CTAProps, legacyContext: WebContextValues) => {\n  const {skin} = legacyContext;\n  const {\n    'aria-label': ariaLabel,\n    submitValue = 'submit',\n    name: ctaName,\n    href,\n    target,\n    disabled = false,\n    light = false,\n    small = false,\n    secondary = false,\n    onClick,\n    className,\n    logout = false,\n    rectangular = false,\n    fullWidth = false,\n    certificationButton = false,\n    useButtonTag = false\n  } = props;\n  const [hovered, setHovered] = useState(false);\n\n  const handleMouseEnter = useCallback(() => {\n    setHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setHovered(false);\n  }, []);\n\n  const getStyle = useCallback(() => {\n    const color = get('common.primary', skin);\n    const grey = get('common.grey', skin);\n\n    if (logout) return;\n\n    if (disabled) {\n      return {\n        backgroundColor: grey,\n        borderColor: grey,\n        opacity: '0.3'\n      };\n    }\n\n    if (hovered) {\n      const darkenColor = convert(`color(${color} blackness(+10%))`);\n      return {\n        backgroundColor: darkenColor,\n        borderColor: darkenColor\n      };\n    }\n\n    if (secondary)\n      return {\n        color,\n        borderColor: color\n      };\n\n    if (light)\n      return {\n        color\n      };\n\n    return {\n      borderColor: color,\n      backgroundColor: color\n    };\n  }, [disabled, hovered, light, logout, secondary, skin]);\n\n  return (\n    <Link\n      href={href}\n      onClick={disabled ? noop : onClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      target={target}\n      className={classnames(\n        style.button,\n        disabled ? style.disabled : null,\n        small ? style.smallButton : null,\n        light ? style.lightButton : null,\n        secondary ? style.secondaryButton : null,\n        logout ? style.logoutButton : null,\n        rectangular ? style.rectangularButton : null,\n        fullWidth ? style.fullWidth : null,\n        certificationButton ? style.certificationButton : null,\n        className\n      )}\n      data-name={ctaName || 'cta'}\n      style={getStyle()}\n      aria-label={ariaLabel}\n      useButtonTag={useButtonTag}\n    >\n      {logout ? (\n        <div className={style.logoutWrapper} data-name=\"cta-logout-label\">\n          <LogoutIcon height={15} width={15} className={style.logoutIcon} />\n          {submitValue}\n        </div>\n      ) : (\n        submitValue\n      )}\n    </Link>\n  );\n};\n\nCTA.propTypes = propTypes;\n\nCTA.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default CTA;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;AAGA,MAAMA,GAAG,GAAG,CAACC,KAAD,EAAkBC,aAAlB,KAAsD;EAChE,MAAM;IAACC;EAAD,IAASD,aAAf;EACA,MAAM;IACJ,cAAcE,SADV;IAEJC,WAAW,GAAG,QAFV;IAGJC,IAAI,EAAEC,OAHF;IAIJC,IAJI;IAKJC,MALI;IAMJC,QAAQ,GAAG,KANP;IAOJC,KAAK,GAAG,KAPJ;IAQJC,KAAK,GAAG,KARJ;IASJC,SAAS,GAAG,KATR;IAUJC,OAVI;IAWJC,SAXI;IAYJC,MAAM,GAAG,KAZL;IAaJC,WAAW,GAAG,KAbV;IAcJC,SAAS,GAAG,KAdR;IAeJC,mBAAmB,GAAG,KAflB;IAgBJC,YAAY,GAAG;EAhBX,IAiBFnB,KAjBJ;EAkBA,MAAM,CAACoB,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,gBAAgB,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACzCH,UAAU,CAAC,IAAD,CAAV;EACD,CAFwB,EAEtB,EAFsB,CAAzB;EAIA,MAAMI,gBAAgB,GAAG,IAAAD,kBAAA,EAAY,MAAM;IACzCH,UAAU,CAAC,KAAD,CAAV;EACD,CAFwB,EAEtB,EAFsB,CAAzB;EAIA,MAAMK,QAAQ,GAAG,IAAAF,kBAAA,EAAY,MAAM;IACjC,MAAMG,KAAK,GAAG,mBAAI,gBAAJ,EAAsBzB,IAAtB,CAAd;IACA,MAAM0B,IAAI,GAAG,mBAAI,aAAJ,EAAmB1B,IAAnB,CAAb;IAEA,IAAIa,MAAJ,EAAY;;IAEZ,IAAIN,QAAJ,EAAc;MACZ,OAAO;QACLoB,eAAe,EAAED,IADZ;QAELE,WAAW,EAAEF,IAFR;QAGLG,OAAO,EAAE;MAHJ,CAAP;IAKD;;IAED,IAAIX,OAAJ,EAAa;MACX,MAAMY,WAAW,GAAG,IAAAC,yBAAA,EAAS,SAAQN,KAAM,mBAAvB,CAApB;MACA,OAAO;QACLE,eAAe,EAAEG,WADZ;QAELF,WAAW,EAAEE;MAFR,CAAP;IAID;;IAED,IAAIpB,SAAJ,EACE,OAAO;MACLe,KADK;MAELG,WAAW,EAAEH;IAFR,CAAP;IAKF,IAAIjB,KAAJ,EACE,OAAO;MACLiB;IADK,CAAP;IAIF,OAAO;MACLG,WAAW,EAAEH,KADR;MAELE,eAAe,EAAEF;IAFZ,CAAP;EAID,CArCgB,EAqCd,CAAClB,QAAD,EAAWW,OAAX,EAAoBV,KAApB,EAA2BK,MAA3B,EAAmCH,SAAnC,EAA8CV,IAA9C,CArCc,CAAjB;EAuCA,oBACE,6BAAC,aAAD;IACE,IAAI,EAAEK,IADR;IAEE,OAAO,EAAEE,QAAQ,oBAAUI,OAF7B;IAGE,YAAY,EAAEU,gBAHhB;IAIE,YAAY,EAAEE,gBAJhB;IAKE,MAAM,EAAEjB,MALV;IAME,SAAS,EAAE,IAAA0B,mBAAA,EACTC,cAAA,CAAMC,MADG,EAET3B,QAAQ,GAAG0B,cAAA,CAAM1B,QAAT,GAAoB,IAFnB,EAGTE,KAAK,GAAGwB,cAAA,CAAME,WAAT,GAAuB,IAHnB,EAIT3B,KAAK,GAAGyB,cAAA,CAAMG,WAAT,GAAuB,IAJnB,EAKT1B,SAAS,GAAGuB,cAAA,CAAMI,eAAT,GAA2B,IAL3B,EAMTxB,MAAM,GAAGoB,cAAA,CAAMK,YAAT,GAAwB,IANrB,EAOTxB,WAAW,GAAGmB,cAAA,CAAMM,iBAAT,GAA6B,IAP/B,EAQTxB,SAAS,GAAGkB,cAAA,CAAMlB,SAAT,GAAqB,IARrB,EASTC,mBAAmB,GAAGiB,cAAA,CAAMjB,mBAAT,GAA+B,IATzC,EAUTJ,SAVS,CANb;IAkBE,aAAWR,OAAO,IAAI,KAlBxB;IAmBE,KAAK,EAAEoB,QAAQ,EAnBjB;IAoBE,cAAYvB,SApBd;IAqBE,YAAY,EAAEgB;EArBhB,GAuBGJ,MAAM,gBACL;IAAK,SAAS,EAAEoB,cAAA,CAAMO,aAAtB;IAAqC,aAAU;EAA/C,gBACE,6BAAC,4CAAD;IAAY,MAAM,EAAE,EAApB;IAAwB,KAAK,EAAE,EAA/B;IAAmC,SAAS,EAAEP,cAAA,CAAMQ;EAApD,EADF,EAEGvC,WAFH,CADK,GAMLA,WA7BJ,CADF;AAkCD,CAvGD;;AAyGAL,GAAG,CAAC6C,SAAJ,2CAAgBA,kBAAhB;AAEA7C,GAAG,CAAC8C,YAAJ,GAAmB;EACjB3C,IAAI,EAAE4C,iBAAA,CAASC,iBAAT,CAA2B7C;AADhB,CAAnB;eAIeH,G"}
+{"version":3,"file":"index.js","names":["CTA","props","legacyContext","skin","ariaLabel","submitValue","name","ctaName","href","target","disabled","light","small","secondary","onClick","className","logout","rectangular","fullWidth","certificationButton","useButtonTag","hovered","setHovered","useState","handleMouseOver","useCallback","handleMouseLeave","getStyle","color","grey","backgroundColor","borderColor","opacity","darkenColor","convert","classnames","style","button","smallButton","lightButton","secondaryButton","logoutButton","rectangularButton","logoutWrapper","logoutIcon","propTypes","contextTypes","Provider","childContextTypes"],"sources":["../../../src/atom/cta/index.tsx"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {NovaCompositionCoorpacademyLogout as LogoutIcon} from '@coorpacademy/nova-icons';\nimport Link from '../link';\nimport type {WebContextValues} from '../provider/web-context';\nimport Provider from '../provider';\nimport style from './style.css';\nimport propTypes from './prop-types';\nimport type {CTAProps} from './prop-types';\n\nconst CTA = (props: CTAProps, legacyContext: WebContextValues) => {\n  const {skin} = legacyContext;\n  const {\n    'aria-label': ariaLabel,\n    submitValue = 'submit',\n    name: ctaName,\n    href,\n    target,\n    disabled = false,\n    light = false,\n    small = false,\n    secondary = false,\n    onClick,\n    className,\n    logout = false,\n    rectangular = false,\n    fullWidth = false,\n    certificationButton = false,\n    useButtonTag = false\n  } = props;\n  const [hovered, setHovered] = useState(false);\n\n  const handleMouseOver = useCallback(() => {\n    setHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setHovered(false);\n  }, []);\n\n  const getStyle = useCallback(() => {\n    const color = get('common.primary', skin);\n    const grey = get('common.grey', skin);\n\n    if (logout) return;\n\n    if (disabled) {\n      return {\n        backgroundColor: grey,\n        borderColor: grey,\n        opacity: '0.3'\n      };\n    }\n\n    if (hovered) {\n      const darkenColor = convert(`color(${color} blackness(+10%))`);\n      return {\n        backgroundColor: darkenColor,\n        borderColor: darkenColor\n      };\n    }\n\n    if (secondary)\n      return {\n        color,\n        borderColor: color\n      };\n\n    if (light)\n      return {\n        color\n      };\n\n    return {\n      borderColor: color,\n      backgroundColor: color\n    };\n  }, [disabled, hovered, light, logout, secondary, skin]);\n\n  return (\n    <Link\n      href={href}\n      onClick={disabled ? noop : onClick}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      target={target}\n      className={classnames(\n        style.button,\n        disabled ? style.disabled : null,\n        small ? style.smallButton : null,\n        light ? style.lightButton : null,\n        secondary ? style.secondaryButton : null,\n        logout ? style.logoutButton : null,\n        rectangular ? style.rectangularButton : null,\n        fullWidth ? style.fullWidth : null,\n        certificationButton ? style.certificationButton : null,\n        className\n      )}\n      data-name={ctaName || 'cta'}\n      style={getStyle()}\n      aria-label={ariaLabel}\n      useButtonTag={useButtonTag}\n    >\n      {logout ? (\n        <div className={style.logoutWrapper} data-name=\"cta-logout-label\">\n          <LogoutIcon height={15} width={15} className={style.logoutIcon} />\n          {submitValue}\n        </div>\n      ) : (\n        submitValue\n      )}\n    </Link>\n  );\n};\n\nCTA.propTypes = propTypes;\n\nCTA.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default CTA;\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 export const DEFAULT_ICON_COLOR: "hsl(0, 0%, 32%)";
+export function createGradientBackground(baseColor: any): string;
 export function getForegroundColor(backgroundColor: any): any;
 export default Icon;
 declare const Icon: React.NamedExoticComponent<object>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAiBA,mDAAoD;AAiB7C,8DAC8D;;AAGrE,uDAmCG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAiBA,mDAAoD;AAiB7C,iEAIN;AAEM,8DAC8D;;AAGrE,uDAoCG"}

package/lib/atom/icon/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.getForegroundColor = exports.default = exports.DEFAULT_ICON_COLOR = void 0;
+exports.getForegroundColor = exports.default = exports.createGradientBackground = exports.DEFAULT_ICON_COLOR = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -54,6 +54,14 @@ const SIZE_CONFIGS = {
   }
 };
 
+const createGradientBackground = baseColor => {
+  const startColor = (0, _cssColorFunction.convert)(`color(${baseColor} lightness(91%))`);
+  const endColor = (0, _cssColorFunction.convert)(`color(${baseColor} lightness(81%))`);
+  return `linear-gradient(180deg, ${startColor} 0%, ${endColor} 100%)`;
+};
+
+exports.createGradientBackground = createGradientBackground;
+
 const getForegroundColor = backgroundColor => (0, _cssColorFunction.convert)(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`); // set lightness to 32%
 
 
@@ -63,6 +71,7 @@ const Icon = /*#__PURE__*/_react.default.memo(function Icon({
   iconName,
   iconColor,
   backgroundColor,
+  gradientBackground,
   borderRadius,
   preset = DEFAULT_PRESET,
   size,
@@ -72,7 +81,7 @@ const Icon = /*#__PURE__*/_react.default.memo(function Icon({
   const effectiveSize = size ? (0, _merge.default)(SIZE_CONFIGS[DEFAULT_PRESET], size) : (0, _getOr.default)(SIZE_CONFIGS[DEFAULT_PRESET], (0, _toLower.default)(preset), SIZE_CONFIGS);
   const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
   const iconWrapperStyle = {
-    backgroundColor,
+    background: gradientBackground ? createGradientBackground(effectiveIconColor) : backgroundColor,
     borderRadius,
     width: wrapperSize,
     height: wrapperSize,
@@ -92,6 +101,7 @@ Icon.propTypes = process.env.NODE_ENV !== "production" ? {
   iconName: _propTypes.default.string.isRequired,
   iconColor: _propTypes.default.string,
   backgroundColor: _propTypes.default.string,
+  gradientBackground: _propTypes.default.bool,
   borderRadius: _propTypes.default.string,
   preset: _propTypes.default.oneOf(['s', 'm', 'xl']),
   size: _propTypes.default.shape({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["library","add","fas","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","convert","Icon","React","memo","iconName","iconColor","borderRadius","preset","size","customStyle","effectiveIconColor","effectiveSize","merge","getOr","toLower","iconWrapperStyle","width","height","padding","style","iconWrapper","propTypes","PropTypes","string","isRequired","oneOf","shape","number","objectOf","oneOfType"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes, {number} from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport {convert} from 'css-color-function';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nconst ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n  s: {\n    faSize: 12,\n    wrapperSize: 32\n  },\n  m: {\n    faSize: 16,\n    wrapperSize: DEFAULT_WRAPPER_SIZE\n  },\n  xl: {\n    faSize: 20,\n    wrapperSize: 48\n  }\n};\n\nexport const getForegroundColor = backgroundColor =>\n  convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);\n// set lightness to 32%\n\nconst Icon = React.memo(function Icon({\n  iconName,\n  iconColor,\n  backgroundColor,\n  borderRadius,\n  preset = DEFAULT_PRESET,\n  size,\n  customStyle\n}) {\n  const effectiveIconColor =\n    iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);\n\n  const effectiveSize = size\n    ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n    : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n\n  const iconWrapperStyle = {\n    backgroundColor,\n    borderRadius,\n    width: wrapperSize,\n    height: wrapperSize,\n    padding: ICON_PADDING\n  };\n\n  return (\n    <div className={style.iconWrapper} style={{...iconWrapperStyle, ...customStyle}}>\n      <FontAwesomeIcon\n        icon={`fa-${iconName}`}\n        color={effectiveIconColor}\n        fontSize={effectiveSize.faSize}\n      />\n    </div>\n  );\n});\n\nIcon.propTypes = {\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  borderRadius: PropTypes.string,\n  preset: PropTypes.oneOf(['s', 'm', 'xl']),\n  size: PropTypes.shape({\n    faSize: number,\n    wrapperSize: PropTypes.number\n  }),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default Icon;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEAA,2BAAA,CAAQC,GAAR,CAAYC,qBAAZ;;AAEA,MAAMC,cAAc,GAAG,GAAvB;AACA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;AACA,MAAMC,YAAY,GAAG,CAArB;AACO,MAAMC,kBAAkB,GAAG,iBAA3B;;AAEP,MAAMC,YAAY,GAAG;EACnBC,CAAC,EAAE;IACDC,MAAM,EAAE,EADP;IAEDC,WAAW,EAAE;EAFZ,CADgB;EAKnBC,CAAC,EAAE;IACDF,MAAM,EAAE,EADP;IAEDC,WAAW,EAAEN;EAFZ,CALgB;EASnBQ,EAAE,EAAE;IACFH,MAAM,EAAE,EADN;IAEFC,WAAW,EAAE;EAFX;AATe,CAArB;;AAeO,MAAMG,kBAAkB,GAAGC,eAAe,IAC/C,IAAAC,yBAAA,EAAS,SAAQD,eAAgB,cAAaX,eAAgB,KAA9D,CADK,C,CAEP;;;;;AAEA,MAAMa,IAAI,gBAAGC,cAAA,CAAMC,IAAN,CAAW,SAASF,IAAT,CAAc;EACpCG,QADoC;EAEpCC,SAFoC;EAGpCN,eAHoC;EAIpCO,YAJoC;EAKpCC,MAAM,GAAGpB,cAL2B;EAMpCqB,IANoC;EAOpCC;AAPoC,CAAd,EAQrB;EACD,MAAMC,kBAAkB,GACtBL,SAAS,KAAKN,eAAe,GAAGD,kBAAkB,CAACC,eAAD,CAArB,GAAyCR,kBAA7D,CADX;EAGA,MAAMoB,aAAa,GAAGH,IAAI,GACtB,IAAAI,cAAA,EAAMpB,YAAY,CAACL,cAAD,CAAlB,EAAoCqB,IAApC,CADsB,GAEtB,IAAAK,cAAA,EAAMrB,YAAY,CAACL,cAAD,CAAlB,EAAoC,IAAA2B,gBAAA,EAAQP,MAAR,CAApC,EAAqDf,YAArD,CAFJ;EAIA,MAAMG,WAAW,GAAGgB,aAAa,CAAChB,WAAd,GAA4BL,YAAY,GAAG,CAA/D;EAEA,MAAMyB,gBAAgB,GAAG;IACvBhB,eADuB;IAEvBO,YAFuB;IAGvBU,KAAK,EAAErB,WAHgB;IAIvBsB,MAAM,EAAEtB,WAJe;IAKvBuB,OAAO,EAAE5B;EALc,CAAzB;EAQA,oBACE;IAAK,SAAS,EAAE6B,cAAA,CAAMC,WAAtB;IAAmC,KAAK,eAAML,gBAAN,EAA2BN,WAA3B;EAAxC,gBACE,6BAAC,iCAAD;IACE,IAAI,EAAG,MAAKL,QAAS,EADvB;IAEE,KAAK,EAAEM,kBAFT;IAGE,QAAQ,EAAEC,aAAa,CAACjB;EAH1B,EADF,CADF;AASD,CAnCY,CAAb;;AAqCAO,IAAI,CAACoB,SAAL,2CAAiB;EACfjB,QAAQ,EAAEkB,kBAAA,CAAUC,MAAV,CAAiBC,UADZ;EAEfnB,SAAS,EAAEiB,kBAAA,CAAUC,MAFN;EAGfxB,eAAe,EAAEuB,kBAAA,CAAUC,MAHZ;EAIfjB,YAAY,EAAEgB,kBAAA,CAAUC,MAJT;EAKfhB,MAAM,EAAEe,kBAAA,CAAUG,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,IAAX,CAAhB,CALO;EAMfjB,IAAI,EAAEc,kBAAA,CAAUI,KAAV,CAAgB;IACpBhC,MAAM,EAAEiC,iBADY;IAEpBhC,WAAW,EAAE2B,kBAAA,CAAUK;EAFH,CAAhB,CANS;EAUflB,WAAW,EAAEa,kBAAA,CAAUM,QAAV,CAAmBN,kBAAA,CAAUO,SAAV,CAAoB,CAACP,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUK,MAA7B,CAApB,CAAnB;AAVE,CAAjB;eAae1B,I"}
+{"version":3,"file":"index.js","names":["library","add","fas","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","createGradientBackground","baseColor","startColor","convert","endColor","getForegroundColor","backgroundColor","Icon","React","memo","iconName","iconColor","gradientBackground","borderRadius","preset","size","customStyle","effectiveIconColor","effectiveSize","merge","getOr","toLower","iconWrapperStyle","background","width","height","padding","style","iconWrapper","propTypes","PropTypes","string","isRequired","bool","oneOf","shape","number","objectOf","oneOfType"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes, {number} from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport {convert} from 'css-color-function';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nconst ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n  s: {\n    faSize: 12,\n    wrapperSize: 32\n  },\n  m: {\n    faSize: 16,\n    wrapperSize: DEFAULT_WRAPPER_SIZE\n  },\n  xl: {\n    faSize: 20,\n    wrapperSize: 48\n  }\n};\n\nexport const createGradientBackground = baseColor => {\n  const startColor = convert(`color(${baseColor} lightness(91%))`);\n  const endColor = convert(`color(${baseColor} lightness(81%))`);\n  return `linear-gradient(180deg, ${startColor} 0%, ${endColor} 100%)`;\n};\n\nexport const getForegroundColor = backgroundColor =>\n  convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);\n// set lightness to 32%\n\nconst Icon = React.memo(function Icon({\n  iconName,\n  iconColor,\n  backgroundColor,\n  gradientBackground,\n  borderRadius,\n  preset = DEFAULT_PRESET,\n  size,\n  customStyle\n}) {\n  const effectiveIconColor =\n    iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);\n\n  const effectiveSize = size\n    ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n    : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n\n  const iconWrapperStyle = {\n    background: gradientBackground ? createGradientBackground(effectiveIconColor) : backgroundColor,\n    borderRadius,\n    width: wrapperSize,\n    height: wrapperSize,\n    padding: ICON_PADDING\n  };\n\n  return (\n    <div className={style.iconWrapper} style={{...iconWrapperStyle, ...customStyle}}>\n      <FontAwesomeIcon\n        icon={`fa-${iconName}`}\n        color={effectiveIconColor}\n        fontSize={effectiveSize.faSize}\n      />\n    </div>\n  );\n});\n\nIcon.propTypes = {\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  gradientBackground: PropTypes.bool,\n  borderRadius: PropTypes.string,\n  preset: PropTypes.oneOf(['s', 'm', 'xl']),\n  size: PropTypes.shape({\n    faSize: number,\n    wrapperSize: PropTypes.number\n  }),\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default Icon;\n"],"mappings":"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"}

package/lib/atom/input-file-draggable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["InputFileDraggable","title","description","previewLabel","previewContent","uploadLabel","loading","modified","disabled","disableHoverTooltip","onChange","onReset","name","labelLink","labelButtonLink","hrefLink","filesTypes","error","buttonAriaLabel","errorButtonLabel","pdfButtonLabel","pdfButtonAriaLabel","filesNumber","multiple","required","onClick","handleReset","useCallback","e","preventDefault","linkCustomStyle","width","color","onClick_","onDragStart","onDragStop","style","input","templateLink","href","download","multipleFilesContainer","icon","seeDetailsButton","seeIcon","propTypes","DragAndDrop","PropTypes","bool","string","func","FilesPropType"],"sources":["../../../src/atom/input-file-draggable/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isNil} from 'lodash/fp';\nimport {\n  NovaSolidFilesBasicFileLines as FileLinesIcon,\n  NovaCompositionCoorpacademyEye as EyeIcon\n} from '@coorpacademy/nova-icons';\nimport DragAndDrop from '../drag-and-drop';\nimport Link from '../button-link';\nimport {FilesPropType} from '../../util/proptypes';\nimport style from './style.css';\n\nconst InputFileDraggable = ({\n  title,\n  description,\n  previewLabel,\n  previewContent,\n  uploadLabel,\n  loading,\n  modified,\n  disabled = false,\n  disableHoverTooltip = false,\n  onChange,\n  onReset = null,\n  name,\n  labelLink,\n  labelButtonLink,\n  hrefLink,\n  filesTypes = '',\n  error = '',\n  buttonAriaLabel,\n  errorButtonLabel,\n  pdfButtonLabel,\n  pdfButtonAriaLabel,\n  filesNumber = 0,\n  multiple = false,\n  required = false,\n  onClick\n}) => {\n  const handleReset = useCallback(\n    e => {\n      if (isNil(onReset)) return;\n      e.preventDefault();\n      return onReset(e);\n    },\n    [onReset]\n  );\n\n  const linkCustomStyle = {\n    width: '40px',\n    color: '#FF541F'\n  };\n\n  const onClick_ = useCallback(\n    e => {\n      e.preventDefault();\n      return onClick(e);\n    },\n    [onClick]\n  );\n\n  return (\n    <>\n      <DragAndDrop\n        title={title}\n        description={description}\n        previewLabel={previewLabel}\n        previewContent={previewContent}\n        uploadLabel={uploadLabel}\n        loading={loading}\n        modified={modified}\n        onReset={handleReset}\n        error={error}\n        disabled={disabled}\n        disableHoverTooltip={disableHoverTooltip}\n        buttonAriaLabel={buttonAriaLabel}\n        errorButtonLabel={errorButtonLabel}\n        pdfButtonLabel={pdfButtonLabel}\n        pdfButtonAriaLabel={pdfButtonAriaLabel}\n        multiple={multiple}\n      >\n        {(onDragStart, onDragStop) => (\n          <input\n            {...(disableHoverTooltip ? {title: ''} : {})}\n            type=\"file\"\n            name={name}\n            accept={filesTypes}\n            disabled={loading || disabled}\n            className={style.input}\n            onChange={onChange}\n            onDragEnter={onDragStart}\n            onDrop={onDragStop}\n            onDragLeave={onDragStop}\n            multiple={multiple}\n            required={required}\n          />\n        )}\n      </DragAndDrop>\n      {labelLink && hrefLink ? (\n        <div className={style.templateLink}>\n          {labelLink}\n          <Link\n            type=\"text\"\n            customStyle={linkCustomStyle}\n            link={{href: hrefLink, download: true}}\n            label={labelButtonLink}\n          />\n        </div>\n      ) : null}\n      {multiple && filesNumber > 0 ? (\n        <div className={style.multipleFilesContainer}>\n          <div className={style.filesNumber}>\n            <FileLinesIcon className={style.icon} />\n            <div>{filesNumber} files</div>\n          </div>\n          <div className={style.seeDetailsButton} onClick={onClick_}>\n            <EyeIcon className={style.seeIcon} />\n            <div>See details</div>\n          </div>\n        </div>\n      ) : null}\n    </>\n  );\n};\n\nInputFileDraggable.propTypes = {\n  ...DragAndDrop.propTypes,\n  disableHoverTooltip: PropTypes.bool,\n  name: PropTypes.string,\n  onChange: PropTypes.func,\n  onReset: PropTypes.func,\n  filesTypes: FilesPropType,\n  error: PropTypes.string,\n  buttonAriaLabel: PropTypes.string,\n  errorButtonLabel: PropTypes.string,\n  labelLink: PropTypes.string,\n  hrefLink: PropTypes.string\n};\n\nexport default InputFileDraggable;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["InputFileDraggable","title","description","previewLabel","previewContent","uploadLabel","loading","modified","disabled","disableHoverTooltip","onChange","onReset","name","labelLink","labelButtonLink","hrefLink","filesTypes","error","buttonAriaLabel","errorButtonLabel","pdfButtonLabel","pdfButtonAriaLabel","filesNumber","multiple","required","onClick","handleReset","useCallback","e","preventDefault","linkCustomStyle","width","color","onClick_","onDragStart","onDragStop","style","input","templateLink","href","download","multipleFilesContainer","icon","seeDetailsButton","seeIcon","propTypes","DragAndDrop","PropTypes","bool","string","func","FilesPropType"],"sources":["../../../src/atom/input-file-draggable/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isNil} from 'lodash/fp';\nimport {\n  NovaSolidFilesBasicFileLines as FileLinesIcon,\n  NovaCompositionCoorpacademyEye as EyeIcon\n} from '@coorpacademy/nova-icons';\nimport DragAndDrop from '../drag-and-drop';\nimport ButtonLink from '../button-link';\nimport {FilesPropType} from '../../util/proptypes';\nimport style from './style.css';\n\nconst InputFileDraggable = ({\n  title,\n  description,\n  previewLabel,\n  previewContent,\n  uploadLabel,\n  loading,\n  modified,\n  disabled = false,\n  disableHoverTooltip = false,\n  onChange,\n  onReset = null,\n  name,\n  labelLink,\n  labelButtonLink,\n  hrefLink,\n  filesTypes = '',\n  error = '',\n  buttonAriaLabel,\n  errorButtonLabel,\n  pdfButtonLabel,\n  pdfButtonAriaLabel,\n  filesNumber = 0,\n  multiple = false,\n  required = false,\n  onClick\n}) => {\n  const handleReset = useCallback(\n    e => {\n      if (isNil(onReset)) return;\n      e.preventDefault();\n      return onReset(e);\n    },\n    [onReset]\n  );\n\n  const linkCustomStyle = {\n    width: '40px',\n    color: '#FF541F'\n  };\n\n  const onClick_ = useCallback(\n    e => {\n      e.preventDefault();\n      return onClick(e);\n    },\n    [onClick]\n  );\n\n  return (\n    <>\n      <DragAndDrop\n        title={title}\n        description={description}\n        previewLabel={previewLabel}\n        previewContent={previewContent}\n        uploadLabel={uploadLabel}\n        loading={loading}\n        modified={modified}\n        onReset={handleReset}\n        error={error}\n        disabled={disabled}\n        disableHoverTooltip={disableHoverTooltip}\n        buttonAriaLabel={buttonAriaLabel}\n        errorButtonLabel={errorButtonLabel}\n        pdfButtonLabel={pdfButtonLabel}\n        pdfButtonAriaLabel={pdfButtonAriaLabel}\n        multiple={multiple}\n      >\n        {(onDragStart, onDragStop) => (\n          <input\n            {...(disableHoverTooltip ? {title: ''} : {})}\n            type=\"file\"\n            name={name}\n            accept={filesTypes}\n            disabled={loading || disabled}\n            className={style.input}\n            onChange={onChange}\n            onDragEnter={onDragStart}\n            onDrop={onDragStop}\n            onDragLeave={onDragStop}\n            multiple={multiple}\n            required={required}\n          />\n        )}\n      </DragAndDrop>\n      {labelLink && hrefLink ? (\n        <div className={style.templateLink}>\n          {labelLink}\n          <ButtonLink\n            type=\"text\"\n            customStyle={linkCustomStyle}\n            link={{href: hrefLink, download: true}}\n            label={labelButtonLink}\n          />\n        </div>\n      ) : null}\n      {multiple && filesNumber > 0 ? (\n        <div className={style.multipleFilesContainer}>\n          <div className={style.filesNumber}>\n            <FileLinesIcon className={style.icon} />\n            <div>{filesNumber} files</div>\n          </div>\n          <div className={style.seeDetailsButton} onClick={onClick_}>\n            <EyeIcon className={style.seeIcon} />\n            <div>See details</div>\n          </div>\n        </div>\n      ) : null}\n    </>\n  );\n};\n\nInputFileDraggable.propTypes = {\n  ...DragAndDrop.propTypes,\n  disableHoverTooltip: PropTypes.bool,\n  name: PropTypes.string,\n  onChange: PropTypes.func,\n  onReset: PropTypes.func,\n  filesTypes: FilesPropType,\n  error: PropTypes.string,\n  buttonAriaLabel: PropTypes.string,\n  errorButtonLabel: PropTypes.string,\n  labelLink: PropTypes.string,\n  hrefLink: PropTypes.string\n};\n\nexport default InputFileDraggable;\n"],"mappings":"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"}

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

@@ -9,11 +9,11 @@ declare namespace Link {
         'aria-label': PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
         target: PropTypes.Requireable<string>;
-        skinHover: PropTypes.Requireable<boolean>;
         hoverColor: PropTypes.Requireable<string>;
+        hoverBackgroundColor: PropTypes.Requireable<string>;
         download: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         useButtonTag: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<PropTypes.InferProps<{}>>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA,mEA6GC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA,mEAwEC"}

package/lib/atom/link/index.js

@@ -5,19 +5,17 @@ exports.default = void 0;
 
 var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
 
-var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
-
 var _identity2 = _interopRequireDefault(require("lodash/fp/identity"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _provider = _interopRequireWildcard(require("../provider"));
+var _provider = _interopRequireDefault(require("../provider"));
 
 var _navigation = _interopRequireDefault(require("../../util/navigation"));
 
-const _excluded = ["skinHover", "hoverColor", "data-name", "aria-label", "useButtonTag"];
+const _excluded = ["hoverColor", "hoverBackgroundColor", "data-name", "useButtonTag", "href", "onClick", "style", "children", "onMouseOver", "onMouseLeave", "download", "disabled"];
 
 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); }
 
@@ -30,7 +28,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 const Link = (props, legacyContext) => {
-  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
   const [hovered, setHovered] = (0, _react.useState)(false);
   const {
     history: {
@@ -39,66 +36,60 @@ const Link = (props, legacyContext) => {
   } = legacyContext;
 
   const {
-    skinHover,
-    hoverColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin),
+    hoverColor,
+    hoverBackgroundColor,
     'data-name': dataName = 'link',
-    'aria-label': ariaLabel,
-    useButtonTag = false
-  } = props,
-        linKElementProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const {
+    useButtonTag = false,
     href,
     onClick = _noop2.default,
-    className,
-    style: propsStyle,
+    style: customStyle,
     children,
+    onMouseOver = _noop2.default,
     onMouseLeave = _noop2.default,
-    onMouseEnter = _noop2.default,
     download,
     disabled
-  } = props;
-  const handleMouseEnter = (0, _react.useCallback)(() => {
+  } = props,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const navigate = (0, _react.useMemo)(() => (0, _navigation.default)(legacyContext)({
+    href
+  }), [href, legacyContext]);
+  const handleMouseOver = (0, _react.useCallback)(() => {
     setHovered(true);
-    onMouseEnter();
-  }, [onMouseEnter]);
+    onMouseOver();
+  }, [onMouseOver]);
   const handleMouseLeave = (0, _react.useCallback)(() => {
     setHovered(false);
     onMouseLeave();
   }, [onMouseLeave]);
-  const navigate = (0, _react.useMemo)(() => (0, _navigation.default)(legacyContext)({
-    href
-  }), [href, legacyContext]);
   const handleOnClick = (0, _react.useCallback)(e => {
     onClick(e);
-
-    if (!download) {
-      navigate(e);
-    }
+    if (!download) navigate(e);
   }, [download, navigate, onClick]);
 
-  const _style = (0, _react.useMemo)(() => href || onClick ? null : {
-    pointerEvents: 'none'
-  }, [href, onClick]);
-
-  const _hoverStyle = (0, _react.useMemo)(() => skinHover && hovered ? {
+  const style = _extends({}, customStyle, hovered && hoverBackgroundColor ? {
+    backgroundColor: hoverBackgroundColor
+  } : undefined, hovered && hoverColor ? {
     color: hoverColor
-  } : null, [hoverColor, hovered, skinHover]);
+  } : undefined, {
+    pointerEvents: disabled || !href ? 'none' : undefined
+  });
 
-  const _props = (0, _react.useMemo)(() => _extends({}, linKElementProps, {
-    'data-name': dataName,
-    'aria-label': ariaLabel,
+  return useButtonTag ? /*#__PURE__*/_react.default.createElement("button", _extends({}, restProps, {
+    "data-name": dataName,
+    type: "button",
+    onClick: disabled ? _noop2.default : handleOnClick,
+    style: style,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }), children) : /*#__PURE__*/_react.default.createElement("a", _extends({}, restProps, {
+    "data-name": dataName,
     href: disabled || !href ? undefined : createHref(href),
     onClick: disabled ? _noop2.default : handleOnClick,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    className,
-    style: _extends({}, propsStyle, _style, _hoverStyle)
-  }), [_hoverStyle, _style, ariaLabel, className, dataName, handleMouseEnter, handleMouseLeave, handleOnClick, href, disabled, createHref, linKElementProps, propsStyle]);
-
-  return useButtonTag ? /*#__PURE__*/_react.default.createElement("button", _extends({}, _props, {
-    type: "button"
-  }), children) : /*#__PURE__*/_react.default.createElement("a", _props, children);
+    style: style,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }), children);
 };
 
 Link.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -109,11 +100,11 @@ Link.propTypes = process.env.NODE_ENV !== "production" ? {
   'aria-label': _propTypes.default.string,
   title: _propTypes.default.string,
   target: _propTypes.default.oneOf(['_self', '_blank', '_parent', '_top']),
-  skinHover: _propTypes.default.bool,
   hoverColor: _propTypes.default.string,
+  hoverBackgroundColor: _propTypes.default.string,
   download: _propTypes.default.bool,
   onClick: _propTypes.default.func,
-  onMouseEnter: _propTypes.default.func,
+  onMouseOver: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func,
   useButtonTag: _propTypes.default.bool,
   style: _propTypes.default.shape({}),