@utrecht/web-component-library-stencil 1.0.0-alpha.23 → 1.0.0-alpha.232

package/dist/collection/table/web-component/table-body.stencil.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class TableBody {
+  render() {
+    return (h(Host, { role: "rowgroup" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-table-body"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-body.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-body.css"]
+  }; }
+}

package/dist/collection/table/web-component/table-caption.css

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+:host {
+  color: var(--utrecht-table-caption-color);
+  font-family: var(--utrecht-table-caption-font-family);
+  font-size: var(--utrecht-table-caption-font-size);
+  font-weight: var(--utrecht-table-caption-font-weight);
+  line-height: var(--utrecht-table-caption-line-height);
+  margin-block-end: var(--utrecht-table-caption-margin-block-end);
+  text-align: var(--utrecht-table-caption-text-align, center);
+  display: table-caption;
+  page-break-after: avoid;
+  page-break-inside: avoid;
+}

package/dist/collection/table/web-component/table-caption.stencil.js

@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+export class TableCaption {
+  render() {
+    // TODO: Associate with parent <utrecht-table> aria-labelledby attribute
+    return h("slot", null);
+  }
+  static get is() { return "utrecht-table-caption"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-caption.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-caption.css"]
+  }; }
+}

package/dist/collection/table/web-component/table-cell.css

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+:host {
+  border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
+  border-block-end-style: solid;
+  border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
+  line-height: var(--utrecht-table-cell-line-height, inherit);
+  padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
+  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
+  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
+  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
+  text-align: start;
+  display: table-cell;
+}

