@contentful/f36-accordion 4.0.1-beta.2694 → 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 +38 -57
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +38 -57
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +0 -0
  6. package/dist/types.d.ts.map +0 -0
  7. package/package.json +7 -7
package/dist/main.js CHANGED
@@ -1,4 +1,3 @@
1
- var $9pthv$reactjsxruntime = require("react/jsx-runtime");
2
1
  var $9pthv$react = require("react");
3
2
  var $9pthv$contentfulf36core = require("@contentful/f36-core");
4
3
  var $9pthv$emotion = require("emotion");
@@ -23,7 +22,6 @@ $parcel$export(module.exports, "AccordionPanel", () => $dc0312cfa0956395$export$
23
22
 
24
23
 
25
24
 
26
-
27
25
  const $b2e2219a9d74caf2$export$af90c4d6702a6ca7 = ({ className: className })=>({
28
26
  accordion: $9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
29
27
  boxSizing: 'border-box',
@@ -42,19 +40,18 @@ const $6b1aad2dfaf9ce0d$var$_Accordion = ({ align: align = 'end' , children: chi
42
40
  const styles = $b2e2219a9d74caf2$export$af90c4d6702a6ca7({
43
41
  className: className
44
42
  });
45
- return(/*#__PURE__*/ $9pthv$reactjsxruntime.jsx($9pthv$contentfulf36core.Box, {
43
+ return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
46
44
  as: "ul",
47
45
  className: styles.accordion,
48
46
  testId: testId,
49
47
  ...otherProps,
50
- ref: ref,
51
- children: ($parcel$interopDefault($9pthv$react)).Children.map(children, (child)=>{
52
- if (/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).isValidElement(child)) return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).cloneElement(child, {
53
- align: align
54
- }));
55
- return child;
56
- })
57
- }));
48
+ 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, {
51
+ align: align
52
+ }));
53
+ return child;
54
+ })));
58
55
  };
59
56
  const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
60
57
 
@@ -67,8 +64,6 @@ const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ ($parcel$interop
67
64
 
68
65
 
69
66
 
70
-
71
-
72
67
  const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align })=>$9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
73
68
  display: 'flex',
74
69
  flexDirection: 'row',
@@ -121,27 +116,22 @@ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClic
121
116
  align: align,
122
117
  isExpanded: isExpanded
123
118
  });
124
- return(/*#__PURE__*/ $9pthv$reactjsxruntime.jsx($9pthv$contentfulf36typography.Subheading, {
119
+ return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36typography.Subheading, {
125
120
  ...rest,
126
121
  testId: testId,
127
122
  marginBottom: "none",
128
- as: element,
129
- children: /*#__PURE__*/ $9pthv$reactjsxruntime.jsxs("button", {
130
- type: "button",
131
- "aria-expanded": isExpanded,
132
- "aria-controls": `accordion-panel--${ariaId}`,
133
- id: `accordion--${ariaId}`,
134
- className: styles.accordionHeader,
135
- onClick: onClick,
136
- children: [
137
- /*#__PURE__*/ $9pthv$reactjsxruntime.jsx($9pthv$contentfulf36icons.ChevronDownTrimmedIcon, {
138
- className: styles.accordionHeaderIcon,
139
- variant: "secondary"
140
- }),
141
- children
142
- ]
143
- })
144
- }));
123
+ as: element
124
+ }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement("button", {
125
+ type: "button",
126
+ "aria-expanded": isExpanded,
127
+ "aria-controls": `accordion-panel--${ariaId}`,
128
+ id: `accordion--${ariaId}`,
129
+ className: styles.accordionHeader,
130
+ onClick: onClick
131
+ }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36icons.ChevronDownTrimmedIcon, {
132
+ className: styles.accordionHeaderIcon,
133
+ variant: "secondary"
134
+ }), children)));
145
135
  };
146
136
 
147
137
 
@@ -149,7 +139,6 @@ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClic
149
139
 
150
140
 
151
141
 
