@luscii-healthtech/web-ui 46.4.1 → 46.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { type StoryObj } from "@storybook/react-vite";
|
|
2
|
+
/**
|
|
3
|
+
* This recipe demonstrates how to build accordion list interfaces
|
|
4
|
+
* using composition with Card, UnorderedList, and DetailsDisclosure
|
|
5
|
+
* instead of the pre-configured AccordionList component.
|
|
6
|
+
*
|
|
7
|
+
* This approach gives you complete control over the structure,
|
|
8
|
+
* styling, and behavior of your accordion lists.
|
|
9
|
+
*/
|
|
10
|
+
declare const meta: {
|
|
11
|
+
title: string;
|
|
12
|
+
parameters: {
|
|
13
|
+
layout: string;
|
|
14
|
+
docs: {
|
|
15
|
+
description: {
|
|
16
|
+
component: string;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
export default meta;
|
|
22
|
+
type Story = StoryObj<typeof meta>;
|
|
23
|
+
/**
|
|
24
|
+
* The simplest accordion: a Card containing DetailsDisclosure components.
|
|
25
|
+
* Each disclosure contains an UnorderedList of items.
|
|
26
|
+
*/
|
|
27
|
+
export declare const BasicAccordion: Story;
|
|
28
|
+
/**
|
|
29
|
+
* Use the `name` attribute to make only one section open at a time.
|
|
30
|
+
* This creates the classic accordion behavior where opening one section
|
|
31
|
+
* automatically closes others.
|
|
32
|
+
*/
|
|
33
|
+
export declare const SingleOpenAccordion: Story;
|
|
34
|
+
/**
|
|
35
|
+
* Add a title bar and action buttons to create a complete accordion list
|
|
36
|
+
* interface with header actions.
|
|
37
|
+
*/
|
|
38
|
+
export declare const AccordionWithHeader: Story;
|
|
39
|
+
/**
|
|
40
|
+
* Add icons to accordion sections and list items for better visual hierarchy.
|
|
41
|
+
*/
|
|
42
|
+
export declare const AccordionWithIcons: Story;
|
|
43
|
+
/**
|
|
44
|
+
* Make list items interactive with click handlers and action buttons.
|
|
45
|
+
* Combine accordion behavior with interactive list items.
|
|
46
|
+
*/
|
|
47
|
+
export declare const InteractiveAccordion: Story;
|
|
48
|
+
/**
|
|
49
|
+
* Create a complex nested accordion where disclosure sections can contain
|
|
50
|
+
* other disclosure sections, creating multiple levels of hierarchy.
|
|
51
|
+
*/
|
|
52
|
+
export declare const NestedAccordion: Story;
|
|
53
|
+
/**
|
|
54
|
+
* Combine all patterns: header with actions, icons, badges,
|
|
55
|
+
* interactive items, and controlled open states.
|
|
56
|
+
* This demonstrates the full flexibility of the compositional approach.
|
|
57
|
+
*/
|
|
58
|
+
export declare const CompleteExample: Story;
|