@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/js/NotificationDot/__tests__/NotificationDot.test.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("jest-styled-components");
+
+var _ = require("..");
+
+var _types = require("../../types");
+
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('<NotificationDot />', function () {
+  it('renders positive small notification dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.NotificationDot, {
+              variant: "positive",
+              size: _types.Size.Small,
+              testId: "testId"
+            })), getByTestId = _render.getByTestId;
+            expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors.default.correct_500);
+            expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + _colors.default.white);
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders critical large notification dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.NotificationDot, {
+              variant: "critical",
+              size: _types.Size.Large,
+              testId: "testId"
+            })), getByTestId = _render2.getByTestId;
+            expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors.default.critical_500);
+            expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + _colors.default.white);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders critical medium notification dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var _render3, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.NotificationDot, {
+              variant: "critical",
+              testId: "testId"
+            })), getByTestId = _render3.getByTestId;
+            expect(getByTestId('testId')).toHaveStyleRule('background-color', _colors.default.critical_500);
+            expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + _colors.default.white);
+
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});
+//# sourceMappingURL=NotificationDot.test.js.map

package/dist/js/NotificationDot/__tests__/NotificationDot.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NotificationDot/__tests__/NotificationDot.test.tsx"],"names":["describe","it","Size","Small","getByTestId","expect","toHaveStyleRule","COLORS","correct_500","white","Large","critical_500"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,QAAQ,CAAC,qBAAD,EAAuB,YAAI;AAC/BC,EAAAA,EAAE,CAAC,yCAAD,uEAA4C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBACrB,kCACjB,6BAAC,iBAAD;AAAiB,cAAA,OAAO,EAAC,UAAzB;AAAoC,cAAA,IAAI,EAAEC,YAAKC,KAA/C;AAAsD,cAAA,MAAM,EAAC;AAA7D,cADiB,CADqB,EACpCC,WADoC,WACpCA,WADoC;AAI1CC,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEC,gBAAOC,WAAxE;AACAH,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,QAA9C,EAAwD,eAAeC,gBAAOE,KAA9E;;AAL0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA5C,GAAF;AAQAR,EAAAA,EAAE,CAAC,yCAAD,uEAA4C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACrB,kCACjB,6BAAC,iBAAD;AAAiB,cAAA,OAAO,EAAC,UAAzB;AAAoC,cAAA,IAAI,EAAEC,YAAKQ,KAA/C;AAAsD,cAAA,MAAM,EAAC;AAA7D,cADiB,CADqB,EACpCN,WADoC,YACpCA,WADoC;AAI1CC,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEC,gBAAOI,YAAxE;AACAN,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,QAA9C,EAAwD,eAAeC,gBAAOE,KAA9E;;AAL0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA5C,GAAF;AAQAR,EAAAA,EAAE,CAAC,0CAAD,uEAA6C;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACtB,kCACjB,6BAAC,iBAAD;AAAiB,cAAA,OAAO,EAAC,UAAzB;AAAoC,cAAA,MAAM,EAAC;AAA3C,cADiB,CADsB,EACrCG,WADqC,YACrCA,WADqC;AAI3CC,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,kBAA9C,EAAiEC,gBAAOI,YAAxE;AACAN,YAAAA,MAAM,CAACD,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BE,eAA9B,CAA8C,QAA9C,EAAwD,eAAeC,gBAAOE,KAA9E;;AAL2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA7C,GAAF;AAOH,CAxBO,CAAR","sourcesContent":["import React from 'react';\r\nimport { render } from '@testing-library/react';\r\nimport 'jest-styled-components';\r\nimport { NotificationDot } from '..';\r\nimport { Size } from '../../types';\r\nimport COLORS from '../../styles/colors';\r\n\r\ndescribe('<NotificationDot />',()=>{\r\n    it('renders positive small notification dot', async () => {\r\n        const{getByTestId} = render(\r\n            <NotificationDot variant='positive' size={Size.Small} testId='testId'/>\r\n        );\r\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.correct_500);\r\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\r\n    });\r\n\r\n    it('renders critical large notification dot', async () => {\r\n        const{getByTestId} = render(\r\n            <NotificationDot variant='critical' size={Size.Large} testId='testId'/>\r\n        );\r\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\r\n        expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.white);\r\n    });\r\n\r\n    it('renders critical medium notification dot', async () => {\r\n        const{getByTestId} = render(\r\n            <NotificationDot variant='critical' testId='testId'/>\r\n        );\r\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\r\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\r\n    });\r\n});"],"file":"NotificationDot.test.js"}

