@laerdal/life-react-components 1.11.0-dev.20.full → 1.11.0-dev.21

package/dist/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","rest","useState","isOpen","setIsOpen","input","setInput","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n\n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef} disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
+{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n\n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef} role=\"combobox\"\n      aria-activedescendant={activeDescendant}\n      aria-multiselectable={true} disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}

package/dist/QuizButton/QuizButton.cjs

@@ -108,7 +108,9 @@ var QuizButton = function QuizButton(_ref) {
     onMouseDown: _.defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
-    "data-testid": 'container'
+    "data-testid": 'container',
+    "aria-checked": selected,
+    role: type === 'radio' ? 'radio' : 'checkbox'
   }, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
       "data-testid": 'btnContainer',

package/dist/QuizButton/QuizButton.cjs.map

@@ -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","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focusStyles","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","defaultOnMouseDownHandler","concat"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,aAAa,GAAGC,0BAAOC,GAAV,+QAGHC,SAAOC,UAHJ,EASN,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,SAAxB,GAAmCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,WAAxB,GAAoC,WAAzE;AAAA,CATC,EAUf,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAA0B,mCAAkBE,+BAAmBC,OAArC,EAA6C,IAA7C,CAA1B,GAAgFN,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAA0B,mCAAkBC,+BAAmBC,OAArC,EAA6C,IAA7C,CAA1B,GAA+E,mCAAkBD,+BAAmBC,OAArC,EAA6C,IAA7C,CAAjK;AAAA,CAVU,CAAnB;;AAaA,IAAMC,WAAW,GAAGX,0BAAOC,GAAV,qFAAjB;;AAEA,IAAMW,eAAe,GAAGZ,0BAAOC,GAAV,slCAGLC,SAAOW,WAHF,EAKV,UAAAT,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CALK,EAUP,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CAVE,EAWR,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CAXG,EAoBNN,SAAOY,WApBD,CAArB;;AAkEA,IAAMC,eAAe,GAAGf,0BAAOC,GAAV,ggEAOL,UAAAG,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CAPA,EAQF,UAAAJ,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,OAAKC,KAAlB,GAAwB,MAAxB,GAAgCH,KAAK,CAACC,IAAN,KAAaC,OAAKE,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CARH,EAWfT,aAXe,EAYDG,SAAOW,WAZN,EAcfD,eAde,EAeDV,SAAOc,WAfN,EAsBfJ,eAtBe,EAwBDV,SAAOe,WAxBN,EA0BflB,aA1Be,EA4BDG,SAAOgB,UA5BN,EA6BNhB,SAAOiB,WA7BD,EAsCfpB,aAtCe,EAuCDG,SAAOkB,UAvCN,EAyCfR,eAzCe,EA0CDV,SAAOmB,WA1CN,EAkDftB,aAlDe,EAmDDG,SAAOoB,WAnDN,EAqDfV,eArDe,EAsDDV,SAAOqB,YAtDN,EA8DfxB,aA9De,EA+DDG,SAAOsB,UA/DN,EAiEfZ,eAjEe,EAkEDV,SAAOuB,WAlEN,EA2EfC,aA3Ee,EA8Ffd,eA9Fe,EA+FDV,SAAOyB,WA/FN,EAiGf5B,aAjGe,EAkGD,UAAAK,KAAK;AAAA,SAAEA,KAAK,CAACwB,UAAN,GAAmB1B,SAAOc,WAA1B,GAAyCd,SAAOW,WAAlD;AAAA,CAlGJ,EAwGJX,SAAO2B,WAxGH,EA+GfjB,eA/Ge,EAgHDV,SAAO4B,WAhHN,EAmHf/B,aAnHe,EAoHD,UAAAK,KAAK;AAAA,SAAEA,KAAK,CAACwB,UAAN,GAAmB1B,SAAOyB,WAA1B,GAAwCzB,SAAOc,WAAjD;AAAA,CApHJ,EA2HJd,SAAO6B,WA3HH,CAArB;;AAiIA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,UAAD,EAAwB;AAClD,UAAOA,UAAP;AACE,SAAK,SAAL;AAAiB,0BAAO,qBAAC,aAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAE/B,SAAOgC,KAArC;AAA4C,QAAA,SAAS,EAAE;AAAvD,QAAP;;AAEjB,SAAK,WAAL;AAAmB,0BAAO,qBAAC,aAAD,CAAa,KAAb;AAAmB,QAAA,KAAK,EAAEhC,SAAOgC,KAAjC;AAAwC,QAAA,SAAS,EAAE;AAAnD,QAAP;;AAEnB;AAAU,0BAAO,qBAAC,aAAD,CAAa,KAAb;AAAmB,QAAA,KAAK,EAAEhC,SAAOgC,KAAjC;AAAwC,QAAA,SAAS,EAAE;AAAnD,QAAP;AALZ;AAOD,CARD;;AAqBA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAWO;AAAA,MAVJC,IAUI,QAVJA,IAUI;AAAA,MATJC,IASI,QATJA,IASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJL,UAOI,QAPJA,UAOI;AAAA,MANJM,EAMI,QANJA,EAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,2BAJJC,QAII;AAAA,MAJJA,QAII,8BAJO,KAIP;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,KAGP;AAAA,uBAFJrC,IAEI;AAAA,MAFJA,IAEI,0BAFGC,OAAKqC,MAER;AAAA,MADDC,IACC;AAClE,sBACE,sBAAC,eAAD;AACE,IAAA,OAAO,EAAEN,OADX;AAEE,IAAA,UAAU,EAAEG,QAFd;AAGE,IAAA,QAAQ,EAAGC,QAAQ,IAAIT,UAAb,GAA2B,CAAC,CAA5B,GAAgC,CAH5C;AAIE,IAAA,WAAW,EAAEY,2BAJf;AAKE,IAAA,IAAI,EAAExC,IALR;AAME,IAAA,SAAS,EAAE,eAAeyC,MAAf,CAAsBL,QAAQ,GAAG,WAAH,GAAiB,EAA/C,EACRK,MADQ,CACDJ,QAAQ,GAAG,WAAH,GAAiB,EADxB,EAERI,MAFQ,CAEDb,UAAU,GAAG,aAAaA,UAAhB,GAA6B,EAFtC,EAGRa,MAHQ,CAGDN,SAAS,GAAG,MAAMA,SAAT,GAAqB,EAH7B,CANb;AAUE,mBAAa;AAVf,KAWMI,IAXN;AAAA,4BAYI,qBAAC,eAAD;AAAiB,qBAAa,cAA9B;AAA8C,MAAA,SAAS,EAAE,kBAAzD;AAA6E,MAAA,IAAI,EAAEvC,IAAnF;AAAA,gBAEI4B,UAAU,GAAGD,mBAAmB,CAACC,UAAD,CAAtB,GACUI,IAAI,KAAG,OAAP,gBAAiB,qBAAC,aAAD;AAAa,QAAA,QAAQ,EAAEI,QAAvB;AAAiC,QAAA,QAAQ,EAAEC,QAA3C;AAAqD,QAAA,IAAI,EAAErC,IAA3D;AAAiE,QAAA,WAAW,EAAE,CAAC,CAA/E;AACjB,QAAA,MAAM,EAAE,kBAAI,CAAE,CADG;AACD,QAAA,EAAE,EAAEkC;AADH,QAAjB,gBAC4B,qBAAC,UAAD;AAAU,QAAA,QAAQ,EAAEE,QAApB;AAA8B,QAAA,QAAQ,EAAEC,QAAxC;AAAkD,QAAA,IAAI,EAAErC,IAAxD;AAA8D,QAAA,WAAW,EAAE,CAAC,CAA5E;AAC5B,QAAA,MAAM,EAAE,kBAAI,CAAE,CADc;AACZ,QAAA,EAAE,EAAEkC;AADQ;AAJpD,MAZJ,eAsBI,qBAAC,aAAD;AAAe,qBAAa,cAA5B;AAA4C,MAAA,SAAS,EAAE,kBAAvD;AAA2E,MAAA,IAAI,EAAElC,IAAjF;AAAA,6BACE,qBAAC,WAAD;AAAa,QAAA,IAAI,EAAEA,IAAnB;AAAA,kBACG+B;AADH;AADF,MAtBJ;AAAA,KADF;AA8BD,CA1CD;;;AAVEH,EAAAA,U,4BAAa,S,EAAY,W,EAAc,S;AACvCG,EAAAA,I;AACAE,EAAAA,O;AACAC,EAAAA,E;AACAE,EAAAA,Q;AACAC,EAAAA,Q;AAEAL,EAAAA,I,4BAAM,O,EAAU,U;;eA+CHF,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, 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    &: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  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\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  &: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.CheckMark 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} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      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      {...rest}>\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;\n"],"file":"QuizButton.cjs"}
+{"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","focusStyles","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","defaultOnMouseDownHandler","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, 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    &: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  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\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  &: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.CheckMark 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} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      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      aria-checked={selected}\n      role={type === 'radio'? 'radio' : 'checkbox'}\n      {...rest}>\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;\n"],"file":"QuizButton.cjs"}

