feat: Link button - button that looks like a link

components/link-button/README.md

@@ -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.

components/link-button/css/index.scss

@@ -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;
+}

components/link-button/css/stories/01-default.stories.mdx

@@ -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" />

components/link-button/css/stories/readme.stories.mdx

@@ -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>

components/link-button/css/stories/state.stories.mdx

@@ -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>

components/link-button/css/template.js

@@ -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>`;
+};

packages/component-library-css/src/bem.scss

@@ -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";