Material

// src/components/patterns/material/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/material
additionalProperties: false
required:
  - headline
  - material_type
  - image
properties:
  image:
    type: object
    required:
      - width
      - height
      - src
      - alt
    properties:
      width:
        type: number
      height:
        type: number
      src:
        type: string
        format: uri-reference
      alt:
        type: string
  headline:
    type: string
  material_type:
    type: string
  label:
    type: string
  copy:
    type: string
    maxLength: 140
  date:
    type: string
  date_time:
    type: string
  pages:
    type: string
  format:
    type: string
  size:
    type: string
  url:
    type: string
    format: uri-reference
  order_by_email:
    type: boolean
  quantity:
    type: string
    format: html
  as_element:
    type: boolean
  options:
    $ref: /fsk/form/radios

// src/components/patterns/material/mocks.yaml

$hidden: true
image:
  width: 220
  height: 320
  src: https://via.placeholder.com/220x320
  alt: Alternative text
$variants:
  - $name: Publication
    headline: 'Report: Zum Abschminken – Plastik in Kosmetik'
    copy: >-
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aut
      consequuntur facere inventore iure veritatis!
    date: 12.03.2021
    date_time: '2021-03-12 00:00:01'
    pages: 25 Seiten
    format: DIN A4
    size: 2,35 MB
    url: '#url'
    material_type: publication
  - $name: Education
    label: Digital
    headline: KlimaKit zum ausdrucken
    date: 12.03.2021
    date_time: '2021-03-12 00:00:01'
    pages: 25 Seiten
    format: DIN A4
    size: 2,35 MB
    url: '#url'
    material_type: education
  - $name: Education with email button
    label: Print/PDF
    headline: Bestellen (Achtung limierte Auflage)
    copy: >-
      Bitte schicken Sie Ihre Bestellung an <a
      href="mailto:bildung@greenpeace.de">bildung@greenpeace.de</a>.
    date: 12.03.2021
    order_by_email: true
    material_type: education
  - $name: Info
    image:
      width: 368
      height: 220
      src: https://via.placeholder.com/368x220
      alt: Alternative text
    material_type: info
    headline: Greenpeace Gruppen
    date: Stand 2020
    pages: 16 Seiten
    format: Hintergrund
    size: 3.14 MB
    url: '#url'
    quantity:
      $tpl: '@fsk/form/form-element'
      $ref: '@fsk/form/form-element#select'
      attributes:
        class: Material-quantity
      children:
        options:
          - type: option
            value: '0'
            label: '0'
          - type: option
            value: '1'
            label: '1'
        attributes:
          id: quantity
      label:
        title: Exemplare bestellen
        attributes:
          for: quantity
  - $name: Info as element
    as_element: true
    image:
      width: 368
      height: 220
      src: https://via.placeholder.com/368x220
      alt: Alternative text
    material_type: info
    headline: Greenpeace Gruppen
    date: Stand 2020
    pages: 16 Seiten
    format: Hintergrund
    size: 3.14 MB
    url: '#url'
    quantity:
      $tpl: '@fsk/form/form-element'
      $ref: '@fsk/form/form-element#select'
      attributes:
        class: Material-quantity
      children:
        options:
          - type: option
            value: '0'
            label: '0'
          - type: option
            value: '1'
            label: '1'
        attributes:
          id: quantity
      label:
        title: Exemplare bestellen
        attributes:
          for: quantity
  - $name: Info with radio buttons
    as_element: true
    image:
      width: 368
      height: 220
      src: https://via.placeholder.com/368x220
      alt: Alternative text
    material_type: info
    headline: Greenpeace Gruppen
    copy: >-
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aut
      consequuntur facere inventore iure veritatis!
    options:
      $tpl: '@fsk/form/radios'
      $ref: '@fsk/form/radios'
      layout: row
      children:
        $render:
          - $tpl: '@fsk/form/form-element'
            $ref: '@fsk/form/form-element#radio'
            label:
              title: Downloadlink per E-Mail
              attributes:
                for: email_download_link
            children:
              attributes:
                name: sorting
                id: email_download_link
                value: email_download_link
                class: FskRadio--native
          - $tpl: '@fsk/form/form-element'
            $ref: '@fsk/form/form-element#radio'
            label:
              title: Versand per Post
              attributes:
                for: postal_service
            children:
              attributes:
                name: sorting
                id: postal_service
                value: postal_service
                class: FskRadio--native
    quantity:
      $tpl: '@fsk/form/form-element'
      $ref: '@fsk/form/form-element#select'
      attributes:
        class: Material-quantity
      children:
        options:
          - type: option
            value: '0'
            label: '0'
          - type: option
            value: '1'
            label: '1'
        attributes:
          id: quantity
      label:
        title: Exemplare bestellen
        attributes:
          for: quantity

// src/components/patterns/material/material.html.twig

<div class="Material Tracking--material u-grid{% if as_element %} Material--element{% else %} u-container{% endif %}{% if class %} {{ class }}{% endif %}" data-type="{{ material_type }}" data-headline="{{ headline }}">
  <div class="Material-content">
    {% if image %}
      <div class="Material-imageHolder{% if material_type %} Material-imageHolder--{{ material_type }}{% endif %}">
        {% if label %}<span class="Material-label u-typo-copy-bold">{{ label }}</span>{% endif %}
        <img class="Material-image" src="{{ image.src }}" alt="{{ image.alt }}" width="{{ image.width }}" height="{{ image.height }}">
      </div>
    {% endif %}
    <div class="Material-text">
      {% if headline %}
        <h2 class="Material-headline u-typo-headline5">{{ headline }}</h2>
      {% endif %}
      {% if copy %}
        <div class="Material-item Rte">{{ copy|raw }}</div>
      {% endif %}
      {% if date %}
        <time class="Material-item u-typo-copy-small" datetime="{{ date_time|date("Y-m-d") }}">Veröffentlichungsdatum: {{ date }}</time>
      {% endif %}
      {% if pages or format %}
        <p class="Material-item u-typo-copy-small">
          {%- if pages %}Anzahl Seiten: {{ pages }}{% endif -%}
          {%- if pages and format %}&nbsp;|&nbsp;{% endif -%}
          {%- if format %}Format: {{ format }}{% endif -%}
        </p>
      {% endif %}
      <p class="Material-size Material-item u-typo-copy-small-bold">Dateigröße: {{ size }}</p>
      {% if material_type == "info" or material_type == "testament" %}
    </div>
    <div class="Material-inputs">
      {% if options %}
        {{ options }}
      {% endif %}
      {{ quantity|raw }}
    {% endif %}
      {% if url %}
        {% include "@elements/button/button.html.twig" with {
          label: "Herunterladen",
          class: "Material-button Tracking--materialDownloadBtn",
          url: url,
          icon: "download"
        } only %}
      {% endif %}
      {% if order_by_email %}
        {% include "@elements/button/button.html.twig" with {
          label: "Per Mail bestellen",
          class: "Material-button",
          url: 'mailto:bildung@greenpeace.de',
          icon: "mail"
        } only %}
      {% endif %}
    </div>
  </div>
</div>