@laerdal/life-react-components 1.4.1-dev.3 → 1.4.1-dev.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/esm/Accordion/ContentAccordion.js +81 -102
  2. package/dist/esm/Accordion/ContentAccordion.js.map +1 -1
  3. package/dist/esm/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} +28 -28
  4. package/dist/esm/Accordion/__tests__/ContentAccordion.test.js.map +1 -0
  5. package/dist/js/Accordion/ContentAccordion.d.ts +10 -1
  6. package/dist/js/Accordion/ContentAccordion.js +42 -21
  7. package/dist/js/Accordion/ContentAccordion.js.map +1 -1
  8. package/dist/js/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} +34 -28
  9. package/dist/js/Accordion/__tests__/ContentAccordion.test.js.map +1 -0
  10. package/dist/umd/Accordion/ContentAccordion.js +82 -103
  11. package/dist/umd/Accordion/ContentAccordion.js.map +1 -1
  12. package/dist/umd/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} +27 -27
  13. package/dist/umd/Accordion/__tests__/ContentAccordion.test.js.map +1 -0
  14. package/package.json +1 -1
  15. package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
  16. package/dist/js/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
  17. package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
package/dist/esm/Accordion/ContentAccordion.js CHANGED
@@ -6,86 +6,79 @@ import { SystemIcons } from '../icons';
6
6
  import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
7
7
  import { COLORS } from '../styles';
8
8
  import { Z_INDEXES } from '../styles/z-indexes';
9
- const ContentAccordionWrapper = styled.div`
10
- width: 100%;
11
- position: relative;
12
-
13
-
14
- .content-accordion-item {
15
- display: flex;
16
- flex-direction: column;
17
- border-top: 1px solid ${COLORS.neutral_100};
18
-
19
- .item-header {
20
- display: flex;
21
- align-items: center;
22
- box-sizing: border-box;
23
- min-height: 48px;
24
- color: ${COLORS.neutral_600};
25
- cursor: pointer;
26
-
27
- &:hover {
28
- color: ${COLORS.primary_700};
29
- background-color: ${COLORS.primary_20};
30
- z-index: ${Z_INDEXES.hover};
31
- }
32
-
33
- &:focus {
34
- box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
35
- background-color: ${COLORS.white};
36
- z-index: ${Z_INDEXES.focus};
37
- outline: none;
38
- }
39
-
40
- &:active {
41
- color: ${COLORS.primary_800};
42
- background-color: ${COLORS.primary_100};
43
- box-shadow: none;
44
- z-index: ${Z_INDEXES.active};
45
- }
46
-
47
- .item-header-icon,
48
- .item-header-icon svg {
49
- width: 24px;
50
- height: 24px;
51
- }
52
-
53
- .item-header-text {
54
- }
55
- }
56
-
57
- .item-content {
58
- display: none;
59
- flex-direction: column;
60
-
61
- .item-content-header {
62
-
63
- }
9
+ export const ContentAccordionItemHeader = styled.div`
10
+ display: flex;
11
+ align-items: center;
12
+ box-sizing: border-box;
13
+ min-height: 48px;
14
+ color: ${COLORS.neutral_600};
15
+ cursor: pointer;
16
+
17
+ &:hover {
18
+ color: ${COLORS.primary_700};
19
+ background-color: ${COLORS.primary_20};
20
+ z-index: ${Z_INDEXES.hover};
21
+ }
64
22
 
65
- .item-content-body {
23
+ &:focus {
24
+ box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
25
+ background-color: ${COLORS.white};
26
+ z-index: ${Z_INDEXES.focus};
27
+ outline: none;
28
+ }
66
29
 
67
- }
30
+ &:active {
31
+ color: ${COLORS.primary_800};
32
+ background-color: ${COLORS.primary_100};
33
+ box-shadow: none;
34
+ z-index: ${Z_INDEXES.active};
35
+ }
36
+ `;
37
+ export const ContentAccordionItemHeaderIcon = styled.div`
38
+ width: 24px;
39
+ height: 24px;
68
40
 
