Feat(web-twig): Introduce loading state to Button and ButtonLink #DS-640

lmc-eu · Apr 6, 2023 · b7e5bab · b7e5bab
1 parent 9657c50
commit b7e5bab
Show file tree

Hide file tree

Showing 8 changed files with 69 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
@@ -5,6 +5,7 @@
 {%- set _size = props.size | default('medium') -%}
 {%- set _isBlock = props.isBlock | default(false) | boolprop -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
+{%- set _isLoading = props.isLoading | default(false) | boolprop -%}
 {%- set _isSquare = props.isSquare | default(false) | boolprop -%}
 {%- set _onClick = props.onClick | default(null) -%}
 {%- set _type = props.type | default('button') -%}
@@ -13,15 +14,16 @@
 {%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}
 {%- set _rootBlockClassName = _isBlock ? _spiritClassPrefix ~ 'Button--block' : null -%}
 {%- set _rootColorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
+{%- set _rootLoadingClassName = _isLoading ? _spiritClassPrefix ~ 'Button--loading' : null -%}
 {%- set _rootSizeClassName = _spiritClassPrefix ~ 'Button--' ~ _size -%}
 {%- set _rootSquareClassName = _isSquare ? _spiritClassPrefix ~ 'Button--square' : null -%}
 
 {# Attributes #}
-{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
+{%- set _disabledAttr = _isDisabled or _isLoading ? 'disabled' : null -%}
 {%- set _onClickAttr = _onClick ? 'onclick=' ~ _onClick | escape('html_attr') : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootSizeClassName, _rootBlockClassName, _rootSquareClassName, _class ] -%}
+{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootSizeClassName, _rootBlockClassName, _rootLoadingClassName, _rootSquareClassName, _class ] -%}
 {%- set _allowedAttributes = [ 'name' ] -%}
 
 {# Deprecations #}
@@ -37,4 +39,7 @@
     {{ _onClickAttr | raw }}
 >
     {%- block content %}{% endblock %}
+    {%- if _isLoading -%}
+        <Spinner />
+    {%- endif -%}
 </button>
diff --git a/packages/web-twig/src/Resources/components/Button/README.md b/packages/web-twig/src/Resources/components/Button/README.md
@@ -34,17 +34,18 @@ Without lexer:
 
 ## API
 
-| 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                                        |
-| `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 |
-| `name`       | `string`                                                                                  | `null`    | no       | For use a button as a form data reference            |
-| `onClick`    | `string`                                                                                  | `null`    | no       | JS function to call on click                         |
-| `size`       | [Size dictionary][dictionary-size]                                                        | `medium`  | no       | Size variant                                         |
-| `type`       | `string`                                                                                  | `button`  | no       | Type of the Button                                   |
+| 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                                                              |
+| `isBlock`    | `bool`                                                                                    | `false`   | no       | Span the element to the full width of its parent                           |
+| `isDisabled` | `bool`                                                                                    | `false`   | no       | If true, Button is disabled                                                |
+| `isLoading`  | `bool`                                                                                    | `false`   | no       | If true, Button is in a loading state, disabled and the Spinner is visible |
+| `isSquare`   | `bool`                                                                                    | `false`   | no       | If true, Button is square, usually only with an Icon                       |
+| `name`       | `string`                                                                                  | `null`    | no       | For use a button as a form data reference                                  |
+| `onClick`    | `string`                                                                                  | `null`    | no       | JS function to call on click                                               |
+| `size`       | [Size dictionary][dictionary-size]                                                        | `medium`  | no       | Size variant                                                               |
+| `type`       | `string`                                                                                  | `button`  | no       | Type of the Button                                                         |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility.

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig
@@ -6,14 +6,16 @@
 {%- set _href = props.href -%}
 {%- set _isBlock = props.isBlock | default(false) | boolprop -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
+{%- set _isLoading = props.isLoading | default(false) | boolprop -%}
 {%- set _isSquare = props.isSquare | default(false) | boolprop -%}
 {%- set _onClick = props.onClick | default(null) -%}
 {%- set _target = props.target | default(null) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}
 {%- set _rootBlockClassName = _isBlock ? _spiritClassPrefix ~ 'Button--block' : null -%}
-{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'Button--disabled' : null -%}
+{%- set _rootDisabledClassName = _isDisabled or _isLoading ? _spiritClassPrefix ~ 'Button--disabled' : null -%}
+{%- set _rootLoadingClassName = _isLoading ? _spiritClassPrefix ~ 'Button--loading' : null -%}
 {%- set _rootColorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
 {%- set _rootSizeClassName = _spiritClassPrefix ~ 'Button--' ~ _size -%}
 {%- set _rootSquareClassName = _isSquare ? _spiritClassPrefix ~ 'Button--square' : null -%}
@@ -23,7 +25,7 @@
 {%- set _targetAttr = _target ? 'target=' ~ _target : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootDisabledClassName, _rootSizeClassName, _rootSquareClassName, _class ] -%}
+{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootDisabledClassName, _rootLoadingClassName, _rootSizeClassName, _rootSquareClassName, _class ] -%}
 {%- set _allowedAttributes = [
     'title',
 ] -%}
@@ -42,4 +44,7 @@
     {{ _targetAttr }}
 >
     {%- block content %}{% endblock %}
+    {%- if _isLoading -%}
+        <Spinner />
+    {%- endif -%}
 </a>
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/README.md b/packages/web-twig/src/Resources/components/ButtonLink/README.md
@@ -29,18 +29,19 @@ Without lexer:
 
 ## API
 
-| 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                                                 |
-| `isBlock`    | `bool`                                                                                    | `false`   | no       | Span the element to the full width of its parent         |
-| `isDisabled` | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is disabled                          |
-| `isSquare`   | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is square, usually only with an icon |
-| `onClick`    | `string`                                                                                  | `null`    | no       | JS function to call on click                             |
-| `target`     | `string`                                                                                  | `null`    | no       | Link target                                              |
-| `title`      | `string`                                                                                  | `null`    | no       | Optional title to display on hover                       |
+| 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                                                                       |
+| `isBlock`    | `bool`                                                                                    | `false`   | no       | Span the element to the full width of its parent                               |
+| `isDisabled` | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is disabled                                                |
+| `isLoading`  | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is in a loading state, disabled and the Spinner is visible |
+| `isSquare`   | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is square, usually only with an Icon                       |
+| `onClick`    | `string`                                                                                  | `null`    | no       | JS function to call on click                                                   |
+| `target`     | `string`                                                                                  | `null`    | no       | Link target                                                                    |
+| `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.

diff --git a/...pshots__/ComponentsSnapshotTest__test with data set buttonLinkLoadingDefault.twig__1.html b/...pshots__/ComponentsSnapshotTest__test with data set buttonLinkLoadingDefault.twig__1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title></title>
+  </head>
+  <body>
+    <a class="Button Button--primary Button--disabled Button--loading Button--medium" href="#">Loading button link
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="70c1c05118deddaa2c68fb217d5117af" class="animation-spin-clockwise" aria-hidden="true">
+    <path d="M2.5 12.4c0-.55.196-1.021.588-1.412A1.931 1.931 0 0 1 4.5 10.4c.55-.001 1.02.195 1.412.588.392.392.588.863.588 1.412 0 .549-.196 1.02-.588 1.412A1.92 1.92 0 0 1 4.5 14.4c-.55 0-1.02-.197-1.412-.588A1.924 1.924 0 0 1 2.5 12.4Zm2.2-5.6c0-.608.214-1.127.644-1.557A2.12 2.12 0 0 1 6.9 4.6a2.12 2.12 0 0 1 1.557.644c.43.43.644.949.644 1.557a2.12 2.12 0 0 1-.644 1.557A2.12 2.12 0 0 1 6.9 9a2.12 2.12 0 0 1-1.556-.644A2.12 2.12 0 0 1 4.7 6.8ZM5.1 18c0-.5.174-.925.525-1.275a1.74 1.74 0 0 1 1.274-.525c.491 0 .914.175 1.269.525.355.35.532.775.53 1.274 0 .5-.177.925-.53 1.275-.353.35-.776.525-1.269.525-.5 0-.925-.175-1.274-.525A1.741 1.741 0 0 1 5.099 18Zm5-13.6c0-.667.233-1.233.7-1.7a2.315 2.315 0 0 1 1.7-.7c.667 0 1.233.233 1.7.7.467.467.7 1.033.7 1.7s-.233 1.233-.7 1.7c-.467.467-1.033.7-1.7.7a2.315 2.315 0 0 1-1.7-.7 2.315 2.315 0 0 1-.7-1.7Zm.8 16c0-.442.156-.82.469-1.132.313-.312.69-.468 1.131-.469.441 0 .818.156 1.131.47.313.313.47.69.47 1.13 0 .441-.157.818-.47 1.132-.313.313-.69.47-1.131.469-.441 0-.818-.157-1.131-.47a1.539 1.539 0 0 1-.47-1.13Zm5.8-2.4c0-.384.137-.713.412-.988.275-.276.604-.413.988-.412.383 0 .713.138.987.412.275.274.413.603.413.988 0 .384-.138.713-.413.987a1.353 1.353 0 0 1-.987.413c-.384 0-.713-.137-.988-.413A1.35 1.35 0 0 1 16.7 18Zm.4-11.2c0-.275.097-.51.293-.707A.958.958 0 0 1 18.1 5.8a.97.97 0 0 1 .706.293.96.96 0 0 1 .294.707.96.96 0 0 1-.294.707.97.97 0 0 1-.706.293.958.958 0 0 1-.707-.293.966.966 0 0 1-.293-.707Zm2.2 5.6c0-.333.116-.617.35-.85.233-.234.517-.35.85-.35.333 0 .616.116.85.35.233.233.35.517.35.85 0 .333-.116.616-.35.85-.234.234-.517.35-.85.35-.333 0-.617-.116-.85-.35a1.158 1.158 0 0 1-.35-.85Z" fill="#132930"></path></svg></a> <a class="Button Button--primary Button--disabled Button--loading Button--medium" href="#">Loading button link should still be disabled even if isDisabled is false <svg width="24" height="24" fill="none" viewbox="0 0 24 24" class="animation-spin-clockwise" aria-hidden="true">
+    <use href="#70c1c05118deddaa2c68fb217d5117af"></use></svg></a>
+  </body>
+</html>
diff --git a/..._snapshots__/ComponentsSnapshotTest__test with data set buttonLoadingDefault.twig__1.html b/..._snapshots__/ComponentsSnapshotTest__test with data set buttonLoadingDefault.twig__1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title></title>
+  </head>
+  <body>
+    <button class="Button Button--primary Button--medium Button--loading" type="button" disabled>Loading
+    button <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="70c1c05118deddaa2c68fb217d5117af" class="animation-spin-clockwise" aria-hidden="true">
+    <path d="M2.5 12.4c0-.55.196-1.021.588-1.412A1.931 1.931 0 0 1 4.5 10.4c.55-.001 1.02.195 1.412.588.392.392.588.863.588 1.412 0 .549-.196 1.02-.588 1.412A1.92 1.92 0 0 1 4.5 14.4c-.55 0-1.02-.197-1.412-.588A1.924 1.924 0 0 1 2.5 12.4Zm2.2-5.6c0-.608.214-1.127.644-1.557A2.12 2.12 0 0 1 6.9 4.6a2.12 2.12 0 0 1 1.557.644c.43.43.644.949.644 1.557a2.12 2.12 0 0 1-.644 1.557A2.12 2.12 0 0 1 6.9 9a2.12 2.12 0 0 1-1.556-.644A2.12 2.12 0 0 1 4.7 6.8ZM5.1 18c0-.5.174-.925.525-1.275a1.74 1.74 0 0 1 1.274-.525c.491 0 .914.175 1.269.525.355.35.532.775.53 1.274 0 .5-.177.925-.53 1.275-.353.35-.776.525-1.269.525-.5 0-.925-.175-1.274-.525A1.741 1.741 0 0 1 5.099 18Zm5-13.6c0-.667.233-1.233.7-1.7a2.315 2.315 0 0 1 1.7-.7c.667 0 1.233.233 1.7.7.467.467.7 1.033.7 1.7s-.233 1.233-.7 1.7c-.467.467-1.033.7-1.7.7a2.315 2.315 0 0 1-1.7-.7 2.315 2.315 0 0 1-.7-1.7Zm.8 16c0-.442.156-.82.469-1.132.313-.312.69-.468 1.131-.469.441 0 .818.156 1.131.47.313.313.47.69.47 1.13 0 .441-.157.818-.47 1.132-.313.313-.69.47-1.131.469-.441 0-.818-.157-1.131-.47a1.539 1.539 0 0 1-.47-1.13Zm5.8-2.4c0-.384.137-.713.412-.988.275-.276.604-.413.988-.412.383 0 .713.138.987.412.275.274.413.603.413.988 0 .384-.138.713-.413.987a1.353 1.353 0 0 1-.987.413c-.384 0-.713-.137-.988-.413A1.35 1.35 0 0 1 16.7 18Zm.4-11.2c0-.275.097-.51.293-.707A.958.958 0 0 1 18.1 5.8a.97.97 0 0 1 .706.293.96.96 0 0 1 .294.707.96.96 0 0 1-.294.707.97.97 0 0 1-.706.293.958.958 0 0 1-.707-.293.966.966 0 0 1-.293-.707Zm2.2 5.6c0-.333.116-.617.35-.85.233-.234.517-.35.85-.35.333 0 .616.116.85.35.233.233.35.517.35.85 0 .333-.116.616-.35.85-.234.234-.517.35-.85.35-.333 0-.617-.116-.85-.35a1.158 1.158 0 0 1-.35-.85Z" fill="#132930"></path></svg></button> <button class="Button Button--primary Button--medium Button--loading" type="button" disabled>Loading button should still be disabled even if isDisabled is false <svg width="24" height="24" fill="none" viewbox="0 0 24 24" class="animation-spin-clockwise" aria-hidden="true">
+    <use href="#70c1c05118deddaa2c68fb217d5117af"></use></svg></button>
+  </body>
+</html>
diff --git a/packages/web-twig/tests/components-fixtures/buttonLinkLoadingDefault.twig b/packages/web-twig/tests/components-fixtures/buttonLinkLoadingDefault.twig
@@ -0,0 +1,3 @@
+<ButtonLink href="#" color="primary" isLoading>Loading button link</ButtonLink>
+
+<ButtonLink href="#" color="primary" isLoading isDisabled={false}>Loading button link should still be disabled even if isDisabled is false</ButtonLink>
diff --git a/packages/web-twig/tests/components-fixtures/buttonLoadingDefault.twig b/packages/web-twig/tests/components-fixtures/buttonLoadingDefault.twig
@@ -0,0 +1,3 @@
+<Button color="primary" isLoading>Loading button</Button>
+
+<Button color="primary" isLoading isDisabled={false}>Loading button should still be disabled even if isDisabled is false</Button>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<ButtonLink href="#" color="primary" isLoading>Loading button link</ButtonLink>

		<ButtonLink href="#" color="primary" isLoading isDisabled={false}>Loading button link should still be disabled even if isDisabled is false</ButtonLink>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<Button color="primary" isLoading>Loading button</Button>

		<Button color="primary" isLoading isDisabled={false}>Loading button should still be disabled even if isDisabled is false</Button>