import React from 'react'; import { StoryObj, Meta } from '@storybook/react'; import AUContentToggleComponent from '../src/components/AUContentToggleComponent'; import { ThemeWrapper } from './lib/helpers'; export default { title: 'Delphinus/Content Toggle', component: AUContentToggleComponent, argTypes: { toggled: { table: { disable: true, } }, children: { table: { disable: true, } }, classNames: { table: { disable: true, } }, onClick: { table: { disable: true, } }, beforeCallback: { table: { disable: true, } }, afterCallback: { table: { disable: true, } }, }, decorators: [ (Story, context) => ( {Story()} ) ], } as Meta; type Story = StoryObj; export const Hidden_when_loaded: Story = { args: { toggled: false, children: (
), }, render: (args) => , }; export const Shown_when_loaded: Story = { args: { toggled: true, children: (

The content that is toggled

Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.

), }, render: (args) => , };