152
-
153
142
  const $1911a31b860eeb50$export$2db50514b4b2c1ee = ()=>{
154
143
  return {
155
144
  accordionPanelContent: /*#__PURE__*/ $9pthv$emotion.css({
@@ -162,16 +151,14 @@ const $1911a31b860eeb50$export$2db50514b4b2c1ee = ()=>{
162
151
 
163
152
  const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
164
153
  const styles = $1911a31b860eeb50$export$2db50514b4b2c1ee();
165
- return(/*#__PURE__*/ $9pthv$reactjsxruntime.jsx($9pthv$contentfulf36collapse.Collapse, {
154
+ return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36collapse.Collapse, {
166
155
  "data-test-id": testId,
167
156
  "aria-labelledby": `accordion--${ariaId}`,
168
157
  isExpanded: isExpanded,
169
- ...otherProps,
170
- children: /*#__PURE__*/ $9pthv$reactjsxruntime.jsx("div", {
171
- className: styles.accordionPanelContent,
172
- children: children
173
- })
174
- }));
158
+ ...otherProps
159
+ }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement("div", {
160
+ className: styles.accordionPanelContent
161
+ }, children)));
175
162
  };
176
163
 
177
164
 
@@ -202,28 +189,22 @@ const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = 'Accordion Title'
202
189
  if (isExpanded && onCollapse) onCollapse();
203
190
  setIsExpanded(!isExpanded);
204
191
  };
205
- return(/*#__PURE__*/ $9pthv$reactjsxruntime.jsxs($9pthv$contentfulf36core.Box, {
192
+ return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
206
193
  as: "li",
207
194
  className: styles.accordionItem,
208
195
  testId: `${testId}-${id}`,
209
196
  ...otherProps,
210
- ref: ref,
211
- children: [
212
- /*#__PURE__*/ $9pthv$reactjsxruntime.jsx($a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41, {
213
- onClick: handleOnClick,
214
- isExpanded: isExpanded,
215
- element: titleElement,
216
- ariaId: id,
217
- align: align,
218
- children: title
219
- }),
220
- /*#__PURE__*/ $9pthv$reactjsxruntime.jsx($dc0312cfa0956395$export$7cad6f17fd6e117b, {
221
- ariaId: id,
222
- isExpanded: isExpanded,
223
- children: children
224
- })
225
- ]
226
- }));
197
+ ref: ref
198
+ }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41, {
199
+ onClick: handleOnClick,
200
+ isExpanded: isExpanded,
201
+ element: titleElement,
202
+ ariaId: id,
203
+ align: align
204
+ }, title), /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($dc0312cfa0956395$export$7cad6f17fd6e117b, {
205
+ ariaId: id,
206
+ isExpanded: isExpanded
207
+ }, children)));
227
208
  };
228
209
  const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($b9a3851e41efa019$var$_AccordionItem);
