feat: Button link - link that looks like a button

components/button-link/README.md

@@ -0,0 +1,39 @@
+<!-- @license CC0-1.0 -->
+
+# Button link: link die er uit ziet als button
+
+Een link die er uitziet als een button, om gebruikers aan te sporen op de link te klikken en actie te gaan ondernemen.
+
+## Toepassing
+
+Een link button mag alleen gebruikt worden voor navigatie naar een pagina waar je een actie uitvoert, de link klikken mag niet gelijk een _side-effect_ hebben.
+
+Wel:
+
+- Log in met eIDAS (navigeert naar formulier voor inloggen)
+- Maak een afspraak (navigeert naar formulier)
+
+Niet:
+
+- Uitloggen (logt direct uit)
+- Stop de parkeermeter (je mag hierna niet meer parkeren)
+
+## Activeren
+
+Een link button moet op dezelfde manier geactiveerd kunnen worden als een button:
+
+- Klikken
+- `Enter` op toetsenbord
+- `Space` op toetsenbord
+
+Een HTML `a` element wordt standaard niet geactiveerd met `Space`, daarvoor is ondersteunende JavaScript nodig.
+
+## States
+
+- hover
+- focus
+- focus-visible
+
+De link button heeft geen disabled state, net als de normale link: die heeft ook geen disabled state.
+
+De link button heeft geen `visited` state zoals normale links, maar ziet er altijd hetzelfde uit zoals een normale button.

components/button-link/css/index.scss

@@ -0,0 +1,26 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+
+@import "../../button/bem";
+
+.utrecht-button-link {
+  @extend .utrecht-button;
+
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.utrecht-button-link--hover {
+  @extend .utrecht-button--hover;
+}
+
+.utrecht-button-link--focus {
+  @extend .utrecht-button--focus;
+}
+
+.utrecht-button-link--focus-visible {
+  @extend .utrecht-button--focus-visible;
+}

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

@@ -0,0 +1,66 @@
+<!-- @license CC0-1.0 -->
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { ButtonLink, defaultArgs } from "../template";
+import "../index.scss";
+
+<Meta
+  id="css-button-link"
+  title="CSS Component/Link that looks like a button"
+  argTypes={{
+    external: {
+      description: "External",
+      control: "boolean",
+    },
+    hover: {
+      description: "Hover",
+      control: "boolean",
+    },
+    focus: {
+      description: "Focus",
+      control: "boolean",
+    },
+    focusVisible: {
+      description: "Focus visible",
+      control: "boolean",
+    },
+    href: {
+      description: "Target URL",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    textContent: {
+      description: "Link text",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+  }}
+  parameters={{
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Button link: link die er uit ziet als button
+
+Styling met de `.utrecht-button-link` class naam:
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      ...defaultArgs,
+      href: "",
+      textContent: "Start je aanvraag",
+    }}
+  >
+    {ButtonLink.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />

components/button-link/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-button-link-readme" title="CSS Component/Link that looks like a button/README" />
+
+<Description>{document}</Description>

components/button-link/css/template.js

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  external: false,
+  hover: false,
+  href: '',
+  focus: false,
+  focusVisible: false,
+  textContent: '',
+};
+
+export const ButtonLink = ({
+  external = false,
+  hover = false,
+  href = '',
+  focus = false,
+  focusVisible = false,
+  textContent = '',
+}) =>
+  `<a role="button" href="${href}" class="${clsx(
+    'utrecht-button-link',
+    hover && 'utrecht-button-link--hover',
+    focus && 'utrecht-button-link--focus',
+    focusVisible && 'utrecht-button-link--focus-visible',
+  )}"${external ? ' rel="external noopener noreferrer"' : ''}>${textContent}</a>`;

components/button-link/react/index.stories.mdx

@@ -0,0 +1,22 @@
+<!-- @license CC0-1.0 -->
+
+import { Canvas, Meta } from "@storybook/addon-docs";
+import { ButtonLink } from "@utrecht/component-library-react";
+import "../css/index.scss";
+
+<Meta
+  title="React Component/Link that looks like a button"
+  parameters={{
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Link that looks like a button
+
+<Canvas>
+  <ButtonLink href="https://example.com/" external>
+    Start je aanvraag
+  </ButtonLink>
+</Canvas>

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

@@ -25,6 +25,7 @@
 @import "../../../components/breadcrumb/css";
 @import "../../../components/button/bem";
 @import "../../../components/button-group/css";
+@import "../../../components/button-link/css";
 @import "../../../components/checkbox/css";
 @import "../../../components/custom-checkbox/css";
 @import "../../../components/digid-button/css";

packages/component-library-react/package.json

@@ -41,6 +41,10 @@
       "types": "./dist/Button.d.ts",
       "default": "./dist/cjs/Button.js"
     },
+    "./ButtonLink": {
+      "types": "./dist/ButtonLink.d.ts",
+      "default": "./dist/cjs/ButtonLink.js"
+    },
     "./Checkbox": {
       "types": "./dist/Checkbox.d.ts",
       "default": "./dist/cjs/Checkbox.js"