link

// src/components/elements/link/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/link
additionalProperties: false
properties:
  aria_label:
    type: string
  url:
    type: string
    format: uri-reference
  label:
    type: string
  target:
    type: string
    enum:
      - _blank
      - _self
      - _parent
      - _top
  classes:
    type: array
    items:
      type: string
  icon:
    type: boolean
  icon_position:
    type: string
    enum:
      - end
      - start
  icon_name:
    type: string
  size:
    type: string
    enum:
      - TextM
      - TextL
      - HeadlineS
      - HeadlineM
required:
  - url
  - label

// src/components/elements/link/mocks.yaml

url: https://factorial.io
label: text link
$variants:
  - $name: With icon
    icon: true
  - $name: With custom icon
    icon: true
    icon_name: chevron_right
  - $name: With custom icon inline start
    icon: true
    icon_position: start
    icon_name: email
  - $name: With aria label
    icon: true
    icon_name: chevron_right
    aria_label: Extranet service support
    label: Suport
  - $name: Extra Large
    size: HeadlineM
  - $name: Large
    size: HeadlineS
  - $name: Medium
    size: TextL
  - $name: Small
    size: TextM

// src/components/elements/link/link.twig

{% set icon_name = icon_name|default("arrow_up") %}
{% set icon_position = icon_position|default("end") %}

<a
	href="{{ url }}"
	class="Link u-link Link--icon{{ icon_position|capitalize }}
		{%- if icon %}
			Link--icon u-typo-Button
		{%- else %}
			u-typo-{{ size|default("HeadlineS") }}
		{%- endif -%}
		{%- if classes %} {{ classes|join(" ") }}{% endif -%}"
		{%- if itemprop %} itemprop="{{ itemprop }}" {% endif -%}
	{%- if target %} target="{{ target }}" {% endif -%}
	{%- if target == "_blank" %} rel="noreferrer noopener"{% endif -%}
	{%- if aria_label %} aria-label="{{ aria_label }}"{%- endif -%}
>
	{{ label }}
	{% if icon %}
		{% include "@elements/icon/icon.twig" with {
			name: icon_name,
			classes: ["Link-icon"],
		} only %}
	{% endif %}
</a>