@laerdal/life-react-components 1.4.1-dev.1.full → 1.4.1-dev.4

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 (23) 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/esm/Modals/ModalDialog.js +7 -1
  6. package/dist/esm/Modals/ModalDialog.js.map +1 -1
  7. package/dist/js/Accordion/ContentAccordion.d.ts +9 -0
  8. package/dist/js/Accordion/ContentAccordion.js +42 -21
  9. package/dist/js/Accordion/ContentAccordion.js.map +1 -1
  10. package/dist/js/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} +34 -28
  11. package/dist/js/Accordion/__tests__/ContentAccordion.test.js.map +1 -0
  12. package/dist/js/Modals/ModalDialog.js +7 -1
  13. package/dist/js/Modals/ModalDialog.js.map +1 -1
  14. package/dist/umd/Accordion/ContentAccordion.js +82 -103
  15. package/dist/umd/Accordion/ContentAccordion.js.map +1 -1
  16. package/dist/umd/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} +27 -27
  17. package/dist/umd/Accordion/__tests__/ContentAccordion.test.js.map +1 -0
  18. package/dist/umd/Modals/ModalDialog.js +7 -1
  19. package/dist/umd/Modals/ModalDialog.js.map +1 -1
  20. package/package.json +1 -1
  21. package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
  22. package/dist/js/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
  23. package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
package/dist/umd/Accordion/ContentAccordion.js CHANGED
@@ -16,7 +16,7 @@
16
16
  Object.defineProperty(exports, "__esModule", {
17
17
  value: true
18
18
  });
19
- exports.ContentAccordion = undefined;
19
+ exports.ContentAccordion = exports.ContentAccordionWrapper = exports.ContentAccordionItem = exports.ContentAccordionItemContentFooter = exports.ContentAccordionItemContentBody = exports.ContentAccordionItemContentHeader = exports.ContentAccordionItemContent = exports.ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderIcon = exports.ContentAccordionItemHeader = undefined;
20
20
 
21
21
  var _propTypes2 = _interopRequireDefault(_propTypes);
22
22
 
@@ -30,86 +30,79 @@
30
30
  };
31
31
  }
32
32
 
33
- const ContentAccordionWrapper = _styledComponents2.default.div`
34
- width: 100%;
35
- position: relative;
36
-
37
-
38
- .content-accordion-item {
39
- display: flex;
40
- flex-direction: column;
41
- border-top: 1px solid ${_styles.COLORS.neutral_100};
42
-
43
- .item-header {
44
- display: flex;
45
- align-items: center;
46
- box-sizing: border-box;
47
- min-height: 48px;
48
- color: ${_styles.COLORS.neutral_600};
49
- cursor: pointer;
50
-
51
- &:hover {
52
- color: ${_styles.COLORS.primary_700};
53
- background-color: ${_styles.COLORS.primary_20};
54
- z-index: ${_zIndexes.Z_INDEXES.hover};
55
- }
56
-
57
- &:focus {
58
- box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
59
- background-color: ${_styles.COLORS.white};
60
- z-index: ${_zIndexes.Z_INDEXES.focus};
61
- outline: none;
62
- }
63
-
64
- &:active {
65
- color: ${_styles.COLORS.primary_800};
66
- background-color: ${_styles.COLORS.primary_100};
67
- box-shadow: none;
68
- z-index: ${_zIndexes.Z_INDEXES.active};
69
- }
70
-
71
- .item-header-icon,
72
- .item-header-icon svg {
73
- width: 24px;
74
- height: 24px;
75
- }
76
-
77
- .item-header-text {
78
- }
79
- }
80
-
81
- .item-content {
82
- display: none;
83
- flex-direction: column;
84
-
85
- .item-content-header {
86
-
87
- }
33
+ const ContentAccordionItemHeader = exports.ContentAccordionItemHeader = _styledComponents2.default.div`
34
+ display: flex;
35
+ align-items: center;
36
+ box-sizing: border-box;
37
+ min-height: 48px;
38
+ color: ${_styles.COLORS.neutral_600};
39
+ cursor: pointer;
40
+
41
+ &:hover {
42
+ color: ${_styles.COLORS.primary_700};
43
+ background-color: ${_styles.COLORS.primary_20};
44
+ z-index: ${_zIndexes.Z_INDEXES.hover};
45
+ }
88
46
 
