BREAKING CHANGE(web-twig): Rename CheckboxField component to `Check…

…box` #DS-522

 ## Migration Guide

Rename and use `Checkbox` component instead of `CheckboxField`.

- `<CheckboxField …>` → `<Checkbox …>`

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.

packages/web-twig/CONTRIBUTING.md

@@ -71,7 +71,7 @@ These props are unescaped.
 For example we used this prefix for props that can accept HTML string.
 
 ```twig
-<CheckboxField UNSAFE_helperText="<strong>Help!</strong>" />
+<Checkbox UNSAFE_helperText="<strong>Help!</strong>" />
 ```
 
 ### Example of component definition

packages/web-twig/README.md

@@ -68,7 +68,7 @@ All props that internally uses the [raw](https://twig.symfony.com/doc/3.x/filter
 This is considered a way how you can pass down HTML strings.
 
 ```twig
-<CheckboxField UNSAFE_helperText="<strong>Help!</strong>" />
+<Checkbox UNSAFE_helperText="<strong>Help!</strong>" />
 ```
 
 # Spirit Components

packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.stories.twig → packages/web-twig/src/Resources/components/Checkbox/Checkbox.stories.twig

@@ -6,68 +6,68 @@
         <h2 class="docs-Heading">Default</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/CheckboxField/stories/CheckboxFieldDefault.twig' %}
+            {% include '@components/Checkbox/stories/CheckboxDefault.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Indeterminate</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/CheckboxField/stories/CheckboxFieldIndeterminate.twig' %}
+            {% include '@components/Checkbox/stories/CheckboxIndeterminate.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Required</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/CheckboxField/stories/CheckboxFieldRequired.twig' %}
+            {% include '@components/Checkbox/stories/CheckboxRequired.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Hidden Label</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/CheckboxField/stories/CheckboxFieldHiddenLabel.twig' %}
+            {% include '@components/Checkbox/stories/CheckboxHiddenLabel.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Helper Text</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/CheckboxField/stories/CheckboxFieldHelperText.twig' %}
+            {% include '@components/Checkbox/stories/CheckboxHelperText.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Disabled</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/CheckboxField/stories/CheckboxFieldDisabled.twig' %}
+            {% include '@components/Checkbox/stories/CheckboxDisabled.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Validation State with Validation Text</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/CheckboxField/stories/CheckboxFieldValidation.twig' %}
+            {% include '@components/Checkbox/stories/CheckboxValidation.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Item</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/CheckboxField/stories/CheckboxFieldItem.twig' %}
+            {% include '@components/Checkbox/stories/CheckboxItem.twig' %}
         </div>
     </section>
 
     <script>
-        const inputs = ['checkboxfieldIndeterminate', 'checkboxFieldDisabledIndeterminate'];
+        const inputs = ['checkboxIndeterminate', 'checkboxDisabledIndeterminate'];
 
         window.addEventListener('DOMContentLoaded', function () {
             inputs.forEach(function (input) {

packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig → packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig

@@ -18,17 +18,17 @@
 {%- set _value = props.value | default(null) -%}
 
 {# Class names #}
-{%- set _inputClassName = _spiritClassPrefix ~ 'CheckboxField__input' -%}
-{%- set _labelClassName = _spiritClassPrefix ~ 'CheckboxField__label' -%}
-{%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'CheckboxField__label--hidden' : null -%}
-{%- set _labelRequiredClassName = _isRequired ? _spiritClassPrefix ~ 'CheckboxField__label--required' : null -%}
-{%- set _rootClassName = _spiritClassPrefix ~ 'CheckboxField' -%}
-{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'CheckboxField--disabled' : null -%}
-{%- set _rootItemClassName = _isItem ? _spiritClassPrefix ~ 'CheckboxField--item' : null -%}
-{%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'CheckboxField--' ~ _validationState : null -%}
-{%- set _textClassName = _spiritClassPrefix ~ 'CheckboxField__text' -%}
-{%- set _helperTextClassName = _spiritClassPrefix ~ 'CheckboxField__helperText' -%}
-{%- set _validationTextClassName = _spiritClassPrefix ~ 'CheckboxField__validationText' -%}
+{%- set _inputClassName = _spiritClassPrefix ~ 'Checkbox__input' -%}
+{%- set _labelClassName = _spiritClassPrefix ~ 'Checkbox__label' -%}
+{%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'Checkbox__label--hidden' : null -%}
+{%- set _labelRequiredClassName = _isRequired ? _spiritClassPrefix ~ 'Checkbox__label--required' : null -%}
+{%- set _rootClassName = _spiritClassPrefix ~ 'Checkbox' -%}
+{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'Checkbox--disabled' : null -%}
+{%- set _rootItemClassName = _isItem ? _spiritClassPrefix ~ 'Checkbox--item' : null -%}
+{%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'Checkbox--' ~ _validationState : null -%}
+{%- set _textClassName = _spiritClassPrefix ~ 'Checkbox__text' -%}
+{%- set _helperTextClassName = _spiritClassPrefix ~ 'Checkbox__helperText' -%}
+{%- set _validationTextClassName = _spiritClassPrefix ~ 'Checkbox__validationText' -%}
 
 {# Attributes #}
 {%- set _checkedAttr = _isChecked ? 'checked' : null -%}

packages/web-twig/src/Resources/components/CheckboxField/README.md → packages/web-twig/src/Resources/components/Checkbox/README.md

@@ -1,22 +1,22 @@
-# CheckboxField
+# Checkbox
 
-This is Twig implementation of the [CheckboxField] component.
+This is Twig implementation of the [Checkbox] component.
 
 Basic example usage:
 
 ```html
-<CheckboxField id="checkboxfieldDefault" label="Label" name="checkboxfieldDefault" />
+<Checkbox id="checkboxDefault" label="Label" name="checkboxDefault" />
 ```
 
 Advanced example usage:
 
 ```html
-<CheckboxField
-  id="checkboxfieldAdvanced"
+<Checkbox
+  id="checkboxAdvanced"
   isChecked
   isRequired
   validationText="validation text"
-  name="checkboxfieldAdvanced"
+  name="checkboxAdvanced"
   validationState="danger"
   helperText="Helper text"
 />
@@ -25,10 +25,10 @@ Advanced example usage:
 Without lexer:
 
 ```twig
-{% embed "@spirit/checkboxField.twig" with { props: {
-    id: "checkboxfieldEmbed",
+{% embed "@spirit/checkbox.twig" with { props: {
+    id: "checkboxEmbed",
     label: "some label",
-    name: "checkboxfieldEmbed",
+    name: "checkboxEmbed",
     isRequired: "true",
     validationState: "danger",
     validationText: "validation text",
@@ -66,7 +66,7 @@ further extend component's descriptiveness and accessibility. Also, UNSAFE styli
 see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 These attributes will be passed to the topmost HTML element of the component.
 
-[checkboxfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/CheckboxField
+[checkbox]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Checkbox
 [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

packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxDefault.twig

@@ -0,0 +1,11 @@
+<Checkbox
+    id="checkboxDefault"
+    label="Checkbox Label"
+    name="checkboxDefault"
+/>
+<Checkbox
+    id="checkboxDefaultChecked"
+    isChecked
+    label="Checkbox Label"
+    name="checkboxDefaultChecked"
+/>

packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxDisabled.twig

@@ -0,0 +1,23 @@
+<Checkbox
+    id="checkboxDisabled"
+    isDisabled
+    label="Checkbox Label"
+    name="checkboxDisabled"
+/>
+
+<Checkbox
+    helperText="Helper text"
+    id="checkboxDisabledHelperText"
+    isChecked
+    isDisabled
+    isRequired
+    label="Checkbox Label"
+    name="checkboxDisabledHelperText"
+/>
+
+<Checkbox
+    id="checkboxDisabledIndeterminate"
+    isDisabled
+    label="Checkbox Label"
+    name="checkboxDisabledIndeterminate"
+/>

packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxHelperText.twig

@@ -0,0 +1,6 @@
+<Checkbox
+    helperText="Helper text"
+    id="checkboxHelperText"
+    label="Checkbox Label"
+    name="checkboxHelperText"
+/>

packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxHiddenLabel.twig

@@ -0,0 +1,6 @@
+<Checkbox
+    id="checkboxHiddenLabel"
+    label="Checkbox Label"
+    name="checkboxHiddenLabel"
+    isLabelHidden
+/>

packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxIndeterminate.twig

@@ -0,0 +1,5 @@
+<Checkbox
+    id="checkboxIndeterminate"
+    label="Checkbox Label"
+    name="checkboxIndeterminate"
+/>

packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxItem.twig

@@ -0,0 +1,42 @@
+<Checkbox
+    id="checkboxItemDefault"
+    isItem
+    label="Checkbox Label"
+    name="checkboxItemDefault"
+/>
+
+<Checkbox
+    id="checkboxItemDefaultChecked"
+    isChecked
+    isItem
+    label="Checkbox Label"
+    name="checkboxItemDefaultChecked"
+/>
+
+<Checkbox
+    helperText="Helper text"
+    id="checkboxItemHelperText"
+    isItem
+    label="Checkbox Label"
+    name="checkboxItemHelperText"
+/>
+
+<Checkbox
+    id="checkboxItemDisabled"
+    isDisabled
+    isItem
+    label="Checkbox Label"
+    name="checkboxItemDisabled"
+/>
+
+<Checkbox
+    helperText="Helper text"
+    id="checkboxItemDisabledHelperText"
+    isChecked
+    isDisabled
+    isChecked
+    isItem
+    isRequired
+    label="Checkbox Label"
+    name="checkboxItemDisabledHelperText"
+/>

packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxRequired.twig

@@ -0,0 +1,6 @@
+<Checkbox
+    id="checkboxRequired"
+    isRequired
+    label="Checkbox Label"
+    name="checkboxRequired"
+/>

packages/web-twig/src/Resources/components/CheckboxField/stories/CheckboxFieldValidation.twig → packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxValidation.twig

@@ -1,32 +1,32 @@
-<CheckboxField
-    id="checkboxfieldSuccess"
+<Checkbox
+    id="checkboxSuccess"
     label="Checkbox Label"
-    name="checkboxfieldSuccess"
+    name="checkboxSuccess"
     validationState="success"
 />
 
-<CheckboxField
-    id="checkboxfieldWarning"
+<Checkbox
+    id="checkboxWarning"
     label="Checkbox Label"
     validationText="Warning validation text"
-    name="checkboxfieldWarning"
+    name="checkboxWarning"
     validationState="warning"
 />
 
-<CheckboxField
-    id="checkboxfieldDanger"
+<Checkbox
+    id="checkboxDanger"
     label="Checkbox Label"
     validationText="{{ ['First validation text', 'Second validation text'] }}"
-    name="checkboxfieldDanger"
+    name="checkboxDanger"
     validationState="danger"
 />
 
-<CheckboxField
+<Checkbox
     helperText="Helper text"
-    id="checkboxfieldWarningHelperText"
+    id="checkboxWarningHelperText"
     isChecked
     label="Checkbox Label"
     validationText="Warning validation text"
-    name="checkboxfieldWarningHelperText"
+    name="checkboxWarningHelperText"
     validationState="warning"
 />