@utrecht/web-component-library-stencil 1.0.0-alpha.82 → 1.0.0-alpha.86

package/dist/collection/mapcontrolbutton/bem.js

@@ -0,0 +1,25 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  disabled: false,
+  focus: false,
+  hover: false,
+  icon: null,
+  label: '',
+};
+
+export const MapControlButton = ({ disabled = false, focus = false, hover = false, label = '', icon = null }) =>
+  `<button type="button" class="${clsx('utrecht-mapcontrolbutton', {
+    'utrecht-mapcontrolbutton--hover': hover,
+    'utrecht-mapcontrolbutton--focus': focus,
+    'utrecht-mapcontrolbutton--disabled': disabled,
+  })}"${disabled ? ' aria-disabled="true"' : ''}>
+    ${icon ? `<${icon} class="utrecht-mapcontrolbutton__icon"></${icon}>` : ''}
+    ${label ? `<span class="utrecht-mapcontrolbutton__label">${label}</span>` : ''}
+  </button>`;

package/dist/collection/menulijst/bem.js

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+
+export const Menulijst = ({ href = 'https://example.com/' }) =>
+  `<ul class="utrecht-menulijst">
+        <li class="utrecht-menulijst__item utrecht-menulijst__item--active">
+          <a class="utrecht-menulijst__link" href="${href}">Menu item label #1</a>
+        </li>
+        <li class="utrecht-menulijst__item">
+          <a class="utrecht-menulijst__link" href="${href}">Menu item label #2</a>
+        </li>
+         <li class="utrecht-menulijst__item">
+          <a class="utrecht-menulijst__link" href="${href}">Menu item label #3</a>
+        </li>
+    </ul>
+`;

package/dist/collection/nav-top/bem.js

