import { Layout, Playground, Attributes } from 'lib/components'
import { Collapse, Spacer, Text } from 'components'

export const meta = {
  title: 'collapse',
  group: 'Surfaces',
}

## Collapse

Display large amounts of text in collapsible sections. Commonly referred to as an accordion.

<Playground
  scope={{ Collapse, Text }}
  desc="Show title only by default."
  code={`
<Collapse.Group>
  <Collapse title="Question A">
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
  </Collapse>
  <Collapse title="Question B">
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
  </Collapse>
</Collapse.Group>
`}
/>

<Playground
  title="Expanded"
  desc="Specify what to display first."
  scope={{ Collapse, Text }}
  code={`
<Collapse.Group>
  <Collapse title="Question A" initialVisible>
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
  </Collapse>
  <Collapse title="Question B">
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
  </Collapse>
</Collapse.Group>
`}
/>

<Playground
  title="Subtitle"
  desc="Add text or components as subtitle."
  scope={{ Collapse, Text }}
  code={`
<Collapse.Group>
  <Collapse title="Question A" subtitle="More description about Question A">
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
  </Collapse>
  <Collapse title="Question B" subtitle={<>More description about <Text b>Question A</Text></>}>
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
  </Collapse>
</Collapse.Group>
`}
/>

<Playground
  title="Shadow"
  desc="Highlight importance at a higher level."
  scope={{ Collapse, Text }}
  code={`
<Collapse shadow title="Question A" subtitle="More description about Question A">
  <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
</Collapse>
`}
/>

<Attributes edit="/pages/en-us/components/collapse.mdx">
<Attributes.Title>Collapse.Props</Attributes.Title>

| Attribute           | Description      | Type             | Accepted values                  | Default |
| ------------------- | ---------------- | ---------------- | -------------------------------- | ------- |
| **title**(required) | collapse title   | `string`         | -                                | -       |
| **subtitle**        | description      | `string`         | -                                | -       |
| **initialVisible**  | initial expanded | `boolean`        | -                                | `false` |
| **shadow**          | show shadow card | `boolean`        | -                                | `false` |
| ...                 | native props     | `HTMLAttributes` | `'id', 'name', 'className', ...` | -       |

<Attributes.Title>Collapse.Group.Props</Attributes.Title>

| Attribute     | Description    | Type             | Accepted values                  | Default |
| ------------- | -------------- | ---------------- | -------------------------------- | ------- |
| **accordion** | accordion mode | `boolean`        | -                                | `true`  |
| ...           | native props   | `HTMLAttributes` | `'id', 'name', 'className', ...` | -       |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
