@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/expand.esm.js
CHANGED
|
@@ -1,234 +1,248 @@
|
|
|
1
|
-
import { useRandomId, warnAboutMissingStyles } from
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import { useRandomId, warnAboutMissingStyles } from '@entur/utils';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { Heading5, SubParagraph, Paragraph, Heading2, Heading3, Heading4 } from '@entur/typography';
|
|
5
|
+
import { UnmountClosed } from 'react-collapse';
|
|
6
|
+
import { DownArrowIcon } from '@entur/icons';
|
|
7
|
+
|
|
8
|
+
function _extends() {
|
|
9
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
10
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
11
|
+
var t = arguments[e];
|
|
12
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
13
|
+
}
|
|
14
|
+
return n;
|
|
15
|
+
}, _extends.apply(null, arguments);
|
|
16
|
+
}
|
|
17
|
+
function _objectDestructuringEmpty(t) {
|
|
18
|
+
if (null == t) throw new TypeError("Cannot destructure " + t);
|
|
19
|
+
}
|
|
20
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
21
|
+
if (null == r) return {};
|
|
22
|
+
var t = {};
|
|
23
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
24
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
25
|
+
t[n] = r[n];
|
|
26
|
+
}
|
|
27
|
+
return t;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
var AccordionContext = /*#__PURE__*/React.createContext(null);
|
|
31
|
+
var Accordion = function Accordion(_ref) {
|
|
32
|
+
var rest = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
33
|
+
var currentlyOpenState = React.useState(null);
|
|
34
|
+
return React.createElement(AccordionContext.Provider, _extends({
|
|
35
|
+
value: currentlyOpenState
|
|
36
|
+
}, rest));
|
|
12
37
|
};
|
|
13
|
-
|
|
14
|
-
|
|
38
|
+
var useAccordion = function useAccordion(_ref2) {
|
|
39
|
+
var id = _ref2.id,
|
|
40
|
+
defaultOpen = _ref2.defaultOpen;
|
|
41
|
+
var contextValue = React.useContext(AccordionContext);
|
|
15
42
|
if (!contextValue) {
|
|
16
|
-
throw new Error(
|
|
43
|
+
throw new Error('You need to wrap your AccordionItem inside an Accordion');
|
|
17
44
|
}
|
|
18
|
-
|
|
19
|
-
|
|
45
|
+
var openId = contextValue[0],
|
|
46
|
+
setOpenId = contextValue[1];
|
|
47
|
+
React.useEffect(function () {
|
|
20
48
|
if (defaultOpen) {
|
|
21
49
|
setOpenId(id);
|
|
22
50
|
}
|
|
23
51
|
}, [defaultOpen, id, setOpenId]);
|
|
24
|
-
|
|
52
|
+
var isOpen = openId === id;
|
|
25
53
|
return {
|
|
26
|
-
isOpen,
|
|
27
|
-
toggle: ()
|
|
54
|
+
isOpen: isOpen,
|
|
55
|
+
toggle: function toggle() {
|
|
56
|
+
return setOpenId(isOpen ? null : id);
|
|
57
|
+
}
|
|
28
58
|
};
|
|
29
59
|
};
|
|
30
|
-
|
|
31
|
-
|
|
60
|
+
|
|
61
|
+
var _excluded$6 = ["open"];
|
|
62
|
+
var BaseExpand = function BaseExpand(_ref) {
|
|
63
|
+
var open = _ref.open,
|
|
64
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
65
|
+
return React.createElement(UnmountClosed, {
|
|
66
|
+
isOpened: open
|
|
67
|
+
}, React.createElement("div", _extends({}, rest)));
|
|
32
68
|
};
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
);
|
|
69
|
+
|
|
70
|
+
var _excluded$5 = ["open", "className"];
|
|
71
|
+
var ExpandArrow = function ExpandArrow(_ref) {
|
|
72
|
+
var _ref$open = _ref.open,
|
|
73
|
+
open = _ref$open === void 0 ? false : _ref$open,
|
|
74
|
+
className = _ref.className,
|
|
75
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
76
|
+
return React.createElement(DownArrowIcon, _extends({
|
|
77
|
+
className: classNames(className, 'eds-expandable-arrow', {
|
|
78
|
+
'eds-expandable-arrow--open': open
|
|
79
|
+
})
|
|
80
|
+
}, rest, {
|
|
81
|
+
"aria-hidden": "true"
|
|
82
|
+
}));
|
|
48
83
|
};
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
id,
|
|
87
|
-
open,
|
|
88
|
-
style: contentStyle,
|
|
89
|
-
children
|
|
90
|
-
}
|
|
91
|
-
)
|
|
92
|
-
]
|
|
93
|
-
}
|
|
94
|
-
);
|
|
84
|
+
|
|
85
|
+
var _excluded$4 = ["title", "children", "className", "id", "open", "onToggle", "contentStyle", "disableAnimation"];
|
|
86
|
+
var BaseExpandablePanel = function BaseExpandablePanel(_ref) {
|
|
87
|
+
var title = _ref.title,
|
|
88
|
+
children = _ref.children,
|
|
89
|
+
className = _ref.className,
|
|
90
|
+
id = _ref.id,
|
|
91
|
+
open = _ref.open,
|
|
92
|
+
onToggle = _ref.onToggle,
|
|
93
|
+
contentStyle = _ref.contentStyle,
|
|
94
|
+
disableAnimation = _ref.disableAnimation,
|
|
95
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
96
|
+
return React.createElement("div", {
|
|
97
|
+
className: classNames('eds-expandable-panel', className, {
|
|
98
|
+
'eds-expandable-panel--disable-animation': disableAnimation
|
|
99
|
+
})
|
|
100
|
+
}, React.createElement("button", _extends({
|
|
101
|
+
type: "button",
|
|
102
|
+
className: "eds-expandable-panel__trigger",
|
|
103
|
+
onClick: onToggle,
|
|
104
|
+
"aria-expanded": open,
|
|
105
|
+
"aria-controls": open ? id : undefined
|
|
106
|
+
}, rest), React.createElement("span", {
|
|
107
|
+
className: "eds-expandable-panel__grid"
|
|
108
|
+
}, React.createElement(Heading5, {
|
|
109
|
+
margin: "none",
|
|
110
|
+
as: "span"
|
|
111
|
+
}, title), React.createElement("span", {
|
|
112
|
+
className: "eds-expandable-panel__icon-container"
|
|
113
|
+
}, React.createElement(ExpandArrow, {
|
|
114
|
+
open: open
|
|
115
|
+
})))), React.createElement(BaseExpand, {
|
|
116
|
+
className: "eds-expandable-panel__content",
|
|
117
|
+
id: id,
|
|
118
|
+
open: open,
|
|
119
|
+
style: contentStyle
|
|
120
|
+
}, children));
|
|
95
121
|
};
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
122
|
+
|
|
123
|
+
var _excluded$3 = ["defaultOpen", "id", "contentStyle"];
|
|
124
|
+
var AccordionItem = function AccordionItem(_ref) {
|
|
125
|
+
var _ref$defaultOpen = _ref.defaultOpen,
|
|
126
|
+
defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
|
|
127
|
+
overrideId = _ref.id,
|
|
128
|
+
contentStyle = _ref.contentStyle,
|
|
129
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
130
|
+
var randomId = useRandomId('eds-accordion-item');
|
|
131
|
+
var id = overrideId || randomId;
|
|
132
|
+
var _useAccordion = useAccordion({
|
|
133
|
+
id: id,
|
|
134
|
+
defaultOpen: defaultOpen
|
|
135
|
+
}),
|
|
136
|
+
isOpen = _useAccordion.isOpen,
|
|
137
|
+
toggle = _useAccordion.toggle;
|
|
138
|
+
return React.createElement(BaseExpandablePanel, _extends({}, rest, {
|
|
139
|
+
contentStyle: contentStyle,
|
|
140
|
+
id: id,
|
|
141
|
+
onToggle: toggle,
|
|
142
|
+
open: isOpen
|
|
143
|
+
}));
|
|
115
144
|
};
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
145
|
+
|
|
146
|
+
var _excluded$2 = ["defaultOpen", "contentStyle"];
|
|
147
|
+
var ExpandablePanel = function ExpandablePanel(_ref) {
|
|
148
|
+
var _ref$defaultOpen = _ref.defaultOpen,
|
|
149
|
+
defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
|
|
150
|
+
contentStyle = _ref.contentStyle,
|
|
151
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
152
|
+
var randomId = useRandomId('eds-expandable');
|
|
153
|
+
var _React$useState = React.useState(defaultOpen),
|
|
154
|
+
isOpen = _React$useState[0],
|
|
155
|
+
setOpen = _React$useState[1];
|
|
156
|
+
return React.createElement(BaseExpandablePanel, _extends({
|
|
157
|
+
id: randomId,
|
|
158
|
+
open: isOpen,
|
|
159
|
+
onToggle: function onToggle() {
|
|
160
|
+
return setOpen(function (prev) {
|
|
161
|
+
return !prev;
|
|
162
|
+
});
|
|
163
|
+
},
|
|
164
|
+
contentStyle: contentStyle
|
|
165
|
+
}, rest));
|
|
133
166
|
};
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
]
|
|
153
|
-
}
|
|
154
|
-
);
|
|
167
|
+
|
|
168
|
+
var _excluded$1 = ["children", "open", "onToggle", "as"];
|
|
169
|
+
var ExpandableTextButton = function ExpandableTextButton(_ref) {
|
|
170
|
+
var children = _ref.children,
|
|
171
|
+
open = _ref.open,
|
|
172
|
+
onToggle = _ref.onToggle,
|
|
173
|
+
_ref$as = _ref.as,
|
|
174
|
+
Component = _ref$as === void 0 ? Heading5 : _ref$as,
|
|
175
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
176
|
+
return React.createElement("button", _extends({
|
|
177
|
+
className: "eds-expandable-text__trigger",
|
|
178
|
+
"aria-expanded": open,
|
|
179
|
+
type: "button",
|
|
180
|
+
onClick: onToggle
|
|
181
|
+
}, rest), React.createElement(Component, null, children), React.createElement(ExpandArrow, {
|
|
182
|
+
open: open,
|
|
183
|
+
className: "eds-expandable-text__arrow"
|
|
184
|
+
}));
|
|
155
185
|
};
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
open: isOpen,
|
|
196
|
-
style: contentStyle,
|
|
197
|
-
...rest,
|
|
198
|
-
children
|
|
199
|
-
}
|
|
200
|
-
)
|
|
201
|
-
]
|
|
202
|
-
}
|
|
203
|
-
);
|
|
186
|
+
|
|
187
|
+
var _excluded = ["title", "children", "defaultOpen", "contentStyle", "titleElement", "disableAnimation", "className"];
|
|
188
|
+
var ExpandableText = function ExpandableText(_ref) {
|
|
189
|
+
var title = _ref.title,
|
|
190
|
+
children = _ref.children,
|
|
191
|
+
_ref$defaultOpen = _ref.defaultOpen,
|
|
192
|
+
defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
|
|
193
|
+
contentStyle = _ref.contentStyle,
|
|
194
|
+
_ref$titleElement = _ref.titleElement,
|
|
195
|
+
titleElement = _ref$titleElement === void 0 ? 'Heading5' : _ref$titleElement,
|
|
196
|
+
disableAnimation = _ref.disableAnimation,
|
|
197
|
+
className = _ref.className,
|
|
198
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
199
|
+
var randomId = useRandomId('eds-expandable-text');
|
|
200
|
+
var _React$useState = React.useState(defaultOpen),
|
|
201
|
+
isOpen = _React$useState[0],
|
|
202
|
+
setOpen = _React$useState[1];
|
|
203
|
+
var Element = React.useMemo(function () {
|
|
204
|
+
return GetTypographyComponent(titleElement);
|
|
205
|
+
}, [titleElement]);
|
|
206
|
+
return React.createElement("div", {
|
|
207
|
+
className: classNames('eds-expandable-text', className, {
|
|
208
|
+
'eds-expandable-text--disable-animation': disableAnimation
|
|
209
|
+
})
|
|
210
|
+
}, React.createElement(ExpandableTextButton, _extends({
|
|
211
|
+
open: isOpen,
|
|
212
|
+
onToggle: function onToggle() {
|
|
213
|
+
return setOpen(function (prev) {
|
|
214
|
+
return !prev;
|
|
215
|
+
});
|
|
216
|
+
},
|
|
217
|
+
"aria-controls": isOpen ? randomId : undefined,
|
|
218
|
+
as: Element
|
|
219
|
+
}, rest), title), React.createElement(BaseExpand, _extends({
|
|
220
|
+
className: "eds-expandable-text__content",
|
|
221
|
+
id: randomId,
|
|
222
|
+
open: isOpen,
|
|
223
|
+
style: contentStyle
|
|
224
|
+
}, rest), children));
|
|
204
225
|
};
|
|
205
226
|
function GetTypographyComponent(element) {
|
|
206
227
|
switch (element) {
|
|
207
|
-
case
|
|
228
|
+
case 'Heading5':
|
|
208
229
|
return Heading5;
|
|
209
|
-
case
|
|
230
|
+
case 'Heading4':
|
|
210
231
|
return Heading4;
|
|
211
|
-
case
|
|
232
|
+
case 'Heading3':
|
|
212
233
|
return Heading3;
|
|
213
|
-
case
|
|
234
|
+
case 'Heading2':
|
|
214
235
|
return Heading2;
|
|
215
|
-
case
|
|
236
|
+
case 'Paragraph':
|
|
216
237
|
return Paragraph;
|
|
217
|
-
case
|
|
238
|
+
case 'SubParagraph':
|
|
218
239
|
return SubParagraph;
|
|
219
240
|
default:
|
|
220
241
|
return Heading5;
|
|
221
242
|
}
|
|
222
243
|
}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
BaseExpand,
|
|
228
|
-
ExpandArrow,
|
|
229
|
-
ExpandablePanel,
|
|
230
|
-
ExpandableText,
|
|
231
|
-
ExpandableTextButton,
|
|
232
|
-
useAccordion
|
|
233
|
-
};
|
|
244
|
+
|
|
245
|
+
warnAboutMissingStyles('expand', 'typography', 'icons');
|
|
246
|
+
|
|
247
|
+
export { Accordion, AccordionItem, BaseExpand, ExpandArrow, ExpandablePanel, ExpandableText, ExpandableTextButton, useAccordion };
|
|
234
248
|
//# sourceMappingURL=expand.esm.js.map
|
package/dist/expand.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expand.esm.js","sources":["../src/Accordion.tsx","../src/BaseExpand.tsx","../src/ExpandArrow.tsx","../src/BaseExpandablePanel.tsx","../src/AccordionItem.tsx","../src/ExpandablePanel.tsx","../src/ExpandableTextButton.tsx","../src/ExpandableText.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype Id = string | null;\ntype AccordionContextType = [Id, React.Dispatch<React.SetStateAction<Id>>];\nconst AccordionContext = React.createContext<AccordionContextType | null>(null);\n\nexport type AccordionProps = {\n /** To eller flere AccordionItem-komponenter */\n children: React.ReactNode;\n [key: string]: any;\n};\n\nexport const Accordion: React.FC<AccordionProps> = ({ ...rest }) => {\n const currentlyOpenState = React.useState<Id>(null);\n return <AccordionContext.Provider value={currentlyOpenState} {...rest} />;\n};\n\ntype UseAccordionArgs = {\n id: Id;\n defaultOpen?: boolean;\n};\n\nexport const useAccordion: ({ id, defaultOpen }: UseAccordionArgs) => {\n isOpen: boolean;\n toggle: () => void;\n} = ({ id, defaultOpen }: UseAccordionArgs) => {\n const contextValue = React.useContext(AccordionContext);\n if (!contextValue) {\n throw new Error('You need to wrap your AccordionItem inside an Accordion');\n }\n\n const [openId, setOpenId] = contextValue;\n\n React.useEffect(() => {\n if (defaultOpen) {\n setOpenId(id);\n }\n }, [defaultOpen, id, setOpenId]);\n\n const isOpen = openId === id;\n\n return {\n isOpen,\n toggle: () => setOpenId(isOpen ? null : id),\n };\n};\n","import React from 'react';\n\nimport { UnmountClosed } from 'react-collapse';\n\nimport './BaseExpand.scss';\n\ntype BaseExpandProps = {\n /** Innholdet som skal være expandable */\n children: React.ReactNode;\n /** Boolean for om innholdet vises eller ikke */\n open: boolean;\n [key: string]: any;\n};\nexport const BaseExpand: React.FC<BaseExpandProps> = ({ open, ...rest }) => {\n return (\n <UnmountClosed isOpened={open}>\n <div {...rest} />\n </UnmountClosed>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport './ExpandArrow.scss';\n\ntype ExpandArrowProps = {\n /** Om innholdet er åpent eller ikke, som bestemmer retningen på pila\n * @default false\n */\n open?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n [key: string]: any;\n};\n\nexport const ExpandArrow: React.FC<ExpandArrowProps> = ({\n open = false,\n className,\n ...rest\n}) => {\n return (\n <DownArrowIcon\n className={classNames(className, 'eds-expandable-arrow', {\n 'eds-expandable-arrow--open': open,\n })}\n {...rest}\n aria-hidden=\"true\"\n />\n );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\n\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\nimport { ExpandArrow } from './ExpandArrow';\n\nimport './BaseExpandablePanel.scss';\n\ntype BaseExpandablePanelProps = {\n /** Teksten som skal stå i panelet */\n title: React.ReactNode;\n /** Innholdet som skal vises under panelet */\n children: React.ReactNode;\n /** IDen til expand-panelet */\n id: string;\n /** Prop for om innholdet er åpent */\n open: boolean;\n /** Funksjonen som styrer åpningen av BaseExpandablePanel */\n onToggle: () => void;\n /** Styling som sendes til innholdet av BaseExpandablePanel */\n contentStyle?: CSSProperties;\n disableAnimation?: boolean;\n [key: string]: any;\n};\nexport const BaseExpandablePanel: React.FC<BaseExpandablePanelProps> = ({\n title,\n children,\n className,\n id,\n open,\n onToggle,\n contentStyle,\n disableAnimation,\n ...rest\n}) => {\n return (\n <div\n className={classNames('eds-expandable-panel', className, {\n 'eds-expandable-panel--disable-animation': disableAnimation,\n })}\n >\n <button\n type=\"button\"\n className=\"eds-expandable-panel__trigger\"\n onClick={onToggle}\n aria-expanded={open}\n aria-controls={open ? id : undefined}\n {...rest}\n >\n <span className=\"eds-expandable-panel__grid\">\n <Heading5 margin=\"none\" as=\"span\">\n {title}\n </Heading5>\n <span className=\"eds-expandable-panel__icon-container\">\n <ExpandArrow open={open} />\n </span>\n </span>\n </button>\n <BaseExpand\n className=\"eds-expandable-panel__content\"\n id={id}\n open={open}\n style={contentStyle}\n >\n {children}\n </BaseExpand>\n </div>\n );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\nimport { useAccordion } from './Accordion';\n\nexport type AccordionItemProps = {\n /** Teksten som skal stå i panelet */\n title: React.ReactNode;\n /** Innholdet som skal vises under panelet */\n children: React.ReactNode;\n /** Hvilken tilstand AccordionItem skal ha som default\n * @default false\n */\n defaultOpen?: boolean;\n /** Styling som sendes til innholdet av AccordionItem */\n contentStyle?: CSSProperties;\n disableAnimation?: boolean;\n [key: string]: any;\n};\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n defaultOpen = false,\n id: overrideId,\n contentStyle,\n ...rest\n}) => {\n const randomId = useRandomId('eds-accordion-item');\n const id = overrideId || randomId;\n const { isOpen, toggle } = useAccordion({ id, defaultOpen });\n\n return (\n <BaseExpandablePanel\n {...rest}\n contentStyle={contentStyle}\n id={id}\n onToggle={toggle}\n open={isOpen}\n />\n );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\n\nexport type ExpandablePanelProps = {\n /** Teksten som skal stå i panelet */\n title: React.ReactNode;\n /** Innholdet som skal vises under panelet */\n children: React.ReactNode;\n /** Hvilken tilstand ExpandablePanel skal ha som default\n * @default false\n */\n defaultOpen?: boolean;\n /** Funksjonen som styrer åpningen av ExpandablePanel */\n onToggle?: () => void;\n /** Styling som sendes til innholdet av ExpandablePanel */\n contentStyle?: CSSProperties;\n [key: string]: any;\n};\nexport const ExpandablePanel: React.FC<ExpandablePanelProps> = ({\n defaultOpen = false,\n contentStyle,\n ...rest\n}) => {\n const randomId = useRandomId('eds-expandable');\n\n const [isOpen, setOpen] = React.useState(defaultOpen);\n\n return (\n <BaseExpandablePanel\n id={randomId}\n open={isOpen}\n onToggle={() => setOpen(prev => !prev)}\n contentStyle={contentStyle}\n {...rest}\n />\n );\n};\n","import React from 'react';\nimport { Heading5 } from '@entur/typography';\nimport { ExpandArrow } from './ExpandArrow';\n\nexport type ExandableTextButtonProps = {\n children: React.ReactNode;\n /** Prop for om innholdet er åpent */\n open?: boolean;\n /** Funksjonen som styrer åpningen av ExpandableTextButton */\n onToggle: () => void;\n /** Den typografiske komponenten for tittelen\n * @default Heading5\n */\n as?: React.ElementType;\n [key: string]: any;\n};\n\nexport const ExpandableTextButton: React.FC<ExandableTextButtonProps> = ({\n children,\n open,\n onToggle,\n as: Component = Heading5,\n ...rest\n}) => {\n return (\n <button\n className=\"eds-expandable-text__trigger\"\n aria-expanded={open}\n type=\"button\"\n onClick={onToggle}\n {...rest}\n >\n <Component>{children}</Component>\n <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" />\n </button>\n );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\n\nimport { useRandomId } from '@entur/utils';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport {\n Heading2,\n Heading3,\n Heading4,\n Heading5,\n Paragraph,\n SubParagraph,\n} from '@entur/typography';\n\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = {\n /** Teksten som skal \"vises\" */\n title: React.ReactNode;\n /** Innholdet som skal vises under linken */\n children: React.ReactNode;\n /** Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)\n * @default false\n */\n defaultOpen?: boolean;\n /** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle */\n open?: boolean;\n /** Funksjonen som styrer åpningen av ExpandableText */\n onToggle?: () => void;\n /**Styling som sendes til innholdet av ExpandableText */\n contentStyle?: CSSProperties;\n /** Hvilket typografisk element tittelen er\n * @default \"Heading5\"\n */\n titleElement?: 'Heading5' | 'Paragraph' | 'SubParagraph';\n disableAnimation?: boolean;\n [key: string]: any;\n};\n\nexport const ExpandableText: React.FC<ExpandableTextProps> = ({\n title,\n children,\n defaultOpen = false,\n contentStyle,\n titleElement = 'Heading5',\n disableAnimation,\n className,\n ...rest\n}) => {\n const randomId = useRandomId('eds-expandable-text');\n const [isOpen, setOpen] = React.useState(defaultOpen);\n\n const Element: React.ElementType = React.useMemo(\n () => GetTypographyComponent(titleElement),\n [titleElement],\n );\n\n return (\n <div\n className={classNames('eds-expandable-text', className, {\n 'eds-expandable-text--disable-animation': disableAnimation,\n })}\n >\n <ExpandableTextButton\n open={isOpen}\n onToggle={() => setOpen(prev => !prev)}\n aria-controls={isOpen ? randomId : undefined}\n as={Element}\n {...rest}\n >\n {title}\n </ExpandableTextButton>\n <BaseExpand\n className=\"eds-expandable-text__content\"\n id={randomId}\n open={isOpen}\n style={contentStyle}\n {...rest}\n >\n {children}\n </BaseExpand>\n </div>\n );\n};\n\nfunction GetTypographyComponent(\n element:\n | 'Heading5'\n | 'Heading4'\n | 'Heading3'\n | 'Heading2'\n | 'Paragraph'\n | 'SubParagraph',\n) {\n switch (element) {\n case 'Heading5':\n return Heading5;\n case 'Heading4':\n return Heading4;\n case 'Heading3':\n return Heading3;\n case 'Heading2':\n return Heading2;\n case 'Paragraph':\n return Paragraph;\n case 'SubParagraph':\n return SubParagraph;\n default:\n return Heading5;\n }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('expand', 'typography', 'icons');\n\nexport * from './Accordion';\nexport * from './AccordionItem';\nexport * from './ExpandablePanel';\nexport * from './BaseExpand';\nexport * from './ExpandableText';\nexport * from './ExpandableTextButton';\nexport * from './ExpandArrow';\n"],"names":[],"mappings":";;;;;;;AAIA,MAAM,mBAAmB,MAAM,cAA2C,IAAI;AAQvE,MAAM,YAAsC,CAAC,EAAE,GAAG,WAAW;AAClE,QAAM,qBAAqB,MAAM,SAAa,IAAI;AAClD,6BAAQ,iBAAiB,UAAjB,EAA0B,OAAO,oBAAqB,GAAG,MAAM;AACzE;AAOO,MAAM,eAGT,CAAC,EAAE,IAAI,kBAAoC;AAC7C,QAAM,eAAe,MAAM,WAAW,gBAAgB;AACtD,MAAI,CAAC,cAAc;AACjB,UAAM,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,QAAM,CAAC,QAAQ,SAAS,IAAI;AAE5B,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa;AACf,gBAAU,EAAE;AAAA,IACd;AAAA,EACF,GAAG,CAAC,aAAa,IAAI,SAAS,CAAC;AAE/B,QAAM,SAAS,WAAW;AAE1B,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,MAAM,UAAU,SAAS,OAAO,EAAE;AAAA,EAAA;AAE9C;AChCO,MAAM,aAAwC,CAAC,EAAE,MAAM,GAAG,WAAW;AAC1E,SACE,oBAAC,iBAAc,UAAU,MACvB,8BAAC,OAAA,EAAK,GAAG,MAAM,EAAA,CACjB;AAEJ;ACJO,MAAM,cAA0C,CAAC;AAAA,EACtD,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,WAAW,wBAAwB;AAAA,QACvD,8BAA8B;AAAA,MAAA,CAC/B;AAAA,MACA,GAAG;AAAA,MACJ,eAAY;AAAA,IAAA;AAAA,EAAA;AAGlB;ACJO,MAAM,sBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,wBAAwB,WAAW;AAAA,QACvD,2CAA2C;AAAA,MAAA,CAC5C;AAAA,MAED,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS;AAAA,YACT,iBAAe;AAAA,YACf,iBAAe,OAAO,KAAK;AAAA,YAC1B,GAAG;AAAA,YAEJ,UAAA,qBAAC,QAAA,EAAK,WAAU,8BACd,UAAA;AAAA,cAAA,oBAAC,UAAA,EAAS,QAAO,QAAO,IAAG,QACxB,UAAA,OACH;AAAA,kCACC,QAAA,EAAK,WAAU,wCACd,UAAA,oBAAC,aAAA,EAAY,MAAY,EAAA,CAC3B;AAAA,YAAA,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YAEN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AClDO,MAAM,gBAA8C,CAAC;AAAA,EAC1D,cAAc;AAAA,EACd,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,YAAY,oBAAoB;AACjD,QAAM,KAAK,cAAc;AACzB,QAAM,EAAE,QAAQ,OAAA,IAAW,aAAa,EAAE,IAAI,aAAa;AAE3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;ACnBO,MAAM,kBAAkD,CAAC;AAAA,EAC9D,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,YAAY,gBAAgB;AAE7C,QAAM,CAAC,QAAQ,OAAO,IAAI,MAAM,SAAS,WAAW;AAEpD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,UAAU,MAAM,QAAQ,CAAA,SAAQ,CAAC,IAAI;AAAA,MACrC;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;ACpBO,MAAM,uBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI,YAAY;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,iBAAe;AAAA,MACf,MAAK;AAAA,MACL,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,aAAW,UAAS;AAAA,QACrB,oBAAC,aAAA,EAAY,MAAY,WAAU,6BAAA,CAA6B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtE;ACIO,MAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,YAAY,qBAAqB;AAClD,QAAM,CAAC,QAAQ,OAAO,IAAI,MAAM,SAAS,WAAW;AAEpD,QAAM,UAA6B,MAAM;AAAA,IACvC,MAAM,uBAAuB,YAAY;AAAA,IACzC,CAAC,YAAY;AAAA,EAAA;AAGf,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,uBAAuB,WAAW;AAAA,QACtD,0CAA0C;AAAA,MAAA,CAC3C;AAAA,MAED,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,UAAU,MAAM,QAAQ,CAAA,SAAQ,CAAC,IAAI;AAAA,YACrC,iBAAe,SAAS,WAAW;AAAA,YACnC,IAAI;AAAA,YACH,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,MAAM;AAAA,YACN,OAAO;AAAA,YACN,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,uBACP,SAOA;AACA,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EAAA;AAEb;AC5GA,uBAAuB,UAAU,cAAc,OAAO;"}
|
|
1
|
+
{"version":3,"file":"expand.esm.js","sources":["../src/Accordion.tsx","../src/BaseExpand.tsx","../src/ExpandArrow.tsx","../src/BaseExpandablePanel.tsx","../src/AccordionItem.tsx","../src/ExpandablePanel.tsx","../src/ExpandableTextButton.tsx","../src/ExpandableText.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype Id = string | null;\ntype AccordionContextType = [Id, React.Dispatch<React.SetStateAction<Id>>];\nconst AccordionContext = React.createContext<AccordionContextType | null>(null);\n\nexport type AccordionProps = {\n /** To eller flere AccordionItem-komponenter */\n children: React.ReactNode;\n [key: string]: any;\n};\n\nexport const Accordion: React.FC<AccordionProps> = ({ ...rest }) => {\n const currentlyOpenState = React.useState<Id>(null);\n return <AccordionContext.Provider value={currentlyOpenState} {...rest} />;\n};\n\ntype UseAccordionArgs = {\n id: Id;\n defaultOpen?: boolean;\n};\n\nexport const useAccordion: ({ id, defaultOpen }: UseAccordionArgs) => {\n isOpen: boolean;\n toggle: () => void;\n} = ({ id, defaultOpen }: UseAccordionArgs) => {\n const contextValue = React.useContext(AccordionContext);\n if (!contextValue) {\n throw new Error('You need to wrap your AccordionItem inside an Accordion');\n }\n\n const [openId, setOpenId] = contextValue;\n\n React.useEffect(() => {\n if (defaultOpen) {\n setOpenId(id);\n }\n }, [defaultOpen, id, setOpenId]);\n\n const isOpen = openId === id;\n\n return {\n isOpen,\n toggle: () => setOpenId(isOpen ? null : id),\n };\n};\n","import React from 'react';\n\nimport { UnmountClosed } from 'react-collapse';\n\nimport './BaseExpand.scss';\n\ntype BaseExpandProps = {\n /** Innholdet som skal være expandable */\n children: React.ReactNode;\n /** Boolean for om innholdet vises eller ikke */\n open: boolean;\n [key: string]: any;\n};\nexport const BaseExpand: React.FC<BaseExpandProps> = ({ open, ...rest }) => {\n return (\n <UnmountClosed isOpened={open}>\n <div {...rest} />\n </UnmountClosed>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport './ExpandArrow.scss';\n\ntype ExpandArrowProps = {\n /** Om innholdet er åpent eller ikke, som bestemmer retningen på pila\n * @default false\n */\n open?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n [key: string]: any;\n};\n\nexport const ExpandArrow: React.FC<ExpandArrowProps> = ({\n open = false,\n className,\n ...rest\n}) => {\n return (\n <DownArrowIcon\n className={classNames(className, 'eds-expandable-arrow', {\n 'eds-expandable-arrow--open': open,\n })}\n {...rest}\n aria-hidden=\"true\"\n />\n );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\n\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\nimport { ExpandArrow } from './ExpandArrow';\n\nimport './BaseExpandablePanel.scss';\n\ntype BaseExpandablePanelProps = {\n /** Teksten som skal stå i panelet */\n title: React.ReactNode;\n /** Innholdet som skal vises under panelet */\n children: React.ReactNode;\n /** IDen til expand-panelet */\n id: string;\n /** Prop for om innholdet er åpent */\n open: boolean;\n /** Funksjonen som styrer åpningen av BaseExpandablePanel */\n onToggle: () => void;\n /** Styling som sendes til innholdet av BaseExpandablePanel */\n contentStyle?: CSSProperties;\n disableAnimation?: boolean;\n [key: string]: any;\n};\nexport const BaseExpandablePanel: React.FC<BaseExpandablePanelProps> = ({\n title,\n children,\n className,\n id,\n open,\n onToggle,\n contentStyle,\n disableAnimation,\n ...rest\n}) => {\n return (\n <div\n className={classNames('eds-expandable-panel', className, {\n 'eds-expandable-panel--disable-animation': disableAnimation,\n })}\n >\n <button\n type=\"button\"\n className=\"eds-expandable-panel__trigger\"\n onClick={onToggle}\n aria-expanded={open}\n aria-controls={open ? id : undefined}\n {...rest}\n >\n <span className=\"eds-expandable-panel__grid\">\n <Heading5 margin=\"none\" as=\"span\">\n {title}\n </Heading5>\n <span className=\"eds-expandable-panel__icon-container\">\n <ExpandArrow open={open} />\n </span>\n </span>\n </button>\n <BaseExpand\n className=\"eds-expandable-panel__content\"\n id={id}\n open={open}\n style={contentStyle}\n >\n {children}\n </BaseExpand>\n </div>\n );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\nimport { useAccordion } from './Accordion';\n\nexport type AccordionItemProps = {\n /** Teksten som skal stå i panelet */\n title: React.ReactNode;\n /** Innholdet som skal vises under panelet */\n children: React.ReactNode;\n /** Hvilken tilstand AccordionItem skal ha som default\n * @default false\n */\n defaultOpen?: boolean;\n /** Styling som sendes til innholdet av AccordionItem */\n contentStyle?: CSSProperties;\n disableAnimation?: boolean;\n [key: string]: any;\n};\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n defaultOpen = false,\n id: overrideId,\n contentStyle,\n ...rest\n}) => {\n const randomId = useRandomId('eds-accordion-item');\n const id = overrideId || randomId;\n const { isOpen, toggle } = useAccordion({ id, defaultOpen });\n\n return (\n <BaseExpandablePanel\n {...rest}\n contentStyle={contentStyle}\n id={id}\n onToggle={toggle}\n open={isOpen}\n />\n );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\n\nexport type ExpandablePanelProps = {\n /** Teksten som skal stå i panelet */\n title: React.ReactNode;\n /** Innholdet som skal vises under panelet */\n children: React.ReactNode;\n /** Hvilken tilstand ExpandablePanel skal ha som default\n * @default false\n */\n defaultOpen?: boolean;\n /** Funksjonen som styrer åpningen av ExpandablePanel */\n onToggle?: () => void;\n /** Styling som sendes til innholdet av ExpandablePanel */\n contentStyle?: CSSProperties;\n [key: string]: any;\n};\nexport const ExpandablePanel: React.FC<ExpandablePanelProps> = ({\n defaultOpen = false,\n contentStyle,\n ...rest\n}) => {\n const randomId = useRandomId('eds-expandable');\n\n const [isOpen, setOpen] = React.useState(defaultOpen);\n\n return (\n <BaseExpandablePanel\n id={randomId}\n open={isOpen}\n onToggle={() => setOpen(prev => !prev)}\n contentStyle={contentStyle}\n {...rest}\n />\n );\n};\n","import React from 'react';\nimport { Heading5 } from '@entur/typography';\nimport { ExpandArrow } from './ExpandArrow';\n\nexport type ExandableTextButtonProps = {\n children: React.ReactNode;\n /** Prop for om innholdet er åpent */\n open?: boolean;\n /** Funksjonen som styrer åpningen av ExpandableTextButton */\n onToggle: () => void;\n /** Den typografiske komponenten for tittelen\n * @default Heading5\n */\n as?: React.ElementType;\n [key: string]: any;\n};\n\nexport const ExpandableTextButton: React.FC<ExandableTextButtonProps> = ({\n children,\n open,\n onToggle,\n as: Component = Heading5,\n ...rest\n}) => {\n return (\n <button\n className=\"eds-expandable-text__trigger\"\n aria-expanded={open}\n type=\"button\"\n onClick={onToggle}\n {...rest}\n >\n <Component>{children}</Component>\n <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" />\n </button>\n );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\n\nimport { useRandomId } from '@entur/utils';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport {\n Heading2,\n Heading3,\n Heading4,\n Heading5,\n Paragraph,\n SubParagraph,\n} from '@entur/typography';\n\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = {\n /** Teksten som skal \"vises\" */\n title: React.ReactNode;\n /** Innholdet som skal vises under linken */\n children: React.ReactNode;\n /** Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)\n * @default false\n */\n defaultOpen?: boolean;\n /** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle */\n open?: boolean;\n /** Funksjonen som styrer åpningen av ExpandableText */\n onToggle?: () => void;\n /**Styling som sendes til innholdet av ExpandableText */\n contentStyle?: CSSProperties;\n /** Hvilket typografisk element tittelen er\n * @default \"Heading5\"\n */\n titleElement?: 'Heading5' | 'Paragraph' | 'SubParagraph';\n disableAnimation?: boolean;\n [key: string]: any;\n};\n\nexport const ExpandableText: React.FC<ExpandableTextProps> = ({\n title,\n children,\n defaultOpen = false,\n contentStyle,\n titleElement = 'Heading5',\n disableAnimation,\n className,\n ...rest\n}) => {\n const randomId = useRandomId('eds-expandable-text');\n const [isOpen, setOpen] = React.useState(defaultOpen);\n\n const Element: React.ElementType = React.useMemo(\n () => GetTypographyComponent(titleElement),\n [titleElement],\n );\n\n return (\n <div\n className={classNames('eds-expandable-text', className, {\n 'eds-expandable-text--disable-animation': disableAnimation,\n })}\n >\n <ExpandableTextButton\n open={isOpen}\n onToggle={() => setOpen(prev => !prev)}\n aria-controls={isOpen ? randomId : undefined}\n as={Element}\n {...rest}\n >\n {title}\n </ExpandableTextButton>\n <BaseExpand\n className=\"eds-expandable-text__content\"\n id={randomId}\n open={isOpen}\n style={contentStyle}\n {...rest}\n >\n {children}\n </BaseExpand>\n </div>\n );\n};\n\nfunction GetTypographyComponent(\n element:\n | 'Heading5'\n | 'Heading4'\n | 'Heading3'\n | 'Heading2'\n | 'Paragraph'\n | 'SubParagraph',\n) {\n switch (element) {\n case 'Heading5':\n return Heading5;\n case 'Heading4':\n return Heading4;\n case 'Heading3':\n return Heading3;\n case 'Heading2':\n return Heading2;\n case 'Paragraph':\n return Paragraph;\n case 'SubParagraph':\n return SubParagraph;\n default:\n return Heading5;\n }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('expand', 'typography', 'icons');\n\nexport * from './Accordion';\nexport * from './AccordionItem';\nexport * from './ExpandablePanel';\nexport * from './BaseExpand';\nexport * from './ExpandableText';\nexport * from './ExpandableTextButton';\nexport * from './ExpandArrow';\n"],"names":["AccordionContext","React","createContext","Accordion","_ref","rest","_extends","_objectDestructuringEmpty","currentlyOpenState","useState","createElement","Provider","value","useAccordion","_ref2","id","defaultOpen","contextValue","useContext","Error","openId","setOpenId","useEffect","isOpen","toggle","BaseExpand","open","_objectWithoutPropertiesLoose","_excluded","UnmountClosed","isOpened","ExpandArrow","_ref$open","className","DownArrowIcon","classNames","BaseExpandablePanel","title","children","onToggle","contentStyle","disableAnimation","type","onClick","undefined","Heading5","margin","as","style","AccordionItem","_ref$defaultOpen","overrideId","randomId","useRandomId","_useAccordion","ExpandablePanel","_React$useState","setOpen","prev","ExpandableTextButton","_ref$as","Component","ExpandableText","_ref$titleElement","titleElement","Element","useMemo","GetTypographyComponent","element","Heading4","Heading3","Heading2","Paragraph","SubParagraph","warnAboutMissingStyles"],"mappings":"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"}
|