@contentful/f36-accordion 4.0.1-beta.2558 → 4.0.1-beta.2696

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 (7) hide show
  1. package/dist/main.js +34 -79
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +7 -52
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +20 -4
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +7 -6
package/dist/main.js CHANGED
@@ -4,6 +4,7 @@ var $9pthv$emotion = require("emotion");
4
4
  var $9pthv$contentfulf36tokens = require("@contentful/f36-tokens");
5
5
  var $9pthv$contentfulf36typography = require("@contentful/f36-typography");
6
6
  var $9pthv$contentfulf36icons = require("@contentful/f36-icons");
7
+ var $9pthv$contentfulf36collapse = require("@contentful/f36-collapse");
7
8
 
8
9
  function $parcel$export(e, n, v, s) {
9
10
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -28,7 +29,7 @@ const $b2e2219a9d74caf2$export$af90c4d6702a6ca7 = ({ className: className })=>(
28
29
  margin: '0',
29
30
  listStyle: 'none',
30
31
  '&:first-child': {
31
- borderTop: `1px solid ${$parcel$interopDefault($9pthv$contentfulf36tokens).gray300}`
32
+ borderTop: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).gray300}`
32
33
  }
33
34
  }), className)
34
35
  })
@@ -39,20 +40,20 @@ const $6b1aad2dfaf9ce0d$var$_Accordion = ({ align: align = 'end' , children: chi
39
40
  const styles = $b2e2219a9d74caf2$export$af90c4d6702a6ca7({
40
41
  className: className
41
42
  });
42
- return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36core.Box, {
43
+ return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
43
44
  as: "ul",
44
45
  className: styles.accordion,
45
46
  testId: testId,
46
47
  ...otherProps,
47
48
  ref: ref
48
- }, $parcel$interopDefault($9pthv$react).Children.map(children, (child)=>{
49
- if (/*#__PURE__*/ $parcel$interopDefault($9pthv$react).isValidElement(child)) return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).cloneElement(child, {
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, {
50
51
  align: align
51
52
  }));
52
53
  return child;
53
54
  })));
54
55
  };
55
- const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ $parcel$interopDefault($9pthv$react).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
56
+ const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
56
57
 
57
58
 
58
59
 
@@ -68,23 +69,23 @@ const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align })=>$9pthv$emotio
68
69
  flexDirection: 'row',
69
70
  alignItems: 'center',
70
71
  border: '0',
71
- padding: $parcel$interopDefault($9pthv$contentfulf36tokens).spacingM,
72
+ padding: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM,
72
73
  backgroundColor: 'transparent',
73
- fontFamily: $parcel$interopDefault($9pthv$contentfulf36tokens).fontStackPrimary,
74
- fontSize: $parcel$interopDefault($9pthv$contentfulf36tokens).fontSizeL,
75
- fontWeight: $parcel$interopDefault($9pthv$contentfulf36tokens).fontWeightDemiBold,
76
- lineHeight: $parcel$interopDefault($9pthv$contentfulf36tokens).lineHeightL,
77
- color: $parcel$interopDefault($9pthv$contentfulf36tokens).gray800,
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,
78
79
  width: '100%',
79
80
  minWidth: '9px',
80
81
  cursor: 'pointer',
81
- transition: `background-color ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionEasingDefault}`,
82
+ transition: `background-color ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`,
82
83
  '&:hover': {
83
- backgroundColor: $parcel$interopDefault($9pthv$contentfulf36tokens).gray100
84
+ backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100
84
85
  },
85
86
  '&:focus': {
86
87
  outline: 'none',
87
- backgroundColor: $parcel$interopDefault($9pthv$contentfulf36tokens).gray100
88
+ backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100
88
89
  }
89
90
  }), align === 'end' && /*#__PURE__*/ $9pthv$emotion.css({
90
91
  name: "1tvf3d0",
@@ -93,11 +94,11 @@ const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align })=>$9pthv$emotio
93
94
  ;
94
95
  const $cc0727a9cc62031c$var$getIconStyles = ({ align: align , isExpanded: isExpanded })=>$9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
95
96
  transform: 'rotate(0deg)',
96
- transition: `transform ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionEasingDefault}`
97
+ transition: `transform ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`
97
98
  }), align === 'end' && /*#__PURE__*/ $9pthv$emotion.css({
98
- marginLeft: $parcel$interopDefault($9pthv$contentfulf36tokens).spacingM
99
+ marginLeft: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM
99
100
  }), align === 'start' && /*#__PURE__*/ $9pthv$emotion.css({
100
- marginRight: $parcel$interopDefault($9pthv$contentfulf36tokens).spacingM
101
+ marginRight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM
101
102
  }), isExpanded && /*#__PURE__*/ $9pthv$emotion.css({
102
103
  name: "4ky835",
103
104
  styles: "transform:rotate(180deg);"
@@ -115,19 +116,19 @@ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClic
115
116
  align: align,
116
117
  isExpanded: isExpanded
117
118
  });
118
- return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36typography.Subheading, {
119
+ return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36typography.Subheading, {
119
120
  ...rest,
120
121
  testId: testId,
121
122
  marginBottom: "none",
122
123
  as: element
123
- }, /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement("button", {
124
+ }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement("button", {
124
125
  type: "button",
125
126
  "aria-expanded": isExpanded,
126
127
  "aria-controls": `accordion-panel--${ariaId}`,
127
128
  id: `accordion--${ariaId}`,
128
129
  className: styles.accordionHeader,
129
130
  onClick: onClick
130
- }, /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36icons.ChevronDownTrimmedIcon, {
131
+ }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36icons.ChevronDownTrimmedIcon, {
131
132
  className: styles.accordionHeaderIcon,
132
133
  variant: "secondary"
133
134
  }), children)));
@@ -138,70 +139,24 @@ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClic
138
139
 
139
140
 
140
141
 
141
-
142
142
  const $1911a31b860eeb50$export$2db50514b4b2c1ee = ()=>{
143
143
  return {
144
- accordionPanel: /*#__PURE__*/ $9pthv$emotion.css({
145
- boxSizing: 'border-box',
146
- overflow: 'hidden',
147
- height: '0',
148
- transition: `height ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionEasingDefault}, padding ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionEasingDefault}`
149
- }),
150
144
  accordionPanelContent: /*#__PURE__*/ $9pthv$emotion.css({
151
145
  width: '100%',
152
- padding: `${$parcel$interopDefault($9pthv$contentfulf36tokens).spacingXs} ${$parcel$interopDefault($9pthv$contentfulf36tokens).spacingM} ${$parcel$interopDefault($9pthv$contentfulf36tokens).spacingM}`
146
+ padding: `${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingXs} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM}`
153
147
  })
154
148
  };
155
149
  };
156
150
 
157
151
 
158
- const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...rest })=>{
152
+ const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
159
153
  const styles = $1911a31b860eeb50$export$2db50514b4b2c1ee();
160
- const panelEl = $9pthv$react.useRef(null);
161
- const getPanelContentHeight = ()=>{
162
- const { current: current } = panelEl;
163
- if (!current) // to keep the function return type as string only and
164
- // not overcomplicate things with non-nullable checks
165
- return '0px';
166
- return `${current.scrollHeight / parseInt($parcel$interopDefault($9pthv$contentfulf36tokens).fontBaseDefault, 10)}rem`; // converting height pixels into rem
167
- };
168
- $9pthv$react.useLayoutEffect(()=>{
169
- const { current: current } = panelEl;
170
- const handleTransitionEnd = ()=>{
171
- if (current) current.style.height = 'auto';
172
- };
173
- if (current) {
174
- if (isExpanded) {
175
- current.addEventListener('transitionend', handleTransitionEnd);
176
- requestAnimationFrame(function() {
177
- current.style.height = '0px';
178
- requestAnimationFrame(function() {
179
- current.style.height = getPanelContentHeight();
180
- });
181
- });
182
- } else requestAnimationFrame(function() {
183
- current.style.height = getPanelContentHeight();
184
- requestAnimationFrame(function() {
185
- current.style.height = '0px';
186
- });
187
- });
188
- }
189
- return ()=>{
190
- if (current) current.removeEventListener('transitionend', handleTransitionEnd);
191
- };
192
- }, [
193
- isExpanded
194
- ]);
195
- return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36core.Box, {
196
- ...rest,
197
- testId: testId,
198
- id: `accordion-panel--${ariaId}`,
199
- role: "region",
154
+ return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36collapse.Collapse, {
155
+ "data-test-id": testId,
200
156
  "aria-labelledby": `accordion--${ariaId}`,
201
- "aria-hidden": !isExpanded,
202
- className: styles.accordionPanel,
203
- ref: panelEl
204
- }, /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement("div", {
157
+ isExpanded: isExpanded,
158
+ ...otherProps
159
+ }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement("div", {
205
160
  className: styles.accordionPanelContent
206
161
  }, children)));
207
162
  };
@@ -214,9 +169,9 @@ const $b70a2de4b5faa5c1$export$c4864364a487dfa = ({ className: className })=>({
214
169
  accordionItem: $9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
215
170
  padding: '0',
216
171
  margin: '0',
217
- borderBottom: `1px solid ${$parcel$interopDefault($9pthv$contentfulf36tokens).colorElementMid}`,
172
+ borderBottom: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).colorElementMid}`,
218
173
  '&:first-child': {
219
- borderTop: `1px solid ${$parcel$interopDefault($9pthv$contentfulf36tokens).colorElementMid}`
174
+ borderTop: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).colorElementMid}`
220
175
  }
221
176
  }), className)
222
177
  })
@@ -234,24 +189,24 @@ const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = 'Accordion Title'
234
189
  if (isExpanded && onCollapse) onCollapse();
235
190
  setIsExpanded(!isExpanded);
236
191
  };
237
- return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36core.Box, {
192
+ return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
238
193
  as: "li",
239
194
  className: styles.accordionItem,
240
195
  testId: `${testId}-${id}`,
241
196
  ...otherProps,
242
197
  ref: ref
243
- }, /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41, {
198
+ }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41, {
244
199
  onClick: handleOnClick,
245
200
  isExpanded: isExpanded,
246
201
  element: titleElement,
247
202
  ariaId: id,
248
203
  align: align
249
- }, title), /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($dc0312cfa0956395$export$7cad6f17fd6e117b, {
204
+ }, title), /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($dc0312cfa0956395$export$7cad6f17fd6e117b, {
250
205
  ariaId: id,
251
206
  isExpanded: isExpanded
252
207
  }, children)));
253
208
  };
254
- const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ $parcel$interopDefault($9pthv$react).forwardRef($b9a3851e41efa019$var$_AccordionItem);
209
+ const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($b9a3851e41efa019$var$_AccordionItem);
255
210
 
256
211
 
257
212
  const $485e20d95dcb1fa7$export$a766cd26d0d69044 = $6b1aad2dfaf9ce0d$export$a766cd26d0d69044;
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 } 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 }: 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, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps } 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?: Function;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: Function;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\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 ...otherProps\n }: AccordionItemProps,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const [isExpanded, setIsExpanded] = useState(false);\n\n const handleOnClick = () => {\n if (!isExpanded && onExpand) {\n onExpand();\n }\n if (isExpanded && onCollapse) {\n onCollapse();\n }\n\n setIsExpanded(!isExpanded);\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={isExpanded}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isExpanded}>\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 '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n outline: 'none',\n backgroundColor: tokens.gray100,\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, useLayoutEffect, useRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport type { CommonProps } from '@contentful/f36-core';\nimport { Box } from '@contentful/f36-core';\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<AccordionPanelProps> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...rest\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n const panelEl = useRef<HTMLDivElement>(null);\n\n const getPanelContentHeight = () => {\n const { current } = panelEl;\n\n if (!current) {\n // to keep the function return type as string only and\n // not overcomplicate things with non-nullable checks\n return '0px';\n }\n\n return `${current.scrollHeight / parseInt(tokens.fontBaseDefault, 10)}rem`; // converting height pixels into rem\n };\n\n useLayoutEffect(() => {\n const { current } = panelEl;\n\n const handleTransitionEnd = () => {\n if (current) {\n current.style.height = 'auto';\n }\n };\n\n if (current) {\n if (isExpanded) {\n current.addEventListener('transitionend', handleTransitionEnd);\n\n requestAnimationFrame(function () {\n current.style.height = '0px';\n\n requestAnimationFrame(function () {\n current.style.height = getPanelContentHeight();\n });\n });\n } else {\n requestAnimationFrame(function () {\n current.style.height = getPanelContentHeight();\n\n requestAnimationFrame(function () {\n current.style.height = '0px';\n });\n });\n }\n }\n\n return () => {\n if (current) {\n current.removeEventListener('transitionend', handleTransitionEnd);\n }\n };\n }, [isExpanded]);\n\n return (\n <Box\n {...rest}\n testId={testId}\n id={`accordion-panel--${ariaId}`}\n role=\"region\"\n aria-labelledby={`accordion--${ariaId}`}\n aria-hidden={!isExpanded}\n className={styles.accordionPanel}\n ref={panelEl}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Box>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanel: css({\n boxSizing: 'border-box',\n overflow: 'hidden',\n height: '0',\n transition: `height ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}, padding ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\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","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","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","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","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","useLayoutEffect","useRef","getAccordionPanelStyles","panelEl","HTMLDivElement","getPanelContentHeight","current","scrollHeight","parseInt","fontBaseDefault","handleTransitionEnd","style","height","addEventListener","requestAnimationFrame","removeEventListener","accordionPanel","accordionPanelContent","overflow","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, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } 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?: Function;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: Function;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\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 ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const [isExpanded, setIsExpanded] = useState(false);\n\n const handleOnClick = () => {\n if (!isExpanded && onExpand) {\n onExpand();\n }\n if (isExpanded && onCollapse) {\n onCollapse();\n }\n\n setIsExpanded(!isExpanded);\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={isExpanded}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isExpanded}>\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 '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n outline: 'none',\n backgroundColor: tokens.gray100,\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","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","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","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,9 +1,10 @@
1
- import $jACei$react, {useState as $jACei$useState, useRef as $jACei$useRef, useLayoutEffect as $jACei$useLayoutEffect} from "react";
1
+ import $jACei$react, {useState as $jACei$useState} from "react";
2
2
  import {Box as $jACei$Box, useId as $jACei$useId} from "@contentful/f36-core";
