@coorpacademy/components 10.6.1 → 10.8.0

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":";;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;;;;;AAEA,MAAMA,cAAc,GAAGC,GAAG,IAAI;AAC5B,QAAMC,cAAc,yBACfD,GADe;AAElBE,IAAAA,IAAI,EAAE;AACJC,MAAAA,QAAQ,EAAE,MADN;AAEJC,MAAAA,IAAI,EAAE;AAFF,KAFY;AAMlBA,IAAAA,IAAI,EAAE;AANY,IAApB;;AASA,sBACE;AAAK,IAAA,SAAS,EAAEC,eAAMC;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAED,eAAME;AAAtB,kBACE,6BAAC,mBAAD,eAAgBN,cAAhB;AAAgC,IAAA,SAAS,EAAEI,eAAMG;AAAjD,KADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEH,eAAMI;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEJ,eAAMK;AAAtB,KAAoCV,GAAG,CAACW,OAAxC,CADF,CAJF,CADF;AAUD,CApBD;;AAsBA,MAAMC,qBAAqB,GAAGC,KAAK,IAAI;AACrC,QAAM;AAACC,IAAAA,WAAD;AAAcC,IAAAA,WAAd;AAA2BX,IAAAA,IAA3B;AAAiCJ,IAAAA,GAAjC;AAAsCgB,IAAAA;AAAtC,MAA8CH,KAApD;;AAEA,QAAMI,uBAAuB,yBACxBD,IADwB;AAE3BZ,IAAAA,IAAI,EAAE;AAFqB,IAA7B;;AAKA,QAAMc,GAAG,GAAGd,IAAI,KAAK,OAAT,GAAmBL,cAAc,CAACC,GAAD,CAAjC,GAAyC,IAArD;AAEA,QAAMmB,KAAK,GAAG;AACZC,IAAAA,KAAK,EAAEC,2CADK;AAEZC,IAAAA,KAAK,EAAEC;AAFK,GAAd;AAIA,QAAMC,IAAI,GAAGL,KAAK,CAACf,IAAD,CAAlB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEC,eAAMoB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE,yBAAWpB,eAAMqB,KAAjB,EAAwBtB,IAAI,KAAK,OAAT,GAAmBC,eAAMe,KAAzB,GAAiCf,eAAMiB,KAA/D;AAAhB,kBACE;AAAK,IAAA,SAAS,EAAEjB,eAAMsB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEtB,eAAMuB;AAAtB,kBACE,6BAAC,IAAD;AAAM,IAAA,SAAS,EAAExB,IAAI,KAAK,OAAT,GAAmBC,eAAMwB,SAAzB,GAAqCxB,eAAMyB;AAA5D,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEzB,eAAMU,WAAtB;AAAmC,kBAAW;AAA9C,kBACE;AAAM,kBAAYA;AAAlB,KAAgCA,WAAhC,CADF,CAJF,CADF,eASE;AAAK,IAAA,SAAS,EAAEV,eAAM0B;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE1B,eAAMS,WAAtB;AAAmC,kBAAW;AAA9C,kBACE;AAAM,IAAA,SAAS,EAAET,eAAM2B,KAAvB;AAA8B,kBAAYlB,WAAW,CAACkB;AAAtD,KACGlB,WAAW,CAACkB,KADf,CADF,eAIE;AAAM,IAAA,SAAS,EAAE3B,eAAM4B,OAAvB;AAAgC,kBAAYnB,WAAW,CAACmB;AAAxD,KACGnB,WAAW,CAACmB,OADf,CAJF,CADF,CATF,eAmBE;AAAK,IAAA,SAAS,EAAE7B,IAAI,KAAK,OAAT,GAAmBC,eAAM6B,OAAzB,GAAmC7B,eAAM8B;AAAzD,KACGjB,GADH,eAEE;AAAK,IAAA,SAAS,EAAEb,eAAM+B;AAAtB,kBACE,6BAAC,mBAAD,eAAgBnB,uBAAhB;AAAyC,IAAA,SAAS,EAAEZ,eAAMgC;AAA1D,KADF,CAFF,CAnBF,CADF,CADF;AA8BD,CA9CD;;AAgDAzB,qBAAqB,CAAC0B,SAAtB,2CAAkC;AAChClC,EAAAA,IAAI,EAAEmC,mBAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,OAAV,CAAhB,CAD0B;AAEhCzB,EAAAA,WAAW,EAAEwB,mBAAUE,MAFS;AAGhC3B,EAAAA,WAAW,EAAEyB,mBAAUG,KAAV,CAAgB;AAC3BV,IAAAA,KAAK,EAAEO,mBAAUE,MADU;AAE3BR,IAAAA,OAAO,EAAEM,mBAAUE;AAFQ,GAAhB,CAHmB;AAOhCzB,EAAAA,IAAI,EAAEuB,mBAAUG,KAAV,CAAgB;AACpBV,IAAAA,KAAK,EAAEO,mBAAUE,MADG;AAEpBE,IAAAA,OAAO,EAAEJ,mBAAUK;AAFC,GAAhB,CAP0B;AAWhC5C,EAAAA,GAAG,EAAEuC,mBAAUG,KAAV,CAAgB;AACnBV,IAAAA,KAAK,EAAEO,mBAAUE,MADE;AAEnBE,IAAAA,OAAO,EAAEJ,mBAAUK;AAFA,GAAhB;AAX2B,CAAlC;eAiBehC,qB","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/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/organism/list-items/index.js