229
210
 
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, { 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"}
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,4 +1,3 @@
1
- import {jsx as $jACei$jsx, jsxs as $jACei$jsxs} from "react/jsx-runtime";
2
1
  import $jACei$react, {useState as $jACei$useState} from "react";
3
2
  import {Box as $jACei$Box, useId as $jACei$useId} from "@contentful/f36-core";
4
3
  import {cx as $jACei$cx, css as $jACei$css} from "emotion";
@@ -12,7 +11,6 @@ import {Collapse as $jACei$Collapse} from "@contentful/f36-collapse";
12
11
 
13
12
 
14
13
 
15
-
16
14
  const $d678e0ec669f4067$export$af90c4d6702a6ca7 = ({ className: className })=>({
17
15
  accordion: $jACei$cx(/*#__PURE__*/ $jACei$css({
18
16
  boxSizing: 'border-box',
@@ -31,19 +29,18 @@ const $a517c4a963657a24$var$_Accordion = ({ align: align = 'end' , children: chi
31
29
  const styles = $d678e0ec669f4067$export$af90c4d6702a6ca7({
32
30
  className: className
33
31
  });
34
- return(/*#__PURE__*/ $jACei$jsx($jACei$Box, {
32
+ return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
35
33
  as: "ul",
36
34
  className: styles.accordion,
37
35
  testId: testId,
38
36
  ...otherProps,
39
- ref: ref,
40
- children: $jACei$react.Children.map(children, (child)=>{
41
- if (/*#__PURE__*/ $jACei$react.isValidElement(child)) return(/*#__PURE__*/ $jACei$react.cloneElement(child, {
42
- align: align
43
- }));
44
- return child;
45
- })
46
- }));
37
+ ref: ref
38
+ }, $jACei$react.Children.map(children, (child)=>{
39
+ if (/*#__PURE__*/ $jACei$react.isValidElement(child)) return(/*#__PURE__*/ $jACei$react.cloneElement(child, {
40
+ align: align
41
+ }));
42
+ return child;
43
+ })));
47
44
  };
48
45
  const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ $jACei$react.forwardRef($a517c4a963657a24$var$_Accordion);
49
46
 
@@ -56,8 +53,6 @@ const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ $jACei$react.for
56
53
 
57
54
 
58
55
 
59
-
60
-
61
56
  const $d95c2a37e890ef38$var$getHeaderStyles = ({ align: align })=>$jACei$cx(/*#__PURE__*/ $jACei$css({
62
57
  display: 'flex',
63
58
  flexDirection: 'row',
@@ -110,27 +105,22 @@ const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClic
110
105
  align: align,
111
106
  isExpanded: isExpanded
112
107
  });
113
- return(/*#__PURE__*/ $jACei$jsx($jACei$Subheading, {
108
+ return(/*#__PURE__*/ $jACei$react.createElement($jACei$Subheading, {
114
109
  ...rest,
115
110
  testId: testId,
116
111
  marginBottom: "none",
117
- as: element,
118
- children: /*#__PURE__*/ $jACei$jsxs("button", {
119
- type: "button",
120
- "aria-expanded": isExpanded,
121
- "aria-controls": `accordion-panel--${ariaId}`,
122
- id: `accordion--${ariaId}`,
123
- className: styles.accordionHeader,
124
- onClick: onClick,
125
- children: [
126
- /*#__PURE__*/ $jACei$jsx($jACei$ChevronDownTrimmedIcon, {
127
- className: styles.accordionHeaderIcon,
128
- variant: "secondary"
129
- }),
130
- children
131
- ]
132
- })
133
- }));
112
+ as: element
113
+ }, /*#__PURE__*/ $jACei$react.createElement("button", {
114
+ type: "button",
115
+ "aria-expanded": isExpanded,
116
+ "aria-controls": `accordion-panel--${ariaId}`,
117
+ id: `accordion--${ariaId}`,
118
+ className: styles.accordionHeader,
119
+ onClick: onClick
120
+ }, /*#__PURE__*/ $jACei$react.createElement($jACei$ChevronDownTrimmedIcon, {
121
+ className: styles.accordionHeaderIcon,
122
+ variant: "secondary"
123
+ }), children)));
134
124
  };
135
125
 
136
126
 
@@ -138,7 +128,6 @@ const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClic
138
128
 
139
129
 
140
130
 
141
-
142
131
  const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
143
132
  return {
144
133
  accordionPanelContent: /*#__PURE__*/ $jACei$css({
@@ -151,16 +140,14 @@ const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
151
140
 
152
141
  const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
153
142
  const styles = $3ba27b87c168e14d$export$2db50514b4b2c1ee();
154
- return(/*#__PURE__*/ $jACei$jsx($jACei$Collapse, {
143
+ return(/*#__PURE__*/ $jACei$react.createElement($jACei$Collapse, {
155
144
  "data-test-id": testId,
156
145
  "aria-labelledby": `accordion--${ariaId}`,
157
146
  isExpanded: isExpanded,
158
- ...otherProps,
159
- children: /*#__PURE__*/ $jACei$jsx("div", {
160
- className: styles.accordionPanelContent,
161
- children: children
162
- })
163
- }));
147
+ ...otherProps
148
+ }, /*#__PURE__*/ $jACei$react.createElement("div", {
149
+ className: styles.accordionPanelContent
150
+ }, children)));
164
151
  };
165
152
 
166
153
 
@@ -191,28 +178,22 @@ const $b6120c67649da348$var$_AccordionItem = ({ title: title = 'Accordion Title'
191
178
  if (isExpanded && onCollapse) onCollapse();
192
179
  setIsExpanded(!isExpanded);
193
180
  };
194
- return(/*#__PURE__*/ $jACei$jsxs($jACei$Box, {
181
+ return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
195
182
  as: "li",
196
183
  className: styles.accordionItem,
197
184
  testId: `${testId}-${id}`,
198
185
  ...otherProps,
199
- ref: ref,
200
- children: [
201
- /*#__PURE__*/ $jACei$jsx($01f1d19e673d71a7$export$5e3e5deaaf81ee41, {
202
- onClick: handleOnClick,
203
- isExpanded: isExpanded,
204
- element: titleElement,
205
- ariaId: id,
206
- align: align,
207
- children: title
208
- }),
209
- /*#__PURE__*/ $jACei$jsx($0c5bba33d6cffbcc$export$7cad6f17fd6e117b, {
210
- ariaId: id,
211
- isExpanded: isExpanded,
212
- children: children
213
- })
214
- ]
215
- }));
186
+ ref: ref
187
+ }, /*#__PURE__*/ $jACei$react.createElement($01f1d19e673d71a7$export$5e3e5deaaf81ee41, {
188
+ onClick: handleOnClick,
189
+ isExpanded: isExpanded,
190
+ element: titleElement,
191
+ ariaId: id,
192
+ align: align
193
+ }, title), /*#__PURE__*/ $jACei$react.createElement($0c5bba33d6cffbcc$export$7cad6f17fd6e117b, {
194
+ ariaId: id,
195
+ isExpanded: isExpanded
196
+ }, children)));
216
197
  };
217
198
  const $b6120c67649da348$export$d99097c13d4dac9f = /*#__PURE__*/ $jACei$react.forwardRef($b6120c67649da348$var$_AccordionItem);
218
199
 
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;AGGO,KAAA,CAAMe,yCAAkB,IAAI,CAAnC,YAAqCK,SAAAA,EAAa,CAAhB,IAA4C,CAA5B;QAChDO,SAAS,EAAE,SAAA,CAAA,EACT,AADS,SACT,AADS,EACT,CAAA,UAAA,CAAI,CADNA;YAEIQ,SAAS,EAAE,CADT;YAEFC,OAAO,EAAE,CAFP;YAGFC,MAAM,EAAE,CAHN;YAIFC,SAAS,EAAE,CAJT;YAKF,CAAA,gBAAiB,CAAjB;gBACEC,SAAS,GAAG,UAAA,EAAYL,0BAAM,CAACM,OAAQ;YADxB,CAAA;QALf,CAAJ,GASApB,SAVS;IADiE,CAA5C;;;;ADelC,KAAA,CAAMD,gCAAU,IACd,CADF,QAEIH,KAAK,GAAG,CADV,iBAEEC,QAFF,cAGEG,SAHF,WAIEC,MAAM,GAAG,CAJX,sBAKKC,UAAH,CACY,CAPG,EAQjBC,GARiB,GASd,CARH;IASA,KAAA,CAAMG,MAAM,GAAGX,yCAAkB,CAAC,CAAlC;mBAAoCK,SAAAA;IAAF,CAAD;IACjC,MAAA,0BACG,UAAD;QACE,EAAA,EAAG,CADL;QAEE,SAAA,EAAWM,MAAM,CAACC,SAAR;QACV,MAAA,EAAQN,MAAD;WACHC,UAAJ;QACA,GAAA,EAAKC,GAAD;kBAEHZ,YAAK,CAACiB,QAAN,CAAeC,GAAf,CAAmBZ,QAAnB,GAA8Ba,KAAD,GAAW,CAA/C;YACQ,EAAA,gBAAInB,YAAK,CAACoB,cAAN,CAAqBD,KAArB,GACF,MAAA,eAAOnB,YAAK,CAACqB,YAAN,CAAmBF,KAAnB,EAA0B,CAAjC;uBACEd,KAAAA;YAD+B,CAA1B;YAIT,MAAA,CAAOc,KAAP;QACD,CAPA;;AAUN,CA7BD;AA+BO,KAAA,CAAM9B,yCAAS,iBAAGW,YAAK,CAACsB,UAAN,CAAiBd,gCAAjB;;;;;;;;;;;;;AIzCzB,KAAA,CAAMiD,qCAAe,IAAI,CAAzB,QAA2BpD,KAAAA,EAASmD,CAAZ,GACtB,SAAA,CAAA,EACE,AADF,SACE,AADF,EACE,CAAA,UAAA,CAAI,CAFiB;QAGnBE,OAAO,EAAE,CADP;QAEFC,aAAa,EAAE,CAFb;QAGFC,UAAU,EAAE,CAHV;QAIFC,MAAM,EAAE,CAJN;QAKFpC,OAAO,EAAEF,0BAAM,CAACuC,QALd;QAMFC,eAAe,EAAE,CANf;QAOFC,UAAU,EAAEzC,0BAAM,CAAC0C,gBAPjB;QAQFC,QAAQ,EAAE3C,0BAAM,CAAC4C,SARf;QASFC,UAAU,EAAE7C,0BAAM,CAAC8C,kBATjB;QAUFC,UAAU,EAAE/C,0BAAM,CAACgD,WAVjB;QAWFC,KAAK,EAAEjD,0BAAM,CAACkD,OAXZ;QAYFC,KAAK,EAAE,CAZL;QAaFC,QAAQ,EAAE,CAbR;QAcFC,MAAM,EAAE,CAdN;QAeFC,UAAU,GAAG,iBAAA,EAAmBtD,0BAAM,CAACuD,yBAA0B,CAAA,CAAA,EAAGvD,0BAAM,CAACwD,uBAAwB;QACnG,CAAA,UAAW,CAAX;YACEhB,eAAe,EAAExC,0BAAM,CAACyD,OAAxBjB;QADS,CAhBT;QAmBF,CAAA,UAAW,CAAX;YACEkB,OAAO,EAAE,CADA;YAETlB,eAAe,EAAExC,0BAAM,CAACyD,OAAxBjB;QAFS,CAAA;IAnBT,CAAJ,GAwBA1D,KAAK,KAAK,CAAV,QAAA,EACE,AADF,SACE,AADF,EACE,CAAA,UAzBE,CAAA,CAAA;QAyBF,IAAA,EAAA,CAAA;QAAA,MAAA,EAAA,CAAA;IAAA,CAAA;;AAMN,KAAA,CAAM6E,mCAAa,IAAI,CAAvB,QAAyB7E,KAAF,eAASqC,UAAAA,EAAcc,CAAxB,GACpB,SAAA,CAAA,EACE,AADF,SACE,AADF,EACE,CAAA,UAAA,CAAI,CAFe;QAGjB2B,SAAS,EAAE,CADT;QAEFN,UAAU,GAAG,UAAA,EAAYtD,0BAAM,CAACuD,yBAA0B,CAAA,CAAA,EAAGvD,0BAAM,CAACwD,uBAAwB;IAF1F,CAAJ,GAIA1E,KAAK,KAAK,CAAV,QAAA,EAAmB,AAAnB,SAAmB,AAAnB,EAAmB,CAAA,UAAA,CAAI,CAJnB;QAIqB+E,UAAU,EAAE7D,0BAAM,CAACuC,QAAnBsB;IAAF,CAAJ,GACnB/E,KAAK,KAAK,CAAV,UAAA,EAAqB,AAArB,SAAqB,AAArB,EAAqB,CAAA,UAAA,CAAI,CADF;QACIgF,WAAW,EAAE9D,0BAAM,CAACuC,QAApBuB;IAAF,CAAJ,GACrB3C,UAAU,IAAA,EACR,AADQ,SACR,AADQ,EACR,CAAA,UAFuB,CAAA,CAAA;QAEvB,IAAA,EAAA,CAAA;QAAA,MAAA,EAAA,CAAA;IAAA,CAAA;;AAKC,KAAA,CAAMM,yCAAwB,IAAIsC,KAAD,IAAwB,CAAhE;QACEhC,eAAe,EAAEG,qCAAe,CAAC6B,KAAD;QAChC/B,mBAAmB,EAAE2B,mCAAa,CAACI,KAAD;IAF4B,CAAxB;;;;ADpBjC,KAAA,CAAM/F,yCAAe,IAAI,CAAhC,WACEe,QAD8B,YAE9B2C,OAF8B,eAG9BP,UAAU,GAAG,KAHiB,WAI9BS,MAJ8B,YAK9BC,OAAO,GAAG,CALoB,aAM9B/C,KAAK,GAAG,CANsB,eAO9BK,MAAM,GAAG,CAPqB,6BAQ3B2C,IAAH,CACC7D,CAT4B,GASH,CATI;IAU9B,KAAA,CAAMuB,MAAM,GAAGiC,yCAAwB,CAAC,CAAxC;eAA0C3C,KAAF;oBAASqC,UAAAA;IAAT,CAAD;IAEvC,MAAA,0BACG,iBAAD;WAAgBW,IAAJ;QAAU,MAAA,EAAQ3C,MAAD;QAAS,YAAA,EAAa,CAAnD;QAA0D,EAAA,EAAI0C,OAAD;4CAC1D,CAAD;YACE,IAAA,EAAK,CADP;YAEE,CAAA,gBAAeV,UAAD;YACd,CAAA,iBAAgB,iBAAA,EAAmBS,MAAO;YAC1C,EAAA,GAAK,WAAA,EAAaA,MAAO;YACzB,SAAA,EAAWpC,MAAM,CAACuC,eAAR;YACV,OAAA,EAASL,OAAD;;yCAEP,6BAAD;oBACE,SAAA,EAAWlC,MAAM,CAACwC,mBAAR;oBACV,OAAA,EAAQ,CAFV;;gBAICjD,QAAD;;;;AAIP,CA9BM;;;;;;;;AGhCA,KAAA,CAAMmF,yCAAuB,OAAS,CAA7C;IACE,MAAA,CAAO,CAAP;QACEC,qBAAqB,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,UAAA,CAAI,CAA3BA;YACEhB,KAAK,EAAE,CADkB;YAEzBjD,OAAO,KAAKF,0BAAM,CAACoE,SAAU,CAAA,CAAA,EAAGpE,0BAAM,CAACuC,QAAS,CAAA,CAAA,EAAGvC,0BAAM,CAACuC,QAAS;QAF1C,CAAJ;IADlB,CAAP;AAMD,CAPM;;;ADkBA,KAAA,CAAMnE,yCAAc,IAA0C,CAArE,WACEW,QADmE,eAEnEoC,UAAU,GAAG,KAFsD,WAGnES,MAHmE,WAInEzC,MAAM,GAAG,CAJ0D,4BAKhEC,UAAH,CACCf,CANiE,GAMzC,CAN0C;IAOnE,KAAA,CAAMmB,MAAM,GAAG0E,yCAAuB;IAEtC,MAAA,0BACG,eAAD;QACE,CAAA,eAAc/E,MAAD;QACb,CAAA,mBAAkB,WAAA,EAAayC,MAAO;QACtC,UAAA,EAAYT,UAAD;WACP/B,UAAJ;2CAEC,CAAD;YAAK,SAAA,EAAWI,MAAM,CAAC2E,qBAAR;sBAAgCpF,QAAD;;;AAGnD,CAnBM;;;;;;AElBA,KAAA,CAAM2B,wCAAsB,IAAI,CAAvC,YACExB,SAAAA,EACC,CAFmC,IAI/B,CAFJ;QAGDoC,aAAa,EAAE,SAAA,CAAA,EACb,AADa,SACb,AADa,EACb,CAAA,UAAA,CAAI,CADNA;YAEIpB,OAAO,EAAE,CADP;YAEFC,MAAM,EAAE,CAFN;YAGFkE,YAAY,GAAG,UAAA,EAAYrE,0BAAM,CAACsE,eAAgB;YAClD,CAAA,gBAAiB,CAAjB;gBACEjE,SAAS,GAAG,UAAA,EAAYL,0BAAM,CAACsE,eAAgB;YADhC,CAAA;QAJf,CAAJ,GAQApF,SATa;IADV,CAJ+B;;;;ALkCtC,KAAA,CAAM8B,oCAAc,IAClB,CADF,QAEIL,KAAK,GAAG,CADV,iCAEEC,YAAY,GAAG,CAFjB,cAGEzB,MAAM,GAAG,CAHX,kCAIE0B,QAJF,eAKEE,UALF,aAMEhC,QANF,UAOED,KAAK,GAAG,CAPV,kBAQEI,SARF,MASKE,UAAH,CACY,CAXO,EAYrBC,GAZqB,GAalB,CAZH;IAaA,KAAA,CAAMG,MAAM,GAAGkB,wCAAsB,CAAC,CAAtC;mBAAwCxB,SAAAA;IAAF,CAAD;IACrC,KAAA,CAAMgC,EAAE,GAAGT,YAAK;IAChB,KAAA,EAAOU,UAAD,EAAaC,aAAb,IAA8Bb,eAAQ,CAAC,KAAD;IAE5C,KAAA,CAAMc,aAAa,OAAS,CAA5B;QACE,EAAA,GAAKF,UAAD,IAAeN,QAAnB,EACEA,QAAQ;QAEV,EAAA,EAAIM,UAAU,IAAIJ,UAAlB,EACEA,UAAU;QAGZK,aAAa,EAAED,UAAF;IACd,CATD;IAWA,MAAA,2BACG,UAAD;QACE,EAAA,EAAG,CADL;QAEE,SAAA,EAAW3B,MAAM,CAAC8B,aAAR;QACV,MAAA,KAAWnC,MAAO,CAAA,CAAA,EAAG+B,EAAG;WACpB9B,UAAJ;QACA,GAAA,EAAKC,GAAD;;qCAEH,yCAAD;gBACE,OAAA,EAASgC,aAAD;gBACR,UAAA,EAAYF,UAAD;gBACX,OAAA,EAASP,YAAD;gBACR,MAAA,EAAQM,EAAD;gBACP,KAAA,EAAOpC,KAAD;0BAEL6B,KAAD;;qCAGD,yCAAD;gBAAgB,MAAA,EAAQO,EAAD;gBAAK,UAAA,EAAYC,UAAD;0BACpCpC,QAAD;;;;AAIP,CApDD;AAsDO,KAAA,CAAMb,yCAAa,iBAAGO,YAAK,CAACsB,UAAN,CAAiBiB,oCAAjB;;;AHpFtB,KAAA,CAAMlD,yCAAS,GAAGQ,yCAAiB;AAC1CR,yCAAS,CAACU,IAAV,GAAiBN,yCAAjB","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"}
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
File without changes
package/dist/types.d.ts.map CHANGED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/f36-accordion",
3
- "version": "4.0.1-beta.2694+5eee5f80",
3
+ "version": "4.0.1-beta.2696+d160443b",
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.0.1-beta.2694+5eee5f80",
25
- "@contentful/f36-core": "4.0.1-beta.2694+5eee5f80",
26
- "@contentful/f36-icons": "4.0.1-beta.2694+5eee5f80",
27
- "@contentful/f36-tokens": "4.0.1-beta.2694+5eee5f80",
28
- "@contentful/f36-typography": "4.0.1-beta.2694+5eee5f80",
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",
29
29
  "emotion": "^10.0.17"
30
30
  },
31
31
  "peerDependencies": {
@@ -34,5 +34,5 @@
34
34
  "publishConfig": {
35
35
  "access": "public"
36
36
  },
37
- "gitHead": "5eee5f8092c3d92b9ba054c00baa1bc484511c69"
37
+ "gitHead": "d160443b21d033f6567ce0cf6a7760c42d89a772"
38
38
  }