npm - @sproutsocial/seeds-react-accordion - Versions diffs - 0.2.18 → 0.3.2 - Mend

@sproutsocial/seeds-react-accordion 0.2.18 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/.turbo/turbo-build.log +10 -10
package/CHANGELOG.md +30 -0
package/dist/esm/index.js +22 -3
package/dist/esm/index.js.map +1 -1
package/dist/index.d.mts +26 -9
package/dist/index.d.ts +26 -9
package/dist/index.js +22 -3
package/dist/index.js.map +1 -1
package/package.json +6 -6
package/src/Accordion.stories.tsx +85 -0
package/src/AccordionTrigger.tsx +12 -11
package/src/AccordionTypes.ts +26 -0
package/src/__tests__/accordion.test.tsx +85 -0
package/src/styles.ts +5 -1

package/.turbo/turbo-build.log CHANGED Viewed

@@ -8,14 +8,14 @@ $ tsup --dts
 [34mCLI[39m Cleaning output folder
 [34mCJS[39m Build start
 [34mESM[39m Build start
-[32mESM[39m [1mdist/esm/index.js     [22m[32m13.16 KB[39m
-[32mESM[39m [1mdist/esm/index.js.map [22m[32m24.50 KB[39m
-[32mESM[39m ⚡️ Build success in 99ms
-[32mCJS[39m [1mdist/index.js     [22m[32m17.14 KB[39m
-[32mCJS[39m [1mdist/index.js.map [22m[32m24.92 KB[39m
-[32mCJS[39m ⚡️ Build success in 100ms
+[32mCJS[39m [1mdist/index.js     [22m[32m17.54 KB[39m
+[32mCJS[39m [1mdist/index.js.map [22m[32m25.80 KB[39m
+[32mCJS[39m ⚡️ Build success in 156ms
+[32mESM[39m [1mdist/esm/index.js     [22m[32m13.56 KB[39m
+[32mESM[39m [1mdist/esm/index.js.map [22m[32m25.39 KB[39m
+[32mESM[39m ⚡️ Build success in 157ms
 [34mDTS[39m Build start
-[32mDTS[39m ⚡️ Build success in 9269ms
-[32mDTS[39m [1mdist/index.d.ts  [22m[32m2.66 KB[39m
-[32mDTS[39m [1mdist/index.d.mts [22m[32m2.66 KB[39m
-Done in 11.24s.
+[32mDTS[39m ⚡️ Build success in 10277ms
+[32mDTS[39m [1mdist/index.d.ts  [22m[32m3.11 KB[39m
+[32mDTS[39m [1mdist/index.d.mts [22m[32m3.11 KB[39m
+Done in 12.59s.

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,35 @@
 # @sproutsocial/seeds-react-accordion
+## 0.3.2
+### Patch Changes
+- Updated dependencies [6f71236]
+  - @sproutsocial/seeds-react-menu@1.8.4
+## 0.3.1
+### Patch Changes
+- Updated dependencies [118e300]
+  - @sproutsocial/seeds-react-theme@3.5.1
+  - @sproutsocial/seeds-react-box@1.1.13
+  - @sproutsocial/seeds-react-icon@2.2.4
+  - @sproutsocial/seeds-react-menu@1.8.3
+  - @sproutsocial/seeds-react-button@1.3.18
+## 0.3.0
+### Minor Changes
+- 2550448: Added new prop to AccordionTrigger to allow users to pass a heading level"
+### Patch Changes
+- @sproutsocial/seeds-react-icon@2.2.3
+- @sproutsocial/seeds-react-menu@1.8.2
+- @sproutsocial/seeds-react-button@1.3.17
 ## 0.2.18
 ### Patch Changes

package/dist/esm/index.js CHANGED Viewed

@@ -278,7 +278,9 @@ var TriggerContainer = styled.div`
 	${LAYOUT}
 	${FLEXBOX}
 `;
-var TitleStyles = styled.h4`
+var TitleStyles = styled.h4.attrs((props) => ({
+  as: props.as || "h4"
+}))`
   margin: 0;
   font-weight: normal;
@@ -331,6 +333,7 @@ var AccordionTrigger = ({
   overflowMenu,
   rightSlot,
   title,
+  headingLevel = "h4",
   ...rest
 }) => {
   const { triggerIcon, triggerPosition, styled: styled2 } = useContext2(AccordionContext);
@@ -454,7 +457,15 @@ var AccordionTrigger = ({
             children: triggerPosition === "right" ? /* @__PURE__ */ jsxs(StyledAccordionArea, { children: [
               /* @__PURE__ */ jsxs(FlexCenter, { children: [
                 leftSlot,
-                /* @__PURE__ */ jsx4(TitleStyles, { "data-styled": styled2, ...typographyProps, children: title }),
+                /* @__PURE__ */ jsx4(
+                  TitleStyles,
+                  {
+                    as: headingLevel,
+                    "data-styled": styled2,
+                    ...typographyProps,
+                    children: title
+                  }
+                ),
                 rightSlot
               ] }),
               triggerIcon
@@ -462,7 +473,15 @@ var AccordionTrigger = ({
               /* @__PURE__ */ jsxs(FlexCenter, { children: [
                 /* @__PURE__ */ jsx4(Box, { mr: 300, children: triggerIcon }),
                 leftSlot,
-                /* @__PURE__ */ jsx4(TitleStyles, { "data-styled": styled2, ...typographyProps, children: title })
+                /* @__PURE__ */ jsx4(
+                  TitleStyles,
+                  {
+                    as: headingLevel,
+                    "data-styled": styled2,
+                    ...typographyProps,
+                    children: title
+                  }
+                )
               ] }),
               rightSlot
             ] })

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../../seeds-react-mixins/src/index.ts","../../src/AccordionContent.tsx","../../src/AccordionTrigger.tsx"],"sourcesContent":["import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement \| null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue: string \| string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" \| \"right\";\n type?: \"single\" \| \"multiple\";\n styled?: boolean;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu /\n items: TypeOverflowMenuItem[];\n /* Aria label for the overflow menu trigger button. Defaults to \"More actions\" /\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n","import as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionSystemProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const spacingProps = {\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\n\n const shouldRenderActionsBlock = Boolean(overflowMenu \|\| validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id \|\| `overflow-item-${index}`}\n id={id \|\| `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["React","styled","React","css","RadixAccordion","css","theme","jsx","jsx","styled","Icon","useContext","jsx","styled","useContext","fontSize","Icon","children"]}
1	+ {"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../../seeds-react-mixins/src/index.ts","../../src/AccordionContent.tsx","../../src/AccordionTrigger.tsx"],"sourcesContent":["import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement \| null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue: string \| string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" \| \"right\";\n type?: \"single\" \| \"multiple\";\n styled?: boolean;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu /\n items: TypeOverflowMenuItem[];\n /* Aria label for the overflow menu trigger button. Defaults to \"More actions\" /\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n\n/\n Type for valid heading levels\n /\nexport type TypeHeadingLevel = \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\";\n\n/\n Props for AccordionTrigger component\n \n @example\n * ```tsx\n * <AccordionTrigger\n * title=\"My Accordion Title\"\n * headingLevel=\"h2\"\n * />\n * ```\n /\nexport interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n /* The semantic heading level for the accordion title. Defaults to \"h4\" /\n headingLevel?: TypeHeadingLevel;\n}\n","import as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4.attrs<\n StyledAccordionProps & { as?: string }\n>((props) => ({\n as: props.as \|\| \"h4\",\n}))<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionTriggerProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n headingLevel = \"h4\",\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const spacingProps = {\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\n\n const shouldRenderActionsBlock = Boolean(overflowMenu \|\| validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id \|\| `overflow-item-${index}`}\n id={id \|\| `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["React","styled","React","css","RadixAccordion","css","theme","jsx","jsx","styled","Icon","useContext","jsx","styled","useContext","fontSize","Icon","children"]}

package/dist/index.d.mts CHANGED Viewed

@@ -35,6 +35,30 @@ interface TypeAccordionItemProps {
     overflowMenu?: TypeOverflowMenuConfig;
     value: string;
 }
+/**
+ * Type for valid heading levels
+ */
+type TypeHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/**
+ * Props for AccordionTrigger component
+ *
+ * @example
+ * ```tsx
+ * <AccordionTrigger
+ *   title="My Accordion Title"
+ *   headingLevel="h2"
+ * />
+ * ```
+ */
+interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
+    title: string;
+    leftSlot?: React$1.ReactNode;
+    relatedActions?: TypeRelatedAction[];
+    overflowMenu?: TypeOverflowMenuConfig;
+    rightSlot?: React$1.ReactNode;
+    /** The semantic heading level for the accordion title. Defaults to "h4" */
+    headingLevel?: TypeHeadingLevel;
+}
 declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition, triggerIcon, type, styled, }: TypeAccordionProps) => react_jsx_runtime.JSX.Element;
@@ -45,13 +69,6 @@ interface TypeAccordionContentProps extends TypeAccordionSystemProps {
 }
 declare const AccordionContent: ({ children, ...rest }: TypeAccordionContentProps) => react_jsx_runtime.JSX.Element;
-interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
-    title: string;
-    leftSlot?: React.ReactNode;
-    relatedActions?: TypeRelatedAction[];
-    overflowMenu?: TypeOverflowMenuConfig;
-    rightSlot?: React.ReactNode;
-}
-declare const AccordionTrigger: ({ children, leftSlot, relatedActions, overflowMenu, rightSlot, title, ...rest }: TypeAccordionTriggerProps) => react_jsx_runtime.JSX.Element;
+declare const AccordionTrigger: ({ children, leftSlot, relatedActions, overflowMenu, rightSlot, title, headingLevel, ...rest }: TypeAccordionTriggerProps) => react_jsx_runtime.JSX.Element;
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeAccordionTriggerProps, type TypeHeadingLevel, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };

package/dist/index.d.ts CHANGED Viewed

@@ -35,6 +35,30 @@ interface TypeAccordionItemProps {
     overflowMenu?: TypeOverflowMenuConfig;
     value: string;
 }
+/**
+ * Type for valid heading levels
+ */
+type TypeHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/**
+ * Props for AccordionTrigger component
+ *
+ * @example
+ * ```tsx
+ * <AccordionTrigger
+ *   title="My Accordion Title"
+ *   headingLevel="h2"
+ * />
+ * ```
+ */
+interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
+    title: string;
+    leftSlot?: React$1.ReactNode;
+    relatedActions?: TypeRelatedAction[];
+    overflowMenu?: TypeOverflowMenuConfig;
+    rightSlot?: React$1.ReactNode;
+    /** The semantic heading level for the accordion title. Defaults to "h4" */
+    headingLevel?: TypeHeadingLevel;
+}
 declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition, triggerIcon, type, styled, }: TypeAccordionProps) => react_jsx_runtime.JSX.Element;
@@ -45,13 +69,6 @@ interface TypeAccordionContentProps extends TypeAccordionSystemProps {
 }
 declare const AccordionContent: ({ children, ...rest }: TypeAccordionContentProps) => react_jsx_runtime.JSX.Element;
-interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
-    title: string;
-    leftSlot?: React.ReactNode;
-    relatedActions?: TypeRelatedAction[];
-    overflowMenu?: TypeOverflowMenuConfig;
-    rightSlot?: React.ReactNode;
-}
-declare const AccordionTrigger: ({ children, leftSlot, relatedActions, overflowMenu, rightSlot, title, ...rest }: TypeAccordionTriggerProps) => react_jsx_runtime.JSX.Element;
+declare const AccordionTrigger: ({ children, leftSlot, relatedActions, overflowMenu, rightSlot, title, headingLevel, ...rest }: TypeAccordionTriggerProps) => react_jsx_runtime.JSX.Element;
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeAccordionTriggerProps, type TypeHeadingLevel, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };

package/dist/index.js CHANGED Viewed

@@ -311,7 +311,9 @@ var TriggerContainer = import_styled_components2.default.div`
 	${import_seeds_react_system_props2.LAYOUT}
 	${import_seeds_react_system_props2.FLEXBOX}
 `;
-var TitleStyles = import_styled_components2.default.h4`
+var TitleStyles = import_styled_components2.default.h4.attrs((props) => ({
+  as: props.as || "h4"
+}))`
   margin: 0;
   font-weight: normal;
@@ -358,6 +360,7 @@ var AccordionTrigger = ({
   overflowMenu,
   rightSlot,
   title,
+  headingLevel = "h4",
   ...rest
 }) => {
   const { triggerIcon, triggerPosition, styled: styled2 } = (0, import_react3.useContext)(AccordionContext);
@@ -481,7 +484,15 @@ var AccordionTrigger = ({
             children: triggerPosition === "right" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(StyledAccordionArea, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FlexCenter, { children: [
                 leftSlot,
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TitleStyles, { "data-styled": styled2, ...typographyProps, children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  TitleStyles,
+                  {
+                    as: headingLevel,
+                    "data-styled": styled2,
+                    ...typographyProps,
+                    children: title
+                  }
+                ),
                 rightSlot
               ] }),
               triggerIcon
@@ -489,7 +500,15 @@ var AccordionTrigger = ({
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FlexCenter, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_box.Box, { mr: 300, children: triggerIcon }),
                 leftSlot,
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TitleStyles, { "data-styled": styled2, ...typographyProps, children: title })
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  TitleStyles,
+                  {
+                    as: headingLevel,
+                    "data-styled": styled2,
+                    ...typographyProps,
+                    children: title
+                  }
+                )
               ] }),
               rightSlot
             ] })

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/Accordion.tsx","../src/AccordionTypes.ts","../src/AccordionItem.tsx","../src/styles.ts","../../seeds-react-mixins/src/index.ts","../src/AccordionContent.tsx","../src/AccordionTrigger.tsx"],"sourcesContent":["import { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { AccordionContent } from \"./AccordionContent\";\nimport { AccordionTrigger } from \"./AccordionTrigger\";\n\nexport { Accordion, AccordionItem, AccordionContent, AccordionTrigger };\nexport * from \"./AccordionTypes\";\n","import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement \| null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue: string \| string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" \| \"right\";\n type?: \"single\" \| \"multiple\";\n styled?: boolean;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu /\n items: TypeOverflowMenuItem[];\n /* Aria label for the overflow menu trigger button. Defaults to \"More actions\" /\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n","import as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionSystemProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const spacingProps = {\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\n\n const shouldRenderActionsBlock = Boolean(overflowMenu \|\| validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id \|\| `overflow-item-${index}`}\n id={id \|\| `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["import_seeds_react_icon","styled","React","RadixAccordion","React","import_styled_components","RadixAccordion","import_seeds_react_system_props","styled","theme","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_jsx_runtime","styled","fontSize","children"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/Accordion.tsx","../src/AccordionTypes.ts","../src/AccordionItem.tsx","../src/styles.ts","../../seeds-react-mixins/src/index.ts","../src/AccordionContent.tsx","../src/AccordionTrigger.tsx"],"sourcesContent":["import { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { AccordionContent } from \"./AccordionContent\";\nimport { AccordionTrigger } from \"./AccordionTrigger\";\n\nexport { Accordion, AccordionItem, AccordionContent, AccordionTrigger };\nexport * from \"./AccordionTypes\";\n","import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement \| null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue: string \| string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" \| \"right\";\n type?: \"single\" \| \"multiple\";\n styled?: boolean;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu /\n items: TypeOverflowMenuItem[];\n /* Aria label for the overflow menu trigger button. Defaults to \"More actions\" /\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n\n/\n Type for valid heading levels\n /\nexport type TypeHeadingLevel = \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\";\n\n/\n Props for AccordionTrigger component\n \n @example\n * ```tsx\n * <AccordionTrigger\n * title=\"My Accordion Title\"\n * headingLevel=\"h2\"\n * />\n * ```\n /\nexport interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n /* The semantic heading level for the accordion title. Defaults to \"h4\" /\n headingLevel?: TypeHeadingLevel;\n}\n","import as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4.attrs<\n StyledAccordionProps & { as?: string }\n>((props) => ({\n as: props.as \|\| \"h4\",\n}))<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionTriggerProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n headingLevel = \"h4\",\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const spacingProps = {\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\n\n const shouldRenderActionsBlock = Boolean(overflowMenu \|\| validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id \|\| `overflow-item-${index}`}\n id={id \|\| `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["import_seeds_react_icon","styled","React","RadixAccordion","React","import_styled_components","RadixAccordion","import_seeds_react_system_props","styled","theme","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_jsx_runtime","styled","fontSize","children"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-accordion",
-  "version": "0.2.18",
+  "version": "0.3.2",
   "description": "Seeds React Accordion",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -19,12 +19,12 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
-    "@sproutsocial/seeds-react-theme": "^3.5.0",
+    "@sproutsocial/seeds-react-theme": "^3.5.1",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-box": "^1.1.12",
-    "@sproutsocial/seeds-react-button": "^1.3.16",
-    "@sproutsocial/seeds-react-icon": "^2.2.2",
-    "@sproutsocial/seeds-react-menu": "^1.8.1",
+    "@sproutsocial/seeds-react-box": "^1.1.13",
+    "@sproutsocial/seeds-react-button": "^1.3.18",
+    "@sproutsocial/seeds-react-icon": "^2.2.4",
+    "@sproutsocial/seeds-react-menu": "^1.8.4",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {

package/src/Accordion.stories.tsx CHANGED Viewed

@@ -618,3 +618,88 @@ export const OverflowMenu = {
     </Box>
   ),
 };
+export const CustomHeadingLevels = {
+  name: "Custom Heading Levels",
+  args: {
+    defaultValue: ["section-1"],
+    styled: true,
+  },
+  render: (args: any) => (
+    <Box p={300} width="100%" height="100%" bg="app.background.base">
+      <Accordion {...args}>
+        <AccordionItem value="section-1">
+          <AccordionTrigger title="Section with h2 Heading" headingLevel="h2" />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              This accordion item uses an h2 heading for semantic hierarchy.
+              Inspect the DOM to verify the heading level.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-2">
+          <AccordionTrigger title="Section with h3 Heading" headingLevel="h3" />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              This accordion item uses an h3 heading for semantic hierarchy.
+              Inspect the DOM to verify the heading level.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-3">
+          <AccordionTrigger
+            title="Section with h4 Heading (explicit)"
+            headingLevel="h4"
+          />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              This accordion item explicitly sets h4 as the heading level.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </Box>
+  ),
+};
+export const BackwardsCompatibility = {
+  name: "No headingLevel prop supplied",
+  args: {
+    defaultValue: ["section-1"],
+    styled: true,
+  },
+  render: (args: any) => (
+    <Box p={300} width="100%" height="100%" bg="app.background.base">
+      <Accordion {...args}>
+        <AccordionItem value="section-1">
+          <AccordionTrigger title="Default h4 Heading" />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              This accordion item does not specify a headingLevel prop, so it
+              defaults to h4 for backwards compatibility. Inspect the DOM to
+              verify it renders as an h4 element.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-2">
+          <AccordionTrigger
+            title="Another Default Accordion"
+            relatedActions={[
+              {
+                iconName: "alarm-clock",
+                onClick: () => alert("hello"),
+                "aria-label": "Set alarm",
+              },
+            ]}
+          />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              This verifies that existing accordions continue to work without
+              any changes needed. The heading defaults to h4.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </Box>
+  ),
+};

package/src/AccordionTrigger.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { StyledRadixAccordionTrigger, TitleStyles } from "./styles";
 import {
-  type TypeAccordionSystemProps,
+  type TypeAccordionTriggerProps,
   type TypeRelatedAction,
   type TypeOverflowMenuConfig,
 } from "./AccordionTypes";
@@ -20,14 +20,6 @@ import { AccordionContext } from "./Accordion";
 const MAX_RELATED_ACTIONS = 2;
-interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
-  title: string;
-  leftSlot?: React.ReactNode;
-  relatedActions?: TypeRelatedAction[];
-  overflowMenu?: TypeOverflowMenuConfig;
-  rightSlot?: React.ReactNode;
-}
 export const AccordionTrigger = ({
   children,
   leftSlot,
@@ -35,6 +27,7 @@ export const AccordionTrigger = ({
   overflowMenu,
   rightSlot,
   title,
+  headingLevel = "h4",
   ...rest
 }: TypeAccordionTriggerProps) => {
   const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);
@@ -180,7 +173,11 @@ export const AccordionTrigger = ({
           <StyledAccordionArea>
             <FlexCenter>
               {leftSlot}
-              <TitleStyles data-styled={styled} {...typographyProps}>
+              <TitleStyles
+                as={headingLevel}
+                data-styled={styled}
+                {...typographyProps}
+              >
                 {title}
               </TitleStyles>
               {rightSlot}
@@ -192,7 +189,11 @@ export const AccordionTrigger = ({
             <FlexCenter>
               <Box mr={300}>{triggerIcon}</Box>
               {leftSlot}
-              <TitleStyles data-styled={styled} {...typographyProps}>
+              <TitleStyles
+                as={headingLevel}
+                data-styled={styled}
+                {...typographyProps}
+              >
                 {title}
               </TitleStyles>
             </FlexCenter>

package/src/AccordionTypes.ts CHANGED Viewed

@@ -52,3 +52,29 @@ export interface TypeAccordionItemProps {
   overflowMenu?: TypeOverflowMenuConfig;
   value: string;
 }
+/**
+ * Type for valid heading levels
+ */
+export type TypeHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/**
+ * Props for AccordionTrigger component
+ *
+ * @example
+ * ```tsx
+ * <AccordionTrigger
+ *   title="My Accordion Title"
+ *   headingLevel="h2"
+ * />
+ * ```
+ */
+export interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
+  title: string;
+  leftSlot?: React.ReactNode;
+  relatedActions?: TypeRelatedAction[];
+  overflowMenu?: TypeOverflowMenuConfig;
+  rightSlot?: React.ReactNode;
+  /** The semantic heading level for the accordion title. Defaults to "h4" */
+  headingLevel?: TypeHeadingLevel;
+}

package/src/__tests__/accordion.test.tsx CHANGED Viewed

@@ -448,4 +448,89 @@ describe("Accordion", () => {
       // Verify component renders without errors when typeScale prop is provided
     });
   });
+  describe("headingLevel", () => {
+    it("renders h4 heading by default", () => {
+      const { container } = render(
+        <Accordion defaultValue={["item-1"]}>
+          <AccordionItem value="item-1">
+            <AccordionTrigger title="Test Title" />
+            <AccordionContent>Content</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+      const heading = container.querySelector("h4");
+      expect(heading).toBeInTheDocument();
+      expect(heading).toHaveTextContent("Test Title");
+    });
+    it("renders h2 heading when headingLevel is h2", () => {
+      const { container } = render(
+        <Accordion defaultValue={["item-1"]}>
+          <AccordionItem value="item-1">
+            <AccordionTrigger title="Test Title" headingLevel="h2" />
+            <AccordionContent>Content</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+      const heading = container.querySelector("h2");
+      expect(heading).toBeInTheDocument();
+      expect(heading).toHaveTextContent("Test Title");
+    });
+    it("renders h3 heading when headingLevel is h3", () => {
+      const { container } = render(
+        <Accordion defaultValue={["item-1"]}>
+          <AccordionItem value="item-1">
+            <AccordionTrigger title="Test Title" headingLevel="h3" />
+            <AccordionContent>Content</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+      const heading = container.querySelector("h3");
+      expect(heading).toBeInTheDocument();
+      expect(heading).toHaveTextContent("Test Title");
+    });
+    it("renders h1 heading when headingLevel is h1", () => {
+      const { container } = render(
+        <Accordion defaultValue={["item-1"]}>
+          <AccordionItem value="item-1">
+            <AccordionTrigger title="Test Title" headingLevel="h1" />
+            <AccordionContent>Content</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+      const heading = container.querySelector("h1");
+      expect(heading).toBeInTheDocument();
+      expect(heading).toHaveTextContent("Test Title");
+    });
+    it("renders correct heading level for multiple accordion items", () => {
+      const { container } = render(
+        <Accordion defaultValue={["item-1", "item-2"]}>
+          <AccordionItem value="item-1">
+            <AccordionTrigger title="First Item" headingLevel="h2" />
+            <AccordionContent>Content 1</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger title="Second Item" headingLevel="h3" />
+            <AccordionContent>Content 2</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+      const h2Heading = container.querySelector("h2");
+      const h3Heading = container.querySelector("h3");
+      expect(h2Heading).toBeInTheDocument();
+      expect(h2Heading).toHaveTextContent("First Item");
+      expect(h3Heading).toBeInTheDocument();
+      expect(h3Heading).toHaveTextContent("Second Item");
+    });
+  });
 });

package/src/styles.ts CHANGED Viewed

@@ -190,7 +190,11 @@ export const TriggerContainer = styled.div<StyledAccordionProps>`
 	${FLEXBOX}
 `;
-export const TitleStyles = styled.h4<StyledAccordionProps>`
+export const TitleStyles = styled.h4.attrs<
+  StyledAccordionProps & { as?: string }
+>((props) => ({
+  as: props.as || "h4",
+}))<StyledAccordionProps>`
   margin: 0;
   font-weight: normal;