From 3129fb719cfbfd853dc759c14938628ee266500b Mon Sep 17 00:00:00 2001
From: Shanna Murry <shanna.murry84@gmail.com>
Date: Fri, 9 Sep 2022 15:52:09 -0400
Subject: [PATCH] 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                                    | 10 ++++++++++
 package-lock.json                               |  4 ++--
 package.json                                    |  2 +-
 src/components/MegaButton/MegaButton.stories.js | 17 ++++++++++++++---
 src/components/MegaButton/MegaButton.vue        | 13 ++++---------
 5 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2f01b6b11..b9c34a56b 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 606467adc..df2d825b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "1.0.0-beta.57",
+  "version": "1.0.0-beta.58",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "1.0.0-beta.57",
+      "version": "1.0.0-beta.58",
       "dependencies": {
         "date-fns": "^2.23.0",
         "mitt": "^3.0.0",
diff --git a/package.json b/package.json
index e533b90aa..dc5d1e1f4 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/MegaButton/MegaButton.stories.js b/src/components/MegaButton/MegaButton.stories.js
index b6311623d..f93e0de6f 100644
--- a/src/components/MegaButton/MegaButton.stories.js
+++ b/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>
diff --git a/src/components/MegaButton/MegaButton.vue b/src/components/MegaButton/MegaButton.vue
index fb7109e56..a167d5aac 100644
--- a/src/components/MegaButton/MegaButton.vue
+++ b/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
     }