Feat/image in slider (#454)

* feat: update api. cleans up the interfaces. * fix: general cleanup. * fix: docs. * fix: remove manually entered focus point * fix: image end link not escaped. * fix: alt texts * fix: add class to image component. * fix: typo missing , --------- Co-authored-by: Sebastian Thulin <sebastian.thulin@helsingborg.se>
helsingborg-stad · Sep 30, 2024 · 4458a55 · 4458a55
1 parent fff6c19
commit 4458a55
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 70 deletions.
diff --git a/source/php/Component/Slider__item/Slider__item.php b/source/php/Component/Slider__item/Slider__item.php
@@ -29,51 +29,21 @@ public function init() {
             $this->data['classList'][] = $this->getBaseClass() . "--layout-" . $layout;
         }
 
-        if (!empty($desktop_image)) {
-            $this->data['attributeList']['style'] = "background-image: url('".$desktop_image."');";
-        }
-
         $this->data['showContainer'] = false;
-        if (!empty($title) || !empty($sub_title) ||!empty($text) || !empty($bottom)) {
+        if (!empty($title) || !empty($subTitle) ||!empty($text) || !empty($bottom)) {
             $this->data['showContainer'] = true;
         }
 
         if ($overlay && ($text || $title)) {
             $this->data['classList'][] = $this->getBaseClass() . '--overlay-' . $overlay;
         }
 
-        if (!empty($alt) && empty($altMobile)) {
-            $this->data['altMobile'] = $alt;
+        if (!empty($alt)) {
+            $this->data['alt'] = $alt;
         }
 
         if ($heroStyle) {
             $this->data['classList'][] = $this->getBaseClass() . "--hero";
         }
-
-
-        //Recognize as an image
-        if(!$background_video) {
-            $this->data['attributeList']['aria-label'] = $alt ? $alt : '';
-            $this->data['attributeList']['aria-labeledby'] = $this->getUid() . '__heading';
-        }
-
-        if(!empty($focusPoint)) {
-
-            //Create image style tag
-            $this->data['imageStyle'] = []; 
-
-            //Add image to image styles
-            if($desktop_image) {
-                $this->data['imageStyle']['background-image'] = "url('" . $desktop_image . "')"; 
-            }
-
-            //Add background position to image styles
-            if(is_array($focusPoint) && array_filter($focusPoint)) {
-                $this->data['imageStyle']['background-position'] = $focusPoint['left'] . "% " . $focusPoint['top'] . "%"; 
-            }
-
-            //Stringify image styles
-            $this->data['attributeList']['style'] = self::buildInlineStyle($this->data['imageStyle']); 
-        }
     }
 }
diff --git a/source/php/Component/Slider__item/slider__item.blade.php b/source/php/Component/Slider__item/slider__item.blade.php
@@ -1,19 +1,17 @@
 <!-- slider__item.blade.php -->
 <section class="{{ $class }}" {!! $attribute !!}>
-    @if ($link)
-        <a class="{{ $baseClass }}__link" href="{{ $link }}" {{ $linkDescription ? 'aria-label="' . $linkDescription . '"' : "" }} tabindex="0">
-    @endif
+
+    {{-- Link (open) --}}
+    {!! $link ? '<a class="' . $baseClass . '__link" href="' . $link . '" ' . ($linkDescription ? 'aria-label="' . $linkDescription . '"' : '') . ' tabindex="0">' : '' !!}
 
-    @if ($background_video)
-        @include('Slider__item.sub.video')
-    @endif
-
-    @if ($desktop_image)
-        <img class="u-sr__only {{ $classListDesktop }}" src="{{ $desktop_image }}" alt="{{$alt}}"/>
-    @endif
+    {{-- Assets --}}
+    @includeWhen($video, 'Slider__item.sub.video')
+    @includeWhen($image, 'Slider__item.sub.image')
 
+    {{-- Content --}}
     @if ($slotHasData || $showContainer)
         <div class="{{ $baseClass }}__container">
+
             {{$slot}}
 
             @if($title)
@@ -62,8 +60,7 @@
         </div>
     @endif
 
+    {{-- Link (close) --}}
+    {!! $link ? '</a>' : '' !!}
 
-    @if ($link)
-        </a>
-    @endif
 </section>
diff --git a/source/php/Component/Slider__item/slider__item.json b/source/php/Component/Slider__item/slider__item.json
@@ -2,39 +2,57 @@
     "slug": "slider__item",
     "default": {
         "title": "",
-        "sub_title": "",
         "text": "",
+        "cta": [],
+        "image": false,
+        "video": false,
+        "alt": "",
+        "link": false,
+        "linkDescription": "",
         "layout": "bottom",
         "theme": "base",
-        "background_image": "",
-        "background_video": false,
-        "desktop_image": "",
-        "link": false,
-        "linkDescription": false,
         "containerColor": "",
-        "alt": "",
-        "cta": [],
         "heroStyle": false,
-        "focusPoint": {"top": 30, "left": 50},
         "textAlignment": "",
         "overlay": "none",
-        "showPauseButton": true
+        "slot": false,
+        "bottom": false
     },
     "description": {
         "title": "A title for predefined layout",
-        "sub_title": "A sub-title for predefined layout",
         "text": "A text for predefined layout",
-        "layout": "Which layouts to use",
-        "theme": "The color palette to be used",
+        "cta": "Adds button with a link, should conform with the button component specification (title, href)",
         "image": "An url or path to an image to use as background for the segment",
-        "background_video": "A video background for the segment",
+        "video": "A video background for the segment",
+        "alt": "Alternative text",
         "link": "Where the slide should link to",
+        "linkDescription": "A description of the link",
+        "layout": "Which layouts to use",
+        "theme": "The color palette to be used",
         "containerColor": "Determines what color the container and text should be",
-        "alt": "Alternative text",
-        "cta": "Adds button with a link",
         "heroStyle": "Gives the slide a hero like appearance with larger text",
-        "focusPoint": "Where the focus point should be of an image when container dosen't match image ratio.",
-        "showPauseButton": "To show or not to show a pause button on the slide when it is a video."
+        "textAlignment": "Aligns the text in the container",
+        "overlay": "Adds an overlay to the image",
+        "slot": "A slot for custom content, placed above the predefined layout",
+        "bottom": "A slot for custom content, placed below the predefined layout"
+    },
+    "types": {
+        "title": "string|boolean",
+        "text": "string|boolean",
+        "cta": "array|boolean",
+        "image": "boolean|string|ImageInterface",
+        "video": "boolean|string",
+        "alt": "string",
+        "link": "string|boolean",
+        "linkDescription": "string",
+        "layout": "string",
+        "theme": "string",
+        "containerColor": "string",
+        "heroStyle": "string",
+        "textAlignment": "string",
+        "overlay": "string",
+        "slot": "boolean|string",
+        "bottom": "boolean|string"
     },
     "view": "slider__item.blade.php",
     "dependency": {

diff --git a/source/php/Component/Slider__item/sub/image.blade.php b/source/php/Component/Slider__item/sub/image.blade.php
@@ -0,0 +1,8 @@
+@image([
+  'classList' => [$baseClass . '__image'],
+  'src' => $image,
+  'alt' => $alt ?? null,
+  'cover' => true,
+  'context' => ['component.slider', 'component.slider.image']
+])
+@endimage
diff --git a/source/php/Component/Slider__item/sub/video.blade.php b/source/php/Component/Slider__item/sub/video.blade.php
@@ -9,11 +9,13 @@
         $baseClass."__background--video"
     ],
     'formats' => [
-        ['src' => $background_video, 'type' => "mp4"],
-    ]
+        ['src' => $video, 'type' => "mp4"],
+    ],
+    'context' => ['component.slider', 'component.slider.video']
 ])
 @endvideo
-@if($showPauseButton)
+
+<!-- Play/pause button -->
 @button([
     'style'         => 'filled',
     'icon'          => 'play_arrow',
@@ -24,7 +26,7 @@
     ],
     'attributeList' => [
         'js-video-control' => ''
-    ]
+    ],
+    'context' => ['component.slider', 'component.slider.video', 'component.slider.video.button']
 ])
-@endbutton
-@endif
+@endbutton