generated from nl-design-system/example
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Link button - button that looks like a link
- Loading branch information
Showing
7 changed files
with
267 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
<!-- @license CC0-1.0 --> | ||
|
||
# Link button: button met uiterlijk van een link | ||
|
||
Een button met het uiterlijk van een link gebruik je binnen formulieren en applicaties, wanneer de gebruiker moet kunnen navigeren naar een andere pagina, en je op die plaats in de user interface normaalgesproken een button gebruikt. Bijvoorbeeld: een button om naar de vorige stap in een formulier te gaan, terwijl de ingevulde informatie van de huidige stap wel opgeslagen wordt. | ||
|
||
Gebruik deze component niet op standaard informatieve webpagina's, gebruik dan een gewone link. | ||
|
||
## States | ||
|
||
- active | ||
- hover | ||
- focus | ||
- focus visible | ||
|
||
Er is geen `visited` state, want buttons hebben geen visited state. | ||
|
||
Er is geen `disabled` state, want links hebben geen disabled state. | ||
|
||
## Design tokens | ||
|
||
Voor de layout van de component worden de design tokens van `utrecht-button` gebruikt, voor de kleur en het uiterlijk van inhoud en interactieve states worden de design tokens van `utrecht-link` gebruikt. Op dit moment heeft `utrecht-link-button` nog geen eigen design tokens. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
/** | ||
* @license EUPL-1.2 | ||
* Copyright (c) 2022 Robbert Broersma | ||
*/ | ||
|
||
@import "../../link/css"; | ||
|
||
.utrecht-link-button { | ||
@extend .utrecht-link; | ||
|
||
cursor: pointer; | ||
display: inline-flex; | ||
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family)); | ||
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family)); | ||
font-weight: var(--utrecht-button-font-weight); | ||
inline-size: var(--utrecht-button-inline-size, auto); | ||
letter-spacing: var(--utrecht-button-letter-spacing); | ||
min-block-size: var(--utrecht-button-min-block-size, auto); | ||
min-inline-size: var(--utrecht-button-min-inline-size, 0); | ||
padding-block-end: var(--utrecht-button-padding-block-end); | ||
padding-block-start: var(--utrecht-button-padding-block-start); | ||
padding-inline-end: var(--utrecht-button-padding-inline-end); | ||
padding-inline-start: var(--utrecht-button-padding-inline-start); | ||
text-transform: var(--utrecht-button-text-transform); | ||
user-select: none; | ||
} | ||
|
||
.utrecht-link-button--html-button { | ||
background-color: transparent; | ||
|
||
/* reset <button> styling */ | ||
border-width: 0; | ||
} | ||
|
||
.utrecht-link-button--hover { | ||
@extend .utrecht-link--hover; | ||
} | ||
|
||
.utrecht-link-button--active { | ||
@extend .utrecht-link--active; | ||
} | ||
|
||
.utrecht-link-button--focus { | ||
@extend .utrecht-link--focus; | ||
} | ||
|
||
.utrecht-link-button--focus-visible { | ||
@extend .utrecht-link--focus-visible; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
<!-- @license CC0-1.0 --> | ||
|
||
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; | ||
import { defaultArgs, LinkButton } from "../template"; | ||
import "../index.scss"; | ||
|
||
<Meta | ||
id="css-link-button" | ||
title="CSS Component/Button that looks like a link" | ||
argTypes={{ | ||
external: { | ||
description: "External", | ||
control: "boolean", | ||
}, | ||
active: { | ||
description: "Active", | ||
control: "boolean", | ||
}, | ||
focus: { | ||
description: "Focus", | ||
control: "boolean", | ||
}, | ||
focusVisible: { | ||
description: "Focus visible", | ||
control: "boolean", | ||
}, | ||
hover: { | ||
description: "Hover", | ||
control: "boolean", | ||
}, | ||
href: { | ||
description: "URL", | ||
control: "text", | ||
}, | ||
textContent: { | ||
description: "Button text", | ||
control: "text", | ||
}, | ||
}} | ||
parameters={{ | ||
status: { | ||
type: "WORK IN PROGRESS", | ||
}, | ||
}} | ||
/> | ||
|
||
# Link button: button that looks like a link | ||
|
||
Styling via the `.utrecht-link-button` class name: | ||
|
||
<Canvas> | ||
<Story | ||
name="Default" | ||
args={{ | ||
...defaultArgs, | ||
textContent: "Terug", | ||
}} | ||
> | ||
{LinkButton.bind({})} | ||
</Story> | ||
</Canvas> | ||
|
||
<ArgsTable story="Default" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<!-- @license CC0-1.0 --> | ||
|
||
import { Description, Meta } from "@storybook/addon-docs"; | ||
import document from "../../README.md"; | ||
|
||
<Meta id="css-link-button--readme" title="CSS Component/Button that looks like a link/README" /> | ||
|
||
<Description>{document}</Description> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
<!-- @license CC0-1.0 --> | ||
|
||
import { Canvas, Meta, Story } from "@storybook/addon-docs"; | ||
import { LinkButton } from "../template"; | ||
import "../index.scss"; | ||
|
||
<Meta | ||
id="css-link-button" | ||
title="CSS Component/Button that looks like a link/States" | ||
parameters={{ | ||
status: { | ||
type: "WORK IN PROGRESS", | ||
}, | ||
}} | ||
/> | ||
|
||
# Link button: button that looks like a link | ||
|
||
## Hover state | ||
|
||
Styling met de `.utrecht-link-button--hover` class naam of als state op link met `.utrecht-link-button:hover`: | ||
|
||
<Canvas> | ||
<Story | ||
name="hover" | ||
args={{ | ||
hover: true, | ||
textContent: "Voorbeeldlink", | ||
}} | ||
> | ||
{LinkButton.bind({})} | ||
</Story> | ||
</Canvas> | ||
|
||
## Focus state | ||
|
||
Styling met de `.utrecht-link-button--focus` class naam: | ||
|
||
<Canvas> | ||
<Story | ||
name="focus" | ||
args={{ | ||
focus: true, | ||
textContent: "Voorbeeldlink", | ||
}} | ||
> | ||
{LinkButton.bind({})} | ||
</Story> | ||
</Canvas> | ||
|
||
## Focus-visible state | ||
|
||
Styling met de `.utrecht-link-button--focus-visible` class naam of als status op `.utrecht-link-button:focus-visible`: | ||
|
||
<Canvas> | ||
<Story | ||
name="focus-visible" | ||
args={{ | ||
focus: true, | ||
focusVisible: true, | ||
textContent: "Voorbeeldlink", | ||
}} | ||
> | ||
{LinkButton.bind({})} | ||
</Story> | ||
</Canvas> | ||
|
||
### Active state | ||
|
||
Styling met de `.utrecht-link-button--active` class naam of als status op `.utrecht-link-button:active`: | ||
|
||
<Canvas> | ||
<Story | ||
name="active" | ||
args={{ | ||
active: true, | ||
textContent: "Voorbeeldlink", | ||
}} | ||
> | ||
{LinkButton.bind({})} | ||
</Story> | ||
</Canvas> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/** | ||
* @license EUPL-1.2 | ||
* Copyright (c) 2022 Robbert Broersma | ||
*/ | ||
|
||
import clsx from 'clsx'; | ||
|
||
export const defaultArgs = { | ||
active: false, | ||
external: false, | ||
focus: false, | ||
focusVisible: false, | ||
hover: false, | ||
href: '', | ||
textContent: '', | ||
}; | ||
|
||
export const LinkButton = ({ | ||
active = false, | ||
external = false, | ||
href = '', | ||
focus = false, | ||
focusVisible = false, | ||
hover = false, | ||
textContent = '', | ||
}) => { | ||
const stateClassNames = { | ||
'utrecht-link-button--active': active, | ||
'utrecht-link-button--focus': focus, | ||
'utrecht-link-button--focus-visible': focusVisible, | ||
'utrecht-link-button--hover': hover, | ||
}; | ||
return href | ||
? `<a href="${href}" class="${clsx('utrecht-link-button', stateClassNames)}"${ | ||
external ? ' rel="external noopener noreferrer"' : '' | ||
}>${textContent}</a>` | ||
: `<button class="${clsx( | ||
'utrecht-link-button', | ||
'utrecht-link-button--html-button', | ||
stateClassNames, | ||
)}">${textContent}</button>`; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters