@coorpacademy/components 10.13.10 → 10.13.13

package/es/molecule/input-text-with-titled-checkbox/test/fixtures/unchecked.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/input-text-with-titled-checkbox/test/fixtures/unchecked.js"],"names":["props","title","checked","onChange","value","console","log","checkBoxOnChange","inputTextTitle","inputTextValue","inputTextDescription","inputTextDisabled","inputTextOnChange","checkbox","input"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,cADF;AAELC,IAAAA,OAAO,EAAE,KAFJ;AAGLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ,CAHd;AAILG,IAAAA,gBAAgB,EAAEH,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ,CAJtB;AAKLI,IAAAA,cAAc,EAAE,cALX;AAMLC,IAAAA,cAAc,EAAE,KANX;AAOLC,IAAAA,oBAAoB,EAAE,0BAPjB;AAQLC,IAAAA,iBAAiB,EAAE,IARd;AASLC,IAAAA,iBAAiB,EAAER,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ,CATvB;AAUL,kBAAc;AAACS,MAAAA,QAAQ,EAAE,WAAX;AAAwBC,MAAAA,KAAK,EAAE;AAA/B;AAVT;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    title: 'Create badge',\n    checked: false,\n    onChange: value => console.log(value),\n    checkBoxOnChange: value => console.log(value),\n    inputTextTitle: 'Stars amount',\n    inputTextValue: '250',\n    inputTextDescription: 'This is the tooltip text',\n    inputTextDisabled: true,\n    inputTextOnChange: value => console.log(value),\n    'aria-label': {checkbox: 'check box', input: 'input text'}\n  }\n};\n"],"file":"unchecked.js"}

package/es/molecule/list-badges/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import map from 'lodash/fp/map';
+import ContentBadge from '../../atom/content-badge';
+import style from './style.css';
+
+const ListBadges = ({
+  items,
+  'aria-label': ariaLabel
+}) => {
+  const itemsView = map(({
+    category,
+    label
+  }) => {
+    return /*#__PURE__*/React.createElement("li", {
+      className: style.item,
+      key: `badge-${category}`,
+      "data-name": `badge-${category}`,
+      "aria-label": label
+    }, /*#__PURE__*/React.createElement(ContentBadge, {
+      className: style.contentBadge,
+      category: category,
+      label: label
+    }));
+  }, items);
+  return /*#__PURE__*/React.createElement("ul", {
+    className: style.list,
+    "aria-label": ariaLabel,
+    "data-name": "badges-list"
+  }, itemsView);
+};
+
+ListBadges.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape(ContentBadge.propTypes))
+} : {};
+export default ListBadges;
+//# sourceMappingURL=index.js.map

package/es/molecule/list-badges/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/list-badges/index.js"],"names":["React","PropTypes","map","ContentBadge","style","ListBadges","items","ariaLabel","itemsView","category","label","item","contentBadge","list","propTypes","string","arrayOf","shape"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,YAAP,MAAyB,0BAAzB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,UAAU,GAAG,CAAC;AAACC,EAAAA,KAAD;AAAQ,gBAAcC;AAAtB,CAAD,KAAsC;AACvD,QAAMC,SAAS,GAAGN,GAAG,CAAC,CAAC;AAACO,IAAAA,QAAD;AAAWC,IAAAA;AAAX,GAAD,KAAuB;AAC3C,wBACE;AACE,MAAA,SAAS,EAAEN,KAAK,CAACO,IADnB;AAEE,MAAA,GAAG,EAAG,SAAQF,QAAS,EAFzB;AAGE,mBAAY,SAAQA,QAAS,EAH/B;AAIE,oBAAYC;AAJd,oBAME,oBAAC,YAAD;AAAc,MAAA,SAAS,EAAEN,KAAK,CAACQ,YAA/B;AAA6C,MAAA,QAAQ,EAAEH,QAAvD;AAAiE,MAAA,KAAK,EAAEC;AAAxE,MANF,CADF;AAUD,GAXoB,EAWlBJ,KAXkB,CAArB;AAaA,sBACE;AAAI,IAAA,SAAS,EAAEF,KAAK,CAACS,IAArB;AAA2B,kBAAYN,SAAvC;AAAkD,iBAAU;AAA5D,KACGC,SADH,CADF;AAKD,CAnBD;;AAqBAH,UAAU,CAACS,SAAX,2CAAuB;AACrB,gBAAcb,SAAS,CAACc,MADH;AAErBT,EAAAA,KAAK,EAAEL,SAAS,CAACe,OAAV,CAAkBf,SAAS,CAACgB,KAAV,CAAgBd,YAAY,CAACW,SAA7B,CAAlB;AAFc,CAAvB;AAKA,eAAeT,UAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport map from 'lodash/fp/map';\nimport ContentBadge from '../../atom/content-badge';\nimport style from './style.css';\n\nconst ListBadges = ({items, 'aria-label': ariaLabel}) => {\n  const itemsView = map(({category, label}) => {\n    return (\n      <li\n        className={style.item}\n        key={`badge-${category}`}\n        data-name={`badge-${category}`}\n        aria-label={label}\n      >\n        <ContentBadge className={style.contentBadge} category={category} label={label} />\n      </li>\n    );\n  }, items);\n\n  return (\n    <ul className={style.list} aria-label={ariaLabel} data-name=\"badges-list\">\n      {itemsView}\n    </ul>\n  );\n};\n\nListBadges.propTypes = {\n  'aria-label': PropTypes.string,\n  items: PropTypes.arrayOf(PropTypes.shape(ContentBadge.propTypes))\n};\n\nexport default ListBadges;\n"],"file":"index.js"}

