Merge branch 'master' into feature/multiselect

helsingborg-stad · Aug 21, 2023 · acf887b · acf887b
2 parents 790c3ec + c503e2c
commit acf887b
Show file tree

Hide file tree

Showing 24 changed files with 302 additions and 210 deletions.
diff --git a/App.php b/App.php
diff --git a/README.md b/README.md
@@ -63,6 +63,20 @@ ComponentLibrary/Component/ComponentName/Class - Takes $class
 
 Each data attribute also has a corresponding filter eg. ComponentLibrary/Component/ComponentName/dataVar 
 
+### Additional paths (WordPress Specific)
+
+You may ask the component library to render more view paths by using the ComponentLibrary/ViewPaths filter. Simply add 
+another path to the component library by doing the following:
+
+```
+add_filter('ComponentLibrary/ViewPaths', function($viewPaths) (
+  if(is_array($viewPaths)) {
+    $viewPaths = [];
+  }
+  $viewPaths[] = "/path/to/plugin/views";
+  return $viewPaths; 
+));
+```
 
 ### Iframe
 #### ComponentLibrary/Component/Iframe/GetSuppliers

diff --git a/component-library.php b/component-library.php
@@ -38,7 +38,4 @@
 $loader = new ComponentLibrary\Vendor\Psr4ClassLoader();
 $loader->addPrefix('ComponentLibrary', COMPONENTLIBRARY_PATH);
 $loader->addPrefix('ComponentLibrary', COMPONENTLIBRARY_PATH . 'source/php/');
-$loader->register();
-
-// Start application
-new ComponentLibrary\App();
+$loader->register();
diff --git a/source/php/Component/Alert/Alert.php b/source/php/Component/Alert/Alert.php
diff --git a/source/php/Component/Alert/alert.blade.php b/source/php/Component/Alert/alert.blade.php
diff --git a/source/php/Component/Alert/alert.json b/source/php/Component/Alert/alert.json
diff --git a/source/php/Component/AnchorMenu/anchorMenu.json b/source/php/Component/AnchorMenu/anchorMenu.json
@@ -1,13 +1,12 @@
 {
     "slug": "anchorMenu",
     "default": {
-        "menuItems": [],
-        "displayNoneSizes": ""
+        "menuItems": []
     },
     "description": {
-        "menuItems": "An array containing arrays of items. An item should contain a label, link (anchor) and if wanted an icon as well."
+        "menuItems": "An array containing arrays of items. An item should contain a label, anchor and if wanted an icon as well."
     },
-    "view": "alert.blade.php",
+    "view": "anchorMenu.blade.php",
     "dependency": {
         "sass": {
             "components": [

diff --git a/source/php/Component/BaseController.Test.php b/source/php/Component/BaseController.Test.php
@@ -0,0 +1,18 @@
+<?php
+
+use ComponentLibrary\Component\BaseController;
+
+class BaseControllerTest extends PHPUnit\Framework\TestCase
+{
+    public function testBuildAttributesReturnsAllAttributesAsString()
+    {
+        $attributes = ['One' => 'one', 'Two' => 'two'];
+        $this->assertEquals('One="one" Two="two"', BaseController::buildAttributes($attributes));
+    }
+
+    public function testBuildAttributesOnlyHandlesAttributeStringValues()
+    {
+        $attributes = ['One' => ['foo']];
+        $this->assertEquals('', BaseController::buildAttributes($attributes));
+    }
+}
diff --git a/source/php/Component/BaseController.php b/source/php/Component/BaseController.php
@@ -386,18 +386,34 @@ public function sanitizeInlineCss($inlineCss)
         return preg_replace('/.*:\s*;/i', '', $inlineCss);
     }
 
-    public static function buildAttributes($attributes)
+    /**
+     * Builds a string of attributes.
+     * 
+     * @param array $attributes An array of attributes to be added to the string.
+     * @return string A string of attributes.
+     */
+    public static function buildAttributes(array $attributes): string
     {
-        return (string) implode(
-            ' ',
-            array_map(
-                function ($v, $k) {
-                    return sprintf('%s="%s"', $k, htmlspecialchars($v, ENT_QUOTES, 'UTF-8'));
-                },
-                array_values($attributes),
-                array_keys($attributes)
-            )
-        );
+        $attributeStrings = [];
+
+        foreach ($attributes as $key => $value) {
+            if (is_object($value) || is_array($value)) {
+                $value = json_encode($value);
+            }
+
+            if (is_bool($value) || is_numeric($value)) {
+                $value = strval($value);
+            }
+
+            if (!is_string($value) && !empty($value)) {
+                return "";
+            };
+
+            $escapedValue = htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
+            $attributeStrings[] = "$key=\"$escapedValue\"";
+        }
+
+        return implode(' ', $attributeStrings);
     }
 
     public static function buildInlineStyle($styles)

diff --git a/source/php/Component/Group/Group.php b/source/php/Component/Group/Group.php
@@ -13,6 +13,11 @@ public function init()
         //Extract array for eazy access (fetch only)
         extract($this->data);
 
+        if (!empty($fluidGrid)) {
+            $this->data['containerAware'] = true;
+            $this->data['classList'][] = $this->getBaseClass('fluid-grid', true);
+        }
+
         if ($direction == "vertical") {
             $this->data['classList'][] = $this->getBaseClass() . "--vertical";
         } else {

diff --git a/source/php/Component/Group/group.json b/source/php/Component/Group/group.json
@@ -9,7 +9,8 @@
         "wrap": "",
         "flexGrow": false,
         "flexShrink": true,
-        "gap": ""
+        "gap": "",
+        "fluidGrid": false
     },
     "description": {
         "direction": "What direction to group (horizontal or vertical)",
@@ -20,12 +21,14 @@
         "wrap": "Wrap the content (ex. nowrap, wrap, wrap-reverse)",
         "flexGrow": "Allow to grow the content within the group",
         "flexShrink": "Allow to shrink the content within the group",
-        "gap": "A number between 1-10 that sets the gap between flexed elements."
+        "gap": "A number between 1-10 that sets the gap between flexed elements.",
+        "fluidGrid": "Uses flexbox and media queries to determine amount of items per row."
     },
     "view": "group.blade.php",
     "dependency": {
         "sass": {
             "components": [
+                "group"
             ]
         }
     }

diff --git a/source/php/Component/HamburgerMenu/hamburgerMenu.blade.php b/source/php/Component/HamburgerMenu/hamburgerMenu.blade.php
@@ -9,11 +9,11 @@
         @foreach ($menuItems as $item)
             <li id="{{$id}}-main-item-{{$item['id']}}"
                 class="{{$baseClass}}__item {{$baseClass}}__item--parent o-grid-12 o-grid-6@md o-grid-4@lg u-mb-6 u-margin__top--1 {{$item['classNames']}}">
-                @if($parentStyle)
+                @if(!empty($parentStyle))
                     @button([
                         'text' => $item['label'],
                         'style' => $parentStyle,
-                        'color' => 'primary',
+                        'color' => $parentStyleColor ?? 'primary',
                         'icon' => $item['icon']['icon'] !== "" ? $item['icon']['icon'] : 'chevron_right',
                         'href' => $item['href'],
                         'classList' => [
@@ -53,7 +53,7 @@ class="{{$baseClass}}__item {{$baseClass}}__item--parent o-grid-12 o-grid-6@md o
                                         $baseClass . '__link--child'
                                     ]
                                 ])
-                                @if(isset($child['icon']) && !empty($child['icon']['icon']))
+                                @if(isset($child['icon']) && !array_diff(['icon', 'size', 'classList'], array_keys($child['icon'])))
                                     @icon([
                                         'icon' => $child['icon']['icon'],
                                         'size' => $child['icon']['size'],

diff --git a/source/php/Component/HamburgerMenu/hamburgerMenu.json b/source/php/Component/HamburgerMenu/hamburgerMenu.json
@@ -3,6 +3,7 @@
     "default": {
         "menuItems": [],
         "parentStyle": false,
+        "parentStyleColor": "primary",
         "mobile": false
     },
     "description": {

diff --git a/source/php/Component/Nav/style/default.blade.php b/source/php/Component/Nav/style/default.blade.php
@@ -5,13 +5,19 @@
     'href' => $item['href'],
   ])
     @icon([
-      'icon' => $item['icon']['icon'],
-      'size' => $item['icon']['size'],
-      'classList' => $item['icon']['classList'],
-      'attributeList' => ['style' => $item['color'] ? 'background-color:' . $item['color'] . ';' : '']
+      'icon' => $item['icon']['icon'] ?? null,
+      'size' => $item['icon']['size'] ?? null,
+      'classList' => $item['icon']['classList'] ?? [],
+      'attributeList' => [
+        'style' => 'background-color:' . ($item['color'] ?? '') . ';'
+      ]
     ])
     @endicon
-    <span class="{{$baseClass}}__text" style="{{$item['color'] ? 'color:' . $item['color'] . ';' : ''}}">{{$item['label']}}</span>
+    <span 
+      class="{{$baseClass}}__text" 
+      style="{{isset($item['color']) ? 'color:' . $item['color'] . ';' : ''}}">
+      {{$item['label']}}
+    </span>
   @endlink
 @else
   <!-- Hidden link: Both label and icon is missing -->

diff --git a/source/php/Component/Product/Product.php b/source/php/Component/Product/Product.php
@@ -25,6 +25,7 @@ public function init()
             if (!isset($button['color'])) {
                 $this->data['button']['color'] = $backgroundColor;
             }
+            $this->data['button']['classList'][] = 'c-product__button';
         }
     }
 }
diff --git a/source/php/Component/Product/components/button.blade.php b/source/php/Component/Product/components/button.blade.php
@@ -1,4 +1,3 @@
-<div class="c-card__footer">
-    @button($button)
-    @endbutton
-</div>
+@button($button)
+@endbutton
+
diff --git a/source/php/Component/Product/components/price.blade.php b/source/php/Component/Product/components/price.blade.php
@@ -1,3 +1,4 @@
+<div class="{{$baseClass}}__prices {{!empty($button) ? 'has-button' : ''}}">
 @foreach ($prices as $price)
     <div class="{{ $baseClass }}__price {{ $baseClass }}__price--{{ $price['color'] ?? $backgroundColor ?? 'primary' }}">
         @typography([
@@ -28,3 +29,4 @@
         @endif
     </div>
 @endforeach
+</div>
diff --git a/source/php/Component/Product/product.blade.php b/source/php/Component/Product/product.blade.php
@@ -17,7 +17,6 @@
             ])
                 {{ $label }}
             @endtypography
-            @includeWhen($prices, 'Product.components.price')
         </div>
         <div class="c-card__body c-product__body">
             @if ($meta)
@@ -37,6 +36,9 @@
                 @endlisting
             @endif
         </div>
-        @includeWhen(!empty($button), 'Product.components.button')
+        <div class="c-card__footer {{$baseClass}}__footer">
+                @includeWhen($prices, 'Product.components.price')
+                @includeWhen(!empty($button), 'Product.components.button')
+        </div>
     @endcard
 </div>
diff --git a/source/php/Component/Select/select.blade.php b/source/php/Component/Select/select.blade.php
@@ -30,7 +30,6 @@
             {{ $description }}
         @endtypography
     @endif
-
     <div class="{{ $baseClass }}__field-container">
 
         <select {!! $selectAttributes !!} class="{{ $baseClass }}__select-element" tabindex="-1">

diff --git a/source/php/Component/Select/select.json b/source/php/Component/Select/select.json
@@ -14,7 +14,8 @@
         "hideLabel": false,
         "helperText": "",
         "size": "md",
-        "maxSelections": false
+        "maxSelections": false,
+        "hidePlaceholder": false
     },
     "description": {
         "label": "The placeholder of the dropdown",
@@ -29,7 +30,8 @@
         "hideLabel": "Hides the label",
         "helperText": "Adds a helping text, below the element.",
         "size": "The size of the select component (sm, md, lg)",
-        "maxSelections": "The maximum number of selections allowed. Will only be applied if \"multiple\" is true."
+        "maxSelections": "The maximum number of selections allowed. Will only be applied if \"multiple\" is true.",
+        "hidePlaceholder": "Hides the placeholder but keeps the label"
     },
     "view": "select.blade.php",
     "dependency": {