BREAKING CHANGE(web): Rename CheckboxField to Checkbox #DS-522

 ## Migration Guide

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

- `<div class="CheckboxField" …>` → `<div class="Checkbox" …>`
- `.CheckboxField__*` → `.Checkbox__*`

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

packages/web/src/scss/components/Checkbox/README.md

@@ -0,0 +1,95 @@
+# Checkbox
+
+## Basic usage:
+
+```html
+<label for="checkboxDefault" class="Checkbox">
+  <input type="checkbox" id="checkboxDefault" class="Checkbox__input" name="default" />
+  <span class="Checkbox__text">
+    <span class="Checkbox__label">Checkbox Label</span>
+  </span>
+</label>
+```
+
+## Required input:
+
+```html
+<label for="checkboxRequired" class="Checkbox">
+  <input type="checkbox" id="checkboxRequired" class="Checkbox__input" name="required" required />
+  <span class="Checkbox__text">
+    <span class="Checkbox__label Checkbox__label--required">Checkbox Label</span>
+  </span>
+</label>
+```
+
+## Validation State with Validation Text:
+
+See Validation state [dictionary][dictionary-validation].
+
+```html
+<label for="checkboxWarning" class="Checkbox Checkbox--warning">
+  <input type="checkbox" id="checkboxWarning" class="Checkbox__input" name="warning" />
+  <span class="Checkbox__text">
+    <span class="Checkbox__label">Checkbox Label</span>
+    <span class="Checkbox__validationText">Warning validation text</span>
+  </span>
+</label>
+
+<label for="checkboxDanger" class="Checkbox Checkbox--danger">
+  <input type="checkbox" id="checkboxDanger" class="Checkbox__input" name="danger" />
+  <span class="Checkbox__text">
+    <span class="Checkbox__label">Checkbox Label</span>
+    <ul class="Checkbox__validationText">
+      <li>First validation text</li>
+      <li>Second validation text</li>
+    </ul>
+  </span>
+</label>
+```
+
+## Hidden label:
+
+```html
+<label for="checkboxHiddenLabel" class="Checkbox">
+  <input type="checkbox" id="checkboxHiddenLabel" class="Checkbox__input" name="hiddenLabel" required />
+  <span class="Checkbox__text">
+    <span class="Checkbox__label Checkbox__label--hidden">Checkbox Label</span>
+  </span>
+</label>
+```
+
+## Helper Text:
+
+```html
+<label for="checkboxHelperText" class="Checkbox">
+  <input type="checkbox" id="checkboxHelperText" class="Checkbox__input" name="helperText" />
+  <span class="Checkbox__text">
+    <span class="Checkbox__label">Checkbox Label</span>
+    <span class="Checkbox__helperText">Helper text</span>
+  </span>
+</label>
+```
+
+## Disabled state:
+
+```html
+<label for="checkboxDisabled" class="Checkbox Checkbox--disabled">
+  <input type="checkbox" id="checkboxDisabled" class="Checkbox__input" name="disabled" disabled />
+  <span class="Checkbox__text">
+    <span class="Checkbox__label">Checkbox Label</span>
+  </span>
+</label>
+```
+
+## As an Item:
+
+```html
+<label for="checkboxItemDefault" class="Checkbox Checkbox--item">
+  <input type="checkbox" id="checkboxItemDefault" class="Checkbox__input" name="item" />
+  <span class="Checkbox__text">
+    <span class="Checkbox__label">Checkbox Label</span>
+  </span>
+</label>
+```
+
+[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation

packages/web/src/scss/components/CheckboxField/_CheckboxField.scss → packages/web/src/scss/components/Checkbox/_Checkbox.scss

@@ -4,29 +4,29 @@
 @use '../../tools/form-fields' as form-fields-tools;
 @use '../../tools/svg';
 
-$_field-name: 'CheckboxField';
+$_field-name: 'Checkbox';
 
-.CheckboxField {
+.Checkbox {
     @include form-fields-tools.inline-field-root();
 }
 
-.CheckboxField__text {
+.Checkbox__text {
     margin-left: form-fields-theme.$spacing;
 }
 
-.CheckboxField__label {
+.Checkbox__label {
     @include form-fields-tools.inline-field-label();
 }
 
-.CheckboxField__label--hidden {
+.Checkbox__label--hidden {
     @include form-fields-tools.label-hidden();
 }
 
-.CheckboxField__label--required::after {
+.Checkbox__label--required::after {
     @include form-fields-tools.label-required();
 }
 
-.CheckboxField__input {
+.Checkbox__input {
     @include form-fields-tools.inline-field-input();
 
     flex-shrink: 0;
@@ -51,69 +51,69 @@ $_field-name: 'CheckboxField';
     }
 }
 
-.CheckboxField__validationText,
-.CheckboxField > .CheckboxField__text > [data-element='validation_text'] {
+.Checkbox__validationText,
+.Checkbox > .Checkbox__text > [data-element='validation_text'] {
     @include form-fields-tools.validation-text();
 }
 
-.CheckboxField__helperText {
+.Checkbox__helperText {
     @include form-fields-tools.helper-text();
 }
 
 @include form-fields-tools.input-field-validation-states($_field-name);
 
-.CheckboxField--disabled {
+.Checkbox--disabled {
     @include form-fields-tools.inline-field-root-disabled();
 }
 
-.CheckboxField--disabled .CheckboxField__label {
+.Checkbox--disabled .Checkbox__label {
     @include form-fields-tools.label-disabled();
 }
 
-.CheckboxField--disabled .CheckboxField__validationText {
+.Checkbox--disabled .Checkbox__validationText {
     @include form-fields-tools.validation-text-disabled();
 }
 
-.CheckboxField--disabled .CheckboxField__helperText {
+.Checkbox--disabled .Checkbox__helperText {
     @include form-fields-tools.helper-text-disabled();
 }
 
-.CheckboxField--disabled > .CheckboxField__input,
-.CheckboxField > .CheckboxField__input:disabled {
+.Checkbox--disabled > .Checkbox__input,
+.Checkbox > .Checkbox__input:disabled {
     @include form-fields-tools.input-disabled();
 }
 
-.CheckboxField--disabled > .CheckboxField__input:checked,
-.CheckboxField--disabled > .CheckboxField__input:indeterminate,
-.CheckboxField > .CheckboxField__input:disabled:checked,
-.CheckboxField > .CheckboxField__input:disabled:indeterminate {
+.Checkbox--disabled > .Checkbox__input:checked,
+.Checkbox--disabled > .Checkbox__input:indeterminate,
+.Checkbox > .Checkbox__input:disabled:checked,
+.Checkbox > .Checkbox__input:disabled:indeterminate {
     background-color: form-fields-theme.$input-color-disabled;
 }
 
-.CheckboxField--item {
+.Checkbox--item {
     @include form-fields-tools.item();
 }
 
-.CheckboxField--item.CheckboxField--disabled {
+.Checkbox--item.Checkbox--disabled {
     @include form-fields-tools.item-disabled();
 }
 
 // stylelint-disable-next-line selector-max-class, selector-max-compound-selectors, selector-max-specificity -- We need to override the default styles for the label in Item.
-.CheckboxField--item .CheckboxField__input:checked ~ .CheckboxField__text > .CheckboxField__label {
+.Checkbox--item .Checkbox__input:checked ~ .Checkbox__text > .Checkbox__label {
     @include form-fields-tools.item-label-checked();
 }
 
-.CheckboxField--item .CheckboxField__validationText {
+.Checkbox--item .Checkbox__validationText {
     @include form-fields-tools.item-validation-text();
 }
 
-.CheckboxField--item .CheckboxField__helperText {
+.Checkbox--item .Checkbox__helperText {
     @include form-fields-tools.item-helper-text();
 }
 
-.CheckboxField--item:not(.CheckboxField--disabled):hover .CheckboxField__validationText,
-.CheckboxField--item:not(.CheckboxField--disabled):active .CheckboxField__validationText,
-.CheckboxField--item:not(.CheckboxField--disabled):hover .CheckboxField__helperText,
-.CheckboxField--item:not(.CheckboxField--disabled):active .CheckboxField__helperText {
+.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__validationText,
+.Checkbox--item:not(.Checkbox--disabled):active .Checkbox__validationText,
+.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__helperText,
+.Checkbox--item:not(.Checkbox--disabled):active .Checkbox__helperText {
     color: inherit;
 }