From d07bdc3450aa23173f9e7c8360a38d506828d5d9 Mon Sep 17 00:00:00 2001
From: Igor Bari <mucsi96@gmail.com>
Date: Sat, 12 Oct 2024 14:00:54 +0200
Subject: [PATCH] add link button

---
 src/Button/Button.css        | 8 +++++++-
 src/Button/Button.stories.ts | 8 ++++++++
 src/Docs.mdx                 | 4 +++-
 src/Header/Header.css        | 6 +++---
 src/Header/Header.stories.ts | 2 +-
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/Button/Button.css b/src/Button/Button.css
index 8a3a8cd..916611b 100644
--- a/src/Button/Button.css
+++ b/src/Button/Button.css
@@ -1,4 +1,4 @@
-button[bt] {
+button[bt], a[bt-button] {
   --button-color: hsl(220, 89%, 53%);
   --button-hover-color: hsl(221, 79%, 48%);
   background-color: var(--button-color);
@@ -10,6 +10,8 @@ button[bt] {
   font-family: inherit;
   transition: background-color 0.3s;
   white-space: nowrap;
+  text-decoration: inherit;
+  font-size: inherit;
 
   &:not([disabled]):hover {
     background-color: var(--button-hover-color);
@@ -39,6 +41,10 @@ button[bt] {
     --button-hover-color: hsl(37, 97%, 39%);
   }
 
+  &[bt-small] {
+    font-size: 0.8rem;
+  }
+
   &[bt-dropdown] > svg {
     width: 0.75em;
     height: 0.75em;
diff --git a/src/Button/Button.stories.ts b/src/Button/Button.stories.ts
index 621630d..017557d 100644
--- a/src/Button/Button.stories.ts
+++ b/src/Button/Button.stories.ts
@@ -12,6 +12,14 @@ export const Default: Story = {
   render: () => html`<button bt>Button text</button>`,
 };
 
+export const Small: Story = {
+  render: () => html`<button bt bt-small>Button text</button>`,
+};
+
+export const Link: Story = {
+  render: () => html`<a href="#" bt-button>Link text</a>`,
+};
+
 export const Green: Story = {
   render: () => html`<button bt bt-green>Button text</button>`,
 };
diff --git a/src/Docs.mdx b/src/Docs.mdx
index 0330356..6186c30 100644
--- a/src/Docs.mdx
+++ b/src/Docs.mdx
@@ -56,9 +56,11 @@ Selector: `span[bt-badge]`
 
 # Button
 
-Selector: `button[bt]`
+Selector: `button[bt]`, `a[bt-link]`
 
 <Canvas of={ButtonStories.Default} />
+<Canvas of={ButtonStories.Small} />
+<Canvas of={ButtonStories.Link} />
 <Canvas of={ButtonStories.Green} />
 <Canvas of={ButtonStories.Red} />
 <Canvas of={ButtonStories.Yellow} />
diff --git a/src/Header/Header.css b/src/Header/Header.css
index bf8e5c3..6e76b28 100644
--- a/src/Header/Header.css
+++ b/src/Header/Header.css
@@ -6,9 +6,9 @@ header[bt] {
   top: 0;
   z-index: 40;
   font-family: var(--bt-font-family);
-  
+
   > nav {
-    padding: 0.75rem 1rem;
+    padding: 0 1rem;
     max-width: 90rem;
     margin: 0 auto;
     display: flex;
@@ -65,7 +65,7 @@ header[bt] {
     font-weight: bold;
     text-decoration: none;
     color: var(--bt-strong-text-color);
-    margin-right: 3rem;
+    margin: 0.75rem 3rem 0.75rem 0;
   }
 }
 
diff --git a/src/Header/Header.stories.ts b/src/Header/Header.stories.ts
index 62ac39c..be716f9 100644
--- a/src/Header/Header.stories.ts
+++ b/src/Header/Header.stories.ts
@@ -12,7 +12,7 @@ const meta: Meta = {
             <li><a href="/about">About</a></li>
             <li><a href="/contact">Contact</a></li>
           </ul>
-          <button bt>Sign in</button>
+          <button bt bt-small>Sign in</button>
           <button bt-navbar-toggler popovertarget="navbar-popover"></button>
           <div popover bt id="navbar-popover">
             <ul bt-dropdown-menu>