From 19eb8759f73e93676070019dfe78adc265aeb890 Mon Sep 17 00:00:00 2001
From: Shanna Murry <shanna.murry84@gmail.com>
Date: Wed, 2 Nov 2022 09:58:21 -0400
Subject: [PATCH] remove strikethru line and add image opacity to disabled
 megabutton state (#350)

---
 CHANGELOG.md                                       |  7 +++++++
 package-lock.json                                  |  4 ++--
 package.json                                       |  2 +-
 src/components/MegaButton/MegaButton.vue           | 11 ++---------
 .../MegaButton/__tests__/MegaButton.spec.js        | 14 --------------
 5 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1897c0734..33dfc00d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 1.0.0-beta.65
+
+### Features
+
+Remove strikethru line from disabled `MegaButton`
+Add image opacity to disabled `MegaButton`
+
 ## 1.0.0-beta.64
 
 ### Features
diff --git a/package-lock.json b/package-lock.json
index 9464f7439..84b6cdaa9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "1.0.0-beta.64",
+  "version": "1.0.0-beta.65",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "1.0.0-beta.64",
+      "version": "1.0.0-beta.65",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index 9c66b95be..fd153bc82 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "1.0.0-beta.64",
+  "version": "1.0.0-beta.65",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"
diff --git a/src/components/MegaButton/MegaButton.vue b/src/components/MegaButton/MegaButton.vue
index 893ef023b..207c66176 100644
--- a/src/components/MegaButton/MegaButton.vue
+++ b/src/components/MegaButton/MegaButton.vue
@@ -32,11 +32,6 @@
       <div
         class="w-full"
       >
-        <div
-          v-if="disabled && !disabledBanner"
-          data-testId="strikethru"
-          class="strikethru-line absolute top-0 h-full w-full"
-        />
         <div
           v-if="imageSource"
           data-testId="imageContainer"
@@ -55,7 +50,8 @@
           <img
             :class="[
               'max-h-20 mx-auto',
-              {'!max-h-full' : topFullImage}
+              {'!max-h-full' : topFullImage},
+              {'opacity-60' : disabled}
             ]"
             :src="imageSource"
             :alt="imageAltText"
@@ -192,9 +188,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.strikethru-line {
-  background: linear-gradient(to top right, rgba(255, 255, 255, 0) calc(50% - 1px), #c4c4c4, rgba(255, 255, 255, 0) calc(50% + 1px));
-}
 
 label {
   box-shadow: 0 4.32px 12.95px rgba(0, 0, 0, 0.08);
diff --git a/src/components/MegaButton/__tests__/MegaButton.spec.js b/src/components/MegaButton/__tests__/MegaButton.spec.js
index 0558ea516..e13ae866b 100644
--- a/src/components/MegaButton/__tests__/MegaButton.spec.js
+++ b/src/components/MegaButton/__tests__/MegaButton.spec.js
@@ -76,20 +76,6 @@ describe('Megabutton', () => {
           expect(label).toHaveClass('peer-disabled:cursor-not-allowed');
         });
 
-        it('displays the strikethru line', () => {
-          const props = {
-            ...megatextProps,
-            disabled: true
-          };
-
-          const { getByTestId } = render(MegaButton, {
-            props
-          });
-
-          const strikethruBox = getByTestId('strikethru');
-          expect(strikethruBox).toHaveClass('strikethru-line');
-        });
-
         it('does not display a banner box', () => {
           const props = {
             ...megatextProps,