@coorpacademy/components 10.7.0 → 10.9.0

package/lib/molecule/questions/free-text/test/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/questions/free-text/test/fixtures.js"],"names":["t","pass","MoleculeQuestionsFreeText","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureWithDefaultValue"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,6EAAL,EAAoFA,CAAC,IAAI;AACvFA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAA0BC,SAAlC,EAA6C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC3DL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,uEAAsEF,GAAI,mEAAnG;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,8EAAL,EAAqFG,wBAArF,EAA2GN,SAA3G,EAAsIO,gBAAtI;AACA,kBAAK,uFAAL,EAA8FD,wBAA9F,EAAoHN,SAApH,EAA+IQ,yBAA/I","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../../test/helpers/render-component';\nimport MoleculeQuestionsFreeText from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureWithDefaultValue from './fixtures/with-default-value';\n\ntest('MoleculeQuestions › MoleculeQuestionsFreeText > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeQuestionsFreeText.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"MoleculeQuestions.MoleculeQuestionsFreeText.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › Default › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureDefault);\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › WithDefaultValue › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureWithDefaultValue);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../../src/molecule/questions/free-text/test/fixtures.js"],"names":["t","pass","MoleculeQuestionsFreeText","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureWithValueOnChange","fixtureWithValue"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,6EAAL,EAAoFA,CAAC,IAAI;AACvFA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAA0BC,SAAlC,EAA6C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC3DL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,uEAAsEF,GAAI,mEAAnG;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,8EAAL,EAAqFG,wBAArF,EAA2GN,SAA3G,EAAsIO,gBAAtI;AACA,kBAAK,wFAAL,EAA+FD,wBAA/F,EAAqHN,SAArH,EAAgJQ,0BAAhJ;AACA,kBAAK,gFAAL,EAAuFF,wBAAvF,EAA6GN,SAA7G,EAAwIS,kBAAxI","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../../test/helpers/render-component';\nimport MoleculeQuestionsFreeText from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureWithValueOnChange from './fixtures/with-value-on-change';\nimport fixtureWithValue from './fixtures/with-value';\n\ntest('MoleculeQuestions › MoleculeQuestionsFreeText > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeQuestionsFreeText.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"MoleculeQuestions.MoleculeQuestionsFreeText.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › Default › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureDefault);\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › WithValueOnChange › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureWithValueOnChange);\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › WithValue › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureWithValue);\n"],"file":"fixtures.js"}

