feat: image in card (#458)

* fix: replace background image with image * feat: restructure card. * fix: component adjustments. * fix: resolve metaFirst argument. --------- Co-authored-by: Sebastian Thulin <sebastian.thulin@helsingborg.se>
helsingborg-stad · Oct 2, 2024 · 949d23f · 949d23f
1 parent f3e94f9
commit 949d23f
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 83 deletions.
diff --git 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
@@ -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->data['paddedImage'] = $this->getBaseClass() . '__image-background--padded';
-        }
-
         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
@@ -4,4 +4,3 @@
     {!! $slot !!}
     @includeWhen($afterContentSlotHasData, 'Card.views.after-content')
 </{{ $componentElement }}>
-
diff --git a/source/php/Component/Card/card.json b/source/php/Component/Card/card.json
@@ -4,63 +4,63 @@
         "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": "4:3",
         "date": false,
         "dateBadge": false,
-        "hasFooter": false,
         "hasPlaceholder": false,
-        "postId": false,
-        "postType": "",
-        "icon": false
-
+        "icon": false,
+        "color": "default",
+        "metaFirst": false
     },
     "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.",
-        "hasRipple": "Enable / disable ripple fx",
+        "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.",
+        "metaFirst": "If the meta should be displayed before the heading."
+    },
+    "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",
+        "metaFirst": "boolean"
     },
     "view": "card.blade.php",
     "dependency": {
         "sass": {
             "components": [
                 "card",
                 "paper",
-                "dropdown",
                 "icon",
                 "accordion",
                 "image",

diff --git 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
@@ -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' => 'h6',
+                '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
diff --git a/source/php/Component/Card/components/image.blade.php b/source/php/Component/Card/components/image.blade.php
@@ -1,3 +1,12 @@
-<div class="{{$baseClass}}__image {{$baseClass}}__image--{{$image['backgroundColor']}}">
-    <div class="{{$baseClass}}__image-background {{$paddedImage}}" style="background-image:url('{{$image['src']}}');"></div>
+<div class="{{$baseClass}}__image-container">
+    @image([
+        'src' => is_array($image) ? $image['src'] : $image,
+        'alt' => isset($image['alt']) ? $image['alt'] : null,
+        'cover' => true,
+        'classList' => [
+            $baseClass . '__image'
+        ],
+        'placeholderEnabled' => $hasPlaceholder,
+    ])
+    @endimage
 </div>
diff --git a/source/php/Component/Card/components/subHeading.blade.php b/source/php/Component/Card/components/subHeading.blade.php
diff --git a/source/php/Component/Card/partials/body.blade.php b/source/php/Component/Card/partials/body.blade.php
@@ -4,10 +4,8 @@
             {!! $floating !!}
         </div>
     @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')
  </div>
diff --git 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
@@ -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
@@ -19,7 +19,6 @@ class="{{$baseClass}}__image {{$baseClass}}--{{$item['uuid']}}"
         loading="lazy" 
         class="{{$baseClass}}__image" 
         src="{{$src}}" 
-        srcset="{{$srcset}}"
         alt="{{$alt}}"
         {!! $imgAttributes !!}
     />