Motive

Information

Folder
src/components/patterns/motive

Files

Schema 
// src/components/patterns/motive/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/motive
additionalProperties: false
required:
  - headline
  - copy
  - variants
  - motive_confirmation
  - greetings_text
  - lightbox
properties:
  headline:
    type: string
  copy:
    type: string
  motives_name:
    type: string
  variants:
    type: array
    items:
      required:
        - name
        - image
        - value
      type: object
      properties:
        name:
          type: string
        image:
          type: object
        value:
          type: string
  motive_confirmation:
    $ref: /fsk/form/form-element
  lightbox:
    $ref: /elements/lightbox
  greetings_text:
    $ref: /patterns/form/layout/layout-fieldset
Mocks 
// src/components/patterns/motive/mocks.yaml

headline: 1. Motiv auswählen
copy: >-
  Wählen Sie eine Vorlage, die Sie im Anschluss mit einem persönlichen Grußtext
  versehen und herunterladen oder digital versenden können.
motives_name: motive-variants
variants:
  - name: forest
    value: forest
    image:
      src: https://via.placeholder.com/1076x604?text=Image+1+(16:9)
      copyright: Foto © Brooke Pyke / Greenpeace
      alt: forest
      width: 1076
      height: 604
  - name: field
    value: field
    image:
      src: https://via.placeholder.com/1076x604?text=Image+2+(16:9)
      copyright: Foto © Brooke Pyke / Greenpeace
      alt: field
      width: 1076
      height: 604
  - name: tomato
    value: tomato
    image:
      src: https://via.placeholder.com/1076x604?text=Image+3+(16:9)
      copyright: Foto © Brooke Pyke / Greenpeace
      alt: tomato
      width: 1076
      height: 604
  - name: potato
    value: potato
    image:
      src: https://via.placeholder.com/1076x604?text=Image+4+(16:9)
      copyright: Foto © Brooke Pyke / Greenpeace
      alt: potato
      width: 1076
      height: 604
  - name: bird
    value: bird
    image:
      src: https://via.placeholder.com/1076x604?text=Image+5+(16:9)
      copyright: Foto © Brooke Pyke / Greenpeace
      alt: bird
      width: 1076
      height: 604
  - name: car
    value: car
    image:
      src: https://via.placeholder.com/1076x604?text=Image+6+(16:9)
      copyright: Foto © Brooke Pyke / Greenpeace
      alt: car
      width: 1076
      height: 604
motive_confirmation:
  $tpl: '@fsk/form/form-element'
  $ref: '@fsk/form/form-element#checkbox'
  children:
    attributes:
      id: motive_confirmation
      class: js-Motive-imageConfirmationCheckbox
  label:
    title: Motivauswahl bestätigen
    attributes:
      for: motive_confirmation
lightbox:
  id: preview
  title: Vorschau Ihrer Urkunde
greetings_text:
  $tpl: '@patterns/form/layout/layout-fieldset'
  $ref: '@patterns/form/layout/layout-fieldset'
  legend:
    title: >-
      2. Grußtext schreiben <span class="u-typo-copy Motive-legendCopy">Ihre
      Eingabe wird nicht gespeichert. Verzichten Sie bitte dennoch auf
      persönliche Kontakt- oder Adressdaten.</span>
    attributes:
      $drupal: true
  children:
    $render:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#textarea'
        attributes:
          class: js-Motive-greetingsText
        label:
          title: Ihr Grußtext
          attributes:
            for: input-greetings
        children:
          $tpl: '@patterns/form/textarea'
          attributes:
            $drupal: true
            id: input-greetings
            required: true
            maxlength: 350
$variants:
  - $name: Eight variants
    variants:
      - name: table
        value: table
        image:
          src: https://via.placeholder.com/1076x604?text=Image+7+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
      - name: spoon
        value: spoon
        image:
          src: https://via.placeholder.com/1076x604?text=Image+8+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
  - $name: Ten variants
    variants:
      - name: table
        value: table
        image:
          src: https://via.placeholder.com/1076x604?text=Image+7+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
      - name: spoon
        value: spoon
        image:
          src: https://via.placeholder.com/1076x604?text=Image+8+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
      - name: fork
        value: fork
        image:
          src: https://via.placeholder.com/1076x604?text=Image+9+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
      - name: apple
        value: apple
        image:
          src: https://via.placeholder.com/1076x604?text=Image+10+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
  - $name: Twelve variants
    variants:
      - name: table
        value: table
        image:
          src: https://via.placeholder.com/1076x604?text=Image+7+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
      - name: spoon
        value: spoon
        image:
          src: https://via.placeholder.com/1076x604?text=Image+8+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
      - name: fork
        value: fork
        image:
          src: https://via.placeholder.com/1076x604?text=Image+9+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
      - name: apple
        value: apple
        image:
          src: https://via.placeholder.com/1076x604?text=Image+10+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
      - name: knife
        value: knife
        image:
          src: https://via.placeholder.com/1076x604?text=Image+11+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
      - name: freedom
        value: freedom
        image:
          src: https://via.placeholder.com/1076x604?text=Image+12+(16:9)
          copyright: Foto © Brooke Pyke / Greenpeace
          alt: car
          width: 1076
          height: 604
