@entur/expand 3.6.13-beta.3 → 3.6.13-beta.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.
- package/dist/Accordion.d.ts +17 -0
- package/dist/AccordionItem.d.ts +16 -0
- package/dist/BaseExpand.d.ts +11 -0
- package/dist/BaseExpandablePanel.d.ts +20 -0
- package/dist/ExpandArrow.d.ts +13 -0
- package/dist/ExpandablePanel.d.ts +17 -0
- package/dist/ExpandableText.d.ts +25 -0
- package/dist/ExpandableTextButton.d.ts +14 -0
- package/dist/expand.cjs.development.js +259 -0
- package/dist/expand.cjs.development.js.map +1 -0
- package/dist/expand.cjs.production.min.js +2 -0
- package/dist/expand.cjs.production.min.js.map +1 -0
- package/dist/expand.esm.js +218 -204
- package/dist/expand.esm.js.map +1 -1
- package/dist/index.d.ts +8 -121
- package/dist/index.js +8 -0
- package/dist/styles.css +123 -113
- package/package.json +14 -24
- package/dist/expand.cjs.js +0 -234
- package/dist/expand.cjs.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,121 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export
|
|
5
|
-
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
export
|
|
9
|
-
/** Teksten som skal stå i panelet */
|
|
10
|
-
title: default_2.ReactNode;
|
|
11
|
-
/** Innholdet som skal vises under panelet */
|
|
12
|
-
children: default_2.ReactNode;
|
|
13
|
-
/** Hvilken tilstand AccordionItem skal ha som default
|
|
14
|
-
* @default false
|
|
15
|
-
*/
|
|
16
|
-
defaultOpen?: boolean;
|
|
17
|
-
/** Styling som sendes til innholdet av AccordionItem */
|
|
18
|
-
contentStyle?: CSSProperties;
|
|
19
|
-
disableAnimation?: boolean;
|
|
20
|
-
[key: string]: any;
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export declare type AccordionProps = {
|
|
24
|
-
/** To eller flere AccordionItem-komponenter */
|
|
25
|
-
children: default_2.ReactNode;
|
|
26
|
-
[key: string]: any;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export declare const BaseExpand: default_2.FC<BaseExpandProps>;
|
|
30
|
-
|
|
31
|
-
declare type BaseExpandProps = {
|
|
32
|
-
/** Innholdet som skal være expandable */
|
|
33
|
-
children: default_2.ReactNode;
|
|
34
|
-
/** Boolean for om innholdet vises eller ikke */
|
|
35
|
-
open: boolean;
|
|
36
|
-
[key: string]: any;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export declare type ExandableTextButtonProps = {
|
|
40
|
-
children: default_2.ReactNode;
|
|
41
|
-
/** Prop for om innholdet er åpent */
|
|
42
|
-
open?: boolean;
|
|
43
|
-
/** Funksjonen som styrer åpningen av ExpandableTextButton */
|
|
44
|
-
onToggle: () => void;
|
|
45
|
-
/** Den typografiske komponenten for tittelen
|
|
46
|
-
* @default Heading5
|
|
47
|
-
*/
|
|
48
|
-
as?: default_2.ElementType;
|
|
49
|
-
[key: string]: any;
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
export declare const ExpandablePanel: default_2.FC<ExpandablePanelProps>;
|
|
53
|
-
|
|
54
|
-
export declare type ExpandablePanelProps = {
|
|
55
|
-
/** Teksten som skal stå i panelet */
|
|
56
|
-
title: default_2.ReactNode;
|
|
57
|
-
/** Innholdet som skal vises under panelet */
|
|
58
|
-
children: default_2.ReactNode;
|
|
59
|
-
/** Hvilken tilstand ExpandablePanel skal ha som default
|
|
60
|
-
* @default false
|
|
61
|
-
*/
|
|
62
|
-
defaultOpen?: boolean;
|
|
63
|
-
/** Funksjonen som styrer åpningen av ExpandablePanel */
|
|
64
|
-
onToggle?: () => void;
|
|
65
|
-
/** Styling som sendes til innholdet av ExpandablePanel */
|
|
66
|
-
contentStyle?: CSSProperties;
|
|
67
|
-
[key: string]: any;
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
export declare const ExpandableText: default_2.FC<ExpandableTextProps>;
|
|
71
|
-
|
|
72
|
-
export declare const ExpandableTextButton: default_2.FC<ExandableTextButtonProps>;
|
|
73
|
-
|
|
74
|
-
export declare type ExpandableTextProps = {
|
|
75
|
-
/** Teksten som skal "vises" */
|
|
76
|
-
title: default_2.ReactNode;
|
|
77
|
-
/** Innholdet som skal vises under linken */
|
|
78
|
-
children: default_2.ReactNode;
|
|
79
|
-
/** Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)
|
|
80
|
-
* @default false
|
|
81
|
-
*/
|
|
82
|
-
defaultOpen?: boolean;
|
|
83
|
-
/** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle */
|
|
84
|
-
open?: boolean;
|
|
85
|
-
/** Funksjonen som styrer åpningen av ExpandableText */
|
|
86
|
-
onToggle?: () => void;
|
|
87
|
-
/**Styling som sendes til innholdet av ExpandableText */
|
|
88
|
-
contentStyle?: CSSProperties;
|
|
89
|
-
/** Hvilket typografisk element tittelen er
|
|
90
|
-
* @default "Heading5"
|
|
91
|
-
*/
|
|
92
|
-
titleElement?: 'Heading5' | 'Paragraph' | 'SubParagraph';
|
|
93
|
-
disableAnimation?: boolean;
|
|
94
|
-
[key: string]: any;
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
export declare const ExpandArrow: default_2.FC<ExpandArrowProps>;
|
|
98
|
-
|
|
99
|
-
declare type ExpandArrowProps = {
|
|
100
|
-
/** Om innholdet er åpent eller ikke, som bestemmer retningen på pila
|
|
101
|
-
* @default false
|
|
102
|
-
*/
|
|
103
|
-
open?: boolean;
|
|
104
|
-
/** Ekstra klassenavn */
|
|
105
|
-
className?: string;
|
|
106
|
-
[key: string]: any;
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
declare type Id = string | null;
|
|
110
|
-
|
|
111
|
-
export declare const useAccordion: ({ id, defaultOpen }: UseAccordionArgs) => {
|
|
112
|
-
isOpen: boolean;
|
|
113
|
-
toggle: () => void;
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
declare type UseAccordionArgs = {
|
|
117
|
-
id: Id;
|
|
118
|
-
defaultOpen?: boolean;
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
export { }
|
|
1
|
+
import './index.scss';
|
|
2
|
+
export * from './Accordion';
|
|
3
|
+
export * from './AccordionItem';
|
|
4
|
+
export * from './ExpandablePanel';
|
|
5
|
+
export * from './BaseExpand';
|
|
6
|
+
export * from './ExpandableText';
|
|
7
|
+
export * from './ExpandableTextButton';
|
|
8
|
+
export * from './ExpandArrow';
|
package/dist/index.js
ADDED
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,128 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
+
.ReactCollapse--collapse {
|
|
4
|
+
transition: height 0.5s ease-out;
|
|
5
|
+
}
|
|
6
|
+
/* DO NOT CHANGE!*/
|
|
7
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
8
|
+
.eds-expandable-arrow {
|
|
9
|
+
color: var(--components-expand-expandablepanel-standard-icon);
|
|
10
|
+
transition: 0.2s transform ease-out;
|
|
11
|
+
}
|
|
12
|
+
.eds-expandable-arrow--open {
|
|
13
|
+
transform: rotate(-180deg);
|
|
14
|
+
}
|
|
15
|
+
.eds-contrast .eds-expandable-arrow {
|
|
16
|
+
color: var(--components-expand-expandablepanel-contrast-icon);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.eds-expandable-text--disable-animation .eds-expandable-arrow,
|
|
20
|
+
.eds-expandable-panel--disable-animation .eds-expandable-arrow {
|
|
21
|
+
transition: none;
|
|
22
|
+
}
|
|
23
|
+
/* DO NOT CHANGE!*/
|
|
24
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
25
|
+
.eds-expandable-panel {
|
|
26
|
+
width: 100%;
|
|
27
|
+
position: relative;
|
|
28
|
+
}
|
|
29
|
+
.eds-expandable-panel + .eds-expandable-panel {
|
|
30
|
+
margin-top: 0.125rem;
|
|
31
|
+
}
|
|
32
|
+
.eds-expandable-panel:focus, .eds-expandable-panel:focus-within {
|
|
33
|
+
z-index: 2;
|
|
34
|
+
}
|
|
35
|
+
.eds-expandable-panel__grid {
|
|
36
|
+
display: grid;
|
|
37
|
+
grid-template-columns: auto 2rem;
|
|
38
|
+
}
|
|
39
|
+
.eds-expandable-panel__trigger {
|
|
40
|
+
-webkit-appearance: none;
|
|
41
|
+
-moz-appearance: none;
|
|
42
|
+
appearance: none;
|
|
43
|
+
background: var(--components-expand-expandablepanel-standard-fill-default);
|
|
44
|
+
border: none;
|
|
45
|
+
border-radius: 0.25rem;
|
|
46
|
+
color: var(--components-expand-expandablepanel-standard-text);
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
font-family: inherit;
|
|
49
|
+
font-size: inherit;
|
|
50
|
+
margin: 0;
|
|
51
|
+
padding: 1rem 1.5rem 1rem 1.5rem;
|
|
52
|
+
text-align: left;
|
|
53
|
+
-webkit-user-select: none;
|
|
54
|
+
-moz-user-select: none;
|
|
55
|
+
user-select: none;
|
|
56
|
+
width: 100%;
|
|
57
|
+
word-break: break-word;
|
|
58
|
+
}
|
|
59
|
+
.eds-contrast .eds-expandable-panel__trigger {
|
|
60
|
+
background: var(--components-expand-expandablepanel-contrast-fill-default);
|
|
61
|
+
color: var(--components-expand-expandablepanel-contrast-text);
|
|
62
|
+
}
|
|
63
|
+
.eds-expandable-panel__trigger:hover {
|
|
64
|
+
background: var(--components-expand-expandablepanel-standard-fill-hover);
|
|
65
|
+
}
|
|
66
|
+
.eds-contrast .eds-expandable-panel__trigger:hover {
|
|
67
|
+
background: var(--components-expand-expandablepanel-contrast-fill-hover);
|
|
68
|
+
}
|
|
69
|
+
.eds-expandable-panel__trigger:focus-visible {
|
|
70
|
+
outline: 2px solid #181c56;
|
|
71
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
72
|
+
outline-offset: 0.125rem;
|
|
73
|
+
}
|
|
74
|
+
.eds-contrast .eds-expandable-panel__trigger:focus-visible {
|
|
75
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
76
|
+
}
|
|
77
|
+
.eds-expandable-panel__icon-container {
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: flex-end;
|
|
81
|
+
}
|
|
82
|
+
.eds-expandable-panel__content {
|
|
83
|
+
overflow: auto;
|
|
84
|
+
padding: 1rem 1rem 1rem 1.5rem;
|
|
85
|
+
}
|
|
86
|
+
.eds-expandable-panel .ReactCollapse--collapse {
|
|
87
|
+
transition: height 0.5s ease-out;
|
|
88
|
+
}
|
|
89
|
+
.eds-expandable-panel--disable-animation .ReactCollapse--collapse {
|
|
90
|
+
transition: none;
|
|
91
|
+
}
|
|
92
|
+
/* DO NOT CHANGE!*/
|
|
93
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
94
|
+
.eds-expandable-text__trigger {
|
|
95
|
+
-webkit-appearance: none;
|
|
96
|
+
-moz-appearance: none;
|
|
97
|
+
appearance: none;
|
|
98
|
+
margin: 0;
|
|
99
|
+
border: none;
|
|
100
|
+
padding: 0.5rem 0;
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
font-family: inherit;
|
|
103
|
+
color: var(--components-expand-expandabletext-standard-text);
|
|
104
|
+
background: inherit;
|
|
105
|
+
font-size: inherit;
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
}
|
|
109
|
+
.eds-contrast .eds-expandable-text__trigger {
|
|
110
|
+
color: var(--components-expand-expandabletext-contrast-text);
|
|
111
|
+
}
|
|
112
|
+
.eds-expandable-text__trigger > h5, .eds-expandable-text__trigger > h4, .eds-expandable-text__trigger > h3, .eds-expandable-text__trigger > h2, .eds-expandable-text__trigger > p {
|
|
113
|
+
margin-top: 0;
|
|
114
|
+
margin-bottom: 0;
|
|
115
|
+
}
|
|
116
|
+
.eds-expandable-text__trigger:focus-visible {
|
|
117
|
+
outline: 2px solid #181c56;
|
|
118
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
119
|
+
outline-offset: 0.125rem;
|
|
120
|
+
}
|
|
121
|
+
.eds-contrast .eds-expandable-text__trigger:focus-visible {
|
|
122
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
123
|
+
}
|
|
124
|
+
/* DO NOT CHANGE!*/
|
|
125
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
126
|
/* DO NOT CHANGE!*/
|
|
4
127
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
128
|
/* DO NOT CHANGE!*/
|
|
@@ -187,117 +310,4 @@
|
|
|
187
310
|
.eds-expandable-arrow {
|
|
188
311
|
transition: none !important;
|
|
189
312
|
}
|
|
190
|
-
}/* DO NOT CHANGE!*/
|
|
191
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
192
|
-
.ReactCollapse--collapse {
|
|
193
|
-
transition: height 0.5s ease-out;
|
|
194
|
-
}/* DO NOT CHANGE!*/
|
|
195
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
196
|
-
.eds-expandable-arrow {
|
|
197
|
-
color: var(--components-expand-expandablepanel-standard-icon);
|
|
198
|
-
transition: 0.2s transform ease-out;
|
|
199
|
-
}
|
|
200
|
-
.eds-expandable-arrow--open {
|
|
201
|
-
transform: rotate(-180deg);
|
|
202
|
-
}
|
|
203
|
-
.eds-contrast .eds-expandable-arrow {
|
|
204
|
-
color: var(--components-expand-expandablepanel-contrast-icon);
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.eds-expandable-text--disable-animation .eds-expandable-arrow,
|
|
208
|
-
.eds-expandable-panel--disable-animation .eds-expandable-arrow {
|
|
209
|
-
transition: none;
|
|
210
|
-
}/* DO NOT CHANGE!*/
|
|
211
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
212
|
-
.eds-expandable-panel {
|
|
213
|
-
width: 100%;
|
|
214
|
-
position: relative;
|
|
215
|
-
}
|
|
216
|
-
.eds-expandable-panel + .eds-expandable-panel {
|
|
217
|
-
margin-top: 0.125rem;
|
|
218
|
-
}
|
|
219
|
-
.eds-expandable-panel:focus, .eds-expandable-panel:focus-within {
|
|
220
|
-
z-index: 2;
|
|
221
|
-
}
|
|
222
|
-
.eds-expandable-panel__grid {
|
|
223
|
-
display: grid;
|
|
224
|
-
grid-template-columns: auto 2rem;
|
|
225
|
-
}
|
|
226
|
-
.eds-expandable-panel__trigger {
|
|
227
|
-
appearance: none;
|
|
228
|
-
background: var(--components-expand-expandablepanel-standard-fill-default);
|
|
229
|
-
border: none;
|
|
230
|
-
border-radius: 0.25rem;
|
|
231
|
-
color: var(--components-expand-expandablepanel-standard-text);
|
|
232
|
-
cursor: pointer;
|
|
233
|
-
font-family: inherit;
|
|
234
|
-
font-size: inherit;
|
|
235
|
-
margin: 0;
|
|
236
|
-
padding: 1rem 1.5rem 1rem 1.5rem;
|
|
237
|
-
text-align: left;
|
|
238
|
-
user-select: none;
|
|
239
|
-
width: 100%;
|
|
240
|
-
word-break: break-word;
|
|
241
|
-
}
|
|
242
|
-
.eds-contrast .eds-expandable-panel__trigger {
|
|
243
|
-
background: var(--components-expand-expandablepanel-contrast-fill-default);
|
|
244
|
-
color: var(--components-expand-expandablepanel-contrast-text);
|
|
245
313
|
}
|
|
246
|
-
.eds-expandable-panel__trigger:hover {
|
|
247
|
-
background: var(--components-expand-expandablepanel-standard-fill-hover);
|
|
248
|
-
}
|
|
249
|
-
.eds-contrast .eds-expandable-panel__trigger:hover {
|
|
250
|
-
background: var(--components-expand-expandablepanel-contrast-fill-hover);
|
|
251
|
-
}
|
|
252
|
-
.eds-expandable-panel__trigger:focus-visible {
|
|
253
|
-
outline: 2px solid #181c56;
|
|
254
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
255
|
-
outline-offset: 0.125rem;
|
|
256
|
-
}
|
|
257
|
-
.eds-contrast .eds-expandable-panel__trigger:focus-visible {
|
|
258
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
259
|
-
}
|
|
260
|
-
.eds-expandable-panel__icon-container {
|
|
261
|
-
display: flex;
|
|
262
|
-
align-items: center;
|
|
263
|
-
justify-content: flex-end;
|
|
264
|
-
}
|
|
265
|
-
.eds-expandable-panel__content {
|
|
266
|
-
overflow: auto;
|
|
267
|
-
padding: 1rem 1rem 1rem 1.5rem;
|
|
268
|
-
}
|
|
269
|
-
.eds-expandable-panel .ReactCollapse--collapse {
|
|
270
|
-
transition: height 0.5s ease-out;
|
|
271
|
-
}
|
|
272
|
-
.eds-expandable-panel--disable-animation .ReactCollapse--collapse {
|
|
273
|
-
transition: none;
|
|
274
|
-
}/* DO NOT CHANGE!*/
|
|
275
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
276
|
-
.eds-expandable-text__trigger {
|
|
277
|
-
appearance: none;
|
|
278
|
-
margin: 0;
|
|
279
|
-
border: none;
|
|
280
|
-
padding: 0.5rem 0;
|
|
281
|
-
cursor: pointer;
|
|
282
|
-
font-family: inherit;
|
|
283
|
-
color: var(--components-expand-expandabletext-standard-text);
|
|
284
|
-
background: inherit;
|
|
285
|
-
font-size: inherit;
|
|
286
|
-
display: flex;
|
|
287
|
-
align-items: center;
|
|
288
|
-
}
|
|
289
|
-
.eds-contrast .eds-expandable-text__trigger {
|
|
290
|
-
color: var(--components-expand-expandabletext-contrast-text);
|
|
291
|
-
}
|
|
292
|
-
.eds-expandable-text__trigger > :is(h5, h4, h3, h2, p) {
|
|
293
|
-
margin-top: 0;
|
|
294
|
-
margin-bottom: 0;
|
|
295
|
-
}
|
|
296
|
-
.eds-expandable-text__trigger:focus-visible {
|
|
297
|
-
outline: 2px solid #181c56;
|
|
298
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
299
|
-
outline-offset: 0.125rem;
|
|
300
|
-
}
|
|
301
|
-
.eds-contrast .eds-expandable-text__trigger:focus-visible {
|
|
302
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
303
|
-
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/expand",
|
|
3
|
-
"version": "3.6.13-beta.
|
|
3
|
+
"version": "3.6.13-beta.4",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"main": "dist/
|
|
5
|
+
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/expand.esm.js",
|
|
7
|
-
"
|
|
7
|
+
"typings": "dist/index.d.ts",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
@@ -17,36 +17,26 @@
|
|
|
17
17
|
"access": "public"
|
|
18
18
|
},
|
|
19
19
|
"scripts": {
|
|
20
|
-
"start": "
|
|
21
|
-
"build": "
|
|
22
|
-
"test": "
|
|
23
|
-
"lint": "
|
|
20
|
+
"start": "dts watch --noClean",
|
|
21
|
+
"build": "dts build",
|
|
22
|
+
"test": "dts test",
|
|
23
|
+
"lint": "dts lint src"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"react": ">=16.8.0",
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/icons": "^8.0.
|
|
31
|
-
"@entur/tokens": "^3.19.
|
|
32
|
-
"@entur/typography": "^1.
|
|
33
|
-
"@entur/utils": "^0.12.
|
|
34
|
-
"classnames": "^2.
|
|
30
|
+
"@entur/icons": "^8.0.0",
|
|
31
|
+
"@entur/tokens": "^3.19.1",
|
|
32
|
+
"@entur/typography": "^1.10.0-beta.4",
|
|
33
|
+
"@entur/utils": "^0.12.3",
|
|
34
|
+
"classnames": "^2.3.1",
|
|
35
35
|
"react-collapse": "^5.1.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@testing-library/jest-dom": "^5.17.0",
|
|
39
|
-
"@testing-library/react": "^10.4.9",
|
|
40
|
-
"@testing-library/user-event": "14.6.1",
|
|
41
38
|
"@types/react-collapse": "5.0.4",
|
|
42
|
-
"
|
|
43
|
-
"eslint": "^7.32.0",
|
|
44
|
-
"jest": "^29.0.0",
|
|
45
|
-
"jest-environment-jsdom": "^29.0.0",
|
|
46
|
-
"ts-jest": "^29.0.0",
|
|
47
|
-
"typescript": "^5.9.2",
|
|
48
|
-
"vite": "^7.1.3",
|
|
49
|
-
"vite-plugin-dts": "^4.5.4"
|
|
39
|
+
"dts-cli": "2.0.5"
|
|
50
40
|
},
|
|
51
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "8d064eda2fb3e82dc87f08625f7833f92737f32e"
|
|
52
42
|
}
|
package/dist/expand.cjs.js
DELETED
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const utils = require("@entur/utils");
|
|
4
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
-
const React = require("react");
|
|
6
|
-
const classNames = require("classnames");
|
|
7
|
-
const typography = require("@entur/typography");
|
|
8
|
-
const reactCollapse = require("react-collapse");
|
|
9
|
-
const icons = require("@entur/icons");
|
|
10
|
-
const AccordionContext = React.createContext(null);
|
|
11
|
-
const Accordion = ({ ...rest }) => {
|
|
12
|
-
const currentlyOpenState = React.useState(null);
|
|
13
|
-
return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: currentlyOpenState, ...rest });
|
|
14
|
-
};
|
|
15
|
-
const useAccordion = ({ id, defaultOpen }) => {
|
|
16
|
-
const contextValue = React.useContext(AccordionContext);
|
|
17
|
-
if (!contextValue) {
|
|
18
|
-
throw new Error("You need to wrap your AccordionItem inside an Accordion");
|
|
19
|
-
}
|
|
20
|
-
const [openId, setOpenId] = contextValue;
|
|
21
|
-
React.useEffect(() => {
|
|
22
|
-
if (defaultOpen) {
|
|
23
|
-
setOpenId(id);
|
|
24
|
-
}
|
|
25
|
-
}, [defaultOpen, id, setOpenId]);
|
|
26
|
-
const isOpen = openId === id;
|
|
27
|
-
return {
|
|
28
|
-
isOpen,
|
|
29
|
-
toggle: () => setOpenId(isOpen ? null : id)
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
const BaseExpand = ({ open, ...rest }) => {
|
|
33
|
-
return /* @__PURE__ */ jsxRuntime.jsx(reactCollapse.UnmountClosed, { isOpened: open, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest }) });
|
|
34
|
-
};
|
|
35
|
-
const ExpandArrow = ({
|
|
36
|
-
open = false,
|
|
37
|
-
className,
|
|
38
|
-
...rest
|
|
39
|
-
}) => {
|
|
40
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
-
icons.DownArrowIcon,
|
|
42
|
-
{
|
|
43
|
-
className: classNames(className, "eds-expandable-arrow", {
|
|
44
|
-
"eds-expandable-arrow--open": open
|
|
45
|
-
}),
|
|
46
|
-
...rest,
|
|
47
|
-
"aria-hidden": "true"
|
|
48
|
-
}
|
|
49
|
-
);
|
|
50
|
-
};
|
|
51
|
-
const BaseExpandablePanel = ({
|
|
52
|
-
title,
|
|
53
|
-
children,
|
|
54
|
-
className,
|
|
55
|
-
id,
|
|
56
|
-
open,
|
|
57
|
-
onToggle,
|
|
58
|
-
contentStyle,
|
|
59
|
-
disableAnimation,
|
|
60
|
-
...rest
|
|
61
|
-
}) => {
|
|
62
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
63
|
-
"div",
|
|
64
|
-
{
|
|
65
|
-
className: classNames("eds-expandable-panel", className, {
|
|
66
|
-
"eds-expandable-panel--disable-animation": disableAnimation
|
|
67
|
-
}),
|
|
68
|
-
children: [
|
|
69
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
-
"button",
|
|
71
|
-
{
|
|
72
|
-
type: "button",
|
|
73
|
-
className: "eds-expandable-panel__trigger",
|
|
74
|
-
onClick: onToggle,
|
|
75
|
-
"aria-expanded": open,
|
|
76
|
-
"aria-controls": open ? id : void 0,
|
|
77
|
-
...rest,
|
|
78
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "eds-expandable-panel__grid", children: [
|
|
79
|
-
/* @__PURE__ */ jsxRuntime.jsx(typography.Heading5, { margin: "none", as: "span", children: title }),
|
|
80
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "eds-expandable-panel__icon-container", children: /* @__PURE__ */ jsxRuntime.jsx(ExpandArrow, { open }) })
|
|
81
|
-
] })
|
|
82
|
-
}
|
|
83
|
-
),
|
|
84
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
85
|
-
BaseExpand,
|
|
86
|
-
{
|
|
87
|
-
className: "eds-expandable-panel__content",
|
|
88
|
-
id,
|
|
89
|
-
open,
|
|
90
|
-
style: contentStyle,
|
|
91
|
-
children
|
|
92
|
-
}
|
|
93
|
-
)
|
|
94
|
-
]
|
|
95
|
-
}
|
|
96
|
-
);
|
|
97
|
-
};
|
|
98
|
-
const AccordionItem = ({
|
|
99
|
-
defaultOpen = false,
|
|
100
|
-
id: overrideId,
|
|
101
|
-
contentStyle,
|
|
102
|
-
...rest
|
|
103
|
-
}) => {
|
|
104
|
-
const randomId = utils.useRandomId("eds-accordion-item");
|
|
105
|
-
const id = overrideId || randomId;
|
|
106
|
-
const { isOpen, toggle } = useAccordion({ id, defaultOpen });
|
|
107
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
108
|
-
BaseExpandablePanel,
|
|
109
|
-
{
|
|
110
|
-
...rest,
|
|
111
|
-
contentStyle,
|
|
112
|
-
id,
|
|
113
|
-
onToggle: toggle,
|
|
114
|
-
open: isOpen
|
|
115
|
-
}
|
|
116
|
-
);
|
|
117
|
-
};
|
|
118
|
-
const ExpandablePanel = ({
|
|
119
|
-
defaultOpen = false,
|
|
120
|
-
contentStyle,
|
|
121
|
-
...rest
|
|
122
|
-
}) => {
|
|
123
|
-
const randomId = utils.useRandomId("eds-expandable");
|
|
124
|
-
const [isOpen, setOpen] = React.useState(defaultOpen);
|
|
125
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
126
|
-
BaseExpandablePanel,
|
|
127
|
-
{
|
|
128
|
-
id: randomId,
|
|
129
|
-
open: isOpen,
|
|
130
|
-
onToggle: () => setOpen((prev) => !prev),
|
|
131
|
-
contentStyle,
|
|
132
|
-
...rest
|
|
133
|
-
}
|
|
134
|
-
);
|
|
135
|
-
};
|
|
136
|
-
const ExpandableTextButton = ({
|
|
137
|
-
children,
|
|
138
|
-
open,
|
|
139
|
-
onToggle,
|
|
140
|
-
as: Component = typography.Heading5,
|
|
141
|
-
...rest
|
|
142
|
-
}) => {
|
|
143
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
144
|
-
"button",
|
|
145
|
-
{
|
|
146
|
-
className: "eds-expandable-text__trigger",
|
|
147
|
-
"aria-expanded": open,
|
|
148
|
-
type: "button",
|
|
149
|
-
onClick: onToggle,
|
|
150
|
-
...rest,
|
|
151
|
-
children: [
|
|
152
|
-
/* @__PURE__ */ jsxRuntime.jsx(Component, { children }),
|
|
153
|
-
/* @__PURE__ */ jsxRuntime.jsx(ExpandArrow, { open, className: "eds-expandable-text__arrow" })
|
|
154
|
-
]
|
|
155
|
-
}
|
|
156
|
-
);
|
|
157
|
-
};
|
|
158
|
-
const ExpandableText = ({
|
|
159
|
-
title,
|
|
160
|
-
children,
|
|
161
|
-
defaultOpen = false,
|
|
162
|
-
contentStyle,
|
|
163
|
-
titleElement = "Heading5",
|
|
164
|
-
disableAnimation,
|
|
165
|
-
className,
|
|
166
|
-
...rest
|
|
167
|
-
}) => {
|
|
168
|
-
const randomId = utils.useRandomId("eds-expandable-text");
|
|
169
|
-
const [isOpen, setOpen] = React.useState(defaultOpen);
|
|
170
|
-
const Element = React.useMemo(
|
|
171
|
-
() => GetTypographyComponent(titleElement),
|
|
172
|
-
[titleElement]
|
|
173
|
-
);
|
|
174
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
175
|
-
"div",
|
|
176
|
-
{
|
|
177
|
-
className: classNames("eds-expandable-text", className, {
|
|
178
|
-
"eds-expandable-text--disable-animation": disableAnimation
|
|
179
|
-
}),
|
|
180
|
-
children: [
|
|
181
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
182
|
-
ExpandableTextButton,
|
|
183
|
-
{
|
|
184
|
-
open: isOpen,
|
|
185
|
-
onToggle: () => setOpen((prev) => !prev),
|
|
186
|
-
"aria-controls": isOpen ? randomId : void 0,
|
|
187
|
-
as: Element,
|
|
188
|
-
...rest,
|
|
189
|
-
children: title
|
|
190
|
-
}
|
|
191
|
-
),
|
|
192
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
193
|
-
BaseExpand,
|
|
194
|
-
{
|
|
195
|
-
className: "eds-expandable-text__content",
|
|
196
|
-
id: randomId,
|
|
197
|
-
open: isOpen,
|
|
198
|
-
style: contentStyle,
|
|
199
|
-
...rest,
|
|
200
|
-
children
|
|
201
|
-
}
|
|
202
|
-
)
|
|
203
|
-
]
|
|
204
|
-
}
|
|
205
|
-
);
|
|
206
|
-
};
|
|
207
|
-
function GetTypographyComponent(element) {
|
|
208
|
-
switch (element) {
|
|
209
|
-
case "Heading5":
|
|
210
|
-
return typography.Heading5;
|
|
211
|
-
case "Heading4":
|
|
212
|
-
return typography.Heading4;
|
|
213
|
-
case "Heading3":
|
|
214
|
-
return typography.Heading3;
|
|
215
|
-
case "Heading2":
|
|
216
|
-
return typography.Heading2;
|
|
217
|
-
case "Paragraph":
|
|
218
|
-
return typography.Paragraph;
|
|
219
|
-
case "SubParagraph":
|
|
220
|
-
return typography.SubParagraph;
|
|
221
|
-
default:
|
|
222
|
-
return typography.Heading5;
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
utils.warnAboutMissingStyles("expand", "typography", "icons");
|
|
226
|
-
exports.Accordion = Accordion;
|
|
227
|
-
exports.AccordionItem = AccordionItem;
|
|
228
|
-
exports.BaseExpand = BaseExpand;
|
|
229
|
-
exports.ExpandArrow = ExpandArrow;
|
|
230
|
-
exports.ExpandablePanel = ExpandablePanel;
|
|
231
|
-
exports.ExpandableText = ExpandableText;
|
|
232
|
-
exports.ExpandableTextButton = ExpandableTextButton;
|
|
233
|
-
exports.useAccordion = useAccordion;
|
|
234
|
-
//# sourceMappingURL=expand.cjs.js.map
|