fix: add classes to radiobuttons component (#27)

components/forms/w-toggle.vue

@@ -1,7 +1,7 @@
 <template>
   <w-field as="fieldset" v-bind="{ ...$attrs, ...$props }" :role="role" #default="{ triggerValidation }">
     <div :class="wrapperClasses">
-      <div class="group" v-for="(toggle, i) in toggles">
+      <div :class="groupClasses" v-for="(toggle, i) in toggles">
         <w-toggle-item
           v-model="model"
           :type="type"
@@ -46,8 +46,13 @@ const type = computed(() => (props.radio || props.radioButton) ? 'radio' : 'chec
 const role = computed(() => props.toggles.length > 1 ? ((props.radio || props.radioButton) ? 'radiogroup' : 'group') : undefined);
 const wrapperClasses = computed(() => ({
   [ccToggle.wrapper]: true,
-  [`${ccToggle.segmentControl} ${ccToggle.focusableWithin}`]: props.radioButton,
-  [ccToggle.scJustified]: props.equalWidth,
+  [`${ccToggle.radioButtons} ${ccToggle.focusableWithin}`]: props.radioButton,
+  [ccToggle.radioButtonsJustified]: props.equalWidth,
+}));
+
+const groupClasses = computed(() => ({
+  [ccToggle.radioButtonsGroup]: true,
+  [ccToggle.radioButtonsGroupJustified]: props.equalWidth,
 }));
 
 </script>

components/generic/w-toggle-item.vue

@@ -47,9 +47,8 @@ const labelClasses = computed(() => (p.labelClass || {
   [ccToggle.radioInvalid]: isRadio.value && p.invalid,
   [ccToggle.checkboxInvalid]: isCheckbox.value && p.invalid,
   [`${ccToggle.checkbox} ${ccToggle.labelCheckboxColors} ${ccToggle.icon} ${p.disabled ? '' : ccToggle.checkboxChecked}`]: isCheckbox.value,
-  [ccToggle.scLabel]: p.radioButton,
-  [ccToggle.scLabelJustified]: p.equalWidth,
-  [ccToggle.scLabelSmall]: p.small,
+  [ccToggle.radioButtonsLabel]: p.radioButton,
+  [ccToggle.radioButtonsLabelSmall]: p.small,
 }));
 const inputClasses = {
   [p.class ? `${p.class} ${ccToggle.input}` : ccToggle.input]: true,

package.json

@@ -48,7 +48,7 @@
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
     "@warp-ds/core": "^1.0.0",
-    "@warp-ds/component-classes": "^1.0.0-alpha.56",
+    "@warp-ds/component-classes": "^1.0.0-alpha.60",
     "@warp-ds/uno": "1.0.0-alpha.19",
     "cleave-lite": "^1.0.0",
     "cz-conventional-changelog": "^3.3.0",