@@ -26,7 +26,7 @@ const ListItems = ({
   const itemsView = items.map((item, index) => /*#__PURE__*/_react.default.createElement("li", {
     key: item.id,
     className: _style.default.item,
-    "data-name": `custom-playlist-${index}`
+    "data-name": `content-${index}`
   }, /*#__PURE__*/_react.default.createElement(_listItem.default, item)));
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.header
@@ -41,7 +41,7 @@ const ListItems = ({
   }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonLink))), /*#__PURE__*/_react.default.createElement("ul", {
     className: _style.default.list,
     "aria-label": ariaLabel,
-    "data-name": 'custom-playlist-list'
+    "data-name": 'content-list'
   }, itemsView));
 };
 

package/lib/organism/list-items/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/list-items/index.js"],"names":["ListItems","title","buttonLink","items","ariaLabel","itemsView","map","item","index","id","style","header","buttonCreate","list","propTypes","PropTypes","string","shape","ButtonLink","arrayOf","ListItem"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;AAACC,EAAAA,KAAD;AAAQC,EAAAA,UAAR;AAAoBC,EAAAA,KAApB;AAA2B,gBAAcC;AAAzC,CAAD,KAAyD;AACzE,QAAMC,SAAS,GAAGF,KAAK,CAACG,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,kBAC1B;AAAI,IAAA,GAAG,EAAED,IAAI,CAACE,EAAd;AAAkB,IAAA,SAAS,EAAEC,eAAMH,IAAnC;AAAyC,iBAAY,mBAAkBC,KAAM;AAA7E,kBACE,6BAAC,iBAAD,EAAcD,IAAd,CADF,CADgB,CAAlB;AAMA,sBACE,uDACE;AAAK,IAAA,SAAS,EAAEG,eAAMC;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAED,eAAMT;AAAtB,kBACE,6BAAC,cAAD;AAAO,IAAA,KAAK,EAAEA,KAAd;AAAqB,IAAA,IAAI,EAAE,YAA3B;AAAyC,iBAAW;AAApD,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAES,eAAME;AAAtB,kBACE,6BAAC,mBAAD,EAAgBV,UAAhB,CADF,CAJF,CADF,eASE;AAAI,IAAA,SAAS,EAAEQ,eAAMG,IAArB;AAA2B,kBAAYT,SAAvC;AAAkD,iBAAW;AAA7D,KACGC,SADH,CATF,CADF;AAeD,CAtBD;;AAwBAL,SAAS,CAACc,SAAV,2CAAsB;AACpB,gBAAcC,mBAAUC,MADJ;AAEpBd,EAAAA,UAAU,EAAEa,mBAAUE,KAAV,CAAgBC,oBAAWJ,SAA3B,CAFQ;AAGpBX,EAAAA,KAAK,EAAEY,mBAAUI,OAAV,CAAkBJ,mBAAUE,KAAV,CAAgBG,kBAASN,SAAzB,CAAlB,CAHa;AAIpBb,EAAAA,KAAK,EAAEc,mBAAUC;AAJG,CAAtB;eAOehB,S","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ListItem from '../list-item';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst ListItems = ({title, buttonLink, items, 'aria-label': ariaLabel}) => {\n  const itemsView = items.map((item, index) => (\n    <li key={item.id} className={style.item} data-name={`custom-playlist-${index}`}>\n      <ListItem {...item} />\n    </li>\n  ));\n\n  return (\n    <div>\n      <div className={style.header}>\n        <div className={style.title}>\n          <Title title={title} type={'form-group'} data-name={'list-title'} />\n        </div>\n        <div className={style.buttonCreate}>\n          <ButtonLink {...buttonLink} />\n        </div>\n      </div>\n      <ul className={style.list} aria-label={ariaLabel} data-name={'custom-playlist-list'}>\n        {itemsView}\n      </ul>\n    </div>\n  );\n};\n\nListItems.propTypes = {\n  'aria-label': PropTypes.string,\n  buttonLink: PropTypes.shape(ButtonLink.propTypes),\n  items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n  title: PropTypes.string\n};\n\nexport default ListItems;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/list-items/index.js"],"names":["ListItems","title","buttonLink","items","ariaLabel","itemsView","map","item","index","id","style","header","buttonCreate","list","propTypes","PropTypes","string","shape","ButtonLink","arrayOf","ListItem"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;AAACC,EAAAA,KAAD;AAAQC,EAAAA,UAAR;AAAoBC,EAAAA,KAApB;AAA2B,gBAAcC;AAAzC,CAAD,KAAyD;AACzE,QAAMC,SAAS,GAAGF,KAAK,CAACG,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,kBAC1B;AAAI,IAAA,GAAG,EAAED,IAAI,CAACE,EAAd;AAAkB,IAAA,SAAS,EAAEC,eAAMH,IAAnC;AAAyC,iBAAY,WAAUC,KAAM;AAArE,kBACE,6BAAC,iBAAD,EAAcD,IAAd,CADF,CADgB,CAAlB;AAMA,sBACE,uDACE;AAAK,IAAA,SAAS,EAAEG,eAAMC;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAED,eAAMT;AAAtB,kBACE,6BAAC,cAAD;AAAO,IAAA,KAAK,EAAEA,KAAd;AAAqB,IAAA,IAAI,EAAE,YAA3B;AAAyC,iBAAW;AAApD,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAES,eAAME;AAAtB,kBACE,6BAAC,mBAAD,EAAgBV,UAAhB,CADF,CAJF,CADF,eASE;AAAI,IAAA,SAAS,EAAEQ,eAAMG,IAArB;AAA2B,kBAAYT,SAAvC;AAAkD,iBAAW;AAA7D,KACGC,SADH,CATF,CADF;AAeD,CAtBD;;AAwBAL,SAAS,CAACc,SAAV,2CAAsB;AACpB,gBAAcC,mBAAUC,MADJ;AAEpBd,EAAAA,UAAU,EAAEa,mBAAUE,KAAV,CAAgBC,oBAAWJ,SAA3B,CAFQ;AAGpBX,EAAAA,KAAK,EAAEY,mBAAUI,OAAV,CAAkBJ,mBAAUE,KAAV,CAAgBG,kBAASN,SAAzB,CAAlB,CAHa;AAIpBb,EAAAA,KAAK,EAAEc,mBAAUC;AAJG,CAAtB;eAOehB,S","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ListItem from '../list-item';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst ListItems = ({title, buttonLink, items, 'aria-label': ariaLabel}) => {\n  const itemsView = items.map((item, index) => (\n    <li key={item.id} className={style.item} data-name={`content-${index}`}>\n      <ListItem {...item} />\n    </li>\n  ));\n\n  return (\n    <div>\n      <div className={style.header}>\n        <div className={style.title}>\n          <Title title={title} type={'form-group'} data-name={'list-title'} />\n        </div>\n        <div className={style.buttonCreate}>\n          <ButtonLink {...buttonLink} />\n        </div>\n      </div>\n      <ul className={style.list} aria-label={ariaLabel} data-name={'content-list'}>\n        {itemsView}\n      </ul>\n    </div>\n  );\n};\n\nListItems.propTypes = {\n  'aria-label': PropTypes.string,\n  buttonLink: PropTypes.shape(ButtonLink.propTypes),\n  items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n  title: PropTypes.string\n};\n\nexport default ListItems;\n"],"file":"index.js"}

package/lib/organism/wizard-contents/index.js

@@ -49,7 +49,7 @@ const buildHeader = (wizardHeader, steps) => {
     className: _style.default.header
   }, /*#__PURE__*/_react.default.createElement(_buttonLinkIconOnly.default, buttonCloseIcon), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.headerTitle,
-    "data-name": 'custom-playlist-title'
+    "data-name": 'content-title'
   }, title)), /*#__PURE__*/_react.default.createElement(_wizardSteps.default, {
     steps: steps
   }));
@@ -139,7 +139,7 @@ const WizardContents = props => {
   const footerActionView = buildActionZone(previousStep, nextStep, 'footer');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container,
-    "data-name": "custom-playlist-summary"
+    "data-name": "content-summary"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.leftSection
   }, headerView, /*#__PURE__*/_react.default.createElement("div", {