import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
import * as AccordionStories from "./src/accordion.stories";
import packageInfo from "./package.json";
Accordion
Version {packageInfo.version}
Showcase
Properties
Installation
Via NPM
Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"
In MyApp.tsx
import "@purpurds/purpur/styles";
In MyComponent.tsx
Default
import { Accordion, AccordionItem } from "@purpurds/purpur";
export const MyComponent = () => {
return (
<Accordion title="Accordion title" titleVariant="title-100">
<AccordionItem title="Section title" value="1">
Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
rutrum nulla.
</AccordionItem>
<AccordionItem title="Section title" value="2">
Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
rutrum nulla.
</AccordionItem>
</Accordion>
);
};
Negative with custom content
export const MyComponent = () => {
return (
<Accordion negative title="Accordion title">
<AccordionItem title="Section title1">
Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
rutrum nulla.
<a href="https://telia.se">Link1</a>
</AccordionItem>
<AccordionItem title="Section title2">
Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
rutrum nulla.
<a href="https://telia.se">Link2</a>
</AccordionItem>
</Accordion>
);
};