Skip to content

Commit

Permalink
feat: Link button - button that looks like a link
Browse files Browse the repository at this point in the history
  • Loading branch information
Robbert committed May 14, 2022
1 parent 6cdfa37 commit e3672c9
Show file tree
Hide file tree
Showing 7 changed files with 267 additions and 0 deletions.
22 changes: 22 additions & 0 deletions components/link-button/README.md
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.
49 changes: 49 additions & 0 deletions components/link-button/css/index.scss
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;
}
63 changes: 63 additions & 0 deletions components/link-button/css/stories/01-default.stories.mdx
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" />
8 changes: 8 additions & 0 deletions components/link-button/css/stories/readme.stories.mdx
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>
82 changes: 82 additions & 0 deletions components/link-button/css/stories/state.stories.mdx
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>
42 changes: 42 additions & 0 deletions components/link-button/css/template.js
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>`;
};
1 change: 1 addition & 0 deletions packages/component-library-css/src/bem.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
@import "../../../components/heading-5/bem";
@import "../../../components/heading-6/bem";
@import "../../../components/link-list/css";
@import "../../../components/link-button/css";
@import "../../../components/link-social/css";
@import "../../../components/link/css";
@import "../../../components/logo-button/css";
Expand Down

0 comments on commit e3672c9

Please sign in to comment.