package/dist/collection/table/web-component/table-cell.stencil.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class TableCell {
+  render() {
+    return (h(Host, { role: "cell" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-table-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-cell.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-cell.css"]
+  }; }
+}

package/dist/collection/table/web-component/table-footer.css

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+:host {
+  display: table-footer-group;
+}

package/dist/collection/table/web-component/table-footer.stencil.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class TableFooter {
+  render() {
+    return (h(Host, { role: "rowgroup" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-table-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-footer.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-footer.css"]
+  }; }
+}

package/dist/collection/table/web-component/table-header-cell.css

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+:host {
+  color: var(--utrecht-table-header-cell-color);
+  font-size: var(--utrecht-table-header-cell-font-size);
+  font-weight: var(--utrecht-table-header-cell-font-weight);
+  text-align: start;
+  text-transform: var(--utrecht-table-header-cell-text-transform);
+  display: table-cell;
+}

package/dist/collection/table/web-component/table-header-cell.stencil.js

@@ -0,0 +1,34 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class TableHeaderCell {
+  render() {
+    return (h(Host, { role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-table-header-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-header-cell.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-header-cell.css"]
+  }; }
+  static get properties() { return {
+    "scope": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'col' | 'row'",
+        "resolved": "\"col\" | \"row\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "scope",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/table/web-component/table-header.css

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+:host {
+  background-color: var(--utrecht-table-header-background-color);
+  color: var(--utrecht-table-header-color);
+  font-weight: var(--utrecht-table-header-font-weight);
+  text-transform: var(--utrecht-table-header-text-transform);
+  vertical-align: bottom;
+  display: table-header-group;
+}

package/dist/collection/table/web-component/table-header.stencil.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class TableHeader {
+  render() {
+    return (h(Host, { role: "rowgroup" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-table-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-header.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-header.css"]
+  }; }
+}

package/dist/collection/table/web-component/table-row.css

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+:host {
+  display: table-row;
+}

package/dist/collection/table/web-component/table-row.stencil.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class TableRow {
+  render() {
+    return (h(Host, { role: "row" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-table-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table-row.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table-row.css"]
+  }; }
+}

package/dist/collection/table/web-component/table.css

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+:host {
+  border-collapse: collapse;
+  border-color: var(--utrecht-table-border-color, 0);
+  border-style: solid;
+  border-width: var(--utrecht-table-border-width, 0);
+  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-table-font-size, inherit);
+  width: 100%;
+  display: table;
+}

package/dist/collection/table/web-component/table.stencil.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class Table {
+  render() {
+    return (h(Host, { role: "table" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["table.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table.css"]
+  }; }
+}

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

@@ -0,0 +1,23 @@
+export const TableExample = () => `
+<utrecht-table aria-labelledby="53818ecc-f9a6-4a9d-9e63-12a5ebb89e31">
+  <utrecht-table-caption id="53818ecc-f9a6-4a9d-9e63-12a5ebb89e31">Table</utrecht-table-caption>
+  <utrecht-table-header>
+    <utrecht-table-row>
+      <utrecht-table-header-cell scope="col">Column header cell 1</utrecht-table-header-cell>
+      <utrecht-table-header-cell scope="col">Column header cell 2</utrecht-table-header-cell>
+    </utrecht-table-row>
+  </utrecht-table-header>
+  <utrecht-table-footer>
+    <utrecht-table-row>
+      <utrecht-table-cell>Footer cell 1</utrecht-table-cell>
+      <utrecht-table-cell>Footer cell 2</utrecht-table-cell>
+    </utrecht-table-row>
+  </utrecht-table-footer>
+  <utrecht-table-body>
+    <utrecht-table-row>
+      <utrecht-table-header-cell scope="row">Row header cell</utrecht-table-header-cell>
+      <utrecht-table-cell>Cell</utrecht-table-cell>
+    </utrecht-table-row>
+  </utrecht-table-body>
+</utrecht-table>
+`;

package/dist/collection/templates/contact-card-template/css/template.js

@@ -0,0 +1,30 @@
+export const ContactCardTemplate = () => `<div class="utrecht-contact-card">
+  <h2 class="utrecht-heading-2">Hulp en contact</h2>
+  <div class="utrecht-contact-card__content">
+    <div class="utrecht-contact-card__section">
+      <h3 class="utrecht-heading-3">Telefoon</h3>
+      <p class="utrecht-contact-card__telephone utrecht-paragraph">
+        <a
+          href="tel:14-030"
+          class="utrecht-link utrecht-link--telephone"
+          title="Telefoonnummer van gemeente Utrecht"
+        >
+          14 030
+        </a>
+      </p>
+      <p class="utrecht-paragraph">Maandag t/m vrijdag 8.30 – 17.30 uur</p>
+    </div>
+    <div class="utrecht-contact-card__section">
+      <h3 class="utrecht-heading-3">E-mail</h3>
+      <p class="utrecht-paragraph">
+        <a
+          class="utrecht-link"
+          href="https://www.utrecht.nl/reactieformulier"
+          title="Algemeen reactieformulier van de gemeente Utrecht"
+        >
+          reactieformulier
+        </a>
+      </p>
+    </div>
+  </div>
+</div>`;

package/dist/collection/templates/contact-card-template/web-component/index.css

@@ -0,0 +1,209 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/*
+
+# CSS implementation
+
+## `text-decoration-skip`
+
+`text-decoration-skip` can be helpful to avoid making some texts unreadable.
+For example by obscuring Arabic diacritics.
+
+However, the combination of a greater thickness and skipping this thick underline
+leads to a very unappealing rendering of the underline. To avoid this,
+`text-decoration-skip` is disabled for interactive states.
+
+For design token configurations that have identical thickness for normal and interactive
+states, this will lead to the (undesirable) effect that the focus/hover effect is switching
+from an interrupted to an uninterrupted underline (for some texts).
+
+Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
+
+---
+
+Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
+that moving the pointer away from a link or having focus elsewhere first is simple enough to
+not make this too inconvenient.
+
+---
+
+Some folks implement the underline of links using `border-bottom` or even using a finely crafted
+`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
+would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
+
+## `text-decoration-thickness`
+
+Varying `text-decoration-thickness` can be used to distinguish interactive states.
+
+---
+
+`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
+In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
+the underline offset also seems to increase along with the thickness, which effectively means
+the underline is closer to the next line than in Safari.
+
+---
+
+It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
+use the `max()` function to ensure the underline remains visible for every font size.
+
+## `transition`
+
+`text-decoration-thickness` could be a candidate for animating between interactive states,
+however browsers don't seem to have implemented great looking supixel tweening yet.
+
+`text-decoration-skip` also makes the transition more challenging to implement.
+
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link {
+  color: var(--utrecht-link-color, blue);
+  text-decoration: var(--utrecht-link-text-decoration, underline);
+  text-decoration-skip-ink: all;
+  text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
+  text-underline-offset: var(--utrecht-link-text-underline-offset);
+}
+
+.utrecht-link--icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
+.utrecht-link:visited,
+.utrecht-link--visited {
+  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
+}
+
+.utrecht-link:hover,
+.utrecht-link--hover {
+  color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+}
+
+.utrecht-link:active,
+.utrecht-link--active {
+  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+}
+
+.utrecht-link--focus {
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+}
+
+.utrecht-link--focus-visible {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-link:focus {
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link--telephone {
+  white-space: nowrap;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-contact-card {
+  --utrecht-document-color: currentColor;
+  --utrecht-heading-color: currentColor;
+  --utrecht-link-color: currentColor;
+  --utrecht-link-focus-color: currentColor;
+  --utrecht-link-hover-color: currentColor;
+  --utrecht-link-active-color: currentColor;
+  --utrecht-link-visited-color: currentColor;
+  --utrecht-heading-2-text-transform: uppercase;
+  --utrecht-heading-2-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-contact-card-background-color: hsl(207 60% 91%);
+  --utrecht-contact-card-background-color-2: hsl(207 60% 96%);
+  background-color: #dae9f6;
+  background-image: linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));
+  background-position-x: 66%;
+  background-size: 200%;
+  color: var(--utrecht-color-black);
+  padding-block-end: var(--utrecht-space-block-xl);
+  padding-block-start: var(--utrecht-space-block-xl);
+  padding-inline-end: var(--utrecht-space-inline-xl);
+  padding-inline-start: var(--utrecht-space-inline-xl);
+}
+
+.utrecht-contact-card__content {
+  display: flex;
+  flex-direction: row;
+}
+
+.utrecht-contact-card__section {
+  margin-block-start: var(--utrecht-space-row-lg);
+  width: 100%;
+}
+
+.utrecht-contact-card__telephone {
+  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-2xl-font-size);
+}

package/dist/collection/templates/contact-card-template/web-component/index.stencil.js

@@ -0,0 +1,25 @@
+import { Component, h } from '@stencil/core';
+export class ContactCardTemplate {
+  render() {
+    return (h("div", { class: "utrecht-contact-card" },
+      h("utrecht-heading-2", null, "Hulp en contact"),
+      h("div", { class: "utrecht-contact-card__content" },
+        h("div", { class: "utrecht-contact-card__section" },
+          h("utrecht-heading-3", null, "Telefoon"),
+          h("utrecht-paragraph", { class: "utrecht-contact-card__telephone" },
+            h("a", { href: "tel:14-030", class: "utrecht-link utrecht-link--telephone", title: "Telefoonnummer van gemeente Utrecht" }, "14 030")),
+          h("utrecht-paragraph", null, "Maandag t/m vrijdag 8.30 \u2013 17.30 uur")),
+        h("div", { class: "utrecht-contact-card__section" },
+          h("utrecht-heading-3", null, "E-mail"),
+          h("utrecht-paragraph", null,
+            h("a", { class: "utrecht-link", href: "https://www.utrecht.nl/reactieformulier", title: "Algemeen reactieformulier van de gemeente Utrecht" }, "reactieformulier"))))));
+  }
+  static get is() { return "utrecht-contact-card-template"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/templates/contact-card-template/web-component/template.js

@@ -0,0 +1 @@
+export const ContactCardTemplate = () => `<utrecht-contact-card-template></utrecht-contact-card-template>`;

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

@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  disabled: false,
+  focus: false,
+  hover: false,
+  invalid: false,
+  placeholder: '',
+  readOnly: false,
+  required: false,
+  textContent: '',
+};
+
+export const Textarea = ({
+  disabled = false,
+  focus = false,
+  hover = false,
+  invalid = false,
+  placeholder = '',
+  readOnly = false,
+  required = false,
+  textContent = '',
+}) =>
+  `<textarea class="${clsx(
+    'utrecht-textarea',
+    'utrecht-textarea--html-textarea',
+    disabled && 'utrecht-textarea--disabled',
+    focus && 'utrecht-textarea--focus utrecht-textarea--focus-visible',
+    hover && 'utrecht-textarea--hover',
+    invalid && 'utrecht-textarea--invalid',
+    readOnly && 'utrecht-textarea--readonly',
+    required && 'utrecht-textarea--required',
+  )}"${disabled ? ' disabled' : ''}${invalid ? ' aria-invalid="true"' : ''}${
+    placeholder ? ` placeholder="${placeholder}"` : ''
+  }${readOnly ? ' readonly' : ''}${required ? ' required' : ''}>${textContent}</textarea>`;

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

@@ -0,0 +1,20 @@
+export const defaultArgs = {
+  disabled: false,
+  invalid: false,
+  placeholder: '',
+  readOnly: false,
+  required: false,
+  textContent: '',
+};
+
+export const Textarea = ({
+  disabled = false,
+  invalid = false,
+  placeholder = '',
+  readOnly = false,
+  required = false,
+  textContent = '',
+}) =>
+  `<textarea class="utrecht-textarea"${disabled ? ' disabled' : ''}${invalid ? ' aria-invalid="true"' : ''}${
+    placeholder ? ` placeholder="${placeholder}"` : ''
+  }${readOnly ? ' readonly' : ''}${required ? ' required' : ''}>${textContent}</textarea>`;