package/lib/molecule/review-correction-popin/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+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 buildKlfButton = klf => {
+  const klfButtonProps = _extends(_extends({}, klf), {}, {
+    icon: {
+      position: 'left',
+      type: 'key'
+    },
+    type: 'primary'
+  });
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.klfContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.klfButtonContainer
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, klfButtonProps, {
+    className: _style.default.klfButton
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.toolTip
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.tooltipText
+  }, klf.tooltip)));
+};
+
+const ReviewCorrectionPopin = props => {
+  const {
+    information,
+    resultLabel,
+    type,
+    klf,
+    next
+  } = props;
+
+  const nextQuestionButtonProps = _extends(_extends({}, next), {}, {
+    type: 'primary'
+  });
+
+  const cta = type === 'wrong' ? buildKlfButton(klf) : null;
+  const ICONS = {
+    right: _novaIcons.NovaCompositionCoorpacademyCheck,
+    wrong: _novaIcons.NovaSolidStatusClose
+  };
+  const Icon = ICONS[type];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.wrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_style.default.popin, type === 'right' ? _style.default.right : _style.default.wrong)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.correctionSection
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.iconCircle
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    className: type === 'right' ? _style.default.iconRight : _style.default.iconWrong
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.resultLabel,
+    "aria-label": "result"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-label": resultLabel
+  }, resultLabel))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.feedbackSection
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.information,
+    "aria-label": "answer-information"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.label,
+    "aria-label": information.label
+  }, information.label), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.message,
+    "aria-label": information.message
+  }, information.message))), /*#__PURE__*/_react.default.createElement("div", {
+    className: type === 'right' ? _style.default.actions : _style.default.actionsWrong
+  }, cta, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.nextQuestionContainer
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, nextQuestionButtonProps, {
+    className: _style.default.nextQuestionButton
+  }))))));
+};
+
+ReviewCorrectionPopin.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: _propTypes.default.oneOf(['right', 'wrong']),
+  resultLabel: _propTypes.default.string,
+  information: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    message: _propTypes.default.string
+  }),
+  next: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    onClick: _propTypes.default.func
+  }),
+  klf: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    onClick: _propTypes.default.func
+  })
+} : {};
+var _default = ReviewCorrectionPopin;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/review-correction-popin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/review-correction-popin/index.js"],"names":["buildKlfButton","klf","klfButtonProps","icon","position","type","style","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","RightIcon","wrong","WrongIcon","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes","PropTypes","oneOf","string","shape","onClick","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst buildKlfButton = klf => {\n  const klfButtonProps = {\n    ...klf,\n    icon: {\n      position: 'left',\n      type: 'key'\n    },\n    type: 'primary'\n  };\n\n  return (\n    <div className={style.klfContainer}>\n      <div className={style.klfButtonContainer}>\n        <ButtonLink {...klfButtonProps} className={style.klfButton} />\n      </div>\n      <div className={style.toolTip}>\n        <div className={style.tooltipText}>{klf.tooltip}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ReviewCorrectionPopin = props => {\n  const {information, resultLabel, type, klf, next} = props;\n\n  const nextQuestionButtonProps = {\n    ...next,\n    type: 'primary'\n  };\n\n  const cta = type === 'wrong' ? buildKlfButton(klf) : null;\n\n  const ICONS = {\n    right: RightIcon,\n    wrong: WrongIcon\n  };\n  const Icon = ICONS[type];\n\n  return (\n    <div className={style.wrapper}>\n      <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n        <div className={style.correctionSection}>\n          <div className={style.iconCircle}>\n            <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n          </div>\n          <div className={style.resultLabel} aria-label=\"result\">\n            <span aria-label={resultLabel}>{resultLabel}</span>\n          </div>\n        </div>\n        <div className={style.feedbackSection}>\n          <div className={style.information} aria-label=\"answer-information\">\n            <span className={style.label} aria-label={information.label}>\n              {information.label}\n            </span>\n            <span className={style.message} aria-label={information.message}>\n              {information.message}\n            </span>\n          </div>\n        </div>\n        <div className={type === 'right' ? style.actions : style.actionsWrong}>\n          {cta}\n          <div className={style.nextQuestionContainer}>\n            <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCorrectionPopin.propTypes = {\n  type: PropTypes.oneOf(['right', 'wrong']),\n  resultLabel: PropTypes.string,\n  information: PropTypes.shape({\n    label: PropTypes.string,\n    message: PropTypes.string\n  }),\n  next: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  }),\n  klf: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  })\n};\n\nexport default ReviewCorrectionPopin;\n"],"file":"index.js"}

package/lib/molecule/review-correction-popin/style.css

@@ -0,0 +1,315 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value white from colors;
+@value cm_positive_100 from colors;
+@value cm_negative_100 from colors;
+@value cm_primary_blue from colors;
+@value cm_blue_900 from colors;
+
+.wrapper {
+  width: 100%;
+  height: auto;
+  font-family: Gilroy;
+  color: white;
+  display: flex;
+  justify-content: center;
+  overflow: visible;
+  padding: 0px;
+}
+
+.popin {
+  width: 100%;
+  padding: 40px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.right {
+  background-color: cm_positive_100;
+  box-shadow: 0px 0px 68px rgba(cm_positive_100, 0.4);
+}
+
+.wrong {
+  background-color: cm_negative_100;
+  box-shadow: 0px 0px 68px rgba(cm_negative_100, 0.4);
+}
+
+.correctionSection {
+  flex: 0 1 auto;
+  min-width: 187px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+
+.feedbackSection {
+  display: flex;
+  margin: 0 23px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+  flex: 1 1 100%;
+}
+
+.iconCircle {
+  width: 52px;
+  min-width: 52px;
+  height: 52px;
+  min-height: 52px;
+  background: white;
+  opacity: 0.7;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  padding: 14px 0 0 14px;
+}
+
+.iconRight {
+  composes: icon;
+  color: cm_positive_100;
+}
+
+.iconWrong {
+  composes: icon;
+  color: cm_negative_100;
+}
+
+.resultLabel {
+  margin-left: 12px;
+  font-weight: 900;
+  font-size: 24px;
+  line-height: 24px;
+  hyphens: auto;
+  -ms-word-break: break-word;
+  word-break: break-word;
+}
+
+.information {
+  display: block;
+  flex-direction: column;
+}
+
+.information .label {
+  width: 140px;
+  height: 25px;
+  padding: 4px 8px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 56px;
+  font-style: normal;
+  font-weight: 900;
+  font-size: 14px;
+  line-height: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  hyphens: auto;
+  -ms-word-break: break-word;
+  word-break: break-word;
+}
+
+.information .message {
+  display: block;
+  margin-top: 4px;
+}
+
+.actions {
+  flex: 0 1 auto;
+  min-width: 138px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.actionsWrong {
+  composes: actions;
+  min-width: 345px;
+  flex: 0 1 auto;
+}
+
+.toolTip {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.8s;
+  position: absolute;
+  width: 273px;
+  border-radius: 15px;
+  background-color: white;
+  right: 17.5%;
+  top: -64px;
+}
+
+.toolTip::before {
+  content: '';
+  display: inline-block;
+  visibility: hidden;
+  opacity: 0;
+  width: 15px;
+  height: 15px;
+  transform: rotate(-45deg);
+  transition: opacity 0.8s;
+  background-color: white;
+  position: inherit;
+  bottom: -7px;
+  left: 129px;
+}
+
+.tooltipText {
+  display: inline-block;
+  margin: 16px;
+  border-radius: 3px;
+  word-wrap: break-word;
+  color: cm_blue_900;
+  max-width: 241px;
+  overflow: hidden;
+  text-align: center;
+  font-size: 16px;
+}
+
+.klfContainer {
+  overflow: visible;
+  width: calc(55% - 16px);
+  margin-right: 16px;
+}
+
+.klfButtonContainer:hover ~ .toolTip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.klfButtonContainer:hover ~ .toolTip::before {
+  visibility: visible;
+  opacity: 1;
+}
+
+.klfButtonContainer {
+  width: 100%;
+  margin-right: 16px;
+}
+
+.klfButton {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+.klfButton:hover {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(255, 255, 255, 0.1)
+}
+
+.nextQuestionContainer {
+  width: 100%;
+}
+
+.actionsWrong .nextQuestionContainer {
+  width: 45%;
+}
+
+.nextQuestionButton {
+  background: white;
+  color: cm_primary_blue;
+}
+
+.nextQuestionButton:hover {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)), #FFFFFF;
+}
+
+@media tablet {
+  .resultLabel {
+    display: none;
+  }
+
+  .correctionSection {
+    min-width: 60px;
+  }  
+
+  .actions {
+    width: 25%;
+  }
+
+  .actionsWrong {
+    width: 47%;
+  }
+
+  .toolTip {
+    width: 250px;
+    right: 25%;
+  }
+}
+
+@media mobile {
+  .popin {
+    width: 100%;
+    min-height: 100px;
+    padding: 32px;
+    flex-direction: column;
+    display: block;
+  }
+
+  .popin > div {
+    min-width: auto;
+    width: 100%;
+  }
+
+  .correctionSection {
+    justify-content: center;
+    margin-bottom: 32px;
+  }
+
+  .resultLabel {
+    display: block;
+    text-align: left;
+    width: calc(100% - 52px);
+  }
+
+  .feedbackSection {
+    margin: 0;
+    width: 100%;
+    display: block;
+  }
+
+  .information .message {
+    margin: 8px 0 32px 0;
+  }
+
+  .actions {
+    width: 100%;
+  }
+
+  .actionsWrong {
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .actionsWrong .nextQuestionContainer {
+    width: 100%;
+  }
+
+  .klfContainer {
+    width: 100%;
+    margin: 0 0 8px 0;
+    position: relative;
+  }
+
+  .klfButtonContainer {
+    margin: 0;
+  }
+
+  .toolTip {
+    width: 106%;
+    right: -3%;
+    top: auto;
+    bottom: 52px;
+  }
+
+  .tooltipText {
+    max-width: none;
+  }
+}

package/lib/molecule/review-correction-popin/test/fixtures/right.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    type: 'right',
+    resultLabel: 'CORRECT ANSWER',
+    information: {
+      label: 'Key learning factor',
+      message: '17 frustrated software engineers grappling with the complexities of software development.'
+    },
+    next: {
+      label: 'Next Question',
+      'aria-label': 'next question button',
+      'data-name': 'next-question-button',
+      onClick: () => console.log('Next Question')
+    }
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=right.js.map

package/lib/molecule/review-correction-popin/test/fixtures/right.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/review-correction-popin/test/fixtures/right.js"],"names":["props","type","resultLabel","information","label","message","next","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,WAAW,EAAE,gBAFR;AAGLC,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,qBADI;AAEXC,MAAAA,OAAO,EACL;AAHS,KAHR;AAQLC,IAAAA,IAAI,EAAE;AACJF,MAAAA,KAAK,EAAE,eADH;AAEJ,oBAAc,sBAFV;AAGJ,mBAAa,sBAHT;AAIJG,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,eAAZ;AAJX;AARD;AADM,C","sourcesContent":["export default {\n  props: {\n    type: 'right',\n    resultLabel: 'CORRECT ANSWER',\n    information: {\n      label: 'Key learning factor',\n      message:\n        '17 frustrated software engineers grappling with the complexities of software development.'\n    },\n    next: {\n      label: 'Next Question',\n      'aria-label': 'next question button',\n      'data-name': 'next-question-button',\n      onClick: () => console.log('Next Question')\n    }\n  }\n};\n"],"file":"right.js"}

package/lib/molecule/review-correction-popin/test/fixtures/wrong.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    type: 'wrong',
+    resultLabel: 'WRONG ANSWER',
+    information: {
+      label: 'Correct Answer',
+      message: 'Corporate lawyers trying to understand software.'
+    },
+    klf: {
+      label: 'Key learning factor',
+      tooltip: '17 frustrated software engineers grappling with the complexities of software development.'
+    },
+    next: {
+      label: 'Next Question',
+      onClick: () => console.log('Next Question')
+    }
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=wrong.js.map

package/lib/molecule/review-correction-popin/test/fixtures/wrong.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/review-correction-popin/test/fixtures/wrong.js"],"names":["props","type","resultLabel","information","label","message","klf","tooltip","next","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,WAAW,EAAE,cAFR;AAGLC,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,gBADI;AAEXC,MAAAA,OAAO,EAAE;AAFE,KAHR;AAOLC,IAAAA,GAAG,EAAE;AACHF,MAAAA,KAAK,EAAE,qBADJ;AAEHG,MAAAA,OAAO,EACL;AAHC,KAPA;AAYLC,IAAAA,IAAI,EAAE;AACJJ,MAAAA,KAAK,EAAE,eADH;AAEJK,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,eAAZ;AAFX;AAZD;AADM,C","sourcesContent":["export default {\n  props: {\n    type: 'wrong',\n    resultLabel: 'WRONG ANSWER',\n    information: {\n      label: 'Correct Answer',\n      message: 'Corporate lawyers trying to understand software.'\n    },\n    klf: {\n      label: 'Key learning factor',\n      tooltip:\n        '17 frustrated software engineers grappling with the complexities of software development.'\n    },\n    next: {\n      label: 'Next Question',\n      onClick: () => console.log('Next Question')\n    }\n  }\n};\n"],"file":"wrong.js"}

package/lib/molecule/review-correction-popin/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 _right = _interopRequireDefault(require("./fixtures/right"));
+
+var _wrong = _interopRequireDefault(require("./fixtures/wrong"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _ava.default)('Molecule › MoleculeReviewCorrectionPopin > should have valid propTypes', t => {
+  t.pass();
+  (0, _forEach.default)(_.default.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Molecule.MoleculeReviewCorrectionPopin.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+(0, _ava.default)('Molecule › MoleculeReviewCorrectionPopin › Right › should be rendered', _renderComponent.default, _.default, _right.default);
+(0, _ava.default)('Molecule › MoleculeReviewCorrectionPopin › Wrong › should be rendered', _renderComponent.default, _.default, _wrong.default);
+//# sourceMappingURL=fixtures.js.map

package/lib/molecule/review-correction-popin/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/review-correction-popin/test/fixtures.js"],"names":["t","pass","MoleculeReviewCorrectionPopin","propTypes","value","key","not","undefined","renderComponentMacro","fixtureRight","fixtureWrong"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,wEAAL,EAA+EA,CAAC,IAAI;AAClFA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAA8BC,SAAtC,EAAiD,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC/DL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,kEAAiEF,GAAI,mEAA9F;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,uEAAL,EAA8EG,wBAA9E,EAAoGN,SAApG,EAAmIO,cAAnI;AACA,kBAAK,uEAAL,EAA8ED,wBAA9E,EAAoGN,SAApG,EAAmIQ,cAAnI","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeReviewCorrectionPopin from '..';\nimport fixtureRight from './fixtures/right';\nimport fixtureWrong from './fixtures/wrong';\n\ntest('Molecule › MoleculeReviewCorrectionPopin > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeReviewCorrectionPopin.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeReviewCorrectionPopin.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeReviewCorrectionPopin › Right › should be rendered', renderComponentMacro, MoleculeReviewCorrectionPopin, fixtureRight);\ntest('Molecule › MoleculeReviewCorrectionPopin › Wrong › should be rendered', renderComponentMacro, MoleculeReviewCorrectionPopin, fixtureWrong);\n"],"file":"fixtures.js"}

package/lib/molecule/wizard-summary/test/fixtures.js

@@ -12,6 +12,8 @@ var _default = _interopRequireDefault(require("./fixtures/default"));
 
 var _oneSection = _interopRequireDefault(require("./fixtures/one-section"));
 
+var _organizeCourses = _interopRequireDefault(require("./fixtures/organize-courses"));
+
 var _tabletClosed = _interopRequireDefault(require("./fixtures/tablet-closed"));
 
 var _threeSections = _interopRequireDefault(require("./fixtures/three-sections"));
@@ -28,6 +30,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 (0, _ava.default)('Molecule › MoleculeWizardSummary › Default › should be rendered', _renderComponent.default, _.default, _default.default);
 (0, _ava.default)('Molecule › MoleculeWizardSummary › OneSection › should be rendered', _renderComponent.default, _.default, _oneSection.default);
+(0, _ava.default)('Molecule › MoleculeWizardSummary › OrganizeCourses › should be rendered', _renderComponent.default, _.default, _organizeCourses.default);
 (0, _ava.default)('Molecule › MoleculeWizardSummary › TabletClosed › should be rendered', _renderComponent.default, _.default, _tabletClosed.default);
 (0, _ava.default)('Molecule › MoleculeWizardSummary › ThreeSections › should be rendered', _renderComponent.default, _.default, _threeSections.default);
 (0, _ava.default)('Molecule › MoleculeWizardSummary › TwoSections › should be rendered', _renderComponent.default, _.default, _twoSections.default);

package/lib/molecule/wizard-summary/test/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/wizard-summary/test/fixtures.js"],"names":["t","pass","MoleculeWizardSummary","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureOneSection","fixtureTabletClosed","fixtureThreeSections","fixtureTwoSections"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,gEAAL,EAAuEA,CAAC,IAAI;AAC1EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAsBC,SAA9B,EAAyC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACvDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0DAAyDF,GAAI,mEAAtF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,iEAAL,EAAwEG,wBAAxE,EAA8FN,SAA9F,EAAqHO,gBAArH;AACA,kBAAK,oEAAL,EAA2ED,wBAA3E,EAAiGN,SAAjG,EAAwHQ,mBAAxH;AACA,kBAAK,sEAAL,EAA6EF,wBAA7E,EAAmGN,SAAnG,EAA0HS,qBAA1H;AACA,kBAAK,uEAAL,EAA8EH,wBAA9E,EAAoGN,SAApG,EAA2HU,sBAA3H;AACA,kBAAK,qEAAL,EAA4EJ,wBAA5E,EAAkGN,SAAlG,EAAyHW,oBAAzH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeWizardSummary from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureOneSection from './fixtures/one-section';\nimport fixtureTabletClosed from './fixtures/tablet-closed';\nimport fixtureThreeSections from './fixtures/three-sections';\nimport fixtureTwoSections from './fixtures/two-sections';\n\ntest('Molecule › MoleculeWizardSummary > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeWizardSummary.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeWizardSummary.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeWizardSummary › Default › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureDefault);\ntest('Molecule › MoleculeWizardSummary › OneSection › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureOneSection);\ntest('Molecule › MoleculeWizardSummary › TabletClosed › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureTabletClosed);\ntest('Molecule › MoleculeWizardSummary › ThreeSections › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureThreeSections);\ntest('Molecule › MoleculeWizardSummary › TwoSections › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureTwoSections);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../src/molecule/wizard-summary/test/fixtures.js"],"names":["t","pass","MoleculeWizardSummary","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureOneSection","fixtureOrganizeCourses","fixtureTabletClosed","fixtureThreeSections","fixtureTwoSections"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,gEAAL,EAAuEA,CAAC,IAAI;AAC1EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAsBC,SAA9B,EAAyC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACvDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0DAAyDF,GAAI,mEAAtF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,iEAAL,EAAwEG,wBAAxE,EAA8FN,SAA9F,EAAqHO,gBAArH;AACA,kBAAK,oEAAL,EAA2ED,wBAA3E,EAAiGN,SAAjG,EAAwHQ,mBAAxH;AACA,kBAAK,yEAAL,EAAgFF,wBAAhF,EAAsGN,SAAtG,EAA6HS,wBAA7H;AACA,kBAAK,sEAAL,EAA6EH,wBAA7E,EAAmGN,SAAnG,EAA0HU,qBAA1H;AACA,kBAAK,uEAAL,EAA8EJ,wBAA9E,EAAoGN,SAApG,EAA2HW,sBAA3H;AACA,kBAAK,qEAAL,EAA4EL,wBAA5E,EAAkGN,SAAlG,EAAyHY,oBAAzH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeWizardSummary from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureOneSection from './fixtures/one-section';\nimport fixtureOrganizeCourses from './fixtures/organize-courses';\nimport fixtureTabletClosed from './fixtures/tablet-closed';\nimport fixtureThreeSections from './fixtures/three-sections';\nimport fixtureTwoSections from './fixtures/two-sections';\n\ntest('Molecule › MoleculeWizardSummary > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeWizardSummary.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeWizardSummary.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeWizardSummary › Default › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureDefault);\ntest('Molecule › MoleculeWizardSummary › OneSection › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureOneSection);\ntest('Molecule › MoleculeWizardSummary › OrganizeCourses › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureOrganizeCourses);\ntest('Molecule › MoleculeWizardSummary › TabletClosed › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureTabletClosed);\ntest('Molecule › MoleculeWizardSummary › ThreeSections › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureThreeSections);\ntest('Molecule › MoleculeWizardSummary › TwoSections › should be rendered', renderComponentMacro, MoleculeWizardSummary, fixtureTwoSections);\n"],"file":"fixtures.js"}