@coorpacademy/components 10.13.12 → 10.13.13

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

@@ -0,0 +1,87 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import { convert } from 'css-color-function';
+import PropTypes from 'prop-types';
+import { NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon } from '@coorpacademy/nova-icons';
+import getOr from 'lodash/fp/getOr';
+import ButtonLink from '../../atom/button-link';
+import style from './style.css';
+
+const getGradientBackground = baseColor => {
+  const gradients = [convert(`color(${baseColor} lightness(30%))`), convert(`color(${baseColor} lightness(47%))`), convert(`color(${baseColor} lightness(55%))`)];
+  return `radial-gradient(62.12% 56.45% at 0% 77.29%, ${gradients[0]} 0%, ${convert(`color(${gradients[0]} a(0))`)} 100%), radial-gradient(113.85% 103.46% at 93.27% 7.88%, ${gradients[1]} 0%, ${convert(`color(${gradients[1]} a(0))`)} 100%), radial-gradient(49.66% 49.63% at 78.65% 86.26%, ${gradients[2]} 0%, ${convert(`color(${gradients[2]} a(0))`)} 100%), ${baseColor}`;
+};
+
+const SkillCard = (props, context) => {
+  const {
+    'aria-label': ariaLabel,
+    skillTitle,
+    skillAriaLabel,
+    buttonLabel,
+    buttonAriaLabel,
+    reviseLabel,
+    reviseAriaLabel,
+    onClick,
+    isCustom = false
+  } = props;
+  const {
+    skin
+  } = context;
+  const [hovered, setHovered] = useState(false);
+  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);
+  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
+  const buttonProps = {
+    customStyle: {
+      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
+      color: hovered ? '#FFFFFF' : primarySkinColor,
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    onClick,
+    'aria-label': buttonAriaLabel,
+    label: buttonLabel,
+    'data-name': 'skill-card-button'
+  };
+  const titleBackgroundColor = useMemo(() => isCustom ? '#128C72' : primarySkinColor, [isCustom, primarySkinColor]);
+  const titleBackground = useMemo(() => getGradientBackground(titleBackgroundColor), [titleBackgroundColor]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.skillCardWrapper,
+    "data-name": "skill-card-wrapper",
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-name": "skill-title",
+    className: style.skillTitle,
+    "aria-label": skillAriaLabel || skillTitle,
+    style: {
+      background: titleBackground
+    }
+  }, skillTitle), /*#__PURE__*/React.createElement("div", {
+    "data-name": "card-content-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.questionReviseText,
+    "data-name": "questions-to-revise-label",
+    "aria-label": reviseAriaLabel || reviseLabel
+  }, /*#__PURE__*/React.createElement(QuestionIcon, {
+    className: style.questionReviseIcon,
+    width: 16,
+    height: 16
+  }), reviseLabel), /*#__PURE__*/React.createElement("div", {
+    className: style.buttonWrapper,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    "data-name": "button-wrapper"
+  }, /*#__PURE__*/React.createElement(ButtonLink, buttonProps))));
+};
+
+SkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': PropTypes.string.isRequired,
+  skillTitle: PropTypes.string,
+  skillAriaLabel: PropTypes.string,
+  buttonLabel: PropTypes.string,
+  buttonAriaLabel: PropTypes.string,
+  reviseLabel: PropTypes.string,
+  reviseAriaLabel: PropTypes.string,
+  isCustom: PropTypes.bool,
+  onClick: PropTypes.func
+} : {};
+export default SkillCard;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/skill-card/index.js"],"names":["React","useCallback","useState","useMemo","convert","PropTypes","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","getOr","ButtonLink","style","getGradientBackground","baseColor","gradients","SkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","buttonLabel","buttonAriaLabel","reviseLabel","reviseAriaLabel","onClick","isCustom","skin","hovered","setHovered","primarySkinColor","handleMouseOver","handleMouseLeave","buttonProps","customStyle","backgroundColor","color","transition","label","titleBackgroundColor","titleBackground","skillCardWrapper","background","questionReviseText","questionReviseIcon","buttonWrapper","propTypes","string","isRequired","bool","func"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,EAAsCC,OAAtC,QAAoD,OAApD;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,+CAA+C,IAAIC,YAA3D,QAA8E,0BAA9E;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,qBAAqB,GAAGC,SAAS,IAAI;AACzC,QAAMC,SAAS,GAAG,CAChBT,OAAO,CAAE,SAAQQ,SAAU,kBAApB,CADS,EAEhBR,OAAO,CAAE,SAAQQ,SAAU,kBAApB,CAFS,EAGhBR,OAAO,CAAE,SAAQQ,SAAU,kBAApB,CAHS,CAAlB;AAMA,SAAQ,+CAA8CC,SAAS,CAAC,CAAD,CAAI,QAAOT,OAAO,CAC9E,SAAQS,SAAS,CAAC,CAAD,CAAI,QADyD,CAE/E,4DAA2DA,SAAS,CAAC,CAAD,CAAI,QAAOT,OAAO,CACrF,SAAQS,SAAS,CAAC,CAAD,CAAI,QADgE,CAEtF,2DAA0DA,SAAS,CAAC,CAAD,CAAI,QAAOT,OAAO,CACpF,SAAQS,SAAS,CAAC,CAAD,CAAI,QAD+D,CAErF,WAAUD,SAAU,EANtB;AAOD,CAdD;;AAgBA,MAAME,SAAS,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACpC,QAAM;AACJ,kBAAcC,SADV;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,cAHI;AAIJC,IAAAA,WAJI;AAKJC,IAAAA,eALI;AAMJC,IAAAA,WANI;AAOJC,IAAAA,eAPI;AAQJC,IAAAA,OARI;AASJC,IAAAA,QAAQ,GAAG;AATP,MAUFV,KAVJ;AAWA,QAAM;AAACW,IAAAA;AAAD,MAASV,OAAf;AACA,QAAM,CAACW,OAAD,EAAUC,UAAV,IAAwB1B,QAAQ,CAAC,KAAD,CAAtC;AACA,QAAM2B,gBAAgB,GAAGrB,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8BkB,IAA9B,CAA9B;AAEA,QAAMI,eAAe,GAAG7B,WAAW,CAAC,MAAM2B,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;AAEA,QAAMG,gBAAgB,GAAG9B,WAAW,CAAC,MAAM2B,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;AAEA,QAAMI,WAAW,GAAG;AAClBC,IAAAA,WAAW,EAAE;AACXC,MAAAA,eAAe,EAAEP,OAAO,GAAGE,gBAAH,GAAsBzB,OAAO,CAAE,SAAQyB,gBAAiB,WAA3B,CAD1C;AAEXM,MAAAA,KAAK,EAAER,OAAO,GAAG,SAAH,GAAeE,gBAFlB;AAGXO,MAAAA,UAAU,EAAE;AAHD,KADK;AAMlBZ,IAAAA,OANkB;AAOlB,kBAAcH,eAPI;AAQlBgB,IAAAA,KAAK,EAAEjB,WARW;AASlB,iBAAa;AATK,GAApB;AAYA,QAAMkB,oBAAoB,GAAGnC,OAAO,CAAC,MAAOsB,QAAQ,GAAG,SAAH,GAAeI,gBAA/B,EAAkD,CACpFJ,QADoF,EAEpFI,gBAFoF,CAAlD,CAApC;AAKA,QAAMU,eAAe,GAAGpC,OAAO,CAAC,MAAMQ,qBAAqB,CAAC2B,oBAAD,CAA5B,EAAoD,CACjFA,oBADiF,CAApD,CAA/B;AAIA,sBACE;AAAK,IAAA,SAAS,EAAE5B,KAAK,CAAC8B,gBAAtB;AAAwC,iBAAU,oBAAlD;AAAuE,kBAAYvB;AAAnF,kBACE;AACE,iBAAU,aADZ;AAEE,IAAA,SAAS,EAAEP,KAAK,CAACQ,UAFnB;AAGE,kBAAYC,cAAc,IAAID,UAHhC;AAIE,IAAA,KAAK,EAAE;AACLuB,MAAAA,UAAU,EAAEF;AADP;AAJT,KAQGrB,UARH,CADF,eAWE;AAAK,iBAAU;AAAf,kBACE;AACE,IAAA,SAAS,EAAER,KAAK,CAACgC,kBADnB;AAEE,iBAAU,2BAFZ;AAGE,kBAAYnB,eAAe,IAAID;AAHjC,kBAKE,oBAAC,YAAD;AAAc,IAAA,SAAS,EAAEZ,KAAK,CAACiC,kBAA/B;AAAmD,IAAA,KAAK,EAAE,EAA1D;AAA8D,IAAA,MAAM,EAAE;AAAtE,IALF,EAMGrB,WANH,CADF,eASE;AACE,IAAA,SAAS,EAAEZ,KAAK,CAACkC,aADnB;AAEE,IAAA,WAAW,EAAEd,eAFf;AAGE,IAAA,YAAY,EAAEC,gBAHhB;AAIE,iBAAU;AAJZ,kBAME,oBAAC,UAAD,EAAgBC,WAAhB,CANF,CATF,CAXF,CADF;AAgCD,CAzED;;AA2EAlB,SAAS,CAAC+B,SAAV,2CAAsB;AACpB,gBAAcxC,SAAS,CAACyC,MAAV,CAAiBC,UADX;AAEpB7B,EAAAA,UAAU,EAAEb,SAAS,CAACyC,MAFF;AAGpB3B,EAAAA,cAAc,EAAEd,SAAS,CAACyC,MAHN;AAIpB1B,EAAAA,WAAW,EAAEf,SAAS,CAACyC,MAJH;AAKpBzB,EAAAA,eAAe,EAAEhB,SAAS,CAACyC,MALP;AAMpBxB,EAAAA,WAAW,EAAEjB,SAAS,CAACyC,MANH;AAOpBvB,EAAAA,eAAe,EAAElB,SAAS,CAACyC,MAPP;AAQpBrB,EAAAA,QAAQ,EAAEpB,SAAS,CAAC2C,IARA;AASpBxB,EAAAA,OAAO,EAAEnB,SAAS,CAAC4C;AATC,CAAtB;AAYA,eAAenC,SAAf","sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {convert} from 'css-color-function';\nimport PropTypes from 'prop-types';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst getGradientBackground = baseColor => {\n  const gradients = [\n    convert(`color(${baseColor} lightness(30%))`),\n    convert(`color(${baseColor} lightness(47%))`),\n    convert(`color(${baseColor} lightness(55%))`)\n  ];\n\n  return `radial-gradient(62.12% 56.45% at 0% 77.29%, ${gradients[0]} 0%, ${convert(\n    `color(${gradients[0]} a(0))`\n  )} 100%), radial-gradient(113.85% 103.46% at 93.27% 7.88%, ${gradients[1]} 0%, ${convert(\n    `color(${gradients[1]} a(0))`\n  )} 100%), radial-gradient(49.66% 49.63% at 78.65% 86.26%, ${gradients[2]} 0%, ${convert(\n    `color(${gradients[2]} a(0))`\n  )} 100%), ${baseColor}`;\n};\n\nconst SkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    buttonLabel,\n    buttonAriaLabel,\n    reviseLabel,\n    reviseAriaLabel,\n    onClick,\n    isCustom = false\n  } = props;\n  const {skin} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick,\n    'aria-label': buttonAriaLabel,\n    label: buttonLabel,\n    'data-name': 'skill-card-button'\n  };\n\n  const titleBackgroundColor = useMemo(() => (isCustom ? '#128C72' : primarySkinColor), [\n    isCustom,\n    primarySkinColor\n  ]);\n\n  const titleBackground = useMemo(() => getGradientBackground(titleBackgroundColor), [\n    titleBackgroundColor\n  ]);\n\n  return (\n    <div className={style.skillCardWrapper} data-name=\"skill-card-wrapper\" aria-label={ariaLabel}>\n      <div\n        data-name=\"skill-title\"\n        className={style.skillTitle}\n        aria-label={skillAriaLabel || skillTitle}\n        style={{\n          background: titleBackground\n        }}\n      >\n        {skillTitle}\n      </div>\n      <div data-name=\"card-content-wrapper\">\n        <div\n          className={style.questionReviseText}\n          data-name=\"questions-to-revise-label\"\n          aria-label={reviseAriaLabel || reviseLabel}\n        >\n          <QuestionIcon className={style.questionReviseIcon} width={16} height={16} />\n          {reviseLabel}\n        </div>\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-wrapper\"\n        >\n          <ButtonLink {...buttonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nSkillCard.propTypes = {\n  'aria-label': PropTypes.string.isRequired,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  buttonLabel: PropTypes.string,\n  buttonAriaLabel: PropTypes.string,\n  reviseLabel: PropTypes.string,\n  reviseAriaLabel: PropTypes.string,\n  isCustom: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nexport default SkillCard;\n"],"file":"index.js"}

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

