@laerdal/life-react-components 1.4.1-dev.10 → 1.4.1-dev.14

package/dist/QuizButton/QuizButton.cjs

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ = require("..");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TextContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"])), _.COLORS.accent1_20, function (props) {
+  return props.size === _.Size.Small ? '6px 8px' : props.size === _.Size.Large ? '20px 16px' : '12px 16px';
+}, function (props) {
+  return props.size === _.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null) : props.size === _.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null);
+});
+
+var TextWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
+
+var ButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ", ";\n\n  width: ", ";\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ", ";\n    width: ", ";\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:focus {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small, .medium, .large {\n    min-height: unset;\n    min-width: unset;\n  }\n\n  .small {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n"])), _.COLORS.accent1_100, function (props) {
+  return props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px';
+}, function (props) {
+  return props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px';
+}, function (props) {
+  return props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px';
+});
+
+var OptionContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ", ";\n  margin-bottom: ", ";\n\n  &.selected {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ", " {\n      pointer-events: none;\n      background: ", ";\n    }\n    ", " {\n      pointer-events: none;\n      background: ", ";\n      color: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  } \n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n    border-radius: 8px;\n    outline: none;\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:focus:not(.disabled):not(.result),\n  &.focus-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
+  return props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px';
+}, function (props) {
+  return props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px';
+}, TextContainer, _.COLORS.accent1_100, ButtonContainer, _.COLORS.accent1_200, ButtonContainer, _.COLORS.neutral_100, TextContainer, _.COLORS.neutral_20, _.COLORS.neutral_300, TextContainer, _.COLORS.correct_20, ButtonContainer, _.COLORS.correct_400, TextContainer, _.COLORS.critical_20, ButtonContainer, _.COLORS.critical_500, TextContainer, _.COLORS.warning_20, ButtonContainer, _.COLORS.warning_400, _.COLORS.focus_25, _.COLORS.focus, ButtonContainer, _.COLORS.accent1_300, TextContainer, function (props) {
+  return props.isSelected ? _.COLORS.accent1_200 : _.COLORS.accent1_100;
+}, _.COLORS.primary_700, ButtonContainer, function (props) {
+  return props.isSelected ? _.COLORS.accent1_200 : _.COLORS.accent1_100;
+}, TextContainer, function (props) {
+  return props.isSelected ? _.COLORS.accent1_100 : _.COLORS.accent1_20;
+}, ButtonContainer, _.COLORS.accent1_400, TextContainer, function (props) {
+  return props.isSelected ? _.COLORS.accent1_300 : _.COLORS.accent1_200;
+}, _.COLORS.primary_800);
+
+var renderResultContent = function renderResultContent(resultType) {
+  switch (resultType) {
+    case 'correct':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.CheckComplete, {
+        color: _.COLORS.white,
+        className: 'quiz-button-result-icon'
+      });
+
+    case 'incorrect':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.Close, {
+        color: _.COLORS.white,
+        className: 'quiz-button-result-icon'
+      });
+
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.Close, {
+        color: _.COLORS.white,
+        className: 'quiz-button-result-icon'
+      });
+  }
+};
+
+var QuizButton = function QuizButton(_ref) {
+  var text = _ref.text,
+      type = _ref.type,
+      onClick = _ref.onClick,
+      resultType = _ref.resultType,
+      id = _ref.id,
+      className = _ref.className,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? false : _ref$selected,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _.Size.Medium : _ref$size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionContainer, {
+    onClick: onClick,
+    isSelected: selected,
+    tabIndex: disabled || resultType ? -1 : 1,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    size: size,
+    className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
+    "data-testid": 'container',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+      "data-testid": 'btnContainer',
+      className: 'quiz-button-icon',
+      size: size,
+      children: resultType ? renderResultContent(resultType) : type === 'radio' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RadioButton, {
+        selected: selected,
+        disabled: disabled,
+        size: size,
+        tabIndexVal: -1,
+        select: function select() {},
+        id: id
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
+        selected: selected,
+        disabled: disabled,
+        size: size,
+        tabIndexVal: -1,
+        select: function select() {},
+        id: id
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextContainer, {
+      "data-testid": 'txtContainer',
+      className: 'quiz-button-text',
+      size: size,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TextWrapper, {
+        size: size,
+        children: text
+      })
+    })]
+  });
+};
+
+QuizButton.propTypes = {
+  resultType: _propTypes.default.oneOf(['correct', 'incorrect', 'partial']),
+  text: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func,
+  id: _propTypes.default.string.isRequired,
+  selected: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  type: _propTypes.default.oneOf(['radio', 'checkbox']).isRequired,
+  className: _propTypes.default.string
+};
+var _default = QuizButton;
+exports.default = _default;
+//# sourceMappingURL=QuizButton.cjs.map

