@utrecht/web-component-library-stencil 1.0.0-alpha.316 → 1.0.0-alpha.317

package/dist/collection/navigatie sidenav/web-component/index.stencil.js

@@ -1,3 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
 import { Component, h, Prop } from '@stencil/core';
 import clsx from 'clsx';
 export class Sidenav {

package/dist/components/navigatie sidenav/web-component/index.stencil.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
 export declare class Sidenav {
     json: string;
     render(): any;

package/dist/components/navigatie sidenav/web-component/index.stencil.js

@@ -1,3 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/types/navigatie sidenav/web-component/index.stencil.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
 export declare class Sidenav {
   json: string;
   render(): any;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.316",
+  "version": "1.0.0-alpha.317",
   "author": "Community for NL Design System",
   "description": "Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -31,7 +31,7 @@
     "@stencil/react-output-target": "0.3.1",
     "@stencil/sass": "1.5.2",
     "@stencil/vue-output-target": "0.6.2",
-    "@utrecht/icon": "1.0.0-alpha.205",
+    "@utrecht/icon": "1.0.0-alpha.206",
     "chokidar-cli": "3.0.0",
     "node-sass-package-importer": "5.3.2",
     "npm-run-all": "4.1.5",
@@ -51,5 +51,5 @@
     "watch:build": "stencil build --watch",
     "generate": "stencil generate"
   },
-  "gitHead": "7924812476e4f47fc63b99a34e913d790d38a080"
+  "gitHead": "40f94d1ad0325a155b00186d2844b30cf98e7169"
 }

package/dist/collection/blockquote/css/template.js

@@ -1,24 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  textContent: '',
-  attribution: null,
-  distanced: false,
-};
-
-export const Blockquote = ({ textContent = '', attribution = null, distanced = false }) =>
-  `<blockquote class="${clsx('utrecht-blockquote', { 'utrecht-blockquote--distanced': distanced })}">
-  <div class="utrecht-blockquote__content">
-    <p>${textContent}</p>${
-    attribution
-      ? `
-    <div class="utrecht-blockquote__attribution">${attribution}</div>`
-      : ''
-  }
-  </div>
-</blockquote>`;

package/dist/collection/blockquote/html/template.js

@@ -1,6 +0,0 @@
-export const Blockquote = ({ textContent = '' }) =>
-  `<section class="utrecht-html">
-  <blockquote>
-    <p>${textContent}</p>
-  </blockquote>
-</section>`;

package/dist/collection/digid-logo/web-component/template.js

@@ -1 +0,0 @@
-export const DigidLogo = () => `<utrecht-digid-logo></utrecht-digid-logo>`;

package/dist/collection/document/web-component/template.js

@@ -1 +0,0 @@
-export const Document = ({ innerHTML }) => `<utrecht-document>${innerHTML}</utrecht-document>`;

package/dist/collection/eherkenning-logo/web-component/template.js

@@ -1 +0,0 @@
-export const EherkenningLogo = () => `<utrecht-eherkenning-logo></utrecht-eherkenning-logo>`;

package/dist/collection/eidas-logo/web-component/template.js

@@ -1 +0,0 @@
-export const EidasLogo = () => `<utrecht-eidas-logo></utrecht-eidas-logo>`;

package/dist/collection/emphasis/css/template.js

@@ -1,19 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  stressed: false,
-  strong: false,
-  textContent: '',
-};
-
-export const Emphasis = ({ textContent = '', stressed = false, strong = false }) =>
-  `<span class="${clsx(
-    'utrecht-emphasis',
-    stressed && 'utrecht-emphasis--stressed',
-    strong && 'utrecht-emphasis--strong',
-  )}">${textContent}</span>`;

package/dist/collection/emphasis/html/template.js

@@ -1,20 +0,0 @@
-export const defaultArgs = {
-  stressed: false,
-  strong: false,
-  textContent: '',
-};
-
-export const StressedTemplate = ({ textContent = '' }) => `<em>${textContent}</em>`;
-
-export const StrongTemplate = ({ textContent = '' }) => `<strong>${textContent}</strong>`;
-
-export const Emphasis = ({ textContent = '', stressed = false, strong = false }) => {
-  let formatted = textContent;
-  if (stressed) {
-    formatted = StressedTemplate({ textContent: formatted });
-  }
-  if (strong) {
-    formatted = StrongTemplate({ textContent: formatted });
-  }
-  return `<div class="utrecht-html">${formatted}</div>`;
-};

