Merge pull request #181 from otto-de/B2BDS-211

fix: [B2BDS-211] Apply disabled style for a button with href
otto-de · Aug 24, 2023 · 3564d2d · 3564d2d
2 parents 56bf837 + 899de46
commit 3564d2d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/...ents/__snapshots__/components-interaction-button--story-090-disabled-anchor.png b/...ents/__snapshots__/components-interaction-button--story-090-disabled-anchor.png
diff --git 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
@@ -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
@@ -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>