package/dist/QuizButton/QuizButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["TextContainer","styled","div","COLORS","accent1_20","props","size","Size","Small","Large","ComponentTextStyle","Regular","TextWrapper","ButtonContainer","accent1_100","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focus_25","focus","accent1_300","isSelected","primary_700","accent1_400","primary_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","e","preventDefault","concat"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,aAAa,GAAGC,0BAAOC,GAAV,+QAGHC,SAAOC,UAHJ,EASN,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,SAAxB,GAAmCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,WAAxB,GAAoC,WAAzE;AAAA,CATC,EAUf,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAA0B,mCAAkBE,+BAAmBC,OAArC,EAA6C,IAA7C,CAA1B,GAAgFN,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAA0B,mCAAkBC,+BAAmBC,OAArC,EAA6C,IAA7C,CAA1B,GAA+E,mCAAkBD,+BAAmBC,OAArC,EAA6C,IAA7C,CAAjK;AAAA,CAVU,CAAnB;;AAaA,IAAMC,WAAW,GAAGX,0BAAOC,GAAV,qFAAjB;;AAEA,IAAMW,eAAe,GAAGZ,0BAAOC,GAAV,kjCAGLC,SAAOW,WAHF,EAKV,UAAAT,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CALK,EAUP,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CAVE,EAWR,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CAXG,CAArB;;AAiEA,IAAMM,eAAe,GAAGd,0BAAOC,GAAV,05EAOL,UAAAG,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CAPA,EAQF,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CARH,EAWfT,aAXe,EAYDG,SAAOW,WAZN,EAcfD,eAde,EAeDV,SAAOa,WAfN,EAsBfH,eAtBe,EAwBDV,SAAOc,WAxBN,EA0BfjB,aA1Be,EA4BDG,SAAOe,UA5BN,EA6BNf,SAAOgB,WA7BD,EAsCfnB,aAtCe,EAuCDG,SAAOiB,UAvCN,EAyCfP,eAzCe,EA0CDV,SAAOkB,WA1CN,EAkDfrB,aAlDe,EAmDDG,SAAOmB,WAnDN,EAqDfT,eArDe,EAsDDV,SAAOoB,YAtDN,EA8DfvB,aA9De,EA+DDG,SAAOqB,UA/DN,EAiEfX,eAjEe,EAkEDV,SAAOsB,WAlEN,EAkFUtB,SAAOuB,QAlFjB,EAkF0CvB,SAAOwB,KAlFjD,EAoGfd,eApGe,EAqGDV,SAAOyB,WArGN,EAuGf5B,aAvGe,EAwGD,UAAAK,KAAK;AAAA,SAAEA,KAAK,CAACwB,UAAN,GAAmB1B,SAAOa,WAA1B,GAAyCb,SAAOW,WAAlD;AAAA,CAxGJ,EA8GJX,SAAO2B,WA9GH,EAqHfjB,eArHe,EAsHD,UAAAR,KAAK;AAAA,SAAEA,KAAK,CAACwB,UAAN,GAAmB1B,SAAOa,WAA1B,GAAwCb,SAAOW,WAAjD;AAAA,CAtHJ,EAwHfd,aAxHe,EAyHD,UAAAK,KAAK;AAAA,SAAEA,KAAK,CAACwB,UAAN,GAAmB1B,SAAOW,WAA1B,GAAyCX,SAAOC,UAAlD;AAAA,CAzHJ,EAmIfS,eAnIe,EAoIDV,SAAO4B,WApIN,EAuIf/B,aAvIe,EAwID,UAAAK,KAAK;AAAA,SAAEA,KAAK,CAACwB,UAAN,GAAmB1B,SAAOyB,WAA1B,GAAwCzB,SAAOa,WAAjD;AAAA,CAxIJ,EA+IJb,SAAO6B,WA/IH,CAArB;;AAqJA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,UAAD,EAAwB;AAClD,UAAOA,UAAP;AACE,SAAK,SAAL;AAAiB,0BAAO,qBAAC,aAAD,CAAa,aAAb;AAA2B,QAAA,KAAK,EAAE/B,SAAOgC,KAAzC;AAAgD,QAAA,SAAS,EAAE;AAA3D,QAAP;;AAEjB,SAAK,WAAL;AAAmB,0BAAO,qBAAC,aAAD,CAAa,KAAb;AAAmB,QAAA,KAAK,EAAEhC,SAAOgC,KAAjC;AAAwC,QAAA,SAAS,EAAE;AAAnD,QAAP;;AAEnB;AAAU,0BAAO,qBAAC,aAAD,CAAa,KAAb;AAAmB,QAAA,KAAK,EAAEhC,SAAOgC,KAAjC;AAAwC,QAAA,SAAS,EAAE;AAAnD,QAAP;AALZ;AAOD,CARD;;AAsBA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAAwG;AAAA,MAAtGC,IAAsG,QAAtGA,IAAsG;AAAA,MAAhGC,IAAgG,QAAhGA,IAAgG;AAAA,MAA1FC,OAA0F,QAA1FA,OAA0F;AAAA,MAAjFL,UAAiF,QAAjFA,UAAiF;AAAA,MAArEM,EAAqE,QAArEA,EAAqE;AAAA,MAAjEC,SAAiE,QAAjEA,SAAiE;AAAA,2BAAtDC,QAAsD;AAAA,MAAtDA,QAAsD,8BAA7C,KAA6C;AAAA,2BAAtCC,QAAsC;AAAA,MAAtCA,QAAsC,8BAA7B,KAA6B;AAAA,uBAAtBrC,IAAsB;AAAA,MAAtBA,IAAsB,0BAAjBC,OAAKqC,MAAY;AACnK,sBACE,sBAAC,eAAD;AAAiB,IAAA,OAAO,EAAEL,OAA1B;AAAmC,IAAA,UAAU,EAAEG,QAA/C;AAAyD,IAAA,QAAQ,EAAGC,QAAQ,IAAIT,UAAb,GAA0B,CAAC,CAA3B,GAA+B,CAAlG;AAAqG,IAAA,WAAW,EAAE,qBAAAW,CAAC;AAAA,aAAEA,CAAC,CAACC,cAAF,EAAF;AAAA,KAAnH;AAAyI,IAAA,IAAI,EAAExC,IAA/I;AACI,IAAA,SAAS,EAAE,eAAeyC,MAAf,CAAsBL,QAAQ,GAAC,WAAD,GAAa,EAA3C,EACeK,MADf,CACsBJ,QAAQ,GAAC,WAAD,GAAa,EAD3C,EAEeI,MAFf,CAEsBb,UAAU,GAAC,aAAWA,UAAZ,GAAuB,EAFvD,EAGea,MAHf,CAGsBN,SAAS,GAAC,MAAMA,SAAP,GAAiB,EAHhD,CADf;AAKI,mBAAa,WALjB;AAAA,4BAMI,qBAAC,eAAD;AAAiB,qBAAa,cAA9B;AAA8C,MAAA,SAAS,EAAE,kBAAzD;AAA6E,MAAA,IAAI,EAAEnC,IAAnF;AAAA,gBAEI4B,UAAU,GAAGD,mBAAmB,CAACC,UAAD,CAAtB,GACUI,IAAI,KAAG,OAAP,gBAAiB,qBAAC,aAAD;AAAa,QAAA,QAAQ,EAAEI,QAAvB;AAAiC,QAAA,QAAQ,EAAEC,QAA3C;AAAqD,QAAA,IAAI,EAAErC,IAA3D;AAAiE,QAAA,WAAW,EAAE,CAAC,CAA/E;AACjB,QAAA,MAAM,EAAE,kBAAI,CAAE,CADG;AACD,QAAA,EAAE,EAAEkC;AADH,QAAjB,gBAC4B,qBAAC,UAAD;AAAU,QAAA,QAAQ,EAAEE,QAApB;AAA8B,QAAA,QAAQ,EAAEC,QAAxC;AAAkD,QAAA,IAAI,EAAErC,IAAxD;AAA8D,QAAA,WAAW,EAAE,CAAC,CAA5E;AAC5B,QAAA,MAAM,EAAE,kBAAI,CAAE,CADc;AACZ,QAAA,EAAE,EAAEkC;AADQ;AAJpD,MANJ,eAgBI,qBAAC,aAAD;AAAe,qBAAa,cAA5B;AAA4C,MAAA,SAAS,EAAE,kBAAvD;AAA2E,MAAA,IAAI,EAAElC,IAAjF;AAAA,6BACE,qBAAC,WAAD;AAAa,QAAA,IAAI,EAAEA,IAAnB;AAAA,kBACG+B;AADH;AADF,MAhBJ;AAAA,IADF;AAwBD,CAzBD;;;AAXEH,EAAAA,U,4BAAa,S,EAAY,W,EAAc,S;AACvCG,EAAAA,I;AACAE,EAAAA,O;AACAC,EAAAA,E;AACAE,EAAAA,Q;AACAC,EAAAA,Q;AAEAL,EAAAA,I,4BAAM,O,EAAU,U;AAChBG,EAAAA,S;;eA8BaL,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Checkbox, COLORS, RadioButton, Size, SystemIcons } from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:focus {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small, .medium, .large {\n    min-height: unset;\n    min-width: unset;\n  }\n\n  .small {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  } \n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n    border-radius: 8px;\n    outline: none;\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:focus:not(.disabled):not(.result),\n  &.focus-state {\n    ${ButtonContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_100  : COLORS.accent1_20};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckComplete color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n  className?: string;\n}\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({text, type, onClick, resultType, id, className, selected=false, disabled=false, size=Size.Medium}) => {\n  return (   \n    <OptionContainer onClick={onClick} isSelected={selected} tabIndex={(disabled || resultType )?-1 : 1} onMouseDown={e=>e.preventDefault()} size={size}\n        className={'quiz-button '.concat(selected?' selected':'')\n                                 .concat(disabled?' disabled':'')\n                                 .concat(resultType?' result '+resultType:'')\n                                 .concat(className?' ' + className:'')}\n        data-testid={'container'}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;"],"file":"QuizButton.cjs"}

package/dist/QuizButton/QuizButton.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Size } from '..';
+declare type QuizButtonProps = {
+    resultType?: 'correct' | 'incorrect' | 'partial';
+    text: string;
+    onClick?: (arg: any) => void;
+    id: string;
+    selected?: boolean;
+    disabled?: boolean;
+    size?: Size.Small | Size.Medium | Size.Large;
+    type: 'radio' | 'checkbox';
+    className?: string;
+};
+declare const QuizButton: React.FunctionComponent<QuizButtonProps>;
+export default QuizButton;

package/dist/QuizButton/QuizButton.js

@@ -0,0 +1,126 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { Checkbox, COLORS, RadioButton, Size, SystemIcons } from '..';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TextContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"])), COLORS.accent1_20, function (props) {
+  return props.size === Size.Small ? '6px 8px' : props.size === Size.Large ? '20px 16px' : '12px 16px';
+}, function (props) {
+  return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null);
+});
+var TextWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+var ButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ", ";\n\n  width: ", ";\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ", ";\n    width: ", ";\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:focus {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small, .medium, .large {\n    min-height: unset;\n    min-width: unset;\n  }\n\n  .small {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n"])), COLORS.accent1_100, function (props) {
+  return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
+}, function (props) {
+  return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
+}, function (props) {
+  return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
+});
+var OptionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ", ";\n  margin-bottom: ", ";\n\n  &.selected {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ", " {\n      pointer-events: none;\n      background: ", ";\n    }\n    ", " {\n      pointer-events: none;\n      background: ", ";\n      color: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  } \n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n    border-radius: 8px;\n    outline: none;\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:focus:not(.disabled):not(.result),\n  &.focus-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
+  return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
+}, function (props) {
+  return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
+}, TextContainer, COLORS.accent1_100, ButtonContainer, COLORS.accent1_200, ButtonContainer, COLORS.neutral_100, TextContainer, COLORS.neutral_20, COLORS.neutral_300, TextContainer, COLORS.correct_20, ButtonContainer, COLORS.correct_400, TextContainer, COLORS.critical_20, ButtonContainer, COLORS.critical_500, TextContainer, COLORS.warning_20, ButtonContainer, COLORS.warning_400, COLORS.focus_25, COLORS.focus, ButtonContainer, COLORS.accent1_300, TextContainer, function (props) {
+  return props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100;
+}, COLORS.primary_700, ButtonContainer, function (props) {
+  return props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100;
+}, TextContainer, function (props) {
+  return props.isSelected ? COLORS.accent1_100 : COLORS.accent1_20;
+}, ButtonContainer, COLORS.accent1_400, TextContainer, function (props) {
+  return props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200;
+}, COLORS.primary_800);
+
+var renderResultContent = function renderResultContent(resultType) {
+  switch (resultType) {
+    case 'correct':
+      return /*#__PURE__*/_jsx(SystemIcons.CheckComplete, {
+        color: COLORS.white,
+        className: 'quiz-button-result-icon'
+      });
+
+    case 'incorrect':
+      return /*#__PURE__*/_jsx(SystemIcons.Close, {
+        color: COLORS.white,
+        className: 'quiz-button-result-icon'
+      });
+
+    default:
+      return /*#__PURE__*/_jsx(SystemIcons.Close, {
+        color: COLORS.white,
+        className: 'quiz-button-result-icon'
+      });
+  }
+};
+
+var QuizButton = function QuizButton(_ref) {
+  var text = _ref.text,
+      type = _ref.type,
+      onClick = _ref.onClick,
+      resultType = _ref.resultType,
+      id = _ref.id,
+      className = _ref.className,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? false : _ref$selected,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? Size.Medium : _ref$size;
+  return /*#__PURE__*/_jsxs(OptionContainer, {
+    onClick: onClick,
+    isSelected: selected,
+    tabIndex: disabled || resultType ? -1 : 1,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    size: size,
+    className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
+    "data-testid": 'container',
+    children: [/*#__PURE__*/_jsx(ButtonContainer, {
+      "data-testid": 'btnContainer',
+      className: 'quiz-button-icon',
+      size: size,
+      children: resultType ? renderResultContent(resultType) : type === 'radio' ? /*#__PURE__*/_jsx(RadioButton, {
+        selected: selected,
+        disabled: disabled,
+        size: size,
+        tabIndexVal: -1,
+        select: function select() {},
+        id: id
+      }) : /*#__PURE__*/_jsx(Checkbox, {
+        selected: selected,
+        disabled: disabled,
+        size: size,
+        tabIndexVal: -1,
+        select: function select() {},
+        id: id
+      })
+    }), /*#__PURE__*/_jsx(TextContainer, {
+      "data-testid": 'txtContainer',
+      className: 'quiz-button-text',
+      size: size,
+      children: /*#__PURE__*/_jsx(TextWrapper, {
+        size: size,
+        children: text
+      })
+    })]
+  });
+};
+
+QuizButton.propTypes = {
+  resultType: _pt.oneOf(['correct', 'incorrect', 'partial']),
+  text: _pt.string.isRequired,
+  onClick: _pt.func,
+  id: _pt.string.isRequired,
+  selected: _pt.bool,
+  disabled: _pt.bool,
+  type: _pt.oneOf(['radio', 'checkbox']).isRequired,
+  className: _pt.string
+};
+export default QuizButton;
+//# sourceMappingURL=QuizButton.js.map