package/dist/collection/favicon/html/template.js

@@ -1 +0,0 @@
-export const Favicon = ({ href = '' }) => `<link rel="icon" href="${href}">`;

package/dist/collection/form-field-checkbox/css/template.js

@@ -1,10 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const FormFieldCheckbox = ({ label = '' }) =>
-  `<div class="utrecht-form-field utrecht-form-field--checkbox utrecht-form-field--distanced">
-    <input type="checkbox" class="utrecht-form-field__input utrecht-checkbox" id="id-ce0239e2">
-  <label class="utrecht-form-field__label utrecht-form-field__label--checkbox utrecht-form-label utrecht-form-label--checkbox" for="id-ce0239e2">${label}</label>
-</div>`;

package/dist/collection/form-field-checkbox/web-component/template.js

@@ -1,18 +0,0 @@
-export const defaultArgs = {
-  checked: false,
-  disabled: false,
-  invalid: false,
-  label: '',
-  required: false,
-};
-
-export const FormFieldCheckbox = ({
-  checked = false,
-  disabled = false,
-  invalid = false,
-  label = '',
-  required = false,
-}) =>
-  `<utrecht-form-field-checkbox${checked ? ' checked="true"' : ''}${disabled ? ' disabled="true"' : ''}${
-    invalid ? ' invalid="true"' : ''
-  }${required ? ' required="true"' : ''}>${label}</utrecht-form-field-checkbox>`;

package/dist/collection/form-field-checkbox-group/css/template.js

@@ -1,33 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const FormFieldCheckboxGroup = ({
-  label,
-  options,
-  groupLabelId = 'group-label',
-}) => `<div class="utrecht-form-field-checkbox-group utrecht-form-field-checkbox-group--distanced" role="group" aria-labelledby="${groupLabelId}">
-  <div class="utrecht-form-field-checkbox-group__label utrecht-form-label" id="${groupLabelId}">${label}</div>
-  ${options
-    .map((option, index) => ({
-      ...option,
-      id: options.id || `option-${index}`,
-    }))
-    .map(
-      ({
-        id,
-        label,
-        name,
-        value,
-        checked,
-      }) => `<div class="utrecht-form-field utrecht-form-field--checkbox utrecht-form-field--distanced">
-    <input type="checkbox" class="utrecht-form-field__input utrecht-checkbox" id="${id}" value="${value}"${
-        checked ? ' checked' : ''
-      } name="${name}">
-    <label class="utrecht-form-field__label utrecht-form-field__label--checkbox utrecht-form-label utrecht-form-label--checkbox" for="${id}">${label}</label>
-  </div>`,
-    )
-    .join('\n')}
-  </div>`;

package/dist/collection/form-field-description/css/template.js

@@ -1,15 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const FormFieldDescription = ({ id = null, innerHTML = '', status = null, distanced = false }) =>
-  `<div${id ? ` id="${id}"` : ''} class="${clsx(
-    'utrecht-form-field-description',
-    distanced && 'utrecht-form-field-description--distanced',
-    status === 'invalid' && 'utrecht-form-field-description--invalid',
-    status === 'valid' && 'utrecht-form-field-description--valid',
-    status === 'warning' && 'utrecht-form-field-description--warning',
-  )}">${innerHTML}</div>`;

package/dist/collection/form-field-description/web-component/template.js

@@ -1,4 +0,0 @@
-export const FormFieldDescription = ({ id = null, innerHTML = '', status = null }) =>
-  `<utrecht-form-field-description id="${id}"${
-    status ? ` status="${status}"` : ''
-  }>${innerHTML}</utrecht-form-field-description>`;

package/dist/collection/form-field-radio/css/template.js

@@ -1,10 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const FormFieldRadio = ({ label = '' }) =>
-  `<div class="utrecht-form-field-radio utrecht-form-field-radio--distanced">
-    <input type="radio" class="utrecht-form-field-radio__input utrecht-radio-button" id="id-ce0239e2">
-  <label class="utrecht-form-field-radio__label utrecht-form-label utrecht-form-label--radio" for="id-ce0239e2">${label}</label>
-</div>`;

package/dist/collection/form-field-radio-group/css/template.js