69
- .item-content-footer {
70
- }
71
- }
41
+ svg {
42
+ width: 24px;
43
+ height: 24px;
44
+ }
45
+ `;
46
+ export const ContentAccordionItemHeaderText = styled.div`
47
+ `;
48
+ export const ContentAccordionItemContent = styled.div`
49
+ display: none;
50
+ flex-direction: column;
51
+ `;
52
+ export const ContentAccordionItemContentHeader = styled.div`
53
+ `;
54
+ export const ContentAccordionItemContentBody = styled.div`
55
+ `;
56
+ export const ContentAccordionItemContentFooter = styled.div`
57
+ `;
58
+ export const ContentAccordionItem = styled.div`
59
+ display: flex;
60
+ flex-direction: column;
61
+ border-top: 1px solid ${COLORS.neutral_100};
72
62
 
73
- &.active {
74
- .item-content {
75
- display: flex;
76
- }
63
+ &.active {
64
+ ${ContentAccordionItemContent} {
65
+ display: flex;
77
66
  }
67
+ }
78
68
 
79
- &.disabled {
80
- .item-header {
81
- color: ${COLORS.neutral_300};
82
- cursor: not-allowed;
83
- pointer-events: none;
84
- }
69
+ &.disabled {
70
+ ${ContentAccordionItemHeader} {
71
+ color: ${COLORS.neutral_300};
72
+ cursor: not-allowed;
73
+ pointer-events: none;
85
74
  }
86
75
  }
76
+ `;
77
+ export const ContentAccordionWrapper = styled.div`
78
+ width: 100%;
79
+ position: relative;
87
80
 
88
- .content-accordion-item:last-child {
81
+ ${ContentAccordionItem}:last-child {
89
82
  border-bottom: 1px solid ${COLORS.neutral_100};
90
83
  }
91
84
 
@@ -93,46 +86,45 @@ const ContentAccordionWrapper = styled.div`
93
86
  min-width: 320px;
94
87
  max-width: 528px;
95
88
 
96
- .item-header {
89
+ ${ContentAccordionItemHeader} {
97
90
  gap: 8px;
98
91
  padding: 0 8px;
99
92
  ${ComponentSStyling(ComponentTextStyle.Regular, null)}
100
93
  }
101
94
 
102
- .item-content {
95
+ ${ContentAccordionItemContent} {
103
96
  padding: 0 8px 16px 40px;
104
97
  gap: 8px;
105
98
 
106
- .item-content-header {
99
+ ${ContentAccordionItemContentHeader} {
107
100
  ${ComponentSStyling(ComponentTextStyle.Bold, null)}
108
101
  }
109
102
 
110
- .item-content-body {
103
+ ${ContentAccordionItemContentBody} {
111
104
  ${ComponentSStyling(ComponentTextStyle.Regular, null)}
112
105
  }
113
106
  }
114
107
  }
115
108
 
116
-
117
109
  &.medium {
118
110
  min-width: 344px;
119
111
  max-width: 584px;
120
112
 
121
- .item-header {
113
+ ${ContentAccordionItemHeader} {
122
114
  gap: 12px;
123
115
  padding: 0 12px;
124
116
  ${ComponentMStyling(ComponentTextStyle.Regular, null)}
125
117
  }
126
118
 
127
- .item-content {
119
+ ${ContentAccordionItemContent} {
128
120
  padding: 8px 12px 24px 48px;
129
121
  gap: 12px;
130
122
 
131
- .item-content-header {
123
+ ${ContentAccordionItemContentHeader} {
132
124
  ${ComponentMStyling(ComponentTextStyle.Bold, null)}
133
125
  }
134
126
 
135
- .item-content-body {
127
+ ${ContentAccordionItemContentBody} {
136
128
  ${ComponentMStyling(ComponentTextStyle.Regular, null)}
137
129
  }
138
130
 
@@ -143,21 +135,21 @@ const ContentAccordionWrapper = styled.div`
143
135
  min-width: 384px;
144
136
  max-width: 656px;
145
137
 
146
- .item-header {
138
+ ${ContentAccordionItemHeader} {
147
139
  gap: 16px;
148
140
  padding: 0 16px;
149
141
  ${ComponentLStyling(ComponentTextStyle.Regular, null)}
150
142
  }
151
143
 
152
- .item-content {
144
+ ${ContentAccordionItemContent} {
153
145
  padding: 16px 16px 32px 56px;
154
146
  gap: 16px;
155
147
 
156
- .item-content-header {
148
+ ${ContentAccordionItemContentHeader} {
157
149
  ${ComponentLStyling(ComponentTextStyle.Bold, null)}
158
150
  }
159
151
 
160
- .item-content-body {
152
+ ${ContentAccordionItemContentBody} {
161
153
  ${ComponentLStyling(ComponentTextStyle.Regular, null)}
162
154
  }
163
155
  }
@@ -193,33 +185,20 @@ export const ContentAccordion = props => {
193
185
 
194
186
  const renderItem = item => {
195
187
  const isActive = opened.includes(item.key);
196
- return /*#__PURE__*/React.createElement("div", {
188
+ return /*#__PURE__*/React.createElement(ContentAccordionItem, {
197
189
  key: item.key,
198
190
  id: `item_${item.key}`,
199
- className: 'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
200
- }, /*#__PURE__*/React.createElement("div", {
201
- className: 'item-header',
191
+ className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
192
+ }, /*#__PURE__*/React.createElement(ContentAccordionItemHeader, {
202
193
  tabIndex: !item.disabled ? 0 : undefined,
203
194
  onMouseDown: e => e.preventDefault(),
204
195
  onClick: () => !item.disabled && onItemClick(item),
205
196
  onKeyPress: event => event.key === 'Enter' && onItemClick(item)
206
- }, /*#__PURE__*/React.createElement("div", {
207
- className: 'item-header-icon'
208
- }, props.multi ? isActive ? /*#__PURE__*/React.createElement(SystemIcons.Minus, null) : /*#__PURE__*/React.createElement(SystemIcons.Plus, null) : isActive ? /*#__PURE__*/React.createElement(SystemIcons.ChevronDown, null) : /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, null)), /*#__PURE__*/React.createElement("div", {
209
- className: 'item-header-text'
210
- }, item.title)), /*#__PURE__*/React.createElement("div", {
211
- className: 'item-content'
212
- }, item.header && /*#__PURE__*/React.createElement("div", {
213
- className: 'item-content-header'
214
- }, item.header), /*#__PURE__*/React.createElement("div", {
215
- className: 'item-content-body'
216
- }, item.body), item.footer && /*#__PURE__*/React.createElement("div", {
217
- className: 'item-content-footer'
218
- }, item.footer)));
197
+ }, /*#__PURE__*/React.createElement(ContentAccordionItemHeaderIcon, null, props.multi ? isActive ? /*#__PURE__*/React.createElement(SystemIcons.Minus, null) : /*#__PURE__*/React.createElement(SystemIcons.Plus, null) : isActive ? /*#__PURE__*/React.createElement(SystemIcons.ChevronDown, null) : /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, null)), /*#__PURE__*/React.createElement(ContentAccordionItemHeaderText, null, item.title)), /*#__PURE__*/React.createElement(ContentAccordionItemContent, null, item.header && /*#__PURE__*/React.createElement(ContentAccordionItemContentHeader, null, item.header), /*#__PURE__*/React.createElement(ContentAccordionItemContentBody, null, item.body), item.footer && /*#__PURE__*/React.createElement(ContentAccordionItemContentFooter, null, item.footer)));
219
198
  };
220
199
 
221
200
  return /*#__PURE__*/React.createElement(ContentAccordionWrapper, {
222
- className: 'content-accordion'.concat(` ${props.size ?? Size.Medium}`)
201
+ className: ''.concat(` ${props.size ?? Size.Medium}`)
223
202
  }, props.items.map(item => renderItem(item)));
224
203
  };
225
204
  ContentAccordion.propTypes = {
package/dist/esm/Accordion/ContentAccordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Z_INDEXES","ContentAccordionWrapper","div","neutral_100","neutral_600","primary_700","primary_20","hover","white","focus","primary_800","primary_100","active","neutral_300","Regular","Bold","ContentAccordion","props","opened","setOpened","useState","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Medium"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,kBAAjE,QAA0F,sBAA1F;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAGA,MAAMC,uBAAuB,GAAGT,MAAM,CAACU,GAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BH,MAAM,CAACI,WAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,eAAeJ,MAAM,CAACK,WAAY;AAClC;AACA;AACA;AACA,iBAAiBL,MAAM,CAACM,WAAY;AACpC,4BAA4BN,MAAM,CAACO,UAAW;AAC9C,mBAAmBN,SAAS,CAACO,KAAM;AACnC;AACA;AACA;AACA;AACA,4BAA4BR,MAAM,CAACS,KAAM;AACzC,mBAAmBR,SAAS,CAACS,KAAM;AACnC;AACA;AACA;AACA;AACA,iBAAiBV,MAAM,CAACW,WAAY;AACpC,4BAA4BX,MAAM,CAACY,WAAY;AAC/C;AACA,mBAAmBX,SAAS,CAACY,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBb,MAAM,CAACc,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+Bd,MAAM,CAACI,WAAY;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQN,iBAAiB,CAACC,kBAAkB,CAACgB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUjB,iBAAiB,CAACC,kBAAkB,CAACiB,IAApB,EAA0B,IAA1B,CAAgC;AAC3D;AACA;A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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nconst ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n\n .content-accordion-item {\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n .item-header {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ${COLORS.white};\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\n .item-header-icon,\n .item-header-icon svg {\n width: 24px;\n height: 24px;\n }\n\n .item-header-text {\n }\n }\n\n .item-content {\n display: none;\n flex-direction: column;\n\n .item-content-header {\n\n }\n\n .item-content-body {\n\n }\n\n .item-content-footer {\n }\n }\n\n &.active {\n .item-content {\n display: flex;\n }\n }\n\n &.disabled {\n .item-header {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n }\n\n .content-accordion-item:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n .item-header {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .item-content {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n .item-content-header {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n .item-content-body {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n .item-header {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .item-content {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n .item-content-header {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n .item-content-body {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n .item-header {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .item-content {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n .item-content-header {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n .item-content-body {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <div key={item.key}\n id={`item_${item.key}`}\n className={'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <div className={'item-header'}\n tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={e => e.preventDefault()}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <div className={'item-header-icon'}>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </div>\n <div className={'item-header-text'}>\n {item.title}\n </div>\n </div>\n <div className={'item-content'}>\n {\n item.header &&\n <div className={'item-content-header'}>\n {item.header}\n </div>\n }\n <div className={'item-content-body'}>\n {item.body}\n </div>\n {\n item.footer &&\n <div className={'item-content-footer'}>\n {item.footer}\n </div>\n }\n </div>\n </div>\n );\n }\n\n return (\n <ContentAccordionWrapper className={'content-accordion'.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
1
+ {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Z_INDEXES","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","opened","setOpened","useState","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ${COLORS.white};\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={e => e.preventDefault()}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
package/dist/esm/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import ContentAccordion from '../ContentAccordion';
2
+ import ContentAccordion, { ContentAccordionItem, ContentAccordionItemContentBody, ContentAccordionItemContentFooter, ContentAccordionItemContentHeader, ContentAccordionItemHeader, ContentAccordionWrapper } from '../ContentAccordion';
3
3
  import { fireEvent, render } from '@testing-library/react';
4
4
  import { Size } from '../../types';
5
5
  describe('ContentAccordion', () => {
@@ -52,86 +52,86 @@ describe('ContentAccordion', () => {
52
52
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
53
53
  items: contentAccordionItemsWithBody
54
54
  }));
55
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
56
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);
57
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');
58
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
59
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
55
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);
56
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`).length).toBe(1);
57
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`)[0].id).toBe('item_3');
58
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);
59
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');
60
60
  });
61
61
  it('should not render header if not provided', () => {
62
62
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
63
63
  items: contentAccordionItemsWithBody
64
64
  }));
65
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
66
- expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);
65
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);
66
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(0);
67
67
  });
68
68
  it('should not render footer if not provided', () => {
69
69
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
70
70
  items: contentAccordionItemsWithBody
71
71
  }));
72
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
73
- expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);
72
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);
73
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(0);
74
74
  });
75
75
  it('should render body, header, and footer if all are provided', () => {
76
76
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
77
77
  items: contentAccordionItemsWithBodyAndHeaderAndFooter
78
78
  }));
79
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
80
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
81
- expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);
82
- expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);
79
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);
80
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);
81
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(4);
82
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(4);
83
83
  });
84
84
  it('should set correct size class name for small accordion', () => {
85
85
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
86
86
  items: contentAccordionItemsWithBodyAndHeaderAndFooter,
87
87
  size: Size.Small
88
88
  }));
89
- expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);
89
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.small`).length).toBe(1);
90
90
  });
91
91
  it('should set correct size class name for medium accordion', () => {
92
92
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
93
93
  items: contentAccordionItemsWithBodyAndHeaderAndFooter,
94
94
  size: Size.Medium
95
95
  }));
96
- expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);
96
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.medium`).length).toBe(1);
97
97
  });
98
98
  it('should set correct size class name for large accordion', () => {
99
99
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
100
100
  items: contentAccordionItemsWithBodyAndHeaderAndFooter,
101
101
  size: Size.Large
102
102
  }));
