@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/umd/Paginator/index.js

@@ -0,0 +1,31 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./Paginator"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./Paginator"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.Paginator);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _Paginator) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.Paginator = undefined;
+
+  var _Paginator2 = _interopRequireDefault(_Paginator);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  exports.Paginator = _Paginator2.default;
+});
+//# sourceMappingURL=index.js.map

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

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

package/dist/umd/QuizButton/QuizButton.js

@@ -0,0 +1,374 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "..", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require(".."), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global._, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (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
+    };
+  }
+
+  const TextContainer = _styledComponents2.default.div`
+  border-radius: 0 8px 8px 0;
+  display: flex;
+  background: ${_.COLORS.accent1_20};
+  width: 100%;
+
+  transition: background 100ms ease-in-out;
+  align-items: center;
+
+  padding: ${props => props.size === _.Size.Small ? '6px 8px' : props.size === _.Size.Large ? '20px 16px' : '12px 16px'};
+  ${props => 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)}
+`;
+  const TextWrapper = _styledComponents2.default.div``;
+  const OptionContainer = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  max-width: 65ch;  
+  word-break: break-word;
+
+  min-height: ${props => props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px'};
+  margin-bottom: ${props => props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px'};
+
+  &.selected {
+    .quiz-button-text {
+      background: ${_.COLORS.accent1_100};
+    }
+    .quiz-button-icon {
+      background: ${_.COLORS.accent1_200};
+    }
+  }
+  
+  &.disabled {
+    cursor: not-allowed;
+    
+    div.quiz-button-icon {
+      pointer-events: none;
+      background: ${_.COLORS.neutral_100};
+    }
+    div.quiz-button-text {
+      pointer-events: none;
+      background: ${_.COLORS.neutral_20};
+      color: ${_.COLORS.neutral_300};
+    }
+
+    .radio-button-icon, .checkbox-icon {
+      background: transparent;
+    }
+  }
+
+  &.correct {
+    .quiz-button-text {    
+      background: ${_.COLORS.correct_20};
+    }
+    .quiz-button-icon {
+      background: ${_.COLORS.correct_400};
+      svg {
+        margin: auto;
+      }
+    }
+  }
+
+  &.incorrect {
+    .quiz-button-text {    
+      background: ${_.COLORS.critical_20};
+    }
+    .quiz-button-icon {
+      background: ${_.COLORS.critical_500};
+      svg {
+        margin: auto;
+      }
+    }
+  }
+
+  &.partial {
+    .quiz-button-text {    
+      background: ${_.COLORS.warning_20};
+    }
+    .quiz-button-icon {
+      background: ${_.COLORS.warning_400};
+      svg {
+        margin: auto;
+      }
+    }
+  } 
+
+  &:hover {
+    .radio-button-icon, .checkbox-icon {
+      background: transparent !important;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0px 4px 12px ${_.COLORS.focus_25}, 0px 0px 8px ${_.COLORS.focus};
+    border-radius: 8px;
+    outline: none;
+
+    .radio-button-icon, .checkbox-icon {
+      background: transparent !important;
+    }
+  }
+
+  &:active {
+    .radio-button-icon, .checkbox-icon {
+      background: transparent !important;
+    }
+  }
+
+  &:hover:not(.disabled):not(.result) {
+    div.quiz-button-icon{
+      background: ${_.COLORS.accent1_300};
+    }
+    div.quiz-button-text{
+      background: ${props => props.isSelected ? _.COLORS.accent1_200 : _.COLORS.accent1_100};
+    }
+    
+    .radio-button-icon, .checkbox-icon {
+      background: transparent;
+    }
+  }
+
+  &:focus:not(.disabled):not(.result) {
+    div.quiz-button-icon{
+      background: ${props => props.isSelected ? _.COLORS.accent1_200 : _.COLORS.accent1_100};
+    }
+    div.quiz-button-text{
+      background: ${props => props.isSelected ? _.COLORS.accent1_100 : _.COLORS.accent1_20};
+    }
+
+    .radio-button-icon, .checkbox-icon {
+      background: transparent;
+    }
+  }
+
+  &:active:not(.disabled):not(.result) {
+    div.quiz-button-icon{
+      background: ${_.COLORS.accent1_400};
+      transition: none;
+    }
+    div.quiz-button-text{
+      background: ${props => props.isSelected ? _.COLORS.accent1_300 : _.COLORS.accent1_200};
+      transition: none;
+    }
+
+    .radio-button-icon, .checkbox-icon {
+      background: transparent;
+    }
+  }
+`;
+  const ButtonContainer = _styledComponents2.default.div`
+  border-radius: 8px 0 0 8px;
+  display: flex;
+  background: ${_.COLORS.accent1_100};
+
+  width: ${props => props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px'};
+
+  transition: background 100ms ease-in-out;
+
+  .quiz-button-result-icon {
+    height: ${props => props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px'};
+    width: ${props => props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px'};
+  }
+
+  .radio-button-icon, .checkbox-icon {
+    margin: auto;
+    min-width: unset;
+    background: transparent;
+
+    &:hover {
+      background: transparent !important;
+    }
+
+    &:focus {
+      background: transparent !important;
+    }
+
+    &:active {
+      background: transparent !important;
+    }
+  }
+
+  .small, .medium, .large {
+    min-height: unset;
+    min-width: unset;
+  }
+
+  .small {
+    .radio-button-icon, .checkbox-icon {
+      svg {
+        height: 16px;
+        width: 16px;
+      }
+    }
+  }
+
+  .medium {
+    .radio-button-icon, .checkbox-icon {
+      svg {
+        height: 24px;
+        width: 24px;
+      }
+    }
+  }
+
+  .large {
+    .radio-button-icon, .checkbox-icon {
+      svg {
+        height: 32px;
+        width: 32px;
+      }
+    }
+  }
+`;
+
+  const 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'
+        });
+    }
+  };
+
+  const QuizButton = ({
+    text,
+    type,
+    onClick,
+    resultType,
+    id,
+    selected = false,
+    disabled = false,
+    size = _.Size.Medium
+  }) => {
+    return /*#__PURE__*/React.createElement(OptionContainer, {
+      onClick: onClick,
+      isSelected: selected,
+      tabIndex: disabled || resultType ? -1 : 1,
+      onMouseDown: e => 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: () => {},
+      id: id
+    }) : /*#__PURE__*/React.createElement(_.Checkbox, {
+      selected: selected,
+      disabled: disabled,
+      size: size,
+      tabIndexVal: -1,
+      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: _propTypes2.default.oneOf(['correct', 'incorrect', 'partial']),
+    text: _propTypes2.default.string.isRequired,
+    onClick: _propTypes2.default.func,
+    id: _propTypes2.default.string.isRequired,
+    selected: _propTypes2.default.bool,
+    disabled: _propTypes2.default.bool,
+    type: _propTypes2.default.oneOf(['radio', 'checkbox']).isRequired
+  };
+  exports.default = QuizButton;
+});
+//# sourceMappingURL=QuizButton.js.map

package/dist/umd/QuizButton/QuizButton.js.map

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

package/dist/umd/QuizButton/__tests__/QuizButton.test.js

@@ -0,0 +1,125 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "..", "../../types", "../../styles/colors", "jest-styled-components", "@testing-library/jest-dom/extend-expect"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require(".."), require("../../types"), require("../../styles/colors"), require("jest-styled-components"), require("@testing-library/jest-dom/extend-expect"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global._, global.types, global.colors, global.jestStyledComponents, global.extendExpect);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _, _types, _colors) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  var _colors2 = _interopRequireDefault(_colors);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  describe('<QuizButton />', () => {
+    it('renders correct quiz button', async () => {
+      const {
+        getByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.QuizButton, {
+        size: _types.Size.Small,
+        resultType: 'correct',
+        text: 'this is sample text',
+        type: 'radio',
+        id: '1'
+      }));
+      expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+      expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+      expect(getByTestId('container')).toHaveStyleRule('background', _colors2.default.correct_20, {
+        modifier: '&.correct .quiz-button-text'
+      });
+      expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+      expect(getByTestId('container')).toHaveStyleRule('background', _colors2.default.correct_400, {
+        modifier: '&.correct .quiz-button-icon'
+      });
+    });
+    it('renders incorrect quiz button', async () => {
+      const {
+        getByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.QuizButton, {
+        size: _types.Size.Small,
+        resultType: 'incorrect',
+        text: 'this is sample text',
+        type: 'checkbox',
+        id: '1'
+      }));
+      expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+      expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+      expect(getByTestId('container')).toHaveStyleRule('background', _colors2.default.critical_20, {
+        modifier: '&.incorrect .quiz-button-text'
+      });
+      expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+      expect(getByTestId('container')).toHaveStyleRule('background', _colors2.default.critical_500, {
+        modifier: '&.incorrect .quiz-button-icon'
+      });
+    });
+    it('renders partial quiz button', async () => {
+      const {
+        getByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.QuizButton, {
+        size: _types.Size.Small,
+        resultType: 'partial',
+        text: 'this is sample text',
+        type: 'radio',
+        id: '1'
+      }));
+      expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+      expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+      expect(getByTestId('container')).toHaveStyleRule('background', _colors2.default.warning_20, {
+        modifier: '&.partial .quiz-button-text'
+      });
+      expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+      expect(getByTestId('container')).toHaveStyleRule('background', _colors2.default.warning_400, {
+        modifier: '&.partial .quiz-button-icon'
+      });
+    });
+    it('renders quiz button', async () => {
+      const {
+        getByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.QuizButton, {
+        size: _types.Size.Small,
+        text: 'this is sample text',
+        type: 'checkbox',
+        id: '1'
+      }));
+      expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+      expect(getByTestId('txtContainer')).toHaveStyleRule('background', _colors2.default.accent1_20);
+      expect(getByTestId('btnContainer')).toHaveStyleRule('background', _colors2.default.accent1_100);
+    });
+    it('renders selected quiz button', async () => {
+      const {
+        getByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.QuizButton, {
+        size: _types.Size.Small,
+        text: 'this is sample text',
+        selected: true,
+        type: 'radio',
+        id: '1'
+      }));
+      expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+      expect(getByTestId('container')).toHaveStyleRule('background', _colors2.default.accent1_100, {
+        modifier: '&.selected .quiz-button-text'
+      });
+      expect(getByTestId('container')).toHaveStyleRule('background', _colors2.default.accent1_200, {
+        modifier: '&.selected .quiz-button-icon'
+      });
+    });
+  });
+});
+//# sourceMappingURL=QuizButton.test.js.map

package/dist/umd/QuizButton/__tests__/QuizButton.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/QuizButton/__tests__/QuizButton.test.tsx"],"names":["describe","it","getByTestId","render","Size","expect","getByText","COLORS","modifier"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { render } from '@testing-library/react';\r\nimport 'jest-styled-components';\r\nimport { QuizButton } from '..';\r\nimport { Size } from '../../types';\r\nimport COLORS from '../../styles/colors';\r\nimport '@testing-library/jest-dom/extend-expect';\r\n\r\ndescribe('<QuizButton />',()=>{\r\n    it('renders correct quiz button', async () => {\r\n        const{getByText, getByTestId} = render(\r\n            <QuizButton size={Size.Small} resultType={'correct'} text={'this is sample text'} type={'radio'} id={'1'}/>\r\n        );\r\n        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');\r\n        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');\r\n        expect(getByTestId('container')).toHaveStyleRule('background',COLORS.correct_20, {modifier: '&.correct .quiz-button-text'});\r\n        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');\r\n        expect(getByTestId('container')).toHaveStyleRule('background',COLORS.correct_400, {modifier: '&.correct .quiz-button-icon'});\r\n    });\r\n\r\n    it('renders incorrect quiz button', async () => {\r\n        const{getByText, getByTestId} = render(\r\n            <QuizButton size={Size.Small} resultType={'incorrect'} text={'this is sample text'} type={'checkbox'} id={'1'}/>\r\n        );\r\n        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');\r\n        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');\r\n        expect(getByTestId('container')).toHaveStyleRule('background',COLORS.critical_20, {modifier: '&.incorrect .quiz-button-text'});\r\n        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');\r\n        expect(getByTestId('container')).toHaveStyleRule('background',COLORS.critical_500, {modifier: '&.incorrect .quiz-button-icon'});\r\n    });\r\n\r\n    it('renders partial quiz button', async () => {\r\n        const{getByText, getByTestId} = render(\r\n            <QuizButton size={Size.Small} resultType={'partial'} text={'this is sample text'} type={'radio'} id={'1'}/>\r\n        );\r\n        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');\r\n        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');\r\n        expect(getByTestId('container')).toHaveStyleRule('background',COLORS.warning_20, {modifier: '&.partial .quiz-button-text'});\r\n        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');\r\n        expect(getByTestId('container')).toHaveStyleRule('background',COLORS.warning_400, {modifier: '&.partial .quiz-button-icon'});\r\n    });\r\n\r\n    it('renders quiz button', async () => {\r\n        const{getByText, getByTestId} = render(\r\n            <QuizButton size={Size.Small} text={'this is sample text'} type={'checkbox'} id={'1'}/>\r\n        );\r\n        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');\r\n        expect(getByTestId('txtContainer')).toHaveStyleRule('background',COLORS.accent1_20);\r\n        expect(getByTestId('btnContainer')).toHaveStyleRule('background',COLORS.accent1_100);\r\n    });\r\n\r\n    it('renders selected quiz button', async () => {\r\n        const{getByText, getByTestId} = render(\r\n            <QuizButton size={Size.Small} text={'this is sample text'} selected={true} type={'radio'} id={'1'}/>\r\n        );\r\n        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');\r\n        expect(getByTestId('container')).toHaveStyleRule('background',COLORS.accent1_100, {modifier: '&.selected .quiz-button-text'});\r\n        expect(getByTestId('container')).toHaveStyleRule('background',COLORS.accent1_200, {modifier: '&.selected .quiz-button-icon'});\r\n    });\r\n});"],"file":"QuizButton.test.js"}

package/dist/umd/QuizButton/index.js

@@ -0,0 +1,32 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./QuizButton"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./QuizButton"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.QuizButton);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _QuizButton) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "QuizButton", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_QuizButton).default;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});
+//# sourceMappingURL=index.js.map

package/dist/umd/QuizButton/index.js.map

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

package/dist/umd/Services/functions.js

@@ -0,0 +1,33 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.createUUID = createUUID;
+
+  function createUUID() {
+    let 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
+      const 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.js.map

package/dist/umd/Services/functions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Services/functions.ts"],"names":["dt","r","Math","c"],"mappings":";;;;;;;;;;;;;;;;;;UAAO,U,GAAA,U;;AAAA,WAAA,UAAA,GAAsB;AAC3B,QAAIA,EAAE,GAAG,IAAA,IAAA,GADkB,OAClB,EAAT,CAD2B,CAE3B;;AACA,WAAO,uCAAA,OAAA,CAAA,OAAA,EAAwD,UAAA,CAAA,EAAY;AACzE;AACA,YAAMC,CAAC,GAAG,CAACD,EAAE,GAAGE,IAAI,CAAJA,MAAAA,KAAN,EAAA,IAAA,EAAA,GAAV,CAAA;AACAF,MAAAA,EAAE,GAAGE,IAAI,CAAJA,KAAAA,CAAWF,EAAE,GAHuD,EAGpEE,CAALF,CAHyE,CAIzE;;AACA,aAAO,CAACG,CAAC,KAADA,GAAAA,GAAAA,CAAAA,GAAiBF,CAAC,GAAF,GAACA,GAAlB,GAAA,EAAA,QAAA,CAAP,EAAO,CAAP;AALF,KAAO,CAAP;AAOD","sourcesContent":["export function createUUID() {\r\n  let dt = new Date().getTime();\r\n  // eslint-disable-next-line func-names\r\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\r\n    // eslint-disable-next-line no-bitwise\r\n    const r = (dt + Math.random() * 16) % 16 | 0;\r\n    dt = Math.floor(dt / 16);\r\n    // eslint-disable-next-line no-bitwise\r\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\r\n  });\r\n}\r\n"],"file":"functions.js"}