Feat(web-twig): Introduce TextArea component #DS-319

lmc-eu · Nov 28, 2022 · 6692806 · 6692806
1 parent c048f43
commit 6692806
Show file tree

Hide file tree

Showing 6 changed files with 103 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
@@ -0,0 +1,63 @@
+# TextArea
+
+This is Twig implementation of the [TextArea] component.
+
+Basic example usage:
+
+```twig
+<TextArea id="example" label="Label" name="example"></TextArea>
+```
+
+Advanced example usage:
+
+```twig
+<TextArea
+  id="example2"
+  messsage="validation failed"
+  name="example2"
+  placeholder="Placeholder"
+  validationState="error"
+  maxlength="180"
+  rows="10"
+  isRequired
+>
+    TextArea
+</TextArea>
+```
+
+Without lexer:
+
+```twig
+{% include "@spirit/textArea.twig" with { props: {
+    id: "example",
+    name: "example",
+    isRequired: true,
+    validationState: "error",
+    message: "validation failed",
+}} %}
+```
+
+## API
+
+| Prop name         | Type                          | Default | Required | Description                                                |
+| ----------------- | ----------------------------- | ------- | -------- | ---------------------------------------------------------- |
+| `class`           | `string`                      | `null`  | no       | Custom CSS class                                           |
+| `id`              | `string`                      | —       | yes      | TextArea and label identification                          |
+| `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                                   |
+| `isRequired`      | `bool`                        | `false` | no       | If true, TextArea is required                              |
+| `label`           | `string`                      | —       | yes      | Label text                                                 |
+| `maxLength`       | `number`                      | `null`  | no       | Maximum number of characters                               |
+| `message`         | `string`                      | `null`  | no       | Validation or help message                                 |
+| `name`            | `string`                      | `null`  | no       | TextArea name                                              |
+| `placeholder`     | `string`                      | `null`  | no       | TextArea placeholder                                       |
+| `rows`            | `number`                      | `null`  | no       | Number of visible rows                                     |
+| `validationState` | `success`, `warning`, `error` | `null`  | no       | Type of validation state                                   |
+| `value`           | `string`                      | `null`  | no       | TextArea value                                             |
+
+On top of the API options, you can add `data-*` or `aria-*` attributes to
+further extend component's descriptiveness and accessibility. These attributes
+will be passed to the topmost HTML element of the component.
+
+[textarea]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextArea
diff --git a/packages/web-twig/src/Resources/components/TextArea/TextArea.twig b/packages/web-twig/src/Resources/components/TextArea/TextArea.twig
@@ -0,0 +1,8 @@
+{# API #}
+{%- set props = props | default([]) -%}
+
+{% embed '@spirit/TextFieldBase/TextFieldBase.twig' with {
+    props: props | merge ({
+        isMultiline: true,
+    })
+} only %}{% endembed %}
diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
@@ -15,6 +15,9 @@
 {%- set _validationState = props.validationState | default(null) -%}
 {%- set _value = props.value | default(null) -%}
 
+{# Extended API for TextArea #}
+{%- set _rows = props.rows | default(null) -%}
+
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ _isMultiline ? 'TextArea' : 'TextField' -%}
 {%- set _inputClassName = _rootClassName ~ '__input' -%}
@@ -32,6 +35,9 @@
 {%- set _requiredAttr = _isRequired ? 'required' : null -%}
 {%- set _valueAttr = _value ? 'value="' ~ _value ~'"' : null -%}
 
+{# Extended Attributes for TextArea #}
+{%- set _rowsAttr = _rows ? 'rows="' ~ _rows ~ '"' : null -%}
+
 {# Miscellaneous #}
 {%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootFluidClassName, _rootValidationStateClassName, _class ] -%}
 {%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
@@ -47,9 +53,10 @@
             id="{{ _id }}"
             name="{{ _name }}"
             class="{{ _inputClassName }}"
-            {{ _disabledAttr | raw }}
+            {{ _rowsAttr | raw }}
             {{ _placeholderAttr | raw }}
-            {{ _requiredAttr | raw }}
+            {{ _disabledAttr | raw }}
+            {{ _requiredAttr }}
         >
             {{ _valueAttr | raw }}
         </textarea>

diff --git a/packages/web-twig/src/Resources/twig-components/textArea.twig b/packages/web-twig/src/Resources/twig-components/textArea.twig
@@ -0,0 +1 @@
+{% extends '@spirit/TextArea/TextArea.twig' %}
diff --git a/...sts/__snapshots__/ComponentsSnapshotTest__test with data set textAreaDefault.twig__1.html b/...sts/__snapshots__/ComponentsSnapshotTest__test with data set textAreaDefault.twig__1.html
@@ -0,0 +1,10 @@
+<html><body>
+<div class="TextArea TextArea--error">
+    <label for="example" class="TextArea__label TextArea__label--required">
+        TextArea
+    </label>
+            <textarea minlength="6" maxlength="10" id="example" name="example" class="TextArea__input" rows="10" required>
+            TextArea value
+        </textarea>
+        </div>
+</body></html>
diff --git a/packages/web-twig/tests/components-fixtures/textAreaDefault.twig b/packages/web-twig/tests/components-fixtures/textAreaDefault.twig
@@ -0,0 +1,12 @@
+<TextArea
+    id="example"
+    label="TextArea"
+    messsage="validation failed"
+    minlength="6"
+    maxlength="10"
+    name="example"
+    validationState="error"
+    value="TextArea value"
+    rows="10"
+    isRequired
+/>