package/dist/QuizButton/QuizButton.js

@@ -83,7 +83,9 @@ var QuizButton = function QuizButton(_ref) {
     onMouseDown: defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
-    "data-testid": 'container'
+    "data-testid": 'container',
+    "aria-checked": selected,
+    role: type === 'radio' ? 'radio' : 'checkbox'
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(ButtonContainer, {
       "data-testid": 'btnContainer',

package/dist/QuizButton/QuizButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","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","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,QAAR,EAAkBC,MAAlB,EAA0BC,yBAA1B,EAAqDC,WAArD,EAAkEC,WAAlE,EAA+EC,IAA/E,EAAqFC,WAArF,QAAuG,IAAvG;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;;;AAEA,IAAMC,aAAa,GAAGZ,MAAM,CAACa,GAAV,iQAGHX,MAAM,CAACY,UAHJ,EASN,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAAwB,SAAxB,GAAmCF,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAAwB,WAAxB,GAAoC,WAAzE;AAAA,CATC,EAUf,UAAAH,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAA0BP,iBAAiB,CAACC,kBAAkB,CAACQ,OAApB,EAA4B,IAA5B,CAA3C,GAAgFJ,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAA0BV,iBAAiB,CAACG,kBAAkB,CAACQ,OAApB,EAA4B,IAA5B,CAA3C,GAA+EV,iBAAiB,CAACE,kBAAkB,CAACQ,OAApB,EAA4B,IAA5B,CAAlL;AAAA,CAVU,CAAnB;AAaA,IAAMC,WAAW,GAAGpB,MAAM,CAACa,GAAV,uEAAjB;AAEA,IAAMQ,eAAe,GAAGrB,MAAM,CAACa,GAAV,wkCAGLX,MAAM,CAACoB,WAHF,EAKV,UAAAP,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAAwB,MAAxB,GAAgCF,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CALK,EAUP,UAAAH,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAAwB,MAAxB,GAAgCF,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CAVE,EAWR,UAAAH,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAAwB,MAAxB,GAAgCF,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CAXG,EAoBNhB,MAAM,CAACqB,WApBD,CAArB;AAkEA,IAAMC,eAAe,GAAGxB,MAAM,CAACa,GAAV,k/DAOL,UAAAE,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAAwB,MAAxB,GAAgCF,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CAPA,EAQF,UAAAH,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACW,KAAlB,GAAwB,MAAxB,GAAgCF,KAAK,CAACC,IAAN,KAAaV,IAAI,CAACY,KAAlB,GAAwB,MAAxB,GAA+B,MAAjE;AAAA,CARH,EAWfN,aAXe,EAYDV,MAAM,CAACoB,WAZN,EAcfD,eAde,EAeDnB,MAAM,CAACuB,WAfN,EAsBfJ,eAtBe,EAwBDnB,MAAM,CAACwB,WAxBN,EA0Bfd,aA1Be,EA4BDV,MAAM,CAACyB,UA5BN,EA6BNzB,MAAM,CAAC0B,WA7BD,EAsCfhB,aAtCe,EAuCDV,MAAM,CAAC2B,UAvCN,EAyCfR,eAzCe,EA0CDnB,MAAM,CAAC4B,WA1CN,EAkDflB,aAlDe,EAmDDV,MAAM,CAAC6B,WAnDN,EAqDfV,eArDe,EAsDDnB,MAAM,CAAC8B,YAtDN,EA8DfpB,aA9De,EA+DDV,MAAM,CAAC+B,UA/DN,EAiEfZ,eAjEe,EAkEDnB,MAAM,CAACgC,WAlEN,EA2Ef9B,WA3Ee,EA8FfiB,eA9Fe,EA+FDnB,MAAM,CAACiC,WA/FN,EAiGfvB,aAjGe,EAkGD,UAAAG,KAAK;AAAA,SAAEA,KAAK,CAACqB,UAAN,GAAmBlC,MAAM,CAACuB,WAA1B,GAAyCvB,MAAM,CAACoB,WAAlD;AAAA,CAlGJ,EAwGJpB,MAAM,CAACmC,WAxGH,EA+GfhB,eA/Ge,EAgHDnB,MAAM,CAACoC,WAhHN,EAmHf1B,aAnHe,EAoHD,UAAAG,KAAK;AAAA,SAAEA,KAAK,CAACqB,UAAN,GAAmBlC,MAAM,CAACiC,WAA1B,GAAwCjC,MAAM,CAACuB,WAAjD;AAAA,CApHJ,EA2HJvB,MAAM,CAACqC,WA3HH,CAArB;;AAiIA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,UAAD,EAAwB;AAClD,UAAOA,UAAP;AACE,SAAK,SAAL;AAAiB,0BAAO,KAAC,WAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEvC,MAAM,CAACwC,KAArC;AAA4C,QAAA,SAAS,EAAE;AAAvD,QAAP;;AAEjB,SAAK,WAAL;AAAmB,0BAAO,KAAC,WAAD,CAAa,KAAb;AAAmB,QAAA,KAAK,EAAExC,MAAM,CAACwC,KAAjC;AAAwC,QAAA,SAAS,EAAE;AAAnD,QAAP;;AAEnB;AAAU,0BAAO,KAAC,WAAD,CAAa,KAAb;AAAmB,QAAA,KAAK,EAAExC,MAAM,CAACwC,KAAjC;AAAwC,QAAA,SAAS,EAAE;AAAnD,QAAP;AALZ;AAOD,CARD;;AAqBA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAWO;AAAA,MAVJC,IAUI,QAVJA,IAUI;AAAA,MATJC,IASI,QATJA,IASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJL,UAOI,QAPJA,UAOI;AAAA,MANJM,EAMI,QANJA,EAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,2BAJJC,QAII;AAAA,MAJJA,QAII,8BAJO,KAIP;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,KAGP;AAAA,uBAFJlC,IAEI;AAAA,MAFJA,IAEI,0BAFGV,IAAI,CAAC6C,MAER;AAAA,MADDC,IACC;;AAClE,sBACE,MAAC,eAAD;AACE,IAAA,OAAO,EAAEN,OADX;AAEE,IAAA,UAAU,EAAEG,QAFd;AAGE,IAAA,QAAQ,EAAGC,QAAQ,IAAIT,UAAb,GAA2B,CAAC,CAA5B,GAAgC,CAH5C;AAIE,IAAA,WAAW,EAAEtC,yBAJf;AAKE,IAAA,IAAI,EAAEa,IALR;AAME,IAAA,SAAS,EAAE,eAAeqC,MAAf,CAAsBJ,QAAQ,GAAG,WAAH,GAAiB,EAA/C,EACRI,MADQ,CACDH,QAAQ,GAAG,WAAH,GAAiB,EADxB,EAERG,MAFQ,CAEDZ,UAAU,GAAG,aAAaA,UAAhB,GAA6B,EAFtC,EAGRY,MAHQ,CAGDL,SAAS,GAAG,MAAMA,SAAT,GAAqB,EAH7B,CANb;AAUE,mBAAa;AAVf,KAWMI,IAXN;AAAA,4BAYI,KAAC,eAAD;AAAiB,qBAAa,cAA9B;AAA8C,MAAA,SAAS,EAAE,kBAAzD;AAA6E,MAAA,IAAI,EAAEpC,IAAnF;AAAA,gBAEIyB,UAAU,GAAGD,mBAAmB,CAACC,UAAD,CAAtB,GACUI,IAAI,KAAG,OAAP,gBAAiB,KAAC,WAAD;AAAa,QAAA,QAAQ,EAAEI,QAAvB;AAAiC,QAAA,QAAQ,EAAEC,QAA3C;AAAqD,QAAA,IAAI,EAAElC,IAA3D;AAAiE,QAAA,WAAW,EAAE,CAAC,CAA/E;AACjB,QAAA,MAAM,EAAE,kBAAI,CAAE,CADG;AACD,QAAA,EAAE,EAAE+B;AADH,QAAjB,gBAC4B,KAAC,QAAD;AAAU,QAAA,QAAQ,EAAEE,QAApB;AAA8B,QAAA,QAAQ,EAAEC,QAAxC;AAAkD,QAAA,IAAI,EAAElC,IAAxD;AAA8D,QAAA,WAAW,EAAE,CAAC,CAA5E;AAC5B,QAAA,MAAM,EAAE,kBAAI,CAAE,CADc;AACZ,QAAA,EAAE,EAAE+B;AADQ;AAJpD,MAZJ,eAsBI,KAAC,aAAD;AAAe,qBAAa,cAA5B;AAA4C,MAAA,SAAS,EAAE,kBAAvD;AAA2E,MAAA,IAAI,EAAE/B,IAAjF;AAAA,6BACE,KAAC,WAAD;AAAa,QAAA,IAAI,EAAEA,IAAnB;AAAA,kBACG4B;AADH;AADF,MAtBJ;AAAA,KADF;AA8BD,CA1CD;;;AAVEH,EAAAA,U,aAAa,S,EAAY,W,EAAc,S;AACvCG,EAAAA,I;AACAE,EAAAA,O;AACAC,EAAAA,E;AACAE,EAAAA,Q;AACAC,EAAAA,Q;AAEAL,EAAAA,I,aAAM,O,EAAU,U;;AA+ClB,eAAeF,UAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, 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    &: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  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\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  &: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.CheckMark 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} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      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      {...rest}>\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;\n"],"file":"QuizButton.js"}
+{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","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","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, 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    &: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  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\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  &: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.CheckMark 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} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      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      aria-checked={selected}\n      role={type === 'radio'? 'radio' : 'checkbox'}\n      {...rest}>\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;\n"],"file":"QuizButton.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.11.0-dev.20.full",
+  "version": "1.11.0-dev.21",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [