docs(link): added disabled fake-link (#2508)

eBay · Dec 16, 2024 · 364355c · 364355c
1 parent d7d80cc
commit 364355c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/.changeset/tame-monkeys-sparkle.md b/.changeset/tame-monkeys-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+docs(link): added disabled fake-link
diff --git a/src/modules/link.marko b/src/modules/link.marko
@@ -146,6 +146,28 @@
         >
 <button class="fake-link" type="button">Button</button>
     </highlight-code>
+
+
+    <h3 id="link-fake">
+        Disabled Fake Link
+    </h3>
+    <p>
+        To disable a button styled to look like a link, use the disabled attribute.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="fake-link" disabled type="button">
+                Button
+            </button>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<button class="fake-link" type="button" disabled>Button</button>
+    </highlight-code>
     <!--
     <p>To style a button to look like an <em>action</em> link, use the <span class="highlight">fake-link--action</span> modifier.</p>
 

diff --git a/src/sass/link/stories/link.stories.js b/src/sass/link/stories/link.stories.js
@@ -21,6 +21,9 @@ export const RTL = () => `
 export const fake = () =>
     `<button class="fake-link" type="button">Button</button>`;
 
+export const disabledFake = () =>
+    `<button class="fake-link" disbaled type="button">Button</button>`;
+
 export const nav = () =>
     `<a class="nav-link" href="https://www.ebay.com/?r=${Math.floor(
         Math.random() * Math.floor(1000),