package/es/molecule/list-badges/style.css

@@ -0,0 +1,15 @@
+.item {
+  margin-right: 8px;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+}
+
+.contentBadge {
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 10px;;
+}

package/es/molecule/list-badges/test/fixtures/advanced.js

@@ -0,0 +1,9 @@
+import advanced from '../../../../atom/content-badge/test/fixtures/advanced';
+import base from '../../../../atom/content-badge/test/fixtures/default';
+export default {
+  props: {
+    'aria-label': 'aria list',
+    items: [base.props, advanced.props]
+  }
+};
+//# sourceMappingURL=advanced.js.map

package/es/molecule/list-badges/test/fixtures/advanced.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/list-badges/test/fixtures/advanced.js"],"names":["advanced","base","props","items"],"mappings":"AAAA,OAAOA,QAAP,MAAqB,uDAArB;AACA,OAAOC,IAAP,MAAiB,sDAAjB;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACL,kBAAc,WADT;AAELC,IAAAA,KAAK,EAAE,CAACF,IAAI,CAACC,KAAN,EAAaF,QAAQ,CAACE,KAAtB;AAFF;AADM,CAAf","sourcesContent":["import advanced from '../../../../atom/content-badge/test/fixtures/advanced';\nimport base from '../../../../atom/content-badge/test/fixtures/default';\n\nexport default {\n  props: {\n    'aria-label': 'aria list',\n    items: [base.props, advanced.props]\n  }\n};\n"],"file":"advanced.js"}

package/es/molecule/list-badges/test/fixtures/base.js

@@ -0,0 +1,8 @@
+import base from '../../../../atom/content-badge/test/fixtures/default';
+export default {
+  props: {
+    'aria-label': 'aria list',
+    items: [base.props]
+  }
+};
+//# sourceMappingURL=base.js.map

package/es/molecule/list-badges/test/fixtures/base.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/list-badges/test/fixtures/base.js"],"names":["base","props","items"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,sDAAjB;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACL,kBAAc,WADT;AAELC,IAAAA,KAAK,EAAE,CAACF,IAAI,CAACC,KAAN;AAFF;AADM,CAAf","sourcesContent":["import base from '../../../../atom/content-badge/test/fixtures/default';\n\nexport default {\n  props: {\n    'aria-label': 'aria list',\n    items: [base.props]\n  }\n};\n"],"file":"base.js"}

package/es/molecule/list-badges/test/fixtures/coach.js

@@ -0,0 +1,10 @@
+import advanced from '../../../../atom/content-badge/test/fixtures/advanced';
+import coach from '../../../../atom/content-badge/test/fixtures/coach';
+import base from '../../../../atom/content-badge/test/fixtures/default';
+export default {
+  props: {
+    'aria-label': 'aria list',
+    items: [base.props, advanced.props, coach.props]
+  }
+};
+//# sourceMappingURL=coach.js.map

package/es/molecule/list-badges/test/fixtures/coach.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/list-badges/test/fixtures/coach.js"],"names":["advanced","coach","base","props","items"],"mappings":"AAAA,OAAOA,QAAP,MAAqB,uDAArB;AACA,OAAOC,KAAP,MAAkB,oDAAlB;AACA,OAAOC,IAAP,MAAiB,sDAAjB;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACL,kBAAc,WADT;AAELC,IAAAA,KAAK,EAAE,CAACF,IAAI,CAACC,KAAN,EAAaH,QAAQ,CAACG,KAAtB,EAA6BF,KAAK,CAACE,KAAnC;AAFF;AADM,CAAf","sourcesContent":["import advanced from '../../../../atom/content-badge/test/fixtures/advanced';\nimport coach from '../../../../atom/content-badge/test/fixtures/coach';\nimport base from '../../../../atom/content-badge/test/fixtures/default';\n\nexport default {\n  props: {\n    'aria-label': 'aria list',\n    items: [base.props, advanced.props, coach.props]\n  }\n};\n"],"file":"coach.js"}

package/es/molecule/list-badges/test/fixtures/course.js

@@ -0,0 +1,8 @@
+import course from '../../../../atom/content-badge/test/fixtures/course';
+export default {
+  props: {
+    'aria-label': 'aria list',
+    items: [course.props]
+  }
+};
+//# sourceMappingURL=course.js.map

package/es/molecule/list-badges/test/fixtures/course.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/list-badges/test/fixtures/course.js"],"names":["course","props","items"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,qDAAnB;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACL,kBAAc,WADT;AAELC,IAAAA,KAAK,EAAE,CAACF,MAAM,CAACC,KAAR;AAFF;AADM,CAAf","sourcesContent":["import course from '../../../../atom/content-badge/test/fixtures/course';\n\nexport default {\n  props: {\n    'aria-label': 'aria list',\n    items: [course.props]\n  }\n};\n"],"file":"course.js"}

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":"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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/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/organism/rewards-form/index.js

@@ -0,0 +1,41 @@
+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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import InputTextWithTitledCheckbox from '../../molecule/input-text-with-titled-checkbox';
+import DragAndDropWrapper from '../../molecule/drag-and-drop-wrapper';
+import style from './style.css';
+const ITEM = {
+  'input-text': InputTextWithTitledCheckbox,
+  'drag-and-drop': DragAndDropWrapper
+};
+
+const RewardsForm = ({
+  items
+}) => {
+  const itemsView = items.map((_ref, index) => {
+    let {
+      type
+    } = _ref,
+        item = _objectWithoutPropertiesLoose(_ref, ["type"]);
+
+    const Component = ITEM[type];
+    return /*#__PURE__*/React.createElement("li", {
+      key: index,
+      className: classnames(style.item, type === 'input-text' && style.inputText),
+      "data-name": `reward-${index}`
+    }, /*#__PURE__*/React.createElement(Component, item));
+  });
+  return /*#__PURE__*/React.createElement("ul", {
+    className: style.list
+  }, itemsView);
+};
+
+RewardsForm.propTypes = process.env.NODE_ENV !== "production" ? {
+  items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(_extends({}, InputTextWithTitledCheckbox.propTypes)), PropTypes.shape(_extends({}, DragAndDropWrapper.propTypes))]))
+} : {};
+export default RewardsForm;
+//# sourceMappingURL=index.js.map