89
- .item-content-body {
47
+ &:focus {
48
+ box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
49
+ background-color: ${_styles.COLORS.white};
50
+ z-index: ${_zIndexes.Z_INDEXES.focus};
51
+ outline: none;
52
+ }
90
53
 
91
- }
54
+ &:active {
55
+ color: ${_styles.COLORS.primary_800};
56
+ background-color: ${_styles.COLORS.primary_100};
57
+ box-shadow: none;
58
+ z-index: ${_zIndexes.Z_INDEXES.active};
59
+ }
60
+ `;
61
+ const ContentAccordionItemHeaderIcon = exports.ContentAccordionItemHeaderIcon = _styledComponents2.default.div`
62
+ width: 24px;
63
+ height: 24px;
92
64
 
93
- .item-content-footer {
94
- }
95
- }
65
+ svg {
66
+ width: 24px;
67
+ height: 24px;
68
+ }
69
+ `;
70
+ const ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderText = _styledComponents2.default.div`
71
+ `;
72
+ const ContentAccordionItemContent = exports.ContentAccordionItemContent = _styledComponents2.default.div`
73
+ display: none;
74
+ flex-direction: column;
75
+ `;
76
+ const ContentAccordionItemContentHeader = exports.ContentAccordionItemContentHeader = _styledComponents2.default.div`
77
+ `;
78
+ const ContentAccordionItemContentBody = exports.ContentAccordionItemContentBody = _styledComponents2.default.div`
79
+ `;
80
+ const ContentAccordionItemContentFooter = exports.ContentAccordionItemContentFooter = _styledComponents2.default.div`
81
+ `;
82
+ const ContentAccordionItem = exports.ContentAccordionItem = _styledComponents2.default.div`
83
+ display: flex;
84
+ flex-direction: column;
85
+ border-top: 1px solid ${_styles.COLORS.neutral_100};
96
86
 
97
- &.active {
98
- .item-content {
99
- display: flex;
100
- }
87
+ &.active {
88
+ ${ContentAccordionItemContent} {
89
+ display: flex;
101
90
  }
91
+ }
102
92
 
103
- &.disabled {
104
- .item-header {
105
- color: ${_styles.COLORS.neutral_300};
106
- cursor: not-allowed;
107
- pointer-events: none;
108
- }
93
+ &.disabled {
94
+ ${ContentAccordionItemHeader} {
95
+ color: ${_styles.COLORS.neutral_300};
96
+ cursor: not-allowed;
97
+ pointer-events: none;
109
98
  }
110
99
  }
100
+ `;
101
+ const ContentAccordionWrapper = exports.ContentAccordionWrapper = _styledComponents2.default.div`
102
+ width: 100%;
103
+ position: relative;
111
104
 
112
- .content-accordion-item:last-child {
105
+ ${ContentAccordionItem}:last-child {
113
106
  border-bottom: 1px solid ${_styles.COLORS.neutral_100};
114
107
  }
115
108
 
@@ -117,46 +110,45 @@
117
110
  min-width: 320px;
118
111
  max-width: 528px;
119
112
 
120
- .item-header {
113
+ ${ContentAccordionItemHeader} {
121
114
  gap: 8px;
122
115
  padding: 0 8px;
123
116
  ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null)}
124
117
  }
125
118
 
126
- .item-content {
119
+ ${ContentAccordionItemContent} {
127
120
  padding: 0 8px 16px 40px;
128
121
  gap: 8px;
129
122
 
130
- .item-content-header {
123
+ ${ContentAccordionItemContentHeader} {
131
124
  ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null)}
132
125
  }
133
126
 
134
- .item-content-body {
127
+ ${ContentAccordionItemContentBody} {
135
128
  ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null)}
136
129
  }
137
130
  }
138
131
  }
139
132
 
140
-
141
133
  &.medium {
142
134
  min-width: 344px;
143
135
  max-width: 584px;
144
136
 
145
- .item-header {
137
+ ${ContentAccordionItemHeader} {
146
138
  gap: 12px;
147
139
  padding: 0 12px;
148
140
  ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null)}
149
141
  }
150
142
 
151
- .item-content {
143
+ ${ContentAccordionItemContent} {
152
144
  padding: 8px 12px 24px 48px;
153
145
  gap: 12px;
154
146
 
155
- .item-content-header {
147
+ ${ContentAccordionItemContentHeader} {
156
148
  ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null)}
157
149
  }
158
150
 
159
- .item-content-body {
151
+ ${ContentAccordionItemContentBody} {
160
152
  ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null)}
161
153
  }
162
154
 
@@ -167,21 +159,21 @@
167
159
  min-width: 384px;
