@contentful/f36-accordion 4.6.2 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/main.js +10 -10
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +10 -10
  5. package/dist/module.js.map +1 -1
  6. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.8.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @contentful/f36-collapse@4.8.0
9
+ - @contentful/f36-icons@4.8.0
10
+ - @contentful/f36-typography@4.8.0
11
+ - @contentful/f36-core@4.8.0
12
+
13
+ ## 4.7.0
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies [[`e50b8945`](https://github.com/contentful/forma-36/commit/e50b8945faef7323187e1bd9a2a9cbfcbae2e405)]:
18
+ - @contentful/f36-core@4.7.0
19
+ - @contentful/f36-collapse@4.7.0
20
+ - @contentful/f36-icons@4.7.0
21
+ - @contentful/f36-typography@4.7.0
22
+
3
23
  ## 4.6.2
4
24
 
5
25
  ### Patch Changes
package/dist/main.js CHANGED
@@ -40,18 +40,18 @@ const $6b1aad2dfaf9ce0d$var$_Accordion = ({ align: align = 'end' , children: chi
40
40
  const styles = $b2e2219a9d74caf2$export$af90c4d6702a6ca7({
41
41
  className: className
42
42
  });
43
- return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
43
+ return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
44
44
  as: "ul",
45
45
  className: styles.accordion,
46
46
  testId: testId,
47
47
  ...otherProps,
48
48
  ref: ref
49
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
+ if (/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).isValidElement(child)) return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).cloneElement(child, {
51
51
  align: align
52
- }));
52
+ });
53
53
  return child;
54
- })));
54
+ }));
55
55
  };
56
56
  const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
57
57
 
@@ -129,7 +129,7 @@ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClic
129
129
  align: align,
130
130
  isExpanded: isExpanded
131
131
  });
132
- return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36typography.Subheading, {
132
+ return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36typography.Subheading, {
133
133
  ...rest,
134
134
  testId: testId,
135
135
  marginBottom: "none",
@@ -144,7 +144,7 @@ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClic
144
144
  }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36icons.ChevronDownTrimmedIcon, {
145
145
  className: styles.accordionHeaderIcon,
146
146
  variant: "secondary"
147
- }), children)));
147
+ }), children));
148
148
  };
149
149
 
150
150
 
@@ -164,14 +164,14 @@ const $1911a31b860eeb50$export$2db50514b4b2c1ee = ()=>{
164
164
 
165
165
  const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
166
166
  const styles = $1911a31b860eeb50$export$2db50514b4b2c1ee();
167
- return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36collapse.Collapse, {
167
+ return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36collapse.Collapse, {
168
168
  "data-test-id": testId,
169
169
  "aria-labelledby": `accordion--${ariaId}`,
170
170
  isExpanded: isExpanded,
171
171
  ...otherProps
172
172
  }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement("div", {
173
173
  className: styles.accordionPanelContent
174
- }, children)));
174
+ }, children));
175
175
  };
176
176
 
177
177
 
@@ -205,7 +205,7 @@ const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = 'Accordion Title'
205
205
  if (isOpen) handleClose();
206
206
  else handleOpen();
207
207
  };
208
- return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
208
+ return /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
209
209
  as: "li",
210
210
  className: styles.accordionItem,
211
211
  testId: `${testId}-${id}`,
@@ -220,7 +220,7 @@ const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = 'Accordion Title'
220
220
  }, title), /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($dc0312cfa0956395$export$7cad6f17fd6e117b, {
221
221
  ariaId: id,
222
222
  isExpanded: isOpen
223
- }, children)));
223
+ }, children));
224
224
  };
225
225
  const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($b9a3851e41efa019$var$_AccordionItem);
226
226
 
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: () => void;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: () => void;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n\n /**\n * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: () => void;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: () => void;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n\n /**\n * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -29,18 +29,18 @@ const $a517c4a963657a24$var$_Accordion = ({ align: align = 'end' , children: chi
29
29
  const styles = $d678e0ec669f4067$export$af90c4d6702a6ca7({
30
30
  className: className
31
31
  });
32
- return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
32
+ return /*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
33
33
  as: "ul",
34
34
  className: styles.accordion,
35
35
  testId: testId,
36
36
  ...otherProps,
37
37
  ref: ref
38
38
  }, $jACei$react.Children.map(children, (child)=>{
39
- if (/*#__PURE__*/ $jACei$react.isValidElement(child)) return(/*#__PURE__*/ $jACei$react.cloneElement(child, {
39
+ if (/*#__PURE__*/ $jACei$react.isValidElement(child)) return /*#__PURE__*/ $jACei$react.cloneElement(child, {
40
40
  align: align
41
- }));
41
+ });
42
42
  return child;
