feat: refactor radio buttons

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## v2.0.87
+
+- Bug fixes and improvements of the `RadioButton` component
+- Added `RadioButtonGroup` component to replace `RadioGroup`
+- Deprecates `RadioGroup`
+
+### Breaking Changes
+
+- Removes `RadioButtonLarge` component
+
 ## v2.0.86
 
 - Adds `class` property to `MenuItem` type

package.json

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

src/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export { default as Chip } from './Chip.vue';

src/components/RadioButton/RadioButton.stories.js

@@ -1,5 +1,9 @@
+import Chip from '../Chip/Chip.vue';
 import RadioButton from './RadioButton.vue';
+import RadioButtonGroup from './RadioButtonGroup.vue';
 import mdx from './RadioButton.mdx';
+import { RadioButtonVariant } from './constants';
+import { IconName } from '../Icon';
 
 export default {
   title: 'Components/Radio Button',
@@ -8,6 +12,30 @@ export default {
     docs: {
       page: mdx
     }
+  },
+  argTypes: {
+    icon: {
+      options: Object.values(IconName),
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: Object.values(IconName).join(' | ')
+        }
+      }
+    },
+    variant: {
+      options: Object.values(RadioButtonVariant),
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: Object.values(RadioButtonVariant).join(' | ')
+        }
+      }
+    }
   }
 };
 
@@ -18,31 +46,117 @@ const Template = (args, { argTypes }) => ({
   components: { RadioButton },
   data: () => ({ vModel }),
   setup: () => ({ args }),
-  template: '<radio-button v-bind="args" v-model="vModel"/>'
+  template:
+    '<RadioButton v-bind="args" v-model="vModel"><template #content>Some random text content for card</template></RadioButton>'
 });
 
 export const Primary = Template.bind({});
 Primary.args = {
   name: 'postcard-size',
+  src: 'https://via.placeholder.com/150',
   id: '4x6',
   label: '4x6',
   value: '4x6'
 };
 
-const WithHelperTextTemplate = (args, { argTypes }) => ({
+export const WithHelperText = Template.bind({});
+WithHelperText.args = {
+  name: 'postcard-size',
+  id: '4x6',
+  label: '4x6',
+  value: '4x6',
+  helperText: 'Standard Postcard Size and a second line of text'
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  name: 'postcard-size',
+  icon: 'Envelope',
+  id: '4x6',
+  label: '4x6',
+  value: '4x6',
+  variant: 'outlined'
+};
+
+const ChipTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { RadioButton },
+  components: { Chip, RadioButton },
   data: () => ({ vModel }),
   setup: () => ({ args }),
   template:
-    '<div style="width:200px"><radio-button v-bind="args" v-model="vModel" /></div>'
+    '<RadioButton v-bind="args" v-model="vModel"><template #content>Some random text content for card</template><template #chips><Chip icon="Envelope" color="upgrade" /></template></RadioButton>'
 });
 
-export const WithHelperText = WithHelperTextTemplate.bind({});
-WithHelperText.args = {
+export const WithChip = ChipTemplate.bind({});
+WithChip.args = {
   name: 'postcard-size',
   id: '4x6',
   label: '4x6',
   value: '4x6',
-  helperText: 'Standard Postcard Size and a second line of text'
+  variant: 'outlined'
+};
+
+const GroupTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { RadioButton, RadioButtonGroup },
+  data: () => ({ vModel }),
+  setup: () => ({ args }),
+  template: `<RadioButtonGroup v-bind="args.group">
+      <RadioButton v-bind="args.input1" v-model="vModel"/>
+      <RadioButton v-bind="args.input2" v-model="vModel" />
+      <RadioButton v-bind="args.input3" v-model="vModel" />
+    </RadioButtonGroup>`
+});
+export const Group = GroupTemplate.bind({});
+Group.args = {
+  group: {
+    label: 'Postcard Size',
+    description: 'Select a size for your postcard in the radio buttons below'
+  },
+  input1: {
+    name: 'postcard-size',
+    id: '4x6',
+    label: '4x6',
+    value: '4x6'
+  },
+  input2: {
+    name: 'postcard-size-2',
+    id: '5x7',
+    label: '5x7',
+    value: '5x7'
+  },
+  input3: {
+    name: 'postcard-size-3',
+    id: '6x9',
+    label: '6x9',
+    value: '6x9'
+  }
+};
+export const OutlinedGroup = GroupTemplate.bind({});
+OutlinedGroup.args = {
+  group: {
+    label: 'Postcard Size',
+    description: 'Select a size for your postcard in the radio buttons below'
+  },
+  input1: {
+    name: 'postcard-size',
+    id: '4x6',
+    label: '4x6',
+    value: '4x6',
+    variant: 'outlined'
+  },
+  input2: {
+    name: 'postcard-size-2',
+    id: '5x7',
+    label: '5x7',
+    value: '5x7',
+    variant: 'outlined'
+  },
+  input3: {
+    name: 'postcard-size-3',
+    id: '6x9',
+    label: '6x9',
+    value: '6x9',
+    variant: 'outlined'
+  }
 };