103
- expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);
103
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.large`).length).toBe(1);
104
104
  });
105
105
  it('should change active state when item header is clicked', () => {
106
106
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
107
107
  items: contentAccordionItemsWithBody,
108
108
  multi: false
109
109
  }));
110
- const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
110
+ const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];
111
111
  fireEvent.click(itemHeader);
112
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
113
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');
112
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);
113
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_4');
114
114
  });
115
115
  it('should not change active state when disabled item header is clicked', () => {
116
116
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
117
117
  items: contentAccordionItemsWithBody,
118
118
  multi: false
119
119
  }));
120
- const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];
120
+ const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[2];
121
121
  fireEvent.click(itemHeader);
122
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
123
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
122
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);
123
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');
124
124
  });
125
125
  it('should append active items if multi property is true', () => {
126
126
  const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
127
127
  items: contentAccordionItemsWithBody,
128
128
  multi: true
129
129
  }));
130
- const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
130
+ const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];
131
131
  fireEvent.click(itemHeader);
132
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);
133
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
134
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');
132
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(2);
133
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');
134
+ expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[1].id).toBe('item_4');
135
135
  });
136
136
  });
137
- //# sourceMappingURL=ContetnAccordion.test.js.map
137
+ //# sourceMappingURL=ContentAccordion.test.js.map
package/dist/esm/Accordion/__tests__/ContentAccordion.test.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/Accordion/__tests__/ContentAccordion.test.tsx"],"names":["React","ContentAccordion","ContentAccordionItem","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItemContentHeader","ContentAccordionItemHeader","ContentAccordionWrapper","fireEvent","render","Size","describe","contentAccordionItemsWithBody","key","title","body","active","disabled","contentAccordionItemsWithBodyAndHeaderAndFooter","header","footer","it","wrapper","expect","container","querySelectorAll","length","toBe","id","Small","Medium","Large","itemHeader","click"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ContentAccordion, {\n ContentAccordionItem,\n ContentAccordionItemContentBody, ContentAccordionItemContentFooter,\n ContentAccordionItemContentHeader, ContentAccordionItemHeader, ContentAccordionWrapper\n} from '../ContentAccordion';\nimport {fireEvent, render} from '@testing-library/react';\nimport {Size} from '../../types';\n\ndescribe('ContentAccordion', () => {\n const contentAccordionItemsWithBody = [\n {\n key: '1',\n title: 'Item 1',\n body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n },\n {\n key: '2',\n title: 'Item 2',\n body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n active: true\n },\n {\n key: '3',\n title: 'Item 3',\n body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n disabled: true\n },\n {\n key: '4',\n title: 'Item 4',\n body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n }\n ];\n\n const contentAccordionItemsWithBodyAndHeaderAndFooter = [\n {\n key: '1',\n title: 'Item 1',\n body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n header: 'Header 1',\n footer: <span/>,\n },\n {\n key: '2',\n title: 'Item 2',\n body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n header: 'Header 2',\n footer: <span/>,\n },\n {\n key: '3',\n title: 'Item 3',\n body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n header: 'Header 3',\n footer: <span/>,\n disabled: true\n },\n {\n key: '4',\n title: 'Item 4',\n body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n header: 'Header 4',\n footer: <span/>,\n }\n ];\n\n it('should render items in correct state', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`).length).toBe(1);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`)[0].id).toBe('item_3');\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');\n });\n\n it('should not render header if not provided', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(0);\n });\n\n it('should not render footer if not provided', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(0);\n });\n\n it('should render body, header, and footer if all are provided', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}/>);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).length).toBe(4);\n });\n\n it('should set correct size class name for small accordion', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n size={Size.Small}/>);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.small`).length).toBe(1);\n });\n\n it('should set correct size class name for medium accordion', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n size={Size.Medium}/>);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.medium`).length).toBe(1);\n });\n\n it('should set correct size class name for large accordion', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n size={Size.Large}/>);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionWrapper}.large`).length).toBe(1);\n });\n\n it('should change active state when item header is clicked', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\n const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];\n\n fireEvent.click(itemHeader);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_4');\n });\n\n it('should not change active state when disabled item header is clicked', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\n const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[2];\n\n fireEvent.click(itemHeader);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');\n });\n\n it('should append active items if multi property is true', () => {\n const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={true}/>);\n const itemHeader = wrapper.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];\n\n fireEvent.click(itemHeader);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(2);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[1].id).toBe('item_4');\n });\n\n});\n"],"file":"ContentAccordion.test.js"}
package/dist/js/Accordion/ContentAccordion.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  import React from 'react';
2
2
  import { Size } from '../types';