package/dist/js/NotificationDot/index.d.ts

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

package/dist/js/NotificationDot/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NotificationDot", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationDot.default;
+  }
+});
+
+var _NotificationDot = _interopRequireDefault(require("./NotificationDot"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/dist/js/NotificationDot/index.js.map

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

package/dist/js/Paginator/Paginator.d.ts

@@ -0,0 +1,8 @@
+declare type PaginatorProps = {
+    pageCount: number;
+    currentPage: number;
+    baseUrl: string;
+    onPageChange?: (page: number) => void;
+};
+declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => JSX.Element;
+export default Paginator;

package/dist/js/Paginator/Paginator.js

@@ -0,0 +1,168 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _typography = require("../styles/typography");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _reactRouter = require("react-router");
+
+var _Button = require("../Button");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Container = _styledComponents.default.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ", " {\n    width: 75%;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+
+var Items = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n"])));
+
+var Item = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ", "\n\n    &:focus,\n    &:focus-within {\n      z-index: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline-width: 0;\n    }\n  }\n  & > a:hover {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a:active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n  }\n  & > a.active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    cursor: default;\n    box-shadow: none;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.focus, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, _styles.COLORS.primary_800, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100);
+
+var Dots = (0, _styledComponents.default)(Item)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  &:after{\n    ", "\n    content: '...';\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+var ItemContent = (0, _styledComponents.default)('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ", "\n  }\n  &.active:hover:after{\n    background-color: ", "\n  }\n  &.active:active:after{\n    background-color: ", "\n  }\n"])), _styles.COLORS.primary_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
+
+var Step = function Step(_ref) {
+  var _ref$up = _ref.up,
+      up = _ref$up === void 0 ? true : _ref$up,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '' : _ref$target,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      page = _ref.page,
+      onPageChange = _ref.onPageChange,
+      id = _ref.id;
+  var history = (0, _reactRouter.useHistory)();
+
+  var handleButtonClick = function handleButtonClick() {
+    history.push(target);
+    onPageChange && onPageChange(page);
+  };
+
+  return /*#__PURE__*/React.createElement(_Button.IconButton, {
+    id: id,
+    action: function action(event) {
+      return handleButtonClick();
+    },
+    variant: 'secondary',
+    shape: 'circular',
+    disabled: disabled
+  }, up ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, null) : /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, null));
+};
+
+var Paginator = function Paginator(_ref2) {
+  var _ref2$pageCount = _ref2.pageCount,
+      pageCount = _ref2$pageCount === void 0 ? 1 : _ref2$pageCount,
+      _ref2$currentPage = _ref2.currentPage,
+      currentPage = _ref2$currentPage === void 0 ? 1 : _ref2$currentPage,
+      _ref2$baseUrl = _ref2.baseUrl,
+      baseUrl = _ref2$baseUrl === void 0 ? '' : _ref2$baseUrl,
+      _onPageChange = _ref2.onPageChange;
+  var pages = [];
+  var from = 2;
+  var to = 4;
+  if (pageCount === 0) return null;
+
+  if (pageCount > 1) {
+    if (currentPage >= 4 && currentPage <= pageCount - 2) {
+      from = currentPage - 1;
+      to = currentPage + 1;
+    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {
+      from = pageCount - 3;
+      to = pageCount - 1;
+    }
+
+    if (to > pageCount) {
+      to = pageCount;
+    }
+
+    for (var i = from; i <= to; i += 1) {
+      pages.push(i);
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Items, null, /*#__PURE__*/React.createElement(Step, {
+    up: false,
+    target: "".concat(baseUrl, "/").concat(currentPage - 1),
+    page: currentPage - 1,
+    disabled: currentPage === 1,
+    onPageChange: function onPageChange() {
+      if (_onPageChange) _onPageChange(currentPage - 1);
+    },
+    id: "paginator-left"
+  }), pages.findIndex(function (item) {
+    return item === 1;
+  }) === -1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
+    to: "".concat(baseUrl, "/1"),
+    onClick: function onClick() {
+      if (_onPageChange) _onPageChange(1);
+    }
+  }, /*#__PURE__*/React.createElement(ItemContent, {
+    className: currentPage === 1 ? 'active' : ''
+  }, /*#__PURE__*/React.createElement("span", null, "1")))), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(function (item) {
+    return item === 1;
+  }) === -1 && /*#__PURE__*/React.createElement(Dots, null), pages.map(function (page) {
+    return /*#__PURE__*/React.createElement(Item, {
+      key: page
+    }, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
+      to: "".concat(baseUrl, "/").concat(page),
+      onClick: function onClick() {
+        if (_onPageChange) _onPageChange(page);
+      }
+    }, /*#__PURE__*/React.createElement(ItemContent, {
+      className: currentPage === page ? 'active' : ''
+    }, /*#__PURE__*/React.createElement("span", null, page))));
+  }), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/React.createElement(Dots, null), pages.findIndex(function (item) {
+    return item === pageCount;
+  }) === -1 && pageCount !== 1 && /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(_reactRouterDom.NavLink, {
+    to: "".concat(baseUrl, "/").concat(pageCount),
+    onClick: function onClick() {
+      if (_onPageChange) _onPageChange(pageCount);
+    }
+  }, /*#__PURE__*/React.createElement(ItemContent, {
+    className: currentPage === pageCount ? 'active' : ''
+  }, /*#__PURE__*/React.createElement("span", null, pageCount)))), /*#__PURE__*/React.createElement(Step, {
+    up: true,
+    target: "".concat(baseUrl, "/").concat(currentPage + 1),
+    page: currentPage + 1,
+    disabled: currentPage === pageCount,
+    onPageChange: function onPageChange() {
+      if (_onPageChange) _onPageChange(currentPage + 1);
+    },
+    id: "paginator-right"
+  })));
+};
+
+Paginator.propTypes = {
+  pageCount: _propTypes.default.number.isRequired,
+  currentPage: _propTypes.default.number.isRequired,
+  baseUrl: _propTypes.default.string.isRequired,
+  onPageChange: _propTypes.default.func
+};
+var _default = Paginator;
+exports.default = _default;
+//# sourceMappingURL=Paginator.js.map

