import { Meta, ArgTypes, Story } from "@storybook/addon-docs/blocks";
import { Accordion } from "..";
import * as AccordionStories from "./Accordion.stories";

<Meta of={AccordionStories} />

# Accordion

Accordion selectively shows or hides content when clicked by a user. It can contain practically any content. The header (link) can be placed above or below content; in the latter case it will move as the content expands.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Accordion } from "@simplybusiness/mobius";
```

## Examples

### Default

<Story of={AccordionStories.Default} />

{/* prettier-ignore */}
```jsx
import { Accordion } from "@simplybusiness/mobius";

<Accordion showText="See more" hideText="See less">
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus
    deleniti architecto
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus
    deleniti architecto
  </p>
</Accordion>
```

### Start expanded

<Story of={AccordionStories.StartExpanded} />

{/* prettier-ignore */}
```jsx
import { Accordion } from "@simplybusiness/mobius";

<Accordion
  showText="See more"
  hideText="See less"
  headerPosition="bottom"
  startOpen={true}
>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus
    deleniti architecto
  </p>
</Accordion>
```

### Bottom Header

<Story of={AccordionStories.BottomHeader} />

{/* prettier-ignore */}
```jsx
import { Accordion } from "@simplybusiness/mobius";

<Accordion showText="See more" hideText="See less" headerPosition="bottom">
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus
    deleniti architecto
  </p>
</Accordion>
```

### Complex Content

<Story of={AccordionStories.ComplexContent} />

{/* prettier-ignore */}
```jsx
import { Accordion, SegmentGroup, Segment } from "@simplybusiness/mobius";

<Accordion showText="See more" hideText="See less">
  <SegmentGroup>
    <Segment>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
      repellendus deleniti architecto
    </Segment>
    <Segment>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
      repellendus deleniti architecto
    </Segment>
  </SegmentGroup>
</Accordion>
```


## Props

<ArgTypes of={Accordion} />

## Component HTML Structure and Class names

The following HTML is rendered for an Accordion:

```html
<div class="mobius-accordion --should-animate --is-open">
  <div
    class="mobius-accordion__content-container --is-open"
    aria-hidden="false"
  >
    <div class="mobius-accordion__content --is-open">{children}</div>
  </div>
  <div
    class="mobius-accordion__link --is-open"
    role="button"
    tabindex="0"
    aria-expanded="true"
  >
    <span class="mobius-accordion__link-text">See less</span>
    <svg class="mobius-accordion__link-icon --is-open">{icon}</svg>
  </div>
</div>
```

## CSS Token for Icon Positioning

The Accordion component uses a single CSS token to control the positioning of the chevron icon. This allows themes to easily customize whether the icon appears on the left or right side of the text without modifying the component code.

### Available Token

- `--mobius-accordion-icon-position`: Controls icon positioning (default: `2` for right side, use `1` for left side)

The system automatically calculates:
- Flexbox order for both icon and text
- Appropriate margins for spacing

### Theme Customization Example

To position the icon on the left side in a theme, simply override the single token:

```css
:root {
  --mobius-accordion-icon-position: 1; /* Icon on the left */
}
```

To position the icon on the right side (default):

```css
:root {
  --mobius-accordion-icon-position: 2; /* Icon on the right */
}
```
