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

package/dist/collection/{button/stencil.js → backdrop/web-component/index.stencil.js}

@@ -1,20 +1,25 @@
-import { Component, Prop, h } from "@stencil/core";
-import clsx from "clsx";
-export class Button {
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class Backdrop {
   render() {
-    return (h("button", { class: clsx("utrecht-button", this.disabled && "utrecht-button--disabled"), disabled: this.disabled },
+    const { viewport } = this;
+    return (h("div", { class: clsx('utrecht-backdrop', viewport && 'utrecht-backdrop--viewport') },
       h("slot", null)));
   }
-  static get is() { return "utrecht-button"; }
+  static get is() { return "utrecht-backdrop"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
-    "disabled": {
+    "viewport": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -28,7 +33,7 @@ export class Button {
         "tags": [],
         "text": ""
       },
-      "attribute": "disabled",
+      "attribute": "viewport",
       "reflect": false
     }
   }; }

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

@@ -0,0 +1,17 @@
+export const Backdrop = ({ viewport }) => `<utrecht-backdrop${viewport ? ' viewport="true"' : ''}></utrecht-backdrop>`;
+
+export const checkerboard = (story) =>
+  `<div style="
+      --checkerboard-color-1: #000000;
+      --checkerboard-color-2: #ffffff;
+      --checkerboard-size: 16px;
+      background-color: var(--checkerboard-color-2);
+      background-image: linear-gradient(45deg, var(--checkerboard-color-1) 25%, transparent 25%, transparent 75%, var(--checkerboard-color-1) 75%,var(--checkerboard-color-1)), linear-gradient(45deg, var(--checkerboard-color-1) 25%, transparent 25%, transparent 75%, var(--checkerboard-color-1) 75%, var(--checkerboard-color-1));
+      background-position: 0 0, var(--checkerboard-size) var(--checkerboard-size);
+      background-size: calc(var(--checkerboard-size) * 2) calc(var(--checkerboard-size) * 2);
+      height: 100%;
+      min-height: calc(40 * var(--checkerboard-size));
+      min-width: calc(40 * var(--checkerboard-size));
+      position: relative;
+      width: 100%;
+">${story()}</div>`;

package/dist/collection/badge-counter/css/template.js

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const BadgeCounter = ({ textContent = '' }) =>
+  `<span class="utrecht-badge-counter"><span class="utrecht-badge-counter__text">${textContent}</span></span>`;

package/dist/collection/badge-counter/{bem.css → web-component/index.css}

@@ -6,31 +6,13 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-badge {
-  background-color: var(--utrecht-badge-background-color, black);
-  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
-  color: var(--utrecht-badge-color, white);
-  display: inline-block;
-  font-family: var(--utrecht-document-font-family, sans-serif);
-  font-style: normal;
-  /* no inheritance */
-  font-weight: var(--utrecht-badge-font-weight, bold);
-  /* no inheritance */
-  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
-  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
-  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
-  padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
-  text-decoration: none;
-  /* no inheritance */
-}
-
 .utrecht-badge-counter {
   background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, black));
   border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
   color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, white));
   display: inline-block;
   font-family: var(--utrecht-document-font-family, sans-serif);
-  font-style: normal;
+  font-style: var(--utrecht-badge-counter-font-style, normal);
   /* no inheritance */
   font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
   /* no inheritance */
@@ -40,4 +22,12 @@
   padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
   text-decoration: none;
   /* no inheritance */
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
 }

package/dist/collection/badge-counter/{stencil.js → web-component/index.stencil.js}

@@ -2,22 +2,22 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import { Component, Prop, h } from "@stencil/core";
+import { Component, h, Prop } from '@stencil/core';
 export class BadgeCounter {
   render() {
     const { locale, max, value } = this;
-    const limited = typeof max === "number" && typeof value === "number" && Number(value) > Number(max);
+    const limited = typeof max === 'number' && typeof value === 'number' && Number(value) > Number(max);
     const formatNumber = (n) => (locale ? Intl.NumberFormat(locale).format(n) : String(n));
-    const textContent = limited ? `${formatNumber(max)}+` : typeof value === "number" ? formatNumber(value) : "";
+    const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';
     return h("div", { class: "utrecht-badge-counter" }, textContent ? textContent : h("slot", null));
   }
   static get is() { return "utrecht-badge-counter"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "value": {

package/dist/collection/badge-counter/web-component/template.js

@@ -0,0 +1,4 @@
+export const BadgeCounter = ({ locale = null, textContent = '', value = null, max = null }) =>
+  `<utrecht-badge-counter${typeof max !== 'undefined' && max !== null ? ` max="${max}"` : ''}${
+    typeof value !== 'undefined' && value !== null ? ` value="${value}"` : ''
+  }${locale ? ` locale="${locale}"` : ''}>${textContent}</utrecht-badge-counter>`;

package/dist/collection/badge-data/css/template.js

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const BadgeData = ({ textContent = '' }) => `<div class="utrecht-badge-data">${textContent}</div>`;

package/dist/collection/badge-data/{bem.css → web-component/index.css}

@@ -6,25 +6,36 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-badge, .utrecht-badge-data {
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-badge-data {
   background-color: var(--utrecht-badge-background-color, black);
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, white);
   display: inline-block;
   font-family: var(--utrecht-document-font-family, sans-serif);
-  font-style: normal;
+  font-size: var(--utrecht-badge-font-size, inherit);
+  font-style: var(--utrecht-badge-font-style, normal);
   /* no inheritance */
   font-weight: var(--utrecht-badge-font-weight, bold);
   /* no inheritance */
+  line-height: var(--utrecht-badge-line-height);
   padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
   padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
   padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
   text-decoration: none;
   /* no inheritance */
-}
-
-.utrecht-badge-data {
   letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-data-text-transform, inherit);
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
 }

package/dist/collection/badge-data/{stencil.js → web-component/index.stencil.js}

@@ -2,7 +2,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import { Component, h } from "@stencil/core";
+import { Component, h } from '@stencil/core';
 export class BadgeData {
   render() {
     return (h("div", { class: "utrecht-badge-data" },
@@ -11,9 +11,9 @@ export class BadgeData {
   static get is() { return "utrecht-badge-data"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/badge-data/web-component/template.js

@@ -0,0 +1 @@
+export const BadgeData = ({ textContent = '' }) => `<utrecht-badge-data>${textContent}</utrecht-badge-data>`;

package/dist/collection/badge-status/css/template.js

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const BadgeStatus = ({ status = '', textContent = '' }) =>
+  `<div class="utrecht-badge-status utrecht-badge-status--${status ? status : 'neutral'}">${textContent}</div>`;

package/dist/collection/badge-status/{bem.css → web-component/index.css}

@@ -6,25 +6,28 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-badge, .utrecht-badge-status {
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-badge-status {
   background-color: var(--utrecht-badge-background-color, black);
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, white);
   display: inline-block;
   font-family: var(--utrecht-document-font-family, sans-serif);
-  font-style: normal;
+  font-size: var(--utrecht-badge-font-size, inherit);
+  font-style: var(--utrecht-badge-font-style, normal);
   /* no inheritance */
   font-weight: var(--utrecht-badge-font-weight, bold);
   /* no inheritance */
+  line-height: var(--utrecht-badge-line-height);
   padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
   padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
   padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
   text-decoration: none;
   /* no inheritance */
-}
-
-.utrecht-badge-status {
   letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-status-text-transform, inherit);
 }
@@ -44,6 +47,11 @@
   color: var(--utrecht-feedback-safe-fill-color, white);
 }
 
+.utrecht-badge-status--neutral {
+  background-color: var(--utrecht-feedback-neutral-fill-background-color, black);
+  color: var(--utrecht-feedback-neutral-fill-color, white);
+}
+
 .utrecht-badge-status--valid {
   background-color: var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, red));
   color: var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white));
@@ -72,4 +80,12 @@
 .utrecht-badge-status--inactive {
   background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));
   color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
 }

package/dist/collection/badge-status/{stencil.js → web-component/index.stencil.js}

@@ -2,19 +2,19 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import { Component, Prop, h } from "@stencil/core";
+import { Component, h, Prop } from '@stencil/core';
 export class BadgeStatus {
   render() {
-    return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status}` },
+    return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status || 'neutral'}` },
       h("slot", null)));
   }
   static get is() { return "utrecht-badge-status"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "status": {

package/dist/collection/badge-status/web-component/template.js

@@ -0,0 +1,4 @@
+export const BadgeStatus = ({ status = '', textContent = '' }) =>
+  status
+    ? `<utrecht-badge-status status="${status}">${textContent}</utrecht-badge-status>`
+    : `<utrecht-badge-status>${textContent}</utrecht-badge-status>`;

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

@@ -0,0 +1,24 @@
+/**
+ * @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

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

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

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const exampleItems = [
+  { href: 'https://example.com/', title: 'Home', focus: true },
+  { href: 'https://example.com/a/', title: 'Wonen en leven' },
+  { href: 'https://example.com/a/b/', title: 'Afval' },
+  { href: 'https://example.com/a/b/c/', title: "Kliko's", current: true },
+];
+
+export const Breadcrumb = ({ items, microdata, variant }) => `<nav class="${clsx(
+  'utrecht-breadcrumb',
+  variant === 'arrows' && 'utrecht-breadcrumb--arrows',
+)}">
+  <ol class="utrecht-breadcrumb__list"${
+    microdata ? ' itemscope itemtype="https://schema.org/BreadcrumbList"' : ''
+  }>${items
+  .map(
+    ({ href, title, current, focus }, index) => `
+    <li class="utrecht-breadcrumb__item"${
+      microdata ? ' itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"' : ''
+    }>
+      <a class="${clsx(
+        'utrecht-breadcrumb__link',
+        focus && 'utrecht-breadcrumb__link--focus',
+        'utrecht-link',
+        current && 'utrecht-link--current',
+        focus && 'utrecht-link--focus',
+      )}" href="${href}"${current ? ' aria-current="location"' : ''}${microdata ? ' itemprop="item"' : ''}>
+      <span class="utrecht-breadcrumb__text"${microdata ? ' itemprop="name"' : ''}>${title}</span>
+      ${microdata ? `<meta itemprop="position" content="${index + 1}" />` : ''}
+    </a>
+      </li>`,
+  )
+  .join('\n')}
+  </ol>
+</nav>`;