package/dist/QuizButton/QuizButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focus_25","focus","accent1_300","isSelected","primary_700","accent1_400","primary_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","e","preventDefault","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Checkbox, COLORS, RadioButton, Size, SystemIcons } from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:focus {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small, .medium, .large {\n    min-height: unset;\n    min-width: unset;\n  }\n\n  .small {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  } \n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n    border-radius: 8px;\n    outline: none;\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:focus:not(.disabled):not(.result),\n  &.focus-state {\n    ${ButtonContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_100  : COLORS.accent1_20};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckComplete color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n  className?: string;\n}\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({text, type, onClick, resultType, id, className, selected=false, disabled=false, size=Size.Medium}) => {\n  return (   \n    <OptionContainer onClick={onClick} isSelected={selected} tabIndex={(disabled || resultType )?-1 : 1} onMouseDown={e=>e.preventDefault()} size={size}\n        className={'quiz-button '.concat(selected?' selected':'')\n                                 .concat(disabled?' disabled':'')\n                                 .concat(resultType?' result '+resultType:'')\n                                 .concat(className?' ' + className:'')}\n        data-testid={'container'}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;"],"file":"QuizButton.js"}

package/dist/QuizButton/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "QuizButton", {
+  enumerable: true,
+  get: function get() {
+    return _QuizButton.default;
+  }
+});
+
+var _QuizButton = _interopRequireDefault(require("./QuizButton"));
+//# sourceMappingURL=index.cjs.map

package/dist/QuizButton/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/QuizButton/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as QuizButton } from './QuizButton';"],"file":"index.cjs"}

package/dist/QuizButton/index.d.ts

@@ -0,0 +1 @@
+export { default as QuizButton } from './QuizButton';

package/dist/QuizButton/index.js

@@ -0,0 +1,2 @@
+export { default as QuizButton } from './QuizButton';
+//# sourceMappingURL=index.js.map

package/dist/QuizButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/QuizButton/index.ts"],"names":["default","QuizButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC","sourcesContent":["export { default as QuizButton } from './QuizButton';"],"file":"index.js"}

package/dist/Services/functions.cjs

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUUID = createUUID;
+
+function createUUID() {
+  var dt = new Date().getTime(); // eslint-disable-next-line func-names
+
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    // eslint-disable-next-line no-bitwise
+    var r = (dt + Math.random() * 16) % 16 | 0;
+    dt = Math.floor(dt / 16); // eslint-disable-next-line no-bitwise
+
+    return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
+  });
+}
+//# sourceMappingURL=functions.cjs.map

