packages/ui/src/components/sticky-accordion-header.stories.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

// @ts-nocheck
import { Accordion } from "./accordion"
import * as mod from "./sticky-accordion-header"

const docs = `### Overview
Sticky accordion header wrapper for persistent section labels.

Use only inside \`Accordion.Item\` with \`Accordion.Trigger\`.

### API
- Accepts standard header props and children.

### Variants and states
- Inherits accordion states.

### Behavior
- Renders inside an Accordion item header.

### Accessibility
- TODO: confirm semantics from Accordion.Header usage.

### Theming/tokens
- Uses \`data-component="sticky-accordion-header"\`.

`

export default {
  title: "UI/StickyAccordionHeader",
  id: "components-sticky-accordion-header",
  component: mod.StickyAccordionHeader,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component: docs,
      },
    },
  },
}

export const Basic = {
  render: () => (
    <Accordion value="first">
      <Accordion.Item value="first">
        <mod.StickyAccordionHeader>
          <Accordion.Trigger>Sticky header</Accordion.Trigger>
        </mod.StickyAccordionHeader>
        <Accordion.Content>
          <div style={{ color: "var(--text-weak)", padding: "8px 0" }}>Accordion content.</div>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  ),
}