@contentful/f36-accordion 4.1.4 → 4.2.2

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.2](https://github.com/contentful/forma-36/compare/@contentful/f36-accordion@4.2.1...@contentful/f36-accordion@4.2.2) (2022-03-03)
+
+
+### Bug Fixes
+
+* migrate links from master to main  ([#1923](https://github.com/contentful/forma-36/issues/1923)) ([607301d](https://github.com/contentful/forma-36/commit/607301d57a2e83190d2aa298120ddb8493e8c429))
+
+
+
+
+
+## [4.2.1](https://github.com/contentful/forma-36/compare/@contentful/f36-accordion@4.2.0...@contentful/f36-accordion@4.2.1) (2022-02-22)
+
+**Note:** Version bump only for package @contentful/f36-accordion
+
+
+
+
+
+# [4.2.0](https://github.com/contentful/forma-36/compare/@contentful/f36-accordion@4.1.4...@contentful/f36-accordion@4.2.0) (2022-02-17)
+
+
+### Features
+
+* keyboard-only focus styles ([#1825](https://github.com/contentful/forma-36/issues/1825)) ([d74b5b6](https://github.com/contentful/forma-36/commit/d74b5b6592fd847a9afeb388bad842314496ec5a))
+
+
+
+
+
 ## [4.1.4](https://github.com/contentful/forma-36/compare/@contentful/f36-accordion@4.1.3...@contentful/f36-accordion@4.1.4) (2022-02-09)
 
 **Note:** Version bump only for package @contentful/f36-accordion

package/README.mdx

@@ -2,7 +2,7 @@
 title: 'Accordion'
 type: 'component'
 slug: /components/accordion/
-github: 'https://github.com/contentful/forma-36/tree/master/packages/components/accordion'
+github: 'https://github.com/contentful/forma-36/tree/main/packages/components/accordion'
 typescript: ./src/Accordion.tsx,./src/AccordionItem/AccordionItem.tsx
 ---
 

package/dist/main.js

@@ -79,13 +79,26 @@ const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align  })=>$9pthv$emotio
         width: '100%',
         minWidth: '9px',
         cursor: 'pointer',
-        transition: `background-color ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`,
+        transition: `background-color ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault},
+        box-shadow ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationShort} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`,
         '&:hover': {
             backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100
         },
         '&:focus': {
-            outline: 'none',
-            backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100
+            backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100,
+            borderRadius: ($parcel$interopDefault($9pthv$contentfulf36tokens)).borderRadiusMedium,
+            boxShadow: ($parcel$interopDefault($9pthv$contentfulf36tokens)).glowPrimary,
+            outline: 'none'
+        },
+        '&:focus:not(:focus-visible)': {
+            backgroundColor: 'transparent',
+            borderRadius: 'unset',
+            boxShadow: 'unset'
+        },
+        '&:focus-visible': {
+            backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100,
+            borderRadius: ($parcel$interopDefault($9pthv$contentfulf36tokens)).borderRadiusMedium,
+            boxShadow: ($parcel$interopDefault($9pthv$contentfulf36tokens)).glowPrimary
         }
     }), align === 'end' && /*#__PURE__*/ $9pthv$emotion.css({
         name: "1tvf3d0",

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n  Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   * @default end\n   */\n  align?: 'start' | 'end';\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n}\n\nconst _Accordion = (\n  {\n    align = 'end',\n    children,\n    className,\n    testId = 'cf-ui-accordion',\n    ...otherProps\n  }: ExpandProps<AccordionProps>,\n  ref: React.Ref<HTMLUListElement>,\n) => {\n  const styles = getAccordionStyles({ className });\n  return (\n    <Box\n      as=\"ul\"\n      className={styles.accordion}\n      testId={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            align,\n          });\n        }\n        return child;\n      })}\n    </Box>\n  );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n  accordion: cx(\n    css({\n      boxSizing: 'border-box',\n      padding: '0',\n      margin: '0',\n      listStyle: 'none',\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.gray300}`,\n      },\n    }),\n    className,\n  ),\n});\n","import React, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n  /**\n   * The accordion title\n   */\n  title?: React.ReactNode;\n  /**\n   * The heading element that will be used by the AccordionHeader\n   */\n  titleElement?: HeadingElement;\n  /**\n   * The children of the AccordionItem are in fact the content of the accordion\n   */\n  children?: React.ReactNode;\n  /**\n   * A function to be called when the accordion item is opened\n   */\n  onExpand?: Function;\n  /**\n   * A function to be called when the accordion item is closed\n   */\n  onCollapse?: Function;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nconst _AccordionItem = (\n  {\n    title = 'Accordion Title',\n    titleElement = 'h2',\n    testId = 'cf-ui-accordion-item',\n    onExpand,\n    onCollapse,\n    children,\n    align = 'end',\n    className,\n    ...otherProps\n  }: ExpandProps<AccordionItemProps>,\n  ref: React.Ref<HTMLLIElement>,\n) => {\n  const styles = getAccordionItemStyles({ className });\n  const id = useId();\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const handleOnClick = () => {\n    if (!isExpanded && onExpand) {\n      onExpand();\n    }\n    if (isExpanded && onCollapse) {\n      onCollapse();\n    }\n\n    setIsExpanded(!isExpanded);\n  };\n\n  return (\n    <Box\n      as=\"li\"\n      className={styles.accordionItem}\n      testId={`${testId}-${id}`}\n      {...otherProps}\n      ref={ref}\n    >\n      <AccordionHeader\n        onClick={handleOnClick}\n        isExpanded={isExpanded}\n        element={titleElement}\n        ariaId={id}\n        align={align}\n      >\n        {title}\n      </AccordionHeader>\n\n      <AccordionPanel ariaId={id} isExpanded={isExpanded}>\n        {children}\n      </AccordionPanel>\n    </Box>\n  );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * The function that will be called once the user clicks on the accordion title\n   */\n  onClick: VoidFunction;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n  /**\n   * The heading element that will be used by the Subheading component\n   */\n  element?: HeadingElement;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n  children,\n  onClick,\n  isExpanded = false,\n  ariaId,\n  element = 'h2',\n  align = 'end',\n  testId = 'cf-ui-accordion-header',\n  ...rest\n}: AccordionHeaderProps) => {\n  const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n  return (\n    <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n      <button\n        type=\"button\"\n        aria-expanded={isExpanded}\n        aria-controls={`accordion-panel--${ariaId}`}\n        id={`accordion--${ariaId}`}\n        className={styles.accordionHeader}\n        onClick={onClick}\n      >\n        <ChevronDownTrimmedIcon\n          className={styles.accordionHeaderIcon}\n          variant=\"secondary\"\n        />\n        {children}\n      </button>\n    </Subheading>\n  );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n  align: 'start' | 'end';\n  isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n  cx(\n    css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      border: '0',\n      padding: tokens.spacingM,\n      backgroundColor: 'transparent',\n      fontFamily: tokens.fontStackPrimary,\n      fontSize: tokens.fontSizeL,\n      fontWeight: tokens.fontWeightDemiBold,\n      lineHeight: tokens.lineHeightL,\n      color: tokens.gray800,\n      width: '100%',\n      minWidth: '9px',\n      cursor: 'pointer',\n      transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n      },\n      '&:focus': {\n        outline: 'none',\n        backgroundColor: tokens.gray100,\n      },\n    }),\n    align === 'end' &&\n      css({\n        flexDirection: 'row-reverse',\n        justifyContent: 'space-between',\n      }),\n  );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n  cx(\n    css({\n      transform: 'rotate(0deg)',\n      transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n    }),\n    align === 'end' && css({ marginLeft: tokens.spacingM }),\n    align === 'start' && css({ marginRight: tokens.spacingM }),\n    isExpanded &&\n      css({\n        transform: 'rotate(180deg)',\n      }),\n  );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n  accordionHeader: getHeaderStyles(props),\n  accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n  children,\n  isExpanded = false,\n  ariaId,\n  testId = 'cf-ui-accordion-panel',\n  ...otherProps\n}: AccordionPanelProps) => {\n  const styles = getAccordionPanelStyles();\n\n  return (\n    <Collapse\n      data-test-id={testId}\n      aria-labelledby={`accordion--${ariaId}`}\n      isExpanded={isExpanded}\n      {...otherProps}\n    >\n      <div className={styles.accordionPanelContent}>{children}</div>\n    </Collapse>\n  );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n  return {\n    accordionPanelContent: css({\n      width: '100%',\n      padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n    }),\n  };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n  className,\n}: {\n  className?: string;\n}) => ({\n  accordionItem: cx(\n    css({\n      padding: '0',\n      margin: '0',\n      borderBottom: `1px solid ${tokens.colorElementMid}`,\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.colorElementMid}`,\n      },\n    }),\n    className,\n  ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"main.js.map"}
+{"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        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","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","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

@@ -68,13 +68,26 @@ const $d95c2a37e890ef38$var$getHeaderStyles = ({ align: align  })=>$jACei$cx(/*#
         width: '100%',
         minWidth: '9px',
         cursor: 'pointer',
-        transition: `background-color ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault}`,
+        transition: `background-color ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault},
+        box-shadow ${$jACei$contentfulf36tokens.transitionDurationShort} ${$jACei$contentfulf36tokens.transitionEasingDefault}`,
         '&:hover': {
             backgroundColor: $jACei$contentfulf36tokens.gray100
         },
         '&:focus': {
-            outline: 'none',
-            backgroundColor: $jACei$contentfulf36tokens.gray100
+            backgroundColor: $jACei$contentfulf36tokens.gray100,
+            borderRadius: $jACei$contentfulf36tokens.borderRadiusMedium,
+            boxShadow: $jACei$contentfulf36tokens.glowPrimary,
+            outline: 'none'
+        },
+        '&:focus:not(:focus-visible)': {
+            backgroundColor: 'transparent',
+            borderRadius: 'unset',
+            boxShadow: 'unset'
+        },
+        '&:focus-visible': {
+            backgroundColor: $jACei$contentfulf36tokens.gray100,
+            borderRadius: $jACei$contentfulf36tokens.borderRadiusMedium,
+            boxShadow: $jACei$contentfulf36tokens.glowPrimary
         }
     }), align === 'end' && /*#__PURE__*/ $jACei$css({
         name: "1tvf3d0",

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n  Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   * @default end\n   */\n  align?: 'start' | 'end';\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n}\n\nconst _Accordion = (\n  {\n    align = 'end',\n    children,\n    className,\n    testId = 'cf-ui-accordion',\n    ...otherProps\n  }: ExpandProps<AccordionProps>,\n  ref: React.Ref<HTMLUListElement>,\n) => {\n  const styles = getAccordionStyles({ className });\n  return (\n    <Box\n      as=\"ul\"\n      className={styles.accordion}\n      testId={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            align,\n          });\n        }\n        return child;\n      })}\n    </Box>\n  );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n  accordion: cx(\n    css({\n      boxSizing: 'border-box',\n      padding: '0',\n      margin: '0',\n      listStyle: 'none',\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.gray300}`,\n      },\n    }),\n    className,\n  ),\n});\n","import React, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n  /**\n   * The accordion title\n   */\n  title?: React.ReactNode;\n  /**\n   * The heading element that will be used by the AccordionHeader\n   */\n  titleElement?: HeadingElement;\n  /**\n   * The children of the AccordionItem are in fact the content of the accordion\n   */\n  children?: React.ReactNode;\n  /**\n   * A function to be called when the accordion item is opened\n   */\n  onExpand?: Function;\n  /**\n   * A function to be called when the accordion item is closed\n   */\n  onCollapse?: Function;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nconst _AccordionItem = (\n  {\n    title = 'Accordion Title',\n    titleElement = 'h2',\n    testId = 'cf-ui-accordion-item',\n    onExpand,\n    onCollapse,\n    children,\n    align = 'end',\n    className,\n    ...otherProps\n  }: ExpandProps<AccordionItemProps>,\n  ref: React.Ref<HTMLLIElement>,\n) => {\n  const styles = getAccordionItemStyles({ className });\n  const id = useId();\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const handleOnClick = () => {\n    if (!isExpanded && onExpand) {\n      onExpand();\n    }\n    if (isExpanded && onCollapse) {\n      onCollapse();\n    }\n\n    setIsExpanded(!isExpanded);\n  };\n\n  return (\n    <Box\n      as=\"li\"\n      className={styles.accordionItem}\n      testId={`${testId}-${id}`}\n      {...otherProps}\n      ref={ref}\n    >\n      <AccordionHeader\n        onClick={handleOnClick}\n        isExpanded={isExpanded}\n        element={titleElement}\n        ariaId={id}\n        align={align}\n      >\n        {title}\n      </AccordionHeader>\n\n      <AccordionPanel ariaId={id} isExpanded={isExpanded}>\n        {children}\n      </AccordionPanel>\n    </Box>\n  );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * The function that will be called once the user clicks on the accordion title\n   */\n  onClick: VoidFunction;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n  /**\n   * The heading element that will be used by the Subheading component\n   */\n  element?: HeadingElement;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n  children,\n  onClick,\n  isExpanded = false,\n  ariaId,\n  element = 'h2',\n  align = 'end',\n  testId = 'cf-ui-accordion-header',\n  ...rest\n}: AccordionHeaderProps) => {\n  const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n  return (\n    <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n      <button\n        type=\"button\"\n        aria-expanded={isExpanded}\n        aria-controls={`accordion-panel--${ariaId}`}\n        id={`accordion--${ariaId}`}\n        className={styles.accordionHeader}\n        onClick={onClick}\n      >\n        <ChevronDownTrimmedIcon\n          className={styles.accordionHeaderIcon}\n          variant=\"secondary\"\n        />\n        {children}\n      </button>\n    </Subheading>\n  );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n  align: 'start' | 'end';\n  isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n  cx(\n    css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      border: '0',\n      padding: tokens.spacingM,\n      backgroundColor: 'transparent',\n      fontFamily: tokens.fontStackPrimary,\n      fontSize: tokens.fontSizeL,\n      fontWeight: tokens.fontWeightDemiBold,\n      lineHeight: tokens.lineHeightL,\n      color: tokens.gray800,\n      width: '100%',\n      minWidth: '9px',\n      cursor: 'pointer',\n      transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n      },\n      '&:focus': {\n        outline: 'none',\n        backgroundColor: tokens.gray100,\n      },\n    }),\n    align === 'end' &&\n      css({\n        flexDirection: 'row-reverse',\n        justifyContent: 'space-between',\n      }),\n  );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n  cx(\n    css({\n      transform: 'rotate(0deg)',\n      transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n    }),\n    align === 'end' && css({ marginLeft: tokens.spacingM }),\n    align === 'start' && css({ marginRight: tokens.spacingM }),\n    isExpanded &&\n      css({\n        transform: 'rotate(180deg)',\n      }),\n  );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n  accordionHeader: getHeaderStyles(props),\n  accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n  children,\n  isExpanded = false,\n  ariaId,\n  testId = 'cf-ui-accordion-panel',\n  ...otherProps\n}: AccordionPanelProps) => {\n  const styles = getAccordionPanelStyles();\n\n  return (\n    <Collapse\n      data-test-id={testId}\n      aria-labelledby={`accordion--${ariaId}`}\n      isExpanded={isExpanded}\n      {...otherProps}\n    >\n      <div className={styles.accordionPanelContent}>{children}</div>\n    </Collapse>\n  );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n  return {\n    accordionPanelContent: css({\n      width: '100%',\n      padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n    }),\n  };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n  className,\n}: {\n  className?: string;\n}) => ({\n  accordionItem: cx(\n    css({\n      padding: '0',\n      margin: '0',\n      borderBottom: `1px solid ${tokens.colorElementMid}`,\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.colorElementMid}`,\n      },\n    }),\n    className,\n  ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"module.js.map"}
+{"mappings":";;;;;;;;;;;;;AGGO,KAAA,CAAMe,yCAAkB,IAAI,CAAnC,YAAqCK,SAAAA,EAAa,CAAhB,IAA4C,CAA5B;QAChDO,SAAS,EAAE,SAAA,CAAA,EACT,AADS,SACT,AADS,EACT,CAAA,UAAA,CAAI,CADNA;YAEIQ,SAAS,EAAE,CADT;YAEFC,OAAO,EAAE,CAFP;YAGFC,MAAM,EAAE,CAHN;YAIFC,SAAS,EAAE,CAJT;YAKF,CAAA,gBAAiB,CAAjB;gBACEC,SAAS,GAAG,UAAA,EAAYL,0BAAM,CAACM,OAAQ;YADxB,CAAA;QALf,CAAJ,GASApB,SAVS;IADiE,CAA5C;;;;ADelC,KAAA,CAAMD,gCAAU,IACd,CADF,QAEIH,KAAK,GAAG,CADV,iBAEEC,QAFF,cAGEG,SAHF,WAIEC,MAAM,GAAG,CAJX,sBAKKC,UAAH,CACY,CAPG,EAQjBC,GARiB,GASd,CARH;IASA,KAAA,CAAMG,MAAM,GAAGX,yCAAkB,CAAC,CAAlC;mBAAoCK,SAAAA;IAAF,CAAD;IACjC,MAAA,0CACG,UAAD;QACE,EAAA,EAAG,CADL;QAEE,SAAA,EAAWM,MAAM,CAACC,SAAR;QACV,MAAA,EAAQN,MAAD;WACHC,UAAJ;QACA,GAAA,EAAKC,GAAD;OAEHZ,YAAK,CAACiB,QAAN,CAAeC,GAAf,CAAmBZ,QAAnB,GAA8Ba,KAAD,GAAW,CAA/C;QACQ,EAAA,gBAAInB,YAAK,CAACoB,cAAN,CAAqBD,KAArB,GACF,MAAA,eAAOnB,YAAK,CAACqB,YAAN,CAAmBF,KAAnB,EAA0B,CAAjC;mBACEd,KAAAA;QAD+B,CAA1B;QAIT,MAAA,CAAOc,KAAP;IACD,CAPA;AAUN,CA7BD;AA+BO,KAAA,CAAM9B,yCAAS,iBAAGW,YAAK,CAACsB,UAAN,CAAiBd,gCAAjB;;;;;;;;;;;AIzCzB,KAAA,CAAMiD,qCAAe,IAAI,CAAzB,QAA2BpD,KAAAA,EAASmD,CAAZ,GACtB,SAAA,CAAA,EACE,AADF,SACE,AADF,EACE,CAAA,UAAA,CAAI,CAFiB;QAGnBE,OAAO,EAAE,CADP;QAEFC,aAAa,EAAE,CAFb;QAGFC,UAAU,EAAE,CAHV;QAIFC,MAAM,EAAE,CAJN;QAKFpC,OAAO,EAAEF,0BAAM,CAACuC,QALd;QAMFC,eAAe,EAAE,CANf;QAOFC,UAAU,EAAEzC,0BAAM,CAAC0C,gBAPjB;QAQFC,QAAQ,EAAE3C,0BAAM,CAAC4C,SARf;QASFC,UAAU,EAAE7C,0BAAM,CAAC8C,kBATjB;QAUFC,UAAU,EAAE/C,0BAAM,CAACgD,WAVjB;QAWFC,KAAK,EAAEjD,0BAAM,CAACkD,OAXZ;QAYFC,KAAK,EAAE,CAZL;QAaFC,QAAQ,EAAE,CAbR;QAcFC,MAAM,EAAE,CAdN;QAeFC,UAAU,GAAG,iBAAA,EAAmBtD,0BAAM,CAACuD,yBAA0B,CAAA,CAAA,EAAGvD,0BAAM,CAACwD,uBAAwB,CAAnGF,qBACN,EAAqBtD,yDAAM,CAACyD,uBAAwB,CAAA,CAAA,EAAGzD,yDAAM,CAACwD,uBAAwB;QAChF,CAAA,UAAW,CAAX;YACEhB,eAAe,EAAExC,yDAAM,CAAC0D,OAAxBlB;QADS,CAjBT;QAoBF,CAAA,UAAW,CAAX;YACEA,eAAe,EAAExC,yDAAM,CAAC0D,OADf;YAETC,YAAY,EAAE3D,6CAFL;YAGT6D,SAAS,EAAE7D,sCAHF;YAIT+D,OAAO,EAAE,CAATA;QAJS,CApBT;QA0BF,CAAA,8BAA+B,CAA/B;YACEvB,eAAe,EAAE,CADY;YAE7BmB,YAAY,EAAE,CAFe;YAG7BE,SAAS,EAAE,CAAXA;QAH6B,CA1B7B;QA+BF,CAAA,kBAAmB,CAAnB;YACErB,eAAe,EAAExC,yDAAM,CAAC0D,OADP;YAEjBC,YAAY,EAAE3D,6CAFG;YAGjB6D,SAAS,EAAE7D,sCAAX6D;QAHiB,CAAA;IA/BjB,CAAJ,GAqCA/E,KAAK,KAAK,CAAV,QAAA,EACE,AADF,SACE,AADF,EACE,CAAA,0DAtCE,CAAA,CAAA;QAsCF,IAAA,EAAA,CAAA;QAAA,MAAA,EAAA,CAAA;IAAA,CAAA;;AAMN,KAAA,CAAMkF,mCAAa,IAAI,CAAvB,QAAyBlF,KAAF,eAASqC,UAAAA,EAAcc,CAAxB,GACpB,0DAAA,CAAA,EACE,AADF,SACE,AADF,EACE,CAAA,0DAAA,CAAI,CAFe;QAGjBgC,SAAS,EAAE,CADT;QAEFX,UAAU,GAAG,UAAA,EAAYtD,yDAAM,CAACuD,yBAA0B,CAAA,CAAA,EAAGvD,yDAAM,CAACwD,uBAAwB;IAF1F,CAAJ,GAIA1E,KAAK,KAAK,CAAV,QAAA,EAAmB,AAAnB,SAAmB,AAAnB,EAAmB,CAAA,2BAAA,CAAI,CAJnB;QAIqBoF,UAAU,EAAElE;IAAd,CAAJ,GACnBlB,KAAK,KAAK,CAAV,UAAA,EAAqB,AAArB,SAAqB,AAArB,EAAqB,CAAA,2BAAA,CAAI,CADF;QACIqF,WAAW,EAAEnE;IAAf,CAAJ,GACrBmB,UAAU,IAAA,EACR,AADQ,SACR,AADQ,EACR,CAAA,2BAFuB,CAAA,CAAA;QAEvB,IAAA,EAAA,CAAA;QAAA,MAAA,EAAA,CAAA;IAAA,CAAA;;AAKC,KAAA,CAAMM,yCAAwB,IAAI2C,KAAD,IAAwB,CAAhE;QACErC,eAAe,EAAEG,qCAAe,CAACkC,KAAD;QAChCpC,mBAAmB,EAAEgC,mCAAa,CAACI,KAAD;IAF4B,CAAxB;;;;;ADjCjC,KAAA,CAAMpG,yCAAe,IAAI,CAAhC,WACEe,QAD8B,YAE9B2C,OAF8B,eAG9BP,UAAU,GAAG,KAHiB,WAI9BS,MAJ8B,YAK9BC,OAAO,GAAG,CALoB,aAM9B/C,KAAK,GAAG,CANsB,eAO9BK,MAAM,GAAG,CAPqB,6BAQ3B2C,IAAH,CACC7D,CAT4B,GASH,CATI;IAU9B,KAAA,CAAMuB,MAAM,GAAGiC,yCAAwB,CAAC,CAAxC;eAA0C3C,KAAF;oBAASqC,UAAAA;IAAT,CAAD;IAEvC,MAAA,0CACG,iBAAD;WAAgBW,IAAJ;QAAU,MAAA,EAAQ3C,MAAD;QAAS,YAAA,EAAa,CAAnD;QAA0D,EAAA,EAAI0C,OAAD;gDAC1D,CAAD;QACE,IAAA,EAAK,CADP;QAEE,CAAA,gBAAeV,UAAD;QACd,CAAA,iBAAgB,iBAAA,EAAmBS,MAAO;QAC1C,EAAA,GAAK,WAAA,EAAaA,MAAO;QACzB,SAAA,EAAWpC,MAAM,CAACuC,eAAR;QACV,OAAA,EAASL,OAAD;gDAEP,6BAAD;QACE,SAAA,EAAWlC,MAAM,CAACwC,mBAAR;QACV,OAAA,EAAQ,CAFV;QAICjD,QAAD;AAIP,CA9BM;;;;;;;AGhCA,KAAA,CAAMwF,yCAAuB,OAAS,CAA7C;IACE,MAAA,CAAO,CAAP;QACEC,qBAAqB,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,UAAA,CAAI,CAA3BA;YACErB,KAAK,EAAE,CADkB;YAEzBjD,OAAO,KAAKF,0BAAM,CAACyE,SAAU,CAAA,CAAA,EAAGzE,0BAAM,CAACuC,QAAS,CAAA,CAAA,EAAGvC,0BAAM,CAACuC,QAAS;QAF1C,CAAJ;IADlB,CAAP;AAMD,CAPM;;;ADkBA,KAAA,CAAMnE,yCAAc,IAA0C,CAArE,WACEW,QADmE,eAEnEoC,UAAU,GAAG,KAFsD,WAGnES,MAHmE,WAInEzC,MAAM,GAAG,CAJ0D,4BAKhEC,UAAH,CACCf,CANiE,GAMzC,CAN0C;IAOnE,KAAA,CAAMmB,MAAM,GAAG+E,yCAAuB;IAEtC,MAAA,0CACG,eAAD;QACE,CAAA,eAAcpF,MAAD;QACb,CAAA,mBAAkB,WAAA,EAAayC,MAAO;QACtC,UAAA,EAAYT,UAAD;WACP/B,UAAJ;gDAEC,CAAD;QAAK,SAAA,EAAWI,MAAM,CAACgF,qBAAR;OAAgCzF,QAAD;AAGnD,CAnBM;;;;;;AElBA,KAAA,CAAM2B,wCAAsB,IAAI,CAAvC,YACExB,SAAAA,EACC,CAFmC,IAI/B,CAFJ;QAGDoC,aAAa,EAAE,SAAA,CAAA,EACb,AADa,SACb,AADa,EACb,CAAA,UAAA,CAAI,CADNA;YAEIpB,OAAO,EAAE,CADP;YAEFC,MAAM,EAAE,CAFN;YAGFuE,YAAY,GAAG,UAAA,EAAY1E,0BAAM,CAAC2E,eAAgB;YAClD,CAAA,gBAAiB,CAAjB;gBACEtE,SAAS,GAAG,UAAA,EAAYL,0BAAM,CAAC2E,eAAgB;YADhC,CAAA;QAJf,CAAJ,GAQAzF,SATa;IADV,CAJ+B;;;;ALkCtC,KAAA,CAAM8B,oCAAc,IAClB,CADF,QAEIL,KAAK,GAAG,CADV,iCAEEC,YAAY,GAAG,CAFjB,cAGEzB,MAAM,GAAG,CAHX,kCAIE0B,QAJF,eAKEE,UALF,aAMEhC,QANF,UAOED,KAAK,GAAG,CAPV,kBAQEI,SARF,MASKE,UAAH,CACY,CAXO,EAYrBC,GAZqB,GAalB,CAZH;IAaA,KAAA,CAAMG,MAAM,GAAGkB,wCAAsB,CAAC,CAAtC;mBAAwCxB,SAAAA;IAAF,CAAD;IACrC,KAAA,CAAMgC,EAAE,GAAGT,YAAK;IAChB,KAAA,EAAOU,UAAD,EAAaC,aAAb,IAA8Bb,eAAQ,CAAC,KAAD;IAE5C,KAAA,CAAMc,aAAa,OAAS,CAA5B;QACE,EAAA,GAAKF,UAAD,IAAeN,QAAnB,EACEA,QAAQ;QAEV,EAAA,EAAIM,UAAU,IAAIJ,UAAlB,EACEA,UAAU;QAGZK,aAAa,EAAED,UAAF;IACd,CATD;IAWA,MAAA,0CACG,UAAD;QACE,EAAA,EAAG,CADL;QAEE,SAAA,EAAW3B,MAAM,CAAC8B,aAAR;QACV,MAAA,KAAWnC,MAAO,CAAA,CAAA,EAAG+B,EAAG;WACpB9B,UAAJ;QACA,GAAA,EAAKC,GAAD;gDAEH,yCAAD;QACE,OAAA,EAASgC,aAAD;QACR,UAAA,EAAYF,UAAD;QACX,OAAA,EAASP,YAAD;QACR,MAAA,EAAQM,EAAD;QACP,KAAA,EAAOpC,KAAD;OAEL6B,KAAD,4CAGD,yCAAD;QAAgB,MAAA,EAAQO,EAAD;QAAK,UAAA,EAAYC,UAAD;OACpCpC,QAAD;AAIP,CApDD;AAsDO,KAAA,CAAMb,yCAAa,iBAAGO,YAAK,CAACsB,UAAN,CAAiBiB,oCAAjB;;;AHpFtB,KAAA,CAAMlD,yCAAS,GAAGQ,yCAAiB;AAC1CR,yCAAS,CAACU,IAAV,GAAiBN,yCAAjB","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n  Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   * @default end\n   */\n  align?: 'start' | 'end';\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n}\n\nconst _Accordion = (\n  {\n    align = 'end',\n    children,\n    className,\n    testId = 'cf-ui-accordion',\n    ...otherProps\n  }: ExpandProps<AccordionProps>,\n  ref: React.Ref<HTMLUListElement>,\n) => {\n  const styles = getAccordionStyles({ className });\n  return (\n    <Box\n      as=\"ul\"\n      className={styles.accordion}\n      testId={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, {\n            align,\n          });\n        }\n        return child;\n      })}\n    </Box>\n  );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n  accordion: cx(\n    css({\n      boxSizing: 'border-box',\n      padding: '0',\n      margin: '0',\n      listStyle: 'none',\n      '&:first-child': {\n        borderTop: `1px solid ${tokens.gray300}`,\n      },\n    }),\n    className,\n  ),\n});\n","import React, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n  /**\n   * The accordion title\n   */\n  title?: React.ReactNode;\n  /**\n   * The heading element that will be used by the AccordionHeader\n   */\n  titleElement?: HeadingElement;\n  /**\n   * The children of the AccordionItem are in fact the content of the accordion\n   */\n  children?: React.ReactNode;\n  /**\n   * A function to be called when the accordion item is opened\n   */\n  onExpand?: Function;\n  /**\n   * A function to be called when the accordion item is closed\n   */\n  onCollapse?: Function;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nconst _AccordionItem = (\n  {\n    title = 'Accordion Title',\n    titleElement = 'h2',\n    testId = 'cf-ui-accordion-item',\n    onExpand,\n    onCollapse,\n    children,\n    align = 'end',\n    className,\n    ...otherProps\n  }: ExpandProps<AccordionItemProps>,\n  ref: React.Ref<HTMLLIElement>,\n) => {\n  const styles = getAccordionItemStyles({ className });\n  const id = useId();\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const handleOnClick = () => {\n    if (!isExpanded && onExpand) {\n      onExpand();\n    }\n    if (isExpanded && onCollapse) {\n      onCollapse();\n    }\n\n    setIsExpanded(!isExpanded);\n  };\n\n  return (\n    <Box\n      as=\"li\"\n      className={styles.accordionItem}\n      testId={`${testId}-${id}`}\n      {...otherProps}\n      ref={ref}\n    >\n      <AccordionHeader\n        onClick={handleOnClick}\n        isExpanded={isExpanded}\n        element={titleElement}\n        ariaId={id}\n        align={align}\n      >\n        {title}\n      </AccordionHeader>\n\n      <AccordionPanel ariaId={id} isExpanded={isExpanded}>\n        {children}\n      </AccordionPanel>\n    </Box>\n  );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n  /**\n   * Child nodes to be rendered in the component\n   */\n  children?: React.ReactNode;\n  /**\n   * The function that will be called once the user clicks on the accordion title\n   */\n  onClick: VoidFunction;\n  /**\n   * A boolean that tells if the accordion should be expanded or collapsed\n   */\n  isExpanded: boolean;\n  /**\n   * An unique id that is necessary for the aria roles and properties\n   */\n  ariaId: string;\n  /**\n   * The heading element that will be used by the Subheading component\n   */\n  element?: HeadingElement;\n  /**\n   * Specify the alignment of the chevron inside the accordion header\n   */\n  align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n  children,\n  onClick,\n  isExpanded = false,\n  ariaId,\n  element = 'h2',\n  align = 'end',\n  testId = 'cf-ui-accordion-header',\n  ...rest\n}: AccordionHeaderProps) => {\n  const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n  return (\n    <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n      <button\n        type=\"button\"\n        aria-expanded={isExpanded}\n        aria-controls={`accordion-panel--${ariaId}`}\n        id={`accordion--${ariaId}`}\n        className={styles.accordionHeader}\n        onClick={onClick}\n      >\n        <ChevronDownTrimmedIcon\n          className={styles.accordionHeaderIcon}\n          variant=\"secondary\"\n        />\n        {children}\n      </button>\n    </Subheading>\n  );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n  align: 'start' | 'end';\n  isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n  cx(\n    css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      border: '0',\n      padding: tokens.spacingM,\n      backgroundColor: 'transparent',\n      fontFamily: tokens.fontStackPrimary,\n      fontSize: tokens.fontSizeL,\n      fontWeight: tokens.fontWeightDemiBold,\n      lineHeight: tokens.lineHeightL,\n      color: tokens.gray800,\n      width: '100%',\n      minWidth: '9px',\n      cursor: 'pointer',\n      transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n        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","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","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

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-accordion",
-  "version": "4.1.4",
+  "version": "4.2.2",
   "description": "Forma 36: Accordion React Component",
   "license": "MIT",
   "files": [
@@ -21,11 +21,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-collapse": "^4.2.2",
-    "@contentful/f36-core": "^4.1.1",
-    "@contentful/f36-icons": "^4.1.0",
-    "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/f36-typography": "^4.1.1",
+    "@contentful/f36-collapse": "^4.2.4",
+    "@contentful/f36-core": "^4.2.1",
+    "@contentful/f36-icons": "^4.1.2",
+    "@contentful/f36-tokens": "^4.0.1",
+    "@contentful/f36-typography": "^4.2.1",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {
@@ -34,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4033d5c2d365609e33bc0d7f293959acdcdd8c65"
+  "gitHead": "e3e979f182b1386de7209705403030cdbb92d71b"
 }