@laerdal/life-react-components 1.2.2-dev.15 → 1.2.2-dev.17
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/esm/Accordion/AccordionItem.js +46 -0
- package/dist/esm/Accordion/AccordionItem.js.map +1 -0
- package/dist/esm/Accordion/AccordionMenu.js +35 -0
- package/dist/esm/Accordion/AccordionMenu.js.map +1 -0
- package/dist/esm/Accordion/__tests__/AccordionMenu.test.js +53 -0
- package/dist/esm/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/esm/Accordion/index.js +4 -0
- package/dist/esm/Accordion/index.js.map +1 -0
- package/dist/esm/Accordion/styles.js +59 -0
- package/dist/esm/Accordion/styles.js.map +1 -0
- package/dist/esm/HyperLink/HyperLink.js +7 -15
- package/dist/esm/HyperLink/HyperLink.js.map +1 -1
- package/dist/esm/InputFields/Checkbox.js +27 -16
- package/dist/esm/InputFields/Checkbox.js.map +1 -1
- package/dist/esm/InputFields/RadioButton.js +21 -14
- package/dist/esm/InputFields/RadioButton.js.map +1 -1
- package/dist/esm/InputFields/SearchBar.js +13 -13
- package/dist/esm/InputFields/SearchBar.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/js/Accordion/AccordionItem.d.ts +9 -0
- package/dist/js/Accordion/AccordionItem.js +58 -0
- package/dist/js/Accordion/AccordionItem.js.map +1 -0
- package/dist/js/Accordion/AccordionMenu.d.ts +15 -0
- package/dist/js/Accordion/AccordionMenu.js +55 -0
- package/dist/js/Accordion/AccordionMenu.js.map +1 -0
- package/dist/js/Accordion/__tests__/AccordionMenu.test.js +101 -0
- package/dist/js/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/js/Accordion/index.d.ts +3 -0
- package/dist/js/Accordion/index.js +30 -0
- package/dist/js/Accordion/index.js.map +1 -0
- package/dist/js/Accordion/styles.d.ts +10 -0
- package/dist/js/Accordion/styles.js +50 -0
- package/dist/js/Accordion/styles.js.map +1 -0
- package/dist/js/HyperLink/HyperLink.js +10 -16
- package/dist/js/HyperLink/HyperLink.js.map +1 -1
- package/dist/js/InputFields/Checkbox.js +9 -5
- package/dist/js/InputFields/Checkbox.js.map +1 -1
- package/dist/js/InputFields/RadioButton.js +3 -3
- package/dist/js/InputFields/RadioButton.js.map +1 -1
- package/dist/js/InputFields/SearchBar.js +15 -15
- package/dist/js/InputFields/SearchBar.js.map +1 -1
- package/dist/js/index.d.ts +1 -0
- package/dist/js/index.js +13 -0
- package/dist/js/index.js.map +1 -1
- package/dist/umd/Accordion/AccordionItem.js +70 -0
- package/dist/umd/Accordion/AccordionItem.js.map +1 -0
- package/dist/umd/Accordion/AccordionMenu.js +112 -0
- package/dist/umd/Accordion/AccordionMenu.js.map +1 -0
- package/dist/umd/Accordion/__tests__/AccordionMenu.test.js +74 -0
- package/dist/umd/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/umd/Accordion/index.js +44 -0
- package/dist/umd/Accordion/index.js.map +1 -0
- package/dist/umd/Accordion/styles.js +85 -0
- package/dist/umd/Accordion/styles.js.map +1 -0
- package/dist/umd/HyperLink/HyperLink.js +7 -15
- package/dist/umd/HyperLink/HyperLink.js.map +1 -1
- package/dist/umd/InputFields/Checkbox.js +27 -16
- package/dist/umd/InputFields/Checkbox.js.map +1 -1
- package/dist/umd/InputFields/RadioButton.js +21 -14
- package/dist/umd/InputFields/RadioButton.js.map +1 -1
- package/dist/umd/InputFields/SearchBar.js +13 -13
- package/dist/umd/InputFields/SearchBar.js.map +1 -1
- package/dist/umd/index.js +13 -4
- package/dist/umd/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -31,7 +31,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
31
31
|
|
|
32
32
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
33
33
|
|
|
34
|
-
var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n
|
|
34
|
+
var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ", "\n cursor: pointer;\n\n color: ", ";\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: ", ";\n }\n }\n\n .checkbox-label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ", "\n .checkbox-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ", "\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ", "\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):focus {\n outline: none;\n\n .checkbox-icon {\n background-color: ", ";\n box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ", ";\n }\n }\n }\n\n &:not(.disabled):hover {\n .checkbox-icon {\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n }\n\n &:not(.disabled):active {\n .checkbox-icon {\n background: ", ";\n box-shadow: none;\n\n svg {\n color: ", ";\n }\n }\n }\n\n &.disabled {\n box-shadow: none;\n cursor: not-allowed;\n\n color: ", ";\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n\n .checkbox-icon{\n background-color: ", ";\n }\n\n .checkbox-icon svg {\n color: ", ";\n }\n }\n"])), function (props) {
|
|
35
35
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
36
36
|
}, _styles.COLORS.black, function (props) {
|
|
37
37
|
return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
|
|
@@ -49,7 +49,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
49
49
|
disabled = _ref.disabled,
|
|
50
50
|
margin = _ref.margin,
|
|
51
51
|
size = _ref.size,
|
|
52
|
-
semiSelected = _ref.semiSelected
|
|
52
|
+
semiSelected = _ref.semiSelected,
|
|
53
|
+
children = _ref.children;
|
|
53
54
|
|
|
54
55
|
var onKeyPress = function onKeyPress(e) {
|
|
55
56
|
if (e.keyCode === 13 && !disabled) {
|
|
@@ -82,7 +83,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
82
83
|
}
|
|
83
84
|
}, /*#__PURE__*/React.createElement("div", {
|
|
84
85
|
id: id,
|
|
85
|
-
className: 'icon'
|
|
86
|
+
className: 'checkbox-icon'
|
|
86
87
|
}, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
|
|
87
88
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
88
89
|
size: "24px"
|
|
@@ -93,9 +94,12 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
93
94
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
94
95
|
size: "24px"
|
|
95
96
|
})), label && /*#__PURE__*/React.createElement("label", {
|
|
96
|
-
className: 'label',
|
|
97
|
+
className: 'checkbox-label',
|
|
97
98
|
htmlFor: id
|
|
98
|
-
}, label)
|
|
99
|
+
}, label), !label && /*#__PURE__*/React.createElement("label", {
|
|
100
|
+
className: 'checkbox-label',
|
|
101
|
+
htmlFor: id
|
|
102
|
+
}, children));
|
|
99
103
|
});
|
|
100
104
|
Checkbox.propTypes = {
|
|
101
105
|
id: _propTypes.default.string.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","onKeyPress","e","keyCode","handleClick","Size","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):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):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):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 &.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}\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 }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled) {\n select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled) {\n return;\n }\n 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' : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 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"}
|
|
@@ -31,7 +31,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
31
31
|
|
|
32
32
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
33
33
|
|
|
34
|
-
var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n
|
|
34
|
+
var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ", "\n cursor: pointer;\n \n color: ", ";\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: ", ";\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 ", "\n }\n }\n\n &.small {\n ", "\n .radio-button-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ", "\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ", "\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: ", ";\n box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ", ";\n }\n }\n }\n\n &:not(.disabled):hover {\n .radio-button-icon {\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n }\n\n &:not(.disabled):active {\n .radio-button-icon {\n background: ", ";\n box-shadow: none;\n\n svg {\n color: ", ";\n }\n }\n }\n\n &.disabled {\n box-shadow: none;\n cursor: not-allowed;\n\n color: ", ";\n\n .radio-button-icon,\n .radio-button-label {\n pointer-events: none;\n }\n\n .radio-button-icon{\n background-color: ", ";\n }\n \n .radio-button-icon svg {\n color: ", ";\n }\n }\n"])), function (props) {
|
|
35
35
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
36
36
|
}, _styles.COLORS.black, function (props) {
|
|
37
37
|
return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
|
|
@@ -75,7 +75,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
75
75
|
showWarning: showWarning,
|
|
76
76
|
selected: selected
|
|
77
77
|
}, /*#__PURE__*/React.createElement("div", {
|
|
78
|
-
className: 'icon',
|
|
78
|
+
className: 'radio-button-icon',
|
|
79
79
|
id: id
|
|
80
80
|
}, selected && /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOn, {
|
|
81
81
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
@@ -84,7 +84,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
84
84
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
85
85
|
size: "24px"
|
|
86
86
|
})), /*#__PURE__*/React.createElement("div", {
|
|
87
|
-
className: 'label'
|
|
87
|
+
className: 'radio-button-label'
|
|
88
88
|
}, label && /*#__PURE__*/React.createElement("label", {
|
|
89
89
|
htmlFor: id
|
|
90
90
|
}, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","onKeyPress","e","keyCode","Size","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,iBAAiB,GAAGC,0BAAOC,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","onKeyPress","e","keyCode","Size","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}\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}: 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 : 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"}
|
|
@@ -85,7 +85,20 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
85
85
|
disabled: disabled,
|
|
86
86
|
tabbedHere: tabbedHere,
|
|
87
87
|
validationMessage: validationMessage
|
|
88
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
88
|
+
}, /*#__PURE__*/_react.default.createElement(_SearchBarInput.default, {
|
|
89
|
+
placeholder: disabled ? '' : placeholder,
|
|
90
|
+
ref: inputRef,
|
|
91
|
+
id: id,
|
|
92
|
+
size: size,
|
|
93
|
+
disabled: disabled,
|
|
94
|
+
setTabbedHere: setTabbedHere,
|
|
95
|
+
setSearchTerm: function setSearchTerm(term) {
|
|
96
|
+
return _setSearchTerm(term);
|
|
97
|
+
},
|
|
98
|
+
searchTerm: searchTerm,
|
|
99
|
+
onKeyDown: onKeyDown,
|
|
100
|
+
enterSearch: enterSearch
|
|
101
|
+
}), /*#__PURE__*/_react.default.createElement(_styling.SearchIconWrapper, {
|
|
89
102
|
className: size ? size : '',
|
|
90
103
|
"aria-label": performSearchLabel
|
|
91
104
|
}, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
|
|
@@ -99,20 +112,7 @@ var SearchBar = function SearchBar(_ref) {
|
|
|
99
112
|
}
|
|
100
113
|
}, /*#__PURE__*/_react.default.createElement(_SystemIcons.Search, {
|
|
101
114
|
size: "24px"
|
|
102
|
-
}))), /*#__PURE__*/_react.default.createElement(
|
|
103
|
-
placeholder: disabled ? '' : placeholder,
|
|
104
|
-
ref: inputRef,
|
|
105
|
-
id: id,
|
|
106
|
-
size: size,
|
|
107
|
-
disabled: disabled,
|
|
108
|
-
setTabbedHere: setTabbedHere,
|
|
109
|
-
setSearchTerm: function setSearchTerm(term) {
|
|
110
|
-
return _setSearchTerm(term);
|
|
111
|
-
},
|
|
112
|
-
searchTerm: searchTerm,
|
|
113
|
-
onKeyDown: onKeyDown,
|
|
114
|
-
enterSearch: enterSearch
|
|
115
|
-
}), /*#__PURE__*/_react.default.createElement(ClearIconWrapper, {
|
|
115
|
+
}))), /*#__PURE__*/_react.default.createElement(ClearIconWrapper, {
|
|
116
116
|
className: (size ? size : '').concat(!searchTerm ? ' hidden' : '')
|
|
117
117
|
}, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
|
|
118
118
|
id: "".concat(id, "_Clear"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","inputRef","React","useRef","useState","tabbedHere","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","COLORS","warning_400"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV,sKAAtB;;AASA,IAAMC,SAAiD,GAAG,SAApDA,SAAoD,OAapD;AAAA,MAZJC,EAYI,QAZJA,EAYI;AAAA,MAXJC,UAWI,QAXJA,UAWI;AAAA,MAVJC,cAUI,QAVJA,aAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,WAOI,QAPJA,WAOI;AAAA,MANJC,kBAMI,QANJA,kBAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,iBAII,QAJJA,iBAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,yBADJC,MACI;AAAA,MADJA,MACI,4BADK,OACL;;AACJ,MAAMC,QAAQ,GAAGC,eAAMC,MAAN,CAAkB,IAAlB,CAAjB;;AACA,wBAAoCD,eAAME,QAAN,CAAwB,KAAxB,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AASA,sBACE,yEACE,6BAAC,qBAAD;AACE,IAAA,QAAQ,EAAEf,QADZ;AAEE,IAAA,MAAM,EAAEI;AAFV,kBAGE,6BAAC,oBAAD;AAAa,IAAA,EAAE,YAAKX,EAAL,UAAf;AAA+B,IAAA,IAAI,EAAEU,IAAI,IAAI,EAA7C;AAAiD,IAAA,UAAU,EAAET,UAA7D;AAAyE,IAAA,QAAQ,EAAEM,QAAnF;AAA6F,IAAA,UAAU,EAAES,UAAzG;AAAqH,IAAA,iBAAiB,EAAER;AAAxI,kBACE,6BAAC,
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","inputRef","React","useRef","useState","tabbedHere","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","COLORS","warning_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport { Size } from '../types';\nimport styled from 'styled-components';\n\ntype SeachBarProps = {\n id: string;\n searchTerm?: string;\n setSearchTerm: (term: string) => void;\n enterSearch: (e: any) => void;\n removeSearch: (e: any) => void;\n placeholder?: string;\n performSearchLabel?: string;\n disabled?: boolean;\n validationMessage?: string;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst ClearIconWrapper = styled.div`\n display: flex;\n align-items: center;\n \n &.hidden{\n display: none !important;\n }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n id,\n searchTerm,\n setSearchTerm,\n enterSearch,\n removeSearch,\n placeholder,\n performSearchLabel,\n disabled,\n validationMessage,\n onKeyDown,\n size,\n margin = '4px 0',\n}) => {\n const inputRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n return (\n <>\n <InputWrapper\n disabled={disabled}\n margin={margin}>\n <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n <SearchBarInput\n placeholder={disabled ? '' : placeholder}\n ref={inputRef}\n id={id}\n size={size}\n disabled={disabled}\n setTabbedHere={setTabbedHere}\n setSearchTerm={(term: string) => setSearchTerm(term)}\n searchTerm={searchTerm}\n onKeyDown={onKeyDown}\n enterSearch={enterSearch}\n />\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n <IconButton id={`${id}_Search`}\n variant=\"secondary\"\n shape=\"circular\"\n action={enterSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n <SearchIcon size=\"24px\"/>\n </IconButton>\n </SearchIconWrapper>\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n <IconButton id={`${id}_Clear`}\n variant=\"secondary\"\n shape=\"circular\"\n action={removeSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n <ClearIcon size=\"24px\"/>\n </IconButton>\n </ClearIconWrapper>\n </SearchField>\n </InputWrapper>\n {validationMessage && (\n <WarningMessage className={size || ''}>\n <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n <span>{validationMessage}</span>\n </WarningMessage>\n )}\n </>\n );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}
|
package/dist/js/index.d.ts
CHANGED
package/dist/js/index.js
CHANGED
|
@@ -367,4 +367,17 @@ Object.keys(_NotificationDot).forEach(function (key) {
|
|
|
367
367
|
}
|
|
368
368
|
});
|
|
369
369
|
});
|
|
370
|
+
|
|
371
|
+
var _Accordion = require("./Accordion");
|
|
372
|
+
|
|
373
|
+
Object.keys(_Accordion).forEach(function (key) {
|
|
374
|
+
if (key === "default" || key === "__esModule") return;
|
|
375
|
+
if (key in exports && exports[key] === _Accordion[key]) return;
|
|
376
|
+
Object.defineProperty(exports, key, {
|
|
377
|
+
enumerable: true,
|
|
378
|
+
get: function get() {
|
|
379
|
+
return _Accordion[key];
|
|
380
|
+
}
|
|
381
|
+
});
|
|
382
|
+
});
|
|
370
383
|
//# sourceMappingURL=index.js.map
|
package/dist/js/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\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'
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\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';\n"],"file":"index.js"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["exports", "prop-types", "react", "..", "../icons", "./styles"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require(".."), require("../icons"), require("./styles"));
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global._, global.icons, global.styles);
|
|
11
|
+
global.undefined = mod.exports;
|
|
12
|
+
}
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _, _icons, _styles) {
|
|
14
|
+
"use strict";
|
|
15
|
+
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
21
|
+
|
|
22
|
+
var _react2 = _interopRequireDefault(_react);
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) {
|
|
25
|
+
return obj && obj.__esModule ? obj : {
|
|
26
|
+
default: obj
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const AccordionItem = props => {
|
|
31
|
+
const {
|
|
32
|
+
id,
|
|
33
|
+
onSelect,
|
|
34
|
+
isActive,
|
|
35
|
+
title,
|
|
36
|
+
icon,
|
|
37
|
+
disabled,
|
|
38
|
+
isLast
|
|
39
|
+
} = props;
|
|
40
|
+
return /*#__PURE__*/_react2.default.createElement(_styles.AccordionItemContainer, {
|
|
41
|
+
id: id,
|
|
42
|
+
displaySeparator: !isActive && !isLast,
|
|
43
|
+
isDisabled: disabled ?? false
|
|
44
|
+
}, /*#__PURE__*/_react2.default.createElement(_styles.ItemHeaderContainer, {
|
|
45
|
+
tabIndex: !disabled ? 0 : -1,
|
|
46
|
+
onClick: () => {
|
|
47
|
+
if (!disabled) {
|
|
48
|
+
onSelect(id);
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
isDisabled: disabled ?? false
|
|
52
|
+
}, icon && /*#__PURE__*/_react2.default.cloneElement(icon, {
|
|
53
|
+
size: '24px'
|
|
54
|
+
}), /*#__PURE__*/_react2.default.createElement(_.ComponentM, {
|
|
55
|
+
color: disabled ? _.COLORS.neutral_300 : undefined
|
|
56
|
+
}, title), isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronUp, {
|
|
57
|
+
size: "24px"
|
|
58
|
+
}) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronDown, {
|
|
59
|
+
size: "24px"
|
|
60
|
+
})), isActive && /*#__PURE__*/_react2.default.createElement(_styles.ItemBodyContainer, null, /*#__PURE__*/_react2.default.createElement(_.ComponentS, null, props.children)));
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
AccordionItem.propTypes = {
|
|
64
|
+
onSelect: _propTypes2.default.func.isRequired,
|
|
65
|
+
isActive: _propTypes2.default.bool.isRequired,
|
|
66
|
+
isLast: _propTypes2.default.bool.isRequired
|
|
67
|
+
};
|
|
68
|
+
exports.default = AccordionItem;
|
|
69
|
+
});
|
|
70
|
+
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["onSelect","isActive","isLast","AccordionItem","props","disabled","icon","size","COLORS","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,QAAMG,aAA+D,GAAIC,KAAD,IAAoC;AAC1G,UAAM;AAAA,MAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MAAA,QAAA;AAAA,MAAA,KAAA;AAAA,MAAA,IAAA;AAAA,MAAA,QAAA;AAAiDF,MAAAA;AAAjD,QAAN,KAAA;AACA,WAAA,aACE,gBAAA,aAAA,CAAA,8BAAA,EAAA;AAAwB,MAAA,EAAE,EAA1B,EAAA;AAAgC,MAAA,gBAAgB,EAAE,CAAA,QAAA,IAAa,CAA/D,MAAA;AAAwE,MAAA,UAAU,EAAEG,QAAQ,IAAI;AAAhG,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,2BAAA,EAAA;AACE,MAAA,QAAQ,EAAE,CAAA,QAAA,GAAA,CAAA,GAAgB,CAD5B,CAAA;AAEE,MAAA,OAAO,EAAE,MAAM;AACb,YAAI,CAAJ,QAAA,EAAe;AACbL,UAAAA,QAAQ,CAARA,EAAQ,CAARA;AACD;AALL,OAAA;AAOE,MAAA,UAAU,EAAEK,QAAQ,IAAI;AAP1B,KAAA,EAQGC,IAAI,IAAA,aAAI,gBAAA,YAAA,CAAA,IAAA,EAA+C;AAAEC,MAAAA,IAAI,EAAE;AAAR,KAA/C,CARX,EAAA,aASE,gBAAA,aAAA,CAAA,YAAA,EAAA;AAAY,MAAA,KAAK,EAAEF,QAAQ,GAAGG,SAAH,WAAA,GAAwBC;AAAnD,KAAA,EATF,KASE,CATF,EAUGR,QAAQ,GAAA,aAAG,gBAAA,aAAA,CAAA,mBAAA,SAAA,EAAA;AAAuB,MAAA,IAAI,EAAC;AAA5B,KAAA,CAAH,GAAA,aAA2C,gBAAA,aAAA,CAAA,mBAAA,WAAA,EAAA;AAAyB,MAAA,IAAI,EAAC;AAA9B,KAAA,CAVtD,CADF,EAaGA,QAAQ,IAAA,aACP,gBAAA,aAAA,CAAA,yBAAA,EAAA,IAAA,EAAA,aACE,gBAAA,aAAA,CAAA,YAAA,EAAA,IAAA,EAAaG,KAAK,CAhB1B,QAgBQ,CADF,CAdJ,CADF;AAFF,GAAA;;;AALEJ,IAAAA,Q;AACAC,IAAAA,Q;AACAC,IAAAA,M;;oBA4BF,a","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast} isDisabled={disabled ?? false}>\n <ItemHeaderContainer\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n isDisabled={disabled ?? false}>\n {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n <ComponentM color={disabled ? COLORS.neutral_300 : undefined}>{title}</ComponentM>\n {isActive ? <SystemIcons.ChevronUp size=\"24px\" /> : <SystemIcons.ChevronDown size=\"24px\" />}\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n )}\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["exports", "prop-types", "react", "./AccordionItem", "./styles"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("./AccordionItem"), require("./styles"));
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.AccordionItem, global.styles);
|
|
11
|
+
global.undefined = mod.exports;
|
|
12
|
+
}
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _AccordionItem, _styles) {
|
|
14
|
+
"use strict";
|
|
15
|
+
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
21
|
+
|
|
22
|
+
var React = _interopRequireWildcard(_react);
|
|
23
|
+
|
|
24
|
+
var _AccordionItem2 = _interopRequireDefault(_AccordionItem);
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
27
|
+
if (typeof WeakMap !== "function") return null;
|
|
28
|
+
var cacheBabelInterop = new WeakMap();
|
|
29
|
+
var cacheNodeInterop = new WeakMap();
|
|
30
|
+
return (_getRequireWildcardCache = function (nodeInterop) {
|
|
31
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
32
|
+
})(nodeInterop);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function _interopRequireWildcard(obj, nodeInterop) {
|
|
36
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
37
|
+
return obj;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
41
|
+
return {
|
|
42
|
+
default: obj
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
47
|
+
|
|
48
|
+
if (cache && cache.has(obj)) {
|
|
49
|
+
return cache.get(obj);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
var newObj = {};
|
|
53
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
54
|
+
|
|
55
|
+
for (var key in obj) {
|
|
56
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
57
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
58
|
+
|
|
59
|
+
if (desc && (desc.get || desc.set)) {
|
|
60
|
+
Object.defineProperty(newObj, key, desc);
|
|
61
|
+
} else {
|
|
62
|
+
newObj[key] = obj[key];
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
newObj.default = obj;
|
|
68
|
+
|
|
69
|
+
if (cache) {
|
|
70
|
+
cache.set(obj, newObj);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return newObj;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function _interopRequireDefault(obj) {
|
|
77
|
+
return obj && obj.__esModule ? obj : {
|
|
78
|
+
default: obj
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const AccordionMenu = ({
|
|
83
|
+
items,
|
|
84
|
+
selectedItemId,
|
|
85
|
+
onSelect
|
|
86
|
+
}) => {
|
|
87
|
+
return /*#__PURE__*/React.createElement(_styles.AccordionMenuWrapper, null, items.map(item => /*#__PURE__*/React.createElement(_AccordionItem2.default, {
|
|
88
|
+
key: item.id,
|
|
89
|
+
disabled: item.disabled,
|
|
90
|
+
id: item.id,
|
|
91
|
+
title: item.title,
|
|
92
|
+
icon: item.icon,
|
|
93
|
+
isActive: item.id === selectedItemId,
|
|
94
|
+
isLast: items.indexOf(item) === items.length - 1,
|
|
95
|
+
onSelect: onSelect
|
|
96
|
+
}, item.children)));
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
AccordionMenu.propTypes = {
|
|
100
|
+
items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
|
|
101
|
+
id: _propTypes2.default.string.isRequired,
|
|
102
|
+
disabled: _propTypes2.default.bool,
|
|
103
|
+
title: _propTypes2.default.string.isRequired,
|
|
104
|
+
icon: _propTypes2.default.node,
|
|
105
|
+
children: _propTypes2.default.node.isRequired
|
|
106
|
+
})).isRequired,
|
|
107
|
+
selectedItemId: _propTypes2.default.string,
|
|
108
|
+
onSelect: _propTypes2.default.func.isRequired
|
|
109
|
+
};
|
|
110
|
+
exports.default = AccordionMenu;
|
|
111
|
+
});
|
|
112
|
+
//# sourceMappingURL=AccordionMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/AccordionMenu.tsx"],"names":["items","selectedItemId","onSelect","id","disabled","title","icon","children","AccordionMenu","item"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,QAAMQ,aAAsD,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,cAAA;AAAyBN,IAAAA;AAAzB,GAAD,KAAyD;AACtH,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,4BAAA,EAAA,IAAA,EACG,KAAK,CAAL,GAAA,CAAWO,IAAD,IAAA,aACT,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AACE,MAAA,GAAG,EAAEA,IAAI,CADX,EAAA;AAEE,MAAA,QAAQ,EAAEA,IAAI,CAFhB,QAAA;AAGE,MAAA,EAAE,EAAEA,IAAI,CAHV,EAAA;AAIE,MAAA,KAAK,EAAEA,IAAI,CAJb,KAAA;AAKE,MAAA,IAAI,EAAEA,IAAI,CALZ,IAAA;AAME,MAAA,QAAQ,EAAEA,IAAI,CAAJA,EAAAA,KANZ,cAAA;AAOE,MAAA,MAAM,EAAET,KAAK,CAALA,OAAAA,CAAAA,IAAAA,MAAwBA,KAAK,CAALA,MAAAA,GAPlC,CAAA;AAQE,MAAA,QAAQ,EAAEE;AARZ,KAAA,EASGO,IAAI,CAZb,QAGM,CADD,CADH,CADF;AADF,GAAA;;;AAbET,IAAAA,K;AAMAG,MAAAA,E;AACAC,MAAAA,Q;AACAC,MAAAA,K;AACAC,MAAAA,I;AACAC,MAAAA,Q;;AATAN,IAAAA,c;AACAC,IAAAA,Q;;oBA+BF,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n items: AccordionItemProps[];\n selectedItemId?: string;\n onSelect: (id: string) => void;\n}\n\nexport interface AccordionItemProps {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItemId, onSelect }: AccordionProps) => {\n return (\n <AccordionMenuWrapper>\n {items.map((item) => (\n <AccordionItem\n key={item.id}\n disabled={item.disabled}\n id={item.id}\n title={item.title}\n icon={item.icon}\n isActive={item.id === selectedItemId}\n isLast={items.indexOf(item) === items.length - 1}\n onSelect={onSelect}>\n {item.children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["react", "@testing-library/react", "../../styles", "../AccordionMenu", "jest-styled-components"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(require("react"), require("@testing-library/react"), require("../../styles"), require("../AccordionMenu"), require("jest-styled-components"));
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(global.react, global.react, global.styles, global.AccordionMenu, global.jestStyledComponents);
|
|
11
|
+
global.undefined = mod.exports;
|
|
12
|
+
}
|
|
13
|
+
})(this, function (_react, _react3, _styles, _AccordionMenu) {
|
|
14
|
+
"use strict";
|
|
15
|
+
|
|
16
|
+
var _react2 = _interopRequireDefault(_react);
|
|
17
|
+
|
|
18
|
+
var _AccordionMenu2 = _interopRequireDefault(_AccordionMenu);
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) {
|
|
21
|
+
return obj && obj.__esModule ? obj : {
|
|
22
|
+
default: obj
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const accordionItems = [{
|
|
27
|
+
id: 'test1_id',
|
|
28
|
+
title: 'Item label with text 1',
|
|
29
|
+
children: /*#__PURE__*/_react2.default.createElement("div", null, "content test1")
|
|
30
|
+
}, {
|
|
31
|
+
id: 'test2_id',
|
|
32
|
+
title: 'Item label with text 2',
|
|
33
|
+
children: /*#__PURE__*/_react2.default.createElement("div", null, "content test2")
|
|
34
|
+
}];
|
|
35
|
+
describe('<AccordionMenu />', () => {
|
|
36
|
+
it('Check correct text placed on labels', async () => {
|
|
37
|
+
const {
|
|
38
|
+
queryByText
|
|
39
|
+
} = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
|
|
40
|
+
items: accordionItems,
|
|
41
|
+
onSelect: () => {}
|
|
42
|
+
}));
|
|
43
|
+
expect(queryByText('Item label with text 1')).toBeDefined();
|
|
44
|
+
expect(queryByText('Item label with text 2')).toBeDefined();
|
|
45
|
+
expect(queryByText('content test1')).toBeNull();
|
|
46
|
+
});
|
|
47
|
+
it('Check item label element color and label', async () => {
|
|
48
|
+
const {
|
|
49
|
+
container
|
|
50
|
+
} = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
|
|
51
|
+
items: accordionItems,
|
|
52
|
+
onSelect: () => {}
|
|
53
|
+
}));
|
|
54
|
+
const headerItem = container.querySelector('#test2_id');
|
|
55
|
+
expect(headerItem).toBeDefined();
|
|
56
|
+
expect(headerItem?.children[0]).toHaveStyleRule('background', _styles.COLORS.neutral_20);
|
|
57
|
+
expect(headerItem?.textContent).toContain('Item label with text 2');
|
|
58
|
+
});
|
|
59
|
+
it('Check expanded item text', async () => {
|
|
60
|
+
const {
|
|
61
|
+
container
|
|
62
|
+
} = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
|
|
63
|
+
items: accordionItems,
|
|
64
|
+
onSelect: () => {},
|
|
65
|
+
selectedItemId: 'test1_id'
|
|
66
|
+
}));
|
|
67
|
+
const headerItem = container.querySelector('#test1_id'); //check item expanded
|
|
68
|
+
|
|
69
|
+
expect(headerItem?.children[1]).toBeDefined();
|
|
70
|
+
expect(headerItem?.children[1]?.textContent).toContain('content test1');
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
//# sourceMappingURL=AccordionMenu.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["accordionItems","id","title","children","describe","it","queryByText","render","expect","container","headerItem","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,cAAc,GAAG,CACrB;AACEC,IAAAA,EAAE,EADJ,UAAA;AAEEC,IAAAA,KAAK,EAFP,wBAAA;AAGEC,IAAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,eAAA;AAHZ,GADqB,EAMrB;AACEF,IAAAA,EAAE,EADJ,UAAA;AAEEC,IAAAA,KAAK,EAFP,wBAAA;AAGEC,IAAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,eAAA;AAHZ,GANqB,CAAvB;AAaAC,EAAAA,QAAQ,CAAA,mBAAA,EAAsB,MAAM;AAClCC,IAAAA,EAAE,CAAA,qCAAA,EAAwC,YAAY;AACpD,YAAM;AAAEC,QAAAA;AAAF,UAAkBC,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,OAAA,CAAPA,CAAxB;AACAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,eAAkB,CAAZ,CAANA,CAAAA,QAAAA;AAJFH,KAAE,CAAFA;AAOAA,IAAAA,EAAE,CAAA,0CAAA,EAA6C,YAAY;AACzD,YAAM;AAAEI,QAAAA;AAAF,UAAgBF,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,OAAA,CAAPA,CAAtB;AACA,YAAMG,UAAU,GAAGD,SAAS,CAATA,aAAAA,CAAnB,WAAmBA,CAAnB;AACAD,MAAAA,MAAM,CAANA,UAAM,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAPF,CAAOE,CAAD,CAANF,CAAAA,eAAAA,CAAAA,YAAAA,EAA8DG,eAA9DH,UAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAjBF,WAAM,CAANA,CAAAA,SAAAA,CAAAA,wBAAAA;AALFH,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,0BAAA,EAA6B,YAAY;AACzC,YAAM;AAAEI,QAAAA;AAAF,UAAgBF,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAtD,CAAA;AAA0D,QAAA,cAAc,EAAE;AAA1E,OAAA,CAAPA,CAAtB;AACA,YAAMG,UAAU,GAAGD,SAAS,CAATA,aAAAA,CAFsB,WAEtBA,CAAnB,CAFyC,CAGzC;;AACAD,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAPF,CAAOE,CAAD,CAANF,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAAA,CAAAA,GAAPF,WAAM,CAANA,CAAAA,SAAAA,CAAAA,eAAAA;AALFH,KAAE,CAAFA;AAhBFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport AccordionMenu from '../AccordionMenu';\n\nconst accordionItems = [\n {\n id: 'test1_id',\n title: 'Item label with text 1',\n children: <div>content test1</div>,\n },\n {\n id: 'test2_id',\n title: 'Item label with text 2',\n children: <div>content test2</div>,\n },\n];\n\ndescribe('<AccordionMenu />', () => {\n it('Check correct text placed on labels', async () => {\n const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n expect(queryByText('Item label with text 1')).toBeDefined();\n expect(queryByText('Item label with text 2')).toBeDefined();\n expect(queryByText('content test1')).toBeNull();\n });\n\n it('Check item label element color and label', async () => {\n const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n const headerItem = container.querySelector('#test2_id');\n expect(headerItem).toBeDefined();\n expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);\n expect(headerItem?.textContent).toContain('Item label with text 2');\n });\n\n it('Check expanded item text', async () => {\n const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItemId={'test1_id'}></AccordionMenu>);\n const headerItem = container.querySelector('#test1_id');\n //check item expanded\n expect(headerItem?.children[1]).toBeDefined();\n expect(headerItem?.children[1]?.textContent).toContain('content test1');\n });\n});\n"],"file":"AccordionMenu.test.js"}
|