@utrecht/web-component-library-stencil 1.0.0-alpha.2 → 1.0.0-alpha.201

package/dist/collection/navigatie sidenav/bem.css

@@ -0,0 +1,185 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-sidenav {
+  --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
+  --utrecht-sidenav-connection-inline-size: 2px;
+  --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
+  --utrecht-sidenav-marker-offset: 26px;
+  --utrecht-sidenav-connection-block-size: 100%;
+  --utrecht-sidenav-marker-height: 8px;
+  --utrecht-sidenav-marker-outline-width: 2px;
+  border-block-end: 1px solid var(--utrecht-color-grey-80);
+  border-block-start: 1px solid var(--utrecht-color-grey-80);
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  width: 19rem;
+}
+
+.utrecht-sidenav__list {
+  margin-block-end: 0;
+  margin-block-start: 0.2rem;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-start: 0;
+}
+
+.utrecht-sidenav__list--child {
+  margin-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 1.4rem;
+}
+
+.utrecht-sidenav__item {
+  list-style: none;
+  margin-inline-start: 0;
+  position: relative;
+}
+
+.utrecht-sidenav__item--current {
+  color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
+}
+
+.utrecht-sidenav__item--last {
+  border-block-end: none;
+}
+
+/* draw the li item box bottom line */
+.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
+  /* .utrecht-sidenav__item--parent span */
+  border-block-end: 1px solid var(--utrecht-color-grey-80);
+  display: block;
+  margin-inline-start: var(--utrecht-space-inline-lg);
+}
+
+.utrecht-sidenav__link {
+  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
+  display: block;
+  margin-inline-start: 0;
+  padding-block-end: var(--utrecht-space-block-xs);
+  padding-block-start: var(--utrecht-space-block-xs);
+  padding-inline-end: var(--utrecht-space-inline-3xs);
+  padding-inline-start: var(--utrecht-space-inline-lg);
+  text-decoration: none;
+}
+
+.utrecht-sidenav__link:hover {
+  color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
+  text-decoration: underline;
+}
+
+.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
+  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);
+}
+
+/* Remove bottom padding form first item in list with children */
+.utrecht-sidenav__link--parent {
+  padding-block-end: 0;
+}
+
+/* Draw metro connection lines on sidenav link items */
+.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--parent):not(.utrecht-sidenav__link--child)::after {
+  background: var(--utrecht-sidenav-connection-color);
+  bottom: 0;
+  content: "";
+  display: block;
+  height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
+  left: 3px;
+  overflow: hidden;
+  position: absolute;
+  top: calc(var(--utrecht-sidenav-marker-offset));
+  width: var(--utrecht-sidenav-connection-inline-size);
+  z-index: 5;
+}
+
+.utrecht-sidenav__connection--last,
+.utrecht-sidenav__connection--parent,
+.utrecht-sidenav__connection--sibling {
+  display: none;
+}
+
+/* Dot for link with siblings */
+/* Little fix to move the dot to the right */
+.utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
+  background-color: var(--utrecht-sidenav-item-marker-color);
+  border-radius: 100%;
+  content: "";
+  height: var(--utrecht-sidenav-marker-height);
+  left: var(--utrecht-sidenav-marker-offset);
+  overflow: hidden;
+  position: absolute;
+  top: 20px;
+  /* Hard value? */
+  transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
+  width: 8px;
+  z-index: 10;
+}
+
+/* Add dot bullets on child links */
+.utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
+  background-color: transparent;
+  border: 2px solid var(--utrecht-sidenav-link-color);
+  height: 4px;
+  left: 1.2rem;
+  top: 16px;
+  transform: translateY(-50%) translateX(-19.5px);
+  width: 4px;
+}
+
+/* selector must override .utrecht-sidenav__marker--child */
+.utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
+.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
+  background-color: var(--utrecht-sidenav-marker-current-color);
+}
+
+.utrecht-sidenav__link--child,
+.utrecht-sidenav__link--current-child {
+  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: var(--utrecht-space-block-2xs);
+  padding-block-start: var(--utrecht-space-block-2xs);
+  padding-inline-end: var(--utrecht-space-inline-3xs);
+  padding-inline-start: var(--utrecht-space-inline-lg);
+  text-decoration: none;
+}
+
+.utrecht-sidenav__link--current,
+.utrecht-sidenav__link--current-child {
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+}
+
+/* Hover layout for mousover on sidenav__link */
+.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before {
+  background-color: var(--utrecht-sidenav-link-hover-color);
+}
+
+/* Hover layout for mousover on child__link */
+.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before {
+  background-color: var(--utrecht-sidenav-link-hover-color);
+  border: 2px solid var(--utrecht-sidenav-link-hover-color);
+}
+
+.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
+  display: none;
+}
+
+.utrecht-sidenav__link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}

package/dist/collection/navigatie sidenav/bem.js

@@ -0,0 +1,69 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Robbert Broersma
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ */
+
+import clsx from 'clsx';
+
+export const Sidenav = ({ items, pseudoElements }) => `<nav class="${clsx(
+  'utrecht-sidenav',
+  pseudoElements && 'utrecht-sidenav--pseudo-elements',
+)}">
+    <ul class="utrecht-sidenav__list">${items
+      .map(
+        ({ href, title, current, focus, children, sibling, haschildren }, index, array) => `<li class="${clsx(
+          'utrecht-sidenav__item',
+          index + 1 === array.length && 'utrecht-sidenav__item--last',
+          sibling && 'utrecht-sidenav__item--sibling',
+          haschildren && 'utrecht-sidenav__item--parent',
+        )}">
+          <a class="${clsx(
+            'utrecht-sidenav__link',
+            current && 'utrecht-sidenav__link--current',
+            focus && 'utrecht-sidenav__link--focus',
+            sibling && 'utrecht-sidenav__link--sibling',
+            haschildren && 'utrecht-sidenav__link--parent',
+          )}" href="${href}">${
+          pseudoElements
+            ? ''
+            : `<div class="${clsx(
+                'utrecht-sidenav__marker',
+                current && 'utrecht-sidenav__marker--current',
+              )}"></div><div class="${clsx(
+                'utrecht-sidenav__connection',
+                haschildren && 'utrecht-sidenav__connection--parent',
+                sibling && 'utrecht-sidenav__connection--sibling',
+                index + 1 === array.length && 'utrecht-sidenav__connection--last',
+              )}"></div>`
+        }${title}</a>
+          ${
+            children
+              ? `<ul class="utrecht-sidenav__list utrecht-sidenav__list--child">${children
+                  .map(
+                    ({ href, title, current, focus }) =>
+                      `<li class="utrecht-sidenav__item utrecht-sidenav__item--child"><a class="${clsx(
+                        'utrecht-sidenav__link utrecht-sidenav__link--child',
+                        current && 'utrecht-sidenav__link--current utrecht-sidenav__link--current-child',
+                        focus && 'utrecht-sidenav__link--focus',
+                      )}" href="${href}">${
+                        pseudoElements
+                          ? ''
+                          : `<div class="${clsx(
+                              'utrecht-sidenav__marker',
+                              'utrecht-sidenav__marker--child',
+                              current && 'utrecht-sidenav__marker--current',
+                            )}"></div>`
+                      }${title}</a></li>`,
+                  )
+                  .join('')}
+          </ul>`
+              : ''
+          }
+          <div class="utrecht-sidenav__item-separator"></div>
+        </li>`,
+      )
+      .join('')}
+    </ul>
+  </nav>
+`;

package/dist/collection/navigatie sidenav/stencil.js

@@ -0,0 +1,45 @@
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class Sidenav {
+  render() {
+    const items = JSON.parse(this.json);
+    return (h("nav", { class: "utrecht-sidenav" },
+      h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (h("li", { key: href, class: clsx('utrecht-sidenav__item', index + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--parent') },
+        h("a", { class: clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--parent'), href: href },
+          h("div", { class: clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }),
+          h("div", { class: clsx('utrecht-sidenav__connection', haschildren && 'utrecht-sidenav__connection--parent', sibling && 'utrecht-sidenav__connection--sibling', index + 1 === array.length && 'utrecht-sidenav__connection--last') }),
+          title),
+        children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" },
+          h("a", { class: clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href },
+            h("div", { class: clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }),
+            title)))))) : (''),
+        h("div", { class: "utrecht-sidenav__item-separator" })))))));
+  }
+  static get is() { return "utrecht-sidenav"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["bem.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["bem.css"]
+  }; }
+  static get properties() { return {
+    "json": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "json",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/navigatie topnav/bem.js

@@ -0,0 +1,26 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+
+import clsx from 'clsx';
+
+export const TopNav = ({ items }) => `<div class="utrecht-navhtml">
+  <nav class="topnav">
+    <ul class="utrecht-topnav__list">${items
+      .map(
+        ({ href, title, current, focus, focusVisible }) => `
+      <li class="utrecht-topnav__item">
+        <a class="${clsx(
+          'utrecht-topnav__link',
+          current && 'utrecht-topnav__link--current',
+          focus && 'utrecht-topnav__link--focus',
+          focusVisible && 'utrecht-topnav__link--focus-visible',
+        )}" href="${href}">${title}</a>
+        </li>`,
+      )
+      .join('')}
+    </ul>
+  </nav>
+</div>
+`;