package/dist/js/Paginator/Paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","focus","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\r\nimport {ComponentMStyling} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useHistory} from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n  margin: 20px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 75%;\r\n  }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  & > * {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    text-decoration: none;\r\n\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n    &:focus,\r\n    &:focus-within {\r\n      z-index: ${Z_INDEXES.focus};\r\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\r\n      outline-width: 0;\r\n    }\r\n  }\r\n  & > a:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${COLORS.primary_800};\r\n    background-color: ${COLORS.primary_20};\r\n    box-shadow: none;\r\n  }\r\n  & > a:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.primary_700};\r\n    background-color: ${COLORS.primary_100};\r\n    box-shadow: none;\r\n  }\r\n  & > a.active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.neutral_800};\r\n    background-color: ${COLORS.neutral_20};\r\n    cursor: default;\r\n    box-shadow: none;\r\n    &:hover {\r\n      color: ${COLORS.primary_800};\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    &:active {\r\n      color: ${COLORS.primary_700};\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n  cursor: not-allowed;\r\n  &:after{\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    content: '...';\r\n  }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n  text-align:center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  &.active:after{\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 4px;\r\n    width: 32px;\r\n    border-radius: 4px;\r\n    height: 4px;\r\n    background-color: ${COLORS.primary_500}\r\n  }\r\n  &.active:hover:after{\r\n    background-color: ${COLORS.primary_700}\r\n  }\r\n  &.active:active:after{\r\n    background-color: ${COLORS.primary_800}\r\n  }\r\n`\r\n\r\ntype PaginatorProps = {\r\n  pageCount: number;\r\n  currentPage: number;\r\n  baseUrl: string;\r\n  onPageChange?: (page: number) => void;\r\n};\r\n\r\nconst Step = ({\r\n  up = true,\r\n  target = '',\r\n  disabled = false,\r\n  page,\r\n  onPageChange,\r\n  id,\r\n}: {\r\n  up: boolean;\r\n  target: string;\r\n  disabled: boolean;\r\n  page: number;\r\n  onPageChange?: (page: number) => void;\r\n  id?: string;\r\n}) => {\r\n  const history = useHistory();\r\n\r\n  const handleButtonClick = () => {\r\n    history.push(target);\r\n    onPageChange && onPageChange(page);\r\n  }\r\n\r\n  return (\r\n    <IconButton id={id}\r\n                action={event => handleButtonClick()}\r\n                variant={'secondary'}\r\n                shape={'circular'}\r\n                disabled={disabled}>\r\n      {up ? <ChevronRight/> : <ChevronLeft/>}\r\n    </IconButton>\r\n  )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n  const pages = [];\r\n  let from = 2;\r\n  let to = 4;\r\n  if (pageCount === 0) return null;\r\n\r\n  if (pageCount > 1) {\r\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n      from = currentPage - 1;\r\n      to = currentPage + 1;\r\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n      from = pageCount - 3;\r\n      to = pageCount - 1;\r\n    }\r\n    if (to > pageCount) {\r\n      to = pageCount;\r\n    }\r\n    for (let i = from; i <= to; i += 1) {\r\n      pages.push(i);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Container>\r\n      <Items>\r\n        <Step up={false}\r\n              target={`${baseUrl}/${currentPage - 1}`}\r\n              page={currentPage - 1}\r\n              disabled={currentPage === 1}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage - 1);\r\n              }}\r\n              id=\"paginator-left\"/>\r\n        {pages.findIndex(item => item === 1) === -1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/1`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(1);\r\n              }}>\r\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n                 <span>1</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.map(page => (\r\n          <Item key={page}>\r\n            <NavLink\r\n              to={`${baseUrl}/${page}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(page);\r\n              }}>\r\n                <ItemContent className={currentPage === page ? 'active' : ''}>\r\n                 <span>{page}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        ))}\r\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/${pageCount}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(pageCount);\r\n              }}>\r\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n                 <span>{pageCount}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        <Step up\r\n              target={`${baseUrl}/${currentPage + 1}`}\r\n              page={currentPage + 1}\r\n              disabled={currentPage === pageCount}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage + 1);\r\n              }}\r\n              id=\"paginator-right\"/>\r\n      </Items>\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Paginator;\r\n"],"file":"Paginator.js"}

package/dist/js/Paginator/__tests__/Paginator.test.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _index = require("../index");
+
+var _reactRouter = require("react-router");
+
+var _history = require("history");
+
+require("jest-styled-components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+jest.mock('react-router-dom', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('react-router-dom')), {}, {
+    useLocation: function useLocation() {
+      return {
+        pathname: 'localhost:3000/test'
+      };
+    }
+  });
+});
+describe('<Paginator />', function () {
+  it('Renders Paginator', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _container$querySelec, _queryByText;
+
+    var history, route, _render, queryByText, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            history = (0, _history.createMemoryHistory)();
+            route = '/1';
+            history.push(route);
+            _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_reactRouter.Router, {
+              history: history
+            }, /*#__PURE__*/_react.default.createElement(_index.Paginator, {
+              pageCount: 6,
+              currentPage: 1,
+              baseUrl: "",
+              onPageChange: function onPageChange() {}
+            }))), queryByText = _render.queryByText, container = _render.container;
+            expect(queryByText('1')).toBeDefined();
+            expect(container.querySelector('#paginator-left')).toBeDefined();
+            expect(container.querySelector('#paginator-right')).toBeDefined();
+            expect(queryByText('6')).toBeDefined(); // Click on stepper to the right. Expect to be taken from 1 to 2
+
+            (_container$querySelec = container.querySelector('#paginator-right')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.click();
+            expect(history.location.pathname).toBe('/2'); // Click directly on 6. Expect to be taken to /6
+
+            (_queryByText = queryByText('6')) === null || _queryByText === void 0 ? void 0 : _queryByText.click();
+            expect(history.location.pathname).toBe('/6');
+
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});
+//# sourceMappingURL=Paginator.test.js.map

package/dist/js/Paginator/__tests__/Paginator.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Paginator/__tests__/Paginator.test.tsx"],"names":["jest","mock","requireActual","useLocation","pathname","describe","it","history","route","push","queryByText","container","expect","toBeDefined","querySelector","click","location","toBe"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEAA,IAAI,CAACC,IAAL,CAAU,kBAAV,EAA8B;AAAA,yCACzBD,IAAI,CAACE,aAAL,CAAmB,kBAAnB,CADyB;AAE5BC,IAAAA,WAAW,EAAE;AAAA,aAAO;AAClBC,QAAAA,QAAQ,EAAE;AADQ,OAAP;AAAA;AAFe;AAAA,CAA9B;AAOAC,QAAQ,CAAC,eAAD,EAAkB,YAAM;AAC9BC,EAAAA,EAAE,CAAC,mBAAD,uEAAsB;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAChBC,YAAAA,OADgB,GACN,mCADM;AAEhBC,YAAAA,KAFgB,GAER,IAFQ;AAGtBD,YAAAA,OAAO,CAACE,IAAR,CAAaD,KAAb;AAHsB,sBAIa,kCACjC,6BAAC,mBAAD;AAAQ,cAAA,OAAO,EAAED;AAAjB,4BACE,6BAAC,gBAAD;AAAW,cAAA,SAAS,EAAE,CAAtB;AAAyB,cAAA,WAAW,EAAE,CAAtC;AAAyC,cAAA,OAAO,EAAC,EAAjD;AAAoD,cAAA,YAAY,EAAE,wBAAM,CAAE;AAA1E,cADF,CADiC,CAJb,EAIdG,WAJc,WAIdA,WAJc,EAIDC,SAJC,WAIDA,SAJC;AAUtBC,YAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB;AACAD,YAAAA,MAAM,CAACD,SAAS,CAACG,aAAV,CAAwB,iBAAxB,CAAD,CAAN,CAAmDD,WAAnD;AACAD,YAAAA,MAAM,CAACD,SAAS,CAACG,aAAV,CAAwB,kBAAxB,CAAD,CAAN,CAAoDD,WAApD;AACAD,YAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB,GAbsB,CAetB;;AACA,qCAACF,SAAS,CAACG,aAAV,CAAwB,kBAAxB,CAAD,gFAA8DC,KAA9D;AACAH,YAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC,EAjBsB,CAmBtB;;AACA,4BAAAP,WAAW,CAAC,GAAD,CAAX,8DAAkBK,KAAlB;AACAH,YAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC;;AArBsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAtB,GAAF;AAuBD,CAxBO,CAAR","sourcesContent":["import React, { useState } from 'react';\r\nimport { render } from '@testing-library/react';\r\nimport { Paginator } from '../index';\r\nimport { Router } from 'react-router';\r\nimport { createMemoryHistory } from 'history';\r\nimport 'jest-styled-components';\r\n\r\njest.mock('react-router-dom', () => ({\r\n  ...jest.requireActual('react-router-dom'),\r\n  useLocation: () => ({\r\n    pathname: 'localhost:3000/test',\r\n  }),\r\n}));\r\n\r\ndescribe('<Paginator />', () => {\r\n  it('Renders Paginator', async () => {\r\n    const history = createMemoryHistory();\r\n    const route = '/1';\r\n    history.push(route);\r\n    const { queryByText, container } = render(\r\n      <Router history={history}>\r\n        <Paginator pageCount={6} currentPage={1} baseUrl=\"\" onPageChange={() => {}} />\r\n      </Router>,\r\n    );\r\n\r\n    expect(queryByText('1')).toBeDefined();\r\n    expect(container.querySelector('#paginator-left')).toBeDefined();\r\n    expect(container.querySelector('#paginator-right')).toBeDefined();\r\n    expect(queryByText('6')).toBeDefined();\r\n\r\n    // Click on stepper to the right. Expect to be taken from 1 to 2\r\n    (container.querySelector('#paginator-right') as HTMLElement)?.click();\r\n    expect(history.location.pathname).toBe('/2');\r\n\r\n    // Click directly on 6. Expect to be taken to /6\r\n    queryByText('6')?.click();\r\n    expect(history.location.pathname).toBe('/6');\r\n  });\r\n});\r\n"],"file":"Paginator.test.js"}

package/dist/js/Paginator/index.d.ts

@@ -0,0 +1,2 @@
+import Paginator from './Paginator';
+export { Paginator };

package/dist/js/Paginator/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Paginator", {
+  enumerable: true,
+  get: function get() {
+    return _Paginator.default;
+  }
+});
+
+var _Paginator = _interopRequireDefault(require("./Paginator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/dist/js/Paginator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Paginator/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["import Paginator from './Paginator';\r\n\r\nexport { Paginator };\r\n"],"file":"index.js"}

package/dist/js/QuizButton/QuizButton.d.ts

@@ -0,0 +1,14 @@
+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;
+    type: 'radio' | 'checkbox';
+};
+declare const QuizButton: React.FunctionComponent<QuizButtonProps>;
+export default QuizButton;

package/dist/js/QuizButton/QuizButton.js

@@ -0,0 +1,142 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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 _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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var TextContainer = _styledComponents.default.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 ? (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 = _taggedTemplateLiteral([""])));
+
+var OptionContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _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    .quiz-button-text {\n      background: ", ";\n    }\n    .quiz-button-icon {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    div.quiz-button-icon {\n      pointer-events: none;\n      background: ", ";\n    }\n    div.quiz-button-text {\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    .quiz-button-text {    \n      background: ", ";\n    }\n    .quiz-button-icon {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    .quiz-button-text {    \n      background: ", ";\n    }\n    .quiz-button-icon {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    .quiz-button-text {    \n      background: ", ";\n    }\n    .quiz-button-icon {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  } \n\n  &:hover {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent !important;\n    }\n  }\n\n  &:focus {\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 !important;\n    }\n  }\n\n  &:active {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent !important;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result) {\n    div.quiz-button-icon{\n      background: ", ";\n    }\n    div.quiz-button-text{\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:focus:not(.disabled):not(.result) {\n    div.quiz-button-icon{\n      background: ", ";\n    }\n    div.quiz-button-text{\n      background: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active:not(.disabled):not(.result) {\n    div.quiz-button-icon{\n      background: ", ";\n      transition: none;\n    }\n    div.quiz-button-text{\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\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';
+}, _.COLORS.accent1_100, _.COLORS.accent1_200, _.COLORS.neutral_100, _.COLORS.neutral_20, _.COLORS.neutral_300, _.COLORS.correct_20, _.COLORS.correct_400, _.COLORS.critical_20, _.COLORS.critical_500, _.COLORS.warning_20, _.COLORS.warning_400, _.COLORS.focus_25, _.COLORS.focus, _.COLORS.accent1_300, function (props) {
+  return props.isSelected ? _.COLORS.accent1_200 : _.COLORS.accent1_100;
+}, function (props) {
+  return props.isSelected ? _.COLORS.accent1_200 : _.COLORS.accent1_100;
+}, function (props) {
+  return props.isSelected ? _.COLORS.accent1_100 : _.COLORS.accent1_20;
+}, _.COLORS.accent1_400, function (props) {
+  return props.isSelected ? _.COLORS.accent1_300 : _.COLORS.accent1_200;
+});
+
+var ButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _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 !important;\n    }\n\n    &:focus {\n      background: transparent !important;\n    }\n\n    &:active {\n      background: transparent !important;\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 renderResultContent = function renderResultContent(resultType) {
+  switch (resultType) {
+    case 'correct':
+      return /*#__PURE__*/React.createElement(_.SystemIcons.CheckComplete, {
+        color: _.COLORS.white,
+        className: 'quiz-button-result-icon'
+      });
+
+    case 'incorrect':
+      return /*#__PURE__*/React.createElement(_.SystemIcons.Close, {
+        color: _.COLORS.white,
+        className: 'quiz-button-result-icon'
+      });
+
+    default:
+      return /*#__PURE__*/React.createElement(_.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,
+      _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__*/React.createElement(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 : ''),
+    "data-testid": 'container'
+  }, /*#__PURE__*/React.createElement(ButtonContainer, {
+    "data-testid": 'btnContainer',
+    className: 'quiz-button-icon',
+    size: size
+  }, resultType ? renderResultContent(resultType) : type === 'radio' ? /*#__PURE__*/React.createElement(_.RadioButton, {
+    selected: selected,
+    disabled: disabled,
+    size: size,
+    tabIndexVal: -1,
+    select: function select() {},
+    id: id
+  }) : /*#__PURE__*/React.createElement(_.Checkbox, {
+    selected: selected,
+    disabled: disabled,
+    size: size,
+    tabIndexVal: -1,
+    select: function select() {},
+    id: id
+  })), /*#__PURE__*/React.createElement(TextContainer, {
+    "data-testid": 'txtContainer',
+    className: 'quiz-button-text',
+    size: size
+  }, /*#__PURE__*/React.createElement(TextWrapper, {
+    size: size
+  }, 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
+};
+var _default = QuizButton;
+exports.default = _default;
+//# sourceMappingURL=QuizButton.js.map