@coorpacademy/components 10.13.11 → 10.13.14

package/lib/molecule/drag-and-drop-wrapper/test/fixtures/without-checkbox.js

@@ -0,0 +1,20 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _default2 = _interopRequireDefault(require("../../../../atom/drag-and-drop/test/fixtures/default"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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: {
+    list: [_extends(_extends({}, _default2.default.props), {}, {
+      title: 'Add a badge'
+    })]
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=without-checkbox.js.map

package/lib/molecule/drag-and-drop-wrapper/test/fixtures/without-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/drag-and-drop-wrapper/test/fixtures/without-checkbox.js"],"names":["props","list","firstdDragAndDrop","title"],"mappings":";;;;;AAAA;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,uBAAKC,kBAAkBF,KAAvB;AAA8BG,MAAAA,KAAK,EAAE;AAArC;AADD;AADM,C","sourcesContent":["import firstdDragAndDrop from '../../../../atom/drag-and-drop/test/fixtures/default';\n\nexport default {\n  props: {\n    list: [{...firstdDragAndDrop.props, title: 'Add a badge'}]\n  }\n};\n"],"file":"without-checkbox.js"}

package/lib/molecule/drag-and-drop-wrapper/test/fixtures.js

@@ -12,6 +12,8 @@ var _default = _interopRequireDefault(require("./fixtures/default"));
 
 var _twoDragAndDrops = _interopRequireDefault(require("./fixtures/two-drag-and-drops"));
 
+var _withoutCheckbox = _interopRequireDefault(require("./fixtures/without-checkbox"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 (0, _ava.default)('Molecule › MoleculeDragAndDropWrapper > should have valid propTypes', t => {
@@ -22,4 +24,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 (0, _ava.default)('Molecule › MoleculeDragAndDropWrapper › Default › should be rendered', _renderComponent.default, _.default, _default.default);
 (0, _ava.default)('Molecule › MoleculeDragAndDropWrapper › TwoDragAndDrops › should be rendered', _renderComponent.default, _.default, _twoDragAndDrops.default);
+(0, _ava.default)('Molecule › MoleculeDragAndDropWrapper › WithoutCheckbox › should be rendered', _renderComponent.default, _.default, _withoutCheckbox.default);
 //# sourceMappingURL=fixtures.js.map

package/lib/molecule/drag-and-drop-wrapper/test/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/drag-and-drop-wrapper/test/fixtures.js"],"names":["t","pass","MoleculeDragAndDropWrapper","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureTwoDragAndDrops"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,qEAAL,EAA4EA,CAAC,IAAI;AAC/EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAA2BC,SAAnC,EAA8C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC5DL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,+DAA8DF,GAAI,mEAA3F;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,sEAAL,EAA6EG,wBAA7E,EAAmGN,SAAnG,EAA+HO,gBAA/H;AACA,kBAAK,8EAAL,EAAqFD,wBAArF,EAA2GN,SAA3G,EAAuIQ,wBAAvI","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeDragAndDropWrapper from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureTwoDragAndDrops from './fixtures/two-drag-and-drops';\n\ntest('Molecule › MoleculeDragAndDropWrapper > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeDragAndDropWrapper.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeDragAndDropWrapper.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeDragAndDropWrapper › Default › should be rendered', renderComponentMacro, MoleculeDragAndDropWrapper, fixtureDefault);\ntest('Molecule › MoleculeDragAndDropWrapper › TwoDragAndDrops › should be rendered', renderComponentMacro, MoleculeDragAndDropWrapper, fixtureTwoDragAndDrops);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../src/molecule/drag-and-drop-wrapper/test/fixtures.js"],"names":["t","pass","MoleculeDragAndDropWrapper","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureTwoDragAndDrops","fixtureWithoutCheckbox"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,qEAAL,EAA4EA,CAAC,IAAI;AAC/EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAA2BC,SAAnC,EAA8C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC5DL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,+DAA8DF,GAAI,mEAA3F;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,sEAAL,EAA6EG,wBAA7E,EAAmGN,SAAnG,EAA+HO,gBAA/H;AACA,kBAAK,8EAAL,EAAqFD,wBAArF,EAA2GN,SAA3G,EAAuIQ,wBAAvI;AACA,kBAAK,8EAAL,EAAqFF,wBAArF,EAA2GN,SAA3G,EAAuIS,wBAAvI","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeDragAndDropWrapper from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureTwoDragAndDrops from './fixtures/two-drag-and-drops';\nimport fixtureWithoutCheckbox from './fixtures/without-checkbox';\n\ntest('Molecule › MoleculeDragAndDropWrapper > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeDragAndDropWrapper.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeDragAndDropWrapper.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeDragAndDropWrapper › Default › should be rendered', renderComponentMacro, MoleculeDragAndDropWrapper, fixtureDefault);\ntest('Molecule › MoleculeDragAndDropWrapper › TwoDragAndDrops › should be rendered', renderComponentMacro, MoleculeDragAndDropWrapper, fixtureTwoDragAndDrops);\ntest('Molecule › MoleculeDragAndDropWrapper › WithoutCheckbox › should be rendered', renderComponentMacro, MoleculeDragAndDropWrapper, fixtureWithoutCheckbox);\n"],"file":"fixtures.js"}

package/lib/molecule/input-text-with-titeled-checkbox/test/fixtures.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _renderComponent = _interopRequireDefault(require("../../../test/helpers/render-component"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _checked = _interopRequireDefault(require("./fixtures/checked"));
+
+var _unchecked = _interopRequireDefault(require("./fixtures/unchecked"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _ava.default)('Molecule › MoleculeInputTextWithTiteledCheckbox > should have valid propTypes', t => {
+  t.pass();
+  (0, _forEach.default)(_.default.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Molecule.MoleculeInputTextWithTiteledCheckbox.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+(0, _ava.default)('Molecule › MoleculeInputTextWithTiteledCheckbox › Checked › should be rendered', _renderComponent.default, _.default, _checked.default);
+(0, _ava.default)('Molecule › MoleculeInputTextWithTiteledCheckbox › Unchecked › should be rendered', _renderComponent.default, _.default, _unchecked.default);
+//# sourceMappingURL=fixtures.js.map

package/lib/molecule/input-text-with-titeled-checkbox/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/input-text-with-titeled-checkbox/test/fixtures.js"],"names":["t","pass","MoleculeInputTextWithTiteledCheckbox","propTypes","value","key","not","undefined","renderComponentMacro","fixtureChecked","fixtureUnchecked"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,+EAAL,EAAsFA,CAAC,IAAI;AACzFA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAqCC,SAA7C,EAAwD,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACtEL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,yEAAwEF,GAAI,mEAArG;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,gFAAL,EAAuFG,wBAAvF,EAA6GN,SAA7G,EAAmJO,gBAAnJ;AACA,kBAAK,kFAAL,EAAyFD,wBAAzF,EAA+GN,SAA/G,EAAqJQ,kBAArJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeInputTextWithTiteledCheckbox from '..';\nimport fixtureChecked from './fixtures/checked';\nimport fixtureUnchecked from './fixtures/unchecked';\n\ntest('Molecule › MoleculeInputTextWithTiteledCheckbox > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeInputTextWithTiteledCheckbox.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeInputTextWithTiteledCheckbox.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeInputTextWithTiteledCheckbox › Checked › should be rendered', renderComponentMacro, MoleculeInputTextWithTiteledCheckbox, fixtureChecked);\ntest('Molecule › MoleculeInputTextWithTiteledCheckbox › Unchecked › should be rendered', renderComponentMacro, MoleculeInputTextWithTiteledCheckbox, fixtureUnchecked);\n"],"file":"fixtures.js"}

package/lib/molecule/search/test/fixtures.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _renderComponent = _interopRequireDefault(require("../../../test/helpers/render-component"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+var _withValue = _interopRequireDefault(require("./fixtures/with-value"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _ava.default)('Molecule › MoleculeSearch > should have valid propTypes', t => {
+  t.pass();
+  (0, _forEach.default)(_.default.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Molecule.MoleculeSearch.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+(0, _ava.default)('Molecule › MoleculeSearch › Default › should be rendered', _renderComponent.default, _.default, _default.default);
+(0, _ava.default)('Molecule › MoleculeSearch › WithValue › should be rendered', _renderComponent.default, _.default, _withValue.default);
+//# sourceMappingURL=fixtures.js.map

package/lib/molecule/search/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/search/test/fixtures.js"],"names":["t","pass","MoleculeSearch","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureWithValue"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,yDAAL,EAAgEA,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAeC,SAAvB,EAAkC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,0DAAL,EAAiEG,wBAAjE,EAAuFN,SAAvF,EAAuGO,gBAAvG;AACA,kBAAK,4DAAL,EAAmED,wBAAnE,EAAyFN,SAAzF,EAAyGQ,kBAAzG","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeSearch from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureWithValue from './fixtures/with-value';\n\ntest('Molecule › MoleculeSearch > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeSearch.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeSearch.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeSearch › Default › should be rendered', renderComponentMacro, MoleculeSearch, fixtureDefault);\ntest('Molecule › MoleculeSearch › WithValue › should be rendered', renderComponentMacro, MoleculeSearch, fixtureWithValue);\n"],"file":"fixtures.js"}

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

package/lib/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":["props","defaultProps","skillTitle","isCustom"],"mappings":";;;;;AAAA;;;;eAEe;AACbA,EAAAA,KAAK,wBAAMC,sBAAN;AAAoBC,IAAAA,UAAU,EAAE,SAAhC;AAA2CC,IAAAA,QAAQ,EAAE;AAArD;AADQ,C","sourcesContent":["import {defaultProps} from './default';\n\nexport default {\n  props: {...defaultProps, skillTitle: 'Agility', isCustom: false}\n};\n"],"file":"short-skill-title.js"}

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _renderComponent = _interopRequireDefault(require("../../../test/helpers/render-component"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _customSkill = _interopRequireDefault(require("./fixtures/custom-skill"));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+var _noAriaLabels = _interopRequireDefault(require("./fixtures/no-aria-labels"));
+
+var _shortSkillTitle = _interopRequireDefault(require("./fixtures/short-skill-title"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _ava.default)('Molecule › MoleculeSkillCard > should have valid propTypes', t => {
+  t.pass();
+  (0, _forEach.default)(_.default.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Molecule.MoleculeSkillCard.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+(0, _ava.default)('Molecule › MoleculeSkillCard › CustomSkill › should be rendered', _renderComponent.default, _.default, _customSkill.default);
+(0, _ava.default)('Molecule › MoleculeSkillCard › Default › should be rendered', _renderComponent.default, _.default, _default.default);
+(0, _ava.default)('Molecule › MoleculeSkillCard › NoAriaLabels › should be rendered', _renderComponent.default, _.default, _noAriaLabels.default);
+(0, _ava.default)('Molecule › MoleculeSkillCard › ShortSkillTitle › should be rendered', _renderComponent.default, _.default, _shortSkillTitle.default);
+//# sourceMappingURL=fixtures.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/skill-card/test/fixtures.js"],"names":["t","pass","MoleculeSkillCard","propTypes","value","key","not","undefined","renderComponentMacro","fixtureCustomSkill","fixtureDefault","fixtureNoAriaLabels","fixtureShortSkillTitle"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,4DAAL,EAAmEA,CAAC,IAAI;AACtEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAkBC,SAA1B,EAAqC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACnDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,sDAAqDF,GAAI,mEAAlF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,iEAAL,EAAwEG,wBAAxE,EAA8FN,SAA9F,EAAiHO,oBAAjH;AACA,kBAAK,6DAAL,EAAoED,wBAApE,EAA0FN,SAA1F,EAA6GQ,gBAA7G;AACA,kBAAK,kEAAL,EAAyEF,wBAAzE,EAA+FN,SAA/F,EAAkHS,qBAAlH;AACA,kBAAK,qEAAL,EAA4EH,wBAA5E,EAAkGN,SAAlG,EAAqHU,wBAArH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeSkillCard from '..';\nimport fixtureCustomSkill from './fixtures/custom-skill';\nimport fixtureDefault from './fixtures/default';\nimport fixtureNoAriaLabels from './fixtures/no-aria-labels';\nimport fixtureShortSkillTitle from './fixtures/short-skill-title';\n\ntest('Molecule › MoleculeSkillCard > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeSkillCard.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeSkillCard.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeSkillCard › CustomSkill › should be rendered', renderComponentMacro, MoleculeSkillCard, fixtureCustomSkill);\ntest('Molecule › MoleculeSkillCard › Default › should be rendered', renderComponentMacro, MoleculeSkillCard, fixtureDefault);\ntest('Molecule › MoleculeSkillCard › NoAriaLabels › should be rendered', renderComponentMacro, MoleculeSkillCard, fixtureNoAriaLabels);\ntest('Molecule › MoleculeSkillCard › ShortSkillTitle › should be rendered', renderComponentMacro, MoleculeSkillCard, fixtureShortSkillTitle);\n"],"file":"fixtures.js"}

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

@@ -0,0 +1,102 @@
+"use strict";
+
+var _browserEnv = _interopRequireDefault(require("browser-env"));
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _customSkill = _interopRequireDefault(require("./fixtures/custom-skill"));
+
+var _noAriaLabels = _interopRequireDefault(require("./fixtures/no-aria-labels"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+(0, _browserEnv.default)();
+(0, _enzyme.configure)({
+  adapter: new _enzymeAdapterReact.default()
+});
+(0, _ava.default)('onClick should be reachable, should match given aria-label', t => {
+  let buttonWasClicked = false;
+  _customSkill.default.props = _extends(_extends({}, _customSkill.default.props), {}, {
+    onClick: () => {
+      buttonWasClicked = true;
+    }
+  });
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _customSkill.default.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();
+});
+(0, _ava.default)('onHover should change button text color && backgroundColor', t => {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _customSkill.default.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();
+});
+(0, _ava.default)('should use default aria-labels if aria-label props are not provided', t => {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _noAriaLabels.default.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/lib/molecule/skill-card/test/skill-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/skill-card/test/skill-card.js"],"names":["adapter","Adapter","t","buttonWasClicked","customSkillFixture","props","onClick","wrapper","cardWrapper","find","true","at","exists","is","skillTitle","questionsLabel","buttonLink","simulate","pass","expectedStyleNoHover","backgroundColor","color","transition","expectedStyleOnHover","buttonWrapper","deepEqual","style","update","noAriaLabelsFixtures"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA;AACA,uBAAU;AAACA,EAAAA,OAAO,EAAE,IAAIC,2BAAJ;AAAV,CAAV;AAEA,kBAAK,4DAAL,EAAmEC,CAAC,IAAI;AACtE,MAAIC,gBAAgB,GAAG,KAAvB;AACAC,uBAAmBC,KAAnB,yBACKD,qBAAmBC,KADxB;AAEEC,IAAAA,OAAO,EAAE,MAAM;AACbH,MAAAA,gBAAgB,GAAG,IAAnB;AACD;AAJH;AAMA,QAAMI,OAAO,GAAG,iCAAM,6BAAC,SAAD,EAAeH,qBAAmBC,KAAlC,CAAN,CAAhB;AAEA,QAAMG,WAAW,GAAGD,OAAO,CAACE,IAAR,CAAa,kCAAb,CAApB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOF,WAAW,CAACG,EAAZ,CAAe,CAAf,EAAkBC,MAAlB,EAAP;AACAV,EAAAA,CAAC,CAACW,EAAF,CAAKL,WAAW,CAACG,EAAZ,CAAe,CAAf,EAAkBN,KAAlB,GAA0B,YAA1B,CAAL,EAA8C,YAA9C;AAEA,QAAMS,UAAU,GAAGN,WAAW,CAACC,IAAZ,CAAiB,2BAAjB,CAAnB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOI,UAAU,CAACH,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAV,EAAAA,CAAC,CAACW,EAAF,CAAKC,UAAU,CAACH,EAAX,CAAc,CAAd,EAAiBN,KAAjB,GAAyB,YAAzB,CAAL,EAA6C,kBAA7C;AAEA,QAAMU,cAAc,GAAGP,WAAW,CAACC,IAAZ,CAAiB,yCAAjB,CAAvB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOK,cAAc,CAACJ,EAAf,CAAkB,CAAlB,EAAqBC,MAArB,EAAP;AACAV,EAAAA,CAAC,CAACW,EAAF,CAAKE,cAAc,CAACJ,EAAf,CAAkB,CAAlB,EAAqBN,KAArB,GAA6B,YAA7B,CAAL,EAAiD,mBAAjD;AAEA,QAAMW,UAAU,GAAGR,WAAW,CAACC,IAAZ,CAAiB,iCAAjB,CAAnB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOM,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAV,EAAAA,CAAC,CAACW,EAAF,CAAKG,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBN,KAAjB,GAAyB,YAAzB,CAAL,EAA6C,mBAA7C;AACAW,EAAAA,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBM,QAAjB,CAA0B,OAA1B,EAAmC,EAAnC;AACAf,EAAAA,CAAC,CAACQ,IAAF,CAAOP,gBAAP;AAEAD,EAAAA,CAAC,CAACgB,IAAF;AACD,CA7BD;AA+BA,kBAAK,4DAAL,EAAmEhB,CAAC,IAAI;AACtE,QAAMK,OAAO,GAAG,iCAAM,6BAAC,SAAD,EAAeH,qBAAmBC,KAAlC,CAAN,CAAhB;AAEA,QAAMc,oBAAoB,GAAG;AAC3BC,IAAAA,eAAe,EAAE,yBADU;AAE3BC,IAAAA,KAAK,EAAE,SAFoB;AAG3BC,IAAAA,UAAU,EAAE;AAHe,GAA7B;AAMA,QAAMC,oBAAoB,GAAG;AAC3BH,IAAAA,eAAe,EAAE,SADU;AAE3BC,IAAAA,KAAK,EAAE,SAFoB;AAG3BC,IAAAA,UAAU,EAAE;AAHe,GAA7B;AAMA,MAAId,WAAW,GAAGD,OAAO,CAACE,IAAR,CAAa,kCAAb,CAAlB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOF,WAAW,CAACG,EAAZ,CAAe,CAAf,EAAkBC,MAAlB,EAAP;AAEA,MAAIY,aAAa,GAAGhB,WAAW,CAACC,IAAZ,CAAiB,8BAAjB,CAApB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOc,aAAa,CAACb,EAAd,CAAiB,CAAjB,EAAoBC,MAApB,EAAP;AACA,MAAII,UAAU,GAAGQ,aAAa,CAACf,IAAd,CAAmB,wCAAnB,CAAjB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOM,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAV,EAAAA,CAAC,CAACuB,SAAF,CAAYT,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBN,KAAjB,GAAyBqB,KAArC,EAA4CP,oBAA5C,EAtBsE,CAwBtE;;AACAK,EAAAA,aAAa,CAACP,QAAd,CAAuB,WAAvB;AAEAV,EAAAA,OAAO,CAACoB,MAAR;AACAnB,EAAAA,WAAW,GAAGD,OAAO,CAACE,IAAR,CAAa,kCAAb,CAAd;AACAe,EAAAA,aAAa,GAAGhB,WAAW,CAACC,IAAZ,CAAiB,8BAAjB,CAAhB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOc,aAAa,CAACb,EAAd,CAAiB,CAAjB,EAAoBC,MAApB,EAAP;AACAI,EAAAA,UAAU,GAAGQ,aAAa,CAACf,IAAd,CAAmB,wCAAnB,CAAb;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOM,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AAEAV,EAAAA,CAAC,CAACuB,SAAF,CAAYT,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBN,KAAjB,GAAyBqB,KAArC,EAA4CH,oBAA5C,EAlCsE,CAoCtE;;AACAC,EAAAA,aAAa,CAACP,QAAd,CAAuB,YAAvB;AAEAV,EAAAA,OAAO,CAACoB,MAAR;AAEAX,EAAAA,UAAU,GAAGT,OAAO,CAACE,IAAR,CAAa,wCAAb,CAAb;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOM,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAV,EAAAA,CAAC,CAACuB,SAAF,CAAYT,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBN,KAAjB,GAAyBqB,KAArC,EAA4CP,oBAA5C;AAEAjB,EAAAA,CAAC,CAACgB,IAAF;AACD,CA9CD;AAgDA,kBAAK,qEAAL,EAA4EhB,CAAC,IAAI;AAC/E,QAAMK,OAAO,GAAG,iCAAM,6BAAC,SAAD,EAAeqB,sBAAqBvB,KAApC,CAAN,CAAhB;AAEA,QAAMG,WAAW,GAAGD,OAAO,CAACE,IAAR,CAAa,kCAAb,CAApB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOF,WAAW,CAACG,EAAZ,CAAe,CAAf,EAAkBC,MAAlB,EAAP;AAEA,QAAME,UAAU,GAAGN,WAAW,CAACC,IAAZ,CAAiB,2BAAjB,CAAnB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOI,UAAU,CAACH,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAV,EAAAA,CAAC,CAACW,EAAF,CAAKC,UAAU,CAACH,EAAX,CAAc,CAAd,EAAiBN,KAAjB,GAAyB,YAAzB,CAAL,EAA6C,gCAA7C;AAEA,QAAMU,cAAc,GAAGP,WAAW,CAACC,IAAZ,CAAiB,yCAAjB,CAAvB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOK,cAAc,CAACJ,EAAf,CAAkB,CAAlB,EAAqBC,MAArB,EAAP;AACAV,EAAAA,CAAC,CAACW,EAAF,CAAKE,cAAc,CAACJ,EAAf,CAAkB,CAAlB,EAAqBN,KAArB,GAA6B,YAA7B,CAAL,EAAiD,wBAAjD;AAEA,QAAMW,UAAU,GAAGR,WAAW,CAACC,IAAZ,CAAiB,wCAAjB,CAAnB;AACAP,EAAAA,CAAC,CAACQ,IAAF,CAAOM,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAV,EAAAA,CAAC,CAACW,EAAF,CAAKG,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBN,KAAjB,GAAyB,YAAzB,CAAL,EAA6C,mBAA7C;AAEAH,EAAAA,CAAC,CAACgB,IAAF;AACD,CAnBD","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/lib/molecule/title-and-checkbox-wrapper/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _inputTextWithTitle = _interopRequireDefault(require("../../atom/input-text-with-title"));
+
+var _checkboxWithTitle = _interopRequireDefault(require("../../atom/checkbox-with-title"));
+
+var _title = _interopRequireDefault(require("../../atom/title"));
+
+var _dragAndDropWrapper = _interopRequireDefault(require("../drag-and-drop-wrapper"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const CHILD = {
+  'input-text': _inputTextWithTitle.default,
+  'drag-and-drop-wrapper': _dragAndDropWrapper.default
+};
+
+const TitleAndCheckBoxWrapper = props => {
+  const {
+    checkboxWithTitle,
+    child,
+    sectionTitle
+  } = props;
+  const Child = CHILD[child.childType];
+  return /*#__PURE__*/_react.default.createElement("div", null, checkboxWithTitle ? /*#__PURE__*/_react.default.createElement(_checkboxWithTitle.default, checkboxWithTitle) : null, sectionTitle ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.sectionTitle
+  }, /*#__PURE__*/_react.default.createElement(_title.default, _extends({}, sectionTitle, {
+    type: 'form-group'
+  }))) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: checkboxWithTitle || sectionTitle ? _style.default.child : null
+  }, /*#__PURE__*/_react.default.createElement(Child, child)));
+};
+
+TitleAndCheckBoxWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
+  checkboxWithTitle: _propTypes.default.shape(_checkboxWithTitle.default.propTypes),
+  sectionTitle: _propTypes.default.shape(_title.default.propTypes),
+  child: _propTypes.default.oneOfType([_propTypes.default.shape(_extends(_extends({}, _inputTextWithTitle.default.propTypes), {}, {
+    childType: _propTypes.default.oneOf(['input-text'])
+  })), _propTypes.default.shape(_extends(_extends({}, _dragAndDropWrapper.default.propTypes), {}, {
+    childType: _propTypes.default.oneOf(['drag-and-drop-wrapper'])
+  }))])
+} : {};
+var _default = TitleAndCheckBoxWrapper;
+exports.default = _default;
+//# sourceMappingURL=index.js.map