3
3
  import {cx as $jACei$cx, css as $jACei$css} from "emotion";
4
4
  import $jACei$contentfulf36tokens from "@contentful/f36-tokens";
5
5
  import {Subheading as $jACei$Subheading} from "@contentful/f36-typography";
6
6
  import {ChevronDownTrimmedIcon as $jACei$ChevronDownTrimmedIcon} from "@contentful/f36-icons";
7
+ import {Collapse as $jACei$Collapse} from "@contentful/f36-collapse";
7
8
 
8
9
 
9
10
 
@@ -127,15 +128,8 @@ const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClic
127
128
 
128
129
 
129
130
 
130
-
131
131
  const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
132
132
  return {
133
- accordionPanel: /*#__PURE__*/ $jACei$css({
134
- boxSizing: 'border-box',
135
- overflow: 'hidden',
136
- height: '0',
137
- transition: `height ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault}, padding ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault}`
138
- }),
139
133
  accordionPanelContent: /*#__PURE__*/ $jACei$css({
140
134
  width: '100%',
141
135
  padding: `${$jACei$contentfulf36tokens.spacingXs} ${$jACei$contentfulf36tokens.spacingM} ${$jACei$contentfulf36tokens.spacingM}`
@@ -144,52 +138,13 @@ const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
144
138
  };
145
139
 
146
140
 
147
- const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...rest })=>{
141
+ const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
148
142
  const styles = $3ba27b87c168e14d$export$2db50514b4b2c1ee();
149
- const panelEl = $jACei$useRef(null);
150
- const getPanelContentHeight = ()=>{
151
- const { current: current } = panelEl;
152
- if (!current) // to keep the function return type as string only and
153
- // not overcomplicate things with non-nullable checks
154
- return '0px';
155
- return `${current.scrollHeight / parseInt($jACei$contentfulf36tokens.fontBaseDefault, 10)}rem`; // converting height pixels into rem
156
- };
157
- $jACei$useLayoutEffect(()=>{
158
- const { current: current } = panelEl;
159
- const handleTransitionEnd = ()=>{
160
- if (current) current.style.height = 'auto';
161
- };
162
- if (current) {
163
- if (isExpanded) {
164
- current.addEventListener('transitionend', handleTransitionEnd);
165
- requestAnimationFrame(function() {
166
- current.style.height = '0px';
167
- requestAnimationFrame(function() {
168
- current.style.height = getPanelContentHeight();
169
- });
170
- });
171
- } else requestAnimationFrame(function() {
172
- current.style.height = getPanelContentHeight();
173
- requestAnimationFrame(function() {
174
- current.style.height = '0px';
175
- });
176
- });
177
- }
178
- return ()=>{
179
- if (current) current.removeEventListener('transitionend', handleTransitionEnd);
180
- };
181
- }, [
182
- isExpanded
183
- ]);
184
- return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
185
- ...rest,
186
- testId: testId,
187
- id: `accordion-panel--${ariaId}`,
188
- role: "region",
143
+ return(/*#__PURE__*/ $jACei$react.createElement($jACei$Collapse, {
144
+ "data-test-id": testId,
189
145
  "aria-labelledby": `accordion--${ariaId}`,
190
- "aria-hidden": !isExpanded,
191
- className: styles.accordionPanel,
192
- ref: panelEl
146
+ isExpanded: isExpanded,
147
+ ...otherProps
193
148
  }, /*#__PURE__*/ $jACei$react.createElement("div", {
194
149
  className: styles.accordionPanelContent
195
150
  }, children)));
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 } 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 }: 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, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps } 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?: Function;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: Function;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\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 ...otherProps\n }: AccordionItemProps,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const [isExpanded, setIsExpanded] = useState(false);\n\n const handleOnClick = () => {\n if (!isExpanded && onExpand) {\n onExpand();\n }\n if (isExpanded && onCollapse) {\n onCollapse();\n }\n\n setIsExpanded(!isExpanded);\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={isExpanded}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isExpanded}>\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 '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n outline: 'none',\n backgroundColor: tokens.gray100,\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, useLayoutEffect, useRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport type { CommonProps } from '@contentful/f36-core';\nimport { Box } from '@contentful/f36-core';\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<AccordionPanelProps> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...rest\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n const panelEl = useRef<HTMLDivElement>(null);\n\n const getPanelContentHeight = () => {\n const { current } = panelEl;\n\n if (!current) {\n // to keep the function return type as string only and\n // not overcomplicate things with non-nullable checks\n return '0px';\n }\n\n return `${current.scrollHeight / parseInt(tokens.fontBaseDefault, 10)}rem`; // converting height pixels into rem\n };\n\n useLayoutEffect(() => {\n const { current } = panelEl;\n\n const handleTransitionEnd = () => {\n if (current) {\n current.style.height = 'auto';\n }\n };\n\n if (current) {\n if (isExpanded) {\n current.addEventListener('transitionend', handleTransitionEnd);\n\n requestAnimationFrame(function () {\n current.style.height = '0px';\n\n requestAnimationFrame(function () {\n current.style.height = getPanelContentHeight();\n });\n });\n } else {\n requestAnimationFrame(function () {\n current.style.height = getPanelContentHeight();\n\n requestAnimationFrame(function () {\n current.style.height = '0px';\n });\n });\n }\n }\n\n return () => {\n if (current) {\n current.removeEventListener('transitionend', handleTransitionEnd);\n }\n };\n }, [isExpanded]);\n\n return (\n <Box\n {...rest}\n testId={testId}\n id={`accordion-panel--${ariaId}`}\n role=\"region\"\n aria-labelledby={`accordion--${ariaId}`}\n aria-hidden={!isExpanded}\n className={styles.accordionPanel}\n ref={panelEl}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Box>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanel: css({\n boxSizing: 'border-box',\n overflow: 'hidden',\n height: '0',\n transition: `height ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}, padding ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\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","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","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","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","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","useLayoutEffect","useRef","getAccordionPanelStyles","panelEl","HTMLDivElement","getPanelContentHeight","current","scrollHeight","parseInt","fontBaseDefault","handleTransitionEnd","style","height","addEventListener","requestAnimationFrame","removeEventListener","accordionPanel","accordionPanelContent","overflow","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, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } 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?: Function;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: Function;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\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 ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const [isExpanded, setIsExpanded] = useState(false);\n\n const handleOnClick = () => {\n if (!isExpanded && onExpand) {\n onExpand();\n }\n if (isExpanded && onCollapse) {\n onCollapse();\n }\n\n setIsExpanded(!isExpanded);\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={isExpanded}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isExpanded}>\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 '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n outline: 'none',\n backgroundColor: tokens.gray100,\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","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","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","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"module.js.map"}
package/dist/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { FC } from "react";
2
- import { CommonProps } from "@contentful/f36-core";
2
+ import { CommonProps, ExpandProps } from "@contentful/f36-core";
3
3
  import { HeadingElement } from "@contentful/f36-typography";
