src/components/patterns/form/payment/payment-amount// src/components/patterns/form/payment/payment-amount/schema.yaml
$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/form/payment/payment-amount
additionalProperties: false
properties:
interval:
type: string
format: html
amount:
type: string
format: html
hidden_fields:
type: string
format: html
is_drupal_form:
type: boolean
has_flyout:
type: boolean
has_flyout_open:
type: boolean
donation_examples:
type: object
properties:
id:
type: string
items:
type: array
items:
type: string
format: html
required:
- interval
- amount
// src/components/patterns/form/payment/payment-amount/mocks.yaml
$hidden: true
is_drupal_form: false
has_flyout: true
donation_examples:
id: test1234
items:
- $ref: elements/donation-example#small
$tpl: elements/donation-example
is_template: true
data_attributes:
- key: interval-dependency
value: '0'
- key: amount-dependency
value: '60'
copy:
$tpl: elements/rte
markup: lorem ipsum 60€.
- $ref: elements/donation-example#small
$tpl: elements/donation-example
is_template: true
data_attributes:
- key: interval-dependency
value: '0'
- key: amount-dependency
value: '50'
copy:
$tpl: elements/rte
markup: lorem ipsum 50€.
- $ref: elements/donation-example#small
$tpl: elements/donation-example
is_template: true
data_attributes:
- key: interval-dependency
value: '0'
- key: amount-dependency
value: donate_custom_amount
copy:
$tpl: elements/rte
markup: lorem ipsum custom amount.
amount:
$tpl: '@fsk/form/fieldset'
$ref: '@fsk/form/fieldset'
attributes:
class: PaymentAmount-amount
legend:
title: mit einem Betrag von
children:
$render:
- $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: 50€
attributes:
for: input50
aria-controls: test1234
children:
attributes:
name: spendenbetrag[amount]
id: input50
value: 50
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#radio'
label:
title: 60€
attributes:
for: input60
aria-controls: test1234
children:
attributes:
name: spendenbetrag[amount]
id: input60
value: 60
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#radio'
label:
title: 70€
attributes:
for: input70
aria-controls: test1234
children:
attributes:
name: spendenbetrag[amount]
id: input70
value: 70
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#input'
$variants:
- $name: default
interval:
$tpl: '@fsk/form/fieldset'
$ref: '@fsk/form/fieldset'
attributes:
class: PaymentAmount-interval
legend:
title: Ich unterstütze Greenpeace e.V.
children:
$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: Einmalig
attributes:
for: input100
aria-controls: test1234
children:
attributes:
name: spendenbetrag[interval_count]
id: input100
value: 0
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#radio'
label:
title: Monatlich
attributes:
for: input2
aria-controls: test1234
children:
attributes:
name: spendenbetrag[interval_count]
id: input2
value: 1
- $name: with select
interval:
$tpl: '@fsk/form/fieldset'
$ref: '@fsk/form/fieldset'
attributes:
class: PaymentAmount-interval
legend:
title: Ich unterstütze Greenpeace e.V.
children:
$render:
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#select'
label:
title: Ich unterstütze Greenpeace e.V. *
attributes:
for: input3
children:
$tpl: '@fsk/form/form-element/input/select'
$ref: '@fsk/form/form-element/input/select'
options:
- type: option
value: 12
label: monatlich
- type: option
value: 4
label: vierteljährlich
- type: option
value: 2
label: halbjährlich
- type: option
value: 1
label: jährlich
- type: option
value: '0'
label: einmalig
attributes: null
id: input3
// src/components/patterns/form/payment/payment-amount/payment-amount.html.twig
{#
Attention: form elements with all relevant classes will be rendered by Drupal and passed as rendered html strings.
The form tag in this template is needed only for miyagi.
#}
{% if not is_drupal_form %}
<form class="PaymentForm js-PaymentForm">
{% endif %}
<div class="PaymentAmount js-PaymentAmount">
{% if interval %}
{% if has_flyout %}
<div class="PaymentAmount-intervalHolder js-PaymentAmount-intervalHolder{% if has_flyout_open %} is-flyoutOpened{% endif %}">
{% endif %}
{{ interval|raw }}
{% if has_flyout %}
{% include "@elements/flyout/flyout.html.twig" with {
class: "PaymentAmount-flyout js-PaymentAmount-flyout",
has_flyout_open: has_flyout_open,
} only %}
</div>
{% endif %}
{% endif %}
{% if amount %}
{{ amount|raw }}
{% endif %}
{% if hidden_fields %}
{{ hidden_fields|raw }}
{% endif %}
{% if donation_examples %}
<div class="PaymentAmount-examples js-PaymentAmount-examples"
aria-live="polite"
id="{{ donation_examples.id }}"
>
{% for example in donation_examples.items %}
{{ example|raw }}
{% endfor %}
</div>
{% endif %}
</div>
{% if not is_drupal_form %}
<button type="submit" hidden>Submit</button>
</form>
{% endif %}
default mock data
is_drupal_form: false
has_flyout: true
donation_examples:
id: test1234
items:
- $ref: elements/donation-example#small
$tpl: elements/donation-example
is_template: true
data_attributes:
- key: interval-dependency
value: '0'
- key: amount-dependency
value: '60'
copy:
$tpl: elements/rte
markup: lorem ipsum 60€.
- $ref: elements/donation-example#small
$tpl: elements/donation-example
is_template: true
data_attributes:
- key: interval-dependency
value: '0'
- key: amount-dependency
value: '50'
copy:
$tpl: elements/rte
markup: lorem ipsum 50€.
- $ref: elements/donation-example#small
$tpl: elements/donation-example
is_template: true
data_attributes:
- key: interval-dependency
value: '0'
- key: amount-dependency
value: donate_custom_amount
copy:
$tpl: elements/rte
markup: lorem ipsum custom amount.
amount:
$tpl: '@fsk/form/fieldset'
$ref: '@fsk/form/fieldset'
attributes:
class: PaymentAmount-amount
legend:
title: mit einem Betrag von
children:
$render:
- $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: 50€
attributes:
for: input50
aria-controls: test1234
children:
attributes:
name: spendenbetrag[amount]
id: input50
value: 50
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#radio'
label:
title: 60€
attributes:
for: input60
aria-controls: test1234
children:
attributes:
name: spendenbetrag[amount]
id: input60
value: 60
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#radio'
label:
title: 70€
attributes:
for: input70
aria-controls: test1234
children:
attributes:
name: spendenbetrag[amount]
id: input70
value: 70
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#input'
interval:
$tpl: '@fsk/form/fieldset'
$ref: '@fsk/form/fieldset'
attributes:
class: PaymentAmount-interval
legend:
title: Ich unterstütze Greenpeace e.V.
children:
$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: Einmalig
attributes:
for: input100
aria-controls: test1234
children:
attributes:
name: spendenbetrag[interval_count]
id: input100
value: 0
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#radio'
label:
title: Monatlich
attributes:
for: input2
aria-controls: test1234
children:
attributes:
name: spendenbetrag[interval_count]
id: input2
value: 1
with select mock data
is_drupal_form: false
has_flyout: true
donation_examples:
id: test1234
items:
- $ref: elements/donation-example#small
$tpl: elements/donation-example
is_template: true
data_attributes:
- key: interval-dependency
value: '0'
- key: amount-dependency
value: '60'
copy:
$tpl: elements/rte
markup: lorem ipsum 60€.
- $ref: elements/donation-example#small
$tpl: elements/donation-example
is_template: true
data_attributes:
- key: interval-dependency
value: '0'
- key: amount-dependency
value: '50'
copy:
$tpl: elements/rte
markup: lorem ipsum 50€.
- $ref: elements/donation-example#small
$tpl: elements/donation-example
is_template: true
data_attributes:
- key: interval-dependency
value: '0'
- key: amount-dependency
value: donate_custom_amount
copy:
$tpl: elements/rte
markup: lorem ipsum custom amount.
amount:
$tpl: '@fsk/form/fieldset'
$ref: '@fsk/form/fieldset'
attributes:
class: PaymentAmount-amount
legend:
title: mit einem Betrag von
children:
$render:
- $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: 50€
attributes:
for: input50
aria-controls: test1234
children:
attributes:
name: spendenbetrag[amount]
id: input50
value: 50
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#radio'
label:
title: 60€
attributes:
for: input60
aria-controls: test1234
children:
attributes:
name: spendenbetrag[amount]
id: input60
value: 60
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#radio'
label:
title: 70€
attributes:
for: input70
aria-controls: test1234
children:
attributes:
name: spendenbetrag[amount]
id: input70
value: 70
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#input'
interval:
$tpl: '@fsk/form/fieldset'
$ref: '@fsk/form/fieldset'
attributes:
class: PaymentAmount-interval
legend:
title: Ich unterstütze Greenpeace e.V.
children:
$render:
- $tpl: '@fsk/form/form-element'
$ref: '@fsk/form/form-element#select'
label:
title: Ich unterstütze Greenpeace e.V. *
attributes:
for: input3
children:
$tpl: '@fsk/form/form-element/input/select'
$ref: '@fsk/form/form-element/input/select'
options:
- type: option
value: 12
label: monatlich
- type: option
value: 4
label: vierteljährlich
- type: option
value: 2
label: halbjährlich
- type: option
value: 1
label: jährlich
- type: option
value: '0'
label: einmalig
attributes: null
id: input3