@coorpacademy/components 11.32.26 → 11.32.28

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

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import Provider from '../../atom/provider';
 import Tag from '../../atom/tag';
 import Select, { SelectOptionPropTypes } from '../../atom/select';
+import ButtonLinkIcon from '../../atom/button-link-icon';
 import Icon from '../../atom/icon';
 import CardsGrid from '../../organism/cards-grid';
 import AllCourses from '../skill-detail/all-courses';
@@ -42,16 +43,14 @@ const PlaylistDetail = (props, context) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: style.container,
     "data-name": playlistRef
-  }, /*#__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", {
+  }, /*#__PURE__*/React.createElement(ButtonLinkIcon, {
+    faIcon: "arrow-left",
+    "data-name": "back-button",
+    "aria-label": "Back",
+    onClick: onBackClick,
+    className: style.backButton,
+    tooltipPlacement: "right"
+  }), /*#__PURE__*/React.createElement("div", {
     className: style.ctaContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: style.coverWrapper

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","Icon","CardsGrid","AllCourses","ContinueLearning","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","coverWrapper","length","showMoreWrapper","continueLearningButton","list","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","shape","number","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport ContinueLearning from '../skill-detail/continue-learning';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCourses,\n    playlistCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon iconName=\"arrow-left\" size={{faSize: 14, wrapperSize: 14}} />\n        </div>\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={!!ongoingCourses.list.length}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          courses={playlistCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearning","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","list","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","shape","number","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport ContinueLearning from '../skill-detail/continue-learning';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCourses,\n    playlistCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={!!ongoingCourses.list.length}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          courses={playlistCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

package/es/template/playlist-detail/style.css

@@ -35,13 +35,8 @@
   max-width: calc(1080px + 40px);
 }
 
-.backButtonWrapper {
+.backButton {
   margin-bottom: 16px;
-  background-color: cm_grey_100;
-  border-radius: 8px;
-  width: fit-content;
-  padding: 8px;
-  cursor: pointer;
 }
 
 .ctaContainer {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAcO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEA+JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEA8JC"}

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import Provider from '../../atom/provider';
 import Select, { SelectOptionPropTypes } from '../../atom/select';
 import ButtonLink from '../../atom/button-link';
+import ButtonLinkIcon from '../../atom/button-link-icon';
 import Icon from '../../atom/icon';
 import CardsGrid from '../../organism/cards-grid';
 import style from './style.css';
@@ -107,16 +108,14 @@ const SkillDetail = (props, context) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: style.container,
     "data-name": skillRef
-  }, /*#__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", {
+  }, /*#__PURE__*/React.createElement(ButtonLinkIcon, {
+    faIcon: "arrow-left",
+    "data-name": "back-button",
+    "aria-label": "Back",
+    onClick: onBackClick,
+    className: style.backButton,
+    tooltipPlacement: "right"
+  }), /*#__PURE__*/React.createElement("div", {
     className: style.ctaContainer
   }, /*#__PURE__*/React.createElement("div", null, focused ? /*#__PURE__*/React.createElement("div", {
     className: style.skillFocusBadge

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

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

package/es/template/skill-detail/style.css

@@ -35,13 +35,8 @@
   max-width: calc(1080px + 40px);
 }
 
-.backButtonWrapper {
+.backButton {
   margin-bottom: 16px;
-  background-color: cm_grey_100;
-  border-radius: 8px;
-  width: fit-content;
-  padding: 8px;
-  cursor: pointer;
 }
 
 .ctaContainer {

package/lib/atom/{button-link-icon-only → button-link-icon}/index.d.ts

@@ -1,11 +1,12 @@
-export default ButtonLinkIconOnly;
-declare function ButtonLinkIconOnly(props: any): JSX.Element;
-declare namespace ButtonLinkIconOnly {
+export default ButtonLinkIcon;
+declare function ButtonLinkIcon(props: any): JSX.Element;
+declare namespace ButtonLinkIcon {
     const propTypes: {
         size: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
         'data-name': PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<string>;
+        faIcon: PropTypes.Requireable<string>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         link: PropTypes.Requireable<PropTypes.InferProps<{
             href: PropTypes.Requireable<string>;
@@ -14,6 +15,7 @@ declare namespace ButtonLinkIconOnly {
         }>>;
         disabled: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
+        tooltipPlacement: PropTypes.Requireable<string>;
     };
 }
 import PropTypes from "prop-types";

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link-icon/index.js"],"names":[],"mappings":";AAoCA,yDAoHC"}

package/lib/atom/{button-link-icon-only → button-link-icon}/index.js

@@ -15,8 +15,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _buttonIcons = require("../../util/button-icons");
 
+var _icon = _interopRequireDefault(require("../icon"));
+
 var _link = _interopRequireDefault(require("../link"));
 
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,10 +31,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const getButtonContent = icon => {
+const getButtonContent = (icon, faIcon) => {
   const Icon = (0, _getOr2.default)(null, icon, _buttonIcons.ICONS);
 
-  if (!Icon) {
+  if (!Icon && !faIcon) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.buttonContent
     });
@@ -38,7 +42,9 @@ const getButtonContent = icon => {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.buttonContent
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
+  }, faIcon ? /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: faIcon
+  }) : /*#__PURE__*/_react.default.createElement(Icon, {
     className: _style.default.icon
   }));
 };
@@ -56,31 +62,52 @@ const getSizeStyle = size => {
   }
 };
 
-const ButtonLinkIconOnly = props => {
+const ButtonLinkIcon = props => {
   const {
     size = 'default',
     disabled,
     icon,
+    faIcon,
     'data-name': dataName,
     'aria-label': ariaLabel,
     link,
     onClick,
-    className
+    className,
+    tooltipPlacement = 'left'
   } = props;
-  const contentView = getButtonContent(icon);
-  const styleButton = (0, _classnames.default)(getSizeStyle(size), link && _style.default.link, disabled && _style.default.disabled, _style.default[className]);
+  const [toolTipIsVisible, setToolTipIsVisible] = (0, _react.useState)(false);
+  const timer = (0, _react.useRef)();
+  const contentView = getButtonContent(icon, faIcon);
+  const styleButton = (0, _classnames.default)(getSizeStyle(size), link && _style.default.link, disabled && _style.default.disabled, className);
   const handleOnClick = (0, _react.useMemo)(() => () => onClick(), [onClick]);
-
-  if (link) {
-    return /*#__PURE__*/_react.default.createElement(_link.default, _extends({}, link, {
-      className: styleButton,
-      "data-name": dataName,
-      "aria-label": ariaLabel,
-      title: ariaLabel
-    }), contentView);
-  }
-
-  return /*#__PURE__*/_react.default.createElement("button", {
+  const handleMouseOver = (0, _react.useCallback)(() => {
+    timer.current && clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setToolTipIsVisible(true);
+      timer.current = undefined;
+    }, 300);
+  }, [timer, setToolTipIsVisible]);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    timer.current && clearTimeout(timer.current);
+    setToolTipIsVisible(false);
+  }, [timer, setToolTipIsVisible]);
+  const TooltipContent = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.tooltipContentWrapper
+  }, ariaLabel), [ariaLabel]);
+  const Button = (0, _react.useCallback)(() => link ? /*#__PURE__*/_react.default.createElement(_link.default, _extends({}, link, ariaLabel ? {
+    'data-for': 'button-icon',
+    'data-tip': toolTipIsVisible
+  } : {}, {
+    className: styleButton,
+    "data-name": dataName,
+    "aria-label": ariaLabel,
+    title: ariaLabel,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver
+  }), contentView) : /*#__PURE__*/_react.default.createElement("button", _extends({}, ariaLabel ? {
+    'data-for': 'button-icon',
+    'data-tip': toolTipIsVisible
+  } : {}, {
     type: "button",
     "aria-label": ariaLabel,
     "data-name": dataName,
@@ -88,15 +115,26 @@ const ButtonLinkIconOnly = props => {
     title: ariaLabel,
     className: styleButton,
     onClick: handleOnClick,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver,
     disabled: disabled
-  }, contentView);
+  }), contentView), [link, ariaLabel, className, contentView, dataName, disabled, handleMouseLeave, handleMouseOver, handleOnClick, styleButton, toolTipIsVisible]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Button, null), ariaLabel ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    fontSize: 12,
+    anchorId: "button-icon",
+    toolTipIsVisible: toolTipIsVisible,
+    placement: tooltipPlacement,
+    TooltipContent: TooltipContent,
+    closeToolTipInformationTextAriaLabel: ariaLabel
+  }) : null);
 };
 
-ButtonLinkIconOnly.propTypes = process.env.NODE_ENV !== "production" ? {
+ButtonLinkIcon.propTypes = process.env.NODE_ENV !== "production" ? {
   size: _propTypes.default.oneOf(['default', 'small', 'responsive']),
   'aria-label': _propTypes.default.string,
   'data-name': _propTypes.default.string,
   icon: _propTypes.default.oneOf((0, _keys2.default)(_buttonIcons.ICONS)),
+  faIcon: _propTypes.default.string,
   onClick: _propTypes.default.func,
   link: _propTypes.default.shape({
     href: _propTypes.default.string,
@@ -104,8 +142,9 @@ ButtonLinkIconOnly.propTypes = process.env.NODE_ENV !== "production" ? {
     target: _propTypes.default.oneOf(['_self', '_blank', '_parent', '_top'])
   }),
   disabled: _propTypes.default.bool,
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  tooltipPlacement: _propTypes.default.oneOf(['left', 'right', 'top', 'bottom'])
 } : {};
-var _default = ButtonLinkIconOnly;
+var _default = ButtonLinkIcon;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getButtonContent","icon","faIcon","Icon","ICONS","style","buttonContent","getSizeStyle","size","small","responsive","default","ButtonLinkIcon","props","disabled","dataName","ariaLabel","link","onClick","className","tooltipPlacement","toolTipIsVisible","setToolTipIsVisible","useState","timer","useRef","contentView","styleButton","classnames","handleOnClick","useMemo","handleMouseOver","useCallback","current","clearTimeout","setTimeout","undefined","handleMouseLeave","TooltipContent","tooltipContentWrapper","Button","propTypes","PropTypes","oneOf","string","func","shape","href","download","bool","target"],"sources":["../../../src/atom/button-link-icon/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport FaIcon from '../icon';\nimport Link from '../link';\nimport ToolTip from '../tooltip';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst getButtonContent = (icon, faIcon) => {\n  const Icon = getOr(null, icon, ICONS);\n\n  if (!Icon && !faIcon) {\n    return <div className={style.buttonContent} />;\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      {faIcon ? <FaIcon iconName={faIcon} /> : <Icon className={style.icon} />}\n    </div>\n  );\n};\n\nconst getSizeStyle = size => {\n  switch (size) {\n    case 'small':\n      return style.small;\n    case 'responsive':\n      return style.responsive;\n    default:\n      return style.default;\n  }\n};\n\nconst ButtonLinkIcon = props => {\n  const {\n    size = 'default',\n    disabled,\n    icon,\n    faIcon,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    link,\n    onClick,\n    className,\n    tooltipPlacement = 'left'\n  } = props;\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n  const timer = useRef();\n\n  const contentView = getButtonContent(icon, faIcon);\n  const styleButton = classnames(\n    getSizeStyle(size),\n    link && style.link,\n    disabled && style.disabled,\n    className\n  );\n\n  const handleOnClick = useMemo(() => () => onClick(), [onClick]);\n\n  const handleMouseOver = useCallback(() => {\n    timer.current && clearTimeout(timer.current);\n    timer.current = setTimeout(() => {\n      setToolTipIsVisible(true);\n      timer.current = undefined;\n    }, 300);\n  }, [timer, setToolTipIsVisible]);\n\n  const handleMouseLeave = useCallback(() => {\n    timer.current && clearTimeout(timer.current);\n    setToolTipIsVisible(false);\n  }, [timer, setToolTipIsVisible]);\n\n  const TooltipContent = useCallback(\n    () => <span className={style.tooltipContentWrapper}>{ariaLabel}</span>,\n    [ariaLabel]\n  );\n\n  const Button = useCallback(\n    () =>\n      link ? (\n        <Link\n          {...link}\n          {...(ariaLabel\n            ? {\n                'data-for': 'button-icon',\n                'data-tip': toolTipIsVisible\n              }\n            : {})}\n          className={styleButton}\n          data-name={dataName}\n          aria-label={ariaLabel}\n          title={ariaLabel}\n          onMouseLeave={handleMouseLeave}\n          onMouseOver={handleMouseOver}\n        >\n          {contentView}\n        </Link>\n      ) : (\n        <button\n          {...(ariaLabel\n            ? {\n                'data-for': 'button-icon',\n                'data-tip': toolTipIsVisible\n              }\n            : {})}\n          type=\"button\"\n          aria-label={ariaLabel}\n          data-name={dataName}\n          data-testid={`button-${dataName}-${className}`}\n          title={ariaLabel}\n          className={styleButton}\n          onClick={handleOnClick}\n          onMouseLeave={handleMouseLeave}\n          onMouseOver={handleMouseOver}\n          disabled={disabled}\n        >\n          {contentView}\n        </button>\n      ),\n    [\n      link,\n      ariaLabel,\n      className,\n      contentView,\n      dataName,\n      disabled,\n      handleMouseLeave,\n      handleMouseOver,\n      handleOnClick,\n      styleButton,\n      toolTipIsVisible\n    ]\n  );\n\n  return (\n    <>\n      <Button />\n      {ariaLabel ? (\n        <ToolTip\n          fontSize={12}\n          anchorId=\"button-icon\"\n          toolTipIsVisible={toolTipIsVisible}\n          placement={tooltipPlacement}\n          TooltipContent={TooltipContent}\n          closeToolTipInformationTextAriaLabel={ariaLabel}\n        />\n      ) : null}\n    </>\n  );\n};\n\nButtonLinkIcon.propTypes = {\n  size: PropTypes.oneOf(['default', 'small', 'responsive']),\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.oneOf(keys(ICONS)),\n  faIcon: PropTypes.string,\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  tooltipPlacement: PropTypes.oneOf(['left', 'right', 'top', 'bottom'])\n};\n\nexport default ButtonLinkIcon;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,IAAD,EAAOC,MAAP,KAAkB;EACzC,MAAMC,IAAI,GAAG,qBAAM,IAAN,EAAYF,IAAZ,EAAkBG,kBAAlB,CAAb;;EAEA,IAAI,CAACD,IAAD,IAAS,CAACD,MAAd,EAAsB;IACpB,oBAAO;MAAK,SAAS,EAAEG,cAAA,CAAMC;IAAtB,EAAP;EACD;;EAED,oBACE;IAAK,SAAS,EAAED,cAAA,CAAMC;EAAtB,GACGJ,MAAM,gBAAG,6BAAC,aAAD;IAAQ,QAAQ,EAAEA;EAAlB,EAAH,gBAAkC,6BAAC,IAAD;IAAM,SAAS,EAAEG,cAAA,CAAMJ;EAAvB,EAD3C,CADF;AAKD,CAZD;;AAcA,MAAMM,YAAY,GAAGC,IAAI,IAAI;EAC3B,QAAQA,IAAR;IACE,KAAK,OAAL;MACE,OAAOH,cAAA,CAAMI,KAAb;;IACF,KAAK,YAAL;MACE,OAAOJ,cAAA,CAAMK,UAAb;;IACF;MACE,OAAOL,cAAA,CAAMM,OAAb;EANJ;AAQD,CATD;;AAWA,MAAMC,cAAc,GAAGC,KAAK,IAAI;EAC9B,MAAM;IACJL,IAAI,GAAG,SADH;IAEJM,QAFI;IAGJb,IAHI;IAIJC,MAJI;IAKJ,aAAaa,QALT;IAMJ,cAAcC,SANV;IAOJC,IAPI;IAQJC,OARI;IASJC,SATI;IAUJC,gBAAgB,GAAG;EAVf,IAWFP,KAXJ;EAYA,MAAM,CAACQ,gBAAD,EAAmBC,mBAAnB,IAA0C,IAAAC,eAAA,EAAS,KAAT,CAAhD;EACA,MAAMC,KAAK,GAAG,IAAAC,aAAA,GAAd;EAEA,MAAMC,WAAW,GAAG1B,gBAAgB,CAACC,IAAD,EAAOC,MAAP,CAApC;EACA,MAAMyB,WAAW,GAAG,IAAAC,mBAAA,EAClBrB,YAAY,CAACC,IAAD,CADM,EAElBS,IAAI,IAAIZ,cAAA,CAAMY,IAFI,EAGlBH,QAAQ,IAAIT,cAAA,CAAMS,QAHA,EAIlBK,SAJkB,CAApB;EAOA,MAAMU,aAAa,GAAG,IAAAC,cAAA,EAAQ,MAAM,MAAMZ,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAAtB;EAEA,MAAMa,eAAe,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACxCR,KAAK,CAACS,OAAN,IAAiBC,YAAY,CAACV,KAAK,CAACS,OAAP,CAA7B;IACAT,KAAK,CAACS,OAAN,GAAgBE,UAAU,CAAC,MAAM;MAC/Bb,mBAAmB,CAAC,IAAD,CAAnB;MACAE,KAAK,CAACS,OAAN,GAAgBG,SAAhB;IACD,CAHyB,EAGvB,GAHuB,CAA1B;EAID,CANuB,EAMrB,CAACZ,KAAD,EAAQF,mBAAR,CANqB,CAAxB;EAQA,MAAMe,gBAAgB,GAAG,IAAAL,kBAAA,EAAY,MAAM;IACzCR,KAAK,CAACS,OAAN,IAAiBC,YAAY,CAACV,KAAK,CAACS,OAAP,CAA7B;IACAX,mBAAmB,CAAC,KAAD,CAAnB;EACD,CAHwB,EAGtB,CAACE,KAAD,EAAQF,mBAAR,CAHsB,CAAzB;EAKA,MAAMgB,cAAc,GAAG,IAAAN,kBAAA,EACrB,mBAAM;IAAM,SAAS,EAAE3B,cAAA,CAAMkC;EAAvB,GAA+CvB,SAA/C,CADe,EAErB,CAACA,SAAD,CAFqB,CAAvB;EAKA,MAAMwB,MAAM,GAAG,IAAAR,kBAAA,EACb,MACEf,IAAI,gBACF,6BAAC,aAAD,eACMA,IADN,EAEOD,SAAS,GACV;IACE,YAAY,aADd;IAEE,YAAYK;EAFd,CADU,GAKV,EAPN;IAQE,SAAS,EAAEM,WARb;IASE,aAAWZ,QATb;IAUE,cAAYC,SAVd;IAWE,KAAK,EAAEA,SAXT;IAYE,YAAY,EAAEqB,gBAZhB;IAaE,WAAW,EAAEN;EAbf,IAeGL,WAfH,CADE,gBAmBF,oDACOV,SAAS,GACV;IACE,YAAY,aADd;IAEE,YAAYK;EAFd,CADU,GAKV,EANN;IAOE,IAAI,EAAC,QAPP;IAQE,cAAYL,SARd;IASE,aAAWD,QATb;IAUE,eAAc,UAASA,QAAS,IAAGI,SAAU,EAV/C;IAWE,KAAK,EAAEH,SAXT;IAYE,SAAS,EAAEW,WAZb;IAaE,OAAO,EAAEE,aAbX;IAcE,YAAY,EAAEQ,gBAdhB;IAeE,WAAW,EAAEN,eAff;IAgBE,QAAQ,EAAEjB;EAhBZ,IAkBGY,WAlBH,CArBS,EA0Cb,CACET,IADF,EAEED,SAFF,EAGEG,SAHF,EAIEO,WAJF,EAKEX,QALF,EAMED,QANF,EAOEuB,gBAPF,EAQEN,eARF,EASEF,aATF,EAUEF,WAVF,EAWEN,gBAXF,CA1Ca,CAAf;EAyDA,oBACE,yEACE,6BAAC,MAAD,OADF,EAEGL,SAAS,gBACR,6BAAC,gBAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAC,aAFX;IAGE,gBAAgB,EAAEK,gBAHpB;IAIE,SAAS,EAAED,gBAJb;IAKE,cAAc,EAAEkB,cALlB;IAME,oCAAoC,EAAEtB;EANxC,EADQ,GASN,IAXN,CADF;AAeD,CApHD;;AAsHAJ,cAAc,CAAC6B,SAAf,2CAA2B;EACzBjC,IAAI,EAAEkC,kBAAA,CAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,OAAZ,EAAqB,YAArB,CAAhB,CADmB;EAEzB,cAAcD,kBAAA,CAAUE,MAFC;EAGzB,aAAaF,kBAAA,CAAUE,MAHE;EAIzB3C,IAAI,EAAEyC,kBAAA,CAAUC,KAAV,CAAgB,oBAAKvC,kBAAL,CAAhB,CAJmB;EAKzBF,MAAM,EAAEwC,kBAAA,CAAUE,MALO;EAMzB1B,OAAO,EAAEwB,kBAAA,CAAUG,IANM;EAOzB5B,IAAI,EAAEyB,kBAAA,CAAUI,KAAV,CAAgB;IACpBC,IAAI,EAAEL,kBAAA,CAAUE,MADI;IAEpBI,QAAQ,EAAEN,kBAAA,CAAUO,IAFA;IAGpBC,MAAM,EAAER,kBAAA,CAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CAPmB;EAYzB7B,QAAQ,EAAE4B,kBAAA,CAAUO,IAZK;EAazB9B,SAAS,EAAEuB,kBAAA,CAAUE,MAbI;EAczBxB,gBAAgB,EAAEsB,kBAAA,CAAUC,KAAV,CAAgB,CAAC,MAAD,EAAS,OAAT,EAAkB,KAAlB,EAAyB,QAAzB,CAAhB;AAdO,CAA3B;eAiBe/B,c"}

package/lib/atom/{button-link-icon-only → button-link-icon}/style.css

@@ -68,6 +68,15 @@
   border-radius: 5px;
 }
 
+.tooltipContentWrapper {
+  text-align: left;
+  width: max-content;
+  font-family: Gilroy;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
 @media tablet {
   .responsive {
     composes: button;

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

@@ -1,6 +1,6 @@
 export function toggleStateOnKeyPress(state: any, setState: any, ref: any): (event: any) => void;
 export default ToolTip;
-declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize, iconSize, AnchorElement, tooltipClassName }: {
+declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize, iconSize, AnchorElement, tooltipClassName, placement }: {
     anchorId: any;
     TooltipContent: any;
     "aria-label": any;
@@ -13,6 +13,7 @@ declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "d
     iconSize?: string | undefined;
     AnchorElement: any;
     tooltipClassName: any;
+    placement?: string | undefined;
 }): JSX.Element;
 declare namespace ToolTip {
     const propTypes: {
@@ -28,6 +29,7 @@ declare namespace ToolTip {
         iconSize: PropTypes.Requireable<string>;
         anchorId: PropTypes.Requireable<string>;
         toolTipIsVisible: PropTypes.Requireable<boolean>;
+        placement: PropTypes.Requireable<string>;
     };
 }
 import PropTypes from "prop-types";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AA4EO,iGAUN;;AAED;;;;;;;;;;;;;gBAwGC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AA6EO,iGAUN;;AAED;;;;;;;;;;;;;;gBA0GC"}

package/lib/atom/tooltip/index.js

@@ -46,7 +46,8 @@ const ToolTipWrapper = ({
   handleContentMouseOver,
   iconSize,
   tooltipClassName,
-  usesAnchorElement
+  usesAnchorElement,
+  placement
 }) => {
   const coorpToolTipClasses = (0, _classnames.default)(_style.default.toolTip, tooltipClassName, // eslint-disable-next-line no-nested-ternary
   usesAnchorElement ? null : iconSize === 'big' ? _style.default.bigIconToolTip : _style.default.smallIconToolTip);
@@ -57,7 +58,7 @@ const ToolTipWrapper = ({
       id: anchorId,
       className: _style.default.toolTipReact,
       "data-event-off": "click",
-      place: "left",
+      place: placement,
       effect: "solid",
       "aria-label": closeToolTipInformationTextAriaLabel
     }, content);
@@ -107,7 +108,8 @@ const ToolTip = ({
   fontSize = 14,
   iconSize = 'small',
   AnchorElement,
-  tooltipClassName
+  tooltipClassName,
+  placement = 'left'
 }) => {
   const isComponent = (0, _react.useMemo)(() => !(0, _isString.default)(TooltipContent) && /*#__PURE__*/(0, _react.isValidElement)(TooltipContent()), [TooltipContent]);
   const [toolTipIsVisible, setToolTipIsVisible] = (0, _react.useState)(false);
@@ -153,7 +155,8 @@ const ToolTip = ({
     content: content,
     onMouseLeave: handleMouseLeave,
     onMouseOver: handleMouseOver,
-    fontSize: fontSize
+    fontSize: fontSize,
+    placement: placement
   }) : /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.tooltipContainer,
     onMouseLeave: handleMouseLeave,
@@ -190,7 +193,8 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
   // parents overflow hidden controls
   // data-for={anchorId} && data-tooltip-place="left" are needed on the anchored component
   anchorId: _propTypes.default.string,
-  toolTipIsVisible: _propTypes.default.bool
+  toolTipIsVisible: _propTypes.default.bool,
+  placement: _propTypes.default.oneOf(['left', 'right', 'top', 'bottom'])
 } : {};
 var _default = ToolTip;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FontSizes","style","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","tooltipClassName","usesAnchorElement","coorpToolTipClasses","classnames","toolTip","bigIconToolTip","smallIconToolTip","toolTipReact","propTypes","PropTypes","bool","string","isRequired","node","func","oneOf","keys","toggleStateOnKeyPress","state","setState","ref","event","has","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","AnchorElement","isComponent","useMemo","isString","isValidElement","setToolTipIsVisible","useState","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","useCallback","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","anchorElement","tooltipIconContainer","informationIcon","tooltipContainer","isNil","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport has from 'lodash/fp/has';\nimport isNil from 'lodash/fp/isNil';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n  12: style.tooltipContentFontSize12,\n  14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n  small: 12,\n  big: 20\n};\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content,\n  handleContentMouseOver,\n  iconSize,\n  tooltipClassName,\n  usesAnchorElement\n}) => {\n  const coorpToolTipClasses = classnames(\n    style.toolTip,\n    tooltipClassName,\n    // eslint-disable-next-line no-nested-ternary\n    usesAnchorElement ? null : iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n  );\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place=\"left\"\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={coorpToolTipClasses}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n        onMouseOver={handleContentMouseOver}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node,\n  handleContentMouseOver: PropTypes.func,\n  iconSize: PropTypes.oneOf(keys(IconSizes)),\n  tooltipClassName: PropTypes.string,\n  usesAnchorElement: PropTypes.bool\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (!has('key', event)) return;\n  else if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible,\n  iconContainerClassName,\n  delayHide = 250,\n  fontSize = 14,\n  iconSize = 'small',\n  AnchorElement,\n  tooltipClassName\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n  }, [delayHide]);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, fontSize, isComponent]);\n\n  const anchorElement = useMemo(\n    () =>\n      AnchorElement ? (\n        <AnchorElement onKeyDown={handleKeyPress} />\n      ) : (\n        <button\n          type=\"button\"\n          className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n          data-testid={dataTestId}\n          onKeyDown={handleKeyPress}\n          tabIndex={0}\n        >\n          <InformationIcon\n            className={style.informationIcon}\n            width={IconSizes[iconSize]}\n            height={IconSizes[iconSize]}\n            aria-label={ariaLabel}\n          />\n        </button>\n      ),\n    [AnchorElement, ariaLabel, dataTestId, handleKeyPress, iconContainerClassName, iconSize]\n  );\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n      fontSize={fontSize}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      {anchorElement}\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n        handleContentMouseOver={handleContentMouseOver}\n        fontSize={fontSize}\n        iconSize={iconSize}\n        tooltipClassName={tooltipClassName}\n        usesAnchorElement={!isNil(AnchorElement)}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- Regular Tooltip exclusive --------------\n  // If using an Anchor element w/ the regular Tooltip\n  AnchorElement: PropTypes.func,\n  tooltipClassName: PropTypes.string,\n  //\n  iconContainerClassName: PropTypes.string,\n  delayHide: PropTypes.number,\n  fontSize: PropTypes.oneOf([12, 14]),\n  iconSize: PropTypes.oneOf(keys(IconSizes)),\n  // ----------  React Tooltip exclusive  --------------\n  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  // data-for={anchorId} && data-tooltip-place=\"left\" are needed on the anchored component\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["FontSizes","style","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","tooltipClassName","usesAnchorElement","placement","coorpToolTipClasses","classnames","toolTip","bigIconToolTip","smallIconToolTip","toolTipReact","propTypes","PropTypes","bool","string","isRequired","node","func","oneOf","keys","toggleStateOnKeyPress","state","setState","ref","event","has","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","AnchorElement","isComponent","useMemo","isString","isValidElement","setToolTipIsVisible","useState","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","useCallback","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","anchorElement","tooltipIconContainer","informationIcon","tooltipContainer","isNil","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport has from 'lodash/fp/has';\nimport isNil from 'lodash/fp/isNil';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n  12: style.tooltipContentFontSize12,\n  14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n  small: 12,\n  big: 20\n};\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content,\n  handleContentMouseOver,\n  iconSize,\n  tooltipClassName,\n  usesAnchorElement,\n  placement\n}) => {\n  const coorpToolTipClasses = classnames(\n    style.toolTip,\n    tooltipClassName,\n    // eslint-disable-next-line no-nested-ternary\n    usesAnchorElement ? null : iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n  );\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place={placement}\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={coorpToolTipClasses}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n        onMouseOver={handleContentMouseOver}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node,\n  handleContentMouseOver: PropTypes.func,\n  iconSize: PropTypes.oneOf(keys(IconSizes)),\n  tooltipClassName: PropTypes.string,\n  usesAnchorElement: PropTypes.bool\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (!has('key', event)) return;\n  else if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible,\n  iconContainerClassName,\n  delayHide = 250,\n  fontSize = 14,\n  iconSize = 'small',\n  AnchorElement,\n  tooltipClassName,\n  placement = 'left'\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n  }, [delayHide]);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, fontSize, isComponent]);\n\n  const anchorElement = useMemo(\n    () =>\n      AnchorElement ? (\n        <AnchorElement onKeyDown={handleKeyPress} />\n      ) : (\n        <button\n          type=\"button\"\n          className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n          data-testid={dataTestId}\n          onKeyDown={handleKeyPress}\n          tabIndex={0}\n        >\n          <InformationIcon\n            className={style.informationIcon}\n            width={IconSizes[iconSize]}\n            height={IconSizes[iconSize]}\n            aria-label={ariaLabel}\n          />\n        </button>\n      ),\n    [AnchorElement, ariaLabel, dataTestId, handleKeyPress, iconContainerClassName, iconSize]\n  );\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n      fontSize={fontSize}\n      placement={placement}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      {anchorElement}\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n        handleContentMouseOver={handleContentMouseOver}\n        fontSize={fontSize}\n        iconSize={iconSize}\n        tooltipClassName={tooltipClassName}\n        usesAnchorElement={!isNil(AnchorElement)}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- Regular Tooltip exclusive --------------\n  // If using an Anchor element w/ the regular Tooltip\n  AnchorElement: PropTypes.func,\n  tooltipClassName: PropTypes.string,\n  //\n  iconContainerClassName: PropTypes.string,\n  delayHide: PropTypes.number,\n  fontSize: PropTypes.oneOf([12, 14]),\n  iconSize: PropTypes.oneOf(keys(IconSizes)),\n  // ----------  React Tooltip exclusive  --------------\n  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  // data-for={anchorId} && data-tooltip-place=\"left\" are needed on the anchored component\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool,\n  placement: PropTypes.oneOf(['left', 'right', 'top', 'bottom'])\n};\n\nexport default ToolTip;\n"],"mappings":"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"}

package/lib/atom/tooltip/style.css

@@ -97,13 +97,13 @@
   opacity: 1 !important;
   left: 5px;
   max-width: 400px;
+  padding: 8px 12px !important;
 }
 
 /* for keyboard navigation, the position can't be obtained from the mouse */
 [class*="__react_component_tooltip"]:not(.toolTipReact) {
   border-radius: 7px !important;
-  top: 97px!important;
-  left: 628px!important;
+  left: -999em !important;
   visibility: visible !important;
   opacity: 1!important;
 }