@utrecht/web-component-library-stencil 1.0.0-alpha.19 → 1.0.0-alpha.192

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

@@ -1,248 +1,185 @@
 /**
  * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 A Herring
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-navhtml {
-  font-family: var(--utrecht-font-family-sans-serif);
-}
-
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-sidenav {
-  padding-block-start: 0;
-  padding-block-end: 0;
-  margin-block-start: 0;
-  margin-block-end: 0;
-  width: 13rem;
-  border-block-start: 1px solid var(--utrecht-color-grey-80);
+  --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 {
-  padding-block-start: 0;
-  padding-block-end: 0;
-  margin-block-start: 0.2rem;
   margin-block-end: 0;
+  margin-block-start: 0.2rem;
+  padding-block-end: 0;
+  padding-block-start: 0;
   padding-inline-start: 0;
 }
 
-.utrecht-sidenav__list ul {
-  padding-block-start: 0;
-  padding-block-end: 0;
-  margin-block-end: 0;
-  padding-inline-start: 1.2rem;
+.utrecht-sidenav__list--child {
+  margin-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 1.4rem;
 }
 
-.utrecht-sidenav__item,
-.utrecht-sidenav__sibling__item {
+.utrecht-sidenav__item {
   list-style: none;
-  position: relative;
   margin-inline-start: 0;
+  position: relative;
 }
 
-.utrecht-sidenav__item:last-child {
-  border-block-end: none;
-}
-
-/*draw the li item box bottom line*/
-.utrecht-sidenav__item span:not(.utrecht-sidenav__item:last-child span, .utrecht-sidenav__item--has-children span:first-of-type) {
-  display: block;
-  border-block-end: 1px solid var(--utrecht-color-grey-80);
-  margin-inline-start: var(--utrecht-space-inline-sm);
+.utrecht-sidenav__item--current {
+  color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
 }
 
-/*Remove bottom padding form first item in list with children*/
-.utrecht-sidenav__item .utrecht-sidenav__link--has-children {
-  padding-block-end: 0;
+.utrecht-sidenav__item--last {
+  border-block-end: none;
 }
 
-.utrecht-sidenav__child__item {
-  list-style: 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,
-.utrecht-sidenav__link--sibling {
-  display: block;
+.utrecht-sidenav__link {
   color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
-  padding-block-start: var(--utrecht-space-block-xs);
+  display: block;
+  margin-inline-start: 0;
   padding-block-end: var(--utrecht-space-block-xs);
-  padding-inline-start: var(--utrecht-space-inline-lg);
+  padding-block-start: var(--utrecht-space-block-xs);
   padding-inline-end: var(--utrecht-space-inline-3xs);
-  margin-inline-start: 0;
-  text-decoration: none;
-}
-
-/*How to select the parent of the nestsed UL to remove the bottom padding of te link item*/
-.utrecht-sidenav__link--child,
-.utrecht-sidenav__link--child--current {
-  display: block;
-  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
-  text-decoration: none;
-  padding-block-start: var(--utrecht-space-block-2xs);
-  padding-block-end: var(--utrecht-space-block-2xs);
   padding-inline-start: var(--utrecht-space-inline-lg);
-  padding-inline-end: var(--utrecht-space-inline-3xs);
-  margin-block-start: 0;
-  margin-block-end: 0;
-}
-
-/*Dot for link with siblings */
-.utrecht-sidenav__link::before,
-.utrecht-sidenav__link--sibling::before,
-.utrecht-sidenav__item:last-child .utrecht-sidenav__link--current::before {
-  overflow: hidden;
-  position: absolute;
-  top: 20px;
-  /*Hard value?*/
-  transform: translateY(-50%) translateX(-2.5ch);
-  content: "";
-  width: 8px;
-  height: 8px;
-  border-radius: 100%;
-  z-index: 10;
-  box-shadow: 0 0 2px 2px #fff;
-  /*Make var*/
-}
-
-.utrecht-sidenav__link::before,
-.utrecht-sidenav__link--sibling::before {
-  background-color: var(--utrecht-sidenav-item-marker-color);
-}
-
-.utrecht-sidenav__link::before,
-.utrecht-sidenav__link--sibling::before {
-  left: 26px;
-}
-
-/*Little fix to move the dot to the right*/
-.utrecht-sidenav__link--current::before {
-  left: 27px;
-}
-
-/* Hover layout for mousover on sidenav__link */
-.utrecht-sidenav__link:hover::before,
-.utrecht-sidenav__link--sibling:hover::before {
-  background-color: var(--utrecht-sidenav-link-hover-color);
+  text-decoration: none;
 }
 
-.utrecht-sidenav__item a:hover {
+.utrecht-sidenav__link:hover {
   color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
   text-decoration: underline;
 }
 
-.utrecht-sidenav__item--current {
-  color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
+.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: 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__link::after,
-.utrecht-sidenav__item:last-child .utrecht-sidenav__link::after {
-  display: block;
+.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;
-  width: 3px;
-  background: var(--utrecht-sidenav-item-marker-color);
   position: absolute;
-  left: 3px;
-  top: -22px;
-  /*  min-height: 100%;
-  height: calc(100% + 2px);*/
-  bottom: 0;
+  top: calc(var(--utrecht-sidenav-marker-offset));
+  width: var(--utrecht-sidenav-connection-inline-size);
   z-index: 5;
 }
 
-/* Draw short metro connection lines on sidenav child link items */
-.utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,
-.utrecht-sidenav__link--current::after,
-.utrecht-sidenav__item--has-children a::after {
-  min-height: 38px;
-  height: calc(38px + 2px);
-}
-
-/* Remove first metro line in listing*/
-.utrecht-sidenav__item:first-child .utrecht-sidenav__link::after {
-  content: "";
+.utrecht-sidenav__connection--last,
+.utrecht-sidenav__connection--parent,
+.utrecht-sidenav__connection--sibling {
   display: none;
 }
 
-/* Make current link bold */
-.utrecht-sidenav__link--current,
-.utrecht-sidenav__link--child--current {
-  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-}
-
-.utrecht-sidenav__list--child {
-  margin-block-start: 0;
-  margin-block-end: 0;
-  padding-block-start: 0;
-  padding-block-end: 0;
-  padding-inline-start: 1.4rem;
-  padding-inline-end: 0;
-}
-
-.utrecht-sidenav__item--child {
-  list-style: none;
-  position: relative;
-  border: none;
-}
-
-/*No last border on child item*/
-.utrecht-sidenav__item--child:last-child {
-  border: 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__link--child::before,
-.utrecht-sidenav__link--child--current::before {
-  overflow: hidden;
-  position: absolute;
-  top: 16px;
+.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);
-  content: "";
   width: 4px;
-  height: 4px;
-  border-radius: 100%;
-  border: 2px solid var(--utrecht-sidenav-link-color);
-  z-index: 10;
 }
 
-.utrecht-sidenav__link--child::before {
-  background-color: transparent;
+/* 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);
 }
 
-/* Make current marker dots bold */
-.utrecht-sidenav__link--current::before,
-.utrecht-sidenav__link--child--current::before {
+.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__link--child:hover::before {
+.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);
 }
 
-/* remove :after lines in child and sibling links */
-.utrecht-sidenav__item--child:first-child .utrecht-sidenav__link--child--current::after,
-.utrecht-sidenav__link--child::after,
-.utrecht-sidenav__item .utrecht-sidenav__item--child .utrecht-sidenav__link--child::after,
-.utrecht-sidenav__item .utrecht-sidenav__link--sibling::after,
-.utrecht-sidenav__item--sibling:last-child .utrecht-sidenav__link--sibling::after {
+.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
   display: none;
 }
 
-.utrecht-sidenav__link:focus,
-.utrecht-sidenav__link--focus {
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
-  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
+.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

@@ -1,14 +1,19 @@
-import { Component, Prop, h } from "@stencil/core";
-import clsx from "clsx";
+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 }) => (h("li", { key: href, class: clsx("utrecht-sidenav__item", sibling && "utrecht-sidenav__item--sibling", haschildren && "utrecht-sidenav__item--has-children") },
-        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--has-children"), href: href }, title),
-        h("span", null),
+      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 utrecht-sidenav__link--child--current", focus && "utrecht-sidenav__link--focus"), href: href }, title)))))) : ("")))))));
+          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"; }

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>
+`;