package/dist/Services/functions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Services/functions.ts"],"names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"mappings":";;;;;;;AAAO,SAASA,UAAT,GAAsB;AAC3B,MAAIC,EAAE,GAAG,IAAIC,IAAJ,GAAWC,OAAX,EAAT,CAD2B,CAE3B;;AACA,SAAO,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAASC,CAAT,EAAY;AACzE;AACA,QAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAL,KAAgB,EAAtB,IAA4B,EAA5B,GAAiC,CAA3C;AACAP,IAAAA,EAAE,GAAGM,IAAI,CAACE,KAAL,CAAWR,EAAE,GAAG,EAAhB,CAAL,CAHyE,CAIzE;;AACA,WAAO,CAACI,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAL,GAAY,GAA7B,EAAkCI,QAAlC,CAA2C,EAA3C,CAAP;AACD,GANM,CAAP;AAOD","sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"file":"functions.cjs"}

package/dist/SkipToContent/SkipToContent.cjs

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var SkipToContentLink = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  \n  text-decoration: underline;\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
+
+var SkipToContentWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"])), _styles.COLORS.accent2_200);
+
+var SkipToContent = function SkipToContent(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkipToContentWrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SkipToContentLink, {
+      href: "#main",
+      children: children
+    })
+  });
+};
+
+var _default = SkipToContent;
+exports.default = _default;
+//# sourceMappingURL=SkipToContent.cjs.map

