Feat(web-twig): Add property size to the Button #DS-318

lmc-eu · Sep 9, 2022 · 5ce2821 · 5ce2821
1 parent 05a93a9
commit 5ce2821
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 27 deletions.
diff --git a/packages/web-twig/src/Resources/components/Button/Button.twig b/packages/web-twig/src/Resources/components/Button/Button.twig
@@ -1,6 +1,7 @@
 {# API #}
 {%- set _class = props.class | default(null) -%}
 {%- set _color = props.color | default('primary') -%}
+{%- set _size= props.size | default('medium') -%}
 {%- set _isBlock = props.isBlock | default(false) | boolprop -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isSquare = props.isSquare | default(false) | boolprop -%}
@@ -11,14 +12,15 @@
 {%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}
 {%- set _rootBlockClassName = _isBlock ? _spiritClassPrefix ~ 'Button--block' : null -%}
 {%- set _rootColorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
+{%- set _rootSizeClassName = _spiritClassPrefix ~ 'Button--' ~ _size -%}
 {%- set _rootSquareClassName = _isSquare ? _spiritClassPrefix ~ 'Button--square' : null -%}
 
 {# Attributes #}
 {%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
 {%- set _onClickAttr = _onClick ? 'onclick="' ~ _onClick ~'"' : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootSquareClassName, _class ] -%}
+{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootSizeClassName, _rootBlockClassName, _rootSquareClassName, _class ] -%}
 
 <button
     {{ mainProps(props) }}

diff --git a/packages/web-twig/src/Resources/components/Button/README.md b/packages/web-twig/src/Resources/components/Button/README.md
@@ -38,6 +38,7 @@ Without lexer:
 | ------------ | -------------------------------------------------------- | --------- | -------- | ---------------------------------------------------- |
 | `class`      | `string`                                                 | `null`    | no       | Custom CSS class                                     |
 | `color`      | `primary`, `secondary`, `tertiary`, `inverted`, `danger` | `primary` | no       | Color variant                                        |
+| `size`       | `medium`, `large`                                        | `medium`  | no       | Size variant                                         |
 | `isBlock`    | `bool`                                                   | `false`   | no       | Span the element to the full width of its parent     |
 | `isDisabled` | `bool`                                                   | `false`   | no       | If true, Button is disabled                          |
 | `isSquare`   | `bool`                                                   | `false`   | no       | If true, Button is square, usually only with an icon |

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,7 @@
 {# API #}
 {%- set _class = props.class | default(null) -%}
 {%- set _color = props.color | default('primary') -%}
+{%- set _size = props.size | default('medium') -%}
 {%- set _href = props.href -%}
 {%- set _isBlock = props.isBlock | default(false) | boolprop -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
@@ -10,9 +11,10 @@
 {%- set _title = props.title | default(null) -%}
 
 {# Class names #}
-{%- set _colorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
-{%- set _rootBlockClassName = _isBlock ? _spiritClassPrefix ~ 'Button--block' : null -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}
+{%- set _rootBlockClassName = _isBlock ? _spiritClassPrefix ~ 'Button--block' : null -%}
+{%- set _rootColorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
+{%- set _rootSizeClassName = _spiritClassPrefix ~ 'Button--' ~ _size -%}
 {%- set _rootSquareClassName = _isSquare ? _spiritClassPrefix ~ 'Button--square' : null -%}
 
 {# Attributes #}
@@ -22,7 +24,7 @@
 {%- set _titleAttr = _title ? 'title="' ~ _title ~ '"' : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _colorClassName, _rootBlockClassName, _rootSquareClassName, _class ] -%}
+{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootSizeClassName, _rootSquareClassName, _class ] -%}
 
 <a
     {{ mainProps(props) }}

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/README.md b/packages/web-twig/src/Resources/components/ButtonLink/README.md
@@ -33,6 +33,7 @@ Without lexer:
 | ------------ | -------------------------------------------------------- | --------- | -------- | -------------------------------------------------------- |
 | `class`      | `string`                                                 | `null`    | no       | Custom CSS class                                         |
 | `color`      | `primary`, `secondary`, `tertiary`, `inverted`, `danger` | `primary` | no       | Color variant                                            |
+| `size`       | `medium`, `large`                                        | `medium`  | no       | Size variant                                             |
 | `href`       | `string`                                                 | —         | yes      | Link URL                                                 |
 | `isBlock`    | `bool`                                                   | `false`   | no       | Span the element to the full width of its parent         |
 | `isDisabled` | `bool`                                                   | `false`   | no       | If true, ButtonLink is disabled                          |

diff --git a/packages/web-twig/tests/ComponentTest.php b/packages/web-twig/tests/ComponentTest.php
@@ -28,7 +28,7 @@ public function testShouldRenderSimpleComponent(): void
         $this->assertEquals(
             <<<HTML
 <button
-    class="Button Button--primary"
+    class="Button Button--primary Button--medium"
     type="button"
 >Demo button</button>
 HTML,
@@ -43,7 +43,7 @@ public function testShouldRenderComponentWithArguments(): void
 
         $this->assertEquals(<<<HTML
 <button
-    class="Button Button--primary"
+    class="Button Button--primary Button--medium"
     type="button"
 ><span>Demo button</span></button>
 HTML, $html);
@@ -57,7 +57,7 @@ public function testShouldRenderWithArgumentWithoutValue(): void
         $this->assertEquals(
             <<<HTML
 <button
-    class="Button Button--secondary Button--block"
+    class="Button Button--secondary Button--medium Button--block"
     type="button"
 >Demo button without argument value</button>
 HTML,
@@ -74,7 +74,7 @@ public function testShouldRenderComponentWithHtmlTags(): void
             <<<HTML
 <form>
 <button
-    class="Button Button--primary"
+    class="Button Button--primary Button--medium"
     type="submit"
 >Submit</button>
 </form>
@@ -95,7 +95,7 @@ public function testShouldRenderExtendsComponents(string $prefix, string $testTe
         $this->assertEquals(
             <<<HTML
 <button
-    class="jobs-Button jobs-Button--primary   jobs-Button--small"
+    class="jobs-Button jobs-Button--primary jobs-Button--small"
     type="button"
 >Primary buttom</button>
 HTML,
@@ -126,7 +126,7 @@ public function testShouldRenderComponentWithCamelCaseName(): void
         $this->assertEquals(
             <<<HTML
 <a
-    class="Button Button--primary"
+    class="Button Button--primary  Button--medium"
     href="#"
 >Link Button</a>
 HTML,

diff --git a/...snapshots__/ComponentsSnapshotTest__test with data set buttonDisabledDefault.twig__1.html b/...snapshots__/ComponentsSnapshotTest__test with data set buttonDisabledDefault.twig__1.html
@@ -1,3 +1,3 @@
 <html><body>
-<button class="Button Button--primary" type="button" disabled>Disabled button</button>
+<button class="Button Button--primary Button--medium" type="button" disabled>Disabled button</button>
 </body></html>
diff --git a/...__/ComponentsSnapshotTest__test with data set buttonWithDisabledFalseDefault.twig__1.html b/...__/ComponentsSnapshotTest__test with data set buttonWithDisabledFalseDefault.twig__1.html
@@ -1,3 +1,3 @@
 <html><body>
-<button class="Button Button--primary" type="button">Not Disabled button</button>
+<button class="Button Button--primary Button--medium" type="button">Not Disabled button</button>
 </body></html>
diff --git a/...omponentsSnapshotTest__test with data set buttonWithDisabledFalsePropDefault.twig__1.html b/...omponentsSnapshotTest__test with data set buttonWithDisabledFalsePropDefault.twig__1.html
@@ -1,4 +1,4 @@
 <html><body>
-<button class="Button Button--primary" type="button">Not Disabled button with boolean false prop value</button>
-<button class="Button Button--primary" type="button">Not Disabled button with string false prop value</button>
+<button class="Button Button--primary Button--medium" type="button">Not Disabled button with boolean false prop value</button>
+<button class="Button Button--primary Button--medium" type="button">Not Disabled button with string false prop value</button>
 </body></html>
diff --git a/...__snapshots__/ComponentsSnapshotTest__test with data set buttonWithMainProps.twig__1.html b/...__snapshots__/ComponentsSnapshotTest__test with data set buttonWithMainProps.twig__1.html
@@ -1,3 +1,3 @@
 <html><body>
-<button id="testId" data-main="main" aria-label="label" class="Button Button--primary" type="button">button</button>
+<button id="testId" data-main="main" aria-label="label" class="Button Button--primary Button--medium" type="button">button</button>
 </body></html>
diff --git a/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerFull.twig__1.html b/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerFull.twig__1.html
@@ -5,7 +5,7 @@
   </a>
 
 <div class="Header__mobileOnlyActions">
-    <button aria-expanded="false" class="Button Button--inverted  Button--square" type="button">        <span class="Header__icon Header__icon--menu" aria-hidden="true"></span>
+    <button aria-expanded="false" class="Button Button--inverted Button--medium  Button--square" type="button">        <span class="Header__icon Header__icon--menu" aria-hidden="true"></span>
         <span class="accessibility-hidden">Menu</span>
     </button>
 </div>
@@ -56,8 +56,8 @@
     </div>
 
 <div class="Header__actions Header__actions--secondary">
-      <a class="Button Button--primary" href="/">Login</a>
-      <a class="Button Button--inverted" href="/">Login for Companies</a>
+      <a class="Button Button--primary  Button--medium" href="/">Login</a>
+      <a class="Button Button--inverted  Button--medium" href="/">Login for Companies</a>
     </div>
     </div>
 </nav>

diff --git a/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set modalDefault.twig__1.html b/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set modalDefault.twig__1.html
@@ -3,10 +3,9 @@
   <div class="Modal__content">
     <div class="Modal__dialog">
       <div class="Modal__header">
-        <button aria-controls="modal-example" aria-expanded="false" data-dismiss="modal" data-target="#modal-example" class="Button Button--tertiary  Button--square" type="button">          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="37e00f33a768e01446941dba6bd3af5e" class="Icon " aria-hidden="true">
+        <button aria-controls="modal-example" aria-expanded="false" data-dismiss="modal" data-target="#modal-example" class="Button Button--tertiary Button--medium  Button--square" type="button">          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="37e00f33a768e01446941dba6bd3af5e" class="Icon " aria-hidden="true">
 <path d="M18.3002 5.71022C17.9102 5.32022 17.2802 5.32022 16.8902 5.71022L12.0002 10.5902L7.11022 5.70021C6.72022 5.31021 6.09021 5.31021 5.70021 5.70021C5.31021 6.09021 5.31021 6.72022 5.70021 7.11022L10.5902 12.0002L5.70021 16.8902C5.31021 17.2802 5.31021 17.9102 5.70021 18.3002C6.09021 18.6902 6.72022 18.6902 7.11022 18.3002L12.0002 13.4102L16.8902 18.3002C17.2802 18.6902 17.9102 18.6902 18.3002 18.3002C18.6902 17.9102 18.6902 17.2802 18.3002 16.8902L13.4102 12.0002L18.3002 7.11022C18.6802 6.73022 18.6802 6.09022 18.3002 5.71022Z" fill="#132930"></path>
 </svg>
-
           <span class="accessibility-hidden">Close</span>
         </button>
       </div>
@@ -20,8 +19,7 @@
   <div class="Modal__content">
     <div class="Modal__dialog">
       <div class="Modal__header">
-        <button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary  Button--square" type="button">          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon " aria-hidden="true"><use href="#37e00f33a768e01446941dba6bd3af5e"></use></svg>
-
+        <button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary Button--medium  Button--square" type="button">          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon " aria-hidden="true"><use href="#37e00f33a768e01446941dba6bd3af5e"></use></svg>
           <span class="accessibility-hidden">Dismiss</span>
         </button>
       </div>

diff --git a/packages/web-twig/tests/test-components/button.twig b/packages/web-twig/tests/test-components/button.twig
@@ -1,10 +1,11 @@
 {% set className = 'lmc-Button' %}
 {% set _color = (props.color is defined) ? ' ' ~ className ~ '--' ~ props.color : ' ' ~  className ~ '--secondary' %}
+{% set _size = (props.size is defined) ? ' ' ~ className ~ '--' ~ props.size : ' ' ~  className ~ '--medium' %}
 {% set _block = (props.block is defined) ? ' ' ~ className ~ '--block' : '' %}
 {% set _type = (props.type is defined) ? props.type : 'button' %}
 {% set _disabled = (props.disabled is defined) ? ' disabled="true"' : '' %}
 {% set _ariaLabel = (props['ariaLabel'] is defined) ? ' aria-label="'~ props['ariaLabel'] ~'"' : '' -%}
 
-<button class="{{ className }}{{ _color }}{{ _block }}" type="{{ _type }}"{{ _disabled|raw }}{{ _ariaLabel|raw }}>
+<button class="{{ className }}{{ _color }}{{ _size }}{{ _block }}" type="{{ _type }}"{{ _disabled|raw }}{{ _ariaLabel|raw }}>
     {%- block content %}{% endblock %}
-</button>
+</button>
diff --git a/packages/web-twig/tests/test-extends-components/button.twig b/packages/web-twig/tests/test-extends-components/button.twig
@@ -1,4 +1 @@
-{% set _sizeClass = props.size is defined ? _spiritClassPrefix ~ 'Button--' ~ props.size %}
-{% set props = props|merge({ 'class': _sizeClass }) %}
-
 {% extends "@spirit/button.twig" %}