partner

// src/components/patterns/partner/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/partner
type: object
required:
  - logo
  - address
  - links
  - route
  - cta
  - gallery
additional_properties: false
properties:
  logo:
    type: string
    format: html
    description: /elements/partner-logo
  address:
    type: string
    format: html
  links:
    type: array
    items:
      type: string
      format: html
      description: patterns/link
  route:
    type: string
    format: html
    description: /elements/link
  badges:
    type: array
    items:
      type: string
  cta:
    type: string
    format: html
    description: /elements/button
  gallery:
    type: string
    format: html
    description: /elements/slider

// src/components/patterns/partner/mocks.yaml

logo:
  $tpl: /elements/partner-logo
  $ref: /elements/partner-logo
  width: 254
  height: 48
address: |
  Kroiher GmbH<br>
  Hochstraß 2<br>
  83064 Raubling<br>
  Deutschland
links:
  - $tpl: elements/link
    $ref: elements/link#small
    url: tel:+4908035964770
    label: T:&nbsp;08035&nbsp;964770
  - $tpl: elements/link
    $ref: elements/link#small
    url: mailto:post@kroiher-fenster.de
    label: post@kroiher-fenster.de
  - $tpl: elements/link
    $ref: elements/link#small
    url: https://www.kroiher-fenster.de
    label: www.kroiher-fenster.de
route:
  $tpl: /elements/link
  $ref: /elements/link#with-icon
  label: Route planen
badges:
  - 45-business-experience-en
  - certified-assembly-en
  - partner-studio-default
cta:
  $tpl: /elements/button
  $ref: /elements/button#secondary-link
  label: Details zum Partner
  large: true
gallery:
  $tpl: /elements/slider
  label: Bildergalerie
  slides:
    - $tpl: /elements/image
      $ref: /elements/image#src-with-lazy
      uri: /build/assets/img/dummy/partner/studio.webp
      width: 902
      height: 601
$variants:
  - $name: multiple images
    gallery:
      slides:
        - $tpl: /elements/image
          $ref: /elements/image#src-with-lazy
          uri: https://placehold.co/902x601?text=Bild 2
          width: 902
          height: 601
        - $tpl: /elements/image
          $ref: /elements/image#src-with-lazy
          uri: https://placehold.co/902x601?text=Bild 3
          width: 902
          height: 601
        - $tpl: /elements/image
          $ref: /elements/image#src-with-lazy
          uri: https://placehold.co/902x601?text=Bild 4
          width: 902
          height: 601

// src/components/patterns/partner/partner.twig

{{ attach_library('finstral_global/pattern-partner') }}

<article class="Partner u-container u-breakout u-grid">
	<div class="Partner-content">
		<div class="Partner-logo">
			{{ logo }}
		</div>

		<address class="Partner-address u-typo-TextM">
			{{ address }}
		</address>

		{% if route %}
			<div class="Partner-directions">
				{{ route }}
			</div>
		{% endif %}

		<ul class="Partner-links u-typo-TextM">
			{% for link in links %}
				<li class="Partner-link">{{ link }}</li>
			{% endfor %}
		</ul>

		{% if badges %}
			<ul class="Partner-badges">
				{% for badge in badges %}
					<li class="Partner-badge">
						{% include "@elements/image/image.twig" with {
							uri: asset_path() ~ "/img/certifications/" ~ badge ~ ".svg",
							is_lazy: true,
						} only %}
					</li>
				{% endfor %}
			</ul>
		{% endif %}

		{% if cta %}
			<div class="Partner-cta">
				{{ cta }}
			</div>
		{% endif %}
	</div>

	<div class="Partner-gallery">
		{% include "@elements/slider/slider.twig" with {
			label: "partner.gallery.heading"|tc,
			slides: gallery,
		} only %}
	</div>
</article>