package/dist/SkipToContent/SkipToContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SkipToContent/SkipToContent.tsx"],"names":["SkipToContentLink","styled","a","ComponentTextStyle","Bold","COLORS","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;AAIA,IAAMA,iBAAiB,GAAGC,0BAAOC,CAAV,iIACnB,mCAAkBC,2BAAmBC,IAArC,EAA2CC,eAAOC,KAAlD,CADmB,CAAvB;;AAMA,IAAMC,oBAAoB,GAAGN,0BAAOO,GAAV,0UAWRH,eAAOI,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnF,sBACE,qBAAC,oBAAD;AAAA,2BACE,qBAAC,iBAAD;AAAmB,MAAA,IAAI,EAAC,OAAxB;AAAA,gBAAiCA;AAAjC;AADF,IADF;AAKD,CAND;;eAQeD,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, TYPOGRAPHY} from '../styles';\nimport {ComponentSStyling} from '../styles/typography';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n  \n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.cjs"}

package/dist/SkipToContent/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SkipToContent", {
+  enumerable: true,
+  get: function get() {
+    return _SkipToContent.default;
+  }
+});
+
+var _SkipToContent = _interopRequireDefault(require("./SkipToContent"));
+//# sourceMappingURL=index.cjs.map

package/dist/SkipToContent/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SkipToContent/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as SkipToContent } from './SkipToContent';\n"],"file":"index.cjs"}