package/es/organism/rewards-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/rewards-form/index.js"],"names":["React","PropTypes","classnames","InputTextWithTitledCheckbox","DragAndDropWrapper","style","ITEM","RewardsForm","items","itemsView","map","index","type","item","Component","inputText","list","propTypes","arrayOf","oneOfType","shape"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,2BAAP,MAAwC,gDAAxC;AACA,OAAOC,kBAAP,MAA+B,sCAA/B;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,IAAI,GAAG;AACX,gBAAcH,2BADH;AAEX,mBAAiBC;AAFN,CAAb;;AAKA,MAAMG,WAAW,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAa;AAC/B,QAAMC,SAAS,GAAGD,KAAK,CAACE,GAAN,CAAU,OAAkBC,KAAlB,KAA4B;AAAA,QAA3B;AAACC,MAAAA;AAAD,KAA2B;AAAA,QAAjBC,IAAiB;;AACtD,UAAMC,SAAS,GAAGR,IAAI,CAACM,IAAD,CAAtB;AACA,wBACE;AACE,MAAA,GAAG,EAAED,KADP;AAEE,MAAA,SAAS,EAAET,UAAU,CAACG,KAAK,CAACQ,IAAP,EAAaD,IAAI,KAAK,YAAT,IAAyBP,KAAK,CAACU,SAA5C,CAFvB;AAGE,mBAAY,UAASJ,KAAM;AAH7B,oBAKE,oBAAC,SAAD,EAAeE,IAAf,CALF,CADF;AASD,GAXiB,CAAlB;AAYA,sBAAO;AAAI,IAAA,SAAS,EAAER,KAAK,CAACW;AAArB,KAA4BP,SAA5B,CAAP;AACD,CAdD;;AAgBAF,WAAW,CAACU,SAAZ,2CAAwB;AACtBT,EAAAA,KAAK,EAAEP,SAAS,CAACiB,OAAV,CACLjB,SAAS,CAACkB,SAAV,CAAoB,CAClBlB,SAAS,CAACmB,KAAV,cAAoBjB,2BAA2B,CAACc,SAAhD,EADkB,EAElBhB,SAAS,CAACmB,KAAV,cAAoBhB,kBAAkB,CAACa,SAAvC,EAFkB,CAApB,CADK;AADe,CAAxB;AASA,eAAeV,WAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport InputTextWithTitledCheckbox from '../../molecule/input-text-with-titled-checkbox';\nimport DragAndDropWrapper from '../../molecule/drag-and-drop-wrapper';\nimport style from './style.css';\n\nconst ITEM = {\n  'input-text': InputTextWithTitledCheckbox,\n  'drag-and-drop': DragAndDropWrapper\n};\n\nconst RewardsForm = ({items}) => {\n  const itemsView = items.map(({type, ...item}, index) => {\n    const Component = ITEM[type];\n    return (\n      <li\n        key={index}\n        className={classnames(style.item, type === 'input-text' && style.inputText)}\n        data-name={`reward-${index}`}\n      >\n        <Component {...item} />\n      </li>\n    );\n  });\n  return <ul className={style.list}>{itemsView}</ul>;\n};\n\nRewardsForm.propTypes = {\n  items: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape({...InputTextWithTitledCheckbox.propTypes}),\n      PropTypes.shape({...DragAndDropWrapper.propTypes})\n    ])\n  )\n};\n\nexport default RewardsForm;\n"],"file":"index.js"}

package/es/organism/rewards-form/style.css

@@ -0,0 +1,12 @@
+.item {
+  margin-bottom: 34px;
+}
+.inputText {
+  width: 175px;
+}
+
+.list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}

package/es/organism/rewards-form/test/fixtures/default.js

@@ -0,0 +1,17 @@
+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 checkedInputText from '../../../../molecule/input-text-with-titled-checkbox/test/fixtures/checked';
+import singleDragAndDrop from '../../../../molecule/drag-and-drop-wrapper/test/fixtures/default';
+import doubleDragAndDrop from '../../../../molecule/drag-and-drop-wrapper/test/fixtures/two-drag-and-drops';
+export default {
+  props: {
+    items: [_extends(_extends({}, checkedInputText.props), {}, {
+      type: 'input-text'
+    }), _extends(_extends({}, singleDragAndDrop.props), {}, {
+      type: 'drag-and-drop'
+    }), _extends(_extends({}, doubleDragAndDrop.props), {}, {
+      type: 'drag-and-drop'
+    })]
+  }
+};
+//# sourceMappingURL=default.js.map

package/es/organism/rewards-form/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/rewards-form/test/fixtures/default.js"],"names":["checkedInputText","singleDragAndDrop","doubleDragAndDrop","props","items","type"],"mappings":";;AAAA,OAAOA,gBAAP,MAA6B,4EAA7B;AACA,OAAOC,iBAAP,MAA8B,kEAA9B;AACA,OAAOC,iBAAP,MAA8B,6EAA9B;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,uBACDJ,gBAAgB,CAACG,KADhB;AACuBE,MAAAA,IAAI,EAAE;AAD7B,8BAEDJ,iBAAiB,CAACE,KAFjB;AAEwBE,MAAAA,IAAI,EAAE;AAF9B,8BAGDH,iBAAiB,CAACC,KAHjB;AAGwBE,MAAAA,IAAI,EAAE;AAH9B;AADF;AADM,CAAf","sourcesContent":["import checkedInputText from '../../../../molecule/input-text-with-titled-checkbox/test/fixtures/checked';\nimport singleDragAndDrop from '../../../../molecule/drag-and-drop-wrapper/test/fixtures/default';\nimport doubleDragAndDrop from '../../../../molecule/drag-and-drop-wrapper/test/fixtures/two-drag-and-drops';\n\nexport default {\n  props: {\n    items: [\n      {...checkedInputText.props, type: 'input-text'},\n      {...singleDragAndDrop.props, type: 'drag-and-drop'},\n      {...doubleDragAndDrop.props, type: 'drag-and-drop'}\n    ]\n  }\n};\n"],"file":"default.js"}

