-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web-twig): Add abstract component TextFieldBase #DS-319
- Loading branch information
Showing
17 changed files
with
171 additions
and
70 deletions.
There are no files selected for viewing
57 changes: 1 addition & 56 deletions
57
packages/web-twig/src/Resources/components/TextField/TextField.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,4 @@ | ||
| {# API #} | ||
| {%- set props = props | default([]) -%} | ||
| {%- set _class = props.class | default(null) -%} | ||
| {%- set _id = props.id -%} | ||
| {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%} | ||
| {%- set _isFluid = props.isFluid | default(false) | boolprop -%} | ||
| {%- set _isLabelHidden = props.isLabelHidden | default(false) | boolprop -%} | ||
| {%- set _isRequired = props.isRequired | default(false) | boolprop -%} | ||
| {%- set _label = props.label -%} | ||
| {%- set _message = props.message | default(null) -%} | ||
| {%- set _name = props.name | default(null) -%} | ||
| {%- set _placeholder = props.placeholder | default(null) -%} | ||
| {%- set _type = props.type | default('text') -%} | ||
| {%- set _validationState = props.validationState | default(null) -%} | ||
| {%- set _value = props.value | default(null) -%} | ||
|
|
||
| {# Class names #} | ||
| {%- set _inputClassName = _spiritClassPrefix ~ 'TextField__input' -%} | ||
| {%- set _labelClassName = _spiritClassPrefix ~ 'TextField__label' -%} | ||
| {%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'TextField__label--hidden' : null -%} | ||
| {%- set _labelRequiredClassName = _isRequired ? _spiritClassPrefix ~ 'TextField__label--required' : null -%} | ||
| {%- set _messageClassName = _spiritClassPrefix ~ 'TextField__message' -%} | ||
| {%- set _rootClassName = _spiritClassPrefix ~ 'TextField' -%} | ||
| {%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'TextField--disabled' : null -%} | ||
| {%- set _rootFluidClassName = _isFluid ? _spiritClassPrefix ~ 'TextField--fluid' : null -%} | ||
| {%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'TextField--' ~ _validationState : null -%} | ||
|
|
||
| {# Attributes #} | ||
| {%- set _disabledAttr = _isDisabled ? 'disabled' : null -%} | ||
| {%- set _placeholderAttr = _placeholder ? 'placeholder="' ~ _placeholder ~'"' : null -%} | ||
| {%- set _requiredAttr = _isRequired ? 'required' : null -%} | ||
| {%- set _valueAttr = _value ? 'value="' ~ _value ~'"' : null -%} | ||
|
|
||
| {# Miscellaneous #} | ||
| {%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootFluidClassName, _rootValidationStateClassName, _class ] -%} | ||
| {%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%} | ||
| {%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%} | ||
|
|
||
| <div {{ mainProps(_mainPropsWithoutId) }} {{ classProp(_rootClassNames) }}> | ||
| <label for="{{ _id }}" {{ classProp(_labelClassNames) }}> | ||
| {{ _label | raw }} | ||
| </label> | ||
| <input | ||
| {{ inputProps(props) }} | ||
| type="{{ _type }}" | ||
| id="{{ _id }}" | ||
| name="{{ _name }}" | ||
| class="{{ _inputClassName }}" | ||
| {{ _disabledAttr | raw }} | ||
| {{ _placeholderAttr | raw }} | ||
| {{ _requiredAttr | raw }} | ||
| {{ _valueAttr | raw }} | ||
| /> | ||
| {% if _message %} | ||
| <div class="{{ _messageClassName }}"> | ||
| {{ _message | raw }} | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| {% embed '@spirit/TextFieldBase/TextFieldBase.twig' with { props: props } only %}{% endembed %} |
61 changes: 61 additions & 0 deletions
61
packages/web-twig/src/Resources/components/TextFieldBase/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| # TextFieldBase | ||
|
|
||
| This is Twig implementation of the abstract component [TextFieldBase] for the purposes of the form components TextField and TextArea. | ||
|
|
||
| Basic example usage: | ||
|
|
||
| ```html | ||
| <TextFieldBase id="example" label="Label" name="example" /> | ||
| ``` | ||
|
|
||
| Advanced example usage: | ||
|
|
||
| ```html | ||
| <TextField | ||
| id="example2" | ||
| isRequired | ||
| messsage="validation failed" | ||
| name="example2" | ||
| placeholder="Placeholder" | ||
| type="password" | ||
| validationState="error" | ||
| /> | ||
| ``` | ||
|
|
||
| Without lexer: | ||
|
|
||
| ```twig | ||
| {% include "@spirit/textFieldBase.twig" with { props: { | ||
| id: "example", | ||
| type: "text", | ||
| 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 | Input and label identification | | ||
| | `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 | | ||
| | `isMultiline` | `bool` | `false` | no | If true, rendered DOM element is `textarea` | | ||
| | `isRequired` | `bool` | `false` | no | If true, input is required | | ||
| | `label` | `string` | — | yes | Label text | | ||
| | `message` | `string` | `null` | no | Validation or help message | | ||
| | `name` | `string` | `null` | no | Input name | | ||
| | `placeholder` | `string` | `null` | no | Input placeholder | | ||
| | `type` | `text`, `password`, `email` | `success` | no | Input type | | ||
| | `validationState` | `success`, `warning`, `error` | `null` | no | Type of validation state | | ||
| | `value` | `string` | `null` | no | Input 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. | ||
|
|
||
| [textfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextField |
74 changes: 74 additions & 0 deletions
74
packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| {# API #} | ||
| {%- set props = props | default([]) -%} | ||
| {%- set _class = props.class | default(null) -%} | ||
| {%- set _id = props.id -%} | ||
| {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%} | ||
| {%- set _isFluid = props.isFluid | default(false) | boolprop -%} | ||
| {%- set _isLabelHidden = props.isLabelHidden | default(false) | boolprop -%} | ||
| {%- set _isMultiline = props.isMultiline | default(false) | boolprop -%} | ||
| {%- set _isRequired = props.isRequired | default(false) | boolprop -%} | ||
| {%- set _label = props.label -%} | ||
| {%- set _message = props.message | default(null) -%} | ||
| {%- set _name = props.name | default(null) -%} | ||
| {%- set _placeholder = props.placeholder | default(null) -%} | ||
| {%- set _type = props.type | default('text') -%} | ||
| {%- set _validationState = props.validationState | default(null) -%} | ||
| {%- set _value = props.value | default(null) -%} | ||
|
|
||
| {# Class names #} | ||
| {%- set _rootClassName = _spiritClassPrefix ~ _isMultiline ? 'TextArea' : 'TextField' -%} | ||
| {%- set _inputClassName = _rootClassName ~ '__input' -%} | ||
| {%- set _labelClassName = _rootClassName ~ '__label' -%} | ||
| {%- set _labelHiddenClassName = _isLabelHidden ? _rootClassName ~ '__label--hidden' : null -%} | ||
| {%- set _labelRequiredClassName = _isRequired ? _rootClassName ~ '__label--required' : null -%} | ||
| {%- set _messageClassName = _rootClassName ~ '__message' -%} | ||
| {%- set _rootDisabledClassName = _isDisabled ? _rootClassName ~ '--disabled' : null -%} | ||
| {%- set _rootFluidClassName = _isFluid ? _rootClassName ~ '--fluid' : null -%} | ||
| {%- set _rootValidationStateClassName = _validationState ? _rootClassName ~ '--' ~ _validationState : null -%} | ||
|
|
||
| {# Attributes #} | ||
| {%- set _disabledAttr = _isDisabled ? 'disabled' : null -%} | ||
| {%- set _placeholderAttr = _placeholder ? 'placeholder="' ~ _placeholder ~'"' : null -%} | ||
| {%- set _requiredAttr = _isRequired ? 'required' : null -%} | ||
| {%- set _valueAttr = _value ? 'value="' ~ _value ~'"' : null -%} | ||
|
|
||
| {# Miscellaneous #} | ||
| {%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootFluidClassName, _rootValidationStateClassName, _class ] -%} | ||
| {%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%} | ||
| {%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%} | ||
|
|
||
| <div {{ mainProps(_mainPropsWithoutId) }} {{ classProp(_rootClassNames) }}> | ||
| <label for="{{ _id }}" {{ classProp(_labelClassNames) }}> | ||
| {{ _label | raw }} | ||
| </label> | ||
| {% if _isMultiline %} | ||
| <textarea | ||
| {{ inputProps(props) }} | ||
| id="{{ _id }}" | ||
| name="{{ _name }}" | ||
| class="{{ _inputClassName }}" | ||
| {{ _disabledAttr | raw }} | ||
| {{ _placeholderAttr | raw }} | ||
| {{ _requiredAttr | raw }} | ||
| > | ||
| {{ _valueAttr | raw }} | ||
| </textarea> | ||
| {% else %} | ||
| <input | ||
| {{ inputProps(props) }} | ||
| type="{{ _type }}" | ||
| id="{{ _id }}" | ||
| name="{{ _name }}" | ||
| class="{{ _inputClassName }}" | ||
| {{ _disabledAttr | raw }} | ||
| {{ _placeholderAttr | raw }} | ||
| {{ _requiredAttr | raw }} | ||
| {{ _valueAttr | raw }} | ||
| /> | ||
| {% endif %} | ||
| {% if _message %} | ||
| <div class="{{ _messageClassName }}"> | ||
| {{ _message | raw }} | ||
| </div> | ||
| {% endif %} | ||
| </div> |
1 change: 1 addition & 0 deletions
1
packages/web-twig/src/Resources/twig-components/textFieldBase.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {% extends '@spirit/TextFieldBase/TextFieldBase.twig' %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
..._snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseDefault.twig__1.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <html><body> | ||
| <div class="TextField TextField--error"> | ||
| <label for="example" class="TextField__label TextField__label--required"> | ||
| Text field | ||
| </label> | ||
| <input minlength="6" type="text" id="example" name="example" class="TextField__input" required> | ||
| </div> | ||
| </body></html> |
10 changes: 10 additions & 0 deletions
10
...napshots__/ComponentsSnapshotTest__test with data set textFieldBaseMultiline.twig__1.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" id="example" name="example" class="Textarea__input" required> | ||
|
|
||
| </textarea> | ||
| </div> | ||
| </body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
packages/web-twig/tests/components-fixtures/textFieldBaseDefault.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <TextFieldBase id="example" label="Text field" type="text" name="example" isRequired validationState="error" messsage="validation failed" minlength="6" /> |
1 change: 1 addition & 0 deletions
1
packages/web-twig/tests/components-fixtures/textFieldBaseMultiline.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <TextFieldBase id="example" label="Textarea" type="text" name="example" isRequired isMultiline validationState="error" messsage="validation failed" minlength="6" /> |