Feat(web-twig): Optimize navbarToggle component & allow aria-* mainPr…

…ops and ignore empty string (DS-161)

packages/web-twig/CHANGELOG.md

@@ -4,6 +4,8 @@
 ## Unreleased
 - Add main props `data-*` and `id` into `Button` and `ButtonLink` components
 - Introduce `Header`, `Navbar`, `NavbarActions`, `NavbarClose`, `NavbarToggle`, `Nav `, `NavItem`, `NavLink `components
+- Allow `aria-*` as main props in `Button` and `ButtonLink` components
+- Ignore empty string in `mainProps` twig function
 
 ## 1.5.0 - 2022-04-04
 - [BC] Use is prefix for boolean props

packages/web-twig/docs/Button.md

@@ -32,6 +32,6 @@ With Html syntax lexer (enabled by default):
 | onClick    | `string`  | undefined     | execute a JavaScript when a button is clicked   |
 | class      | `string`  | undefined     | adds additional classes                         |
 
-On this component it's possible to insert property `id` and `data-*` properties.
+On this component it's possible to insert property `id`, `data-*` and `aria-*` properties.
 
 [Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Button

packages/web-twig/docs/ButtonLink.md

@@ -35,6 +35,6 @@ With Html syntax lexer (enabled by default):
 | onClick    | `string`  | undefined     | execute a JavaScript when a link is clicked |
 | class      | `string`  | undefined     | property to extend with custom classes      |
 
-On this component it's possible to insert property `id` and `data-*` properties.
+On this component it's possible to insert property `id`, `data-*` and `aria-*` properties.
 
 [Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/ButtonLink

packages/web-twig/src/Resources/components/navbarToggle.twig

@@ -1,17 +1,11 @@
 {% set _className = _spiritClassPrefix ~ 'Header__toggle' %}
+{% set _iconClassName = _spiritClassPrefix ~ 'Header__icon' %}
 {% set _class = (props.class is defined) ? ' ' ~  props.class : '' %}
 {% set _label = (props.label is defined) ? props.label : 'Menu' %}
-{% set _ariaControls = (props.ariaControls is defined) ? ' aria-controls="' ~ props.ariaControls ~ '"' : '' %}
-
-{% set _buttonClassName = _spiritClassPrefix ~ 'Button' %}
-{% set _color = (props.color is defined) ? ' ' ~ _buttonClassName ~ '--' ~ props.color : ' ' ~  _buttonClassName ~ '--inverted' %}
-{% set _square = _buttonClassName ~ '--square' %}
-
-{% set _iconClassName = _spiritClassPrefix ~ 'Header__icon' %}
 
 <div className="{{ _className }}">
-    <button class="{{ _buttonClassName }}{{ _color }}{{ _square }}" type="button" aria-expanded="false" {{ _ariaControls }}>
+    <Button color="{{ props.color is defined ? props.color : 'inverted' }}" isSquare type="button" aria-expanded="false" aria-controls="{{ props.ariaControls is defined ? props.ariaControls : '' }}">
         <span className="{{ _iconClassName }} {{ _iconClassName }}--menu" aria-hidden="true"></span>
         <span className="accessibility-hidden">{{ _label }}</span>
-    </button>
+    </Button>
 </div>

packages/web-twig/src/Resources/partials/mainProps.twig

@@ -1 +1 @@
-{%- if id != null %} id="{{ id }}"{% endif -%}{%- for dataPropName, dataPropValue in dataAttributes  %} {{ dataPropName }}="{{ dataPropValue }}"{% endfor -%}
+{%- if id != null %} id="{{ id }}"{% endif -%}{%- for propName, propValue in allowedAttributes  %} {{ propName }}="{{ propValue }}"{% endfor -%}

packages/web-twig/src/Twig/PropsExtension.php

@@ -25,14 +25,16 @@ public function getFunctions(): array
      */
     public function renderMainProps(Environment $environment, array $props): string
     {
-        $dataProps = [];
+        $allowedAttributes = [];
         foreach ($props as $propName => $propValue) {
-            if (preg_match('/data-*/', $propName) > 0) {
-                $dataProps[$propName] = $propValue;
+            if (preg_match('/^(data|aria)-*/', $propName) > 0) {
+                if ($propValue !== '') {
+                    $allowedAttributes[$propName] = $propValue;
+                }
             }
         }
         return $environment->render('@partials/mainProps.twig', [
-            'dataAttributes' => $dataProps,
+            'allowedAttributes' => $allowedAttributes,
             'id' => $props['id'] ?? null,
         ]);
     }

packages/web-twig/tests/Twig/PropsExtensionTest.php

@@ -44,19 +44,19 @@ public function renderMainPropsDataProvider(): array
     {
         return [
             'empty props' => [[], [
-                'dataAttributes' => [],
+                'allowedAttributes' => [],
                 'id' => null,
             ]],
             'id property' => [[
                 'id' => 1,
             ], [
-                'dataAttributes' => [],
+                'allowedAttributes' => [],
                 'id' => 1,
             ]],
             'data properties' => [[
                 'data-id' => 'testDataId',
             ], [
-                'dataAttributes' => [
+                'allowedAttributes' => [
                     'data-id' => 'testDataId',
                 ],
                 'id' => null,
@@ -65,16 +65,32 @@ public function renderMainPropsDataProvider(): array
                 'data-id' => 'testDataId',
                 'id' => 'testId',
             ], [
-                'dataAttributes' => [
+                'allowedAttributes' => [
                     'data-id' => 'testDataId',
                 ],
                 'id' => 'testId',
             ]],
-            'filter only whitelist attributes' => [[
+            'filter only allowed attributes' => [[
                 'test-id' => 'testDataId',
+                'aria-label' => 'testAria',
+                'data-label' => 'testData',
                 'id' => 'testId',
             ], [
-                'dataAttributes' => [],
+                'allowedAttributes' => [
+                    'aria-label' => 'testAria',
+                    'data-label' => 'testData',
+                ],
+                'id' => 'testId',
+            ]],
+            'skip empty allowed attributes' => [[
+                'test-id' => 'testDataId',
+                'aria-label' => '',
+                'data-label' => 'testData',
+                'id' => 'testId',
+            ], [
+                'allowedAttributes' => [
+                    'data-label' => 'testData',
+                ],
                 'id' => 'testId',
             ]],
         ];

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set buttonWithMainProps.twig__1.html

@@ -1,4 +1,4 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html><body>
-<button id="testId" data-main="main" class="Button Button--primary" type="button">button</button>
+<button id="testId" data-main="main" aria-label="label" class="Button Button--primary" type="button">button</button>
 </body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerFull.twig__1.html

@@ -5,11 +5,8 @@
     <img src="https://www.example.com/logo.png" width="65" height="24" alt="Spirit">
   </a>
 
-
-
 <div classname="Header__toggle">
-    <button class="Button Button--invertedButton--square" type="button" aria-expanded="false">
-        <span classname="Header__icon Header__icon--menu" aria-hidden="true"></span>
+    <button aria-expanded="false" class="Button Button--inverted Button--square" type="button">        <span classname="Header__icon Header__icon--menu" aria-hidden="true"></span>
         <span classname="accessibility-hidden">Menu</span>
     </button>
 </div>

packages/web-twig/tests/components-fixtures/buttonWithMainProps.twig

@@ -1 +1 @@
-<Button id="testId" data-main="main" not-valid-prop="unexist" color="primary">button</Button>
+<Button id="testId" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary">button</Button>