Gift Prompt

// src/components/elements/gift-prompt/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/gift-prompt
required:
  - gift_page_url
  - form_wrapper_id
properties:
  gift_page_url:
    type: string
    format: uri-reference
  is_hidden:
    type: boolean
  is_simple_version:
    type: boolean
  form_wrapper_id:
    type: string

// src/components/elements/gift-prompt/mocks.yaml

gift_page_url: url
form_wrapper_id: form-wrapper
$variants:
  - $name: Simple version
    is_simple_version: true

// src/components/elements/gift-prompt/gift-prompt.html.twig

<div
  class="GiftPrompt js-GiftPrompt{% if is_simple_version %} GiftPrompt--isSimple{% endif %}"
  data-form-wrapper-id="{{ form_wrapper_id }}"
  {% if is_hidden %}hidden{% endif %}
>
  {% if is_simple_version %}
    <a class="GiftPrompt-link js-GiftPrompt-link u-typo-copy-bold u-brandLink" href="{{ gift_page_url }}">
      Möchten Sie Ihre Spende verschenken?
    </a>
  {% else %}
    {% include "@elements/icon/icon.html.twig" with {
      name: "gift-box",
      class: "GiftPrompt-icon",
    } only %}
    <div class="GiftPrompt-textWrapper">
      <span class="GiftPrompt-copy">Einmalige Spende als Geschenk</span>
      <a class="GiftPrompt-link js-GiftPrompt-link u-typo-copy-bold u-brandLink" href="{{ gift_page_url }}">
        Möchten Sie Ihre Spende verschenken?
      </a>
    </div>
  {% endif %}
</div>