@@ -0,0 +1,60 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_400 from colors;
+@value white from colors;
+@value box_shadow_light_dark from colors;
+@value box_shadow_medium_dark from colors;
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+}
+
+.skillCardWrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 353px;
+  min-width: 245px;
+  height: 242px;
+  box-shadow: 0px 4px 16px box_shadow_light_dark;
+  transition: box-shadow 0.15s ease-in-out;
+  border-radius: 8px 8px 12px 12px;
+}
+
+.skillCardWrapper:hover {
+  box-shadow: 0px 4px 48px box_shadow_medium_dark;
+}
+
+.skillTitle {
+  composes: textBase;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  height: 112px;
+  border-radius: 8px 8px 0px 0px;
+  color: white;
+  padding: 0px 24px;
+  user-select: none;
+}
+
+.questionReviseIcon {
+  padding-right : 8px;
+}
+
+.questionReviseText {
+  composes: textBase;
+  display: flex;
+  align-items : center;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: cm_grey_400;
+  padding: 16px 24px 24px;
+  user-select: none;
+
+}
+
+.buttonWrapper {
+  padding: 0px 24px;
+}

package/es/molecule/skill-card/test/fixtures/custom-skill.js

@@ -0,0 +1,10 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import { defaultProps } from './default';
+export default {
+  props: _extends(_extends({}, defaultProps), {}, {
+    skillTitle: 'This is a custom skill',
+    isCustom: true
+  })
+};
+//# sourceMappingURL=custom-skill.js.map

