@laerdal/life-react-components 1.4.1-dev.20 → 1.4.1-dev.22.full

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/QuizButton/QuizButton.cjs +6 -6
  2. package/dist/QuizButton/QuizButton.cjs.map +1 -1
  3. package/dist/QuizButton/QuizButton.js +6 -6
  4. package/dist/QuizButton/QuizButton.js.map +1 -1
  5. package/package.json +1 -1
package/dist/QuizButton/QuizButton.cjs CHANGED
@@ -37,13 +37,13 @@ var TextContainer = _styledComponents.default.div(_templateObject || (_templateO
37
37
 
38
38
  var TextWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
39
39
 
40
- 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) {
40
+ 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 svg {\n color: ", ";\n }\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 {\n min-width: 32px;\n min-height: 32px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 16px;\n width: 16px;\n }\n }\n }\n\n .medium {\n min-width: 48px;\n min-height: 48px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .large {\n min-width: 64px;\n min-height: 64px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 32px;\n width: 32px;\n }\n }\n }\n"])), _.COLORS.accent1_100, function (props) {
41
41
  return props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px';
42
42
  }, function (props) {
43
43
  return props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px';
44
44
  }, function (props) {
45
- return props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px';
46
- });
45
+ return props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px';
46
+ }, _.COLORS.accent1_600);
47
47
 
48
48
  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) {
49
49
  return props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px';
@@ -51,13 +51,13 @@ var OptionContainer = _styledComponents.default.div(_templateObject4 || (_templa
51
51
  return props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px';
52
52
  }, 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) {
53
53
  return props.isSelected ? _.COLORS.accent1_200 : _.COLORS.accent1_100;
54
- }, _.COLORS.primary_700, ButtonContainer, function (props) {
54
+ }, _.COLORS.accent1_700, ButtonContainer, function (props) {
55
55
  return props.isSelected ? _.COLORS.accent1_200 : _.COLORS.accent1_100;
56
56
  }, TextContainer, function (props) {
57
57
  return props.isSelected ? _.COLORS.accent1_100 : _.COLORS.accent1_20;
58
58
  }, ButtonContainer, _.COLORS.accent1_400, TextContainer, function (props) {
59
59
  return props.isSelected ? _.COLORS.accent1_300 : _.COLORS.accent1_200;
60
- }, _.COLORS.primary_800);
60
+ }, _.COLORS.accent1_800);
61
61
 
62
62
  var renderResultContent = function renderResultContent(resultType) {
63
63
  switch (resultType) {
@@ -97,7 +97,7 @@ var QuizButton = function QuizButton(_ref) {
97
97
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionContainer, {
98
98
  onClick: onClick,
99
99
  isSelected: selected,
100
- tabIndex: disabled || resultType ? -1 : 1,
100
+ tabIndex: disabled || resultType ? -1 : 0,
101
101
  onMouseDown: function onMouseDown(e) {
102
102
  return e.preventDefault();
103
103
  },
package/dist/QuizButton/QuizButton.cjs.map CHANGED
@@ -1 +1 @@
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":"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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.cjs"}
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","accent1_600","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","accent1_700","accent1_400","accent1_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?'32px':(props.size===Size.Large?'64px':'48px')};\n }\n\n .radio-button-icon, .checkbox-icon {\n margin: auto;\n min-width: unset;\n background: transparent;\n\n svg {\n color: ${COLORS.accent1_600};\n }\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 {\n min-width: 32px;\n min-height: 32px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 16px;\n width: 16px;\n }\n }\n }\n\n .medium {\n min-width: 48px;\n min-height: 48px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .large {\n min-width: 64px;\n min-height: 64px;\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.accent1_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.accent1_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 : 0} 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.js CHANGED
@@ -15,26 +15,26 @@ var TextContainer = styled.div(_templateObject || (_templateObject = _taggedTemp
15
15
  return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null);
16
16
  });
17
17
  var TextWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
18
- 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) {
18
+ 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 svg {\n color: ", ";\n }\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 {\n min-width: 32px;\n min-height: 32px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 16px;\n width: 16px;\n }\n }\n }\n\n .medium {\n min-width: 48px;\n min-height: 48px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .large {\n min-width: 64px;\n min-height: 64px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 32px;\n width: 32px;\n }\n }\n }\n"])), COLORS.accent1_100, function (props) {
19
19
  return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
20
20
  }, function (props) {
21
21
  return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
22
22
  }, function (props) {
23
- return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
24
- });
23
+ return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
24
+ }, COLORS.accent1_600);
25
25
  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) {
26
26
  return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
27
27
  }, function (props) {
28
28
  return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
29
29
  }, 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) {
30
30
  return props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100;
31
- }, COLORS.primary_700, ButtonContainer, function (props) {
31
+ }, COLORS.accent1_700, ButtonContainer, function (props) {
32
32
  return props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100;
33
33
  }, TextContainer, function (props) {
34
34
  return props.isSelected ? COLORS.accent1_100 : COLORS.accent1_20;
35
35
  }, ButtonContainer, COLORS.accent1_400, TextContainer, function (props) {
36
36
  return props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200;
37
- }, COLORS.primary_800);
37
+ }, COLORS.accent1_800);
38
38
 
39
39
  var renderResultContent = function renderResultContent(resultType) {
40
40
  switch (resultType) {
@@ -74,7 +74,7 @@ var QuizButton = function QuizButton(_ref) {
74
74
  return /*#__PURE__*/_jsxs(OptionContainer, {
75
75
  onClick: onClick,
76
76
  isSelected: selected,
77
- tabIndex: disabled || resultType ? -1 : 1,
77
+ tabIndex: disabled || resultType ? -1 : 0,
78
78
  onMouseDown: function onMouseDown(e) {
79
79
  return e.preventDefault();
80
80
  },
package/dist/QuizButton/QuizButton.js.map CHANGED
@@ -1 +1 @@
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"}
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","accent1_600","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","accent1_700","accent1_400","accent1_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?'32px':(props.size===Size.Large?'64px':'48px')};\n }\n\n .radio-button-icon, .checkbox-icon {\n margin: auto;\n min-width: unset;\n background: transparent;\n\n svg {\n color: ${COLORS.accent1_600};\n }\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 {\n min-width: 32px;\n min-height: 32px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 16px;\n width: 16px;\n }\n }\n }\n\n .medium {\n min-width: 48px;\n min-height: 48px;\n .radio-button-icon, .checkbox-icon {\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .large {\n min-width: 64px;\n min-height: 64px;\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.accent1_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.accent1_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 : 0} 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.4.1-dev.20",
3
+ "version": "1.4.1-dev.22.full",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [