Feat(web-twig): Add CheckboxField component

packages/web-twig/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 <!-- There should always be "Unreleased" section at the beginning. -->
 ## Unreleased
-- Add `ButtonLink`, `Container`, `Grid`, `Stack` and `TextField` component
+- Add `ButtonLink`, `Container`, `Grid`, `Stack`, `TextField` and `CheckboxField` component
 - Add Snapshot tests
 - Update documentation
 - Bugfix camelCase filename in compiler

packages/web-twig/README.md

@@ -102,6 +102,7 @@ or pure original implementation
 - [Stack](./docs/Stack.md)
 - [Tag](./docs/Tag.md)
 - [TextField](./docs/TextField.md)
+- [CheckboxField](./docs/CheckboxField.md)
 
 if you want to extend these components, an example guide is [here](./docs/extendComponents.md).
 if you want to contribute, read guide [here](./docs/contribution.md).

packages/web-twig/docs/CheckboxField.md

@@ -0,0 +1,39 @@
+# CheckboxField
+
+This is Twig implementation of the [CheckboxField] component.
+
+## Examples
+pure implementation:
+```twig
+{% include "@spirit/checkboxField.twig" with { props: {
+    id: "example",
+    label: "some label",
+    name: "example",
+    required: "true",
+    validationState: "error",
+    message: "validation failed",
+}} %}
+```
+
+With Html syntax lexer (enabled by default):
+```twig
+<CheckboxField id="example" name="example" required checked validationState="error" messsage="validation failed" />
+```
+
+## Available props
+
+| Name              | Type      | Description                    |
+|-------------------|-----------|--------------------------------|
+| `id`              | string    | Input and label identification |
+| `name`            | string    | Input name                     |
+| `label`           | string    | Label text                     |
+| `value`           | string    | Input value                    |
+| `message`         | string    | Validation or help message     |
+| `disabled`        | boolean   | Whether is field disabled      |
+| `required`        | boolean   | Whether is field required      |
+| `checked`         | boolean   | Whether is field checked       |
+| `validationState` | `error`   | Type of validation state       |
+| `isLabelHidden`   | boolean   | Whether is label hidden        |
+| `class`           | string    | Additional class name          |
+
+[CheckboxField]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/CheckboxField

packages/web-twig/src/Resources/components/checkboxField.twig

@@ -0,0 +1,41 @@
+{% set _className = _spiritClassPrefix ~ 'CheckboxField' %}
+{% set _id = (props.id is defined) ? props.id : '' %}
+
+{% set _textClass = _className ~ '__text' %}
+
+{% set _label = (props.label is defined) ? props.label : '' %}
+{% set _labelClass = _className ~ '__label' %}
+{% set _labelClassRequired = (props.label is defined) ? ' ' ~ _labelClass ~ '--required' : '' %}
+{% set _labelClassHidden = (props.isLabelHidden is defined) ? ' ' ~ _labelClass ~ '--hidden' : '' %}
+
+{% set _inputName = (props.name is defined) ? props.name : '' %}
+{% set _type = (props.type is defined) ? props.type : 'text' %}
+{% set _InputClass = _className ~ '__input' %}
+
+{% set _disabled = (props.disabled is defined) ? ' disabled="true"' : '' %}
+{% set _checked = (props.checked is defined) ? ' checked="checked"' : '' %}
+{% set _required = (props.required is defined) ? ' required="true"' : '' %}
+{% set _disabledClass = (props.disabled is defined) ? ' ' ~ _className ~ '--disabled' : '' %}
+{% set _validationStateClass = (props.validationState is defined) ? ' ' ~ _className ~ '--' ~ props.validationState : '' %}
+{% set _value = (props.value is defined) ? props.value : '' %}
+{% set _class = (props.class is defined) ? ' ' ~  props.class : '' -%}
+
+<div class="{{ _className }}{{ _disabledClass }}{{ _validationStateClass }}{{ _class }}">
+    <label for={{ _id }} class="{{ _labelClass }}{{ _labelClassHidden }}{{ _labelClassRequired }}">
+        <input
+            type="checkbox"
+            id="{{ _id }}"
+            name="{{ _inputName }}"
+            class="{{ _InputClass }}"
+            {{ _checked|raw }}
+            {{ _disabled|raw }}
+            {{ _required|raw }}
+            value="{{ _value }}"
+        />
+        <span class="{{ _textClass }}">
+            <span class="{{ _labelClass }}">{{ _label }}</span>
+            {% if props.message is defined %}<span class="{{ _className }}__message">{{ props.message }}</span>{% endif %}
+        </span>
+    </label>
+    {% if props.message is defined %}<div class="{{ _className }}__message">{{ props.message }}</div>{% endif %}
+</div>

packages/web-twig/src/Resources/components/textField.twig

@@ -26,7 +26,7 @@
         type="{{ _type }}"
         id="{{ _id }}"
         name="{{ _inputName }}"
-        class={{ _InputClass }}
+        class="{{ _InputClass }}"
         {{ _disabled|raw }}
         {{ _placeholder|raw }}
         {{ _required|raw }}

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefault.twig__1.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body><div class="CheckboxField CheckboxField--error">
+    <label for="example" class="CheckboxField__label">
+        <input type="checkbox" id="example" name="example" class="CheckboxField__input" checked required="true" value="">
+        <span class="CheckboxField__text">
+            <span class="CheckboxField__label"></span>
+                    </span>
+    </label>
+    </div></body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefaultPure.twig__1.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body><div class="CheckboxField CheckboxField--error">
+    <label for="example" class="CheckboxField__label CheckboxField__label--required">
+        <input type="checkbox" id="example" name="example" class="CheckboxField__input" required="true" value="">
+        <span class="CheckboxField__text">
+            <span class="CheckboxField__label">some label</span>
+            <span class="CheckboxField__message">validation failed</span>        </span>
+    </label>
+    <div class="CheckboxField__message">validation failed</div>
+</div></body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set passwordFieldDefault.twig__1.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body><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>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html

@@ -1,13 +1,5 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<html><body>
-<div class="TextField TextField--error">
+<html><body><div class="TextField TextField--error">
     <label for="example" class="TextField__label TextField__label--required">Text field</label>
     <input type="text" id="example" name="example" class="TextField__input" required="true" value="">
-    </div>
-
-
-<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>
+    </div></body></html>

packages/web-twig/tests/components-fixtures/checkboxFieldDefault.twig

@@ -0,0 +1 @@
+<CheckboxField id="example" name="example" required checked validationState="error" messsage="validation failed" />

packages/web-twig/tests/components-fixtures/checkboxFieldDefaultPure.twig

@@ -0,0 +1,8 @@
+{% include "@spirit/checkboxField.twig" with { props: {
+    id: "example",
+    label: "some label",
+    name: "example",
+    required: "true",
+    validationState: "error",
+    message: "validation failed",
+}} %}

packages/web-twig/tests/components-fixtures/passwordFieldDefault.twig

@@ -0,0 +1 @@
+<TextField id="example2" label="Password field" type="password" name="example2" required validationState="error" messsage="validation failed" />

packages/web-twig/tests/components-fixtures/textFieldDefault.twig

@@ -1,2 +1 @@
-<TextField id="example" label="Text field" type="text" name="example" required validationState="error" messsage="validation failed" />
-<TextField id="example2" label="Password field" type="password" name="example2" required validationState="error" messsage="validation failed" />
+<TextField id="example" label="Text field" type="text" name="example" required validationState="error" messsage="validation failed" />