4
4
  export interface AccordionProps extends CommonProps {
5
5
  /**
@@ -12,7 +12,13 @@ export interface AccordionProps extends CommonProps {
12
12
  */
13
13
  children?: React.ReactNode;
14
14
  }
15
- declare const _Accordion1: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLUListElement>>;
15
+ declare const _Accordion1: React.ForwardRefExoticComponent<{
16
+ align?: 'start' | 'end';
17
+ children?: React.ReactNode;
18
+ className?: string;
19
+ testId?: string;
20
+ style?: React.CSSProperties;
21
+ } & React.RefAttributes<HTMLUListElement>>;
16
22
  export interface AccordionHeaderProps extends CommonProps {
17
23
  /**
18
24
  * Child nodes to be rendered in the component
@@ -54,7 +60,7 @@ export interface AccordionPanelProps extends CommonProps {
54
60
  */
55
61
  ariaId: string;
56
62
  }
57
- export const AccordionPanel: FC<AccordionPanelProps>;
63
+ export const AccordionPanel: FC<ExpandProps<AccordionPanelProps>>;
58
64
  export interface AccordionItemProps extends CommonProps {
59
65
  /**
60
66
  * The accordion title
@@ -81,7 +87,17 @@ export interface AccordionItemProps extends CommonProps {
81
87
  */
82
88
  align?: 'start' | 'end';
83
89
  }
