Full height for RadioButtonLarge (#348)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 1.0.0-beta.63
+
+### Features
+
+Adds `full-height` prop to `RadioButtonLarge`
+
 ## 1.0.0-beta.62
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "1.0.0-beta.62",
+  "version": "1.0.0-beta.63",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"

src/components/RadioButtonLarge/RadioButtonLarge.vue

@@ -2,13 +2,15 @@
   <div
     :class="[
       {'min-h-[60px]': revealText},
-      {'!cursor-not-allowed': disabled}
+      {'!cursor-not-allowed': disabled},
+      {'h-full': fullHeight}
     ]"
   >
     <div
       :class="[
         'min-h-[3rem] cursor-pointer bg-white top-1 inline-block mr-4 border border-gray-100 rounded-lg pl-2',
         fullWidth ? 'w-full' : 'w-[200px]',
+        {'h-full': fullHeight},
         {'hover:border-gray-300': !disabled},
         {'!border-primary-500 ring-inset ring-1 ring-primary-500': checked && !disabled && !error},
         {'bg-white-100 !cursor-not-allowed': disabled},
@@ -106,6 +108,10 @@ export default {
     fullWidth: {
       type: Boolean,
       default: false
+    },
+    fullHeight: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'click'],

src/components/RadioGroup/RadioGroup.stories.js

@@ -172,3 +172,47 @@ LargeGroup.args = {
   legend: 'Postcard Size',
   separateLines: false
 };
+
+const largeGroupWithFullHeightModel = '';
+
+const LargeGroupWithFullHeightTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { RadioGroup, RadioButtonLarge },
+  data: () => ({ largeGroupWithFullHeightModel }),
+  setup: () => ({ args }),
+  template: `
+    <radio-group large v-bind="args">
+      <div style="width: 50%; margin-right: 10px">
+        <radio-button-large
+          id="4x6"
+          name="postcard-size"
+          label="4x6"
+          value="4x6"
+          v-model="largeGroupWithFullHeightModel"
+          helper-text="This is a short description"
+          full-width
+          full-height
+        />
+      </div>
+      <div style="width: 50%">
+        <radio-button-large
+          id="5x7"
+          name="postcard-size"
+          label="5x7"
+          value="5x7"
+          v-model="largeGroupWithFullHeightModel"
+          helper-text="This is a very long description so we can see what happens when the text takes up two (or more) lines. All of the text should show inside the radio button, and not overflow outside of it."
+          full-width
+          full-height
+        />
+      </div>
+    </radio-group>
+  `
+});
+
+export const LargeGroupWithFullHeight = LargeGroupWithFullHeightTemplate.bind({});
+LargeGroupWithFullHeight.args = {
+  legend: 'Postcard Size',
+  separateLines: false
+};
+