Skip to content

Commit

Permalink
add link button
Browse files Browse the repository at this point in the history
  • Loading branch information
mucsi96 committed Oct 12, 2024
1 parent 26c5021 commit d07bdc3
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 6 deletions.
8 changes: 7 additions & 1 deletion src/Button/Button.css
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions src/Button/Button.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>`,
};
Expand Down
4 changes: 3 additions & 1 deletion src/Docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
6 changes: 3 additions & 3 deletions src/Header/Header.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/Header/Header.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit d07bdc3

Please sign in to comment.