168
160
  max-width: 656px;
169
161
 
170
- .item-header {
162
+ ${ContentAccordionItemHeader} {
171
163
  gap: 16px;
172
164
  padding: 0 16px;
173
165
  ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null)}
174
166
  }
175
167
 
176
- .item-content {
168
+ ${ContentAccordionItemContent} {
177
169
  padding: 16px 16px 32px 56px;
178
170
  gap: 16px;
179
171
 
180
- .item-content-header {
172
+ ${ContentAccordionItemContentHeader} {
181
173
  ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null)}
182
174
  }
183
175
 
184
- .item-content-body {
176
+ ${ContentAccordionItemContentBody} {
185
177
  ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null)}
186
178
  }
187
179
  }
@@ -219,33 +211,20 @@
219
211
 
220
212
  const renderItem = item => {
221
213
  const isActive = opened.includes(item.key);
222
- return /*#__PURE__*/_react2.default.createElement("div", {
214
+ return /*#__PURE__*/_react2.default.createElement(ContentAccordionItem, {
223
215
  key: item.key,
224
216
  id: `item_${item.key}`,
225
- className: 'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
226
- }, /*#__PURE__*/_react2.default.createElement("div", {
227
- className: 'item-header',
217
+ className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
218
+ }, /*#__PURE__*/_react2.default.createElement(ContentAccordionItemHeader, {
228
219
  tabIndex: !item.disabled ? 0 : undefined,
229
220
  onMouseDown: e => e.preventDefault(),
230
221
  onClick: () => !item.disabled && onItemClick(item),
231
222
  onKeyPress: event => event.key === 'Enter' && onItemClick(item)
232
- }, /*#__PURE__*/_react2.default.createElement("div", {
233
- className: 'item-header-icon'
234
- }, props.multi ? isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Minus, null) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Plus, null) : isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronDown, null) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronRight, null)), /*#__PURE__*/_react2.default.createElement("div", {
235
- className: 'item-header-text'
236
- }, item.title)), /*#__PURE__*/_react2.default.createElement("div", {
237
- className: 'item-content'
238
- }, item.header && /*#__PURE__*/_react2.default.createElement("div", {
239
- className: 'item-content-header'
240
- }, item.header), /*#__PURE__*/_react2.default.createElement("div", {
241
- className: 'item-content-body'
242
- }, item.body), item.footer && /*#__PURE__*/_react2.default.createElement("div", {
243
- className: 'item-content-footer'
244
- }, item.footer)));
223
+ }, /*#__PURE__*/_react2.default.createElement(ContentAccordionItemHeaderIcon, null, props.multi ? isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Minus, null) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Plus, null) : isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronDown, null) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronRight, null)), /*#__PURE__*/_react2.default.createElement(ContentAccordionItemHeaderText, null, item.title)), /*#__PURE__*/_react2.default.createElement(ContentAccordionItemContent, null, item.header && /*#__PURE__*/_react2.default.createElement(ContentAccordionItemContentHeader, null, item.header), /*#__PURE__*/_react2.default.createElement(ContentAccordionItemContentBody, null, item.body), item.footer && /*#__PURE__*/_react2.default.createElement(ContentAccordionItemContentFooter, null, item.footer)));
245
224
  };
246
225
 
247
226
  return /*#__PURE__*/_react2.default.createElement(ContentAccordionWrapper, {
248
- className: 'content-accordion'.concat(` ${props.size ?? _types.Size.Medium}`)
227
+ className: ''.concat(` ${props.size ?? _types.Size.Medium}`)
249
228
  }, props.items.map(item => renderItem(item)));
250
229
  };
251
230
 
package/dist/umd/Accordion/ContentAccordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionWrapper","styled","div","COLORS","neutral_100","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","key","title","header","body","footer","disabled","items","multi","ContentAccordion","props","React","setOpened","item","onItemClick","opened","renderItem","isActive","e","event","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAMA,uBAAuB,GAAGC,2BAAOC,GAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BC,eAAOC,WAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,eAAeD,eAAOE,WAAY;AAClC;AACA;AACA;AACA,iBAAiBF,eAAOG,WAAY;AACpC,4BAA4BH,eAAOI,UAAW;AAC9C,mBAAmBC,oBAAUC,KAAM;AACnC;AACA;AACA;AACA;AACA,4BAA4BN,eAAOO,KAAM;AACzC,mBAAmBF,oBAAUG,KAAM;AACnC;AACA;AACA;AACA;AACA,iBAAiBR,eAAOS,WAAY;AACpC,4BAA4BT,eAAOU,WAAY;AAC/C;AACA,mBAAmBL,oBAAUM,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,iBAAiBX,eAAOY,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+BZ,eAAOC,WAAY;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQY,mCAAkBC,+BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUA,mCAAkBC,+BAAD,IAAjBD,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA;AACA,UAAUA,mCAAkBC,+BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,+BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUA,mCAAkBD,+BAAD,IAAjBC,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA;AACA,UAAUA,mCAAkBD,+BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,+BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUA,mCAAkBF,+BAAD,IAAjBE,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA;AACA,UAAUA,mCAAkBF,+BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC9D;AACA;AACA;AA3JA,CAAA;;AA8KO,QAAMS,gBAAgE,WAAhEA,gBAAgE,GAAIC,KAAD,IAAW;AAEzF,UAAM,CAAA,MAAA,EAAA,SAAA,IAAsBC,gBAAAA,QAAAA,CAA5B,EAA4BA,CAA5B;;AAEAA,oBAAAA,SAAAA,CAAgB,MAAM;AACpB,UAAID,KAAK,CAAT,KAAA,EAAiB;AACfE,QAAAA,SAAS,CAACF,KAAK,CAALA,KAAAA,CAAAA,MAAAA,CAAmBG,IAAI,IAAIA,IAAI,CAA/BH,MAAAA,EAAAA,GAAAA,CAA4CG,IAAI,IAAIA,IAAI,CAAlED,GAAUF,CAAD,CAATE;AADF,OAAA,MAEO;AACL,YAAIjB,MAAM,GAAGe,KAAK,CAALA,KAAAA,CAAAA,IAAAA,CAAiBG,IAAI,IAAI,CAAC,CAACA,IAAI,CAA/BH,MAAAA,GAAb,GAAA;;AACA,YAAA,MAAA,EAAY;AACVE,UAAAA,SAAS,CAAC,CAAVA,MAAU,CAAD,CAATA;AACD;AACF;AARHD,KAAAA,EASG,CAACD,KAAK,CAAN,KAAA,EAAcA,KAAK,CATtBC,KASG,CATHA;;AAWA,UAAMG,WAAW,GAAID,IAAD,IAAgC;AAClD,UAAIA,IAAI,CAAR,QAAA,EAAmB;;AACnB,UAAIE,MAAM,CAANA,QAAAA,CAAgBF,IAAI,CAAxB,GAAIE,CAAJ,EAA+B;AAC7BH,QAAAA,SAAS,CAACG,MAAM,CAANA,MAAAA,CAAcd,GAAG,IAAIA,GAAG,KAAKY,IAAI,CAA3CD,GAAUG,CAAD,CAATH;AADF,OAAA,MAEO;AACL,YAAIF,KAAK,CAAT,KAAA,EAAiB;AACfE,UAAAA,SAAS,CAAC,CAAC,GAAD,MAAA,EAAYC,IAAI,CAA1BD,GAAU,CAAD,CAATA;AADF,SAAA,MAEO;AACLA,UAAAA,SAAS,CAAC,CAACC,IAAI,CAAfD,GAAU,CAAD,CAATA;AACD;AACF;AAVH,KAAA;;AAaA,UAAMI,UAAU,GAAIH,IAAD,IAAgC;AACjD,YAAMI,QAAQ,GAAGF,MAAM,CAANA,QAAAA,CAAgBF,IAAI,CAArC,GAAiBE,CAAjB;AAEA,aAAA,aACE,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,GAAG,EAAEF,IAAI,CAAd,GAAA;AACK,QAAA,EAAE,EAAG,QAAOA,IAAI,CAACZ,GADtB,EAAA;AAEK,QAAA,SAAS,EAAE,yBAAA,MAAA,CAAgCgB,QAAQ,GAAA,SAAA,GAAxC,EAAA,EAAA,MAAA,CAAkEJ,IAAI,CAAJA,QAAAA,GAAAA,WAAAA,GAAlE,EAAA;AAFhB,OAAA,EAAA,aAGE,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,SAAS,EAAd,aAAA;AACK,QAAA,QAAQ,EAAE,CAACA,IAAI,CAAL,QAAA,GAAA,CAAA,GADf,SAAA;AAEK,QAAA,WAAW,EAAEK,CAAC,IAAIA,CAAC,CAFxB,cAEuBA,EAFvB;AAGK,QAAA,OAAO,EAAE,MAAM,CAACL,IAAI,CAAL,QAAA,IAAkBC,WAAW,CAHjD,IAGiD,CAHjD;AAIK,QAAA,UAAU,EAAEK,KAAK,IAAIA,KAAK,CAALA,GAAAA,KAAAA,OAAAA,IAAyBL,WAAW,CAAA,IAAA;AAJ9D,OAAA,EAAA,aAKE,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,SAAS,EAAE;AAAhB,OAAA,EAEIJ,KAAK,CAALA,KAAAA,GACIO,QAAQ,GAAA,aACN,gBAAA,aAAA,CAAA,mBAAA,KAAA,EADM,IACN,CADM,GAAA,aAEN,gBAAA,aAAA,CAAA,mBAAA,IAAA,EAHNP,IAGM,CAHNA,GAIIO,QAAQ,GAAA,aACN,gBAAA,aAAA,CAAA,mBAAA,WAAA,EADM,IACN,CADM,GAAA,aAEN,gBAAA,aAAA,CAAA,mBAAA,YAAA,EAbZ,IAaY,CARV,CALF,EAAA,aAgBE,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,SAAS,EAAE;AAAhB,OAAA,EACGJ,IAAI,CApBX,KAmBI,CAhBF,CAHF,EAAA,aAuBE,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,SAAS,EAAE;AAAhB,OAAA,EAEIA,IAAI,CAAJA,MAAAA,IAAAA,aACA,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,SAAS,EAAE;AAAhB,OAAA,EACGA,IAAI,CAJX,MAGI,CAHJ,EAAA,aAOE,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,SAAS,EAAE;AAAhB,OAAA,EACGA,IAAI,CART,IAOE,CAPF,EAWIA,IAAI,CAAJA,MAAAA,IAAAA,aACA,gBAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,SAAS,EAAE;AAAhB,OAAA,EACGA,IAAI,CArCf,MAoCQ,CAZJ,CAvBF,CADF;AAHF,KAAA;;AAgDA,WAAA,aACE,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAyB,MAAA,SAAS,EAAE,oBAAA,MAAA,CAA4B,IAAGH,KAAK,CAALA,IAAAA,IAAcU,YAAKC,MAAlD,EAAA;AAApC,KAAA,EACGX,KAAK,CAALA,KAAAA,CAAAA,GAAAA,CAAgBG,IAAI,IAAIG,UAAU,CAFvC,IAEuC,CAAlCN,CADH,CADF;AA5EK,GAAA;;;AALLH,IAAAA,K;AAVAN,MAAAA,G;AACAC,MAAAA,K;AACAC,MAAAA,M;AACAC,MAAAA,I;AACAC,MAAAA,M;AACAC,MAAAA,Q;AACAX,MAAAA,M;;AAKAa,IAAAA,K;;oBAuFF,gB","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":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","key","title","header","body","footer","disabled","items","multi","ContentAccordion","props","React","setOpened","item","onItemClick","opened","renderItem","isActive","e","event","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;\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/umd/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} RENAMED
@@ -73,93 +73,93 @@
73
73
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
74
74
  items: contentAccordionItemsWithBody
75
75
  }));
76
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
77
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);
78
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');
79
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
80
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
76
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}`).length).toBe(4);
77
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.disabled`).length).toBe(1);
78
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.disabled`)[0].id).toBe('item_3');
79
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.active`).length).toBe(1);
80
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.active`)[0].id).toBe('item_2');
81
81
  });
82
82
  it('should not render header if not provided', () => {
83
83
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
84
84
  items: contentAccordionItemsWithBody
85
85
  }));
86
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
87
- expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);
86
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemContentBody}`).length).toBe(4);
87
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemContentHeader}`).length).toBe(0);
88
88
  });
89
89
  it('should not render footer if not provided', () => {
90
90
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
91
91
  items: contentAccordionItemsWithBody
92
92
  }));
93
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
94
- expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);
93
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemContentBody}`).length).toBe(4);
94
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemContentFooter}`).length).toBe(0);
95
95
  });
96
96
  it('should render body, header, and footer if all are provided', () => {
97
97
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
98
98
  items: contentAccordionItemsWithBodyAndHeaderAndFooter
99
99
  }));
100
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
101
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
102
- expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);
103
- expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);
100
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}`).length).toBe(4);
101
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemContentBody}`).length).toBe(4);
102
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemContentHeader}`).length).toBe(4);
103
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemContentFooter}`).length).toBe(4);
104
104
  });
105
105
  it('should set correct size class name for small accordion', () => {
106
106
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
107
107
  items: contentAccordionItemsWithBodyAndHeaderAndFooter,
108
108
  size: _types.Size.Small
109
109
  }));
110
- expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);
110
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionWrapper}.small`).length).toBe(1);
111
111
  });
112
112
  it('should set correct size class name for medium accordion', () => {
113
113
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
114
114
  items: contentAccordionItemsWithBodyAndHeaderAndFooter,
115
115
  size: _types.Size.Medium
116
116
  }));
117
- expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);
117
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionWrapper}.medium`).length).toBe(1);
118
118
  });
119
119
  it('should set correct size class name for large accordion', () => {
120
120
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
121
121
  items: contentAccordionItemsWithBodyAndHeaderAndFooter,
122
122
  size: _types.Size.Large
123
123
  }));
124
- expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);
124
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionWrapper}.large`).length).toBe(1);
125
125
  });
126
126
  it('should change active state when item header is clicked', () => {
127
127
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
128
128
  items: contentAccordionItemsWithBody,
129
129
  multi: false
130
130
  }));
131
- const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
131
+ const itemHeader = wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemHeader}`)[3];
132
132
 
133
133
  _react3.fireEvent.click(itemHeader);
134
134
 
135
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
136
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');
135
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.active`).length).toBe(1);
136
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.active`)[0].id).toBe('item_4');
137
137
  });
138
138
  it('should not change active state when disabled item header is clicked', () => {
139
139
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
140
140
  items: contentAccordionItemsWithBody,
141
141
  multi: false
142
142
  }));
143
- const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];
143
+ const itemHeader = wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemHeader}`)[2];
144
144
 
145
145
  _react3.fireEvent.click(itemHeader);
146
146
 
147
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
148
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
147
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.active`).length).toBe(1);
148
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.active`)[0].id).toBe('item_2');
149
149
  });
150
150
  it('should append active items if multi property is true', () => {
151
151
  const wrapper = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_ContentAccordion2.default, {
152
152
  items: contentAccordionItemsWithBody,
153
153
  multi: true
154
154
  }));
155
- const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
155
+ const itemHeader = wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItemHeader}`)[3];
156
156
 
157
157
  _react3.fireEvent.click(itemHeader);
158
158
 
159
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);
160
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
161
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');
159
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.active`).length).toBe(2);
160
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.active`)[0].id).toBe('item_2');
161
+ expect(wrapper.container.querySelectorAll(`${_ContentAccordion.ContentAccordionItem}.active`)[1].id).toBe('item_4');
162
162
  });
163
163
  });
164
164
  });
165
- //# sourceMappingURL=ContetnAccordion.test.js.map
165
+ //# sourceMappingURL=ContentAccordion.test.js.map
package/dist/umd/Accordion/__tests__/ContentAccordion.test.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/Accordion/__tests__/ContentAccordion.test.tsx"],"names":["describe","contentAccordionItemsWithBody","key","title","body","active","disabled","contentAccordionItemsWithBodyAndHeaderAndFooter","header","footer","it","wrapper","render","expect","ContentAccordionItem","ContentAccordionItemContentBody","ContentAccordionItemContentHeader","ContentAccordionItemContentFooter","Size","Small","ContentAccordionWrapper","Medium","Large","itemHeader","ContentAccordionItemHeader","fireEvent"],"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/umd/Modals/ModalDialog.js CHANGED
@@ -285,7 +285,13 @@
285
285
  className: "footer-action",
286
286
  href: leftFooterAction.href,
287
287
  disabled: disabled,
288
- variant: "default"
288
+ variant: "default",
289
+ onClick: e => {
290
+ if (action) {
291
+ e.preventDefault();
292
+ action(e);
293
+ }
294
+ }
289
295
  }, icon && getLeftActionIconElement(icon), text);
290
296
 
291
297
  case 'note':
package/dist/umd/Modals/ModalDialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","icon","ModalDialog","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","COLORS","neutral_600","ModalCloseButton","onClick","size","black","ModalBackButton","getLeftActionIconElement","LeftFooterAction","leftFooterAction","action","order","marginRight","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
1
+ {"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","icon","ModalDialog","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","COLORS","neutral_600","ModalCloseButton","onClick","size","black","ModalBackButton","getLeftActionIconElement","LeftFooterAction","leftFooterAction","action","order","marginRight","e","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.4.1-dev.1.full",
3
+ "version": "1.4.1-dev.4",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [