slide-benefits

// src/components/patterns/story-slider/slide-benefits/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: patterns/story-slider/slide-benefits
type: object
required:
  - benefits
  - color_scheme
  - title
additionalProperties: false
properties:
  color_scheme:
    type: string
    enum:
      - white
      - jakobskraut
      - terrakotta
      - schwarzesche
      - latsche
      - schlern
      - estrich
      - leinen
      - sandstein
  overline:
    type: string
  title:
    type: string
  benefits:
    type: array
    items:
      type: string
  contact:
    format: html
    type: string
    description: /pattern/story-slider/slide-benefits/contact

// src/components/patterns/story-slider/slide-benefits/mocks.yaml

color_scheme: white
overline: Vorteile
title: Finstral bietet Monteuren hohe Standards
benefits:
  - Ausbildung
  - Ausstattung
  - Bezahlung
  - Arbeitsplanung
  - Qualitätsprodukte
contact:
  $ref: patterns/story-slider/slide-benefits/contact
  $tpl: patterns/story-slider/slide-benefits/contact
$variants:
  - $name: No contact
    contact: null
    color_scheme: jakobskraut
  - $name: Short list
    benefits:
      - Ausbildung
      - Ausstattung
      - Bezahlung
    $opts:
      benefits: overwrite
    color_scheme: schlern

// src/components/patterns/story-slider/slide-benefits/slide-benefits.twig

{% set label = "slide-benefits-" ~ random() %}

<section aria-labelledby="{{ label }}" aria-roledescription="slide" aria-brailleroledescription="sld" class="StorySliderSlideBenefits StorySlider-content" data-theme="{{ color_scheme }}" role="group">
	<h2 class="StorySliderSlideBenefits-title" id="{{ label }}">
		{%- if overline -%}
			<span class="StorySlider-slideOverline">{{ overline }}</span>
			<span class="visually-hidden"> : </span>
		{% endif %}

		{{ title }}
	</h2>

	<ul class="StorySliderSlideBenefits-list">
		{%- for benefit in benefits -%}
			<li class="StorySliderSlideBenefits-item">
				{% include "@elements/icon/icon.twig" with {
					classes: ["StorySliderSlideBenefits-icon"],
					name: "arrow_forward",
				} only %}
				{{ benefit }}
			</li>
		{%- endfor -%}
	</ul>

	{{ contact }}
</section>