Supporter Name

// src/components/patterns/form/payment/supporter-name/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/form/payment/supporter-name
additionalProperties: false
properties:
  firstname:
    type: string
    format: html
  lastname:
    type: string
    format: html
required:
  - firstname
  - lastname

// src/components/patterns/form/payment/supporter-name/mocks.yaml

firstname:
  $tpl: '@fsk/form/form-element'
  $ref: '@fsk/form/form-element#input'
  children:
    attributes:
      id: test1
      required: true
      data-webform-pattern-error: Textfield Error Message
      class: PaymentForm-firstName
      value: Max
  label:
    title: input with custom error message
    attributes:
      for: test1
lastname:
  $tpl: '@fsk/form/form-element'
  $ref: '@fsk/form/form-element#input'
  children:
    attributes:
      id: test2
      required: true
      data-webform-pattern-error: Textfield Error Message
      class: PaymentForm-lastName
      value: Mustermann
  label:
    title: input with custom error message
    attributes:
      for: test2

// src/components/patterns/form/payment/supporter-name/supporter-name.html.twig

{#
 # ATTENTION:
 # This template is only relevant for unit tests
 # to be sure that changes in fsk elements don't break the FE logic.
 # It won't be consumed by Drupal
 #}

<form>
  {{ firstname|raw }}
  {{ lastname|raw }}
  <button type="submit" hidden>Submit</button>
</form>