footer

// src/components/template-components/footer/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/footer
additionalProperties: false
type: object
properties:
  contact:
    type: object
    properties:
      title:
        type: string
      content:
        type: string
        format: html
        description: template-components/footer/contact
  menu:
    type: object
    properties:
      title:
        type: string
      content:
        type: string
        format: html
        description: template-components/footer/menu
  social_nav:
    type: string
    format: html
    description: template-components/footer/social-nav
  copy_items:
    type: string
    format: html
    description: template-components/footer/copy-item
  legal:
    type: string
required:
  - contact
  - menu
  - social_nav
  - copy_items
  - legal

// src/components/template-components/footer/mocks.yaml

contact:
  title: Kontakt
  content:
    $ref: template-components/footer/contact
    $tpl: template-components/footer/contact
menu:
  title: Rechtliches
  content:
    $ref: template-components/footer/menu
    $tpl: template-components/footer/menu
social_nav:
  $ref: template-components/footer/social-nav
  $tpl: template-components/footer/social-nav
legal: >
  © Finstral AG Eingez. Ges. Kapital: € 5.648.702,25 MwSt.-Nr./Handelsregister
  Bozen Nr.: 00122260219 UsSt. Id. Nr. IT00122260219
copy_items:
  $render:
    - $ref: template-components/footer/copy-item#item-1
      $tpl: template-components/footer/copy-item
    - $ref: template-components/footer/copy-item#item-2
      $tpl: template-components/footer/copy-item
    - $ref: template-components/footer/copy-item#item-3
      $tpl: template-components/footer/copy-item
    - $ref: template-components/footer/copy-item#item-4
      $tpl: template-components/footer/copy-item
    - $ref: template-components/footer/copy-item#item-5
      $tpl: template-components/footer/copy-item
    - $ref: template-components/footer/copy-item#item-6
      $tpl: template-components/footer/copy-item
    - $ref: template-components/footer/copy-item#item-7
      $tpl: template-components/footer/copy-item

// src/components/template-components/footer/footer.twig

<footer class="Footer js-Footer u-container u-grid u-breakout u-typo-TextM">
	<img src="{{ asset_path() }}/img/logo.svg" aria-hidden="true" width="150" height="24" class="Footer-logoImage" alt="Finstral">

	{# mobile #}
	<div class="Footer-hidden--desktop Footer-accordion">
		{% include "@template-components/footer/details/details.twig" with {
			content: contact.content,
			title: contact.title,
			classes: ["Footer-contact"],
		} only %}
		<!-- [html-validate-disable-block unique-landmark -- disabling to avoid false positive because this menu exists twice in template but will only get rendered once] -->
		{% include "@template-components/footer/details/details.twig" with {
			content: menu.content,
			title: menu.title,
			classes: ["Footer-menu"],
		} only %}
	</div>

	{# tablet and dektop #}
	<section class="Footer-contact Footer-hidden--mobile" aria-labelledby="footer-{{ contact.title|clean_id }}">
		<h2 id="footer-{{ contact.title|clean_id }}" hidden>{{ contact.title }}</h2>
		{{ contact.content }}
	</section>
	<section class="Footer-menu Footer-hidden--mobile" aria-labelledby="footer-{{ menu.title|clean_id }}">
		<h2 id="footer-{{ menu.title|clean_id }}" hidden>{{ menu.title }}</h2>
		<!-- [html-validate-disable-block unique-landmark -- disabling to avoid false positive because this menu exists twice in template but will only get rendered once] -->
		{{ menu.content }}
	</section>
	<div class="Footer-social">
		{{ social_nav }}
	</div>
	<div class="Footer-copy">
		{{ copy_items }}
	</div>
	<div class="Footer-legal u-typo-TextS">
		{{ legal }}
	</div>
</footer>