From 2bd2abaa58bba73ccd6832e98d45ca72cad76ce2 Mon Sep 17 00:00:00 2001
From: swethab <swethab@thoughtworks.com>
Date: Thu, 24 Aug 2023 10:16:23 +0530
Subject: [PATCH] fix: [B2BDS-211] Apply disabled style for a button with href

---
 ...raction-button--story-090-disabled-anchor.png | Bin 0 -> 7775 bytes
 .../src/components/button/button.scss            |   2 +-
 .../src/components/button/button.stories.tsx     |   9 +++++++++
 .../core-components/src/html/interaction.html    |   7 +++++++
 4 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 packages/core-components/__snapshots__/components-interaction-button--story-090-disabled-anchor.png

diff --git a/packages/core-components/__snapshots__/components-interaction-button--story-090-disabled-anchor.png b/packages/core-components/__snapshots__/components-interaction-button--story-090-disabled-anchor.png
new file mode 100644
index 0000000000000000000000000000000000000000..a233261eaf803bb1a19df0200c5f5ec0d559a01b
GIT binary patch
literal 7775
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

literal 0
HcmV?d00001

diff --git a/packages/core-components/src/components/button/button.scss b/packages/core-components/src/components/button/button.scss
index ed6df4a7..4b64452a 100644
--- a/packages/core-components/src/components/button/button.scss
+++ b/packages/core-components/src/components/button/button.scss
@@ -76,7 +76,7 @@
       }
     }
 
-    &:disabled {
+    &:disabled, &.disabled {
       cursor: default;
       pointer-events: none;
       background-color: var(--b2b-color-grey-50);
diff --git a/packages/core-components/src/components/button/button.stories.tsx b/packages/core-components/src/components/button/button.stories.tsx
index e75e5666..66a0bd6b 100644
--- a/packages/core-components/src/components/button/button.stories.tsx
+++ b/packages/core-components/src/components/button/button.stories.tsx
@@ -127,6 +127,15 @@ story080Anchor.args = {
 };
 story080Anchor.storyName = 'Anchor Button';
 
+export const story090DisabledAnchor = Template.bind({});
+story090DisabledAnchor.args = {
+  ...defaultArgs,
+  href: 'https://www.otto.de',
+  disabled: true,
+  content: 'Disabled Anchor Button',
+};
+story090DisabledAnchor.storyName = 'Disabled Anchor Button';
+
 const controls = {
   variant: 'radio',
 };
diff --git a/packages/core-components/src/html/interaction.html b/packages/core-components/src/html/interaction.html
index 4108fdfa..95ccbdf7 100644
--- a/packages/core-components/src/html/interaction.html
+++ b/packages/core-components/src/html/interaction.html
@@ -284,6 +284,13 @@
         <b2b-button variant="primary" disabled="true" size="100"
           >Disabled primary</b2b-button
         >
+        <b2b-button
+          variant="primary"
+          disabled="true"
+          size="100"
+          href="https://www.otto.de"
+          >Disabled primary with href</b2b-button
+        >
       </div>
 
       <b2b-headline size="100" no-margin="true">Active</b2b-headline>