From f0885faed1a291aa1745a4dc26df43b18ff82089 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Tue, 1 Oct 2024 08:06:15 +0200 Subject: [PATCH 1/4] fix: replace background image with image --- .../php/Component/Card/components/image.blade.php | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/source/php/Component/Card/components/image.blade.php b/source/php/Component/Card/components/image.blade.php index 44648552..6c0366b7 100644 --- a/source/php/Component/Card/components/image.blade.php +++ b/source/php/Component/Card/components/image.blade.php @@ -1,3 +1,14 @@ -
+ +
+ @image([ + 'src' => $image['src'], + 'alt' => $image['alt'], + 'cover' => true, + 'classList' => [ + $baseClass . '__image' + ] + ]) + @endimage
\ No newline at end of file From e17fd73408d6ef6c19378c3006b581845efb3178 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Tue, 1 Oct 2024 15:26:04 +0200 Subject: [PATCH 2/4] feat: restructure card. --- source/php/Component/Card/Card.php | 2 +- source/php/Component/Card/card.json | 3 +- .../components/collapsiableButton.blade.php | 6 ++- .../Card/components/heading.blade.php | 38 ++++++++++++++----- .../Component/Card/components/image.blade.php | 7 +--- .../Card/components/subHeading.blade.php | 3 -- .../Component/Card/partials/body.blade.php | 4 +- 7 files changed, 38 insertions(+), 25 deletions(-) delete mode 100644 source/php/Component/Card/components/subHeading.blade.php diff --git a/source/php/Component/Card/Card.php b/source/php/Component/Card/Card.php index 7015b6ef..65f98625 100644 --- a/source/php/Component/Card/Card.php +++ b/source/php/Component/Card/Card.php @@ -22,7 +22,7 @@ public function init() $this->data['floatingSlotHasData'] = $this->slotHasData('floating'); if (isset($image['padded']) && $image['padded']) { - $this->data['paddedImage'] = $this->getBaseClass() . '__image-background--padded'; + $this->getBaseClass('padded-image', true); } if ($image && !empty($image['src'])) { diff --git a/source/php/Component/Card/card.json b/source/php/Component/Card/card.json index 748806c4..472ec409 100644 --- a/source/php/Component/Card/card.json +++ b/source/php/Component/Card/card.json @@ -19,7 +19,7 @@ "color": "default", "tags": null, "link": "", - "ratio": "4:3", + "ratio": "16:9", "date": false, "dateBadge": false, "hasFooter": false, @@ -40,7 +40,6 @@ "slot": "Empty slot placed in the middle of card.", "top": "Empty slot placed in the top of card.", "bottom": "Empty slot placed in the bottom of card.", - "hasRipple": "Enable / disable ripple fx", "buttons": "Array with buttons that has parameters like href, text and attributeList.", "avatar": "Array with the avatar data such as image and name.", "dropdown": "Array with the dropdown parameters as items as an array, direction: top, right, bottom, left, position: top, bottom ", diff --git a/source/php/Component/Card/components/collapsiableButton.blade.php b/source/php/Component/Card/components/collapsiableButton.blade.php index f73fea86..9358e1f5 100644 --- a/source/php/Component/Card/components/collapsiableButton.blade.php +++ b/source/php/Component/Card/components/collapsiableButton.blade.php @@ -1,7 +1,11 @@ @button([ 'style' => 'basic', 'size' => 'md', - "attributeList" => ['js-toggle-trigger' => $collpaseID], + 'toggle' => true, + "attributeList" => [ + 'js-toggle-trigger' => $collpaseID, + 'data-toggle-icon' => 'close' + ], 'icon' => 'expand_more', 'classList' => [$baseClass . '__title-expand-button'] ]) diff --git a/source/php/Component/Card/components/heading.blade.php b/source/php/Component/Card/components/heading.blade.php index 76ffdf23..a5d9739e 100644 --- a/source/php/Component/Card/components/heading.blade.php +++ b/source/php/Component/Card/components/heading.blade.php @@ -1,21 +1,39 @@ @group([ 'justifyContent' => 'space-between', - 'alignItems' => 'start', + 'alignItems' => 'center', ]) @group([ 'direction' => 'vertical' ]) - @typography([ - 'element' => 'h2', - 'variant' => 'h3', - 'classList' => [ - $baseClass."__heading" - ] - ]) - {!! $heading !!} - @endtypography + + @if($heading) + @typography([ + 'element' => 'h2', + 'variant' => 'h3', + 'classList' => [ + $baseClass."__heading", + 'u-margin__y--0' + ] + ]) + {!! $heading !!} + @endtypography + @endif + + @if($subHeading) + @typography([ + 'element' => 'span', + 'variant' => 'meta', + 'classList' => [ + $baseClass . '__sub-heading', + 'u-margin__y--0' + ] + ]) + {!! $subHeading !!} + @endtypography + @endif @includeWhen($meta && !$metaFirst, 'Card.components.meta') @endgroup + @includeWhen($collapsible, 'Card.components.collapsiableButton') @includeWhen($icon && !empty($displayIcon), 'Card.components.icon') @endgroup \ No newline at end of file diff --git a/source/php/Component/Card/components/image.blade.php b/source/php/Component/Card/components/image.blade.php index 6c0366b7..6b7a2d16 100644 --- a/source/php/Component/Card/components/image.blade.php +++ b/source/php/Component/Card/components/image.blade.php @@ -1,10 +1,7 @@ -
@image([ - 'src' => $image['src'], - 'alt' => $image['alt'], + 'src' => is_array($image) ? $image['src'] : $image, + 'alt' => isset($image['alt']) ? $image['alt'] : null, 'cover' => true, 'classList' => [ $baseClass . '__image' diff --git a/source/php/Component/Card/components/subHeading.blade.php b/source/php/Component/Card/components/subHeading.blade.php deleted file mode 100644 index 16952e73..00000000 --- a/source/php/Component/Card/components/subHeading.blade.php +++ /dev/null @@ -1,3 +0,0 @@ -@typography(['element' => 'h3', 'variant' => 'h4']) - {!! $subHeading !!} -@endtypography \ No newline at end of file diff --git a/source/php/Component/Card/partials/body.blade.php b/source/php/Component/Card/partials/body.blade.php index 06df6660..931bca4d 100644 --- a/source/php/Component/Card/partials/body.blade.php +++ b/source/php/Component/Card/partials/body.blade.php @@ -4,10 +4,8 @@ {!! $floating !!}
@endif - @includeWhen($collapsible, 'Card.components.collapsiableButton') @includeWhen($meta && $metaFirst, 'Card.components.meta') - @includeWhen($heading || ($meta && !$metaFirst) || $icon || (!$image || empty($image['src'] && ($dateBadge && $date))), 'Card.components.heading') - @includeWhen($subHeading, 'Card.components.subHeading') + @includeWhen($heading || $subHeading || ($meta && !$metaFirst) || $icon || (!$image || empty($image['src'] && ($dateBadge && $date))), 'Card.components.heading') @includeWhen($date && !$dateBadge, 'Card.components.date') @includeWhen($content, 'Card.components.content')
\ No newline at end of file From de5d17666d426e8c8233b394dd0d3018db88ff25 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Wed, 2 Oct 2024 10:41:58 +0200 Subject: [PATCH 3/4] fix: component adjustments. --- source/php/Component/Block/block.json | 10 +-- source/php/Component/Card/Card.php | 23 ++----- source/php/Component/Card/card.blade.php | 1 - source/php/Component/Card/card.json | 64 +++++++++---------- .../Card/components/heading.blade.php | 2 +- .../Component/Card/components/image.blade.php | 3 +- source/php/Component/Icon/icon.json | 9 ++- source/php/Component/Image/Image.php | 5 ++ .../php/Component/Image/sub/image.blade.php | 1 - 9 files changed, 53 insertions(+), 65 deletions(-) diff --git a/source/php/Component/Block/block.json b/source/php/Component/Block/block.json index f4d8ae7f..11382cf0 100644 --- a/source/php/Component/Block/block.json +++ b/source/php/Component/Block/block.json @@ -10,9 +10,7 @@ "ratio": "4:3", "date": "", "dateBadge": false, - "icon": false, - "postId": false, - "postType": "" + "icon": false }, "description": { "heading": "The heading of the block", @@ -34,11 +32,9 @@ "image": "array|boolean|ImageInterface", "link": "string", "ratio": "string", - "date": "string", + "date": "string|boolean", "dateBadge": "boolean", - "icon": "boolean", - "postId": "boolean", - "postType": "string" + "icon": "boolean|array" }, "view": "block.blade.php", "dependency": { diff --git a/source/php/Component/Card/Card.php b/source/php/Component/Card/Card.php index 65f98625..55aed70f 100644 --- a/source/php/Component/Card/Card.php +++ b/source/php/Component/Card/Card.php @@ -15,16 +15,10 @@ public function init() $this->data['collpaseID'] = uniqid(); - $this->data['classList'][] = $this->getBaseClass() . '--' . $color; - + //Detect if the slots have data $this->data['afterContentSlotHasData'] = $this->slotHasData('afterContent'); - $this->data['floatingSlotHasData'] = $this->slotHasData('floating'); - if (isset($image['padded']) && $image['padded']) { - $this->getBaseClass('padded-image', true); - } - if ($image && !empty($image['src'])) { $this->data['classList'][] = $this->getBaseClass('has-image', true); } @@ -33,25 +27,18 @@ public function init() $this->data['classList'][] = $this->getBaseClass('has-datebadge', true); } - if ($imageFirst || !$image) { - $this->data['classList'][] = $this->getBaseClass() . '--image-first'; - } - - if ($hasFooter || $tags || $buttons) { - $this->data['classList'][] = $this->getBaseClass() . '--has-footer'; - } - - if ($metaFirst) { - $this->data['classList'][] = $this->getBaseClass() . '--meta-first'; + if ($tags || $buttons) { + $this->data['classList'][] = $this->getBaseClass('has-footer', true); } if ($collapsible && $content) { $this->data['collapsible'] = $this->getBaseClass() . '--collapse'; } + //Cast image data to array structure if (!empty($image) && is_string($image)) { $image = $this->data['image'] = [ - 'src' => $image + 'src' => $image ]; } diff --git a/source/php/Component/Card/card.blade.php b/source/php/Component/Card/card.blade.php index 21fd5981..875085f9 100644 --- a/source/php/Component/Card/card.blade.php +++ b/source/php/Component/Card/card.blade.php @@ -4,4 +4,3 @@ {!! $slot !!} @includeWhen($afterContentSlotHasData, 'Card.views.after-content') - diff --git a/source/php/Component/Card/card.json b/source/php/Component/Card/card.json index 472ec409..4683ee2a 100644 --- a/source/php/Component/Card/card.json +++ b/source/php/Component/Card/card.json @@ -4,54 +4,53 @@ "heading": "", "subHeading": "", "meta": "", - "metaFirst": false, "content": "", "buttons": [], - "padded": false, - "imageFirst": false, - "dropdown": false, "image": false, - "toggleItem": "", - "toggleClass": "", + "ratio": "16:9", "collapsible": false, - "hidden": "", - "paddedImage": "", - "color": "default", "tags": null, "link": "", - "ratio": "16:9", "date": false, "dateBadge": false, - "hasFooter": false, "hasPlaceholder": false, - "postId": false, - "postType": "", - "icon": false - + "icon": false, + "color": "default" }, "description": { - "image": "A url to a image.", - "href": "Link to a larger version of the image.", - "alt": "The alt text.", - "content": "The card content", - "title": "Array of the card title. Key: 'text' for text and 'position' (top | body).", - "byline": "Array of the small(er) text below the title, single row. Key: 'text' for text and 'position' (top | body).", + "heading": "The card heading", + "subHeading": "A subheading below the heading, explaining more stuff.", "meta": "Small text below title, in meta style.", - "slot": "Empty slot placed in the middle of card.", - "top": "Empty slot placed in the top of card.", - "bottom": "Empty slot placed in the bottom of card.", + "content": "The card content", "buttons": "Array with buttons that has parameters like href, text and attributeList.", - "avatar": "Array with the avatar data such as image and name.", - "dropdown": "Array with the dropdown parameters as items as an array, direction: top, right, bottom, left, position: top, bottom ", - "accordion": "Array with the accordion parameters such as heading and content data", - "dark_background": "Set the background of the card to a dark color", - "link": "A hyperlink to another location.", + "image": "A url to an image.", "ratio": "The ratio of the image", + "collapsible": "If the content should be collapsible.", + "tags": "A tags array", + "link": "A hyperlink to another location.", "date": "Preformatted date", "dateBadge": "Display date as a badge. Requires image to be set.", - "hasFooter": "Inidcate if the card has a footer section.", - "postId": "ID of a post", - "icon": "An array with the same specification as the icon component" + "hasPlaceholder": "If the card should have a placeholder, if the image is missing.", + "icon": "An array with the same specification as the icon component", + "color": "The background color of the image." + }, + "types": { + "heading": "string", + "subHeading": "string", + "meta": "string", + "content": "string", + "buttons": "array", + "image": "array|boolean|ImageInterface", + "ratio": "string", + "collapsible": "boolean", + "tags": "array", + "link": "string", + "date": "string|boolean", + "dateBadge": "boolean", + "hasPlaceholder": "boolean", + "icon": "boolean|array", + "color": "string", + "containerAware": "boolean" }, "view": "card.blade.php", "dependency": { @@ -59,7 +58,6 @@ "components": [ "card", "paper", - "dropdown", "icon", "accordion", "image", diff --git a/source/php/Component/Card/components/heading.blade.php b/source/php/Component/Card/components/heading.blade.php index a5d9739e..9039b954 100644 --- a/source/php/Component/Card/components/heading.blade.php +++ b/source/php/Component/Card/components/heading.blade.php @@ -22,7 +22,7 @@ @if($subHeading) @typography([ 'element' => 'span', - 'variant' => 'meta', + 'variant' => 'h6', 'classList' => [ $baseClass . '__sub-heading', 'u-margin__y--0' diff --git a/source/php/Component/Card/components/image.blade.php b/source/php/Component/Card/components/image.blade.php index 6b7a2d16..60978e94 100644 --- a/source/php/Component/Card/components/image.blade.php +++ b/source/php/Component/Card/components/image.blade.php @@ -5,7 +5,8 @@ 'cover' => true, 'classList' => [ $baseClass . '__image' - ] + ], + 'placeholderEnabled' => $hasPlaceholder, ]) @endimage \ No newline at end of file diff --git a/source/php/Component/Icon/icon.json b/source/php/Component/Icon/icon.json index 1a37194e..2108aea6 100644 --- a/source/php/Component/Icon/icon.json +++ b/source/php/Component/Icon/icon.json @@ -8,7 +8,8 @@ "customColor": "", "componentElement": "span", "filled": null, - "decorative": false + "decorative": false, + "backgroundColor": false }, "description": { "size": "Sizes: xs, sm, md, lg, xl, xxl", @@ -18,7 +19,8 @@ "customColor": "A custom HEX color", "componentElement": "Icon HTML tag", "filled": "If the icons should be filled or not", - "decorative": "If the icon is decorative only or serves a purpose." + "decorative": "If the icon is decorative only or serves a purpose.", + "backgroundColor": "A hex color for the background or false if not defined" }, "types": { "size": "string", @@ -29,7 +31,8 @@ "componentElement": "string", "filled": "boolean", "isSvg": "boolean", - "decorative": "boolean" + "decorative": "boolean", + "backgroundColor": "boolean|string" }, "view": "icon.blade.php", "dependency": { diff --git a/source/php/Component/Image/Image.php b/source/php/Component/Image/Image.php index 80f01415..05be65a0 100644 --- a/source/php/Component/Image/Image.php +++ b/source/php/Component/Image/Image.php @@ -57,6 +57,11 @@ public function init() $this->data['containerQueryData'] = null; } + //Add srcset to attribute list + if ($srcset) { + $this->data['attributeList']['srcset'] = $srcset; + } + //Filetype if (is_string($src) && $extension = $this->getExtension($src)) { $this->data['classList'][] = $this->getBaseClass("type-" . $extension, true); diff --git a/source/php/Component/Image/sub/image.blade.php b/source/php/Component/Image/sub/image.blade.php index 8205779c..d56a4f24 100644 --- a/source/php/Component/Image/sub/image.blade.php +++ b/source/php/Component/Image/sub/image.blade.php @@ -19,7 +19,6 @@ class="{{$baseClass}}__image {{$baseClass}}--{{$item['uuid']}}" loading="lazy" class="{{$baseClass}}__image" src="{{$src}}" - srcset="{{$srcset}}" alt="{{$alt}}" {!! $imgAttributes !!} /> From c01aa52aecb181ec666ea57cd29c53b5ad40a596 Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Wed, 2 Oct 2024 10:53:50 +0200 Subject: [PATCH 4/4] fix: resolve metaFirst argument. --- source/php/Component/Card/card.json | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/source/php/Component/Card/card.json b/source/php/Component/Card/card.json index 4683ee2a..c694c50b 100644 --- a/source/php/Component/Card/card.json +++ b/source/php/Component/Card/card.json @@ -15,7 +15,8 @@ "dateBadge": false, "hasPlaceholder": false, "icon": false, - "color": "default" + "color": "default", + "metaFirst": false }, "description": { "heading": "The card heading", @@ -32,7 +33,8 @@ "dateBadge": "Display date as a badge. Requires image to be set.", "hasPlaceholder": "If the card should have a placeholder, if the image is missing.", "icon": "An array with the same specification as the icon component", - "color": "The background color of the image." + "color": "The background color of the image.", + "metaFirst": "If the meta should be displayed before the heading." }, "types": { "heading": "string", @@ -50,7 +52,8 @@ "hasPlaceholder": "boolean", "icon": "boolean|array", "color": "string", - "containerAware": "boolean" + "containerAware": "boolean", + "metaFirst": "boolean" }, "view": "card.blade.php", "dependency": {