src/components/patterns/accordion/accordion-item
// src/components/patterns/accordion/accordion-item/schema.yaml
$schema: http://json-schema.org/draft-07/schema
$id: /patterns/accordion/accordion-item
additionalProperties: false
type: object
required:
- title
- content
- id
properties:
title:
type: string
content:
type: string
format: html
description: patterns/*
id:
type: string
open:
type: boolean
// src/components/patterns/accordion/accordion-item/mocks.yaml
title: This is the title of an accordion item
id: this-is-the-title-of-an-accordion-item
content:
$tpl: patterns/rich-text
content: >-
<p>Aliquip quis culpa consequat officia officia esse eu veniam minim
deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation
cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip
nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id
cupidatat nisi veniam do irure consectetur irure et.</p><p>Eu reprehenderit
ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip
consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut
amet labore nulla enim culpa esse nisi consequat incididunt. Tempor
consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris
et nisi proident occaecat ipsum.</p>
$variants:
- $name: Long title
id: this-is-a-very-long-title
title: >-
This is a very long title of an accordion item that will propbably wrap
into a new line or maybe also not it depends
- $name: Open
open: true
// src/components/patterns/accordion/accordion-item/accordion-item.twig
<details class="AccordionItem"{% if open %} open{% endif %} id="{{ id }}">
<summary class="AccordionItem-title">
{{ title }}
<span class="AccordionItem-titleIcon">
{% include "@elements/icon/icon.twig" with {
name: "chevron"
} only %}
</span>
</summary>
<div class="AccordionItem-content">
{{ content|raw }}
</div>
</details>
default mock data
title: This is the title of an accordion item
id: this-is-the-title-of-an-accordion-item
content:
$tpl: patterns/rich-text
content: >-
<p>Aliquip quis culpa consequat officia officia esse eu veniam minim
deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation
cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip
nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id
cupidatat nisi veniam do irure consectetur irure et.</p><p>Eu reprehenderit
ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip
consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut
amet labore nulla enim culpa esse nisi consequat incididunt. Tempor
consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris
et nisi proident occaecat ipsum.</p>
Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.
Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.
Long title mock data
title: >-
This is a very long title of an accordion item that will propbably wrap into a
new line or maybe also not it depends
id: this-is-a-very-long-title
content:
$tpl: patterns/rich-text
content: >-
<p>Aliquip quis culpa consequat officia officia esse eu veniam minim
deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation
cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip
nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id
cupidatat nisi veniam do irure consectetur irure et.</p><p>Eu reprehenderit
ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip
consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut
amet labore nulla enim culpa esse nisi consequat incididunt. Tempor
consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris
et nisi proident occaecat ipsum.</p>
Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.
Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.
Open mock data
title: This is the title of an accordion item
id: this-is-the-title-of-an-accordion-item
content:
$tpl: patterns/rich-text
content: >-
<p>Aliquip quis culpa consequat officia officia esse eu veniam minim
deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation
cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip
nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id
cupidatat nisi veniam do irure consectetur irure et.</p><p>Eu reprehenderit
ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip
consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut
amet labore nulla enim culpa esse nisi consequat incididunt. Tempor
consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris
et nisi proident occaecat ipsum.</p>
open: true
Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.
Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.