[docs] Content: Accordion, Alert Dialog, Checkbox, Checkbox Group her…

…o demos (#892)
mui · Nov 28, 2024 · ca544f1 · ca544f1
1 parent 192a8a9
commit ca544f1
Show file tree

Hide file tree

Showing 26 changed files with 742 additions and 29 deletions.
diff --git a/docs/src/app/new/(content)/components/accordion/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/accordion/demos/hero/css-modules/index.module.css
@@ -0,0 +1,71 @@
+.Root {
+  box-sizing: border-box;
+  display: flex;
+  min-height: 12rem;
+  width: 24rem;
+  max-width: calc(100vw - 8rem);
+  flex-direction: column;
+  justify-content: center;
+}
+
+.Item {
+  border-bottom: 1px solid var(--color-gray-200);
+}
+
+.Header {
+  margin: 0;
+}
+
+.Trigger {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  font: inherit;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  letter-spacing: 0em;
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+  }
+}
+
+.TriggerIcon {
+  box-sizing: border-box;
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-right: 0.5rem;
+  transition: transform 150ms ease-out;
+
+  [data-panel-open] > & {
+    transform: rotate(45deg) scale(1.1);
+  }
+}
+
+.Panel {
+  box-sizing: border-box;
+  height: var(--accordion-panel-height);
+  overflow: hidden;
+  color: var(--color-gray-600);
+  font-size: 0.9375rem;
+  line-height: 1.375rem;
+  letter-spacing: 0.001em;
+  transition: height 150ms ease-out;
+
+  &[data-entering],
+  &[data-exiting] {
+    height: 0;
+  }
+}
+
+.Content {
+  padding-bottom: 0.5rem;
+}
diff --git a/docs/src/app/new/(content)/components/accordion/demos/hero/css-modules/index.tsx b/docs/src/app/new/(content)/components/accordion/demos/hero/css-modules/index.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Accordion } from '@base-ui-components/react/accordion';
+import styles from './index.module.css';
+
+export default function ExampleAccordion() {
+  return (
+    <Accordion.Root className={styles.Root}>
+      <Accordion.Item className={styles.Item}>
+        <Accordion.Header className={styles.Header}>
+          <Accordion.Trigger className={styles.Trigger}>
+            What is Base UI?
+            <PlusIcon className={styles.TriggerIcon} />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={styles.Panel}>
+          <div className={styles.Content}>
+            Base UI is a library of high-quality, accessible, unstyled React
+            components for design systems and web apps.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className={styles.Item}>
+        <Accordion.Header className={styles.Header}>
+          <Accordion.Trigger className={styles.Trigger}>
+            How do I get started?
+            <PlusIcon className={styles.TriggerIcon} />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={styles.Panel}>
+          <div className={styles.Content}>
+            Head to the “Quick start” guide in the docs. If you’ve used unstyled
+            libraries before, you’ll feel right at home.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className={styles.Item}>
+        <Accordion.Header className={styles.Header}>
+          <Accordion.Trigger className={styles.Trigger}>
+            Can I use it for my next project?
+            <PlusIcon className={styles.TriggerIcon} />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={styles.Panel}>
+          <div className={styles.Content}>
+            Of course! Base UI is free and open source.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 12 12" fill="currentcolor" {...props}>
+      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/new/(content)/components/accordion/demos/hero/index.ts b/docs/src/app/new/(content)/components/accordion/demos/hero/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';
diff --git a/docs/src/app/new/(content)/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/accordion/demos/hero/tailwind/index.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Accordion } from '@base-ui-components/react/accordion';
+
+export default function ExampleAccordion() {
+  return (
+    <Accordion.Root className="flex min-h-48 w-96 max-w-[calc(100vw-8rem)] flex-col justify-center">
+      <Accordion.Item className="border-b border-gray-200">
+        <Accordion.Header>
+          <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between py-2 font-medium focus-visible:outline-2 focus-visible:outline-blue">
+            What is Base UI?
+            <PlusIcon className="mr-2 size-3 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-entering],[data-exiting]]:h-0">
+          <div className="pb-3">
+            Base UI is a library of high-quality, accessible, unstyled React
+            components for design systems and web apps.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className="border-b border-gray-200">
+        <Accordion.Header>
+          <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between py-2 font-medium focus-visible:outline-2 focus-visible:outline-blue">
+            How do I get started?
+            <PlusIcon className="mr-2 size-3 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-entering],[data-exiting]]:h-0">
+          <div className="pb-3">
+            Head to the “Quick start” guide in the docs. If you’ve used unstyled
+            libraries before, you’ll feel right at home.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className="border-b border-gray-200">
+        <Accordion.Header>
+          <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between py-2 font-medium focus-visible:outline-2 focus-visible:outline-blue">
+            Can I use it for my next project?
+            <PlusIcon className="mr-2 size-3 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-entering],[data-exiting]]:h-0">
+          <div className="pb-3">Of course! Base UI is free and open source.</div>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 12 12" fill="currentcolor" {...props}>
+      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/new/(content)/components/accordion/page.mdx b/docs/src/app/new/(content)/components/accordion/page.mdx
@@ -0,0 +1,25 @@
+# Accordion
+
+<Subtitle>A set of collapsible panels with headings.</Subtitle>
+<Meta name="description" content="A high-quality, unstyled React accordion component." />
+
+<Demo path="./demos/hero" />
+
+## API reference
+
+Import the component and place its parts the following way:
+
+```jsx title="Anatomy"
+import { Accordion } from '@base-ui-components/react/accordion';
+
+<Accordion.Root>
+  <Accordion.Item>
+    <Accordion.Header>
+      <Accordion.Trigger />
+    </Accordion.Header>
+    <Accordion.Panel />
+  </Accordion.Item>
+</Accordion.Root>;
+```
+
+<Reference component="Accordion" parts="Root, Item, Header, Trigger, Panel" />
diff --git a/docs/src/app/new/(content)/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -0,0 +1,93 @@
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  padding: 0.5rem 0.875rem;
+  margin: 0;
+  border: none;
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font: inherit;
+  font-weight: 500;
+  color: var(--color-gray-900);
+  outline: 1px solid var(--color-gray-200);
+  user-select: none;
+
+  &[data-color='red'] {
+    color: var(--color-red);
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+}
+
+.Backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: black;
+  opacity: 0.2;
+  transition: opacity 150ms;
+
+  @media (prefers-color-scheme: dark) {
+    opacity: 0.7;
+  }
+
+  &[data-entering],
+  &[data-exiting] {
+    opacity: 0;
+  }
+}
+
+.Popup {
+  box-sizing: border-box;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24rem;
+  max-width: calc(100vw - 3rem);
+  margin-top: -2rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-gray-300);
+  background-color: var(--color-gray-50);
+  color: var(--color-gray-950);
+  outline: 0;
+  transition: all 150ms;
+
+  &[data-entering],
+  &[data-exiting] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+}
+
+.Title {
+  margin-top: -0.375rem;
+  margin-bottom: 0.25rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.0025em;
+  font-weight: 500;
+}
+
+.Description {
+  margin: 0 0 1.5rem;
+  color: var(--color-gray-600);
+}
+
+.Actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
diff --git a/docs/src/app/new/(content)/components/alert-dialog/demos/hero/css-modules/index.tsx b/docs/src/app/new/(content)/components/alert-dialog/demos/hero/css-modules/index.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { AlertDialog } from '@base-ui-components/react/alert-dialog';
+import styles from './index.module.css';
+
+export default function ExampleAlertDialog() {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger data-color="red" className={styles.Button}>
+        Discard draft
+      </AlertDialog.Trigger>
+      <AlertDialog.Backdrop className={styles.Backdrop} />
+      <AlertDialog.Popup className={styles.Popup}>
+        <AlertDialog.Title className={styles.Title}>
+          Discard draft?
+        </AlertDialog.Title>
+        <AlertDialog.Description className={styles.Description}>
+          You can't undo this action.
+        </AlertDialog.Description>
+        <div className={styles.Actions}>
+          <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
+          <AlertDialog.Close data-color="red" className={styles.Button}>
+            Discard
+          </AlertDialog.Close>
+        </div>
+      </AlertDialog.Popup>
+    </AlertDialog.Root>
+  );
+}
diff --git a/docs/src/app/new/(content)/components/alert-dialog/demos/hero/index.ts b/docs/src/app/new/(content)/components/alert-dialog/demos/hero/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';
diff --git a/docs/src/app/new/(content)/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { AlertDialog } from '@base-ui-components/react/alert-dialog';
+
+export default function ExampleAlertDialog() {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger className="flex rounded-md bg-gray-50 px-3.5 py-2 font-medium text-red outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue active:bg-gray-100">
+        Discard draft
+      </AlertDialog.Trigger>
+      <AlertDialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 dark:opacity-70 [[data-entering],[data-exiting]]:opacity-0" />
+      <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-1/2 rounded-lg border border-gray-300 bg-gray-50 p-6 text-gray-900 outline-0 transition-all duration-150 [[data-entering],[data-exiting]]:scale-90 [[data-entering],[data-exiting]]:opacity-0">
+        <AlertDialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
+          Discard draft?
+        </AlertDialog.Title>
+        <AlertDialog.Description className="mb-6 text-gray-600">
+          You can’t undo this action.
+        </AlertDialog.Description>
+        <div className="flex justify-end gap-4">
+          <AlertDialog.Close className="flex rounded-md bg-gray-50 px-3.5 py-2 font-medium text-gray-900 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue active:bg-gray-100">
+            Cancel
+          </AlertDialog.Close>
+          <AlertDialog.Close className="flex rounded-md bg-gray-50 px-3.5 py-2 font-medium text-red outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue active:bg-gray-100">
+            Discard
+          </AlertDialog.Close>
+        </div>
+      </AlertDialog.Popup>
+    </AlertDialog.Root>
+  );
+}