3
+ export declare const ContentAccordionItemHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ export declare const ContentAccordionItemHeaderIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const ContentAccordionItemHeaderText: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export declare const ContentAccordionItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const ContentAccordionItemContentHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export declare const ContentAccordionItemContentBody: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const ContentAccordionItemContentFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const ContentAccordionItem: import("styled-components").StyledComponent<"div", any, {}, never>;
11
+ export declare const ContentAccordionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
12
  export interface ContentAccordionItem {
4
13
  key: string;
5
14
  title: string;
@@ -12,7 +21,7 @@ export interface ContentAccordionItem {
12
21
  export interface ContentAccordionProps {
13
22
  items: ContentAccordionItem[];
14
23
  multi?: boolean;
15
- size?: Size;
24
+ size?: Size.Small | Size.Medium | Size.Large;
16
25
  }
17
26
  export declare const ContentAccordion: React.FunctionComponent<ContentAccordionProps>;
18
27
  export default ContentAccordion;
package/dist/js/Accordion/ContentAccordion.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.ContentAccordion = void 0;
6
+ exports.default = exports.ContentAccordion = exports.ContentAccordionWrapper = exports.ContentAccordionItem = exports.ContentAccordionItemContentFooter = exports.ContentAccordionItemContentBody = exports.ContentAccordionItemContentHeader = exports.ContentAccordionItemContent = exports.ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderIcon = exports.ContentAccordionItemHeader = void 0;
7
7
 
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
 
@@ -21,7 +21,7 @@ var _styles = require("../styles");
21
21
 
22
22
  var _zIndexes = require("../styles/z-indexes");
23
23
 
24
- var _templateObject;
24
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
25
25
 
26
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
27
 
@@ -47,7 +47,41 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
47
47
 
48
48
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
49
49
 
50
- var ContentAccordionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n\n .content-accordion-item {\n display: flex;\n flex-direction: column;\n border-top: 1px solid ", ";\n\n .item-header {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ", ";\n z-index: ", ";\n outline: none;\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n box-shadow: none;\n z-index: ", ";\n }\n\n .item-header-icon,\n .item-header-icon svg {\n width: 24px;\n height: 24px;\n }\n\n .item-header-text {\n }\n }\n\n .item-content {\n display: none;\n flex-direction: column;\n\n .item-content-header {\n\n }\n\n .item-content-body {\n\n }\n\n .item-content-footer {\n }\n }\n\n &.active {\n .item-content {\n display: flex;\n }\n }\n\n &.disabled {\n .item-header {\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n }\n\n .content-accordion-item:last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n .item-header {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n .item-content {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n .item-content-header {\n ", "\n }\n\n .item-content-body {\n ", "\n }\n }\n }\n\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n .item-header {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n .item-content {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n .item-content-header {\n ", "\n }\n\n .item-content-body {\n ", "\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n .item-header {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n .item-content {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n .item-content-header {\n ", "\n }\n\n .item-content-body {\n ", "\n }\n }\n }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.primary_700, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.white, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null));
50
+ var ContentAccordionItemHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ", ";\n z-index: ", ";\n outline: none;\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n box-shadow: none;\n z-index: ", ";\n }\n"])), _styles.COLORS.neutral_600, _styles.COLORS.primary_700, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.white, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active);
51
+
52
+ exports.ContentAccordionItemHeader = ContentAccordionItemHeader;
53
+
54
+ var ContentAccordionItemHeaderIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
55
+
56
+ exports.ContentAccordionItemHeaderIcon = ContentAccordionItemHeaderIcon;
57
+
58
+ var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
59
+
60
+ exports.ContentAccordionItemHeaderText = ContentAccordionItemHeaderText;
61
+
62
+ var ContentAccordionItemContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: none;\n flex-direction: column;\n"])));
63
+
64
+ exports.ContentAccordionItemContent = ContentAccordionItemContent;
65
+
66
+ var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n"])));
67
+
68
+ exports.ContentAccordionItemContentHeader = ContentAccordionItemContentHeader;
69
+
70
+ var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
71
+
72
+ exports.ContentAccordionItemContentBody = ContentAccordionItemContentBody;
73
+
74
+ var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
75
+
76
+ exports.ContentAccordionItemContentFooter = ContentAccordionItemContentFooter;
77
+
78
+ var ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-top: 1px solid ", ";\n\n &.active {\n ", " {\n display: flex;\n }\n }\n\n &.disabled {\n ", " {\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n"])), _styles.COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, _styles.COLORS.neutral_300);
79
+
80
+ exports.ContentAccordionItem = ContentAccordionItem;
81
+
82
+ var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null));
83
+
84
+ exports.ContentAccordionWrapper = ContentAccordionWrapper;
51
85
 
52
86
  var ContentAccordion = function ContentAccordion(props) {
53
87
  var _props$size;
@@ -95,12 +129,11 @@ var ContentAccordion = function ContentAccordion(props) {
95
129
 
96
130
  var renderItem = function renderItem(item) {
97
131
  var isActive = opened.includes(item.key);
98
- return /*#__PURE__*/_react.default.createElement("div", {
132
+ return /*#__PURE__*/_react.default.createElement(ContentAccordionItem, {
99
133
  key: item.key,
100
134
  id: "item_".concat(item.key),
101
- className: 'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
102
- }, /*#__PURE__*/_react.default.createElement("div", {
103
- className: 'item-header',
135
+ className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
136
+ }, /*#__PURE__*/_react.default.createElement(ContentAccordionItemHeader, {
104
137
  tabIndex: !item.disabled ? 0 : undefined,
105
138
  onMouseDown: function onMouseDown(e) {
106
139
  return e.preventDefault();
@@ -111,23 +144,11 @@ var ContentAccordion = function ContentAccordion(props) {
111
144
  onKeyPress: function onKeyPress(event) {
112
145
  return event.key === 'Enter' && onItemClick(item);
113
146
  }
114
- }, /*#__PURE__*/_react.default.createElement("div", {
115
- className: 'item-header-icon'
116
- }, props.multi ? isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.Minus, null) : /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.Plus, null) : isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronDown, null) : /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronRight, null)), /*#__PURE__*/_react.default.createElement("div", {
117
- className: 'item-header-text'
118
- }, item.title)), /*#__PURE__*/_react.default.createElement("div", {
119
- className: 'item-content'
120
- }, item.header && /*#__PURE__*/_react.default.createElement("div", {
121
- className: 'item-content-header'
122
- }, item.header), /*#__PURE__*/_react.default.createElement("div", {
123
- className: 'item-content-body'
124
- }, item.body), item.footer && /*#__PURE__*/_react.default.createElement("div", {
125
- className: 'item-content-footer'
126
- }, item.footer)));
147
+ }, /*#__PURE__*/_react.default.createElement(ContentAccordionItemHeaderIcon, null, props.multi ? isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.Minus, null) : /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.Plus, null) : isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronDown, null) : /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronRight, null)), /*#__PURE__*/_react.default.createElement(ContentAccordionItemHeaderText, null, item.title)), /*#__PURE__*/_react.default.createElement(ContentAccordionItemContent, null, item.header && /*#__PURE__*/_react.default.createElement(ContentAccordionItemContentHeader, null, item.header), /*#__PURE__*/_react.default.createElement(ContentAccordionItemContentBody, null, item.body), item.footer && /*#__PURE__*/_react.default.createElement(ContentAccordionItemContentFooter, null, item.footer)));
127
148
  };
128
149
 
129
150
  return /*#__PURE__*/_react.default.createElement(ContentAccordionWrapper, {
130
- className: 'content-accordion'.concat(" ".concat((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium))
151
+ className: ''.concat(" ".concat((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium))
131
152
  }, props.items.map(function (item) {
132
153
  return renderItem(item);
133
154
  }));