Feat(web-twig): Add PasswordField implementation into TextField

lmc-eu · Jul 30, 2022 · fb15e39 · fb15e39
1 parent cf26cc6
commit fb15e39
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/packages/web-twig/docs/TextField.md b/packages/web-twig/docs/TextField.md
@@ -1,6 +1,6 @@
 # TextField
 
-This is Twig implementation of the [TextField] component.
+This is Twig implementation of the [TextField] and [PasswordField] component.
 
 ## Examples
 pure implementation:
@@ -38,4 +38,5 @@ With Html syntax lexer (enabled by default):
 | `isLabelHidden`   | boolean                       | Whether is label hidden        |
 | `class`           | string                        | Additional class name          |
 
-[TextField]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/TextField
+[TextField]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/TextField
+[PasswordField]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/PasswordField
diff --git a/packages/web-twig/src/Resources/components/textField.twig b/packages/web-twig/src/Resources/components/textField.twig
@@ -1,4 +1,6 @@
-{% set _className = _spiritClassPrefix ~ 'TextField' %}
+{% set _type = (props.type is defined) ? props.type : 'text' %}
+{% set _componentClassName = _type == 'text' ? 'TextField' : 'PasswordField' %}
+{% set _className = _spiritClassPrefix ~ _componentClassName %}
 {% set _id = (props.id is defined) ? props.id : '' %}
 
 {% set _label = (props.label is defined) ? props.label : '' %}
@@ -7,7 +9,7 @@
 {% set _labelClassHidden = (props.isLabelHidden is defined) ? ' ' ~ _labelClass ~ '--hidden' : '' %}
 
 {% set _inputName = (props.name is defined) ? props.name : '' %}
-{% set _InputType = (props.type is defined) ? props.type : 'text' %}
+{% set _type = (props.type is defined) ? props.type : 'text' %}
 {% set _InputClass = _className ~ '__input' %}
 
 {% set _disabled = (props.disabled is defined) ? ' disabled="true"' : '' %}
@@ -21,7 +23,7 @@
 <div class="{{ _className }}{{ _disabledClass }}{{ _validationStateClass }}{{ _class }}">
     <label for={{ _id }} class="{{ _labelClass }}{{ _labelClassHidden }}{{ _labelClassRequired }}">{{ _label }}</label>
     <input
-        type="{{ _InputType }}"
+        type="{{ _type }}"
         id="{{ _id }}"
         name="{{ _inputName }}"
         class={{ _InputClass }}

diff --git a/...ntsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html b/...ntsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html
@@ -6,8 +6,8 @@
     </div>
 
 
-<div class="TextField TextField--error">
-    <label for="example2" class="TextField__label TextField__label--required">Password field</label>
-    <input type="password" id="example2" name="example2" class="TextField__input" required="true" value="">
+<div class="PasswordField PasswordField--error">
+    <label for="example2" class="PasswordField__label PasswordField__label--required">Password field</label>
+    <input type="password" id="example2" name="example2" class="PasswordField__input" required="true" value="">
     </div>
 </body></html>