@purpurds/accordion

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>
  );
};