social-nav

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

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/footer/social-nav
additionalProperties: false
properties:
  label:
    type: string
  items:
    type: array
    items:
      type: object
      properties:
        title:
          type: string
        url:
          type: string
          format: uri-reference
        rel:
          type: string
          enum:
            - nofollow
        target:
          type: string
          enum:
            - _blank
            - _self
      required:
        - title
        - url
required:
  - items
  - label

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

items:
  - title: facebook
    url: url
    rel: nofollow
    target: _blank
  - title: instagram
    url: url
    rel: nofollow
    target: _blank
  - title: pinterest
    url: url
    rel: nofollow
    target: _blank
  - title: linkedin
    url: url
    rel: nofollow
    target: _blank
  - title: youtube
    url: url
    rel: nofollow
    target: _blank
label: social links

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

<nav aria-label="{{ label }}" itemscope itemtype="http://schema.org/SiteNavigationElement">
	<ul class="FooterSocialNav-list">
		{%- for item in items -%}
			<li>
				<a
					class="FooterSocialNav-link u-link"
					href="{{ item.url }}"
					itemprop="url"
					{% if item.in_active_trail %} aria-current="page"{% endif %}
					{% if item.rel %} rel="{{ item.rel }}"{% endif %}
					{% if item.target %} target="{{ item.target }}"{% endif %}
				>
					<span class="u-hiddenVisually" itemprop="name">
						{{ item.title }}
					</span>
					{% include "@elements/icon/icon.twig" with {
						name: item.title,
						classes: ["FooterSocialNav-icon"],
					} only %}
				</a>
			</li>
		{%- endfor -%}
	</ul>
</nav>