package/es/molecule/skill-card/test/fixtures/custom-skill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/skill-card/test/fixtures/custom-skill.js"],"names":["defaultProps","props","skillTitle","isCustom"],"mappings":";;AAAA,SAAQA,YAAR,QAA2B,WAA3B;AAEA,eAAe;AACbC,EAAAA,KAAK,wBAAMD,YAAN;AAAoBE,IAAAA,UAAU,EAAE,wBAAhC;AAA0DC,IAAAA,QAAQ,EAAE;AAApE;AADQ,CAAf","sourcesContent":["import {defaultProps} from './default';\n\nexport default {\n  props: {...defaultProps, skillTitle: 'This is a custom skill', isCustom: true}\n};\n"],"file":"custom-skill.js"}

package/es/molecule/skill-card/test/fixtures/default.js

@@ -0,0 +1,15 @@
+export const defaultProps = {
+  'aria-label': 'Skill Card',
+  skillTitle: 'Critical thinking and analysis',
+  skillAriaLabel: 'Skill aria label',
+  buttonLabel: 'Revise this skill',
+  buttonAriaLabel: 'Button aria label',
+  reviseLabel: '75 questions to revise',
+  reviseAriaLabel: 'revise aria label',
+  isCustom: undefined,
+  onClick: () => console.log('revise')
+};
+export default {
+  props: defaultProps
+};
+//# sourceMappingURL=default.js.map

package/es/molecule/skill-card/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/skill-card/test/fixtures/default.js"],"names":["defaultProps","skillTitle","skillAriaLabel","buttonLabel","buttonAriaLabel","reviseLabel","reviseAriaLabel","isCustom","undefined","onClick","console","log","props"],"mappings":"AAAA,OAAO,MAAMA,YAAY,GAAG;AAC1B,gBAAc,YADY;AAE1BC,EAAAA,UAAU,EAAE,gCAFc;AAG1BC,EAAAA,cAAc,EAAE,kBAHU;AAI1BC,EAAAA,WAAW,EAAE,mBAJa;AAK1BC,EAAAA,eAAe,EAAE,mBALS;AAM1BC,EAAAA,WAAW,EAAE,wBANa;AAO1BC,EAAAA,eAAe,EAAE,mBAPS;AAQ1BC,EAAAA,QAAQ,EAAEC,SARgB;AAS1BC,EAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,QAAZ;AATW,CAArB;AAYP,eAAe;AACbC,EAAAA,KAAK,EAAEZ;AADM,CAAf","sourcesContent":["export const defaultProps = {\n  'aria-label': 'Skill Card',\n  skillTitle: 'Critical thinking and analysis',\n  skillAriaLabel: 'Skill aria label',\n  buttonLabel: 'Revise this skill',\n  buttonAriaLabel: 'Button aria label',\n  reviseLabel: '75 questions to revise',\n  reviseAriaLabel: 'revise aria label',\n  isCustom: undefined,\n  onClick: () => console.log('revise')\n};\n\nexport default {\n  props: defaultProps\n};\n"],"file":"default.js"}

package/es/molecule/skill-card/test/fixtures/no-aria-labels.js

@@ -0,0 +1,12 @@
+export const defaultProps = {
+  'aria-label': 'Skill Card',
+  skillTitle: 'Critical thinking and analysis',
+  buttonLabel: 'Revise this skill',
+  reviseLabel: '75 questions to revise',
+  isCustom: undefined,
+  onClick: () => console.log('revise - no aria')
+};
+export default {
+  props: defaultProps
+};
+//# sourceMappingURL=no-aria-labels.js.map

package/es/molecule/skill-card/test/fixtures/no-aria-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/skill-card/test/fixtures/no-aria-labels.js"],"names":["defaultProps","skillTitle","buttonLabel","reviseLabel","isCustom","undefined","onClick","console","log","props"],"mappings":"AAAA,OAAO,MAAMA,YAAY,GAAG;AAC1B,gBAAc,YADY;AAE1BC,EAAAA,UAAU,EAAE,gCAFc;AAG1BC,EAAAA,WAAW,EAAE,mBAHa;AAI1BC,EAAAA,WAAW,EAAE,wBAJa;AAK1BC,EAAAA,QAAQ,EAAEC,SALgB;AAM1BC,EAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,kBAAZ;AANW,CAArB;AASP,eAAe;AACbC,EAAAA,KAAK,EAAET;AADM,CAAf","sourcesContent":["export const defaultProps = {\n  'aria-label': 'Skill Card',\n  skillTitle: 'Critical thinking and analysis',\n  buttonLabel: 'Revise this skill',\n  reviseLabel: '75 questions to revise',\n  isCustom: undefined,\n  onClick: () => console.log('revise - no aria')\n};\n\nexport default {\n  props: defaultProps\n};\n"],"file":"no-aria-labels.js"}

package/es/molecule/skill-card/test/fixtures/short-skill-title.js

@@ -0,0 +1,10 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import { defaultProps } from './default';
+export default {
+  props: _extends(_extends({}, defaultProps), {}, {
+    skillTitle: 'Agility',
+    isCustom: false
+  })
+};
+//# sourceMappingURL=short-skill-title.js.map

package/es/molecule/skill-card/test/fixtures/short-skill-title.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/skill-card/test/fixtures/short-skill-title.js"],"names":["defaultProps","props","skillTitle","isCustom"],"mappings":";;AAAA,SAAQA,YAAR,QAA2B,WAA3B;AAEA,eAAe;AACbC,EAAAA,KAAK,wBAAMD,YAAN;AAAoBE,IAAAA,UAAU,EAAE,SAAhC;AAA2CC,IAAAA,QAAQ,EAAE;AAArD;AADQ,CAAf","sourcesContent":["import {defaultProps} from './default';\n\nexport default {\n  props: {...defaultProps, skillTitle: 'Agility', isCustom: false}\n};\n"],"file":"short-skill-title.js"}

package/es/molecule/skill-card/test/skill-card.js

@@ -0,0 +1,90 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import browserEnv from 'browser-env';
+import test from 'ava';
+import React from 'react';
+import { mount, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import SkillCard from '..';
+import customSkillFixture from './fixtures/custom-skill';
+import noAriaLabelsFixtures from './fixtures/no-aria-labels';
+browserEnv();
+configure({
+  adapter: new Adapter()
+});
+test('onClick should be reachable, should match given aria-label', t => {
+  let buttonWasClicked = false;
+  customSkillFixture.props = _extends(_extends({}, customSkillFixture.props), {}, {
+    onClick: () => {
+      buttonWasClicked = true;
+    }
+  });
+  const wrapper = mount( /*#__PURE__*/React.createElement(SkillCard, customSkillFixture.props));
+  const cardWrapper = wrapper.find('[data-name="skill-card-wrapper"]');
+  t.true(cardWrapper.at(0).exists());
+  t.is(cardWrapper.at(0).props()['aria-label'], 'Skill Card');
+  const skillTitle = cardWrapper.find('[data-name="skill-title"]');
+  t.true(skillTitle.at(0).exists());
+  t.is(skillTitle.at(0).props()['aria-label'], 'Skill aria label');
+  const questionsLabel = cardWrapper.find('[data-name="questions-to-revise-label"]');
+  t.true(questionsLabel.at(0).exists());
+  t.is(questionsLabel.at(0).props()['aria-label'], 'revise aria label');
+  const buttonLink = cardWrapper.find('[data-name="skill-card-button"]');
+  t.true(buttonLink.at(0).exists());
+  t.is(buttonLink.at(0).props()['aria-label'], 'Button aria label');
+  buttonLink.at(0).simulate('click', {});
+  t.true(buttonWasClicked);
+  t.pass();
+});
+test('onHover should change button text color && backgroundColor', t => {
+  const wrapper = mount( /*#__PURE__*/React.createElement(SkillCard, customSkillFixture.props));
+  const expectedStyleNoHover = {
+    backgroundColor: 'rgba(0, 176, 255, 0.07)',
+    color: '#00B0FF',
+    transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+  };
+  const expectedStyleOnHover = {
+    backgroundColor: '#00B0FF',
+    color: '#FFFFFF',
+    transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+  };
+  let cardWrapper = wrapper.find('[data-name="skill-card-wrapper"]');
+  t.true(cardWrapper.at(0).exists());
+  let buttonWrapper = cardWrapper.find('[data-name="button-wrapper"]');
+  t.true(buttonWrapper.at(0).exists());
+  let buttonLink = buttonWrapper.find('[data-name="skill-card-button"] button');
+  t.true(buttonLink.at(0).exists());
+  t.deepEqual(buttonLink.at(0).props().style, expectedStyleNoHover); // hover
+
+  buttonWrapper.simulate('mouseover');
+  wrapper.update();
+  cardWrapper = wrapper.find('[data-name="skill-card-wrapper"]');
+  buttonWrapper = cardWrapper.find('[data-name="button-wrapper"]');
+  t.true(buttonWrapper.at(0).exists());
+  buttonLink = buttonWrapper.find('[data-name="skill-card-button"] button');
+  t.true(buttonLink.at(0).exists());
+  t.deepEqual(buttonLink.at(0).props().style, expectedStyleOnHover); // leave hover
+
+  buttonWrapper.simulate('mouseleave');
+  wrapper.update();
+  buttonLink = wrapper.find('[data-name="skill-card-button"] button');
+  t.true(buttonLink.at(0).exists());
+  t.deepEqual(buttonLink.at(0).props().style, expectedStyleNoHover);
+  t.pass();
+});
+test('should use default aria-labels if aria-label props are not provided', t => {
+  const wrapper = mount( /*#__PURE__*/React.createElement(SkillCard, noAriaLabelsFixtures.props));
+  const cardWrapper = wrapper.find('[data-name="skill-card-wrapper"]');
+  t.true(cardWrapper.at(0).exists());
+  const skillTitle = cardWrapper.find('[data-name="skill-title"]');
+  t.true(skillTitle.at(0).exists());
+  t.is(skillTitle.at(0).props()['aria-label'], 'Critical thinking and analysis');
+  const questionsLabel = cardWrapper.find('[data-name="questions-to-revise-label"]');
+  t.true(questionsLabel.at(0).exists());
+  t.is(questionsLabel.at(0).props()['aria-label'], '75 questions to revise');
+  const buttonLink = cardWrapper.find('[data-name="skill-card-button"] button');
+  t.true(buttonLink.at(0).exists());
+  t.is(buttonLink.at(0).props()['aria-label'], 'Revise this skill');
+  t.pass();
+});
+//# sourceMappingURL=skill-card.js.map

package/es/molecule/skill-card/test/skill-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/skill-card/test/skill-card.js"],"names":["browserEnv","test","React","mount","configure","Adapter","SkillCard","customSkillFixture","noAriaLabelsFixtures","adapter","t","buttonWasClicked","props","onClick","wrapper","cardWrapper","find","true","at","exists","is","skillTitle","questionsLabel","buttonLink","simulate","pass","expectedStyleNoHover","backgroundColor","color","transition","expectedStyleOnHover","buttonWrapper","deepEqual","style","update"],"mappings":"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","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {mount, configure} from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\nimport SkillCard from '..';\nimport customSkillFixture from './fixtures/custom-skill';\nimport noAriaLabelsFixtures from './fixtures/no-aria-labels';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\n\ntest('onClick should be reachable, should match given aria-label', t => {\n  let buttonWasClicked = false;\n  customSkillFixture.props = {\n    ...customSkillFixture.props,\n    onClick: () => {\n      buttonWasClicked = true;\n    }\n  };\n  const wrapper = mount(<SkillCard {...customSkillFixture.props} />);\n\n  const cardWrapper = wrapper.find('[data-name=\"skill-card-wrapper\"]');\n  t.true(cardWrapper.at(0).exists());\n  t.is(cardWrapper.at(0).props()['aria-label'], 'Skill Card');\n\n  const skillTitle = cardWrapper.find('[data-name=\"skill-title\"]');\n  t.true(skillTitle.at(0).exists());\n  t.is(skillTitle.at(0).props()['aria-label'], 'Skill aria label');\n\n  const questionsLabel = cardWrapper.find('[data-name=\"questions-to-revise-label\"]');\n  t.true(questionsLabel.at(0).exists());\n  t.is(questionsLabel.at(0).props()['aria-label'], 'revise aria label');\n\n  const buttonLink = cardWrapper.find('[data-name=\"skill-card-button\"]');\n  t.true(buttonLink.at(0).exists());\n  t.is(buttonLink.at(0).props()['aria-label'], 'Button aria label');\n  buttonLink.at(0).simulate('click', {});\n  t.true(buttonWasClicked);\n\n  t.pass();\n});\n\ntest('onHover should change button text color && backgroundColor', t => {\n  const wrapper = mount(<SkillCard {...customSkillFixture.props} />);\n\n  const expectedStyleNoHover = {\n    backgroundColor: 'rgba(0, 176, 255, 0.07)',\n    color: '#00B0FF',\n    transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n  };\n\n  const expectedStyleOnHover = {\n    backgroundColor: '#00B0FF',\n    color: '#FFFFFF',\n    transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n  };\n\n  let cardWrapper = wrapper.find('[data-name=\"skill-card-wrapper\"]');\n  t.true(cardWrapper.at(0).exists());\n\n  let buttonWrapper = cardWrapper.find('[data-name=\"button-wrapper\"]');\n  t.true(buttonWrapper.at(0).exists());\n  let buttonLink = buttonWrapper.find('[data-name=\"skill-card-button\"] button');\n  t.true(buttonLink.at(0).exists());\n  t.deepEqual(buttonLink.at(0).props().style, expectedStyleNoHover);\n\n  // hover\n  buttonWrapper.simulate('mouseover');\n\n  wrapper.update();\n  cardWrapper = wrapper.find('[data-name=\"skill-card-wrapper\"]');\n  buttonWrapper = cardWrapper.find('[data-name=\"button-wrapper\"]');\n  t.true(buttonWrapper.at(0).exists());\n  buttonLink = buttonWrapper.find('[data-name=\"skill-card-button\"] button');\n  t.true(buttonLink.at(0).exists());\n\n  t.deepEqual(buttonLink.at(0).props().style, expectedStyleOnHover);\n\n  // leave hover\n  buttonWrapper.simulate('mouseleave');\n\n  wrapper.update();\n\n  buttonLink = wrapper.find('[data-name=\"skill-card-button\"] button');\n  t.true(buttonLink.at(0).exists());\n  t.deepEqual(buttonLink.at(0).props().style, expectedStyleNoHover);\n\n  t.pass();\n});\n\ntest('should use default aria-labels if aria-label props are not provided', t => {\n  const wrapper = mount(<SkillCard {...noAriaLabelsFixtures.props} />);\n\n  const cardWrapper = wrapper.find('[data-name=\"skill-card-wrapper\"]');\n  t.true(cardWrapper.at(0).exists());\n\n  const skillTitle = cardWrapper.find('[data-name=\"skill-title\"]');\n  t.true(skillTitle.at(0).exists());\n  t.is(skillTitle.at(0).props()['aria-label'], 'Critical thinking and analysis');\n\n  const questionsLabel = cardWrapper.find('[data-name=\"questions-to-revise-label\"]');\n  t.true(questionsLabel.at(0).exists());\n  t.is(questionsLabel.at(0).props()['aria-label'], '75 questions to revise');\n\n  const buttonLink = cardWrapper.find('[data-name=\"skill-card-button\"] button');\n  t.true(buttonLink.at(0).exists());\n  t.is(buttonLink.at(0).props()['aria-label'], 'Revise this skill');\n\n  t.pass();\n});\n"],"file":"skill-card.js"}

package/es/variables/colors.css

@@ -62,6 +62,7 @@
 @value cm_red_video: #E8335E;
 @value cm_violet_podcast: #432ba7;
 @value cm_warning_50: rgba(255, 192, 67, 0.13);
+@value box_shadow_medium_dark: rgba(0, 0, 0, 0.15);
 @value box_shadow_light_dark: rgba(0, 0, 0, 0.12);
 @value box_shadow_medium_dark: rgba(0, 0, 0, 0.2);
 @value box_shadow_orange_700: rgba(255, 84, 31, 0.15);

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

@@ -0,0 +1,105 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _cssColorFunction = require("css-color-function");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const getGradientBackground = baseColor => {
+  const gradients = [(0, _cssColorFunction.convert)(`color(${baseColor} lightness(30%))`), (0, _cssColorFunction.convert)(`color(${baseColor} lightness(47%))`), (0, _cssColorFunction.convert)(`color(${baseColor} lightness(55%))`)];
+  return `radial-gradient(62.12% 56.45% at 0% 77.29%, ${gradients[0]} 0%, ${(0, _cssColorFunction.convert)(`color(${gradients[0]} a(0))`)} 100%), radial-gradient(113.85% 103.46% at 93.27% 7.88%, ${gradients[1]} 0%, ${(0, _cssColorFunction.convert)(`color(${gradients[1]} a(0))`)} 100%), radial-gradient(49.66% 49.63% at 78.65% 86.26%, ${gradients[2]} 0%, ${(0, _cssColorFunction.convert)(`color(${gradients[2]} a(0))`)} 100%), ${baseColor}`;
+};
+
+const SkillCard = (props, context) => {
+  const {
+    'aria-label': ariaLabel,
+    skillTitle,
+    skillAriaLabel,
+    buttonLabel,
+    buttonAriaLabel,
+    reviseLabel,
+    reviseAriaLabel,
+    onClick,
+    isCustom = false
+  } = props;
+  const {
+    skin
+  } = context;
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const primarySkinColor = (0, _getOr.default)('#00B0FF', 'common.primary', skin);
+  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
+  const buttonProps = {
+    customStyle: {
+      backgroundColor: hovered ? primarySkinColor : (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
+      color: hovered ? '#FFFFFF' : primarySkinColor,
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    onClick,
+    'aria-label': buttonAriaLabel,
+    label: buttonLabel,
+    'data-name': 'skill-card-button'
+  };
+  const titleBackgroundColor = (0, _react.useMemo)(() => isCustom ? '#128C72' : primarySkinColor, [isCustom, primarySkinColor]);
+  const titleBackground = (0, _react.useMemo)(() => getGradientBackground(titleBackgroundColor), [titleBackgroundColor]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillCardWrapper,
+    "data-name": "skill-card-wrapper",
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "skill-title",
+    className: _style.default.skillTitle,
+    "aria-label": skillAriaLabel || skillTitle,
+    style: {
+      background: titleBackground
+    }
+  }, skillTitle), /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "card-content-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.questionReviseText,
+    "data-name": "questions-to-revise-label",
+    "aria-label": reviseAriaLabel || reviseLabel
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidInterfaceFeedbackInterfaceQuestionMark, {
+    className: _style.default.questionReviseIcon,
+    width: 16,
+    height: 16
+  }), reviseLabel), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonWrapper,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    "data-name": "button-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonProps))));
+};
+
+SkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': _propTypes.default.string.isRequired,
+  skillTitle: _propTypes.default.string,
+  skillAriaLabel: _propTypes.default.string,
+  buttonLabel: _propTypes.default.string,
+  buttonAriaLabel: _propTypes.default.string,
+  reviseLabel: _propTypes.default.string,
+  reviseAriaLabel: _propTypes.default.string,
+  isCustom: _propTypes.default.bool,
+  onClick: _propTypes.default.func
+} : {};
+var _default = SkillCard;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/skill-card/index.js"],"names":["getGradientBackground","baseColor","gradients","SkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","buttonLabel","buttonAriaLabel","reviseLabel","reviseAriaLabel","onClick","isCustom","skin","hovered","setHovered","primarySkinColor","handleMouseOver","handleMouseLeave","buttonProps","customStyle","backgroundColor","color","transition","label","titleBackgroundColor","titleBackground","style","skillCardWrapper","background","questionReviseText","questionReviseIcon","buttonWrapper","propTypes","PropTypes","string","isRequired","bool","func"],"mappings":"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","sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {convert} from 'css-color-function';\nimport PropTypes from 'prop-types';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst getGradientBackground = baseColor => {\n  const gradients = [\n    convert(`color(${baseColor} lightness(30%))`),\n    convert(`color(${baseColor} lightness(47%))`),\n    convert(`color(${baseColor} lightness(55%))`)\n  ];\n\n  return `radial-gradient(62.12% 56.45% at 0% 77.29%, ${gradients[0]} 0%, ${convert(\n    `color(${gradients[0]} a(0))`\n  )} 100%), radial-gradient(113.85% 103.46% at 93.27% 7.88%, ${gradients[1]} 0%, ${convert(\n    `color(${gradients[1]} a(0))`\n  )} 100%), radial-gradient(49.66% 49.63% at 78.65% 86.26%, ${gradients[2]} 0%, ${convert(\n    `color(${gradients[2]} a(0))`\n  )} 100%), ${baseColor}`;\n};\n\nconst SkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    buttonLabel,\n    buttonAriaLabel,\n    reviseLabel,\n    reviseAriaLabel,\n    onClick,\n    isCustom = false\n  } = props;\n  const {skin} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick,\n    'aria-label': buttonAriaLabel,\n    label: buttonLabel,\n    'data-name': 'skill-card-button'\n  };\n\n  const titleBackgroundColor = useMemo(() => (isCustom ? '#128C72' : primarySkinColor), [\n    isCustom,\n    primarySkinColor\n  ]);\n\n  const titleBackground = useMemo(() => getGradientBackground(titleBackgroundColor), [\n    titleBackgroundColor\n  ]);\n\n  return (\n    <div className={style.skillCardWrapper} data-name=\"skill-card-wrapper\" aria-label={ariaLabel}>\n      <div\n        data-name=\"skill-title\"\n        className={style.skillTitle}\n        aria-label={skillAriaLabel || skillTitle}\n        style={{\n          background: titleBackground\n        }}\n      >\n        {skillTitle}\n      </div>\n      <div data-name=\"card-content-wrapper\">\n        <div\n          className={style.questionReviseText}\n          data-name=\"questions-to-revise-label\"\n          aria-label={reviseAriaLabel || reviseLabel}\n        >\n          <QuestionIcon className={style.questionReviseIcon} width={16} height={16} />\n          {reviseLabel}\n        </div>\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-wrapper\"\n        >\n          <ButtonLink {...buttonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nSkillCard.propTypes = {\n  'aria-label': PropTypes.string.isRequired,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  buttonLabel: PropTypes.string,\n  buttonAriaLabel: PropTypes.string,\n  reviseLabel: PropTypes.string,\n  reviseAriaLabel: PropTypes.string,\n  isCustom: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nexport default SkillCard;\n"],"file":"index.js"}

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

@@ -0,0 +1,60 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_400 from colors;
+@value white from colors;
+@value box_shadow_light_dark from colors;
+@value box_shadow_medium_dark from colors;
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+}
+
+.skillCardWrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 353px;
+  min-width: 245px;
+  height: 242px;
+  box-shadow: 0px 4px 16px box_shadow_light_dark;
+  transition: box-shadow 0.15s ease-in-out;
+  border-radius: 8px 8px 12px 12px;
+}
+
+.skillCardWrapper:hover {
+  box-shadow: 0px 4px 48px box_shadow_medium_dark;
+}
+
+.skillTitle {
+  composes: textBase;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  height: 112px;
+  border-radius: 8px 8px 0px 0px;
+  color: white;
+  padding: 0px 24px;
+  user-select: none;
+}
+
+.questionReviseIcon {
+  padding-right : 8px;
+}
+
+.questionReviseText {
+  composes: textBase;
+  display: flex;
+  align-items : center;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: cm_grey_400;
+  padding: 16px 24px 24px;
+  user-select: none;
+
+}
+
+.buttonWrapper {
+  padding: 0px 24px;
+}

package/lib/molecule/skill-card/test/fixtures/custom-skill.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _default2 = require("./default");
+
+function _extends() { _extends = Object.assign || 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); }
+
+var _default = {
+  props: _extends(_extends({}, _default2.defaultProps), {}, {
+    skillTitle: 'This is a custom skill',
+    isCustom: true
+  })
+};
+exports.default = _default;
+//# sourceMappingURL=custom-skill.js.map