@@ -1,20 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const FormFieldRadioGroup = ({ label, name, options }) =>
-  `<div class="utrecht-form-field-radio-group utrecht-form-field-radio-group--distanced" role="radiogroup" aria-labelledby="id-9e42cd3e">
-  <div class="utrecht-form-field-radio-group__label utrecht-form-label" id="id-9e42cd3e">${label}</div>
-  ${options
-    .map(
-      ({ checked, label, value }, index) => `
-  <div class="utrecht-form-field-radio utrecht-form-field-radio--distanced">
-    <input type="radio" name="${name}" value="${value}" class="utrecht-form-field-radio__input utrecht-radio-button" id="option-${index}"${
-        checked ? ' checked' : ''
-      }>
-    <label class="utrecht-form-field-radio__label utrecht-form-label utrecht-form-label--radio" for="option-${index}">${label}</label>
-  </div>`,
-    )
-    .join('\n')}
-</div>`;

package/dist/collection/form-field-textarea/web-component/template.js

@@ -1,14 +0,0 @@
-export const FormFieldTextarea = ({
-  disabled = false,
-  invalid = false,
-  label = '',
-  placeholder = '',
-  readOnly = false,
-  required = false,
-  value = '',
-}) =>
-  `<utrecht-form-field-textarea${disabled ? ' disabled="true"' : ''}${invalid ? ' invalid="true"' : ''}${
-    placeholder ? ` placeholder="${placeholder}"` : ''
-  }${readOnly ? ' readonly="true"' : ''}${required ? ' required="true"' : ''}${
-    value ? ` value="${value}"` : ''
-  }>${label}</utrecht-form-field-textarea>`;

package/dist/collection/form-field-textbox/web-component/template.js

@@ -1,21 +0,0 @@
-export const FormFieldTextbox = ({
-  autoComplete = '',
-  disabled = false,
-  invalid = false,
-  label = '',
-  min = '',
-  max = '',
-  pattern = '',
-  placeholder = '',
-  readOnly = false,
-  required = false,
-  type = '',
-  value = '',
-}) =>
-  `<utrecht-form-field-textbox${autoComplete ? ` autocomplete="${autoComplete}"` : ''}${
-    disabled ? ' disabled="true"' : ''
-  }${invalid ? ' invalid="true"' : ''}${min !== '' ? ` min="${min}"` : ''}${max !== '' ? ` max="${max}"` : ''}${
-    pattern ? ` pattern="${pattern}"` : ''
-  }${placeholder ? ` placeholder="${placeholder}"` : ''}${readOnly ? ' readonly="true"' : ''}${
-    required ? ' required="true"' : ''
-  }${value ? ` value="${value}"` : ''}${type ? ` type="${type}"` : ''}>${label}</utrecht-form-field-textbox>`;

package/dist/collection/form-fieldset/css/template.js

@@ -1,10 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const FormFieldset = ({ content = '', legend = '' }) =>
-  `<div class="utrecht-form-fieldset">
-  ${legend ? `<div class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--distanced">${legend}</div>` : ''}
-  ${content}
-</div>`;

package/dist/collection/form-fieldset/html/template.js

@@ -1,12 +0,0 @@
-export const defaultArgs = {
-  innerHTML: '',
-  legend: '',
-};
-
-export const FormFieldset = ({ innerHTML = '', legend = '' }) =>
-  `<div class="utrecht-html">
-  <fieldset>
-    ${legend ? `<legend>${legend}</legend>` : ''}
-    ${innerHTML}
-  </fieldset>
-</div>`;

package/dist/collection/form-label/css/template.js

@@ -1,22 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  checked: false,
-  disabled: false,
-  textContent: '',
-  type: null,
-};
-
-export const FormLabel = ({ checked = false, disabled = false, textContent = '', type = null }) =>
-  `<span class="${clsx(
-    'utrecht-form-label',
-    type === 'checkbox' && 'utrecht-form-label--checkbox',
-    checked && 'utrecht-form-label--checked',
-    disabled && 'utrecht-form-label--disabled',
-    type === 'radio' && 'utrecht-form-label--radio',
-  )}">${textContent}</span>`;

package/dist/collection/form-label/html/template.js

@@ -1,5 +0,0 @@
-export const FormLabel = ({ textContent = '', type = null }) =>
-  `<div class="utrecht-html">
-  <input type="${type}" id="${type}">
-  <label for="${type}">${textContent}</label>
-</div>`;

