remove strikethru line and add image opacity to disabled megabutton s…

…tate (#350)
lob · Nov 2, 2022 · 19eb875 · 19eb875
1 parent c0b877f
commit 19eb875
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 26 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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,