Feat(web-twig): Add autocomplete attribute to the CheckboxField

lmc-eu · Jul 21, 2023 · 1aeb91b · 1aeb91b
1 parent e90904b
commit 1aeb91b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 23 deletions.
diff --git a/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig b/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig
@@ -41,10 +41,11 @@
 {%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _styleProps.className ] -%}
 {%- set _labelClassName = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
+{%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
 
 <label for="{{ _id }}" {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
  <input
- {{ inputProps(props, [], _inputProps) }}
+ {{ inputProps(props, _allowedInputAttributes, _inputProps) }}
  type="checkbox"
  id="{{ _id }}"
  name="{{ _name }}"

diff --git a/packages/web-twig/src/Resources/components/CheckboxField/README.md b/packages/web-twig/src/Resources/components/CheckboxField/README.md
@@ -38,24 +38,25 @@ Without lexer:
 
 ## API
 
-| Prop name | Type | Default | Required | Description |
-| ----------------------- | ---------------------------------------------- | ------- | -------- | ----------------------------------------------- |
-| `helperText` | `string` | `null` | no\*\* | Custom helper text |
-| `id` | `string` | `null` | no | Input and label identification |
-| `inputProps` | `string[]` | `[]` | no | Pass additional attributes to the input element |
-| `isChecked` | `bool` | `false` | no | If true, input is checked |
-| `isDisabled` | `bool` | `false` | no | If true, input is disabled |
-| `isItem` | `bool` | `false` | no | To render in [Item][item] mode |
-| `isLabelHidden` | `bool` | `false` | no | If true, label is hidden |
-| `isRequired` | `bool` | `false` | no | If true, input is required |
-| `label` | `string` | — | yes\* | Label text |
-| `name` | `string` | `null` | no | Input name |
-| `UNSAFE_helperText` | `string` | `null` | no\*\* | Unescaped custom helper text |
-| `UNSAFE_label` | `string` | — | yes\* | Unescaped label text (allows HTML) |
-| `UNSAFE_validationText` | `string`, `string[]` | `null` | no\*\* | Unescaped validation text |
-| `validationState` | [Validation dictionary][dictionary-validation] | `null` | no | Type of validation state. |
-| `validationText` | `string`, `string[]` | `null` | no\*\* | Validation text |
-| `value` | `string` | `null` | no | Input value |
+| Prop name | Type | Default | Required | Description |
+| ----------------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------- |
+| `autocomplete` | `string` | `null` | no | [Automated assistance in filling][autocomplete-attr] |
+| `helperText` | `string` | `null` | no\*\* | Custom helper text |
+| `id` | `string` | `null` | no | Input and label identification |
+| `inputProps` | `string[]` | `[]` | no | Pass additional attributes to the input element |
+| `isChecked` | `bool` | `false` | no | If true, input is checked |
+| `isDisabled` | `bool` | `false` | no | If true, input is disabled |
+| `isItem` | `bool` | `false` | no | To render in [Item][item] mode |
+| `isLabelHidden` | `bool` | `false` | no | If true, label is hidden |
+| `isRequired` | `bool` | `false` | no | If true, input is required |
+| `label` | `string` | — | yes\* | Label text |
+| `name` | `string` | `null` | no | Input name |
+| `UNSAFE_helperText` | `string` | `null` | no\*\* | Unescaped custom helper text |
+| `UNSAFE_label` | `string` | — | yes\* | Unescaped label text (allows HTML) |
+| `UNSAFE_validationText` | `string`, `string[]` | `null` | no\*\* | Unescaped validation text |
+| `validationState` | [Validation dictionary][dictionary-validation] | `null` | no | Type of validation state. |
+| `validationText` | `string`, `string[]` | `null` | no\*\* | Validation text |
+| `value` | `string` | `null` | no | Input value |
 
 \*: Label is required. You can use the `label` for simple text or `UNSAFE_label` for HTML content.
 \*\*: Props with and without `UNSAFE_` prefix are mutually exclusive.
@@ -69,3 +70,4 @@ These attributes will be passed to the topmost HTML element of the component.
 [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
+[autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
diff --git a/...s/__snapshots__/ComponentsSnapshotTest__test with data set fileUploaderInput.twig__1.html b/...s/__snapshots__/ComponentsSnapshotTest__test with data set fileUploaderInput.twig__1.html
@@ -62,10 +62,6 @@
  <span>UNSAFE helper text</span>
  </div>
  </div>
-
- <div class="FileUploaderInput__validationText">
- <span>UNSAFE validation text</span>
- </div>
  </div>
  <!-- Render with all props -->