checkout-list-item

// src/components/patterns/form/checkout/checkout-list/checkout-list-item/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/form/checkout/checkout-list/checkout-list-item
additionalProperties: false
properties:
  list:
    type: array
    items:
      type: object
      properties:
        label:
          type: string
        value:
          type: string
  amount:
    type: object
    properties:
      frequency:
        type: string
      value:
        type: string
  copy:
    type: string
  class:
    type: string
  icon:
    type: string
  headline:
    type: string

// src/components/patterns/form/checkout/checkout-list/checkout-list-item/mocks.yaml

$variants:
  - $name: Donation Amount
    icon: heart
    headline: Spendenbetrag
    amount:
      frequency: monatlich
      value: 50€
  - $name: Personal Data
    icon: user
    headline: Persönliche Daten
    list:
      - label: Anrede
        value: Frau
      - label: Vorname
        value: Nina
      - label: Nachname
        value: Kunze
      - label: Straße und Hausnummer
        value: Musterstraße 2
      - label: E-Mailadresse
        value: nina.mustermann@gmail.com
  - $name: Payment
    icon: credit-card
    headline: Zahlungsweise
    list:
      - label: Zahlungsart
        value: Lastschrift
      - label: Spendenempfänger
        value: Greenpeace e.V.
      - label: IBAN
        value: DE2201234567890FOBDE55ZKP
  - $name: Gift
    icon: gift
    headline: Unser Dankeschön für Ihre Spende
    copy: Ja, ich möchte ein Geschenk erhalten.
  - $name: Material order
    icon: shopping-bag
    headline: Materialbestellung
    list:
      - label: 5 Stck.
        value: Broschüre Platzhalter Titel
      - label: 5 Stck.
        value: Broschüre Platzhalter Titel

// src/components/patterns/form/checkout/checkout-list/checkout-list-item/checkout-list-item.html.twig

<div class="CheckoutListItem{% if class %} {{ class }}{% endif %}">
  <div class="CheckoutListItem-header u-grid">
    <h2 class="CheckoutListItem-headline u-typo-headline6">
      {% include "@elements/icon/icon.html.twig" with {name: icon, class: "CheckoutListItem-icon"} only %}
      {{ headline }}
    </h2>
  </div>

  <div class="CheckoutListItem-content">
    {% if amount or copy %}
      {% set typo_class = amount ? 'u-typo-big-copy-subline' : '' %}
      {% set description = amount ? 'Ich unterstütze Greenpeace e.V. <span class="CheckoutListItem-descriptionHighlight u-typo-headline5">' ~ amount.frequency ~ '</span> mit einem Betrag von <span class="CheckoutListItem-descriptionHighlight u-typo-headline5">' ~ amount.value ~ '</span>' : copy %}
      <div class="CheckoutListItem-text u-grid">
        <p class="CheckoutListItem-description {{ typo_class }}">{{ description|raw }}</p>
      </div>
      {% else %}
      <dl class="CheckoutListItem-list u-grid">
        {% for item in list %}
        <dt class="CheckoutListItem-label">{{ item.label }}</dt>
        <dd class="CheckoutListItem-value u-typo-copy-bold">{{ item.value }}</dd>
        {% endfor %}
      </dl>
    {% endif %}
  </div>
</div>