@sproutsocial/seeds-react-accordion 0.4.2 → 0.4.7

package/src/AccordionTrigger.tsx

@@ -1,10 +1,5 @@
-import { StyledRadixAccordionTrigger, TitleStyles } from "./styles";
-import {
-  type TypeAccordionTriggerProps,
-  type TypeRelatedAction,
-  type TypeOverflowMenuConfig,
-} from "./AccordionTypes";
-import { FlexCenter, StyledAccordionArea, TriggerContainer } from "./styles";
+import { TriggerContainer } from "./styles";
+import { type TypeAccordionTriggerProps } from "./AccordionTypes";
 import { Box } from "@sproutsocial/seeds-react-box";
 import { Button } from "@sproutsocial/seeds-react-button";
 import { Icon } from "@sproutsocial/seeds-react-icon";
@@ -15,11 +10,20 @@ import {
   MenuGroup,
   MenuToggleButton,
 } from "@sproutsocial/seeds-react-menu";
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { AccordionContext } from "./Accordion";
+import { CollapsibleContentHeader } from "@sproutsocial/seeds-react-content-header";
+import * as RadixAccordion from "@radix-ui/react-accordion";
 
 const MAX_RELATED_ACTIONS = 2;
 
+// Wrapper to adapt RadixAccordion.Trigger to the ContentHeader trigger interface
+const AccordionTriggerWrapper = ({
+  children,
+}: {
+  children: React.ReactElement;
+}) => <RadixAccordion.Trigger asChild>{children}</RadixAccordion.Trigger>;
+
 export const AccordionTrigger = ({
   children,
   leftSlot,
@@ -61,37 +65,6 @@ export const AccordionTrigger = ({
     ...triggerProps
   } = rest;
 
-  const spacingProps = {
-    padding,
-    paddingBottom,
-    paddingTop,
-    paddingX,
-    paddingY,
-    paddingLeft,
-    paddingRight,
-    p,
-    pb,
-    pt,
-    pr,
-    pl,
-    px,
-    py,
-  };
-
-  // 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.
-
-  const typographyProps = Object.fromEntries(
-    Object.entries({
-      color,
-      fontFamily,
-      fontSize,
-      fontStyle,
-      fontWeight,
-      lineHeight,
-      textAlign,
-    }).filter(([_, value]) => value != null)
-  );
-
   const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);
 
   // Render overflow menu from config
@@ -156,6 +129,14 @@ export const AccordionTrigger = ({
       </Box>
     );
 
+  // Compose actions into a single ReactNode for ContentHeader
+  const renderedActions = shouldRenderActionsBlock ? (
+    <Box mr={300} display="flex">
+      {renderedOverflowMenu}
+      {renderedRelatedActions}
+    </Box>
+  ) : undefined;
+
   return (
     <TriggerContainer
       data-styled={styled}
@@ -164,49 +145,17 @@ export const AccordionTrigger = ({
       color={color}
       {...triggerProps}
     >
-      <StyledRadixAccordionTrigger
-        data-styled={styled}
-        color={color}
-        {...spacingProps}
-      >
-        {triggerPosition === "right" ? (
-          <StyledAccordionArea>
-            <FlexCenter>
-              {leftSlot}
-              <TitleStyles
-                as={headingLevel}
-                data-styled={styled}
-                {...typographyProps}
-              >
-                {title}
-              </TitleStyles>
-              {rightSlot}
-            </FlexCenter>
-            {triggerIcon}
-          </StyledAccordionArea>
-        ) : (
-          <StyledAccordionArea>
-            <FlexCenter>
-              <Box mr={300}>{triggerIcon}</Box>
-              {leftSlot}
-              <TitleStyles
-                as={headingLevel}
-                data-styled={styled}
-                {...typographyProps}
-              >
-                {title}
-              </TitleStyles>
-            </FlexCenter>
-            {rightSlot}
-          </StyledAccordionArea>
-        )}
-      </StyledRadixAccordionTrigger>
-      {shouldRenderActionsBlock && (
-        <Box mr={300} display="flex">
-          {renderedOverflowMenu}
-          {renderedRelatedActions}
-        </Box>
-      )}
+      <CollapsibleContentHeader
+        title={title}
+        headingLevel={headingLevel}
+        leftSlot={leftSlot}
+        rightSlot={rightSlot}
+        headerActions={renderedActions}
+        trigger={AccordionTriggerWrapper}
+        triggerPosition={triggerPosition as "left" | "right"}
+        triggerIcon={triggerIcon}
+        bordered={false}
+      />
     </TriggerContainer>
   );
 };

package/src/AccordionTypes.ts

@@ -9,6 +9,7 @@ import {
 } from "@sproutsocial/seeds-react-system-props";
 import { type TypeIconName } from "@sproutsocial/seeds-react-icon";
 import { type TypeMenuItemProps } from "@sproutsocial/seeds-react-menu";
+import { type TypeHeadingLevel } from "@sproutsocial/seeds-react-content-header";
 
 export interface TypeAccordionSystemProps
   extends Omit<React.ComponentPropsWithoutRef<"div">, "color">,
@@ -57,11 +58,6 @@ export interface TypeAccordionItemProps {
   value: string;
 }
 
-/**
- * Type for valid heading levels
- */
-export type TypeHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-
 /**
  * Props for AccordionTrigger component
  *

package/src/styles.ts

@@ -1,7 +1,5 @@
-import * as React from "react";
 import styled, { css } from "styled-components";
 import * as RadixAccordion from "@radix-ui/react-accordion";
-import { fontSize } from "styled-system";
 import {
   BORDER,
   COMMON,
@@ -9,7 +7,6 @@ import {
   LAYOUT,
   TYPOGRAPHY,
 } from "@sproutsocial/seeds-react-system-props";
-import { focusRing } from "@sproutsocial/seeds-react-mixins";
 import { type TypeAccordionSystemProps } from "./AccordionTypes";
 
 interface StyledAccordionProps extends TypeAccordionSystemProps {
@@ -38,45 +35,6 @@ const animations = css`
   }
 `;
 
-export const StyledRadixAccordionTrigger = styled(
-  RadixAccordion.Trigger as React.ComponentType<
-    Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, "color">
-  >
-)<StyledAccordionProps>`
-  padding: 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  background: transparent;
-  color: ${({ theme }) => theme.colors.text.body};
-  ${({ theme }) => theme.typography[200]};
-
-  .triggerIcon {
-    transition: transform 300ms ease-in-out;
-  }
-
-  &[data-state="open"] {
-    .triggerIcon {
-      transform: rotate(-180deg);
-    }
-  }
-
-  &[data-styled] {
-    padding: ${({ theme }) => theme.space[400]};
-  }
-
-  &:focus {
-    ${focusRing}
-  }
-
-  ${COMMON}
-  ${TYPOGRAPHY}
-`;
-
 export const StyledRadixAccordionContent = styled(
   RadixAccordion.Content
 )<StyledAccordionProps>`
@@ -109,17 +67,6 @@ export const StyledRadixAccordionContent = styled(
   }
 `;
 
-export const StyledAccordionArea = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-`;
-export const FlexCenter = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
 export const ContentContainer = styled.div<StyledAccordionProps>`
   color: ${({ theme }) => theme.colors.text.body};
   background: transparent;
@@ -147,6 +94,32 @@ export const TriggerContainer = styled.div<StyledAccordionProps>`
   display: flex;
   align-items: center;
   color: ${({ theme }) => theme.colors.text.body};
+  ${({ theme }) => theme.typography[200]};
+
+  /* Override Text.Headline styles to match original accordion trigger typography */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: normal;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  &[data-styled="true"] {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-weight: ${({ theme }) => theme.fontWeights.semibold};
+      color: ${({ theme }) => theme.colors.text.headline};
+    }
+  }
 
   ${({ $styled, theme }) =>
     $styled &&
@@ -189,22 +162,3 @@ export const TriggerContainer = styled.div<StyledAccordionProps>`
 	${LAYOUT}
 	${FLEXBOX}
 `;
-
-export const TitleStyles = styled.h4.attrs<
-  StyledAccordionProps & { as?: string }
->((props) => ({
-  as: props.as || "h4",
-}))<StyledAccordionProps>`
-  margin: 0;
-  font-weight: normal;
-
-  &[data-styled="true"] {
-    font-size: ${({ theme }) => theme.fontSizes[200]};
-    font-weight: ${({ theme }) => theme.fontWeights.semibold};
-    color: ${({ theme }) => theme.colors.text.headline};
-  }
-
-  ${COMMON}
-  ${TYPOGRAPHY}
-  ${fontSize}
-`;