From ecdd33fbfa935e2af882b738c6a747704c455f86 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Mon, 30 Sep 2024 08:28:46 +0200 Subject: [PATCH 1/8] feat: update api. cleans up the interfaces. --- .../Component/Slider__item/Slider__item.php | 8 +-- .../Slider__item/slider__item.blade.php | 10 +++- .../Component/Slider__item/slider__item.json | 53 ++++++++++++------- .../Slider__item/sub/video.blade.php | 8 +-- 4 files changed, 51 insertions(+), 28 deletions(-) diff --git a/source/php/Component/Slider__item/Slider__item.php b/source/php/Component/Slider__item/Slider__item.php index 88123045..6685aca1 100644 --- a/source/php/Component/Slider__item/Slider__item.php +++ b/source/php/Component/Slider__item/Slider__item.php @@ -29,9 +29,9 @@ public function init() { $this->data['classList'][] = $this->getBaseClass() . "--layout-" . $layout; } - if (!empty($desktop_image)) { + /*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)) { @@ -52,7 +52,7 @@ public function init() { //Recognize as an image - if(!$background_video) { + if(!$video) { $this->data['attributeList']['aria-label'] = $alt ? $alt : ''; $this->data['attributeList']['aria-labeledby'] = $this->getUid() . '__heading'; } @@ -63,7 +63,7 @@ public function init() { $this->data['imageStyle'] = []; //Add image to image styles - if($desktop_image) { + if($image) { $this->data['imageStyle']['background-image'] = "url('" . $desktop_image . "')"; } diff --git a/source/php/Component/Slider__item/slider__item.blade.php b/source/php/Component/Slider__item/slider__item.blade.php index a178015d..44889c68 100644 --- a/source/php/Component/Slider__item/slider__item.blade.php +++ b/source/php/Component/Slider__item/slider__item.blade.php @@ -9,7 +9,15 @@ @endif @if ($desktop_image) - {{$alt}} + @image([ + 'src' => $desktop_image, + 'alt' => $alt, + //'classList' => $classListDesktop, + 'cover' => true, + 'context' => ['component.slider', 'component.slider.image'] + ]) + @endimage + @endif @if ($slotHasData || $showContainer) diff --git a/source/php/Component/Slider__item/slider__item.json b/source/php/Component/Slider__item/slider__item.json index 5c2ea2c8..8f6e08db 100644 --- a/source/php/Component/Slider__item/slider__item.json +++ b/source/php/Component/Slider__item/slider__item.json @@ -2,39 +2,54 @@ "slug": "slider__item", "default": { "title": "", - "sub_title": "", + "subTitle": "", "text": "", + "cta": [], + "image": false, + "video": false, + "alt": "", + "focusPoint": {"top": 30, "left": 50}, + "link": false, "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 + "overlay": "none" }, "description": { "title": "A title for predefined layout", - "sub_title": "A sub-title for predefined layout", + "subTitle": "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", "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", + "focusPoint": "Where the focus point should be of an image when container dosen't match image ratio.", "link": "Where the slide should link to", + "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" + }, + "types": { + "title": "string|boolean", + "subTitle": "string|boolean", + "text": "string|boolean", + "cta": "array|boolean", + "image": "boolean|string|ImageInterface", + "video": "boolean|string", + "alt": "string", + "focusPoint": "array", + "link": "string|boolean", + "layout": "string", + "theme": "string", + "containerColor": "string", + "heroStyle": "string", + "textAlignment": "string", + "overlay": "string" }, "view": "slider__item.blade.php", "dependency": { diff --git a/source/php/Component/Slider__item/sub/video.blade.php b/source/php/Component/Slider__item/sub/video.blade.php index 12ec197e..7198094d 100644 --- a/source/php/Component/Slider__item/sub/video.blade.php +++ b/source/php/Component/Slider__item/sub/video.blade.php @@ -9,11 +9,12 @@ $baseClass."__background--video" ], 'formats' => [ - ['src' => $background_video, 'type' => "mp4"], + ['src' => $video, 'type' => "mp4"], ] ]) @endvideo -@if($showPauseButton) + + @button([ 'style' => 'filled', 'icon' => 'play_arrow', @@ -26,5 +27,4 @@ 'js-video-control' => '' ] ]) -@endbutton -@endif \ No newline at end of file +@endbutton \ No newline at end of file From a9b8025076f2843e79e796451c6a8331fab6f05c Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Mon, 30 Sep 2024 08:53:50 +0200 Subject: [PATCH 2/8] fix: general cleanup. --- .../Component/Slider__item/Slider__item.php | 6 ++-- .../Slider__item/slider__item.blade.php | 30 ++++++------------- .../Component/Slider__item/slider__item.json | 20 ++++++++----- .../Slider__item/sub/image.blade.php | 8 +++++ .../Slider__item/sub/video.blade.php | 6 ++-- 5 files changed, 37 insertions(+), 33 deletions(-) create mode 100644 source/php/Component/Slider__item/sub/image.blade.php diff --git a/source/php/Component/Slider__item/Slider__item.php b/source/php/Component/Slider__item/Slider__item.php index 6685aca1..8b0a3f71 100644 --- a/source/php/Component/Slider__item/Slider__item.php +++ b/source/php/Component/Slider__item/Slider__item.php @@ -34,7 +34,7 @@ public function init() { }*/ $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; } @@ -56,7 +56,7 @@ public function init() { $this->data['attributeList']['aria-label'] = $alt ? $alt : ''; $this->data['attributeList']['aria-labeledby'] = $this->getUid() . '__heading'; } - + /* if(!empty($focusPoint)) { //Create image style tag @@ -74,6 +74,6 @@ public function init() { //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 index 44889c68..d7a6a6f9 100644 --- a/source/php/Component/Slider__item/slider__item.blade.php +++ b/source/php/Component/Slider__item/slider__item.blade.php @@ -1,27 +1,17 @@
- @if ($link) - - @endif + + {{-- Link --}} + {!! $link ? '' : '' !!} - @if ($background_video) - @include('Slider__item.sub.video') - @endif - - @if ($desktop_image) - @image([ - 'src' => $desktop_image, - 'alt' => $alt, - //'classList' => $classListDesktop, - 'cover' => true, - 'context' => ['component.slider', 'component.slider.image'] - ]) - @endimage - - @endif + {{-- Assets --}} + @includeWhen($video, 'Slider__item.sub.video') + @includeWhen($image, 'Slider__item.sub.image') + {{-- Content --}} @if ($slotHasData || $showContainer)
+ {{$slot}} @if($title) @@ -70,8 +60,6 @@
@endif + {{ $link ? '' : '' }} {{-- Close link --}} - @if ($link) - - @endif
\ No newline at end of file diff --git a/source/php/Component/Slider__item/slider__item.json b/source/php/Component/Slider__item/slider__item.json index 8f6e08db..e145c891 100644 --- a/source/php/Component/Slider__item/slider__item.json +++ b/source/php/Component/Slider__item/slider__item.json @@ -2,7 +2,6 @@ "slug": "slider__item", "default": { "title": "", - "subTitle": "", "text": "", "cta": [], "image": false, @@ -10,33 +9,37 @@ "alt": "", "focusPoint": {"top": 30, "left": 50}, "link": false, + "linkDescription": "", "layout": "bottom", "theme": "base", "containerColor": "", "heroStyle": false, "textAlignment": "", - "overlay": "none" + "overlay": "none", + "slot": false, + "bottom": false }, "description": { "title": "A title for predefined layout", - "subTitle": "A sub-title for predefined layout", "text": "A text for predefined layout", - "cta": "Adds button with a link", + "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", "video": "A video background for the segment", "alt": "Alternative text", "focusPoint": "Where the focus point should be of an image when container dosen't match image ratio.", "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", "heroStyle": "Gives the slide a hero like appearance with larger text", "textAlignment": "Aligns the text in the container", - "overlay": "Adds an overlay to the image" + "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", - "subTitle": "string|boolean", "text": "string|boolean", "cta": "array|boolean", "image": "boolean|string|ImageInterface", @@ -44,12 +47,15 @@ "alt": "string", "focusPoint": "array", "link": "string|boolean", + "linkDescription": "string", "layout": "string", "theme": "string", "containerColor": "string", "heroStyle": "string", "textAlignment": "string", - "overlay": "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 new file mode 100644 index 00000000..44ee7985 --- /dev/null +++ b/source/php/Component/Slider__item/sub/image.blade.php @@ -0,0 +1,8 @@ +@image([ + 'src' => $image, + 'alt' => $alt, + //'classList' => $classListDesktop, + 'cover' => true, + 'context' => ['component.slider', 'component.slider.image'] +]) +@endimage \ No newline at end of file diff --git a/source/php/Component/Slider__item/sub/video.blade.php b/source/php/Component/Slider__item/sub/video.blade.php index 7198094d..3c5a127c 100644 --- a/source/php/Component/Slider__item/sub/video.blade.php +++ b/source/php/Component/Slider__item/sub/video.blade.php @@ -10,7 +10,8 @@ ], 'formats' => [ ['src' => $video, 'type' => "mp4"], - ] + ], + 'context' => ['component.slider', 'component.slider.video'] ]) @endvideo @@ -25,6 +26,7 @@ ], 'attributeList' => [ 'js-video-control' => '' - ] + ], + 'context' => ['component.slider', 'component.slider.video', 'component.slider.video.button'] ]) @endbutton \ No newline at end of file From 0e2b30c916e79d3dd113d3d607b24b2de14238b5 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Mon, 30 Sep 2024 08:54:33 +0200 Subject: [PATCH 3/8] fix: docs. --- source/php/Component/Slider__item/slider__item.blade.php | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/source/php/Component/Slider__item/slider__item.blade.php b/source/php/Component/Slider__item/slider__item.blade.php index d7a6a6f9..a1db5d28 100644 --- a/source/php/Component/Slider__item/slider__item.blade.php +++ b/source/php/Component/Slider__item/slider__item.blade.php @@ -1,7 +1,7 @@
- {{-- Link --}} + {{-- Link (open) --}} {!! $link ? '' : '' !!} {{-- Assets --}} @@ -60,6 +60,7 @@ @endif - {{ $link ? '' : '' }} {{-- Close link --}} + {{-- Link (close) --}} + {{ $link ? '' : '' }}
\ No newline at end of file From cd6a564062735ae084ce6454b1928c15d0294c67 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Mon, 30 Sep 2024 09:39:34 +0200 Subject: [PATCH 4/8] fix: remove manually entered focus point --- .../Component/Slider__item/Slider__item.php | 32 +------------------ .../Component/Slider__item/slider__item.json | 3 -- .../Slider__item/sub/image.blade.php | 3 +- 3 files changed, 2 insertions(+), 36 deletions(-) diff --git a/source/php/Component/Slider__item/Slider__item.php b/source/php/Component/Slider__item/Slider__item.php index 8b0a3f71..56561795 100644 --- a/source/php/Component/Slider__item/Slider__item.php +++ b/source/php/Component/Slider__item/Slider__item.php @@ -29,10 +29,6 @@ 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($subTitle) ||!empty($text) || !empty($bottom)) { $this->data['showContainer'] = true; @@ -43,37 +39,11 @@ public function init() { } if (!empty($alt) && empty($altMobile)) { - $this->data['altMobile'] = $alt; + $this->data['alt'] = $alt; } if ($heroStyle) { $this->data['classList'][] = $this->getBaseClass() . "--hero"; } - - - //Recognize as an image - if(!$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($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.json b/source/php/Component/Slider__item/slider__item.json index e145c891..7ff88f73 100644 --- a/source/php/Component/Slider__item/slider__item.json +++ b/source/php/Component/Slider__item/slider__item.json @@ -7,7 +7,6 @@ "image": false, "video": false, "alt": "", - "focusPoint": {"top": 30, "left": 50}, "link": false, "linkDescription": "", "layout": "bottom", @@ -26,7 +25,6 @@ "image": "An url or path to an image to use as background for the segment", "video": "A video background for the segment", "alt": "Alternative text", - "focusPoint": "Where the focus point should be of an image when container dosen't match image ratio.", "link": "Where the slide should link to", "linkDescription": "A description of the link", "layout": "Which layouts to use", @@ -45,7 +43,6 @@ "image": "boolean|string|ImageInterface", "video": "boolean|string", "alt": "string", - "focusPoint": "array", "link": "string|boolean", "linkDescription": "string", "layout": "string", diff --git a/source/php/Component/Slider__item/sub/image.blade.php b/source/php/Component/Slider__item/sub/image.blade.php index 44ee7985..a92e7fe7 100644 --- a/source/php/Component/Slider__item/sub/image.blade.php +++ b/source/php/Component/Slider__item/sub/image.blade.php @@ -1,7 +1,6 @@ @image([ 'src' => $image, - 'alt' => $alt, - //'classList' => $classListDesktop, + 'alt' => $alt ?? false, 'cover' => true, 'context' => ['component.slider', 'component.slider.image'] ]) From bd89cdb4fe160da29fe60baa4fed436f09c51d5c Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Mon, 30 Sep 2024 11:27:45 +0200 Subject: [PATCH 5/8] fix: image end link not escaped. --- source/php/Component/Slider__item/slider__item.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/php/Component/Slider__item/slider__item.blade.php b/source/php/Component/Slider__item/slider__item.blade.php index a1db5d28..85f59dfa 100644 --- a/source/php/Component/Slider__item/slider__item.blade.php +++ b/source/php/Component/Slider__item/slider__item.blade.php @@ -61,6 +61,6 @@ @endif {{-- Link (close) --}} - {{ $link ? '' : '' }} + {!! $link ? '' : '' !!} \ No newline at end of file From 471551d1e456c425e8cc8e11bb8953df5915d9d2 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Mon, 30 Sep 2024 11:58:49 +0200 Subject: [PATCH 6/8] fix: alt texts --- source/php/Component/Slider__item/Slider__item.php | 2 +- source/php/Component/Slider__item/sub/image.blade.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/source/php/Component/Slider__item/Slider__item.php b/source/php/Component/Slider__item/Slider__item.php index 56561795..24ef14e7 100644 --- a/source/php/Component/Slider__item/Slider__item.php +++ b/source/php/Component/Slider__item/Slider__item.php @@ -38,7 +38,7 @@ public function init() { $this->data['classList'][] = $this->getBaseClass() . '--overlay-' . $overlay; } - if (!empty($alt) && empty($altMobile)) { + if (!empty($alt)) { $this->data['alt'] = $alt; } diff --git a/source/php/Component/Slider__item/sub/image.blade.php b/source/php/Component/Slider__item/sub/image.blade.php index a92e7fe7..3fda6c06 100644 --- a/source/php/Component/Slider__item/sub/image.blade.php +++ b/source/php/Component/Slider__item/sub/image.blade.php @@ -1,6 +1,6 @@ @image([ 'src' => $image, - 'alt' => $alt ?? false, + 'alt' => $alt ?? null, 'cover' => true, 'context' => ['component.slider', 'component.slider.image'] ]) From cfe4ae1dfa8e7156f1e0290936c4781615fadf23 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Mon, 30 Sep 2024 12:14:01 +0200 Subject: [PATCH 7/8] fix: add class to image component. --- source/php/Component/Slider__item/sub/image.blade.php | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/source/php/Component/Slider__item/sub/image.blade.php b/source/php/Component/Slider__item/sub/image.blade.php index 3fda6c06..a02e576c 100644 --- a/source/php/Component/Slider__item/sub/image.blade.php +++ b/source/php/Component/Slider__item/sub/image.blade.php @@ -1,7 +1,8 @@ @image([ - 'src' => $image, - 'alt' => $alt ?? null, - 'cover' => true, - 'context' => ['component.slider', 'component.slider.image'] + 'classList' => [$baseClass.'__image'] + 'src' => $image, + 'alt' => $alt ?? null, + 'cover' => true, + 'context' => ['component.slider', 'component.slider.image'] ]) @endimage \ No newline at end of file From 780c6c7ca43f5a4e3e2f469a89abad1c9df7b846 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Mon, 30 Sep 2024 12:17:02 +0200 Subject: [PATCH 8/8] fix: typo missing , --- source/php/Component/Slider__item/sub/image.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/php/Component/Slider__item/sub/image.blade.php b/source/php/Component/Slider__item/sub/image.blade.php index a02e576c..ce37b8b1 100644 --- a/source/php/Component/Slider__item/sub/image.blade.php +++ b/source/php/Component/Slider__item/sub/image.blade.php @@ -1,5 +1,5 @@ @image([ - 'classList' => [$baseClass.'__image'] + 'classList' => [$baseClass . '__image'], 'src' => $image, 'alt' => $alt ?? null, 'cover' => true,