@laerdal/life-react-components 1.4.1-dev.19 → 1.4.1-dev.20.full
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/AccordionItem.cjs +7 -6
- package/dist/Accordion/AccordionItem.cjs.map +1 -1
- package/dist/Accordion/AccordionItem.d.ts +2 -0
- package/dist/Accordion/AccordionItem.js +8 -7
- package/dist/Accordion/AccordionItem.js.map +1 -1
- package/dist/Accordion/AccordionMenu.cjs +8 -2
- package/dist/Accordion/AccordionMenu.cjs.map +1 -1
- package/dist/Accordion/AccordionMenu.d.ts +2 -0
- package/dist/Accordion/AccordionMenu.js +8 -2
- package/dist/Accordion/AccordionMenu.js.map +1 -1
- package/dist/Accordion/styles.cjs +9 -16
- package/dist/Accordion/styles.cjs.map +1 -1
- package/dist/Accordion/styles.d.ts +5 -5
- package/dist/Accordion/styles.js +9 -10
- package/dist/Accordion/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -43,13 +43,10 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
43
43
|
if (e.key === 'Enter') onSelect(id);
|
|
44
44
|
},
|
|
45
45
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
46
|
-
isActive:
|
|
47
|
-
isDisabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
|
46
|
+
className: (isActive ? 'active' : '') + (disabled ? ' disabled' : ''),
|
|
48
47
|
children: [icon && /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
49
48
|
size: '24px'
|
|
50
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
51
|
-
className: "headerLabel",
|
|
52
|
-
color: isActive ? _.COLORS.neutral_800 : disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600,
|
|
49
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
53
50
|
children: title
|
|
54
51
|
}), isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronUp, {
|
|
55
52
|
color: _.COLORS.neutral_800,
|
|
@@ -59,6 +56,8 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
59
56
|
size: "20px"
|
|
60
57
|
})]
|
|
61
58
|
}), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ItemBodyContainer, {
|
|
59
|
+
padding: props.padding,
|
|
60
|
+
margin: props.margin,
|
|
62
61
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
|
|
63
62
|
children: props.children
|
|
64
63
|
})
|
|
@@ -69,7 +68,9 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
69
68
|
AccordionItem.propTypes = {
|
|
70
69
|
onSelect: _propTypes.default.func.isRequired,
|
|
71
70
|
isActive: _propTypes.default.bool.isRequired,
|
|
72
|
-
isLast: _propTypes.default.bool.isRequired
|
|
71
|
+
isLast: _propTypes.default.bool.isRequired,
|
|
72
|
+
padding: _propTypes.default.string,
|
|
73
|
+
margin: _propTypes.default.string
|
|
73
74
|
};
|
|
74
75
|
var _default = AccordionItem;
|
|
75
76
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600","padding","margin","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAUA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,sBAAC,8BAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,sBAAC,2BAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEU,iCAVlC;AAWqB,MAAA,SAAS,EAAE,CAACR,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAIO,eAAMC,YAAN,CAAmBR,IAAnB,EAA+C;AAACS,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOV;AAAP,QAbF,EAeID,QAAQ,gBACJ,qBAAC,kBAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEY,SAAOC,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,qBAAC,kBAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAED,SAAOE,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBId,QAAQ,iBACR,qBAAC,yBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACkB,OAAlC;AAA2C,MAAA,MAAM,EAAElB,KAAK,CAACmB,MAAzD;AAAA,6BACE,qBAAC,YAAD;AAAA,kBAAanB,KAAK,CAACoB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPElB,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAW,EAAAA,O;AACAC,EAAAA,M;;eAsCapB,a","sourcesContent":["import React from 'react';\nimport {COLORS, ComponentM, ComponentS} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n margin?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {id, onSelect, isActive, title, icon, disabled, isLast} = props;\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter')\n onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n {icon && React.cloneElement(icon as React.ReactElement, {size: '24px'})}\n <span>{title}</span>\n {\n isActive\n ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\n : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\n }\n </ItemHeaderContainer>\n {\n isActive &&\n <ItemBodyContainer padding={props.padding} margin={props.margin}>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.cjs"}
|
|
@@ -4,6 +4,8 @@ interface AccordionItemPropsInner extends AccordionItemProps {
|
|
|
4
4
|
onSelect: (id: string) => void;
|
|
5
5
|
isActive: boolean;
|
|
6
6
|
isLast: boolean;
|
|
7
|
+
padding?: string;
|
|
8
|
+
margin?: string;
|
|
7
9
|
}
|
|
8
10
|
declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
|
|
9
11
|
export default AccordionItem;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _pt from "prop-types";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { COLORS,
|
|
3
|
+
import { COLORS, ComponentS } from '..';
|
|
4
4
|
import { SystemIcons } from '../icons';
|
|
5
5
|
import { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';
|
|
6
6
|
import { defaultOnMouseDownHandler } from '../common';
|
|
@@ -29,13 +29,10 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
29
29
|
if (e.key === 'Enter') onSelect(id);
|
|
30
30
|
},
|
|
31
31
|
onMouseDown: defaultOnMouseDownHandler,
|
|
32
|
-
isActive:
|
|
33
|
-
isDisabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
|
32
|
+
className: (isActive ? 'active' : '') + (disabled ? ' disabled' : ''),
|
|
34
33
|
children: [icon && /*#__PURE__*/React.cloneElement(icon, {
|
|
35
34
|
size: '24px'
|
|
36
|
-
}), /*#__PURE__*/_jsx(
|
|
37
|
-
className: "headerLabel",
|
|
38
|
-
color: isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : COLORS.neutral_600,
|
|
35
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
39
36
|
children: title
|
|
40
37
|
}), isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {
|
|
41
38
|
color: COLORS.neutral_800,
|
|
@@ -45,6 +42,8 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
45
42
|
size: "20px"
|
|
46
43
|
})]
|
|
47
44
|
}), isActive && /*#__PURE__*/_jsx(ItemBodyContainer, {
|
|
45
|
+
padding: props.padding,
|
|
46
|
+
margin: props.margin,
|
|
48
47
|
children: /*#__PURE__*/_jsx(ComponentS, {
|
|
49
48
|
children: props.children
|
|
50
49
|
})
|
|
@@ -55,7 +54,9 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
55
54
|
AccordionItem.propTypes = {
|
|
56
55
|
onSelect: _pt.func.isRequired,
|
|
57
56
|
isActive: _pt.bool.isRequired,
|
|
58
|
-
isLast: _pt.bool.isRequired
|
|
57
|
+
isLast: _pt.bool.isRequired,
|
|
58
|
+
padding: _pt.string,
|
|
59
|
+
margin: _pt.string
|
|
59
60
|
};
|
|
60
61
|
export default AccordionItem;
|
|
61
62
|
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","cloneElement","size","neutral_800","neutral_600","padding","margin","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,EAA4BC,UAA5B,QAA6C,IAA7C;AACA,SAAQC,WAAR,QAA0B,UAA1B;AAEA,SAAQC,sBAAR,EAAgCC,iBAAhC,EAAmDC,mBAAnD,QAA6E,UAA7E;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAUA,IAAMC,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,MAAC,sBAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,MAAC,mBAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEH,yBAVlC;AAWqB,MAAA,SAAS,EAAE,CAACK,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAId,KAAK,CAACoB,YAAN,CAAmBN,IAAnB,EAA+C;AAACO,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOR;AAAP,QAbF,EAeID,QAAQ,gBACJ,KAAC,WAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEX,MAAM,CAACqB,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,KAAC,WAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAErB,MAAM,CAACsB,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBIX,QAAQ,iBACR,KAAC,iBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACe,OAAlC;AAA2C,MAAA,MAAM,EAAEf,KAAK,CAACgB,MAAzD;AAAA,6BACE,KAAC,UAAD;AAAA,kBAAahB,KAAK,CAACiB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPEf,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAQ,EAAAA,O;AACAC,EAAAA,M;;AAsCF,eAAejB,aAAf","sourcesContent":["import React from 'react';\nimport {COLORS, ComponentM, ComponentS} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n margin?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {id, onSelect, isActive, title, icon, disabled, isLast} = props;\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter')\n onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n {icon && React.cloneElement(icon as React.ReactElement, {size: '24px'})}\n <span>{title}</span>\n {\n isActive\n ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\n : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\n }\n </ItemHeaderContainer>\n {\n isActive &&\n <ItemBodyContainer padding={props.padding} margin={props.margin}>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
|
|
@@ -32,7 +32,9 @@ var AccordionMenu = function AccordionMenu(_ref) {
|
|
|
32
32
|
selectedItems = _ref.selectedItems,
|
|
33
33
|
setSelectedItems = _ref.setSelectedItems,
|
|
34
34
|
onSelect = _ref.onSelect,
|
|
35
|
-
multipleActive = _ref.multipleActive
|
|
35
|
+
multipleActive = _ref.multipleActive,
|
|
36
|
+
padding = _ref.padding,
|
|
37
|
+
margin = _ref.margin;
|
|
36
38
|
|
|
37
39
|
var _React$useState = React.useState([]),
|
|
38
40
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
@@ -75,6 +77,8 @@ var AccordionMenu = function AccordionMenu(_ref) {
|
|
|
75
77
|
}),
|
|
76
78
|
isLast: items.indexOf(item) === items.length - 1,
|
|
77
79
|
onSelect: onSelected,
|
|
80
|
+
padding: padding,
|
|
81
|
+
margin: margin,
|
|
78
82
|
children: item.children
|
|
79
83
|
}, item.id);
|
|
80
84
|
})
|
|
@@ -92,7 +96,9 @@ AccordionMenu.propTypes = {
|
|
|
92
96
|
selectedItems: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
93
97
|
setSelectedItems: _propTypes.default.func,
|
|
94
98
|
onSelect: _propTypes.default.func,
|
|
95
|
-
multipleActive: _propTypes.default.bool
|
|
99
|
+
multipleActive: _propTypes.default.bool,
|
|
100
|
+
padding: _propTypes.default.string,
|
|
101
|
+
margin: _propTypes.default.string
|
|
96
102
|
};
|
|
97
103
|
var _default = AccordionMenu;
|
|
98
104
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","margin","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAoBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDC,KAAK,CAACC,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOV,aAAa,GAAGA,aAAH,GAAmBQ,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOV,gBAAgB,GAAGA,gBAAH,GAAsBQ,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGV,cAAH,EAAmB;AACjB,UAAGa,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,4CAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFX,IAAAA,QAAQ,IAAIA,QAAQ,CAACW,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,qBAAC,4BAAD;AAAA,cACGd,KAAK,CAACqB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,qBAAC,sBAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,CANd;AAOE,QAAA,MAAM,EAAEd,KAAK,CAAC0B,OAAN,CAAcJ,IAAd,MAAwBtB,KAAK,CAAC2B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAER,OATX;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGgB,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEd,EAAAA,K;AAUAc,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA3B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;eAsEaP,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n margin?: string;\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> = ({\n items,\n selectedItems,\n setSelectedItems,\n onSelect,\n multipleActive,\n padding,\n margin,\n }: AccordionProps) => {\n\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n }\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find(x => x == id);\n if(multipleActive) {\n if(isActive)\n updateFunc(collection.filter(x => x != id));\n \n else \n updateFunc([...collection, id]);\n }\n else\n updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\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={!!getCollection().find(x => x == item.id)}\n isLast={items.indexOf(item) === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n margin={margin}>\n {item.children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.cjs"}
|
|
@@ -11,7 +11,9 @@ var AccordionMenu = function AccordionMenu(_ref) {
|
|
|
11
11
|
selectedItems = _ref.selectedItems,
|
|
12
12
|
setSelectedItems = _ref.setSelectedItems,
|
|
13
13
|
onSelect = _ref.onSelect,
|
|
14
|
-
multipleActive = _ref.multipleActive
|
|
14
|
+
multipleActive = _ref.multipleActive,
|
|
15
|
+
padding = _ref.padding,
|
|
16
|
+
margin = _ref.margin;
|
|
15
17
|
|
|
16
18
|
var _React$useState = React.useState([]),
|
|
17
19
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -54,6 +56,8 @@ var AccordionMenu = function AccordionMenu(_ref) {
|
|
|
54
56
|
}),
|
|
55
57
|
isLast: items.indexOf(item) === items.length - 1,
|
|
56
58
|
onSelect: onSelected,
|
|
59
|
+
padding: padding,
|
|
60
|
+
margin: margin,
|
|
57
61
|
children: item.children
|
|
58
62
|
}, item.id);
|
|
59
63
|
})
|
|
@@ -71,7 +75,9 @@ AccordionMenu.propTypes = {
|
|
|
71
75
|
selectedItems: _pt.arrayOf(_pt.string),
|
|
72
76
|
setSelectedItems: _pt.func,
|
|
73
77
|
onSelect: _pt.func,
|
|
74
|
-
multipleActive: _pt.bool
|
|
78
|
+
multipleActive: _pt.bool,
|
|
79
|
+
padding: _pt.string,
|
|
80
|
+
margin: _pt.string
|
|
75
81
|
};
|
|
76
82
|
export default AccordionMenu;
|
|
77
83
|
//# sourceMappingURL=AccordionMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;;;
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","margin","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;;;AAoBA,IAAMC,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDV,KAAK,CAACW,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOT,aAAa,GAAGA,aAAH,GAAmBO,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOT,gBAAgB,GAAGA,gBAAH,GAAsBO,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGT,cAAH,EAAmB;AACjB,UAAGY,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,8BAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFV,IAAAA,QAAQ,IAAIA,QAAQ,CAACU,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,KAAC,oBAAD;AAAA,cACGb,KAAK,CAACoB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,CANd;AAOE,QAAA,MAAM,EAAEb,KAAK,CAACyB,OAAN,CAAcJ,IAAd,MAAwBrB,KAAK,CAAC0B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAEP,OATX;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGe,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEb,EAAAA,K;AAUAa,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA1B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;AAsEF,eAAeP,aAAf","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n margin?: string;\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> = ({\n items,\n selectedItems,\n setSelectedItems,\n onSelect,\n multipleActive,\n padding,\n margin,\n }: AccordionProps) => {\n\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n }\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find(x => x == id);\n if(multipleActive) {\n if(isActive)\n updateFunc(collection.filter(x => x != id));\n \n else \n updateFunc([...collection, id]);\n }\n else\n updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\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={!!getCollection().find(x => x == item.id)}\n isLast={items.indexOf(item) === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n margin={margin}>\n {item.children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
@@ -11,17 +9,13 @@ exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.HeaderIconCont
|
|
|
11
9
|
|
|
12
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
11
|
|
|
14
|
-
var _styledComponents =
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
13
|
|
|
16
14
|
var _styles = require("../styles");
|
|
17
15
|
|
|
18
16
|
var _zIndexes = require("../styles/z-indexes");
|
|
19
17
|
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5
|
|
21
|
-
|
|
22
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
-
|
|
24
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
25
19
|
|
|
26
20
|
var AccordionMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n"])));
|
|
27
21
|
|
|
@@ -32,21 +26,20 @@ var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (
|
|
|
32
26
|
});
|
|
33
27
|
|
|
34
28
|
exports.AccordionItemContainer = AccordionItemContainer;
|
|
35
|
-
var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background: ", "!important;\n color: ", ";\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
36
29
|
|
|
37
|
-
var ItemHeaderContainer = _styledComponents.default.div(
|
|
38
|
-
return props.isDisabled ? 'not-allowed' : 'pointer';
|
|
39
|
-
}, function (props) {
|
|
40
|
-
return props.isDisabled ? disabledState : '';
|
|
41
|
-
}, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_500);
|
|
30
|
+
var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n background: ", ";\n cursor: pointer;\n \n ", "\n \n \n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n\n :focus:not(:active){\n z-index: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n box-shadow: none;\n }\n\n &.active{\n color: ", ";\n }\n \n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
42
31
|
|
|
43
32
|
exports.ItemHeaderContainer = ItemHeaderContainer;
|
|
44
33
|
|
|
45
|
-
var HeaderIconContainer = _styledComponents.default.div(
|
|
34
|
+
var HeaderIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: auto;\n"])));
|
|
46
35
|
|
|
47
36
|
exports.HeaderIconContainer = HeaderIconContainer;
|
|
48
37
|
|
|
49
|
-
var ItemBodyContainer = _styledComponents.default.div(
|
|
38
|
+
var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n margin: ", ";\n background: ", ";\n"])), function (props) {
|
|
39
|
+
return props.padding || '0px 16px';
|
|
40
|
+
}, function (props) {
|
|
41
|
+
return props.margin || '12px 0';
|
|
42
|
+
}, _styles.COLORS.white);
|
|
50
43
|
|
|
51
44
|
exports.ItemBodyContainer = ItemBodyContainer;
|
|
52
45
|
//# sourceMappingURL=styles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","neutral_20","ComponentTextStyle","Regular","neutral_600","Z_INDEXES","focus","primary_500","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AASA,IAAMC,mBAAmB,GAAGP,0BAAOC,GAAV,m0BAMhBI,eAAOG,UANS,EAS5B,+BAAkBC,2BAAmBC,OAArC,EAA8CL,eAAOM,WAArD,CAT4B,EAmBjBC,oBAAUC,KAnBO,EAoBDR,eAAOS,WApBN,EAoBkCT,eAAOS,WApBzC,EAwBdT,eAAOU,UAxBO,EAyBnBV,eAAOW,WAzBY,EA0BjBJ,oBAAUK,KA1BO,EA8BnBZ,eAAOa,WA9BY,EA+Bdb,eAAOc,WA/BO,EAgCjBP,oBAAUQ,MAhCO,EAqCnBf,eAAOgB,WArCY,EAyCdhB,eAAOiB,KAzCO,EA0CnBjB,eAAOkB,WA1CY,EA8CjBlB,eAAOkB,WA9CU,CAAzB;;;;AAmDA,IAAMC,mBAAmB,GAAGxB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMwB,iBAAiB,GAAGzB,0BAAOC,GAAV,gJACjB,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACuB,OAAN,IAAiB,UAArB;AAAA,CADY,EAElB,UAAAvB,KAAK;AAAA,SAAIA,KAAK,CAACwB,MAAN,IAAgB,QAApB;AAAA,CAFa,EAGdtB,eAAOiB,KAHO,CAAvB","sourcesContent":["import styled, {css} from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n background: ${COLORS.neutral_20};\n cursor: pointer;\n \n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n \n \n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n\n :focus:not(:active){\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n box-shadow: none;\n }\n\n &.active{\n color: ${COLORS.neutral_800};\n }\n \n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{padding?: string; margin?: string}>`\n padding: ${props => props.padding || '0px 16px'};\n margin: ${props => props.margin || '12px 0'};\n background: ${COLORS.white};\n`;\n"],"file":"styles.cjs"}
|
|
@@ -2,9 +2,9 @@ export declare const AccordionMenuWrapper: import("styled-components").StyledCom
|
|
|
2
2
|
export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {
|
|
3
3
|
displaySeparator: boolean;
|
|
4
4
|
}, never>;
|
|
5
|
-
export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
-
isDisabled: boolean;
|
|
7
|
-
isActive: boolean;
|
|
8
|
-
}, never>;
|
|
5
|
+
export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
6
|
export declare const HeaderIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
-
export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
|
|
7
|
+
export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
+
padding?: string | undefined;
|
|
9
|
+
margin?: string | undefined;
|
|
10
|
+
}, never>;
|
package/dist/Accordion/styles.js
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
4
4
|
|
|
5
|
-
import styled
|
|
6
|
-
import { COLORS } from '../styles';
|
|
5
|
+
import styled from 'styled-components';
|
|
6
|
+
import { COLORS, ComponentMStyling, ComponentTextStyle } from '../styles';
|
|
7
7
|
import { Z_INDEXES } from '../styles/z-indexes';
|
|
8
8
|
export var AccordionMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n"])));
|
|
9
9
|
export var AccordionItemContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ", ";\n"])), function (props) {
|
|
10
10
|
return props.displaySeparator ? "1px solid ".concat(COLORS.neutral_100) : '';
|
|
11
11
|
});
|
|
12
|
-
var
|
|
13
|
-
export var
|
|
14
|
-
|
|
12
|
+
export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n background: ", ";\n cursor: pointer;\n \n ", "\n \n \n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n\n :focus:not(:active){\n z-index: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n box-shadow: none;\n }\n\n &.active{\n color: ", ";\n }\n \n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), COLORS.neutral_20, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), Z_INDEXES.focus, COLORS.primary_500, COLORS.primary_500, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
|
|
13
|
+
export var HeaderIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-left: auto;\n"])));
|
|
14
|
+
export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: ", ";\n margin: ", ";\n background: ", ";\n"])), function (props) {
|
|
15
|
+
return props.padding || '0px 16px';
|
|
15
16
|
}, function (props) {
|
|
16
|
-
return props.
|
|
17
|
-
}, COLORS.
|
|
18
|
-
export var HeaderIconContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-left: auto;\n"])));
|
|
19
|
-
export var ItemBodyContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: 0px 16px;\n margin: 12px 0;\n background: ", ";\n"])), COLORS.white);
|
|
17
|
+
return props.margin || '12px 0';
|
|
18
|
+
}, COLORS.white);
|
|
20
19
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["styled","
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","neutral_20","Regular","neutral_600","focus","primary_500","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;AAAA,OAAOA,MAAP,MAA0B,mBAA1B;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,kBAAnC,QAA4D,WAA5D;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,OAAO,IAAMC,oBAAoB,GAAGL,MAAM,CAACM,GAAV,oKAA1B;AAOP,OAAO,IAAMC,sBAAsB,GAAGP,MAAM,CAACM,GAAV,0LAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCR,MAAM,CAACS,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;AASP,OAAO,IAAMC,mBAAmB,GAAGX,MAAM,CAACM,GAAV,qzBAMhBL,MAAM,CAACW,UANS,EAS5BV,iBAAiB,CAACC,kBAAkB,CAACU,OAApB,EAA6BZ,MAAM,CAACa,WAApC,CATW,EAmBjBV,SAAS,CAACW,KAnBO,EAoBDd,MAAM,CAACe,WApBN,EAoBkCf,MAAM,CAACe,WApBzC,EAwBdf,MAAM,CAACgB,UAxBO,EAyBnBhB,MAAM,CAACiB,WAzBY,EA0BjBd,SAAS,CAACe,KA1BO,EA8BnBlB,MAAM,CAACmB,WA9BY,EA+BdnB,MAAM,CAACoB,WA/BO,EAgCjBjB,SAAS,CAACkB,MAhCO,EAqCnBrB,MAAM,CAACsB,WArCY,EAyCdtB,MAAM,CAACuB,KAzCO,EA0CnBvB,MAAM,CAACwB,WA1CY,EA8CjBxB,MAAM,CAACwB,WA9CU,CAAzB;AAmDP,OAAO,IAAMC,mBAAmB,GAAG1B,MAAM,CAACM,GAAV,+FAAzB;AAIP,OAAO,IAAMqB,iBAAiB,GAAG3B,MAAM,CAACM,GAAV,kIACjB,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACoB,OAAN,IAAiB,UAArB;AAAA,CADY,EAElB,UAAApB,KAAK;AAAA,SAAIA,KAAK,CAACqB,MAAN,IAAgB,QAApB;AAAA,CAFa,EAGd5B,MAAM,CAACuB,KAHO,CAAvB","sourcesContent":["import styled, {css} from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n background: ${COLORS.neutral_20};\n cursor: pointer;\n \n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n \n \n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n\n :focus:not(:active){\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n box-shadow: none;\n }\n\n &.active{\n color: ${COLORS.neutral_800};\n }\n \n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{padding?: string; margin?: string}>`\n padding: ${props => props.padding || '0px 16px'};\n margin: ${props => props.margin || '12px 0'};\n background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
|