Feat(web-twig): Add isAutoResizing prop to TextArea #DS-320

lmc-eu · May 16, 2023 · 8c7a785 · 8c7a785
1 parent a667bbf
commit 8c7a785
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 2 deletions.
diff --git a/packages/web-twig/src/Resources/components/TextArea/README.md b/packages/web-twig/src/Resources/components/TextArea/README.md
@@ -46,6 +46,7 @@ Without lexer:
 | Prop name         | Type                                                                 | Default | Required | Description                                                                                                                        |
 | ----------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | `id`              | `string`                                                             | —       | yes      | TextArea and label identification                                                                                                  |
+| `isAutoResizing`  | `bool`                                                               | `false` | no       | If true, TextArea adjusts its height as user types, see [plugin info](#javascript-plugin-for-auto-resizing)                        |
 | `isDisabled`      | `bool`                                                               | `false` | no       | If true, TextArea is disabled                                                                                                      |
 | `isFluid`         | `bool`                                                               | `false` | no       | If true, the element spans to the full width of its parent                                                                         |
 | `isLabelHidden`   | `bool`                                                               | `false` | no       | If true, label is hidden                                                                                                           |
@@ -65,7 +66,30 @@ further extend component's descriptiveness and accessibility. Also, UNSAFE styli
 see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 These attributes will be passed to the topmost HTML element of the component.
 
+## JavaScript Plugin for Auto-Resizing
+
+To enable auto-resizing of the textarea, first, you need to provide Spirit JavaScript,
+which will handle the functionality:
+
+```html
+<script src="node_modules/@lmc-eu/spirit-web/js/cjs/spirit-web.min.js" async></script>
+```
+
+Please consult the [main README][web-readme] for how to include JavaScript
+plugins.
+
+Then you need to add attribute `isAutoResizing` to the component.
+
+```twig
+<TextArea
+  id="textareaAutoResize"
+  isAutoResizing
+  label="Label of auto-resizing TextArea"
+></TextArea>
+```
+
 [textarea]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextArea
+[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
 [deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
 [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/TextArea/TextArea.stories.twig b/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig
@@ -25,6 +25,9 @@
         {# TextArea Helper Text #}
         {% include '@components/TextArea/stories/TextAreaHelperText.twig' %}
 
+        {# TextArea Auto Resize #}
+        {% include '@components/TextArea/stories/TextAreaAutoResize.twig' %}
+
         {# TextArea V1 Feature - new disabled state #}
         {% include '@components/TextArea/stories/TextAreaV1DisabledFeature.twig' %}
 

diff --git a/packages/web-twig/src/Resources/components/TextArea/stories/TextAreaAutoResize.twig b/packages/web-twig/src/Resources/components/TextArea/stories/TextAreaAutoResize.twig
@@ -0,0 +1,5 @@
+<TextArea
+    id="textareaAutoResize"
+    isAutoResizing
+    label="Label of auto-resizing TextArea"
+></TextArea>
diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/README.md b/packages/web-twig/src/Resources/components/TextFieldBase/README.md
@@ -65,6 +65,7 @@ Without lexer:
 | `helperText`        | `string`                                                             | `null`  | no       | Custom helper text                                                                                                                 |
 | `UNSAFE_helperText` | `string`                                                             | `null`  | no       | Unescaped custom helper text                                                                                                       |
 | `id`                | `string`                                                             | —       | yes      | Input and label identification                                                                                                     |
+| `isAutoResizing`    | `bool`                                                               | `false` | no       | If true, TextArea adjusts its height as user types                                                                                 |
 | `isDisabled`        | `bool`                                                               | `false` | no       | If true, input is disabled                                                                                                         |
 | `isFluid`           | `bool`                                                               | `false` | no       | If true, the element spans to the full width of its parent                                                                         |
 | `isLabelHidden`     | `bool`                                                               | `false` | no       | If true, label is hidden                                                                                                           |

diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
@@ -19,6 +19,7 @@
 {%- set _value = props.value | default(null) -%}
 
 {# Extended API for TextArea #}
+{%- set _isAutoResizing = props.isAutoResizing | default(false) | boolprop -%}
 {%- set _rows = props.rows | default(null) -%}
 
 {# Extended API for TextField #}
@@ -43,6 +44,7 @@
 {%- set _helperTextClassName = _rootClassName ~ '__helperText' -%}
 
 {# Attributes #}
+{%- set _dataToggleAttr = _isAutoResizing and _isMultiline ? 'data-toggle=autoResize' : null -%}
 {%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
 {%- set _placeholderAttr = _placeholder ? 'placeholder=' ~ _placeholder : null -%}
 {%- set _requiredAttr = _isRequired ? 'required' : null -%}
@@ -58,7 +60,7 @@
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootFluidClassName, _rootValidationStateClassName, _styleProps.className ] -%}
 {%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
-{%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%}
+{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop != 'id' and (_isAutoResizing and prop != 'data-toggle')) -%}
 {%- set _allowedAttributes = [ 'autocomplete' ] -%}
 
 {# Deprecations #}
@@ -69,7 +71,7 @@
     {% deprecated _rootClassName ~ ': `message` prop without `validationState` prop will be unsupported in the next version. Use `helperText` instead.' %}
 {% endif %}
 
-<div {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_rootClassNames) }}>
+<div {{ mainProps(_mainPropsWithoutReservedAttributes) }} {{ styleProp(_styleProps) }} {{ classProp(_rootClassNames) }} {{ _dataToggleAttr }}>
     <label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
         {% if _unsafeLabel %}{{ _unsafeLabel | raw }}{% else %}{{ _label }}{% endif %}
     </label>