Update megabuttons for full width top images (#336)

* add styling to support full top half images to megabuttons

* update version and changelog

* fix changelog

* linting

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 1.0.0-beta.58
+
+### Features
+
+Adds a `topFullImage` prop to `MegaButton`
+
+### Breaking changes
+
+Removes `twoToned` and `lowerImage` props
+
 ## 1.0.0-beta.57
 
 ### Bug fixes

package.json

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

src/components/MegaButton/MegaButton.stories.js

@@ -78,8 +78,20 @@ WithImageAndSmallText.args = {
   disabled: false,
   disabledBanner: null,
   text: 'Minimum 80% fur by weight',
-  imageSource: image,
-  twoTone: true
+  imageSource: image
+};
+
+export const WithTopFullImage = Template.bind({});
+WithTopFullImage.args = {
+  name: 'cat-type',
+  id: 'floofyboi',
+  value: 'floofyboi',
+  label: 'Floofyboi',
+  disabled: false,
+  disabledBanner: null,
+  text: 'Minimum 80% fur by weight',
+  imageSource: 'https://s3.us-west-2.amazonaws.com/public.lob.com/dashboard/campaigns/card-with-enterprise-badge.png',
+  topFullImage: true
 };
 
 const megaButtonModel = '';
@@ -163,7 +175,6 @@ const GroupWithImageTemplate = (args, { argTypes }) => ({
         v-model="megaButtonModel"
         imageSource=${image}
         text="Minimum 80% fur by weight. Very very very very big boy."
-
       />
     </RadioGroup>
   </div>

src/components/MegaButton/MegaButton.vue

@@ -25,7 +25,7 @@
         { 'max-w-[240px]': smallText },
         { 'min-w-[160px] max-w-[240px]': imageSource && !smallText },
         { 'items-center': !hasDisabledBanner && !smallText },
-        { 'border-0' : twoTone }
+        {'!border-0' : topFullImage}
       ]"
     >
       <div
@@ -41,8 +41,7 @@
           data-testId="imageContainer"
           :class="[
             'mx-4 my-6',
-            {'!m-0 px-4 py-6 bg-white-100 rounded-t-lg h-32' : twoTone},
-            {'!pb-0' : twoTone && lowerImage}
+            {'!m-0' : topFullImage}
           ]"
         >
           <div
@@ -55,7 +54,7 @@
           <img
             :class="[
               'max-h-20 mx-auto',
-              {'!max-h-full' : lowerImage}
+              {'!max-h-full' : topFullImage}
             ]"
             :src="imageSource"
             :alt="imageAltText"
@@ -149,11 +148,7 @@ export default {
       type: String,
       default: ''
     },
-    twoTone: {
-      type: Boolean,
-      default: false
-    },
-    lowerImage: {
+    topFullImage: {
       type: Boolean,
       default: false
     }