@codecademy/brand 5.9.0-alpha.f5dd739f8.0 → 5.9.0-alpha.fe23ab421.0
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/index.d.ts +0 -1
- package/dist/index.js +0 -1
- package/package.json +1 -1
- package/dist/Accordion/index.d.ts +0 -271
- package/dist/Accordion/index.js +0 -109
- package/dist/stories/Molecules/Accordion.stories.js +0 -122
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,271 +0,0 @@
|
|
|
1
|
-
import { StyleProps } from '@codecademy/variance';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
export type AccordionProps = {
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
/**
|
|
6
|
-
* Whether the accordion starts expanded. Ignored when `expanded` is provided.
|
|
7
|
-
*/
|
|
8
|
-
initiallyExpanded?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Controlled expanded state. When provided, the accordion does not manage its own state.
|
|
11
|
-
*/
|
|
12
|
-
expanded?: boolean;
|
|
13
|
-
/**
|
|
14
|
-
* Called when the trigger is clicked, with the next expanded value.
|
|
15
|
-
*/
|
|
16
|
-
onClick?: (nextExpanded: boolean) => void;
|
|
17
|
-
};
|
|
18
|
-
export declare const Accordion: React.FC<AccordionProps>;
|
|
19
|
-
declare const triggerSystemProps: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").Compose<[import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
|
|
20
|
-
readonly p: {
|
|
21
|
-
readonly property: "padding";
|
|
22
|
-
readonly scale: "spacing";
|
|
23
|
-
};
|
|
24
|
-
readonly px: {
|
|
25
|
-
readonly property: "padding";
|
|
26
|
-
readonly properties: {
|
|
27
|
-
readonly physical: readonly ["paddingLeft", "paddingRight"];
|
|
28
|
-
readonly logical: readonly ["paddingInlineStart", "paddingInlineEnd"];
|
|
29
|
-
};
|
|
30
|
-
readonly scale: "spacing";
|
|
31
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
32
|
-
};
|
|
33
|
-
readonly py: {
|
|
34
|
-
readonly property: "padding";
|
|
35
|
-
readonly properties: {
|
|
36
|
-
readonly physical: readonly ["paddingTop", "paddingBottom"];
|
|
37
|
-
readonly logical: readonly ["paddingBlockStart", "paddingBlockEnd"];
|
|
38
|
-
};
|
|
39
|
-
readonly scale: "spacing";
|
|
40
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
41
|
-
};
|
|
42
|
-
readonly pt: {
|
|
43
|
-
readonly property: {
|
|
44
|
-
readonly physical: "paddingTop";
|
|
45
|
-
readonly logical: "paddingBlockStart";
|
|
46
|
-
};
|
|
47
|
-
readonly scale: "spacing";
|
|
48
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
49
|
-
};
|
|
50
|
-
readonly pb: {
|
|
51
|
-
readonly property: {
|
|
52
|
-
readonly physical: "paddingBottom";
|
|
53
|
-
readonly logical: "paddingBlockEnd";
|
|
54
|
-
};
|
|
55
|
-
readonly scale: "spacing";
|
|
56
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
57
|
-
};
|
|
58
|
-
readonly pr: {
|
|
59
|
-
readonly property: {
|
|
60
|
-
readonly physical: "paddingRight";
|
|
61
|
-
readonly logical: "paddingInlineEnd";
|
|
62
|
-
};
|
|
63
|
-
readonly scale: "spacing";
|
|
64
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
65
|
-
};
|
|
66
|
-
readonly pl: {
|
|
67
|
-
readonly property: {
|
|
68
|
-
readonly physical: "paddingLeft";
|
|
69
|
-
readonly logical: "paddingInlineStart";
|
|
70
|
-
};
|
|
71
|
-
readonly scale: "spacing";
|
|
72
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
73
|
-
};
|
|
74
|
-
readonly m: {
|
|
75
|
-
readonly property: "margin";
|
|
76
|
-
readonly scale: "spacing";
|
|
77
|
-
};
|
|
78
|
-
readonly mx: {
|
|
79
|
-
readonly property: "margin";
|
|
80
|
-
readonly properties: {
|
|
81
|
-
readonly physical: readonly ["marginLeft", "marginRight"];
|
|
82
|
-
readonly logical: readonly ["marginInlineStart", "marginInlineEnd"];
|
|
83
|
-
};
|
|
84
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
85
|
-
readonly scale: "spacing";
|
|
86
|
-
};
|
|
87
|
-
readonly my: {
|
|
88
|
-
readonly property: "margin";
|
|
89
|
-
readonly properties: {
|
|
90
|
-
readonly physical: readonly ["marginTop", "marginBottom"];
|
|
91
|
-
readonly logical: readonly ["marginBlockStart", "marginBlockEnd"];
|
|
92
|
-
};
|
|
93
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
94
|
-
readonly scale: "spacing";
|
|
95
|
-
};
|
|
96
|
-
readonly mt: {
|
|
97
|
-
readonly property: {
|
|
98
|
-
readonly physical: "marginTop";
|
|
99
|
-
readonly logical: "marginBlockStart";
|
|
100
|
-
};
|
|
101
|
-
readonly scale: "spacing";
|
|
102
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
103
|
-
};
|
|
104
|
-
readonly mb: {
|
|
105
|
-
readonly property: {
|
|
106
|
-
readonly physical: "marginBottom";
|
|
107
|
-
readonly logical: "marginBlockEnd";
|
|
108
|
-
};
|
|
109
|
-
readonly scale: "spacing";
|
|
110
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
111
|
-
};
|
|
112
|
-
readonly mr: {
|
|
113
|
-
readonly property: {
|
|
114
|
-
readonly physical: "marginRight";
|
|
115
|
-
readonly logical: "marginInlineEnd";
|
|
116
|
-
};
|
|
117
|
-
readonly scale: "spacing";
|
|
118
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
119
|
-
};
|
|
120
|
-
readonly ml: {
|
|
121
|
-
readonly property: {
|
|
122
|
-
readonly physical: "marginLeft";
|
|
123
|
-
readonly logical: "marginInlineStart";
|
|
124
|
-
};
|
|
125
|
-
readonly scale: "spacing";
|
|
126
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
127
|
-
};
|
|
128
|
-
}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
|
|
129
|
-
readonly flexBasis: {
|
|
130
|
-
readonly property: "flexBasis";
|
|
131
|
-
};
|
|
132
|
-
readonly flexShrink: {
|
|
133
|
-
readonly property: "flexShrink";
|
|
134
|
-
};
|
|
135
|
-
readonly flexGrow: {
|
|
136
|
-
readonly property: "flexGrow";
|
|
137
|
-
};
|
|
138
|
-
readonly order: {
|
|
139
|
-
readonly property: "order";
|
|
140
|
-
};
|
|
141
|
-
readonly gridColumn: {
|
|
142
|
-
readonly property: "gridColumn";
|
|
143
|
-
};
|
|
144
|
-
readonly gridRow: {
|
|
145
|
-
readonly property: "gridRow";
|
|
146
|
-
};
|
|
147
|
-
readonly gridColumnStart: {
|
|
148
|
-
readonly property: "gridColumnStart";
|
|
149
|
-
};
|
|
150
|
-
readonly gridRowStart: {
|
|
151
|
-
readonly property: "gridRowStart";
|
|
152
|
-
};
|
|
153
|
-
readonly gridColumnEnd: {
|
|
154
|
-
readonly property: "gridColumnEnd";
|
|
155
|
-
};
|
|
156
|
-
readonly gridRowEnd: {
|
|
157
|
-
readonly property: "gridRowEnd";
|
|
158
|
-
};
|
|
159
|
-
readonly justifySelf: {
|
|
160
|
-
readonly property: "justifySelf";
|
|
161
|
-
};
|
|
162
|
-
readonly alignSelf: {
|
|
163
|
-
readonly property: "alignSelf";
|
|
164
|
-
};
|
|
165
|
-
readonly gridArea: {
|
|
166
|
-
readonly property: "gridArea";
|
|
167
|
-
};
|
|
168
|
-
readonly containerType: {
|
|
169
|
-
readonly property: "containerType";
|
|
170
|
-
};
|
|
171
|
-
readonly display: {
|
|
172
|
-
readonly property: "display";
|
|
173
|
-
};
|
|
174
|
-
readonly overflow: {
|
|
175
|
-
readonly property: "overflow";
|
|
176
|
-
};
|
|
177
|
-
readonly overflowX: {
|
|
178
|
-
readonly property: {
|
|
179
|
-
readonly physical: "overflowX";
|
|
180
|
-
readonly logical: "overflowInline";
|
|
181
|
-
};
|
|
182
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
183
|
-
};
|
|
184
|
-
readonly overflowY: {
|
|
185
|
-
readonly property: {
|
|
186
|
-
readonly physical: "overflowY";
|
|
187
|
-
readonly logical: "overflowBlock";
|
|
188
|
-
};
|
|
189
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
190
|
-
};
|
|
191
|
-
readonly dimensions: {
|
|
192
|
-
readonly property: "width";
|
|
193
|
-
readonly properties: {
|
|
194
|
-
readonly physical: readonly ["width", "height"];
|
|
195
|
-
readonly logical: readonly ["inlineSize", "blockSize"];
|
|
196
|
-
};
|
|
197
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
198
|
-
readonly transform: (value: string | number) => string | 0;
|
|
199
|
-
};
|
|
200
|
-
readonly width: {
|
|
201
|
-
readonly property: {
|
|
202
|
-
readonly physical: "width";
|
|
203
|
-
readonly logical: "inlineSize";
|
|
204
|
-
};
|
|
205
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
206
|
-
readonly transform: (value: string | number) => string | 0;
|
|
207
|
-
};
|
|
208
|
-
readonly minWidth: {
|
|
209
|
-
readonly property: {
|
|
210
|
-
readonly physical: "minWidth";
|
|
211
|
-
readonly logical: "minInlineSize";
|
|
212
|
-
};
|
|
213
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
214
|
-
readonly transform: (value: string | number) => string | 0;
|
|
215
|
-
};
|
|
216
|
-
readonly maxWidth: {
|
|
217
|
-
readonly property: {
|
|
218
|
-
readonly physical: "maxWidth";
|
|
219
|
-
readonly logical: "maxInlineSize";
|
|
220
|
-
};
|
|
221
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
222
|
-
readonly transform: (value: string | number) => string | 0;
|
|
223
|
-
};
|
|
224
|
-
readonly height: {
|
|
225
|
-
readonly property: {
|
|
226
|
-
readonly physical: "height";
|
|
227
|
-
readonly logical: "blockSize";
|
|
228
|
-
};
|
|
229
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
230
|
-
readonly transform: (value: string | number) => string | 0;
|
|
231
|
-
};
|
|
232
|
-
readonly minHeight: {
|
|
233
|
-
readonly property: {
|
|
234
|
-
readonly physical: "minHeight";
|
|
235
|
-
readonly logical: "minBlockSize";
|
|
236
|
-
};
|
|
237
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
238
|
-
readonly transform: (value: string | number) => string | 0;
|
|
239
|
-
};
|
|
240
|
-
readonly maxHeight: {
|
|
241
|
-
readonly property: {
|
|
242
|
-
readonly physical: "maxHeight";
|
|
243
|
-
readonly logical: "maxBlockSize";
|
|
244
|
-
};
|
|
245
|
-
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
246
|
-
readonly transform: (value: string | number) => string | 0;
|
|
247
|
-
};
|
|
248
|
-
readonly verticalAlign: {
|
|
249
|
-
readonly property: "verticalAlign";
|
|
250
|
-
};
|
|
251
|
-
readonly direction: {
|
|
252
|
-
readonly property: "direction";
|
|
253
|
-
};
|
|
254
|
-
}>>]>>;
|
|
255
|
-
export type AccordionTriggerProps = StyleProps<typeof triggerSystemProps> & {
|
|
256
|
-
children: React.ReactNode;
|
|
257
|
-
/**
|
|
258
|
-
* Optional additional click handler called alongside the internal toggle.
|
|
259
|
-
*/
|
|
260
|
-
onClick?: () => void;
|
|
261
|
-
};
|
|
262
|
-
export declare const AccordionTrigger: React.FC<AccordionTriggerProps>;
|
|
263
|
-
declare const BodyWrapper: import("@emotion/styled").StyledComponent<{
|
|
264
|
-
theme?: import("@emotion/react").Theme;
|
|
265
|
-
as?: React.ElementType;
|
|
266
|
-
} & import("@codecademy/gamut").BoxProps & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof React.ClassAttributes<HTMLDivElement> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part"> & {
|
|
267
|
-
theme?: import("@emotion/react").Theme;
|
|
268
|
-
}, {}, {}>;
|
|
269
|
-
export type AccordionBodyProps = React.ComponentProps<typeof BodyWrapper>;
|
|
270
|
-
export declare const AccordionBody: React.FC<AccordionBodyProps>;
|
|
271
|
-
export {};
|
package/dist/Accordion/index.js
DELETED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import _styled from "@emotion/styled/base";
|
|
2
|
-
import { Anchor, Box, ExpandInCollapseOut, Rotation } from '@codecademy/gamut';
|
|
3
|
-
import { MiniChevronDownIcon } from '@codecademy/gamut-icons';
|
|
4
|
-
import { css, system } from '@codecademy/gamut-styles';
|
|
5
|
-
import { variance } from '@codecademy/variance';
|
|
6
|
-
import { AnimatePresence } from 'framer-motion';
|
|
7
|
-
import * as React from 'react';
|
|
8
|
-
import { createContext, useContext, useState } from 'react';
|
|
9
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
-
const AccordionContext = /*#__PURE__*/createContext(undefined);
|
|
11
|
-
const useAccordionContext = () => {
|
|
12
|
-
const ctx = useContext(AccordionContext);
|
|
13
|
-
if (!ctx) {
|
|
14
|
-
throw new Error('AccordionTrigger and AccordionBody must be used inside an Accordion');
|
|
15
|
-
}
|
|
16
|
-
return ctx;
|
|
17
|
-
};
|
|
18
|
-
export const Accordion = ({
|
|
19
|
-
children,
|
|
20
|
-
initiallyExpanded = false,
|
|
21
|
-
expanded: controlledExpanded,
|
|
22
|
-
onClick
|
|
23
|
-
}) => {
|
|
24
|
-
const isControlled = controlledExpanded !== undefined;
|
|
25
|
-
const [uncontrolledExpanded, setUncontrolledExpanded] = useState(initiallyExpanded);
|
|
26
|
-
const isExpanded = isControlled ? controlledExpanded : uncontrolledExpanded;
|
|
27
|
-
const toggle = () => {
|
|
28
|
-
const next = !isExpanded;
|
|
29
|
-
if (!isControlled) setUncontrolledExpanded(next);
|
|
30
|
-
onClick?.(next);
|
|
31
|
-
};
|
|
32
|
-
return /*#__PURE__*/_jsx(AccordionContext.Provider, {
|
|
33
|
-
value: {
|
|
34
|
-
isExpanded,
|
|
35
|
-
toggle
|
|
36
|
-
},
|
|
37
|
-
children: children
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
// --- AccordionTrigger ---
|
|
42
|
-
|
|
43
|
-
const triggerSystemProps = variance.compose(system.space, system.layout);
|
|
44
|
-
const TriggerAnchor = /*#__PURE__*/_styled(Anchor, {
|
|
45
|
-
target: "e10h3y561",
|
|
46
|
-
label: "TriggerAnchor"
|
|
47
|
-
})(css({
|
|
48
|
-
display: 'flex',
|
|
49
|
-
justifyContent: 'space-between',
|
|
50
|
-
alignItems: 'center',
|
|
51
|
-
width: '100%',
|
|
52
|
-
'&:hover': {
|
|
53
|
-
color: 'inherit'
|
|
54
|
-
},
|
|
55
|
-
'&:focus-visible': {
|
|
56
|
-
color: 'inherit'
|
|
57
|
-
}
|
|
58
|
-
}), triggerSystemProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BY2NvcmRpb24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdFc0IiLCJmaWxlIjoiLi4vLi4vc3JjL0FjY29yZGlvbi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IsIEJveCwgRXhwYW5kSW5Db2xsYXBzZU91dCwgUm90YXRpb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBNaW5pQ2hldnJvbkRvd25JY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcywgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBBbmltYXRlUHJlc2VuY2UgfSBmcm9tICdmcmFtZXItbW90aW9uJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNyZWF0ZUNvbnRleHQsIHVzZUNvbnRleHQsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG50eXBlIEFjY29yZGlvbkNvbnRleHRWYWx1ZSA9IHtcbiAgaXNFeHBhbmRlZDogYm9vbGVhbjtcbiAgdG9nZ2xlOiAoKSA9PiB2b2lkO1xufTtcblxuY29uc3QgQWNjb3JkaW9uQ29udGV4dCA9IGNyZWF0ZUNvbnRleHQ8QWNjb3JkaW9uQ29udGV4dFZhbHVlIHwgdW5kZWZpbmVkPihcbiAgdW5kZWZpbmVkXG4pO1xuXG5jb25zdCB1c2VBY2NvcmRpb25Db250ZXh0ID0gKCk6IEFjY29yZGlvbkNvbnRleHRWYWx1ZSA9PiB7XG4gIGNvbnN0IGN0eCA9IHVzZUNvbnRleHQoQWNjb3JkaW9uQ29udGV4dCk7XG4gIGlmICghY3R4KSB7XG4gICAgdGhyb3cgbmV3IEVycm9yKFxuICAgICAgJ0FjY29yZGlvblRyaWdnZXIgYW5kIEFjY29yZGlvbkJvZHkgbXVzdCBiZSB1c2VkIGluc2lkZSBhbiBBY2NvcmRpb24nXG4gICAgKTtcbiAgfVxuICByZXR1cm4gY3R4O1xufTtcblxuZXhwb3J0IHR5cGUgQWNjb3JkaW9uUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBhY2NvcmRpb24gc3RhcnRzIGV4cGFuZGVkLiBJZ25vcmVkIHdoZW4gYGV4cGFuZGVkYCBpcyBwcm92aWRlZC5cbiAgICovXG4gIGluaXRpYWxseUV4cGFuZGVkPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIENvbnRyb2xsZWQgZXhwYW5kZWQgc3RhdGUuIFdoZW4gcHJvdmlkZWQsIHRoZSBhY2NvcmRpb24gZG9lcyBub3QgbWFuYWdlIGl0cyBvd24gc3RhdGUuXG4gICAqL1xuICBleHBhbmRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBDYWxsZWQgd2hlbiB0aGUgdHJpZ2dlciBpcyBjbGlja2VkLCB3aXRoIHRoZSBuZXh0IGV4cGFuZGVkIHZhbHVlLlxuICAgKi9cbiAgb25DbGljaz86IChuZXh0RXhwYW5kZWQ6IGJvb2xlYW4pID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uOiBSZWFjdC5GQzxBY2NvcmRpb25Qcm9wcz4gPSAoe1xuICBjaGlsZHJlbixcbiAgaW5pdGlhbGx5RXhwYW5kZWQgPSBmYWxzZSxcbiAgZXhwYW5kZWQ6IGNvbnRyb2xsZWRFeHBhbmRlZCxcbiAgb25DbGljayxcbn0pID0+IHtcbiAgY29uc3QgaXNDb250cm9sbGVkID0gY29udHJvbGxlZEV4cGFuZGVkICE9PSB1bmRlZmluZWQ7XG4gIGNvbnN0IFt1bmNvbnRyb2xsZWRFeHBhbmRlZCwgc2V0VW5jb250cm9sbGVkRXhwYW5kZWRdID1cbiAgICB1c2VTdGF0ZShpbml0aWFsbHlFeHBhbmRlZCk7XG4gIGNvbnN0IGlzRXhwYW5kZWQgPSBpc0NvbnRyb2xsZWQgPyBjb250cm9sbGVkRXhwYW5kZWQgOiB1bmNvbnRyb2xsZWRFeHBhbmRlZDtcblxuICBjb25zdCB0b2dnbGUgPSAoKSA9PiB7XG4gICAgY29uc3QgbmV4dCA9ICFpc0V4cGFuZGVkO1xuICAgIGlmICghaXNDb250cm9sbGVkKSBzZXRVbmNvbnRyb2xsZWRFeHBhbmRlZChuZXh0KTtcbiAgICBvbkNsaWNrPy4obmV4dCk7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8QWNjb3JkaW9uQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17eyBpc0V4cGFuZGVkLCB0b2dnbGUgfX0+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9BY2NvcmRpb25Db250ZXh0LlByb3ZpZGVyPlxuICApO1xufTtcblxuLy8gLS0tIEFjY29yZGlvblRyaWdnZXIgLS0tXG5cbmNvbnN0IHRyaWdnZXJTeXN0ZW1Qcm9wcyA9IHZhcmlhbmNlLmNvbXBvc2Uoc3lzdGVtLnNwYWNlLCBzeXN0ZW0ubGF5b3V0KTtcblxuY29uc3QgVHJpZ2dlckFuY2hvciA9IHN0eWxlZChBbmNob3IpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgJyY6aG92ZXInOiB7IGNvbG9yOiAnaW5oZXJpdCcgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlJzogeyBjb2xvcjogJ2luaGVyaXQnIH0sXG4gIH0pLFxuICB0cmlnZ2VyU3lzdGVtUHJvcHNcbik7XG5cbmV4cG9ydCB0eXBlIEFjY29yZGlvblRyaWdnZXJQcm9wcyA9IFN0eWxlUHJvcHM8dHlwZW9mIHRyaWdnZXJTeXN0ZW1Qcm9wcz4gJiB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBPcHRpb25hbCBhZGRpdGlvbmFsIGNsaWNrIGhhbmRsZXIgY2FsbGVkIGFsb25nc2lkZSB0aGUgaW50ZXJuYWwgdG9nZ2xlLlxuICAgKi9cbiAgb25DbGljaz86ICgpID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uVHJpZ2dlcjogUmVhY3QuRkM8QWNjb3JkaW9uVHJpZ2dlclByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBvbkNsaWNrLFxuICAuLi5zeXN0ZW1Qcm9wc1xufSkgPT4ge1xuICBjb25zdCB7IGlzRXhwYW5kZWQsIHRvZ2dsZSB9ID0gdXNlQWNjb3JkaW9uQ29udGV4dCgpO1xuXG4gIHJldHVybiAoXG4gICAgPFRyaWdnZXJBbmNob3JcbiAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzRXhwYW5kZWR9XG4gICAgICB2YXJpYW50PVwiaW50ZXJmYWNlXCJcbiAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgdG9nZ2xlKCk7XG4gICAgICAgIG9uQ2xpY2s/LigpO1xuICAgICAgfX1cbiAgICAgIHsuLi5zeXN0ZW1Qcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICA8Um90YXRpb24gYXJpYS1oaWRkZW4gcm90YXRlZD17aXNFeHBhbmRlZH0+XG4gICAgICAgIDxNaW5pQ2hldnJvbkRvd25JY29uIHNpemU9ezE2fSAvPlxuICAgICAgPC9Sb3RhdGlvbj5cbiAgICA8L1RyaWdnZXJBbmNob3I+XG4gICk7XG59O1xuXG4vLyAtLS0gQWNjb3JkaW9uQm9keSAtLS1cblxuY29uc3QgQm9keVdyYXBwZXIgPSBzdHlsZWQoQm94KShjc3MoeyBwOiAwIH0pKTtcblxuZXhwb3J0IHR5cGUgQWNjb3JkaW9uQm9keVByb3BzID0gUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEJvZHlXcmFwcGVyPjtcblxuZXhwb3J0IGNvbnN0IEFjY29yZGlvbkJvZHk6IFJlYWN0LkZDPEFjY29yZGlvbkJvZHlQcm9wcz4gPSAoe1xuICBjaGlsZHJlbixcbiAgLi4uc3lzdGVtUHJvcHNcbn0pID0+IHtcbiAgY29uc3QgeyBpc0V4cGFuZGVkIH0gPSB1c2VBY2NvcmRpb25Db250ZXh0KCk7XG5cbiAgcmV0dXJuIChcbiAgICA8QW5pbWF0ZVByZXNlbmNlPlxuICAgICAge2lzRXhwYW5kZWQgJiYgKFxuICAgICAgICA8RXhwYW5kSW5Db2xsYXBzZU91dD5cbiAgICAgICAgICA8Qm9keVdyYXBwZXIgey4uLnN5c3RlbVByb3BzfT57Y2hpbGRyZW59PC9Cb2R5V3JhcHBlcj5cbiAgICAgICAgPC9FeHBhbmRJbkNvbGxhcHNlT3V0PlxuICAgICAgKX1cbiAgICA8L0FuaW1hdGVQcmVzZW5jZT5cbiAgKTtcbn07XG4iXX0= */");
|
|
59
|
-
export const AccordionTrigger = ({
|
|
60
|
-
children,
|
|
61
|
-
onClick,
|
|
62
|
-
...systemProps
|
|
63
|
-
}) => {
|
|
64
|
-
const {
|
|
65
|
-
isExpanded,
|
|
66
|
-
toggle
|
|
67
|
-
} = useAccordionContext();
|
|
68
|
-
return /*#__PURE__*/_jsxs(TriggerAnchor, {
|
|
69
|
-
"aria-expanded": isExpanded,
|
|
70
|
-
variant: "interface",
|
|
71
|
-
onClick: () => {
|
|
72
|
-
toggle();
|
|
73
|
-
onClick?.();
|
|
74
|
-
},
|
|
75
|
-
...systemProps,
|
|
76
|
-
children: [children, /*#__PURE__*/_jsx(Rotation, {
|
|
77
|
-
"aria-hidden": true,
|
|
78
|
-
rotated: isExpanded,
|
|
79
|
-
children: /*#__PURE__*/_jsx(MiniChevronDownIcon, {
|
|
80
|
-
size: 16
|
|
81
|
-
})
|
|
82
|
-
})]
|
|
83
|
-
});
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
// --- AccordionBody ---
|
|
87
|
-
|
|
88
|
-
const BodyWrapper = /*#__PURE__*/_styled(Box, {
|
|
89
|
-
target: "e10h3y560",
|
|
90
|
-
label: "BodyWrapper"
|
|
91
|
-
})(css({
|
|
92
|
-
p: 0
|
|
93
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BY2NvcmRpb24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVIb0IiLCJmaWxlIjoiLi4vLi4vc3JjL0FjY29yZGlvbi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IsIEJveCwgRXhwYW5kSW5Db2xsYXBzZU91dCwgUm90YXRpb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBNaW5pQ2hldnJvbkRvd25JY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcywgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBBbmltYXRlUHJlc2VuY2UgfSBmcm9tICdmcmFtZXItbW90aW9uJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNyZWF0ZUNvbnRleHQsIHVzZUNvbnRleHQsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG50eXBlIEFjY29yZGlvbkNvbnRleHRWYWx1ZSA9IHtcbiAgaXNFeHBhbmRlZDogYm9vbGVhbjtcbiAgdG9nZ2xlOiAoKSA9PiB2b2lkO1xufTtcblxuY29uc3QgQWNjb3JkaW9uQ29udGV4dCA9IGNyZWF0ZUNvbnRleHQ8QWNjb3JkaW9uQ29udGV4dFZhbHVlIHwgdW5kZWZpbmVkPihcbiAgdW5kZWZpbmVkXG4pO1xuXG5jb25zdCB1c2VBY2NvcmRpb25Db250ZXh0ID0gKCk6IEFjY29yZGlvbkNvbnRleHRWYWx1ZSA9PiB7XG4gIGNvbnN0IGN0eCA9IHVzZUNvbnRleHQoQWNjb3JkaW9uQ29udGV4dCk7XG4gIGlmICghY3R4KSB7XG4gICAgdGhyb3cgbmV3IEVycm9yKFxuICAgICAgJ0FjY29yZGlvblRyaWdnZXIgYW5kIEFjY29yZGlvbkJvZHkgbXVzdCBiZSB1c2VkIGluc2lkZSBhbiBBY2NvcmRpb24nXG4gICAgKTtcbiAgfVxuICByZXR1cm4gY3R4O1xufTtcblxuZXhwb3J0IHR5cGUgQWNjb3JkaW9uUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBhY2NvcmRpb24gc3RhcnRzIGV4cGFuZGVkLiBJZ25vcmVkIHdoZW4gYGV4cGFuZGVkYCBpcyBwcm92aWRlZC5cbiAgICovXG4gIGluaXRpYWxseUV4cGFuZGVkPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIENvbnRyb2xsZWQgZXhwYW5kZWQgc3RhdGUuIFdoZW4gcHJvdmlkZWQsIHRoZSBhY2NvcmRpb24gZG9lcyBub3QgbWFuYWdlIGl0cyBvd24gc3RhdGUuXG4gICAqL1xuICBleHBhbmRlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBDYWxsZWQgd2hlbiB0aGUgdHJpZ2dlciBpcyBjbGlja2VkLCB3aXRoIHRoZSBuZXh0IGV4cGFuZGVkIHZhbHVlLlxuICAgKi9cbiAgb25DbGljaz86IChuZXh0RXhwYW5kZWQ6IGJvb2xlYW4pID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uOiBSZWFjdC5GQzxBY2NvcmRpb25Qcm9wcz4gPSAoe1xuICBjaGlsZHJlbixcbiAgaW5pdGlhbGx5RXhwYW5kZWQgPSBmYWxzZSxcbiAgZXhwYW5kZWQ6IGNvbnRyb2xsZWRFeHBhbmRlZCxcbiAgb25DbGljayxcbn0pID0+IHtcbiAgY29uc3QgaXNDb250cm9sbGVkID0gY29udHJvbGxlZEV4cGFuZGVkICE9PSB1bmRlZmluZWQ7XG4gIGNvbnN0IFt1bmNvbnRyb2xsZWRFeHBhbmRlZCwgc2V0VW5jb250cm9sbGVkRXhwYW5kZWRdID1cbiAgICB1c2VTdGF0ZShpbml0aWFsbHlFeHBhbmRlZCk7XG4gIGNvbnN0IGlzRXhwYW5kZWQgPSBpc0NvbnRyb2xsZWQgPyBjb250cm9sbGVkRXhwYW5kZWQgOiB1bmNvbnRyb2xsZWRFeHBhbmRlZDtcblxuICBjb25zdCB0b2dnbGUgPSAoKSA9PiB7XG4gICAgY29uc3QgbmV4dCA9ICFpc0V4cGFuZGVkO1xuICAgIGlmICghaXNDb250cm9sbGVkKSBzZXRVbmNvbnRyb2xsZWRFeHBhbmRlZChuZXh0KTtcbiAgICBvbkNsaWNrPy4obmV4dCk7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8QWNjb3JkaW9uQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17eyBpc0V4cGFuZGVkLCB0b2dnbGUgfX0+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9BY2NvcmRpb25Db250ZXh0LlByb3ZpZGVyPlxuICApO1xufTtcblxuLy8gLS0tIEFjY29yZGlvblRyaWdnZXIgLS0tXG5cbmNvbnN0IHRyaWdnZXJTeXN0ZW1Qcm9wcyA9IHZhcmlhbmNlLmNvbXBvc2Uoc3lzdGVtLnNwYWNlLCBzeXN0ZW0ubGF5b3V0KTtcblxuY29uc3QgVHJpZ2dlckFuY2hvciA9IHN0eWxlZChBbmNob3IpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgJyY6aG92ZXInOiB7IGNvbG9yOiAnaW5oZXJpdCcgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlJzogeyBjb2xvcjogJ2luaGVyaXQnIH0sXG4gIH0pLFxuICB0cmlnZ2VyU3lzdGVtUHJvcHNcbik7XG5cbmV4cG9ydCB0eXBlIEFjY29yZGlvblRyaWdnZXJQcm9wcyA9IFN0eWxlUHJvcHM8dHlwZW9mIHRyaWdnZXJTeXN0ZW1Qcm9wcz4gJiB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBPcHRpb25hbCBhZGRpdGlvbmFsIGNsaWNrIGhhbmRsZXIgY2FsbGVkIGFsb25nc2lkZSB0aGUgaW50ZXJuYWwgdG9nZ2xlLlxuICAgKi9cbiAgb25DbGljaz86ICgpID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uVHJpZ2dlcjogUmVhY3QuRkM8QWNjb3JkaW9uVHJpZ2dlclByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBvbkNsaWNrLFxuICAuLi5zeXN0ZW1Qcm9wc1xufSkgPT4ge1xuICBjb25zdCB7IGlzRXhwYW5kZWQsIHRvZ2dsZSB9ID0gdXNlQWNjb3JkaW9uQ29udGV4dCgpO1xuXG4gIHJldHVybiAoXG4gICAgPFRyaWdnZXJBbmNob3JcbiAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzRXhwYW5kZWR9XG4gICAgICB2YXJpYW50PVwiaW50ZXJmYWNlXCJcbiAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgdG9nZ2xlKCk7XG4gICAgICAgIG9uQ2xpY2s/LigpO1xuICAgICAgfX1cbiAgICAgIHsuLi5zeXN0ZW1Qcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICA8Um90YXRpb24gYXJpYS1oaWRkZW4gcm90YXRlZD17aXNFeHBhbmRlZH0+XG4gICAgICAgIDxNaW5pQ2hldnJvbkRvd25JY29uIHNpemU9ezE2fSAvPlxuICAgICAgPC9Sb3RhdGlvbj5cbiAgICA8L1RyaWdnZXJBbmNob3I+XG4gICk7XG59O1xuXG4vLyAtLS0gQWNjb3JkaW9uQm9keSAtLS1cblxuY29uc3QgQm9keVdyYXBwZXIgPSBzdHlsZWQoQm94KShjc3MoeyBwOiAwIH0pKTtcblxuZXhwb3J0IHR5cGUgQWNjb3JkaW9uQm9keVByb3BzID0gUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEJvZHlXcmFwcGVyPjtcblxuZXhwb3J0IGNvbnN0IEFjY29yZGlvbkJvZHk6IFJlYWN0LkZDPEFjY29yZGlvbkJvZHlQcm9wcz4gPSAoe1xuICBjaGlsZHJlbixcbiAgLi4uc3lzdGVtUHJvcHNcbn0pID0+IHtcbiAgY29uc3QgeyBpc0V4cGFuZGVkIH0gPSB1c2VBY2NvcmRpb25Db250ZXh0KCk7XG5cbiAgcmV0dXJuIChcbiAgICA8QW5pbWF0ZVByZXNlbmNlPlxuICAgICAge2lzRXhwYW5kZWQgJiYgKFxuICAgICAgICA8RXhwYW5kSW5Db2xsYXBzZU91dD5cbiAgICAgICAgICA8Qm9keVdyYXBwZXIgey4uLnN5c3RlbVByb3BzfT57Y2hpbGRyZW59PC9Cb2R5V3JhcHBlcj5cbiAgICAgICAgPC9FeHBhbmRJbkNvbGxhcHNlT3V0PlxuICAgICAgKX1cbiAgICA8L0FuaW1hdGVQcmVzZW5jZT5cbiAgKTtcbn07XG4iXX0= */");
|
|
94
|
-
export const AccordionBody = ({
|
|
95
|
-
children,
|
|
96
|
-
...systemProps
|
|
97
|
-
}) => {
|
|
98
|
-
const {
|
|
99
|
-
isExpanded
|
|
100
|
-
} = useAccordionContext();
|
|
101
|
-
return /*#__PURE__*/_jsx(AnimatePresence, {
|
|
102
|
-
children: isExpanded && /*#__PURE__*/_jsx(ExpandInCollapseOut, {
|
|
103
|
-
children: /*#__PURE__*/_jsx(BodyWrapper, {
|
|
104
|
-
...systemProps,
|
|
105
|
-
children: children
|
|
106
|
-
})
|
|
107
|
-
})
|
|
108
|
-
});
|
|
109
|
-
};
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import { Box, Text } from '@codecademy/gamut';
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Accordion, AccordionBody, AccordionTrigger } from '../../index';
|
|
4
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
-
const meta = {
|
|
6
|
-
component: Accordion,
|
|
7
|
-
title: 'Molecules/Accordion'
|
|
8
|
-
};
|
|
9
|
-
export default meta;
|
|
10
|
-
export const Default = {
|
|
11
|
-
render: () => /*#__PURE__*/_jsxs(Accordion, {
|
|
12
|
-
children: [/*#__PURE__*/_jsx(AccordionTrigger, {
|
|
13
|
-
children: "Click to expand"
|
|
14
|
-
}), /*#__PURE__*/_jsx(AccordionBody, {
|
|
15
|
-
children: /*#__PURE__*/_jsx(Box, {
|
|
16
|
-
children: /*#__PURE__*/_jsx(Text, {
|
|
17
|
-
children: "Accordion panel content."
|
|
18
|
-
})
|
|
19
|
-
})
|
|
20
|
-
})]
|
|
21
|
-
}),
|
|
22
|
-
name: 'Default (uncontrolled)'
|
|
23
|
-
};
|
|
24
|
-
export const InitiallyExpanded = {
|
|
25
|
-
render: () => /*#__PURE__*/_jsxs(Accordion, {
|
|
26
|
-
initiallyExpanded: true,
|
|
27
|
-
children: [/*#__PURE__*/_jsx(AccordionTrigger, {
|
|
28
|
-
children: "Expanded by default"
|
|
29
|
-
}), /*#__PURE__*/_jsx(AccordionBody, {
|
|
30
|
-
children: /*#__PURE__*/_jsx(Box, {
|
|
31
|
-
children: /*#__PURE__*/_jsx(Text, {
|
|
32
|
-
children: "This panel starts open."
|
|
33
|
-
})
|
|
34
|
-
})
|
|
35
|
-
})]
|
|
36
|
-
}),
|
|
37
|
-
name: 'Initially expanded'
|
|
38
|
-
};
|
|
39
|
-
export const Controlled = {
|
|
40
|
-
render: () => {
|
|
41
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
42
|
-
return /*#__PURE__*/_jsxs(Box, {
|
|
43
|
-
children: [/*#__PURE__*/_jsxs(Text, {
|
|
44
|
-
mb: 8,
|
|
45
|
-
variant: "p-small",
|
|
46
|
-
children: ["Controlled externally \u2014 expanded: ", String(isOpen)]
|
|
47
|
-
}), /*#__PURE__*/_jsxs(Accordion, {
|
|
48
|
-
expanded: isOpen,
|
|
49
|
-
onClick: setIsOpen,
|
|
50
|
-
children: [/*#__PURE__*/_jsx(AccordionTrigger, {
|
|
51
|
-
children: "Controlled accordion"
|
|
52
|
-
}), /*#__PURE__*/_jsx(AccordionBody, {
|
|
53
|
-
children: /*#__PURE__*/_jsx(Box, {
|
|
54
|
-
children: /*#__PURE__*/_jsx(Text, {
|
|
55
|
-
children: "Caller manages expanded state via onToggle."
|
|
56
|
-
})
|
|
57
|
-
})
|
|
58
|
-
})]
|
|
59
|
-
})]
|
|
60
|
-
});
|
|
61
|
-
},
|
|
62
|
-
name: 'Controlled'
|
|
63
|
-
};
|
|
64
|
-
export const WithOnClickCallback = {
|
|
65
|
-
render: () => /*#__PURE__*/_jsxs(Accordion, {
|
|
66
|
-
onClick: next => {
|
|
67
|
-
// eslint-disable-next-line no-console
|
|
68
|
-
console.log('toggled:', next);
|
|
69
|
-
},
|
|
70
|
-
children: [/*#__PURE__*/_jsx(AccordionTrigger, {
|
|
71
|
-
children: "Section with callbacks"
|
|
72
|
-
}), /*#__PURE__*/_jsx(AccordionBody, {
|
|
73
|
-
children: /*#__PURE__*/_jsx(Box, {
|
|
74
|
-
children: /*#__PURE__*/_jsx(Text, {
|
|
75
|
-
children: "Check the console \u2014 onToggle and onClick fire on each toggle."
|
|
76
|
-
})
|
|
77
|
-
})
|
|
78
|
-
})]
|
|
79
|
-
}),
|
|
80
|
-
name: 'With callbacks'
|
|
81
|
-
};
|
|
82
|
-
export const MultipleAccordions = {
|
|
83
|
-
render: () => /*#__PURE__*/_jsx(Box, {
|
|
84
|
-
display: "flex",
|
|
85
|
-
flexDirection: "column",
|
|
86
|
-
gap: 8,
|
|
87
|
-
children: ['Section A', 'Section B', 'Section C'].map(label => /*#__PURE__*/_jsxs(Accordion, {
|
|
88
|
-
children: [/*#__PURE__*/_jsx(AccordionTrigger, {
|
|
89
|
-
children: label
|
|
90
|
-
}), /*#__PURE__*/_jsx(AccordionBody, {
|
|
91
|
-
children: /*#__PURE__*/_jsx(Box, {
|
|
92
|
-
children: /*#__PURE__*/_jsxs(Text, {
|
|
93
|
-
children: ["Content for ", label, ". Each accordion is independent."]
|
|
94
|
-
})
|
|
95
|
-
})
|
|
96
|
-
})]
|
|
97
|
-
}, label))
|
|
98
|
-
}),
|
|
99
|
-
name: 'Multiple independent accordions'
|
|
100
|
-
};
|
|
101
|
-
export const RichContent = {
|
|
102
|
-
render: () => /*#__PURE__*/_jsxs(Accordion, {
|
|
103
|
-
initiallyExpanded: true,
|
|
104
|
-
children: [/*#__PURE__*/_jsx(AccordionTrigger, {
|
|
105
|
-
children: "Frequently asked question"
|
|
106
|
-
}), /*#__PURE__*/_jsx(AccordionBody, {
|
|
107
|
-
children: /*#__PURE__*/_jsxs(Box, {
|
|
108
|
-
children: [/*#__PURE__*/_jsx(Text, {
|
|
109
|
-
variant: "title-xs",
|
|
110
|
-
children: "Answer heading"
|
|
111
|
-
}), /*#__PURE__*/_jsxs(Text, {
|
|
112
|
-
children: ["This body can hold any React content \u2014 text, links, forms, lists, or nested components. The height animates in and out using Gamut's", ' ', "ExpandInCollapseOut primitive."]
|
|
113
|
-
}), /*#__PURE__*/_jsx(Text, {
|
|
114
|
-
variant: "p-small",
|
|
115
|
-
color: "text-secondary",
|
|
116
|
-
children: "Supporting detail with secondary text color."
|
|
117
|
-
})]
|
|
118
|
-
})
|
|
119
|
-
})]
|
|
120
|
-
}),
|
|
121
|
-
name: 'Rich body content'
|
|
122
|
-
};
|