package/lib/molecule/skill-card/test/fixtures/custom-skill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/skill-card/test/fixtures/custom-skill.js"],"names":["props","defaultProps","skillTitle","isCustom"],"mappings":";;;;;AAAA;;;;eAEe;AACbA,EAAAA,KAAK,wBAAMC,sBAAN;AAAoBC,IAAAA,UAAU,EAAE,wBAAhC;AAA0DC,IAAAA,QAAQ,EAAE;AAApE;AADQ,C","sourcesContent":["import {defaultProps} from './default';\n\nexport default {\n  props: {...defaultProps, skillTitle: 'This is a custom skill', isCustom: true}\n};\n"],"file":"custom-skill.js"}

package/lib/molecule/skill-card/test/fixtures/default.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.defaultProps = void 0;
+const defaultProps = {
+  'aria-label': 'Skill Card',
+  skillTitle: 'Critical thinking and analysis',
+  skillAriaLabel: 'Skill aria label',
+  buttonLabel: 'Revise this skill',
+  buttonAriaLabel: 'Button aria label',
+  reviseLabel: '75 questions to revise',
+  reviseAriaLabel: 'revise aria label',
+  isCustom: undefined,
+  onClick: () => console.log('revise')
+};
+exports.defaultProps = defaultProps;
+var _default = {
+  props: defaultProps
+};
+exports.default = _default;
+//# sourceMappingURL=default.js.map

