story-slider

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

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/story-slider
type: object
additionalProperties: false
properties:
  slides:
    type: array
    items:
      type: string
      format: html
      description: patterns/story-slider/*

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

$variants:
  - $name: default
    slides:
      - $ref: patterns/story-slider/slide-intro#intro-with-video
        $tpl: patterns/story-slider/slide-intro
      - $ref: patterns/story-slider/slide-benefits
        $tpl: patterns/story-slider/slide-benefits
      - $ref: patterns/story-slider/slide-mixed#image-top
        $tpl: patterns/story-slider/slide-mixed
      - $ref: patterns/story-slider/slide-mixed
        $tpl: patterns/story-slider/slide-mixed
      - $ref: patterns/story-slider/slide-image#with-title-and-overline
        $tpl: patterns/story-slider/slide-image
      - $ref: patterns/story-slider/slide-video#with-title-and-overline
        $tpl: patterns/story-slider/slide-video
  - $name: default with image
    slides:
      - $ref: patterns/story-slider/slide-intro#intro-with-image
        $tpl: patterns/story-slider/slide-intro
      - $ref: patterns/story-slider/slide-benefits
        $tpl: patterns/story-slider/slide-benefits
      - $ref: patterns/story-slider/slide-mixed#image-top
        $tpl: patterns/story-slider/slide-mixed
      - $ref: patterns/story-slider/slide-mixed
        $tpl: patterns/story-slider/slide-mixed
      - $ref: patterns/story-slider/slide-image#with-title-and-overline
        $tpl: patterns/story-slider/slide-image
      - $ref: patterns/story-slider/slide-video
        $tpl: patterns/story-slider/slide-video
  - $name: Three Up
    slides:
      - $ref: patterns/story-slider/slide-intro#intro-with-video
        $tpl: patterns/story-slider/slide-intro
      - $ref: patterns/story-slider/slide-image
        $tpl: patterns/story-slider/slide-image
      - $ref: patterns/story-slider/slide-benefits
        $tpl: patterns/story-slider/slide-benefits
  - $name: Intro And Two Video Slides
    slides:
      - $ref: patterns/story-slider/slide-intro#intro-with-video
        $tpl: patterns/story-slider/slide-intro
      - $ref: patterns/story-slider/slide-video
        $tpl: patterns/story-slider/slide-video
      - $ref: patterns/story-slider/slide-video
        $tpl: patterns/story-slider/slide-video

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

{{ attach_library('finstral_global/pattern-story-slider') }}

{% set id = "slider-" ~ random() %}
{% set label = id ~ "-heading" %}
{% set track_id = id ~ "-track" %}

<story-slider aria-labelledby="{{ label }}" aria-roledescription="{{ "story_slider.role_description"|tc }}" aria-brailleroledescription="sldshw" class="StorySlider" role="group">
	<span id="{{ label }}" hidden>{{ "story_slider.section_heading"|tc }}</span>
	<div class="StorySlider-controlsWrapper">
		<div class="StorySlider-controls">
			<button aria-controls="{{ track_id }}" class="StorySlider-control StorySlider-control--prev" type="button" hidden>
				{% include "@elements/icon/icon.twig" with {
					name: 'chevron_left',
				} only %}
				<span class="visually-hidden">{{ "slider.previous"|tc }}</span>
			</button>

			<button aria-controls="{{ track_id }}" class="StorySlider-control StorySlider-control--next" type="button" hidden>
				{% include "@elements/icon/icon.twig" with {
					name: 'chevron_right',
				} only %}
				<span class="visually-hidden">{{ "slider.next"|tc }}</span>
			</button>

			<button aria-controls="{{ track_id }}" class="StorySlider-control StorySlider-control--replay" type="button" hidden>
				{% include "@elements/icon/icon.twig" with {
					name: 'replay',
				} only %}
				<span class="visually-hidden">{{ "slider.replay"|tc }}</span>
			</button>
		</div>
	</div>
	<div class="StorySlider-slidesWrapper">
		<ul class="StorySlider-slidesTrack" id="{{ track_id }}">
			{%- for slide in slides -%}
				<li class="StorySlider-slide {% if loop.first -%} is-active {%- endif -%}" data-index="{{ loop.index }}">
					{{ slide }}
				</li>
			{%- endfor -%}
		</ul>
	</div>
	<div class="StorySlider-progressIndicator" hidden>
		{% for slide in slides %}
			<svg class="StorySlider-progressIndicatorItem {% if loop.first %} is-active {% endif %}" fill="#333" viewBox="0 0 200 8" xmlns="http://www.w3.org/2000/svg">
				<rect x="0" y="0" width="100%" height="100%" />
			</svg>
		{% endfor %}
	</div>
</story-slider>