POC Radix UI

Accordion.tsx

import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { FunctionComponent } from "react";

interface AccordionProps extends AccordionPrimitive.AccordionSingleProps {}

export const Accordion: FunctionComponent<AccordionProps> = (props) => (
  <AccordionPrimitive.Accordion {...props} />
);

export const AccordionItem = AccordionPrimitive.AccordionItem;

interface AccordionTriggerProps
  extends AccordionPrimitive.AccordionTriggerProps {
  variant?: "primary" | "secondary";
}

export const AccordionTrigger: FunctionComponent<AccordionTriggerProps> = ({
  variant = "primary",
  children,
  ...props
}) => (
  <AccordionPrimitive.AccordionTrigger
    {...props}
    style={{
      fontSize: "0.83em",
      fontWeight: "bold",
      width: "100%",
      textAlign: "left",
    }}
    className={`cf-bg-transparent ${getVariantClass(variant)}`}
  >
    <div style={{ margin: "1.67em 0" }}>{children}</div>
  </AccordionPrimitive.AccordionTrigger>
);

const getVariantClass = (variant: "primary" | "secondary"): string => {
  if (variant === "secondary") {
    return "cf-px-6 cf-py-2 cf-rounded-t-md cf-bg-gray-100";
  } else {
    return "cf-p-4";
  }
};

export const AccordionContent: FunctionComponent<
  AccordionPrimitive.AccordionContentProps
> = ({ className = "", ...props }) => (
  <AccordionPrimitive.AccordionContent
    {...props}
    className={`cf-pl-6 cf-pr-14 cf-pb-4 ${className}`}
  />
);

App.tsx

import "@claimsforce/react-ui/tailwind.min.css";

import "./App.css";

import { Accordion as DSAccordion } from "@claimsforce/react-ui/Accordion";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "./Accordion";

function App() {
  return (
    <main
      style={{
        padding: "1rem",
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: "1rem",
      }}
    >
      <div style={{ border: "1px solid" }}>
        <DSAccordion title="Some title" defaultOpen>
          {(setOpen) => (
            <DSAccordion.Body>
              <p>Some content</p>
            </DSAccordion.Body>
          )}
        </DSAccordion>

        <DSAccordion title="2nd accordion" variant="secondary">
          {(setOpen) => (
            <DSAccordion.Body>
              <p>Some content</p>
            </DSAccordion.Body>
          )}
        </DSAccordion>
      </div>
      <div style={{ border: "1px solid" }}>
        <Accordion type="single" defaultValue="item-1" collapsible>
          <AccordionItem value="item-1">
            <AccordionTrigger>Some title</AccordionTrigger>
            <AccordionContent>
              <p>Some content</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
        <Accordion type="single" collapsible>
          <AccordionItem value="item-1">
            <AccordionTrigger variant="secondary">
              2nd accordion
            </AccordionTrigger>
            <AccordionContent>
              <p>Some content</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </main>
  );
}

export default App;