GC-3207 helper slot for radio button (#534)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.89
+
+- Slot `helper` added `RadioButton` as alternative to `helperText`
+
 ## v2.0.88
 
 - Fixes typing of `-attribute` props to allow `data-` attributes on `RadioButton` and `RadioButtonGroup`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.88",
+  "version": "2.0.89",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/RadioButton/RadioButton.stories.js

@@ -50,6 +50,15 @@ const Template = (args, { argTypes }) => ({
     '<RadioButton v-bind="args" v-model="vModel"><template #content>Some random text content for card</template></RadioButton>'
 });
 
+const HelperSlotTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { RadioButton },
+  data: () => ({ vModel }),
+  setup: () => ({ args }),
+  template:
+    '<RadioButton v-bind="args" v-model="vModel"><template #helper>You can put <lob-link class="text-blue-600 hover:text-blue-500" to="/internal"> hyperlinks </lob-link> in here!</template></RadioButton>'
+});
+
 export const Primary = Template.bind({});
 Primary.args = {
   name: 'postcard-size',
@@ -68,6 +77,14 @@ WithHelperText.args = {
   helperText: 'Standard Postcard Size and a second line of text'
 };
 
+export const WithHelperSlot = HelperSlotTemplate.bind({});
+WithHelperSlot.args = {
+  name: 'postcard-size',
+  id: '4x6',
+  label: '4x6',
+  value: '4x6'
+};
+
 export const WithIcon = Template.bind({});
 WithIcon.args = {
   name: 'postcard-size',

src/components/RadioButton/RadioButton.vue

@@ -28,15 +28,21 @@
           <slot name="chips" />
         </div>
       </span>
-      <span v-if="helperText" class="uic-radio-button-helper">{{
-        helperText
-      }}</span>
+      <span class="uic-radio-button-helper">
+        <slot v-if="hasHelperTextSlotContent" name="helper" />
+        <span v-else>{{ helperText }}</span>
+      </span>
     </div>
   </label>
 </template>
 
 <script setup lang="ts" generic="Value">
-import { HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'vue';
+import {
+  HTMLAttributes,
+  InputHTMLAttributes,
+  LabelHTMLAttributes,
+  computed
+} from 'vue';
 
 import { RadioButtonVariant } from './constants';
 import { LoadingSpinnerIcon } from '../LoadingSpinnerIcon';
@@ -82,11 +88,16 @@ defineEmits<{
   (e: 'input', value: Value): void; // eslint-disable-line no-unused-vars
 }>();
 
-defineSlots<{
+const slots = defineSlots<{
   default: () => any;
   chips: () => any;
+  helper: () => any;
 }>();
 
+const hasHelperTextSlotContent = computed(() => {
+  return Boolean(slots.helper);
+});
+
 const modelValue = defineModel<Value>();
 </script>
 

src/components/RadioButton/__tests__/RadioButton.spec.ts

@@ -64,4 +64,16 @@ describe('RadioButton', () => {
     expect(emittedEvent).toHaveProperty('input');
     expect(emittedEvent.input[0]).toEqual([props.value]);
   });
+
+  it('can accept content in the `helper` slot', async () => {
+    const props = initialProps;
+    const { getByText } = render(RadioButton, {
+      props,
+      slots: {
+        helper: 'Helper text'
+      }
+    });
+    const helperContent = getByText('Helper text');
+    expect(helperContent).toBeInTheDocument();
+  });
 });