@laerdal/life-react-components 1.4.1-dev.8.full → 1.4.1-dev.9
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.
- package/dist/InputFields/Checkbox.d.ts +1 -0
- package/dist/InputFields/Checkbox.js +5 -3
- package/dist/InputFields/Checkbox.js.map +1 -1
- package/dist/InputFields/RadioButton.d.ts +1 -0
- package/dist/InputFields/RadioButton.js +5 -3
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/QuizButton/QuizButton.d.ts +15 -0
- package/dist/QuizButton/QuizButton.js +126 -0
- package/dist/QuizButton/QuizButton.js.map +1 -0
- package/dist/QuizButton/index.d.ts +1 -0
- package/dist/QuizButton/index.js +2 -0
- package/dist/QuizButton/index.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,6 +12,7 @@ interface Props {
|
|
|
12
12
|
iconPointerEventsTransparent?: boolean;
|
|
13
13
|
semiSelected?: boolean;
|
|
14
14
|
readonly?: boolean;
|
|
15
|
+
tabIndexVal?: number;
|
|
15
16
|
}
|
|
16
17
|
declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
17
18
|
export default Checkbox;
|
|
@@ -30,7 +30,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
30
30
|
size = _ref.size,
|
|
31
31
|
semiSelected = _ref.semiSelected,
|
|
32
32
|
children = _ref.children,
|
|
33
|
-
readonly = _ref.readonly
|
|
33
|
+
readonly = _ref.readonly,
|
|
34
|
+
tabIndexVal = _ref.tabIndexVal;
|
|
34
35
|
|
|
35
36
|
var onKeyPress = function onKeyPress(e) {
|
|
36
37
|
if (e.keyCode === 13 && !disabled && !readonly) {
|
|
@@ -52,7 +53,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
52
53
|
disabled: disabled,
|
|
53
54
|
className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
|
|
54
55
|
selected: selected,
|
|
55
|
-
tabIndex: disabled || readonly ? -1 : 0,
|
|
56
|
+
tabIndex: disabled || readonly ? -1 : tabIndexVal ? tabIndexVal : 0,
|
|
56
57
|
showWarning: showWarning,
|
|
57
58
|
margin: margin,
|
|
58
59
|
onClick: handleClick,
|
|
@@ -94,7 +95,8 @@ Checkbox.propTypes = {
|
|
|
94
95
|
margin: _pt.string,
|
|
95
96
|
iconPointerEventsTransparent: _pt.bool,
|
|
96
97
|
semiSelected: _pt.bool,
|
|
97
|
-
readonly: _pt.bool
|
|
98
|
+
readonly: _pt.bool,
|
|
99
|
+
tabIndexVal: _pt.number
|
|
98
100
|
};
|
|
99
101
|
export default Checkbox;
|
|
100
102
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,YAAjC,QAAoD,kCAApD;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,QAAsE,sBAAtE;;;AAEA,IAAMC,cAAc,GAAGV,MAAM,CAACW,GAAV,izDAMhB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANW,EASTT,MAAM,CAACU,KATE,EA0BL,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,QAAN,GAAiBX,MAAM,CAACY,WAAxB,GAAsCJ,KAAK,CAACK,WAAN,GAAoBb,MAAM,CAACc,WAA3B,GAAyCd,MAAM,CAACe,WAA3F;AAAA,CA1BA,EAoCdV,iBAAiB,CAACJ,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACU,KAApC,CApCH,EA2CdN,iBAAiB,CAACH,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACU,KAApC,CA3CH,EAkDdP,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACU,KAApC,CAlDH,EA4DMV,MAAM,CAACiB,KA5Db,EA6DQjB,MAAM,CAACY,WA7Df,EAgEHZ,MAAM,CAACe,WAhEJ,EAuEMf,MAAM,CAACkB,UAvEb,EA0EHlB,MAAM,CAACmB,WA1EJ,EAiFAnB,MAAM,CAACoB,WAjFP,EAqFHpB,MAAM,CAACqB,WArFJ,EAsGPrB,MAAM,CAACsB,WAtGA,EA8GMtB,MAAM,CAACiB,KA9Gb,EAkHLjB,MAAM,CAACsB,WAlHF,CAApB;
|
|
1
|
+
{"version":3,"sources":["../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .checkbox-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n }\n }\n\n .checkbox-label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):not(.readonly):focus {\n outline: none;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ${COLORS.neutral_600};\n }\n }\n }\n\n &:not(.disabled):not(.readonly):hover {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):not(.readonly):active {\n .checkbox-icon {\n background: ${COLORS.primary_100};\n box-shadow: none;\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.readonly{\n cursor: inherit;\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n }\n \n &.disabled {\n box-shadow: none;\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n\n .checkbox-icon{\n background-color: ${COLORS.white};\n }\n\n .checkbox-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\ninterface Props {\n id?: string;\n selected: boolean;\n select?: (selected: boolean) => void;\n label?: string;\n showWarning?: boolean;\n disabled?: boolean;\n margin?: string;\n size?: Size;\n iconPointerEventsTransparent?: boolean;\n semiSelected?: boolean;\n readonly?: boolean;\n tabIndexVal?: number;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n id,\n selected,\n select,\n label,\n showWarning,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected,\n children,\n readonly,\n tabIndexVal\n }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled && !readonly) {\n select && select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled || readonly) {\n return;\n }\n select && select(!selected);\n };\n\n size = size ?? Size.Medium;\n\n return (\n <StyledCheckBox key={id}\n ref={ref}\n disabled={disabled}\n className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n selected={selected}\n tabIndex={disabled || readonly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n showWarning={showWarning}\n margin={margin}\n onClick={handleClick}\n onKeyDown={onKeyPress}\n onMouseDown={e => e.preventDefault()}>\n <div id={id} className={'checkbox-icon'}>\n {\n selected\n ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : semiSelected\n ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n }\n </div>\n {\n label &&\n (\n <label className={'checkbox-label'}\n htmlFor={id}>\n {label}\n </label>\n )\n }\n {\n !label &&\n <label className={'checkbox-label'}\n htmlFor={id}>\n {children}\n </label>\n }\n </StyledCheckBox>\n );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
|
|
@@ -11,6 +11,7 @@ interface Props {
|
|
|
11
11
|
iconPointerEventsTransparent?: boolean;
|
|
12
12
|
margin?: string;
|
|
13
13
|
size?: Size;
|
|
14
|
+
tabIndexVal?: number;
|
|
14
15
|
}
|
|
15
16
|
declare const RadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
16
17
|
export default RadioButton;
|
|
@@ -28,7 +28,8 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
28
28
|
disabled = _ref.disabled,
|
|
29
29
|
margin = _ref.margin,
|
|
30
30
|
iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
|
|
31
|
-
size = _ref.size
|
|
31
|
+
size = _ref.size,
|
|
32
|
+
tabIndexVal = _ref.tabIndexVal;
|
|
32
33
|
|
|
33
34
|
var onKeyPress = function onKeyPress(e) {
|
|
34
35
|
if (e.keyCode === 13 && !disabled) {
|
|
@@ -49,7 +50,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
49
50
|
onKeyDown: onKeyPress,
|
|
50
51
|
disabled: disabled,
|
|
51
52
|
className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
|
|
52
|
-
tabIndex: disabled ? -1 : 0,
|
|
53
|
+
tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
|
|
53
54
|
showWarning: showWarning,
|
|
54
55
|
selected: selected,
|
|
55
56
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
@@ -82,7 +83,8 @@ RadioButton.propTypes = {
|
|
|
82
83
|
showWarning: _pt.bool,
|
|
83
84
|
disabled: _pt.bool,
|
|
84
85
|
iconPointerEventsTransparent: _pt.bool,
|
|
85
|
-
margin: _pt.string
|
|
86
|
+
margin: _pt.string,
|
|
87
|
+
tabIndexVal: _pt.number
|
|
86
88
|
};
|
|
87
89
|
export default RadioButton;
|
|
88
90
|
//# sourceMappingURL=RadioButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAA0B,mBAA1B;AACA,SAAQC,cAAR,EAAwBC,aAAxB,QAA4C,kCAA5C;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,mBAAjE,QAA2F,sBAA3F;;;AAEA,IAAMC,iBAAiB,GAAGV,MAAM,CAACW,GAAV,oyDAMnB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANc,EASZV,MAAM,CAACW,KATK,EA0BR,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,QAAN,GAAiBZ,MAAM,CAACa,WAAxB,GAAsCJ,KAAK,CAACK,WAAN,GAAoBd,MAAM,CAACe,WAA3B,GAAyCf,MAAM,CAACgB,WAA3F;AAAA,CA1BG,EAwCfV,mBAAmB,CAACL,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CAxCJ,EA6CjBN,iBAAiB,CAACJ,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CA7CA,EAoDjBP,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CApDA,EA2DjBR,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CA3DA,EAqEGX,MAAM,CAACkB,KArEV,EAsEKlB,MAAM,CAACa,WAtEZ,EAyENb,MAAM,CAACgB,WAzED,EAgFGhB,MAAM,CAACmB,UAhFV,EAmFNnB,MAAM,CAACoB,WAnFD,EA0FHpB,MAAM,CAACqB,WA1FJ,EA8FNrB,MAAM,CAACsB,WA9FD,EAuGVtB,MAAM,CAACuB,WAvGG,EA+GGvB,MAAM,CAACkB,KA/GV,EAmHRlB,MAAM,CAACuB,WAnHC,CAAvB;
|
|
1
|
+
{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n \n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .radio-button-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n }\n }\n\n .radio-button-label {\n user-select: none;\n display: flex;\n flex-direction: column;\n\n label{\n cursor: inherit;\n }\n\n span {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .radio-button-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):focus {\n outline: none;\n\n .radio-button-icon {\n background-color: ${COLORS.white};\n box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ${COLORS.neutral_600};\n }\n }\n }\n\n &:not(.disabled):hover {\n .radio-button-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):active {\n .radio-button-icon {\n background: ${COLORS.primary_100};\n box-shadow: none;\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.disabled {\n box-shadow: none;\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .radio-button-icon,\n .radio-button-label {\n pointer-events: none;\n }\n\n .radio-button-icon{\n background-color: ${COLORS.white};\n }\n \n .radio-button-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\ninterface Props {\n id: string;\n selected: boolean;\n select: (selected: boolean) => void;\n label?: string;\n additionalLabel?: string;\n showWarning?: boolean;\n disabled?: boolean;\n iconPointerEventsTransparent?: boolean;\n margin?: string;\n size?: Size;\n tabIndexVal?: number;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n id,\n selected,\n label,\n additionalLabel,\n showWarning,\n select,\n disabled,\n margin,\n iconPointerEventsTransparent,\n size,\n tabIndexVal\n}: Props, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled) {\n select(!selected);\n }\n };\n\n size = size ?? Size.Medium;\n\n return (\n <StyledRadioButton key={id} margin={margin}\n ref={ref}\n onClick={() => !disabled && select(!selected)}\n onMouseDown={e => e.preventDefault()}\n onKeyDown={onKeyPress}\n disabled={disabled}\n className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n showWarning={showWarning}\n selected={selected}>\n <div className={'radio-button-icon'} id={id}>\n { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n </div>\n <div className={'radio-button-label'}>\n {label && <label htmlFor={id}>{label}</label>}\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n </div>\n </StyledRadioButton>\n );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Size } from '..';
|
|
3
|
+
declare type QuizButtonProps = {
|
|
4
|
+
resultType?: 'correct' | 'incorrect' | 'partial';
|
|
5
|
+
text: string;
|
|
6
|
+
onClick?: (arg: any) => void;
|
|
7
|
+
id: string;
|
|
8
|
+
selected?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
size?: Size.Small | Size.Medium | Size.Large;
|
|
11
|
+
type: 'radio' | 'checkbox';
|
|
12
|
+
className?: string;
|
|
13
|
+
};
|
|
14
|
+
declare const QuizButton: React.FunctionComponent<QuizButtonProps>;
|
|
15
|
+
export default QuizButton;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
import _pt from "prop-types";
|
|
3
|
+
|
|
4
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
5
|
+
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { Checkbox, COLORS, RadioButton, Size, SystemIcons } from '..';
|
|
9
|
+
import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
var TextContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 0 8px 8px 0;\n display: flex;\n background: ", ";\n width: 100%;\n\n transition: background 100ms ease-in-out;\n align-items: center;\n\n padding: ", ";\n ", "\n"])), COLORS.accent1_20, function (props) {
|
|
13
|
+
return props.size === Size.Small ? '6px 8px' : props.size === Size.Large ? '20px 16px' : '12px 16px';
|
|
14
|
+
}, function (props) {
|
|
15
|
+
return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null);
|
|
16
|
+
});
|
|
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) {
|
|
19
|
+
return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
|
|
20
|
+
}, function (props) {
|
|
21
|
+
return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
|
|
22
|
+
}, function (props) {
|
|
23
|
+
return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
|
|
24
|
+
});
|
|
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
|
+
return props.size === Size.Small ? '32px' : props.size === Size.Large ? '64px' : '48px';
|
|
27
|
+
}, function (props) {
|
|
28
|
+
return props.size === Size.Small ? '16px' : props.size === Size.Large ? '32px' : '24px';
|
|
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
|
+
return props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100;
|
|
31
|
+
}, COLORS.primary_700, ButtonContainer, function (props) {
|
|
32
|
+
return props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100;
|
|
33
|
+
}, TextContainer, function (props) {
|
|
34
|
+
return props.isSelected ? COLORS.accent1_100 : COLORS.accent1_20;
|
|
35
|
+
}, ButtonContainer, COLORS.accent1_400, TextContainer, function (props) {
|
|
36
|
+
return props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200;
|
|
37
|
+
}, COLORS.primary_800);
|
|
38
|
+
|
|
39
|
+
var renderResultContent = function renderResultContent(resultType) {
|
|
40
|
+
switch (resultType) {
|
|
41
|
+
case 'correct':
|
|
42
|
+
return /*#__PURE__*/_jsx(SystemIcons.CheckComplete, {
|
|
43
|
+
color: COLORS.white,
|
|
44
|
+
className: 'quiz-button-result-icon'
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
case 'incorrect':
|
|
48
|
+
return /*#__PURE__*/_jsx(SystemIcons.Close, {
|
|
49
|
+
color: COLORS.white,
|
|
50
|
+
className: 'quiz-button-result-icon'
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
default:
|
|
54
|
+
return /*#__PURE__*/_jsx(SystemIcons.Close, {
|
|
55
|
+
color: COLORS.white,
|
|
56
|
+
className: 'quiz-button-result-icon'
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var QuizButton = function QuizButton(_ref) {
|
|
62
|
+
var text = _ref.text,
|
|
63
|
+
type = _ref.type,
|
|
64
|
+
onClick = _ref.onClick,
|
|
65
|
+
resultType = _ref.resultType,
|
|
66
|
+
id = _ref.id,
|
|
67
|
+
className = _ref.className,
|
|
68
|
+
_ref$selected = _ref.selected,
|
|
69
|
+
selected = _ref$selected === void 0 ? false : _ref$selected,
|
|
70
|
+
_ref$disabled = _ref.disabled,
|
|
71
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
72
|
+
_ref$size = _ref.size,
|
|
73
|
+
size = _ref$size === void 0 ? Size.Medium : _ref$size;
|
|
74
|
+
return /*#__PURE__*/_jsxs(OptionContainer, {
|
|
75
|
+
onClick: onClick,
|
|
76
|
+
isSelected: selected,
|
|
77
|
+
tabIndex: disabled || resultType ? -1 : 1,
|
|
78
|
+
onMouseDown: function onMouseDown(e) {
|
|
79
|
+
return e.preventDefault();
|
|
80
|
+
},
|
|
81
|
+
size: size,
|
|
82
|
+
className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
|
|
83
|
+
"data-testid": 'container',
|
|
84
|
+
children: [/*#__PURE__*/_jsx(ButtonContainer, {
|
|
85
|
+
"data-testid": 'btnContainer',
|
|
86
|
+
className: 'quiz-button-icon',
|
|
87
|
+
size: size,
|
|
88
|
+
children: resultType ? renderResultContent(resultType) : type === 'radio' ? /*#__PURE__*/_jsx(RadioButton, {
|
|
89
|
+
selected: selected,
|
|
90
|
+
disabled: disabled,
|
|
91
|
+
size: size,
|
|
92
|
+
tabIndexVal: -1,
|
|
93
|
+
select: function select() {},
|
|
94
|
+
id: id
|
|
95
|
+
}) : /*#__PURE__*/_jsx(Checkbox, {
|
|
96
|
+
selected: selected,
|
|
97
|
+
disabled: disabled,
|
|
98
|
+
size: size,
|
|
99
|
+
tabIndexVal: -1,
|
|
100
|
+
select: function select() {},
|
|
101
|
+
id: id
|
|
102
|
+
})
|
|
103
|
+
}), /*#__PURE__*/_jsx(TextContainer, {
|
|
104
|
+
"data-testid": 'txtContainer',
|
|
105
|
+
className: 'quiz-button-text',
|
|
106
|
+
size: size,
|
|
107
|
+
children: /*#__PURE__*/_jsx(TextWrapper, {
|
|
108
|
+
size: size,
|
|
109
|
+
children: text
|
|
110
|
+
})
|
|
111
|
+
})]
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
QuizButton.propTypes = {
|
|
116
|
+
resultType: _pt.oneOf(['correct', 'incorrect', 'partial']),
|
|
117
|
+
text: _pt.string.isRequired,
|
|
118
|
+
onClick: _pt.func,
|
|
119
|
+
id: _pt.string.isRequired,
|
|
120
|
+
selected: _pt.bool,
|
|
121
|
+
disabled: _pt.bool,
|
|
122
|
+
type: _pt.oneOf(['radio', 'checkbox']).isRequired,
|
|
123
|
+
className: _pt.string
|
|
124
|
+
};
|
|
125
|
+
export default QuizButton;
|
|
126
|
+
//# sourceMappingURL=QuizButton.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as QuizButton } from './QuizButton';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/QuizButton/index.ts"],"names":["default","QuizButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC","sourcesContent":["export { default as QuizButton } from './QuizButton';"],"file":"index.js"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,cAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './QuizButton';"],"file":"index.js"}
|