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"
 />