docs(RAC): add tailwind starter for Disclosure and DisclosureGroup (#7166)

* add tailwind starter for Disclosure and DisclosureGroup

* fix focus ring border radius

* update disabled chevron style

* fix focus ring in group

* cleanup variants and styles

* fix text color

* fix padding

* move DisclosureGroup to it's own story

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

starters/tailwind/src/Disclosure.tsx

@@ -0,0 +1,115 @@
+import React, { useContext } from "react";
+import {
+  UNSTABLE_Disclosure as AriaDisclosure,
+  UNSTABLE_DisclosureGroup as AriaDisclosureGroup,
+  DisclosureProps as AriaDisclosureProps,
+  DisclosureGroupProps as AriaDisclosureGroupProps,
+  UNSTABLE_DisclosurePanel as AriaDisclosurePanel,
+  DisclosurePanelProps as AriaDisclosurePanelProps,
+  composeRenderProps,
+  Heading,
+  Button,
+  DisclosureStateContext,
+} from "react-aria-components";
+import { tv } from "tailwind-variants";
+import { ChevronRight } from "lucide-react";
+import { composeTailwindRenderProps, focusRing } from "./utils";
+import { DisclosureGroupStateContext } from "react-aria-components";
+
+const disclosure = tv({
+  base: "group min-w-64 border dark:border-zinc-600 rounded-lg text-gray-900 dark:text-zinc-200",
+  variants: {
+    isInGroup: {
+      true: "border-0 border-b last:border-b-0 rounded-b-none last:rounded-b-lg",
+    }
+  }
+});
+
+const disclosureButton = tv({
+  extend: focusRing,
+  base: "rounded-lg flex gap-2 items-center w-full text-start p-2 cursor-default",
+  variants: {
+    isDisabled: {
+      true: 'text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText]'
+    },
+    isInGroup: {
+      true: "-outline-offset-2 rounded-none group-first:rounded-t-lg group-last:rounded-b-lg",
+    }
+  }
+});
+
+const chevron = tv({
+  base: "w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200 ease-in-out",
+  variants: {
+    isExpanded: {
+      true: "transform rotate-90",
+    },
+    isDisabled: {
+      true: 'text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText]'
+    }
+  }
+});
+
+export interface DisclosureProps extends AriaDisclosureProps {
+  children: React.ReactNode;
+}
+
+export function Disclosure({ children, ...props }: DisclosureProps) {
+  let isInGroup = useContext(DisclosureGroupStateContext) !== null;
+  return (
+    <AriaDisclosure
+      {...props}
+      className={composeRenderProps(props.className, (className, renderProps) => disclosure({ ...renderProps, isInGroup, className }))}
+    >
+      {children}
+    </AriaDisclosure>
+  );
+}
+
+export interface DisclosureHeaderProps {
+  children: React.ReactNode;
+}
+
+export function DisclosureHeader({ children }: DisclosureHeaderProps) {
+  let { isExpanded } = useContext(DisclosureStateContext)!;
+  let isInGroup = useContext(DisclosureGroupStateContext) !== null;
+  return (
+    <Heading className="text-lg font-semibold">
+      <Button
+        slot="trigger"
+        className={(renderProps) => disclosureButton({ ...renderProps, isInGroup })}
+      >
+        {({isDisabled}) => (
+          <>
+            <ChevronRight aria-hidden className={chevron({ isExpanded, isDisabled })} />
+            {children}
+          </>
+        )}
+      </Button>
+    </Heading>
+  );
+}
+
+export interface DisclosurePanelProps extends AriaDisclosurePanelProps {
+  children: React.ReactNode;
+}
+
+export function DisclosurePanel({ children, ...props }: DisclosurePanelProps) {
+  return (
+    <AriaDisclosurePanel {...props} className={composeTailwindRenderProps(props.className, 'group-data-[expanded]:px-4 group-data-[expanded]:py-2')}>
+      {children}
+    </AriaDisclosurePanel>
+  );
+}
+
+export interface DisclosureGroupProps extends AriaDisclosureGroupProps {
+  children: React.ReactNode;
+}
+
+export function DisclosureGroup({ children, ...props }: DisclosureGroupProps) {
+  return (
+    <AriaDisclosureGroup {...props} className={composeTailwindRenderProps(props.className, 'border dark:border-zinc-600 rounded-lg')}>
+      {children}
+    </AriaDisclosureGroup>
+  );
+}

starters/tailwind/stories/Disclosure.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+import {
+  Disclosure,
+  DisclosureHeader,
+  DisclosurePanel,
+} from "../src/Disclosure";
+
+const meta: Meta<typeof Disclosure> = {
+  component: Disclosure,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+export const Example = (args: any) => (
+  <Disclosure {...args}>
+    <DisclosureHeader>Files</DisclosureHeader>
+    <DisclosurePanel>Files content</DisclosurePanel>
+  </Disclosure>
+);

starters/tailwind/stories/DisclosureGroup.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+import {
+  Disclosure,
+  DisclosureHeader,
+  DisclosurePanel,
+  DisclosureGroup,
+} from "../src/Disclosure";
+
+const meta: Meta<typeof DisclosureGroup> = {
+  component: DisclosureGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+export const Example = (args: any) => (
+  <DisclosureGroup {...args}>
+    <Disclosure>
+      <DisclosureHeader>Files</DisclosureHeader>
+      <DisclosurePanel>Files content</DisclosurePanel>
+    </Disclosure>
+    <Disclosure>
+      <DisclosureHeader>Images</DisclosureHeader>
+      <DisclosurePanel>Images content</DisclosurePanel>
+    </Disclosure>
+    <Disclosure>
+      <DisclosureHeader>Documents</DisclosureHeader>
+      <DisclosurePanel>Documents content</DisclosurePanel>
+    </Disclosure>
+  </DisclosureGroup>
+);
+