src/components/elements/notecard// src/components/elements/notecard/schema.yaml
$schema: http://json-schema.org/draft-07/schema
$id: /elements/notecard
type: object
required:
- text
- type
additionalProperties: false
properties:
aria_live:
type: string
enum:
- assertive
- polite
hidden:
type: boolean
text:
type: string
type:
type: string
enum:
- info
- note
- success
- warning
- error
classes:
type: array
items:
type: string
// src/components/elements/notecard/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: Success
type: success
- $name: Warning
type: warning
- $name: Error
type: error
// src/components/elements/notecard/notecard.twig
{% set icons = {
error: "error_circle_filled",
info: "info",
note: "note",
success: "check_circle_filled",
warning: "warning_triangle",
} %}
<p aria-live="{{ aria_live|default("polite") }}" class="Notecard Notecard-{{ type }} {% if classes %} {{ classes|join(" ") }}{% endif %} {% if hidden %} visually-hidden {%- endif -%}">
{% include "@elements/icon/icon.twig" with {
classes: ["Notecard-icon"],
name: icons[type],
} only %}
{{ text }}
</p>
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
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?
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
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?
Success 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: success
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?
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
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?
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
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?