package/dist/collection/form-toggle/css/template.js

@@ -1,47 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  checked: false,
-  disabled: false,
-  focus: false,
-  hover: false,
-};
-
-export const FormToggle = ({ checked = false, disabled = false, hover = false, focus = false }) =>
-  `<div class="${clsx(
-    'utrecht-form-toggle',
-    checked && 'utrecht-form-toggle--checked',
-    !checked && 'utrecht-form-toggle--not-checked',
-    disabled && 'utrecht-form-toggle--disabled',
-    focus && 'utrecht-form-toggle--focus',
-    hover && 'utrecht-form-toggle--hover',
-  )}" role="switch" tabindex="0"${checked ? ' aria-checked="true"' : ''}${disabled ? ' aria-disabled="true"' : ''}>
-  <div class="${clsx(
-    'utrecht-form-toggle__track',
-    checked && 'utrecht-form-toggle__track--checked',
-    !checked && 'utrecht-form-toggle__track--not-checked',
-    disabled && 'utrecht-form-toggle__track--disabled',
-  )}">
-    <div class="${clsx(
-      'utrecht-form-toggle__thumb',
-      checked && 'utrecht-form-toggle__thumb--checked',
-      !checked && 'utrecht-form-toggle__thumb--not-checked',
-      disabled && 'utrecht-form-toggle__thumb--disabled',
-    )}"></div>
-  </div>
-</div>`;
-
-export const FormToggleCheckbox = ({ checked = false, disabled = false, id }) =>
-  `<div class="${clsx('utrecht-form-toggle', 'utrecht-form-toggle--html-checkbox')}">
-  <input id="${id}" type="checkbox" class="utrecht-form-toggle__checkbox"${checked ? ' checked' : ''}${
-    disabled ? ' disabled' : ''
-  }>
-  <label for="${id}" class="${clsx('utrecht-form-toggle__track')}">
-    <div class="${clsx('utrecht-form-toggle__thumb')}"></div>
-  </label>
-</div>`;

package/dist/collection/form-toggle/web-component/template.js

@@ -1,7 +0,0 @@
-export const defaultArgs = {
-  checked: false,
-  disabled: false,
-};
-
-export const FormToggle = ({ checked = false, disabled = false }) =>
-  `<utrecht-form-toggle${checked ? ' checked="true"' : ''}${disabled ? ' disabled="true"' : ''}></utrecht-form-toggle>`;

package/dist/collection/heading/web-component/template.js

@@ -1,4 +0,0 @@
-export const Heading = ({ level, textContent = '' }) =>
-  `<section>
-  <utrecht-heading level="${level}">${textContent}</utrecht-heading>
-</section>`;

package/dist/collection/heading-1/css/template.js

@@ -1,11 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const Heading1 = ({ textContent = '', distanced = false }) =>
-  `<h1 class="${clsx('utrecht-heading-1', {
-    'utrecht-heading-1--distanced': distanced,
-  })}">${textContent}</h1>`;

package/dist/collection/heading-1/html/template.js

@@ -1,4 +0,0 @@
-export const Heading1 = ({ textContent = '' }) =>
-  `<section class="utrecht-html">
-  <h1>${textContent}</h1>
-</section>`;

package/dist/collection/heading-1/web-component/template.js

@@ -1,4 +0,0 @@
-export const Heading1 = ({ textContent = '' }) =>
-  `<section>
-  <utrecht-heading-1>${textContent}</utrecht-heading-1>
-</section>`;

package/dist/collection/heading-2/css/template.js

@@ -1,11 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const Heading2 = ({ textContent = '', distanced = false }) =>
-  `<h2 class="${clsx('utrecht-heading-2', {
-    'utrecht-heading-2--distanced': distanced,
-  })}">${textContent}</h2>`;

package/dist/collection/heading-2/html/template.js

@@ -1,4 +0,0 @@
-export const Heading2 = ({ textContent = '' }) =>
-  `<section class="utrecht-html">
-  <h2>${textContent}</h2>
-</section>`;

package/dist/collection/heading-2/web-component/template.js

@@ -1,4 +0,0 @@
-export const Heading2 = ({ textContent = '' }) =>
-  `<section>
-  <utrecht-heading-2>${textContent}</utrecht-heading-2>
-</section>`;

