src/components/elements/info-box// src/components/elements/info-box/schema.yaml
$schema: http://json-schema.org/draft-07/schema
$id: /elements/info-box
additionalProperties: false
required:
- text
- type
properties:
text:
type: string
type:
type: string
enum:
- info
- note
- warning
- error
classes:
type: array
items:
type: string
// src/components/elements/info-box/mocks.yaml
$hidden: true
text: >-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus
laudantium minima itaque unde dicta, tenetur, incidunt sint sed delectus
eveniet quisquam quidem illo! Facilis illo sunt quidem laboriosam voluptatem
aspernatur placeat pariatur beatae libero, tempore eligendi culpa voluptas
dignissimos eos voluptatum est, quasi ipsam fugiat! Fuga, iure. Sint minima
accusamus assumenda vitae, fuga eius saepe consectetur veniam! Quae ab iste
blanditiis repudiandae vel, dolores quisquam optio architecto voluptatem.
Deserunt magni quidem alias, dolor molestiae saepe delectus mollitia?
Obcaecati velit, quia ducimus at commodi porro vitae. Sed cupiditate provident
officiis, dolores, quam reiciendis similique, quis perspiciatis maxime aut
minima dolore laboriosam?
$variants:
- $name: Info
type: info
- $name: Note
type: note
- $name: Warning
type: warning
- $name: Error
type: error
// src/components/elements/info-box/info-box.twig
<div class="InfoBox InfoBox-{{ type }}{% if classes %} {{ classes|join(" ") }}{% endif %}">
{{ text }}
</div>
Info mock data
text: >-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus
laudantium minima itaque unde dicta, tenetur, incidunt sint sed delectus
eveniet quisquam quidem illo! Facilis illo sunt quidem laboriosam voluptatem
aspernatur placeat pariatur beatae libero, tempore eligendi culpa voluptas
dignissimos eos voluptatum est, quasi ipsam fugiat! Fuga, iure. Sint minima
accusamus assumenda vitae, fuga eius saepe consectetur veniam! Quae ab iste
blanditiis repudiandae vel, dolores quisquam optio architecto voluptatem.
Deserunt magni quidem alias, dolor molestiae saepe delectus mollitia?
Obcaecati velit, quia ducimus at commodi porro vitae. Sed cupiditate provident
officiis, dolores, quam reiciendis similique, quis perspiciatis maxime aut
minima dolore laboriosam?
type: info
Note mock data
text: >-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus
laudantium minima itaque unde dicta, tenetur, incidunt sint sed delectus
eveniet quisquam quidem illo! Facilis illo sunt quidem laboriosam voluptatem
aspernatur placeat pariatur beatae libero, tempore eligendi culpa voluptas
dignissimos eos voluptatum est, quasi ipsam fugiat! Fuga, iure. Sint minima
accusamus assumenda vitae, fuga eius saepe consectetur veniam! Quae ab iste
blanditiis repudiandae vel, dolores quisquam optio architecto voluptatem.
Deserunt magni quidem alias, dolor molestiae saepe delectus mollitia?
Obcaecati velit, quia ducimus at commodi porro vitae. Sed cupiditate provident
officiis, dolores, quam reiciendis similique, quis perspiciatis maxime aut
minima dolore laboriosam?
type: note
Warning mock data
text: >-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus
laudantium minima itaque unde dicta, tenetur, incidunt sint sed delectus
eveniet quisquam quidem illo! Facilis illo sunt quidem laboriosam voluptatem
aspernatur placeat pariatur beatae libero, tempore eligendi culpa voluptas
dignissimos eos voluptatum est, quasi ipsam fugiat! Fuga, iure. Sint minima
accusamus assumenda vitae, fuga eius saepe consectetur veniam! Quae ab iste
blanditiis repudiandae vel, dolores quisquam optio architecto voluptatem.
Deserunt magni quidem alias, dolor molestiae saepe delectus mollitia?
Obcaecati velit, quia ducimus at commodi porro vitae. Sed cupiditate provident
officiis, dolores, quam reiciendis similique, quis perspiciatis maxime aut
minima dolore laboriosam?
type: warning
Error mock data
text: >-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus
laudantium minima itaque unde dicta, tenetur, incidunt sint sed delectus
eveniet quisquam quidem illo! Facilis illo sunt quidem laboriosam voluptatem
aspernatur placeat pariatur beatae libero, tempore eligendi culpa voluptas
dignissimos eos voluptatum est, quasi ipsam fugiat! Fuga, iure. Sint minima
accusamus assumenda vitae, fuga eius saepe consectetur veniam! Quae ab iste
blanditiis repudiandae vel, dolores quisquam optio architecto voluptatem.
Deserunt magni quidem alias, dolor molestiae saepe delectus mollitia?
Obcaecati velit, quia ducimus at commodi porro vitae. Sed cupiditate provident
officiis, dolores, quam reiciendis similique, quis perspiciatis maxime aut
minima dolore laboriosam?
type: error