@contentful/f36-accordion 4.0.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2018-present Contentful GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.mdx

@@ -0,0 +1,85 @@
+---
+title: 'Accordion'
+slug: /components/accordion/
+github: 'https://github.com/contentful/forma-36/tree/forma-v4/packages/components/accordion'
+storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-accordion'
+typescript: ./src/Accordion.tsx,./src/AccordionItem/AccordionItem.tsx
+---
+
+import { Heading, Stack, TextLink } from '@contentful/f36-components';
+import { ExternalLinkIcon } from '@contentful/f36-icons';
+import { Props } from '@contentful/f36-docs-utils';
+
+Accordions are a good way to deliver a large amount of information. An accordion is a list of headers that after being clicked reveal or hide more content related to them.
+The header gives the user a summary of the content and the user decides if they need to see the extended content or not.
+
+## Import
+
+```jsx static=true
+import { Accordion } from '@contentful/f36-components';
+```
+
+## Examples
+
+The accordion has two variations that define the alignment of the chevron icon: left or right.
+
+### Basic usage
+
+```jsx
+<Accordion>
+  <Accordion.Item title="What payment methods do you accept?">
+    <Text>
+      Customers on the Team tier can pay with a credit card (American Express,
+      MasterCard or Visa). Enterprise customers have the choice of paying with a
+      credit card or wire transfer.
+    </Text>
+  </Accordion.Item>
+</Accordion>
+```
+
+### Using it with other components
+
+Other typographic components can be passed as the accordion's title and anything can be used as the accordion's content. For example:
+
+```jsx
+<Accordion>
+  <Accordion.Item
+    title={
+      <SectionHeading marginBottom="none">
+        What payment methods do you accept?
+      </SectionHeading>
+    }
+  >
+    <Stack flexDirection="column">
+      <Text marginBottom="spacingS">
+        Customers on the Team tier can pay with a credit card (American Express,
+        MasterCard or Visa). Enterprise customers have the choice of paying with
+        a credit card or wire transfer.
+      </Text>
+      <Button onClick={() => console.log('clicked!')}>
+        Accordion’s button
+      </Button>
+    </Stack>
+  </Accordion.Item>
+</Accordion>
+```
+
+## Props (API reference)
+
+### Accordion
+
+<Props of="Accordion" storybookPath="/story/components-accordion" />
+
+### Accordion.Item
+
+<Props of="AccordionItem" />
+
+## Content guidelines
+
+- The title should be a short message that summarize the content of the accordion.
+- Anything can be passed as the content of the accordion, but often organizing it with Texts and Tables would be enough.
+- When using headings, be mindful about the heading levels. The header is a Subheading with `h2` tag.
+
+## Accessibility
+
+- It allows keyboard navigation to open and close the accordions

package/dist/main.js