package/dist/Switcher/MobileSwitcherMenu.cjs

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _CommonStyles = require("../GlobalNavigationBar/mobile/CommonStyles");
+
+var _SwitcherMenuItem = _interopRequireDefault(require("./SwitcherMenuItem"));
+
+var _typography = require("../styles/typography");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
+
+var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+
+var MenuSectionList = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ", "\n"])), _CommonStyles.UserMenuSectionListStyling);
+
+var Top = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ", ";\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ", "\n  }\n"])), _styles.COLORS.neutral_600, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'));
+
+var LabelLine = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: 32px;\n  background-color: ", ";\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n"])), _styles.COLORS.neutral_20);
+
+var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
+  var header = _ref.header,
+      elementsHeader = _ref.elementsHeader,
+      clickMenuAction = _ref.clickMenuAction,
+      elements = _ref.elements;
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
+    onClick: function onClick() {},
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Top, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        action: clickMenuAction,
+        isInMobileMenu: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowLineLeft, {
+          size: "24px",
+          color: _styles.COLORS.neutral_600
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: header
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.Right, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: clickMenuAction,
+          isInMobileMenu: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+            size: "24px"
+          })
+        })
+      })]
+    }), elements && (elements === null || elements === void 0 ? void 0 : elements.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LabelLine, {
+        children: elementsHeader
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
+        children: elements === null || elements === void 0 ? void 0 : elements.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SwitcherMenuItem.default, {
+            url: element === null || element === void 0 ? void 0 : element.to,
+            label: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element.icon
+          });
+        })
+      })]
+    })]
+  });
+};
+
+MobileSwitcherMenu.propTypes = {
+  header: _propTypes.default.string.isRequired,
+  elementsHeader: _propTypes.default.string.isRequired,
+  clickMenuAction: _propTypes.default.func.isRequired,
+  elements: _propTypes.default.array
+};
+var _default = MobileSwitcherMenu;
+exports.default = _default;
+//# sourceMappingURL=MobileSwitcherMenu.cjs.map