84
- export const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLLIElement>>;
90
+ export const AccordionItem: React.ForwardRefExoticComponent<{
91
+ title?: React.ReactNode;
92
+ titleElement?: HeadingElement;
93
+ children?: React.ReactNode;
94
+ onExpand?: Function;
95
+ onCollapse?: Function;
96
+ align?: 'start' | 'end';
97
+ className?: string;
98
+ testId?: string;
99
+ style?: React.CSSProperties;
100
+ } & React.RefAttributes<HTMLLIElement>>;
85
101
  type CompoundAccordion = typeof _Accordion1 & {
86
102
  Item: typeof AccordionItem;
87
103
  };
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;ACMA,+BAAgC,SAAQ,WAAW;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAiCD,QAAO,MAAM,oGAAwC,CAAC;AEzCtD,qCAAsC,SAAQ,WAAW;IACvD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,OAAO,MAAM,8FASV,oBAAoB,gBAqBtB,CAAC;AE1DF,oCAAqC,SAAQ,WAAW;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,MAAM,gBAAgB,GAAG,mBAAmB,CA0ElD,CAAC;AEtFF,mCAAoC,SAAQ,WAAW;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAwDD,OAAO,MAAM,uGAAgD,CAAC;ACxF9D,yBAAyB,kBAAwB,GAAG;IAClD,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,OAAO,MAAM,4BAAkD,CAAC","sources":["packages/components/accordion/src/src/Accordion.styles.ts","packages/components/accordion/src/src/Accordion.tsx","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/src/AccordionItem/AccordionItem.styles.ts","packages/components/accordion/src/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/src/CompoundAccordion.tsx","packages/components/accordion/src/src/index.ts","packages/components/accordion/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"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"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;ACMA,+BAAgC,SAAQ,WAAW;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAiCD,QAAO,MAAM;YAtCH,OAAO,GAAG,KAAK;eAIZ,MAAM,SAAS;;;;0CAkCyB,CAAC;AEzCtD,qCAAsC,SAAQ,WAAW;IACvD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,OAAO,MAAM,8FASV,oBAAoB,gBAqBtB,CAAC;AE3DF,oCAAqC,SAAQ,WAAW;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,MAAM,gBAAgB,GAAG,YAAY,mBAAmB,CAAC,CAmB/D,CAAC;AE9BF,mCAAoC,SAAQ,WAAW;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAwDD,OAAO,MAAM;YA7EH,MAAM,SAAS;mBAIR,cAAc;eAIlB,MAAM,SAAS;eAIf,QAAQ;iBAIN,QAAQ;YAIb,OAAO,GAAG,KAAK;;;;uCAyDoC,CAAC;ACxF9D,yBAAyB,kBAAwB,GAAG;IAClD,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,OAAO,MAAM,4BAAkD,CAAC","sources":["packages/components/accordion/src/src/Accordion.styles.ts","packages/components/accordion/src/src/Accordion.tsx","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/src/AccordionItem/AccordionItem.styles.ts","packages/components/accordion/src/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/src/CompoundAccordion.tsx","packages/components/accordion/src/src/index.ts","packages/components/accordion/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"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"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/f36-accordion",
3
- "version": "4.0.1-beta.2558+269facc7",
3
+ "version": "4.0.1-beta.2696+d160443b",
4
4
  "description": "Forma 36: Accordion React Component",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -21,10 +21,11 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@babel/runtime": "^7.6.2",
24
- "@contentful/f36-core": "4.0.1-beta.2558+269facc7",
25
- "@contentful/f36-icons": "4.0.1-beta.2558+269facc7",
26
- "@contentful/f36-tokens": "4.0.1-beta.2558+269facc7",
27
- "@contentful/f36-typography": "4.0.1-beta.2558+269facc7",
24
+ "@contentful/f36-collapse": "4.0.1-beta.2696+d160443b",
25
+ "@contentful/f36-core": "4.0.1-beta.2696+d160443b",
26
+ "@contentful/f36-icons": "4.0.1-beta.2696+d160443b",
27
+ "@contentful/f36-tokens": "4.0.1-beta.2696+d160443b",
28
+ "@contentful/f36-typography": "4.0.1-beta.2696+d160443b",
28
29
  "emotion": "^10.0.17"
29
30
  },
30
31
  "peerDependencies": {
@@ -33,5 +34,5 @@
33
34
  "publishConfig": {
34
35
  "access": "public"
35
36
  },
36
- "gitHead": "269facc7450d443ce6caf11f590c5957cbfdcfa0"
37
+ "gitHead": "d160443b21d033f6567ce0cf6a7760c42d89a772"
37
38
  }