@contentful/f36-accordion 4.14.0 → 4.15.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/main.js +87 -92
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +87 -92
  5. package/dist/module.js.map +1 -1
  6. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.15.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @contentful/f36-collapse@4.15.0
9
+ - @contentful/f36-icons@4.15.0
10
+ - @contentful/f36-typography@4.15.0
11
+ - @contentful/f36-core@4.15.0
12
+
3
13
  ## 4.14.0
4
14
 
5
15
  ### Patch Changes
package/dist/main.js CHANGED
@@ -23,37 +23,36 @@ $parcel$export(module.exports, "AccordionPanel", () => $dc0312cfa0956395$export$
23
23
 
24
24
 
25
25
  const $b2e2219a9d74caf2$export$af90c4d6702a6ca7 = ({ className: className })=>({
26
- accordion: $9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
27
- boxSizing: 'border-box',
28
- padding: '0',
29
- margin: '0',
30
- listStyle: 'none',
31
- '&:first-child': {
32
- borderTop: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).gray300}`
26
+ accordion: (0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
27
+ boxSizing: "border-box",
28
+ padding: "0",
29
+ margin: "0",
30
+ listStyle: "none",
31
+ "&:first-child": {
32
+ borderTop: `1px solid ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray300}`
33
33
  }
34
34
  }), className)
35
- })
36
- ;
35
+ });
37
36
 
38
37
 
39
- const $6b1aad2dfaf9ce0d$var$_Accordion = ({ align: align = 'end' , children: children , className: className , testId: testId = 'cf-ui-accordion' , ...otherProps }, ref)=>{
40
- const styles = $b2e2219a9d74caf2$export$af90c4d6702a6ca7({
38
+ const $6b1aad2dfaf9ce0d$var$_Accordion = ({ align: align = "end" , children: children , className: className , testId: testId = "cf-ui-accordion" , ...otherProps }, ref)=>{
39
+ const styles = (0, $b2e2219a9d74caf2$export$af90c4d6702a6ca7)({
41
40
  className: className
42
41
  });
43
- return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
42
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36core.Box), {
44
43
  as: "ul",
45
44
  className: styles.accordion,
46
45
  testId: testId,
47
46
  ...otherProps,
48
47
  ref: ref
49
- }, ($parcel$interopDefault($9pthv$react)).Children.map(children, (child)=>{
50
- if (/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).isValidElement(child)) return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).cloneElement(child, {
48
+ }, (0, ($parcel$interopDefault($9pthv$react))).Children.map(children, (child)=>{
49
+ if (/*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).isValidElement(child)) return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).cloneElement(child, {
51
50
  align: align
52
51
  });
53
52
  return child;
54
53
  }));
55
54
  };
56
- const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
55
+ const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
57
56
 
58
57
 
59
58
 
@@ -64,84 +63,81 @@ const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ ($parcel$interop
64
63
 
65
64
 
66
65
 
67
- const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align })=>$9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
68
- display: 'flex',
69
- flexDirection: 'row',
70
- alignItems: 'center',
71
- border: '0',
72
- padding: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM,
73
- backgroundColor: 'transparent',
74
- fontFamily: ($parcel$interopDefault($9pthv$contentfulf36tokens)).fontStackPrimary,
75
- fontSize: ($parcel$interopDefault($9pthv$contentfulf36tokens)).fontSizeL,
76
- fontWeight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).fontWeightDemiBold,
77
- lineHeight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).lineHeightL,
78
- color: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray800,
79
- width: '100%',
80
- minWidth: '9px',
81
- cursor: 'pointer',
82
- transition: `background-color ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault},
83
- box-shadow ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationShort} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`,
84
- '&:hover': {
85
- backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100
66
+ const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align })=>(0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
67
+ display: "flex",
68
+ flexDirection: "row",
69
+ alignItems: "center",
70
+ border: "0",
71
+ padding: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM,
72
+ backgroundColor: "transparent",
73
+ fontFamily: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).fontStackPrimary,
74
+ fontSize: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).fontSizeL,
75
+ fontWeight: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).fontWeightDemiBold,
76
+ lineHeight: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).lineHeightL,
77
+ color: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray800,
78
+ width: "100%",
79
+ minWidth: "9px",
80
+ cursor: "pointer",
81
+ transition: `background-color ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionDurationDefault} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionEasingDefault},
82
+ box-shadow ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionDurationShort} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionEasingDefault}`,
83
+ "&:hover": {
84
+ backgroundColor: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray100
86
85
  },
87
- '&:focus': {
88
- backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100,
89
- borderRadius: ($parcel$interopDefault($9pthv$contentfulf36tokens)).borderRadiusMedium,
90
- boxShadow: ($parcel$interopDefault($9pthv$contentfulf36tokens)).glowPrimary,
91
- outline: 'none'
86
+ "&:focus": {
87
+ backgroundColor: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray100,
88
+ borderRadius: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).borderRadiusMedium,
89
+ boxShadow: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).glowPrimary,
90
+ outline: "none"
92
91
  },
93
- '&:focus:not(:focus-visible)': {
94
- backgroundColor: 'transparent',
95
- borderRadius: 'unset',
96
- boxShadow: 'unset'
92
+ "&:focus:not(:focus-visible)": {
93
+ backgroundColor: "transparent",
94
+ borderRadius: "unset",
95
+ boxShadow: "unset"
97
96
  },
98
- '&:focus-visible': {
99
- backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100,
100
- borderRadius: ($parcel$interopDefault($9pthv$contentfulf36tokens)).borderRadiusMedium,
101
- boxShadow: ($parcel$interopDefault($9pthv$contentfulf36tokens)).glowPrimary
97
+ "&:focus-visible": {
98
+ backgroundColor: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).gray100,
99
+ borderRadius: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).borderRadiusMedium,
100
+ boxShadow: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).glowPrimary
102
101
  }
103
- }), align === 'end' && /*#__PURE__*/ $9pthv$emotion.css({
102
+ }), align === "end" && /*#__PURE__*/ (0, $9pthv$emotion.css)({
104
103
  name: "1tvf3d0",
105
104
  styles: "flex-direction:row-reverse;justify-content:space-between;"
106
- }))
107
- ;
108
- const $cc0727a9cc62031c$var$getIconStyles = ({ align: align , isExpanded: isExpanded })=>$9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
109
- transform: 'rotate(0deg)',
110
- transition: `transform ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`
111
- }), align === 'end' && /*#__PURE__*/ $9pthv$emotion.css({
112
- marginLeft: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM
113
- }), align === 'start' && /*#__PURE__*/ $9pthv$emotion.css({
114
- marginRight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM
115
- }), isExpanded && /*#__PURE__*/ $9pthv$emotion.css({
105
+ }));
106
+ const $cc0727a9cc62031c$var$getIconStyles = ({ align: align , isExpanded: isExpanded })=>(0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
107
+ transform: "rotate(0deg)",
108
+ transition: `transform ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionDurationDefault} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).transitionEasingDefault}`
109
+ }), align === "end" && /*#__PURE__*/ (0, $9pthv$emotion.css)({
110
+ marginLeft: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM
111
+ }), align === "start" && /*#__PURE__*/ (0, $9pthv$emotion.css)({
112
+ marginRight: (0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM
113
+ }), isExpanded && /*#__PURE__*/ (0, $9pthv$emotion.css)({
116
114
  name: "4ky835",
117
115
  styles: "transform:rotate(180deg);"
118
- }))
119
- ;
116
+ }));
120
117
  const $cc0727a9cc62031c$export$b6b01239d0041103 = (props)=>({
121
118
  accordionHeader: $cc0727a9cc62031c$var$getHeaderStyles(props),
122
119
  accordionHeaderIcon: $cc0727a9cc62031c$var$getIconStyles(props)
123
- })
124
- ;
120
+ });
125
121
 
126
122
 
127
- const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClick: onClick , isExpanded: isExpanded = false , ariaId: ariaId , element: element = 'h2' , align: align = 'end' , testId: testId = 'cf-ui-accordion-header' , ...rest })=>{
128
- const styles = $cc0727a9cc62031c$export$b6b01239d0041103({
123
+ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClick: onClick , isExpanded: isExpanded = false , ariaId: ariaId , element: element = "h2" , align: align = "end" , testId: testId = "cf-ui-accordion-header" , ...rest })=>{
124
+ const styles = (0, $cc0727a9cc62031c$export$b6b01239d0041103)({
129
125
  align: align,
130
126
  isExpanded: isExpanded
131
127
  });
132
- return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36typography.Subheading, {
128
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36typography.Subheading), {
133
129
  ...rest,
134
130
  testId: testId,
135
131
  marginBottom: "none",
136
132
  as: element
137
- }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement("button", {
133
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement("button", {
138
134
  type: "button",
139
135
  "aria-expanded": isExpanded,
140
136
  "aria-controls": `accordion-panel--${ariaId}`,
141
137
  id: `accordion--${ariaId}`,
142
138
  className: styles.accordionHeader,
143
139
  onClick: onClick
144
- }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36icons.ChevronDownTrimmedIcon, {
140
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36icons.ChevronDownTrimmedIcon), {
145
141
  className: styles.accordionHeaderIcon,
146
142
  variant: "secondary"
147
143
  }), children));
@@ -154,22 +150,22 @@ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClic
154
150
 
155
151
  const $1911a31b860eeb50$export$2db50514b4b2c1ee = ()=>{
156
152
  return {
157
- accordionPanelContent: /*#__PURE__*/ $9pthv$emotion.css({
158
- width: '100%',
159
- padding: `${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingXs} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM}`
153
+ accordionPanelContent: /*#__PURE__*/ (0, $9pthv$emotion.css)({
154
+ width: "100%",
155
+ padding: `${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingXs} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM} ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).spacingM}`
160
156
  })
161
157
  };
162
158
  };
163
159
 
164
160
 
165
- const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
166
- const styles = $1911a31b860eeb50$export$2db50514b4b2c1ee();
167
- return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36collapse.Collapse, {
161
+ const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = "cf-ui-accordion-panel" , ...otherProps })=>{
162
+ const styles = (0, $1911a31b860eeb50$export$2db50514b4b2c1ee)();
163
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36collapse.Collapse), {
168
164
  "data-test-id": testId,
169
165
  "aria-labelledby": `accordion--${ariaId}`,
170
166
  isExpanded: isExpanded,
171
167
  ...otherProps
172
- }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement("div", {
168
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement("div", {
173
169
  className: styles.accordionPanelContent
174
170
  }, children));
175
171
  };
@@ -179,24 +175,23 @@ const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpa
179
175
 
180
176
 
181
177
  const $b70a2de4b5faa5c1$export$c4864364a487dfa = ({ className: className })=>({
182
- accordionItem: $9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
183
- padding: '0',
184
- margin: '0',
185
- borderBottom: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).colorElementMid}`,
186
- '&:first-child': {
187
- borderTop: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).colorElementMid}`
178
+ accordionItem: (0, $9pthv$emotion.cx)(/*#__PURE__*/ (0, $9pthv$emotion.css)({
179
+ padding: "0",
180
+ margin: "0",
181
+ borderBottom: `1px solid ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).colorElementMid}`,
182
+ "&:first-child": {
183
+ borderTop: `1px solid ${(0, ($parcel$interopDefault($9pthv$contentfulf36tokens))).colorElementMid}`
188
184
  }
189
185
  }), className)
190
- })
191
- ;
186
+ });
192
187
 
193
188
 
194
- const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = 'Accordion Title' , titleElement: titleElement = 'h2' , testId: testId = 'cf-ui-accordion-item' , onExpand: onExpand , onCollapse: onCollapse , children: children , align: align = 'end' , className: className , isExpanded: isExpanded , ...otherProps }, ref)=>{
195
- const styles = $b70a2de4b5faa5c1$export$c4864364a487dfa({
189
+ const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = "Accordion Title" , titleElement: titleElement = "h2" , testId: testId = "cf-ui-accordion-item" , onExpand: onExpand , onCollapse: onCollapse , children: children , align: align = "end" , className: className , isExpanded: isExpanded , ...otherProps }, ref)=>{
190
+ const styles = (0, $b70a2de4b5faa5c1$export$c4864364a487dfa)({
196
191
  className: className
197
192
  });
198
- const id = $9pthv$contentfulf36core.useId();
199
- const { isOpen: isOpen , handleOpen: handleOpen , handleClose: handleClose } = $9pthv$contentfulf36core.useControllableState({
193
+ const id = (0, $9pthv$contentfulf36core.useId)();
194
+ const { isOpen: isOpen , handleOpen: handleOpen , handleClose: handleClose } = (0, $9pthv$contentfulf36core.useControllableState)({
200
195
  isOpen: isExpanded,
201
196
  onOpen: onExpand,
202
197
  onClose: onCollapse
@@ -205,28 +200,28 @@ const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = 'Accordion Title'
205
200
  if (isOpen) handleClose();
206
201
  else handleOpen();
207
202
  };
208
- return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
203
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $9pthv$contentfulf36core.Box), {
209
204
  as: "li",
210
205
  className: styles.accordionItem,
211
206
  testId: `${testId}-${id}`,
212
207
  ...otherProps,
213
208
  ref: ref
214
- }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41, {
209
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41), {
215
210
  onClick: handleOnClick,
216
211
  isExpanded: isOpen,
217
212
  element: titleElement,
218
213
  ariaId: id,
219
214
  align: align
220
- }, title), /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($dc0312cfa0956395$export$7cad6f17fd6e117b, {
215
+ }, title), /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).createElement((0, $dc0312cfa0956395$export$7cad6f17fd6e117b), {
221
216
  ariaId: id,
222
217
  isExpanded: isOpen
223
218
  }, children));
224
219
  };
225
- const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($b9a3851e41efa019$var$_AccordionItem);
220
+ const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ (0, ($parcel$interopDefault($9pthv$react))).forwardRef($b9a3851e41efa019$var$_AccordionItem);
226
221
 
227
222
 
228
- const $485e20d95dcb1fa7$export$a766cd26d0d69044 = $6b1aad2dfaf9ce0d$export$a766cd26d0d69044;
229
- $485e20d95dcb1fa7$export$a766cd26d0d69044.Item = $b9a3851e41efa019$export$d99097c13d4dac9f;
223
+ const $485e20d95dcb1fa7$export$a766cd26d0d69044 = (0, $6b1aad2dfaf9ce0d$export$a766cd26d0d69044);
224
+ $485e20d95dcb1fa7$export$a766cd26d0d69044.Item = (0, $b9a3851e41efa019$export$d99097c13d4dac9f);
230
225
 
231
226
 
232
227
 
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: () => void;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: () => void;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n\n /**\n * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: () => void;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: () => void;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n\n /**\n * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -12,37 +12,36 @@ import {Collapse as $jACei$Collapse} from "@contentful/f36-collapse";
12
12
 
13
13
 
14
14
  const $d678e0ec669f4067$export$af90c4d6702a6ca7 = ({ className: className })=>({
15
- accordion: $jACei$cx(/*#__PURE__*/ $jACei$css({
16
- boxSizing: 'border-box',
17
- padding: '0',
18
- margin: '0',
19
- listStyle: 'none',
20
- '&:first-child': {
21
- borderTop: `1px solid ${$jACei$contentfulf36tokens.gray300}`
15
+ accordion: (0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
16
+ boxSizing: "border-box",
17
+ padding: "0",
18
+ margin: "0",
19
+ listStyle: "none",
20
+ "&:first-child": {
21
+ borderTop: `1px solid ${(0, $jACei$contentfulf36tokens).gray300}`
22
22
  }
23
23
  }), className)
24
- })
25
- ;
24
+ });
26
25
 
27
26
 
28
- const $a517c4a963657a24$var$_Accordion = ({ align: align = 'end' , children: children , className: className , testId: testId = 'cf-ui-accordion' , ...otherProps }, ref)=>{
29
- const styles = $d678e0ec669f4067$export$af90c4d6702a6ca7({
27
+ const $a517c4a963657a24$var$_Accordion = ({ align: align = "end" , children: children , className: className , testId: testId = "cf-ui-accordion" , ...otherProps }, ref)=>{
28
+ const styles = (0, $d678e0ec669f4067$export$af90c4d6702a6ca7)({
30
29
  className: className
31
30
  });
32
- return /*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
31
+ return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Box), {
33
32
  as: "ul",
34
33
  className: styles.accordion,
35
34
  testId: testId,
36
35
  ...otherProps,
37
36
  ref: ref
38
- }, $jACei$react.Children.map(children, (child)=>{
39
- if (/*#__PURE__*/ $jACei$react.isValidElement(child)) return /*#__PURE__*/ $jACei$react.cloneElement(child, {
37
+ }, (0, $jACei$react).Children.map(children, (child)=>{
38
+ if (/*#__PURE__*/ (0, $jACei$react).isValidElement(child)) return /*#__PURE__*/ (0, $jACei$react).cloneElement(child, {
40
39
  align: align
41
40
  });
42
41
  return child;
43
42
  }));
44
43
  };
45
- const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ $jACei$react.forwardRef($a517c4a963657a24$var$_Accordion);
44
+ const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ (0, $jACei$react).forwardRef($a517c4a963657a24$var$_Accordion);
46
45
 
47
46
 
48
47
 
@@ -53,84 +52,81 @@ const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ $jACei$react.for
53
52
 
54
53
 
55
54
 
56
- const $d95c2a37e890ef38$var$getHeaderStyles = ({ align: align })=>$jACei$cx(/*#__PURE__*/ $jACei$css({
57
- display: 'flex',
58
- flexDirection: 'row',
59
- alignItems: 'center',
60
- border: '0',
61
- padding: $jACei$contentfulf36tokens.spacingM,
62
- backgroundColor: 'transparent',
63
- fontFamily: $jACei$contentfulf36tokens.fontStackPrimary,
64
- fontSize: $jACei$contentfulf36tokens.fontSizeL,
65
- fontWeight: $jACei$contentfulf36tokens.fontWeightDemiBold,
66
- lineHeight: $jACei$contentfulf36tokens.lineHeightL,
67
- color: $jACei$contentfulf36tokens.gray800,
68
- width: '100%',
69
- minWidth: '9px',
70
- cursor: 'pointer',
71
- transition: `background-color ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault},
72
- box-shadow ${$jACei$contentfulf36tokens.transitionDurationShort} ${$jACei$contentfulf36tokens.transitionEasingDefault}`,
73
- '&:hover': {
74
- backgroundColor: $jACei$contentfulf36tokens.gray100
55
+ const $d95c2a37e890ef38$var$getHeaderStyles = ({ align: align })=>(0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
56
+ display: "flex",
57
+ flexDirection: "row",
58
+ alignItems: "center",
59
+ border: "0",
60
+ padding: (0, $jACei$contentfulf36tokens).spacingM,
61
+ backgroundColor: "transparent",
62
+ fontFamily: (0, $jACei$contentfulf36tokens).fontStackPrimary,
63
+ fontSize: (0, $jACei$contentfulf36tokens).fontSizeL,
64
+ fontWeight: (0, $jACei$contentfulf36tokens).fontWeightDemiBold,
65
+ lineHeight: (0, $jACei$contentfulf36tokens).lineHeightL,
66
+ color: (0, $jACei$contentfulf36tokens).gray800,
67
+ width: "100%",
68
+ minWidth: "9px",
69
+ cursor: "pointer",
70
+ transition: `background-color ${(0, $jACei$contentfulf36tokens).transitionDurationDefault} ${(0, $jACei$contentfulf36tokens).transitionEasingDefault},
71
+ box-shadow ${(0, $jACei$contentfulf36tokens).transitionDurationShort} ${(0, $jACei$contentfulf36tokens).transitionEasingDefault}`,
72
+ "&:hover": {
73
+ backgroundColor: (0, $jACei$contentfulf36tokens).gray100
75
74
  },
76
- '&:focus': {
77
- backgroundColor: $jACei$contentfulf36tokens.gray100,
78
- borderRadius: $jACei$contentfulf36tokens.borderRadiusMedium,
79
- boxShadow: $jACei$contentfulf36tokens.glowPrimary,
80
- outline: 'none'
75
+ "&:focus": {
76
+ backgroundColor: (0, $jACei$contentfulf36tokens).gray100,
77
+ borderRadius: (0, $jACei$contentfulf36tokens).borderRadiusMedium,
78
+ boxShadow: (0, $jACei$contentfulf36tokens).glowPrimary,
79
+ outline: "none"
81
80
  },
82
- '&:focus:not(:focus-visible)': {
83
- backgroundColor: 'transparent',
84
- borderRadius: 'unset',
85
- boxShadow: 'unset'
81
+ "&:focus:not(:focus-visible)": {
82
+ backgroundColor: "transparent",
83
+ borderRadius: "unset",
84
+ boxShadow: "unset"
86
85
  },
87
- '&:focus-visible': {
88
- backgroundColor: $jACei$contentfulf36tokens.gray100,
89
- borderRadius: $jACei$contentfulf36tokens.borderRadiusMedium,
90
- boxShadow: $jACei$contentfulf36tokens.glowPrimary
86
+ "&:focus-visible": {
87
+ backgroundColor: (0, $jACei$contentfulf36tokens).gray100,
88
+ borderRadius: (0, $jACei$contentfulf36tokens).borderRadiusMedium,
89
+ boxShadow: (0, $jACei$contentfulf36tokens).glowPrimary
91
90
  }
92
- }), align === 'end' && /*#__PURE__*/ $jACei$css({
91
+ }), align === "end" && /*#__PURE__*/ (0, $jACei$css)({
93
92
  name: "1tvf3d0",
94
93
  styles: "flex-direction:row-reverse;justify-content:space-between;"
95
- }))
96
- ;
97
- const $d95c2a37e890ef38$var$getIconStyles = ({ align: align , isExpanded: isExpanded })=>$jACei$cx(/*#__PURE__*/ $jACei$css({
98
- transform: 'rotate(0deg)',
99
- transition: `transform ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault}`
100
- }), align === 'end' && /*#__PURE__*/ $jACei$css({
101
- marginLeft: $jACei$contentfulf36tokens.spacingM
102
- }), align === 'start' && /*#__PURE__*/ $jACei$css({
103
- marginRight: $jACei$contentfulf36tokens.spacingM
104
- }), isExpanded && /*#__PURE__*/ $jACei$css({
94
+ }));
95
+ const $d95c2a37e890ef38$var$getIconStyles = ({ align: align , isExpanded: isExpanded })=>(0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
96
+ transform: "rotate(0deg)",
97
+ transition: `transform ${(0, $jACei$contentfulf36tokens).transitionDurationDefault} ${(0, $jACei$contentfulf36tokens).transitionEasingDefault}`
98
+ }), align === "end" && /*#__PURE__*/ (0, $jACei$css)({
99
+ marginLeft: (0, $jACei$contentfulf36tokens).spacingM
100
+ }), align === "start" && /*#__PURE__*/ (0, $jACei$css)({
101
+ marginRight: (0, $jACei$contentfulf36tokens).spacingM
102
+ }), isExpanded && /*#__PURE__*/ (0, $jACei$css)({
105
103
  name: "4ky835",
106
104
  styles: "transform:rotate(180deg);"
107
- }))
108
- ;
105
+ }));
109
106
  const $d95c2a37e890ef38$export$b6b01239d0041103 = (props)=>({
110
107
  accordionHeader: $d95c2a37e890ef38$var$getHeaderStyles(props),
111
108
  accordionHeaderIcon: $d95c2a37e890ef38$var$getIconStyles(props)
112
- })
113
- ;
109
+ });
114
110
 
115
111
 
116
- const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClick: onClick , isExpanded: isExpanded = false , ariaId: ariaId , element: element = 'h2' , align: align = 'end' , testId: testId = 'cf-ui-accordion-header' , ...rest })=>{
117
- const styles = $d95c2a37e890ef38$export$b6b01239d0041103({
112
+ const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClick: onClick , isExpanded: isExpanded = false , ariaId: ariaId , element: element = "h2" , align: align = "end" , testId: testId = "cf-ui-accordion-header" , ...rest })=>{
113
+ const styles = (0, $d95c2a37e890ef38$export$b6b01239d0041103)({
118
114
  align: align,
119
115
  isExpanded: isExpanded
120
116
  });
121
- return /*#__PURE__*/ $jACei$react.createElement($jACei$Subheading, {
117
+ return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Subheading), {
122
118
  ...rest,
123
119
  testId: testId,
124
120
  marginBottom: "none",
125
121
  as: element
126
- }, /*#__PURE__*/ $jACei$react.createElement("button", {
122
+ }, /*#__PURE__*/ (0, $jACei$react).createElement("button", {
127
123
  type: "button",
128
124
  "aria-expanded": isExpanded,
129
125
  "aria-controls": `accordion-panel--${ariaId}`,
130
126
  id: `accordion--${ariaId}`,
131
127
  className: styles.accordionHeader,
132
128
  onClick: onClick
133
- }, /*#__PURE__*/ $jACei$react.createElement($jACei$ChevronDownTrimmedIcon, {
129
+ }, /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$ChevronDownTrimmedIcon), {
134
130
  className: styles.accordionHeaderIcon,
135
131
  variant: "secondary"
136
132
  }), children));
@@ -143,22 +139,22 @@ const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClic
143
139
 
144
140
  const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
145
141
  return {
146
- accordionPanelContent: /*#__PURE__*/ $jACei$css({
147
- width: '100%',
148
- padding: `${$jACei$contentfulf36tokens.spacingXs} ${$jACei$contentfulf36tokens.spacingM} ${$jACei$contentfulf36tokens.spacingM}`
142
+ accordionPanelContent: /*#__PURE__*/ (0, $jACei$css)({
143
+ width: "100%",
144
+ padding: `${(0, $jACei$contentfulf36tokens).spacingXs} ${(0, $jACei$contentfulf36tokens).spacingM} ${(0, $jACei$contentfulf36tokens).spacingM}`
149
145
  })
150
146
  };
151
147
  };
152
148
 
153
149
 
154
- const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
155
- const styles = $3ba27b87c168e14d$export$2db50514b4b2c1ee();
156
- return /*#__PURE__*/ $jACei$react.createElement($jACei$Collapse, {
150
+ const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = "cf-ui-accordion-panel" , ...otherProps })=>{
151
+ const styles = (0, $3ba27b87c168e14d$export$2db50514b4b2c1ee)();
152
+ return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Collapse), {
157
153
  "data-test-id": testId,
158
154
  "aria-labelledby": `accordion--${ariaId}`,
159
155
  isExpanded: isExpanded,
160
156
  ...otherProps
161
- }, /*#__PURE__*/ $jACei$react.createElement("div", {
157
+ }, /*#__PURE__*/ (0, $jACei$react).createElement("div", {
162
158
  className: styles.accordionPanelContent
163
159
  }, children));
164
160
  };
@@ -168,24 +164,23 @@ const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpa
168
164
 
169
165
 
170
166
  const $10647792993fae18$export$c4864364a487dfa = ({ className: className })=>({
171
- accordionItem: $jACei$cx(/*#__PURE__*/ $jACei$css({
172
- padding: '0',
173
- margin: '0',
174
- borderBottom: `1px solid ${$jACei$contentfulf36tokens.colorElementMid}`,
175
- '&:first-child': {
176
- borderTop: `1px solid ${$jACei$contentfulf36tokens.colorElementMid}`
167
+ accordionItem: (0, $jACei$cx)(/*#__PURE__*/ (0, $jACei$css)({
168
+ padding: "0",
169
+ margin: "0",
170
+ borderBottom: `1px solid ${(0, $jACei$contentfulf36tokens).colorElementMid}`,
171
+ "&:first-child": {
172
+ borderTop: `1px solid ${(0, $jACei$contentfulf36tokens).colorElementMid}`
177
173
  }
178
174
  }), className)
179
- })
180
- ;
175
+ });
181
176
 
182
177
 
183
- const $b6120c67649da348$var$_AccordionItem = ({ title: title = 'Accordion Title' , titleElement: titleElement = 'h2' , testId: testId = 'cf-ui-accordion-item' , onExpand: onExpand , onCollapse: onCollapse , children: children , align: align = 'end' , className: className , isExpanded: isExpanded , ...otherProps }, ref)=>{
184
- const styles = $10647792993fae18$export$c4864364a487dfa({
178
+ const $b6120c67649da348$var$_AccordionItem = ({ title: title = "Accordion Title" , titleElement: titleElement = "h2" , testId: testId = "cf-ui-accordion-item" , onExpand: onExpand , onCollapse: onCollapse , children: children , align: align = "end" , className: className , isExpanded: isExpanded , ...otherProps }, ref)=>{
179
+ const styles = (0, $10647792993fae18$export$c4864364a487dfa)({
185
180
  className: className
186
181
  });
187
- const id = $jACei$useId();
188
- const { isOpen: isOpen , handleOpen: handleOpen , handleClose: handleClose } = $jACei$useControllableState({
182
+ const id = (0, $jACei$useId)();
183
+ const { isOpen: isOpen , handleOpen: handleOpen , handleClose: handleClose } = (0, $jACei$useControllableState)({
189
184
  isOpen: isExpanded,
190
185
  onOpen: onExpand,
191
186
  onClose: onCollapse
@@ -194,28 +189,28 @@ const $b6120c67649da348$var$_AccordionItem = ({ title: title = 'Accordion Title'
194
189
  if (isOpen) handleClose();
195
190
  else handleOpen();
196
191
  };
197
- return /*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
192
+ return /*#__PURE__*/ (0, $jACei$react).createElement((0, $jACei$Box), {
198
193
  as: "li",
199
194
  className: styles.accordionItem,
200
195
  testId: `${testId}-${id}`,
201
196
  ...otherProps,
202
197
  ref: ref
203
- }, /*#__PURE__*/ $jACei$react.createElement($01f1d19e673d71a7$export$5e3e5deaaf81ee41, {
198
+ }, /*#__PURE__*/ (0, $jACei$react).createElement((0, $01f1d19e673d71a7$export$5e3e5deaaf81ee41), {
204
199
  onClick: handleOnClick,
205
200
  isExpanded: isOpen,
206
201
  element: titleElement,
207
202
  ariaId: id,
208
203
  align: align
209
- }, title), /*#__PURE__*/ $jACei$react.createElement($0c5bba33d6cffbcc$export$7cad6f17fd6e117b, {
204
+ }, title), /*#__PURE__*/ (0, $jACei$react).createElement((0, $0c5bba33d6cffbcc$export$7cad6f17fd6e117b), {
210
205
  ariaId: id,
211
206
  isExpanded: isOpen
212
207
  }, children));
213
208
  };
214
- const $b6120c67649da348$export$d99097c13d4dac9f = /*#__PURE__*/ $jACei$react.forwardRef($b6120c67649da348$var$_AccordionItem);
209
+ const $b6120c67649da348$export$d99097c13d4dac9f = /*#__PURE__*/ (0, $jACei$react).forwardRef($b6120c67649da348$var$_AccordionItem);
215
210
 
216
211
 
217
- const $9e55ae7143081c67$export$a766cd26d0d69044 = $a517c4a963657a24$export$a766cd26d0d69044;
218
- $9e55ae7143081c67$export$a766cd26d0d69044.Item = $b6120c67649da348$export$d99097c13d4dac9f;
212
+ const $9e55ae7143081c67$export$a766cd26d0d69044 = (0, $a517c4a963657a24$export$a766cd26d0d69044);
213
+ $9e55ae7143081c67$export$a766cd26d0d69044.Item = (0, $b6120c67649da348$export$d99097c13d4dac9f);
219
214
 
220
215
 
221
216
 
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: () => void;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: () => void;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n\n /**\n * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: () => void;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: () => void;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n\n /**\n * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"module.js.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/f36-accordion",
3
- "version": "4.14.0",
3
+ "version": "4.15.0",
4
4
  "description": "Forma 36: Accordion React Component",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -21,11 +21,11 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@babel/runtime": "^7.6.2",
24
- "@contentful/f36-collapse": "^4.14.0",
25
- "@contentful/f36-core": "^4.14.0",
26
- "@contentful/f36-icons": "^4.14.0",
24
+ "@contentful/f36-collapse": "^4.15.0",
25
+ "@contentful/f36-core": "^4.15.0",
26
+ "@contentful/f36-icons": "^4.15.0",
27
27
  "@contentful/f36-tokens": "^4.0.1",
28
- "@contentful/f36-typography": "^4.14.0",
28
+ "@contentful/f36-typography": "^4.15.0",
29
29
  "emotion": "^10.0.17"
30
30
  },
31
31
  "peerDependencies": {