@@ -0,0 +1,23 @@
+/**
+ * @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 }) => `
+      <li class="utrecht-topnav__item">
+        <a class="${clsx(
+          'utrecht-topnav__link',
+          current && 'utrecht-topnav__link--current',
+          focus && 'utrecht-topnav__link--focus',
+        )}" href="${href}">${title}</a>
+        </li>`,
+    )}
+    </ul>
+  </nav>
+</div>
+`;

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

@@ -0,0 +1,43 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+
+import clsx from 'clsx';
+
+export const SideNav = ({ items }) => `<nav class="utrecht-sidenav">
+    <ul class="utrecht-sidenav__list">${items
+      .map(
+        ({ href, title, current, focus, children, sibling, haschildren }) => `<li class="${clsx(
+          'utrecht-sidenav__item',
+          sibling && 'utrecht-sidenav__item--sibling',
+          haschildren && 'utrecht-sidenav__item--has-children',
+        )}">
+          <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}</a><span></span>
+          ${
+            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--child--current',
+                        focus && 'utrecht-sidenav__link--focus',
+                      )}" href="${href}">${title}</a></li>`,
+                  )
+                  .join('')}
+          </ul><span></span>`
+              : ''
+          }
+        </li>`,
+      )
+      .join('')}
+    </ul>
+  </nav>
+`;

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

@@ -0,0 +1,25 @@
+/**
+ * @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 }) => `
+      <li class="utrecht-topnav__item">
+        <a class="${clsx(
+          'utrecht-topnav__link',
+          current && 'utrecht-topnav__link--current',
+          focus && 'utrecht-topnav__link--focus',
+        )}" href="${href}">${title}</a>
+        </li>`,
+      )
+      .join('')}
+    </ul>
+  </nav>
+</div>
+`;

package/dist/collection/ordered-list/bem.js

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const OrderedList = ({ distanced = false }) =>
+  `<ol class="${clsx('utrecht-ordered-list', distanced && 'utrecht-ordered-list--distanced')}">
+  <li class="utrecht-ordered-list__item">Lorem</li>
+  <li class="utrecht-ordered-list__item">Ipsum</li>
+  <li class="utrecht-ordered-list__item">Dolor</li>
+</ol>`;

package/dist/collection/page-footer/bem.js

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const PageFooter = ({ innerHTML = '' }) => `<footer class="utrecht-page-footer">
+${innerHTML}</header>`;

package/dist/collection/pagination/bem.js

@@ -0,0 +1,54 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  distanced: false,
+};
+
+export const LinkTemplate = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) =>
+  `<${disabled ? 'span' : 'a'} href="${href}" class="${clsx(
+    'utrecht-pagination__relative-link',
+    disabled && 'utrecht-pagination__relative-link--disabled',
+    rel === 'next' && 'utrecht-pagination__relative-link--next',
+    rel === 'prev' && 'utrecht-pagination__relative-link--prev',
+  )}"${rel ? ` rel="${rel}"` : ''}${title ? ` aria-label="${title}"` : ''}>${textContent}</${disabled ? 'span' : 'a'}>`;
+
+export const ItemTemplate = ({ current = false, href = '', rel = null, textContent = '' }) =>
+  `<a class="${clsx(
+    'utrecht-pagination__page-link',
+    current && 'utrecht-pagination__page-link--current',
+  )}" href="${href}"${current ? ' aria-current="true"' : ''}${rel ? ` rel="${rel}"` : ''}>${textContent}</a>`;
+
+export const Pagination = ({ currentIndex = -1, distanced = false, links = [], next = null, prev = null }) =>
+  `<nav class="${clsx(
+    'utrecht-pagination',
+    distanced && 'utrecht-pagination--distanced',
+  )}"><span class="utrecht-pagination__before">${
+    prev ? LinkTemplate({ ...prev, rel: 'prev', textContent: 'Vorige' }) : ''
+  }</span><span role="group" class="utrecht-pagination__pages">${links
+    .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
+    .map((link, arrayIndex) => {
+      const index = typeof link.index === 'number' ? link.index : arrayIndex;
+      return {
+        index,
+        current: typeof currentIndex === 'number' && index === currentIndex,
+        rel:
+          typeof currentIndex === 'number'
+            ? index === currentIndex + 1
+              ? 'next'
+              : index === currentIndex - 1
+              ? 'prev'
+              : null
+            : null,
+        textContent: link.index || index,
+        ...link,
+      };
+    })
+    .map((link) => ItemTemplate(link))
+    .join('')}</span><span class="utrecht-pagination__before">${
+    next ? LinkTemplate({ ...next, rel: 'next', textContent: 'Volgende' }) : ''
+  }</span></nav>`;

package/dist/collection/paragraph/bem.js

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  lead: false,
+  textContent: '',
+};
+
+export const Paragraph = ({ textContent = '', lead = false }) =>
+  `<p class="${clsx('utrecht-paragraph', { 'utrecht-paragraph--lead': lead })}">${textContent}</p>`;

package/dist/collection/pre-heading/bem.js

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

package/dist/collection/search-bar/bem.js

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const SearchBar = ({
+  buttonLabel,
+  formLabel,
+  inputLabel,
+  value,
+}) => `<form class="utrecht-search-bar" role="search" aria-label="${formLabel}">
+  <input type="search" class="utrecht-search-bar__input utrecht-textbox utrecht-textbox utrecht-textbox--html-input" name="q" autocomplete="off" spellcheck="false" value="${value}" aria-label="${inputLabel}">
+  <button type="submit" value="Zoeken" class="utrecht-search-bar__button utrecht-button">${buttonLabel}</button>
+</form>`;

package/dist/collection/select/bem.js

@@ -0,0 +1,38 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  disabled: false,
+  focus: false,
+  invalid: false,
+  options: [],
+  required: false,
+};
+
+export const Select = ({ disabled = false, focus = false, invalid = false, options = [], required = false }) =>
+  `<select${invalid ? ' aria-invalid="true"' : ''}${disabled ? ' disabled' : ''}${
+    required ? ' required' : ''
+  } class="${clsx('utrecht-select', {
+    'utrecht-select--disabled': disabled,
+    'utrecht-select--focus': focus,
+    'utrecht-select--invalid': invalid,
+    'utrecht-select--required': required,
+  })}">
+  ${options
+    .map(
+      ({ label, selected, value }) =>
+        `<option${selected ? ' selected' : ''}${value ? ` value="${value}"` : ''}>${label}</option>`,
+    )
+    .join('\n  ')}
+</select>`;
+
+export const exampleOptions = [
+  { value: '1', label: 'Option #1' },
+  { value: '2', label: 'Option #2', selected: true },
+  { value: '3', label: 'Option #3' },
+];

package/dist/collection/separator/bem.js

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  distanced: false,
+};
+
+export const Separator = ({ distanced = false }) =>
+  `<div role="separator" aria-orientation="horizontal" class="${clsx(
+    'utrecht-separator',
+    distanced && 'utrecht-separator--distanced',
+  )}"></div>`;

package/dist/collection/textbox/bem.js

@@ -0,0 +1,32 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  disabled: false,
+  focus: false,
+  invalid: false,
+  readOnly: false,
+  required: false,
+  value: '',
+};
+
+export const TextBox = ({
+  disabled = false,
+  focus = false,
+  invalid = false,
+  readOnly = false,
+  required = false,
+  value = '',
+}) =>
+  `<input class="${clsx(
+    'utrecht-textbox',
+    disabled && 'utrecht-textbox--disabled',
+    focus && 'utrecht-textbox--focus',
+    invalid && 'utrecht-textbox--invalid',
+    readOnly && 'utrecht-textbox--readonly',
+    required && 'utrecht-textbox--required',
+  )}" value="${value}">`;

package/dist/collection/unordered-list/bem.js

@@ -0,0 +1,25 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const UnorderedList = ({ distanced = false }) =>
+  `<ul class="${clsx('utrecht-unordered-list', distanced && 'utrecht-unordered-list--distanced')}">
+  <li class="utrecht-unordered-list__item">Lorem</li>
+  <li class="utrecht-unordered-list__item">Ipsum</li>
+  <li class="utrecht-unordered-list__item">Dolor</li>
+</ul>`;
+
+export const UnorderedListNested = ({ distanced = false }) =>
+  `<ul class="${clsx('utrecht-unordered-list', distanced && 'utrecht-unordered-list--distanced')}">
+  <li class="utrecht-unordered-list__item">Lorem</li>
+  <li class="utrecht-unordered-list__item">Ipsum
+    <ul class="utrecht-unordered-list utrecht-unordered-list--nested">
+      <li class="utrecht-unordered-list__item">Lorem</li>
+      <li class="utrecht-unordered-list__item">Ipsum</li>
+    </ul>
+  </li>
+  <li class="utrecht-unordered-list__item">Dolor</li>
+</ul>`;

package/dist/custom-elements/index.d.ts

@@ -134,12 +134,30 @@ export const UtrechtHtmlContent: {
   new (): UtrechtHtmlContent;
 };
 
+interface UtrechtIconArrow extends Components.UtrechtIconArrow, HTMLElement {}
+export const UtrechtIconArrow: {
+  prototype: UtrechtIconArrow;
+  new (): UtrechtIconArrow;
+};
+
+interface UtrechtIconCross extends Components.UtrechtIconCross, HTMLElement {}
+export const UtrechtIconCross: {
+  prototype: UtrechtIconCross;
+  new (): UtrechtIconCross;
+};
+
 interface UtrechtIconFacebook extends Components.UtrechtIconFacebook, HTMLElement {}
 export const UtrechtIconFacebook: {
   prototype: UtrechtIconFacebook;
   new (): UtrechtIconFacebook;
 };
 
+interface UtrechtIconFilter extends Components.UtrechtIconFilter, HTMLElement {}
+export const UtrechtIconFilter: {
+  prototype: UtrechtIconFilter;
+  new (): UtrechtIconFilter;
+};
+
 interface UtrechtIconInstagram extends Components.UtrechtIconInstagram, HTMLElement {}
 export const UtrechtIconInstagram: {
   prototype: UtrechtIconInstagram;
@@ -152,6 +170,18 @@ export const UtrechtIconLinkedin: {
   new (): UtrechtIconLinkedin;
 };
 
+interface UtrechtIconList extends Components.UtrechtIconList, HTMLElement {}
+export const UtrechtIconList: {
+  prototype: UtrechtIconList;
+  new (): UtrechtIconList;
+};
+
+interface UtrechtIconLoupe extends Components.UtrechtIconLoupe, HTMLElement {}
+export const UtrechtIconLoupe: {
+  prototype: UtrechtIconLoupe;
+  new (): UtrechtIconLoupe;
+};
+
 interface UtrechtIconTwitter extends Components.UtrechtIconTwitter, HTMLElement {}
 export const UtrechtIconTwitter: {
   prototype: UtrechtIconTwitter;
@@ -164,6 +194,18 @@ export const UtrechtIconWhatsapp: {
   new (): UtrechtIconWhatsapp;
 };
 
+interface UtrechtIconZoomin extends Components.UtrechtIconZoomin, HTMLElement {}
+export const UtrechtIconZoomin: {
+  prototype: UtrechtIconZoomin;
+  new (): UtrechtIconZoomin;
+};
+
+interface UtrechtIconZoomout extends Components.UtrechtIconZoomout, HTMLElement {}
+export const UtrechtIconZoomout: {
+  prototype: UtrechtIconZoomout;
+  new (): UtrechtIconZoomout;
+};
+
 interface UtrechtLogo extends Components.UtrechtLogo, HTMLElement {}
 export const UtrechtLogo: {
   prototype: UtrechtLogo;