package/dist/collection/heading-3/css/template.js

@@ -1,11 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const Heading3 = ({ textContent = '', distanced = false }) =>
-  `<h3 class="${clsx('utrecht-heading-3', {
-    'utrecht-heading-3--distanced': distanced,
-  })}">${textContent}</h3>`;

package/dist/collection/heading-3/html/template.js

@@ -1,4 +0,0 @@
-export const Heading3 = ({ textContent = '' }) =>
-  `<section class="utrecht-html">
-  <h3>${textContent}</h3>
-</section>`;

package/dist/collection/heading-3/web-component/template.js

@@ -1,4 +0,0 @@
-export const Heading3 = ({ textContent = '' }) =>
-  `<section>
-  <utrecht-heading-3>${textContent}</utrecht-heading-3>
-</section>`;

package/dist/collection/heading-4/css/template.js

@@ -1,11 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const Heading4 = ({ textContent = '', distanced = false }) =>
-  `<h4 class="${clsx('utrecht-heading-4', {
-    'utrecht-heading-4--distanced': distanced,
-  })}">${textContent}</h4>`;

package/dist/collection/heading-4/html/template.js

@@ -1,4 +0,0 @@
-export const Heading4 = ({ textContent = '' }) =>
-  `<section class="utrecht-html">
-  <h4>${textContent}</h4>
-</section>`;

package/dist/collection/heading-4/web-component/template.js

@@ -1,4 +0,0 @@
-export const Heading4 = ({ textContent = '' }) =>
-  `<section>
-  <utrecht-heading-4>${textContent}</utrecht-heading-4>
-</section>`;

package/dist/collection/heading-5/css/template.js

@@ -1,11 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const Heading5 = ({ textContent = '', distanced = false }) =>
-  `<h5 class="${clsx('utrecht-heading-5', {
-    'utrecht-heading-5--distanced': distanced,
-  })}">${textContent}</h5>`;

package/dist/collection/heading-5/html/template.js

@@ -1,4 +0,0 @@
-export const Heading5 = ({ textContent = '' }) =>
-  `<section class="utrecht-html">
-  <h5>${textContent}</h5>
-</section>`;

package/dist/collection/heading-5/web-component/template.js

@@ -1,4 +0,0 @@
-export const Heading5 = ({ textContent = '' }) =>
-  `<section>
-  <utrecht-heading-5>${textContent}</utrecht-heading-5>
-</section>`;

package/dist/collection/heading-6/css/template.js

@@ -1,11 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const Heading6 = ({ textContent = '', distanced = false }) =>
-  `<h6 class="${clsx('utrecht-heading-6', {
-    'utrecht-heading-6--distanced': distanced,
-  })}">${textContent}</h6>`;

package/dist/collection/heading-6/html/template.js

@@ -1,4 +0,0 @@
-export const Heading6 = ({ textContent = '' }) =>
-  `<section class="utrecht-html">
-  <h6>${textContent}</h6>
-</section>`;

package/dist/collection/heading-6/web-component/template.js

@@ -1,4 +0,0 @@
-export const Heading6 = ({ textContent = '' }) =>
-  `<section>
-  <utrecht-heading-6>${textContent}</utrecht-heading-6>
-</section>`;

package/dist/collection/html-content/web-component/template.js

@@ -1 +0,0 @@
-export const HTMLContent = ({ content }) => `<utrecht-html-content>${content}</utrecht-html-content>`;

package/dist/collection/icon/web-component/template.js

@@ -1,7 +0,0 @@
-export const IconExample = ({
-  color = 'blue',
-  icon = 'utrecht-icon-arrow',
-  size = 12,
-}) => `<div style="--utrecht-icon-color: ${color}; --utrecht-icon-size: ${size}px;">
-  <${icon}></${icon}>
-</div>`;

package/dist/collection/link-button/css/template.js

@@ -1,45 +0,0 @@
-/**
- * @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,
-  inline: false,
-  href: '',
-  textContent: '',
-};
-
-export const LinkButton = ({
-  active = false,
-  external = false,
-  href = '',
-  focus = false,
-  focusVisible = false,
-  hover = false,
-  inline = 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',
-        inline && 'utrecht-link-button--inline',
-        stateClassNames,
-      )}">${textContent}</button>`;
-};