Layout Fieldset

// src/components/patterns/form/layout/layout-fieldset/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/form/layout/layout-fieldset
additionalProperties: false
properties:
  attributes:
    type: object
  legend:
    type: object
    properties:
      title:
        type: string
    required:
      - title
  children:
    type: string
    format: html
  required:
    type: boolean
  full_width:
    type: boolean
  custom_validation:
    type: string
  backend_error:
    type: boolean
  page_child:
    type: boolean
  js_form_item:
    type: boolean
required:
  - children

// src/components/patterns/form/layout/layout-fieldset/mocks.yaml

$hidden: true
attributes:
  $drupal: true
legend:
  title: A group of form elements
  attributes:
    $drupal: true
$variants:
  - $name: default
    children:
      $render:
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#input'
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#select'
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#textarea'
  - $name: Full width
    full_width: true
    custom_validation: Sie müssen eine Stückzahl bei den Infomaterialien auswählen.
    children:
      $tpl: '@patterns/accordion'
      $ref: '@patterns/accordion#materials'

// src/components/patterns/form/layout/layout-fieldset/layout-fieldset.html.twig

<div class="LayoutFieldset u-grid{% if js_form_item %} js-form-item{% endif %}{% if full_width %} LayoutFieldset--fullWidth{% endif %}{% if custom_validation %} js-FormElement--fieldset{% endif %}{% if page_child %} u-pageMainChild{% endif %}{% if content_with_teaser %} LayoutFieldset--contentWithTeaser{% endif %}">
  {% if custom_validation %}
    <div class="LayoutFieldset-errorMessage u-typo-copy-small-bold js-LayoutFieldset-errorMessage{% if not backend_error %} is-hidden{% endif %}" role="alert">{{ custom_validation }}</div>
  {% endif %}
  <fieldset {{ attributes|without("class") }} class="LayoutFieldset-fieldset {{ attributes.class }}">
    <legend class="LayoutFieldset-legend {% if full_width or content_with_teaser %} u-hiddenVisually{% endif %} {{ legend.attributes.class }}">
      <span class="LayoutFieldset-label u-typo-headline4{% if required %} js-form-required form-required{% endif %}">{{ legend.title }}</span>
    </legend>
    <div class="LayoutFieldset-wrapper{% if full_width %} LayoutFieldset-wrapper--fullWidth{% endif %}">
      {{ children }}
    </div>
  </fieldset>
</div>