package/lib/molecule/skill-card/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/skill-card/test/fixtures/default.js"],"names":["defaultProps","skillTitle","skillAriaLabel","buttonLabel","buttonAriaLabel","reviseLabel","reviseAriaLabel","isCustom","undefined","onClick","console","log","props"],"mappings":";;;;AAAO,MAAMA,YAAY,GAAG;AAC1B,gBAAc,YADY;AAE1BC,EAAAA,UAAU,EAAE,gCAFc;AAG1BC,EAAAA,cAAc,EAAE,kBAHU;AAI1BC,EAAAA,WAAW,EAAE,mBAJa;AAK1BC,EAAAA,eAAe,EAAE,mBALS;AAM1BC,EAAAA,WAAW,EAAE,wBANa;AAO1BC,EAAAA,eAAe,EAAE,mBAPS;AAQ1BC,EAAAA,QAAQ,EAAEC,SARgB;AAS1BC,EAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,QAAZ;AATW,CAArB;;eAYQ;AACbC,EAAAA,KAAK,EAAEZ;AADM,C","sourcesContent":["export const defaultProps = {\n  'aria-label': 'Skill Card',\n  skillTitle: 'Critical thinking and analysis',\n  skillAriaLabel: 'Skill aria label',\n  buttonLabel: 'Revise this skill',\n  buttonAriaLabel: 'Button aria label',\n  reviseLabel: '75 questions to revise',\n  reviseAriaLabel: 'revise aria label',\n  isCustom: undefined,\n  onClick: () => console.log('revise')\n};\n\nexport default {\n  props: defaultProps\n};\n"],"file":"default.js"}

package/lib/molecule/skill-card/test/fixtures/no-aria-labels.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.defaultProps = void 0;
+const defaultProps = {
+  'aria-label': 'Skill Card',
+  skillTitle: 'Critical thinking and analysis',
+  buttonLabel: 'Revise this skill',
+  reviseLabel: '75 questions to revise',
+  isCustom: undefined,
+  onClick: () => console.log('revise - no aria')
+};
+exports.defaultProps = defaultProps;
+var _default = {
+  props: defaultProps
+};
+exports.default = _default;
+//# sourceMappingURL=no-aria-labels.js.map

package/lib/molecule/skill-card/test/fixtures/no-aria-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/skill-card/test/fixtures/no-aria-labels.js"],"names":["defaultProps","skillTitle","buttonLabel","reviseLabel","isCustom","undefined","onClick","console","log","props"],"mappings":";;;;AAAO,MAAMA,YAAY,GAAG;AAC1B,gBAAc,YADY;AAE1BC,EAAAA,UAAU,EAAE,gCAFc;AAG1BC,EAAAA,WAAW,EAAE,mBAHa;AAI1BC,EAAAA,WAAW,EAAE,wBAJa;AAK1BC,EAAAA,QAAQ,EAAEC,SALgB;AAM1BC,EAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,kBAAZ;AANW,CAArB;;eASQ;AACbC,EAAAA,KAAK,EAAET;AADM,C","sourcesContent":["export const defaultProps = {\n  'aria-label': 'Skill Card',\n  skillTitle: 'Critical thinking and analysis',\n  buttonLabel: 'Revise this skill',\n  reviseLabel: '75 questions to revise',\n  isCustom: undefined,\n  onClick: () => console.log('revise - no aria')\n};\n\nexport default {\n  props: defaultProps\n};\n"],"file":"no-aria-labels.js"}

package/lib/molecule/skill-card/test/fixtures/short-skill-title.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _default2 = require("./default");
+
+function _extends() { _extends = Object.assign || 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); }
+
+var _default = {
+  props: _extends(_extends({}, _default2.defaultProps), {}, {
+    skillTitle: 'Agility',
+    isCustom: false
+  })
+};
+exports.default = _default;
+//# sourceMappingURL=short-skill-title.js.map