43
- })));
43
+ }));
44
44
  };
45
45
  const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ $jACei$react.forwardRef($a517c4a963657a24$var$_Accordion);
46
46
 
@@ -118,7 +118,7 @@ const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClic
118
118
  align: align,
119
119
  isExpanded: isExpanded
120
120
  });
121
- return(/*#__PURE__*/ $jACei$react.createElement($jACei$Subheading, {
121
+ return /*#__PURE__*/ $jACei$react.createElement($jACei$Subheading, {
122
122
  ...rest,
123
123
  testId: testId,
124
124
  marginBottom: "none",
@@ -133,7 +133,7 @@ const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClic
133
133
  }, /*#__PURE__*/ $jACei$react.createElement($jACei$ChevronDownTrimmedIcon, {
134
134
  className: styles.accordionHeaderIcon,
135
135
  variant: "secondary"
136
- }), children)));
136
+ }), children));
137
137
  };
138
138
 
139
139
 
@@ -153,14 +153,14 @@ const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
153
153
 
154
154
  const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
155
155
  const styles = $3ba27b87c168e14d$export$2db50514b4b2c1ee();
156
- return(/*#__PURE__*/ $jACei$react.createElement($jACei$Collapse, {
156
+ return /*#__PURE__*/ $jACei$react.createElement($jACei$Collapse, {
157
157
  "data-test-id": testId,
158
158
  "aria-labelledby": `accordion--${ariaId}`,
159
159
  isExpanded: isExpanded,
160
160
  ...otherProps
161
161
  }, /*#__PURE__*/ $jACei$react.createElement("div", {
162
162
  className: styles.accordionPanelContent
163
- }, children)));
163
+ }, children));
164
164
  };
165
165
 
166
166
 
@@ -194,7 +194,7 @@ const $b6120c67649da348$var$_AccordionItem = ({ title: title = 'Accordion Title'
194
194
  if (isOpen) handleClose();
195
195
  else handleOpen();
196
196
  };
197
- return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
197
+ return /*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
198
198
  as: "li",
199
199
  className: styles.accordionItem,
200
200
  testId: `${testId}-${id}`,
@@ -209,7 +209,7 @@ const $b6120c67649da348$var$_AccordionItem = ({ title: title = 'Accordion Title'
209
209
  }, title), /*#__PURE__*/ $jACei$react.createElement($0c5bba33d6cffbcc$export$7cad6f17fd6e117b, {
210
210
  ariaId: id,
211
211
  isExpanded: isOpen
212
- }, children)));
212
+ }, children));
213
213
  };
214
214
  const $b6120c67649da348$export$d99097c13d4dac9f = /*#__PURE__*/ $jACei$react.forwardRef($b6120c67649da348$var$_AccordionItem);
215
215
 
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: () => void;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: () => void;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n\n /**\n * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box, useControllableState } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: () => void;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: () => void;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n\n /**\n * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","HeadingElement","useId","useControllableState","getAccordionItemStyles","title","titleElement","onExpand","onCollapse","isExpanded","_AccordionItem","HTMLLIElement","id","isOpen","handleOpen","handleClose","onOpen","onClose","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","transitionDurationShort","gray100","borderRadius","borderRadiusMedium","boxShadow","glowPrimary","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"module.js.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/f36-accordion",
3
- "version": "4.6.2",
3
+ "version": "4.8.0",
4
4
  "description": "Forma 36: Accordion React Component",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -21,11 +21,11 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@babel/runtime": "^7.6.2",
24
- "@contentful/f36-collapse": "^4.6.2",
25
- "@contentful/f36-core": "^4.6.2",
26
- "@contentful/f36-icons": "^4.6.2",
24
+ "@contentful/f36-collapse": "^4.8.0",
25
+ "@contentful/f36-core": "^4.8.0",
26
+ "@contentful/f36-icons": "^4.8.0",
27
27
  "@contentful/f36-tokens": "^4.0.1",
28
- "@contentful/f36-typography": "^4.6.2",
28
+ "@contentful/f36-typography": "^4.8.0",
29
29
  "emotion": "^10.0.17"
30
30
  },
31
31
  "peerDependencies": {