BREAKING CHANGE(web-twig): Rename RadioField component to Radio #…

…DS-521 ## Migration Guide Rename and use `Radio` component instead of `RadioField`. - `<RadioField …>` → `<Radio …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · cba5ec6 · cba5ec6
1 parent c24d9f6
commit cba5ec6
Show file tree

Hide file tree

Showing 29 changed files with 125 additions and 126 deletions.
diff --git a/packages/web-twig/src/Resources/components/Item/README.md b/packages/web-twig/src/Resources/components/Item/README.md
@@ -1,6 +1,6 @@
 # Item
 
-To implement Item component with content of `RadioField` or `Checkbox`,
+To implement Item component with content of `Radio` or `Checkbox`,
 you need to use directly these components with prop `isItem`.
 
 See `web` package [Item documentation][item-documentation] for more info.

diff --git a/packages/web-twig/src/Resources/components/Item/stories/ItemDefault.twig b/packages/web-twig/src/Resources/components/Item/stories/ItemDefault.twig
@@ -8,12 +8,12 @@
         isItem
     />
 
-    <h2 class="docs-Heading">RadioField Item</h2>
+    <h2 class="docs-Heading">Radio Item</h2>
 
-    <RadioField
-        id="radiofieldItem"
+    <Radio
+        id="radioItem"
         label="Radio Item"
-        name="radiofieldItem"
+        name="radioItem"
         isItem
     />
 </div>
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalBasic.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalBasic.twig
@@ -35,9 +35,9 @@
                 </script>
                 <form onchange="setFooterAlignment(event)" class="d-none d-tablet-block">
                     <div>Footer alignment (from tablet up):</div>
-                    <RadioField id="footer_alignment_left" UNSAFE_className="mr-600" label="Left" value="left" name="footer_alignment" autocomplete="off" />
-                    <RadioField id="footer_alignment_center" UNSAFE_className="mr-600" label="Center" value="center" name="footer_alignment" autocomplete="off" />
-                    <RadioField id="footer_alignment_right" UNSAFE_className="mr-600" label="Right" value="right" name="footer_alignment" autocomplete="off" isChecked />
+                    <Radio id="footer_alignment_left" UNSAFE_className="mr-600" label="Left" value="left" name="footer_alignment" autocomplete="off" />
+                    <Radio id="footer_alignment_center" UNSAFE_className="mr-600" label="Center" value="center" name="footer_alignment" autocomplete="off" />
+                    <Radio id="footer_alignment_right" UNSAFE_className="mr-600" label="Right" value="right" name="footer_alignment" autocomplete="off" isChecked />
                 </form>
                 <form class="d-tablet-none">
                     <Checkbox id="expand_on_mobile" label="Expand on mobile" value="right" onchange="toggleExpandOnMobile()" autocomplete="off" isChecked />

diff --git a/...Resources/components/RadioField/README.md → .../src/Resources/components/Radio/README.md b/...Resources/components/RadioField/README.md → .../src/Resources/components/Radio/README.md
@@ -1,21 +1,21 @@
-# RadioField
+# Radio
 
-This is Twig implementation of the [RadioField] component.
+This is Twig implementation of the [Radio] component.
 
 Basic example usage:
 
 ```html
-<RadioField id="radiofieldDefault" label="Label" name="radiofieldDefault" isChecked />
+<Radio id="radioDefault" label="Label" name="radioDefault" isChecked />
 ```
 
 Advanced example usage:
 
 ```html
-<RadioField
-  id="radiofieldAdvanced"
+<Radio
+  id="radioAdvanced"
   label="some label"
   isChecked
-  name="radiofieldAdvanced"
+  name="radioAdvanced"
   validationState="danger"
   helperText="Helper text"
   autocomplete="off"
@@ -25,10 +25,10 @@ Advanced example usage:
 Without lexer:
 
 ```twig