package/es/organism/rewards-form/test/fixtures/no-rewards.js

@@ -0,0 +1,6 @@
+export default {
+  props: {
+    items: []
+  }
+};
+//# sourceMappingURL=no-rewards.js.map

package/es/organism/rewards-form/test/fixtures/no-rewards.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/rewards-form/test/fixtures/no-rewards.js"],"names":["props","items"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE;AADF;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    items: []\n  }\n};\n"],"file":"no-rewards.js"}

package/es/organism/rewards-form/test/fixtures/one-reward.js

@@ -0,0 +1,11 @@
+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 singleDragAndDrop from '../../../../molecule/drag-and-drop-wrapper/test/fixtures/default';
+export default {
+  props: {
+    items: [_extends(_extends({}, singleDragAndDrop.props), {}, {
+      type: 'drag-and-drop'
+    })]
+  }
+};
+//# sourceMappingURL=one-reward.js.map

package/es/organism/rewards-form/test/fixtures/one-reward.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/rewards-form/test/fixtures/one-reward.js"],"names":["singleDragAndDrop","props","items","type"],"mappings":";;AAAA,OAAOA,iBAAP,MAA8B,kEAA9B;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,uBAAKF,iBAAiB,CAACC,KAAvB;AAA8BE,MAAAA,IAAI,EAAE;AAApC;AADF;AADM,CAAf","sourcesContent":["import singleDragAndDrop from '../../../../molecule/drag-and-drop-wrapper/test/fixtures/default';\n\nexport default {\n  props: {\n    items: [{...singleDragAndDrop.props, type: 'drag-and-drop'}]\n  }\n};\n"],"file":"one-reward.js"}

package/es/organism/rewards-form/test/fixtures/two-rewards.js

@@ -0,0 +1,14 @@
+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 checkedInputText from '../../../../molecule/input-text-with-titled-checkbox/test/fixtures/checked';
+import doubleDragAndDrop from '../../../../molecule/drag-and-drop-wrapper/test/fixtures/two-drag-and-drops';
+export default {
+  props: {
+    items: [_extends(_extends({}, checkedInputText.props), {}, {
+      type: 'input-text'
+    }), _extends(_extends({}, doubleDragAndDrop.props), {}, {
+      type: 'drag-and-drop'
+    })]
+  }
+};
+//# sourceMappingURL=two-rewards.js.map

package/es/organism/rewards-form/test/fixtures/two-rewards.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/rewards-form/test/fixtures/two-rewards.js"],"names":["checkedInputText","doubleDragAndDrop","props","items","type"],"mappings":";;AAAA,OAAOA,gBAAP,MAA6B,4EAA7B;AACA,OAAOC,iBAAP,MAA8B,6EAA9B;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,uBACDH,gBAAgB,CAACE,KADhB;AACuBE,MAAAA,IAAI,EAAE;AAD7B,8BAEDH,iBAAiB,CAACC,KAFjB;AAEwBE,MAAAA,IAAI,EAAE;AAF9B;AADF;AADM,CAAf","sourcesContent":["import checkedInputText from '../../../../molecule/input-text-with-titled-checkbox/test/fixtures/checked';\nimport doubleDragAndDrop from '../../../../molecule/drag-and-drop-wrapper/test/fixtures/two-drag-and-drops';\n\nexport default {\n  props: {\n    items: [\n      {...checkedInputText.props, type: 'input-text'},\n      {...doubleDragAndDrop.props, type: 'drag-and-drop'}\n    ]\n  }\n};\n"],"file":"two-rewards.js"}