@@ -0,0 +1,221 @@
+var $9pthv$react = require("react");
+var $9pthv$contentfulf36core = require("@contentful/f36-core");
+var $9pthv$emotion = require("emotion");
+var $9pthv$contentfulf36tokens = require("@contentful/f36-tokens");
+var $9pthv$contentfulf36typography = require("@contentful/f36-typography");
+var $9pthv$contentfulf36icons = require("@contentful/f36-icons");
+var $9pthv$contentfulf36collapse = require("@contentful/f36-collapse");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "Accordion", () => $485e20d95dcb1fa7$export$a766cd26d0d69044);
+$parcel$export(module.exports, "AccordionHeader", () => $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41);
+$parcel$export(module.exports, "AccordionItem", () => $b9a3851e41efa019$export$d99097c13d4dac9f);
+$parcel$export(module.exports, "AccordionPanel", () => $dc0312cfa0956395$export$7cad6f17fd6e117b);
+
+
+
+
+
+const $b2e2219a9d74caf2$export$af90c4d6702a6ca7 = ({ className: className  })=>({
+        accordion: $9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
+            boxSizing: 'border-box',
+            padding: '0',
+            margin: '0',
+            listStyle: 'none',
+            '&:first-child': {
+                borderTop: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).gray300}`
+            }
+        }), className)
+    })
+;
+
+
+const $6b1aad2dfaf9ce0d$var$_Accordion = ({ align: align = 'end' , children: children , className: className , testId: testId = 'cf-ui-accordion' , ...otherProps }, ref)=>{
+    const styles = $b2e2219a9d74caf2$export$af90c4d6702a6ca7({
+        className: className
+    });
+    return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
+        as: "ul",
+        className: styles.accordion,
+        testId: testId,
+        ...otherProps,
+        ref: ref
+    }, ($parcel$interopDefault($9pthv$react)).Children.map(children, (child)=>{
+        if (/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).isValidElement(child)) return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).cloneElement(child, {
+            align: align
+        }));
+        return child;
+    })));
+};
+const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
+
+
+
+
+
+
+
+
+
+
+const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align  })=>$9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        border: '0',
+        padding: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM,
+        backgroundColor: 'transparent',
+        fontFamily: ($parcel$interopDefault($9pthv$contentfulf36tokens)).fontStackPrimary,
+        fontSize: ($parcel$interopDefault($9pthv$contentfulf36tokens)).fontSizeL,
+        fontWeight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).fontWeightDemiBold,
+        lineHeight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).lineHeightL,
+        color: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray800,
+        width: '100%',
+        minWidth: '9px',
+        cursor: 'pointer',
+        transition: `background-color ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`,
+        '&:hover': {
+            backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100
+        },
+        '&:focus': {
+            outline: 'none',
+            backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100
+        }
+    }), align === 'end' && /*#__PURE__*/ $9pthv$emotion.css({
+        name: "1tvf3d0",
+        styles: "flex-direction:row-reverse;justify-content:space-between;"
+    }))
+;
+const $cc0727a9cc62031c$var$getIconStyles = ({ align: align , isExpanded: isExpanded  })=>$9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
+        transform: 'rotate(0deg)',
+        transition: `transform ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`
+    }), align === 'end' && /*#__PURE__*/ $9pthv$emotion.css({
+        marginLeft: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM
+    }), align === 'start' && /*#__PURE__*/ $9pthv$emotion.css({
+        marginRight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM
+    }), isExpanded && /*#__PURE__*/ $9pthv$emotion.css({
+        name: "4ky835",
+        styles: "transform:rotate(180deg);"
+    }))
+;
+const $cc0727a9cc62031c$export$b6b01239d0041103 = (props)=>({
+        accordionHeader: $cc0727a9cc62031c$var$getHeaderStyles(props),
+        accordionHeaderIcon: $cc0727a9cc62031c$var$getIconStyles(props)
+    })
+;
+
+
+const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClick: onClick , isExpanded: isExpanded = false , ariaId: ariaId , element: element = 'h2' , align: align = 'end' , testId: testId = 'cf-ui-accordion-header' , ...rest })=>{
+    const styles = $cc0727a9cc62031c$export$b6b01239d0041103({
+        align: align,
+        isExpanded: isExpanded
+    });
+    return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36typography.Subheading, {
+        ...rest,
+        testId: testId,
+        marginBottom: "none",
+        as: element
+    }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement("button", {
+        type: "button",
+        "aria-expanded": isExpanded,
+        "aria-controls": `accordion-panel--${ariaId}`,
+        id: `accordion--${ariaId}`,
+        className: styles.accordionHeader,
+        onClick: onClick
+    }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36icons.ChevronDownTrimmedIcon, {
+        className: styles.accordionHeaderIcon,
+        variant: "secondary"
+    }), children)));
+};
+
+
+
+
+
+
+const $1911a31b860eeb50$export$2db50514b4b2c1ee = ()=>{
+    return {
+        accordionPanelContent: /*#__PURE__*/ $9pthv$emotion.css({
+            width: '100%',
+            padding: `${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingXs} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM}`
+        })
+    };
+};
+
+
+const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
+    const styles = $1911a31b860eeb50$export$2db50514b4b2c1ee();
+    return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36collapse.Collapse, {
+        "data-test-id": testId,
+        "aria-labelledby": `accordion--${ariaId}`,
+        isExpanded: isExpanded,
+        ...otherProps
+    }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement("div", {
+        className: styles.accordionPanelContent
+    }, children)));
+};
+
+
+
+
+
+const $b70a2de4b5faa5c1$export$c4864364a487dfa = ({ className: className  })=>({
+        accordionItem: $9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
+            padding: '0',
+            margin: '0',
+            borderBottom: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).colorElementMid}`,
+            '&:first-child': {
+                borderTop: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).colorElementMid}`
+            }
+        }), className)
+    })
+;
+
+
+const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = 'Accordion Title' , titleElement: titleElement = 'h2' , testId: testId = 'cf-ui-accordion-item' , onExpand: onExpand , onCollapse: onCollapse , children: children , align: align = 'end' , className: className , ...otherProps }, ref)=>{
+    const styles = $b70a2de4b5faa5c1$export$c4864364a487dfa({
+        className: className
+    });
+    const id = $9pthv$contentfulf36core.useId();
+    const [isExpanded, setIsExpanded] = $9pthv$react.useState(false);
+    const handleOnClick = ()=>{
+        if (!isExpanded && onExpand) onExpand();
+        if (isExpanded && onCollapse) onCollapse();
+        setIsExpanded(!isExpanded);
+    };
+    return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($9pthv$contentfulf36core.Box, {
+        as: "li",
+        className: styles.accordionItem,
+        testId: `${testId}-${id}`,
+        ...otherProps,
+        ref: ref
+    }, /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41, {
+        onClick: handleOnClick,
+        isExpanded: isExpanded,
+        element: titleElement,
+        ariaId: id,
+        align: align
+    }, title), /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).createElement($dc0312cfa0956395$export$7cad6f17fd6e117b, {
+        ariaId: id,
+        isExpanded: isExpanded
+    }, children)));
+};
+const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($b9a3851e41efa019$var$_AccordionItem);
+
+
+const $485e20d95dcb1fa7$export$a766cd26d0d69044 = $6b1aad2dfaf9ce0d$export$a766cd26d0d69044;
+$485e20d95dcb1fa7$export$a766cd26d0d69044.Item = $b9a3851e41efa019$export$d99097c13d4dac9f;
+
+
+
+
+
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +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

@@ -0,0 +1,211 @@
+import $jACei$react, {useState as $jACei$useState} from "react";
+import {Box as $jACei$Box, useId as $jACei$useId} from "@contentful/f36-core";
+import {cx as $jACei$cx, css as $jACei$css} from "emotion";
+import $jACei$contentfulf36tokens from "@contentful/f36-tokens";
+import {Subheading as $jACei$Subheading} from "@contentful/f36-typography";
+import {ChevronDownTrimmedIcon as $jACei$ChevronDownTrimmedIcon} from "@contentful/f36-icons";
+import {Collapse as $jACei$Collapse} from "@contentful/f36-collapse";
+
+
+
+
+
+
+const $d678e0ec669f4067$export$af90c4d6702a6ca7 = ({ className: className  })=>({
+        accordion: $jACei$cx(/*#__PURE__*/ $jACei$css({
+            boxSizing: 'border-box',
+            padding: '0',
+            margin: '0',
+            listStyle: 'none',
+            '&:first-child': {
+                borderTop: `1px solid ${$jACei$contentfulf36tokens.gray300}`
+            }
+        }), className)
+    })
+;
+
+
+const $a517c4a963657a24$var$_Accordion = ({ align: align = 'end' , children: children , className: className , testId: testId = 'cf-ui-accordion' , ...otherProps }, ref)=>{
+    const styles = $d678e0ec669f4067$export$af90c4d6702a6ca7({
+        className: className
+    });
+    return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
+        as: "ul",
+        className: styles.accordion,
+        testId: testId,
+        ...otherProps,
+        ref: ref
+    }, $jACei$react.Children.map(children, (child)=>{
+        if (/*#__PURE__*/ $jACei$react.isValidElement(child)) return(/*#__PURE__*/ $jACei$react.cloneElement(child, {
+            align: align
+        }));
+        return child;
+    })));
+};
+const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ $jACei$react.forwardRef($a517c4a963657a24$var$_Accordion);
+
+
+
+
+
+
+
+
+
+
+const $d95c2a37e890ef38$var$getHeaderStyles = ({ align: align  })=>$jACei$cx(/*#__PURE__*/ $jACei$css({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        border: '0',
+        padding: $jACei$contentfulf36tokens.spacingM,
+        backgroundColor: 'transparent',
+        fontFamily: $jACei$contentfulf36tokens.fontStackPrimary,
+        fontSize: $jACei$contentfulf36tokens.fontSizeL,
+        fontWeight: $jACei$contentfulf36tokens.fontWeightDemiBold,
+        lineHeight: $jACei$contentfulf36tokens.lineHeightL,
+        color: $jACei$contentfulf36tokens.gray800,
+        width: '100%',
+        minWidth: '9px',
+        cursor: 'pointer',
+        transition: `background-color ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault}`,
+        '&:hover': {
+            backgroundColor: $jACei$contentfulf36tokens.gray100
+        },
+        '&:focus': {
+            outline: 'none',
+            backgroundColor: $jACei$contentfulf36tokens.gray100
+        }
+    }), align === 'end' && /*#__PURE__*/ $jACei$css({
+        name: "1tvf3d0",
+        styles: "flex-direction:row-reverse;justify-content:space-between;"
+    }))
+;
+const $d95c2a37e890ef38$var$getIconStyles = ({ align: align , isExpanded: isExpanded  })=>$jACei$cx(/*#__PURE__*/ $jACei$css({
+        transform: 'rotate(0deg)',
+        transition: `transform ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault}`
+    }), align === 'end' && /*#__PURE__*/ $jACei$css({
+        marginLeft: $jACei$contentfulf36tokens.spacingM
+    }), align === 'start' && /*#__PURE__*/ $jACei$css({
+        marginRight: $jACei$contentfulf36tokens.spacingM
+    }), isExpanded && /*#__PURE__*/ $jACei$css({
+        name: "4ky835",
+        styles: "transform:rotate(180deg);"
+    }))
+;
+const $d95c2a37e890ef38$export$b6b01239d0041103 = (props)=>({
+        accordionHeader: $d95c2a37e890ef38$var$getHeaderStyles(props),
+        accordionHeaderIcon: $d95c2a37e890ef38$var$getIconStyles(props)
+    })
+;
+
+
+const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClick: onClick , isExpanded: isExpanded = false , ariaId: ariaId , element: element = 'h2' , align: align = 'end' , testId: testId = 'cf-ui-accordion-header' , ...rest })=>{
+    const styles = $d95c2a37e890ef38$export$b6b01239d0041103({
+        align: align,
+        isExpanded: isExpanded
+    });
+    return(/*#__PURE__*/ $jACei$react.createElement($jACei$Subheading, {
+        ...rest,
+        testId: testId,
+        marginBottom: "none",
+        as: element
+    }, /*#__PURE__*/ $jACei$react.createElement("button", {
+        type: "button",
+        "aria-expanded": isExpanded,
+        "aria-controls": `accordion-panel--${ariaId}`,
+        id: `accordion--${ariaId}`,
+        className: styles.accordionHeader,
+        onClick: onClick
+    }, /*#__PURE__*/ $jACei$react.createElement($jACei$ChevronDownTrimmedIcon, {
+        className: styles.accordionHeaderIcon,
+        variant: "secondary"
+    }), children)));
+};
+
+
+
+
+
+
+const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
+    return {
+        accordionPanelContent: /*#__PURE__*/ $jACei$css({
+            width: '100%',
+            padding: `${$jACei$contentfulf36tokens.spacingXs} ${$jACei$contentfulf36tokens.spacingM} ${$jACei$contentfulf36tokens.spacingM}`
+        })
+    };
+};
+
+
+const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
+    const styles = $3ba27b87c168e14d$export$2db50514b4b2c1ee();
+    return(/*#__PURE__*/ $jACei$react.createElement($jACei$Collapse, {
+        "data-test-id": testId,
+        "aria-labelledby": `accordion--${ariaId}`,
+        isExpanded: isExpanded,
+        ...otherProps
+    }, /*#__PURE__*/ $jACei$react.createElement("div", {
+        className: styles.accordionPanelContent
+    }, children)));
+};
+
+
+
+
+
+const $10647792993fae18$export$c4864364a487dfa = ({ className: className  })=>({
+        accordionItem: $jACei$cx(/*#__PURE__*/ $jACei$css({
+            padding: '0',
+            margin: '0',
+            borderBottom: `1px solid ${$jACei$contentfulf36tokens.colorElementMid}`,
+            '&:first-child': {
+                borderTop: `1px solid ${$jACei$contentfulf36tokens.colorElementMid}`
+            }
+        }), className)
+    })
+;
+
+
+const $b6120c67649da348$var$_AccordionItem = ({ title: title = 'Accordion Title' , titleElement: titleElement = 'h2' , testId: testId = 'cf-ui-accordion-item' , onExpand: onExpand , onCollapse: onCollapse , children: children , align: align = 'end' , className: className , ...otherProps }, ref)=>{
+    const styles = $10647792993fae18$export$c4864364a487dfa({
+        className: className
+    });
+    const id = $jACei$useId();
+    const [isExpanded, setIsExpanded] = $jACei$useState(false);
+    const handleOnClick = ()=>{
+        if (!isExpanded && onExpand) onExpand();
+        if (isExpanded && onCollapse) onCollapse();
+        setIsExpanded(!isExpanded);
+    };
+    return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
+        as: "li",
+        className: styles.accordionItem,
+        testId: `${testId}-${id}`,
+        ...otherProps,
+        ref: ref
+    }, /*#__PURE__*/ $jACei$react.createElement($01f1d19e673d71a7$export$5e3e5deaaf81ee41, {
+        onClick: handleOnClick,
+        isExpanded: isExpanded,
+        element: titleElement,
+        ariaId: id,
+        align: align
+    }, title), /*#__PURE__*/ $jACei$react.createElement($0c5bba33d6cffbcc$export$7cad6f17fd6e117b, {
+        ariaId: id,
+        isExpanded: isExpanded
+    }, children)));
+};
+const $b6120c67649da348$export$d99097c13d4dac9f = /*#__PURE__*/ $jACei$react.forwardRef($b6120c67649da348$var$_AccordionItem);
+
+
+const $9e55ae7143081c67$export$a766cd26d0d69044 = $a517c4a963657a24$export$a766cd26d0d69044;
+$9e55ae7143081c67$export$a766cd26d0d69044.Item = $b6120c67649da348$export$d99097c13d4dac9f;
+
+
+
+
+
+
+
+export {$9e55ae7143081c67$export$a766cd26d0d69044 as Accordion, $01f1d19e673d71a7$export$5e3e5deaaf81ee41 as AccordionHeader, $b6120c67649da348$export$d99097c13d4dac9f as AccordionItem, $0c5bba33d6cffbcc$export$7cad6f17fd6e117b as AccordionPanel};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +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

@@ -0,0 +1,106 @@
+import React, { FC } from "react";
+import { CommonProps, ExpandProps } from "@contentful/f36-core";
+import { HeadingElement } from "@contentful/f36-typography";
+export interface AccordionProps extends CommonProps {
+    /**
+     * Specify the alignment of the chevron inside the accordion header
+     * @default end
+     */
+    align?: 'start' | 'end';
+    /**
+     * Child nodes to be rendered in the component
+     */
+    children?: React.ReactNode;
+}
+declare const _Accordion1: React.ForwardRefExoticComponent<{
+    align?: 'start' | 'end';
+    children?: React.ReactNode;
+    className?: string;
+    testId?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLUListElement>>;
+export interface AccordionHeaderProps extends CommonProps {
+    /**
+     * Child nodes to be rendered in the component
+     */
+    children?: React.ReactNode;
+    /**
+     * The function that will be called once the user clicks on the accordion title
+     */
+    onClick: VoidFunction;
+    /**
+     * A boolean that tells if the accordion should be expanded or collapsed
+     */
+    isExpanded: boolean;
+    /**
+     * An unique id that is necessary for the aria roles and properties
+     */
+    ariaId: string;
+    /**
+     * The heading element that will be used by the Subheading component
+     */
+    element?: HeadingElement;
+    /**
+     * Specify the alignment of the chevron inside the accordion header
+     */
+    align?: 'start' | 'end';
+}
+export const AccordionHeader: ({ children, onClick, isExpanded, ariaId, element, align, testId, ...rest }: AccordionHeaderProps) => JSX.Element;
+export interface AccordionPanelProps extends CommonProps {
+    /**
+     * Child nodes to be rendered in the component
+     */
+    children?: React.ReactNode;
+    /**
+     * A boolean that tells if the accordion should be expanded or collapsed
+     */
+    isExpanded: boolean;
+    /**
+     * An unique id that is necessary for the aria roles and properties
+     */
+    ariaId: string;
+}
+export const AccordionPanel: FC<ExpandProps<AccordionPanelProps>>;
+export interface AccordionItemProps extends CommonProps {
+    /**
+     * The accordion title
+     */
+    title?: React.ReactNode;
+    /**
+     * The heading element that will be used by the AccordionHeader
+     */
+    titleElement?: HeadingElement;
+    /**
+     * The children of the AccordionItem are in fact the content of the accordion
+     */
+    children?: React.ReactNode;
+    /**
+     * A function to be called when the accordion item is opened
+     */
+    onExpand?: Function;
+    /**
+     * A function to be called when the accordion item is closed
+     */
+    onCollapse?: Function;
+    /**
+     * Specify the alignment of the chevron inside the accordion header
+     */
+    align?: 'start' | 'end';
+}
+export const AccordionItem: React.ForwardRefExoticComponent<{
+    title?: React.ReactNode;
+    titleElement?: HeadingElement;
+    children?: React.ReactNode;
+    onExpand?: Function;
+    onCollapse?: Function;
+    align?: 'start' | 'end';
+    className?: string;
+    testId?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLLIElement>>;
+type CompoundAccordion = typeof _Accordion1 & {
+    Item: typeof AccordionItem;
+};
+export const Accordion: CompoundAccordion;
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;;ACMA,+BAAgC,SAAQ,WAAW;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAiCD,QAAO,MAAM;YAtCH,OAAO,GAAG,KAAK;eAIZ,MAAM,SAAS;;;;0CAkCyB,CAAC;AEzCtD,qCAAsC,SAAQ,WAAW;IACvD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,OAAO,MAAM,8FASV,oBAAoB,gBAqBtB,CAAC;AE3DF,oCAAqC,SAAQ,WAAW;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,MAAM,gBAAgB,GAAG,YAAY,mBAAmB,CAAC,CAmB/D,CAAC;AE9BF,mCAAoC,SAAQ,WAAW;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAwDD,OAAO,MAAM;YA7EH,MAAM,SAAS;mBAIR,cAAc;eAIlB,MAAM,SAAS;eAIf,QAAQ;iBAIN,QAAQ;YAIb,OAAO,GAAG,KAAK;;;;uCAyDoC,CAAC;ACxF9D,yBAAyB,kBAAwB,GAAG;IAClD,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,OAAO,MAAM,4BAAkD,CAAC","sources":["packages/components/accordion/src/src/Accordion.styles.ts","packages/components/accordion/src/src/Accordion.tsx","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/src/AccordionItem/AccordionItem.styles.ts","packages/components/accordion/src/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/src/CompoundAccordion.tsx","packages/components/accordion/src/src/index.ts","packages/components/accordion/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@contentful/f36-accordion",
+  "version": "4.0.0",
+  "description": "Forma 36: Accordion React Component",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/forma-36"
+  },
+  "scripts": {
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@contentful/f36-collapse": "^4.0.0",
+    "@contentful/f36-core": "^4.0.0",
+    "@contentful/f36-icons": "^4.0.0",
+    "@contentful/f36-tokens": "^4.0.0",
+    "@contentful/f36-typography": "^4.0.0",
+    "emotion": "^10.0.17"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "01d931c77410619d05cd00dbb3b5acc5d8ae2cdf"
+}