-{% embed "@spirit/radioField.twig" with { props: {
-    id: "radiofieldEmbed",
+{% embed "@spirit/radio.twig" with { props: {
+    id: "radioEmbed",
     label: "some label",
-    name: "radiofieldEmbed",
+    name: "radioEmbed",
     isChecked: "true",
     validationState: "danger",
     helperText: "Helper text",
@@ -59,7 +59,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.
 
-[radiofield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/RadioField
+[radio]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Radio
 [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
 [autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

diff --git a/...onents/RadioField/RadioField.stories.twig → ...urces/components/Radio/Radio.stories.twig b/...onents/RadioField/RadioField.stories.twig → ...urces/components/Radio/Radio.stories.twig
@@ -6,47 +6,47 @@
         <h2 class="docs-Heading">Default</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/RadioField/stories/RadioFieldDefault.twig' %}
+            {% include '@components/Radio/stories/RadioDefault.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Hidden Label</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/RadioField/stories/RadioFieldHiddenLabel.twig' %}
+            {% include '@components/Radio/stories/RadioHiddenLabel.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Helper Text</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/RadioField/stories/RadioFieldHelperText.twig' %}
+            {% include '@components/Radio/stories/RadioHelperText.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Disabled</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/RadioField/stories/RadioFieldDisabled.twig' %}
+            {% include '@components/Radio/stories/RadioDisabled.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Validation State</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/RadioField/stories/RadioFieldValidation.twig' %}
+            {% include '@components/Radio/stories/RadioValidation.twig' %}
         </div>
     </section>
 
     <section class="docs-Section">
         <h2 class="docs-Heading">Item</h2>
 
         <div class="docs-FormFieldGrid">
-            {% include '@components/RadioField/stories/RadioFieldItem.twig' %}
+            {% include '@components/Radio/stories/RadioItem.twig' %}
         </div>
     </section>
 

diff --git a/...ces/components/RadioField/RadioField.twig → ...src/Resources/components/Radio/Radio.twig b/...ces/components/RadioField/RadioField.twig → ...src/Resources/components/Radio/Radio.twig
@@ -15,15 +15,15 @@
 {%- set _validationState = props.validationState | default(null) -%}
 
 {# Class names #}
-{%- set _rootClassName = _spiritClassPrefix ~ 'RadioField' -%}
-{%- set _inputClassName = _spiritClassPrefix ~ 'RadioField__input' -%}
-{%- set _labelClassName = _spiritClassPrefix ~ 'RadioField__label' -%}
-{%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'RadioField__label--hidden' : null -%}
-{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'RadioField--disabled' : null -%}
-{%- set _rootItemClassName = _isItem ? _spiritClassPrefix ~ 'RadioField--item' : null -%}
-{%- set _textClassName = _spiritClassPrefix ~ 'RadioField__text' -%}
-{%- set _helperTextClassName = _spiritClassPrefix ~ 'RadioField__helperText' -%}
-{%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'RadioField--' ~ _validationState : null -%}
+{%- set _rootClassName = _spiritClassPrefix ~ 'Radio' -%}
+{%- set _inputClassName = _spiritClassPrefix ~ 'Radio__input' -%}
+{%- set _labelClassName = _spiritClassPrefix ~ 'Radio__label' -%}
+{%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'Radio__label--hidden' : null -%}
+{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'Radio--disabled' : null -%}
+{%- set _rootItemClassName = _isItem ? _spiritClassPrefix ~ 'Radio--item' : null -%}
+{%- set _textClassName = _spiritClassPrefix ~ 'Radio__text' -%}
+{%- set _helperTextClassName = _spiritClassPrefix ~ 'Radio__helperText' -%}
+{%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'Radio--' ~ _validationState : null -%}
 
 {# Attributes #}
 {%- set _checkedAttr = _isChecked ? 'checked' : null -%}

diff --git a/packages/web-twig/src/Resources/components/Radio/stories/RadioDefault.twig b/packages/web-twig/src/Resources/components/Radio/stories/RadioDefault.twig
@@ -0,0 +1,11 @@
+<Radio
+    id="radioDefault"
+    label="Radio Label"
+    name="radioDefault"
+/>
+<Radio
+    id="radioDefaultChecked"
+    isChecked
+    label="Radio Label"
+    name="radioDefault"
+/>
diff --git a/packages/web-twig/src/Resources/components/Radio/stories/RadioDisabled.twig b/packages/web-twig/src/Resources/components/Radio/stories/RadioDisabled.twig
@@ -0,0 +1,15 @@
+<Radio
+    id="radioDisabled"
+    isDisabled
+    label="Radio Label"
+    name="radioDisabled"
+/>
+
+<Radio
+    helperText="Helper text"
+    id="radioDisabledHelperText"
+    isChecked
+    isDisabled
+    label="Radio Label"
+    name="radioDisabledHelperText"
+/>
diff --git a/packages/web-twig/src/Resources/components/Radio/stories/RadioHelperText.twig b/packages/web-twig/src/Resources/components/Radio/stories/RadioHelperText.twig
@@ -0,0 +1,6 @@
+<Radio
+    helperText="Helper text"
+    id="radioHelperText"
+    label="Radio Label"
+    name="radioHelperText"
+/>
diff --git a/packages/web-twig/src/Resources/components/Radio/stories/RadioHiddenLabel.twig b/packages/web-twig/src/Resources/components/Radio/stories/RadioHiddenLabel.twig
@@ -0,0 +1,6 @@
+<Radio
+    id="radioHiddenLabel"
+    label="Radio Label"
+    name="radioHiddenLabel"
+    isLabelHidden
+/>
diff --git a/...ts/RadioField/stories/RadioFieldItem.twig → ...s/components/Radio/stories/RadioItem.twig b/...ts/RadioField/stories/RadioFieldItem.twig → ...s/components/Radio/stories/RadioItem.twig
@@ -1,37 +1,37 @@
-<RadioField
-    id="radiofieldItemDefault"
+<Radio
+    id="radioItemDefault"
     isItem
     label="Radio Label"
     name="item"
 />
 
-<RadioField
-    id="radiofieldItemDefaultChecked"
+<Radio
+    id="radioItemDefaultChecked"
     isChecked
     isItem
     label="Radio Label"
     name="item"
 />
 
-<RadioField
+<Radio
     helperText="Helper text"
-    id="radiofieldItemHelperText"
+    id="radioItemHelperText"
     isItem
     label="Radio Label"
     name="item"
 />
 
-<RadioField
-    id="radiofieldItemDisabled"
+<Radio
+    id="radioItemDisabled"
     isDisabled
     isItem
     label="Radio Label"
     name="itemDisabled"
 />
 
-<RadioField
+<Radio
     helperText="Helper text"
-    id="radiofieldItemDisabledHelperText"
+    id="radioItemDisabledHelperText"
     isDisabled
     isChecked
     isItem

diff --git a/...ioField/stories/RadioFieldValidation.twig → ...onents/Radio/stories/RadioValidation.twig b/...ioField/stories/RadioFieldValidation.twig → ...onents/Radio/stories/RadioValidation.twig
@@ -1,28 +1,28 @@
-<RadioField
-    id="radiofieldSuccess"
+<Radio
+    id="radioSuccess"
     label="Radio Label"
     name="validation"
     validationState="success"
 />
 
-<RadioField
-    id="radiofieldWarning"
+<Radio
+    id="radioWarning"
     label="Radio Label"
     name="validation"
     validationState="warning"
 />
 
-<RadioField
-    id="radiofieldDanger"
+<Radio
+    id="radioDanger"
     isChecked
     label="Radio Label"
     name="validation"
     validationState="danger"
 />
 
-<RadioField
+<Radio
     helperText="Helper text"
-    id="radiofieldWarningHelperText"
+    id="radioWarningHelperText"
     isChecked
     label="Radio Label"
     name="validation"

diff --git a/packages/web-twig/src/Resources/components/RadioField/stories/RadioFieldDefault.twig b/packages/web-twig/src/Resources/components/RadioField/stories/RadioFieldDefault.twig
diff --git a/packages/web-twig/src/Resources/components/RadioField/stories/RadioFieldDisabled.twig b/packages/web-twig/src/Resources/components/RadioField/stories/RadioFieldDisabled.twig
diff --git a/packages/web-twig/src/Resources/components/RadioField/stories/RadioFieldHelperText.twig b/packages/web-twig/src/Resources/components/RadioField/stories/RadioFieldHelperText.twig
diff --git a/packages/web-twig/src/Resources/components/RadioField/stories/RadioFieldHiddenLabel.twig b/packages/web-twig/src/Resources/components/RadioField/stories/RadioFieldHiddenLabel.twig
diff --git a/packages/web-twig/src/Resources/twig-components/radio.twig b/packages/web-twig/src/Resources/twig-components/radio.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Radio/Radio.twig' %}
diff --git a/packages/web-twig/src/Resources/twig-components/radioField.twig b/packages/web-twig/src/Resources/twig-components/radioField.twig
diff --git a/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set radioDefault.twig__1.html b/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set radioDefault.twig__1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <label for="example" class="Radio"><input data-validate="true" type="radio" name="example" class="Radio__input" id="example" checked> </label>
+  </body>
+</html>
diff --git a/...ts/__snapshots__/ComponentsSnapshotTest__test with data set radioDefaultPure.twig__1.html b/...ts/__snapshots__/ComponentsSnapshotTest__test with data set radioDefaultPure.twig__1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <label for="example" class="Radio"><input type="radio" name="example" class="Radio__input" id="example" checked> <span class="Radio__text"><span class="Radio__label">some label</span></span></label>
+  </body>
+</html>
diff --git a/...s/__snapshots__/ComponentsSnapshotTest__test with data set radioFieldDefault.twig__1.html b/...s/__snapshots__/ComponentsSnapshotTest__test with data set radioFieldDefault.twig__1.html
diff --git a/...snapshots__/ComponentsSnapshotTest__test with data set radioFieldDefaultPure.twig__1.html b/...snapshots__/ComponentsSnapshotTest__test with data set radioFieldDefaultPure.twig__1.html
diff --git a/...ests/__snapshots__/ComponentsSnapshotTest__test with data set radioFieldItem.twig__1.html b/...ests/__snapshots__/ComponentsSnapshotTest__test with data set radioFieldItem.twig__1.html