Template 
// src/components/patterns/motive/motive.html.twig

{% set lightbox_content %}
  {% include "@patterns/motive/motive-lightbox/motive-lightbox.html.twig" with {
    items: variants
  } only %}
{% endset %}

{% if variants|length > 10 %}
  {% set motive_size = "huge" %}
{% elseif variants|length > 8 %}
  {% set motive_size = "large" %}
{% elseif variants|length > 6 %}
  {% set motive_size = "medium" %}
{% else %}
  {% set motive_size = "small" %}
{% endif %}

<div class="Motive js-Motive Motive--{{ motive_size }}">
  <h3 class="Motive-headline u-typo-headline4">{{ headline }}</h3>
  <p class="Motive-copy u-typo-copy">{{ copy }}</p>
  <div class="Motive-variantsHolder">
    <div class="Motive-preview">
      <img
        alt="{{ variants[0].image.alt }}"
        class="Motive-image js-Motive-previewImage"
        height="{{ variants[0].image.height }}"
        src="{{ variants[0].image.src }}"
        width="{{ variants[0].image.width }}"
      >
    </div>
    <ul class="Motive-variants">
      {% for variant in variants %}
        <li class="Motive-variant">
          <input
            class="Motive-radio js-Motive-radio u-hiddenVisually"
            id="motive-variant-{{ variant.name|clean_id }}"
            name="{{ motives_name }}"
            type="radio"
            value="{{ variant.value }}"
            aria-hidden="true"
            {% if loop.index == "1" %}checked{% endif %}
          >
          <label for="motive-variant-{{ variant.name|clean_id }}" class="Motive-label js-Motive-label">
            <img
              alt="{{ variant.image.alt }}"
              class="Motive-image js-Motive-variantImage"
              height="{{ variant.image.height }}"
              src="{{ variant.image.src }}"
              width="{{ variant.image.width }}"
            >
            <span class="u-hiddenVisually">{{ variant.name }}</span>
          </label>
        </li>
      {% endfor %}
    </ul>
  </div>
  <div class="Motive-confirmation">
    {{ motive_confirmation }}
  </div>
  {{ greetings_text }}

  <div class="Motive-previewButtonHolder">
    {% include "@elements/button/button.html.twig" with {
      label: "Vorschau der Urkunde",
      class: "js-Motive-previewButton",
      icon: "eye",
      mutation: "secondary",
      target: "_blank",
      disabled: true
    } only %}
  </div>
  {% include "@elements/lightbox/lightbox.html.twig" with {
    id: lightbox.name,
    title: lightbox.title,
    rendered_content: lightbox_content,
    wide: true,
    clickable_overlay: true,
    hide_opener: true,
    class: "js-MotiveLightbox"
  } only %}
</div>

Variants

default
Open

1. Motiv auswählen

Wählen Sie eine Vorlage, die Sie im Anschluss mit einem persönlichen Grußtext versehen und herunterladen oder digital versenden können.

forest
2. Grußtext schreiben Ihre Eingabe wird nicht gespeichert. Verzichten Sie bitte dennoch auf persönliche Kontakt- oder Adressdaten.
noch 350 Zeichen
Eight variants
Open

1. Motiv auswählen

Wählen Sie eine Vorlage, die Sie im Anschluss mit einem persönlichen Grußtext versehen und herunterladen oder digital versenden können.

forest
2. Grußtext schreiben Ihre Eingabe wird nicht gespeichert. Verzichten Sie bitte dennoch auf persönliche Kontakt- oder Adressdaten.
noch 350 Zeichen
Ten variants
Open

1. Motiv auswählen

Wählen Sie eine Vorlage, die Sie im Anschluss mit einem persönlichen Grußtext versehen und herunterladen oder digital versenden können.

forest
2. Grußtext schreiben Ihre Eingabe wird nicht gespeichert. Verzichten Sie bitte dennoch auf persönliche Kontakt- oder Adressdaten.
noch 350 Zeichen
Twelve variants
Open

1. Motiv auswählen

Wählen Sie eine Vorlage, die Sie im Anschluss mit einem persönlichen Grußtext versehen und herunterladen oder digital versenden können.

forest
2. Grußtext schreiben Ihre Eingabe wird nicht gespeichert. Verzichten Sie bitte dennoch auf persönliche Kontakt- oder Adressdaten.
noch 350 Zeichen