Feat(web-twig): Deprecate class in ButtonLink and add more tests #DS-646

lmc-eu · Apr 24, 2023 · 117afbc · 117afbc
1 parent c5fd723
commit 117afbc
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 8 deletions.
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig
@@ -1,6 +1,5 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _color = props.color | default('primary') -%}
 {%- set _size = props.size | default('medium') -%}
 {%- set _href = props.href -%}
@@ -25,19 +24,20 @@
 {%- set _targetAttr = _target ? 'target=' ~ _target : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootDisabledClassName, _rootLoadingClassName, _rootSizeClassName, _rootSquareClassName, _class ] -%}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootDisabledClassName, _rootLoadingClassName, _rootSizeClassName, _rootSquareClassName, _styleProps.className ] -%}
 {%- set _allowedAttributes = [
     'title',
 ] -%}
 
-
 {# Deprecations #}
 {% if _onClick %}
     {% deprecated 'ButtonLink: The "onClick" property will be removed in the next major version. Use native "onclick" attribute instead.' %}
 {% endif %}
 
 <a
     {{ mainProps(props, _allowedAttributes) }}
+    {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
     href="{{ _href }}"
     {{ _onClickAttr | raw }}

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/README.md b/packages/web-twig/src/Resources/components/ButtonLink/README.md
@@ -31,7 +31,6 @@ Without lexer:
 
 | Prop name    | Type                                                                                      | Default   | Required | Description                                                                    |
 | ------------ | ----------------------------------------------------------------------------------------- | --------- | -------- | ------------------------------------------------------------------------------ |
-| `class`      | `string`                                                                                  | `null`    | no       | Custom CSS class                                                               |
 | `color`      | [Action Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | no       | Color variant                                                                  |
 | `size`       | [Size dictionary][dictionary-size]                                                        | `medium`  | no       | Size variant                                                                   |
 | `href`       | `string`                                                                                  | —         | yes      | Link URL                                                                       |
@@ -44,8 +43,10 @@ Without lexer:
 | `title`      | `string`                                                                                  | `null`    | no       | Optional title to display on hover                                             |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
-descriptiveness and accessibility.
+descriptiveness and accessibility. Also, UNSAFE styling props are available,
+see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 
 [buttonLink]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button
 [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
 [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size
+[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
@@ -10,9 +10,9 @@
             <div>
             <ButtonLink color={color} size={size} isDisabled href="#">Disabled {{ color }}</ButtonLink>
             <ButtonLink color={color} size={size} href="#" isSquare isDisabled>
-                    <span class="accessibility-hidden">Menu</span>
-                    <Icon name="link" />
-                </ButtonLink>
+                <span class="accessibility-hidden">Menu</span>
+                <Icon name="link" />
+            </ButtonLink>
             </div>
         </div>
         {% endfor %}

diff --git a/packages/web-twig/tests/ComponentTest.php b/packages/web-twig/tests/ComponentTest.php
@@ -134,6 +134,40 @@ class="Button Button--primary Button--medium"
         );
     }
 
+    public function testShouldRenderComponentWithUnsafeCaseNameAndStyle(): void
+    {
+        $html = $this->twig->render('test_component_classname_style.twig');
+        $html = $this->removeWhitespace($html);
+
+        $this->assertEquals(
+            <<<HTML
+<a
+    style="z-index: 1;"
+    class="Button Button--primary Button--medium test-class"
+    href="#"
+>Link Button</a>
+HTML,
+            $html
+        );
+    }
+
+    public function testShouldRenderComponentXSSSafe(): void
+    {
+        $html = $this->twig->render('test_component_classname_style_xss.twig');
+        $html = $this->removeWhitespace($html);
+
+        $this->assertEquals(
+            <<<HTML
+<a
+    style="z-index: 1;&lt;script&gt;alert(&#039;XSS&#039;)&lt;/script&gt;"
+    class="Button Button--primary Button--medium test-class&quot; onmouseover=&quot;alert(&#039;XSS&#039;)&quot;"
+    href="#"
+>Link Button</a>
+HTML,
+            $html
+        );
+    }
+
     /**
      * @see: https://stackoverflow.com/questions/709669/how-do-i-remove-blank-lines-from-text-in-php
      *

diff --git a/packages/web-twig/tests/test-templates/test_component_classname_style.twig b/packages/web-twig/tests/test-templates/test_component_classname_style.twig
@@ -0,0 +1 @@
+<ButtonLink href="#" color="primary" UNSAFE_className="test-class" UNSAFE_style="z-index: 1;">Link Button</ButtonLink>
diff --git a/packages/web-twig/tests/test-templates/test_component_classname_style_xss.twig b/packages/web-twig/tests/test-templates/test_component_classname_style_xss.twig
@@ -0,0 +1,2 @@
+{% set test = 'test-class" onmouseover="alert(\'XSS\')"' %}
+<ButtonLink href="#" color="primary" UNSAFE_className="{{ test }}" UNSAFE_style="z-index: 1;<script>alert('XSS')</script>">Link Button</ButtonLink>