@utrecht/web-component-library-stencil 1.0.0-alpha.205 → 1.0.0-alpha.206

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

@@ -14,10 +14,10 @@ export class DigidButton {
   static get is() { return "utrecht-logo-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "type": {

package/dist/collection/logo-button/web-component/template.js

@@ -0,0 +1 @@
+export const DigidButton = () => `<utrecht-digid-button>Inloggen</utrecht-digid-button>`;

package/dist/collection/navigatie sidenav/{bem.css → web-component/index.css }

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.

package/dist/collection/navigatie sidenav/{stencil.js → web-component/index.stencil.js }

@@ -18,10 +18,10 @@ export class Sidenav {
   static get is() { return "utrecht-sidenav"; }
   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 {
     "json": {

package/dist/collection/navigatie sidenav/web-component/template.js

@@ -0,0 +1 @@
+export const Sidenav = ({ json }) => `<utrecht-sidenav json="${json.replace(/"/g, '&quot;')}"></utrecht-sidenav>`;

package/dist/collection/navigatie topnav/{bem.js → css/template.js }

@@ -5,7 +5,7 @@
 
 import clsx from 'clsx';
 
-export const TopNav = ({ items }) => `<div class="utrecht-navhtml">
+export const Topnav = ({ items }) => `<div class="utrecht-navhtml">
   <nav class="topnav">
     <ul class="utrecht-topnav__list">${items
       .map(

package/dist/collection/ordered-list/html/template.js

@@ -0,0 +1,17 @@
+export const OrderedList = () =>
+  `<section class="utrecht-html">
+  <ol>
+    <li>Lorem</li>
+    <li>Ipsum</li>
+    <li>Dolor</li>
+  </ol>
+</section>`;
+
+export const OrderedListArabic = () =>
+  `<section class="utrecht-html" lang="ar" dir="rtl">
+  <ol>
+    <li>واحد</li>
+    <li>إثنان</li>
+    <li>ثلاثة</li>
+  </ol>
+</section>`;

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

@@ -12,9 +12,9 @@ export class Page {
   static get is() { return "utrecht-page"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

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

@@ -0,0 +1,5 @@
+export const Page = ({ contentHTML = '', footerHTML = '', headerHTML = '' }) => `<utrecht-page>
+  <utrecht-page-header>${headerHTML}</utrecht-page-header>
+  <utrecht-page-content>${contentHTML}</utrecht-page-content>
+  <utrecht-page-footer>${footerHTML}</utrecht-page-footer>
+</utrecht-page>`;

package/dist/collection/page-content/{stencil.js → web-component/index.stencil.js}

@@ -12,9 +12,9 @@ export class Page {
   static get is() { return "utrecht-page-content"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/page-content/web-component/template.js

@@ -0,0 +1 @@
+export const PageContent = ({ innerHTML = '' }) => `<utrecht-page-content>${innerHTML}</utrecht-page-content>`;

package/dist/collection/page-footer/{stencil.js → web-component/index.stencil.js}

@@ -11,9 +11,9 @@ export class PageFooter {
   static get is() { return "utrecht-page-footer"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/page-footer/web-component/template.js

@@ -0,0 +1 @@
+export const PageFooter = ({ innerHTML = '' }) => `<utrecht-page-footer>${innerHTML}</utrecht-page-footer>`;

package/dist/collection/page-header/{stencil.js → web-component/stencil.js}

@@ -12,9 +12,9 @@ export class PageHeader {
   static get is() { return "utrecht-page-header"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/page-header/web-component/template.js

@@ -0,0 +1 @@
+export const PageHeader = ({ innerHTML = '' }) => `<utrecht-page-header>${innerHTML}</utrecht-page-header>`;

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

@@ -32,10 +32,10 @@ export class Pagination {
   static get is() { return "utrecht-pagination"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "links": {

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

@@ -0,0 +1,7 @@
+const attr = (name, value) => `${name}="${String(value).replace(/"/g, '"')}"`;
+
+export const Pagination = ({ currentIndex = -1, links = [], next = null, prev = null }) =>
+  `<utrecht-pagination ${attr('links', JSON.stringify(links))} ${attr('next', JSON.stringify(next))} ${attr(
+    'prev',
+    JSON.stringify(prev),
+  )} ${attr('current-index', currentIndex)}></utrecht-pagination>`;

package/dist/collection/select/{bem.js → css/template.js}

@@ -6,11 +6,17 @@
 
 import clsx from 'clsx';
 
+const exampleOptions = [
+  { value: '1', label: 'Option #1' },
+  { value: '2', label: 'Option #2', selected: true },
+  { value: '3', label: 'Option #3' },
+];
+
 export const defaultArgs = {
   disabled: false,
   focus: false,
   invalid: false,
-  options: [],
+  options: exampleOptions,
   required: false,
 };
 
@@ -31,9 +37,3 @@ export const Select = ({ disabled = false, focus = false, invalid = false, optio
     )
     .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/select/html/template.js

@@ -0,0 +1,26 @@
+const exampleOptions = [
+  { value: '1', label: 'Option #1' },
+  { value: '2', label: 'Option #2', selected: true },
+  { value: '3', label: 'Option #3' },
+];
+
+export const defaultArgs = {
+  disabled: false,
+  invalid: false,
+  required: false,
+  options: exampleOptions,
+};
+
+export const Template = ({ disabled = false, invalid = false, options = [], required = false }) =>
+  `<section class="utrecht-html">
+  <select${invalid ? ' aria-invalid="true"' : ''}${disabled ? ' disabled' : ''}${
+    required ? ' required' : ''
+  } class="utrecht-select">
+    ${options
+      .map(
+        ({ label, selected, value }) =>
+          `<option${selected ? ' selected' : ''}${value ? ` value="${value}"` : ''}>${label}</option>`,
+      )
+      .join('\n    ')}
+  </select>
+</section>`;

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

@@ -0,0 +1,4 @@
+export const Separator = () =>
+  `<section class="utrecht-html">
+  <hr>
+</section>`;

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

@@ -6,9 +6,9 @@ export class Separator {
   static get is() { return "utrecht-separator"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

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

@@ -0,0 +1 @@
+export const Separator = () => `<utrecht-separator></utrecht-separator>`;

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

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const Surface = ({ innerHTML = '' }) => `<div class="${clsx('utrecht-surface')}">${innerHTML}</div>`;

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

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  alternateRowColor: false,
+};
+
+// Source of table:
+// https://www.utrecht.nl/wonen-en-leven/parkeren/ervaart-u-parkeeroverlast/spinozaplantsoen-invoeren-betaald-parkeren/
+
+export const Table = ({ alternateRowColor = false }) =>
+  `<div class="utrecht-html">
+<table lang="nl" summary="Overzicht van de stemmen voor en tegen het betaald parkeren." class="${clsx(
+    alternateRowColor && 'alternate-row-color',
+  )}">
+  <caption>Uitslag internetpeiling 8 juni tot en met 28 juni</caption>
+  <thead>
+    <tr>
+      <th scope="col">Gebied</th>
+      <th scope="col" class="numeric">Voor</th>
+      <th scope="col" class="numeric">Tegen</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Locatie A</td>
+      <td class="numeric">53</td>
+      <td class="numeric">113</td>
+    </tr>
+    <tr>
+      <td>Locatie B</td>
+      <td class="numeric">58</td>
+      <td class="numeric">42</td>
+    </tr>
+    <tr>
+      <td>Locatie C</td>
+      <td class="numeric">87</td>
+      <td class="numeric">16</td>
+    </tr>
+  </tbody>
+</table>
+  </div>`;

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/{stencil.js → web-component/index.stencil.js}

@@ -17,9 +17,9 @@ export class ContactCardTemplate {
   static get is() { return "utrecht-contact-card-template"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["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/{bem.js → css/template.js}

@@ -11,7 +11,7 @@ export const defaultArgs = {
   textContent: '',
 };
 
-export const TextArea = ({
+export const Textarea = ({
   disabled = false,
   focus = false,
   hover = false,

package/dist/collection/textarea/{html.js → html/template.js}

@@ -7,7 +7,7 @@ export const defaultArgs = {
   textContent: '',
 };
 
-export const TextArea = ({
+export const Textarea = ({
   disabled = false,
   invalid = false,
   placeholder = '',

package/dist/collection/textbox/{bem.js → css/template.js}

@@ -15,7 +15,7 @@ export const defaultArgs = {
   value: '',
 };
 
-export const TextBox = ({
+export const Textbox = ({
   disabled = false,
   focus = false,
   invalid = false,

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

@@ -0,0 +1,36 @@
+export const defaultArgs = {
+  autoComplete: null,
+  disabled: false,
+  invalid: false,
+  min: '',
+  max: '',
+  pattern: '',
+  placeholder: '',
+  readOnly: false,
+  required: false,
+  type: 'text',
+  value: 'The Quick Brown Fox Jumps Over The Lazy Dog',
+};
+
+export const Textbox = ({
+  autoComplete,
+  disabled,
+  invalid,
+  min,
+  max,
+  pattern,
+  placeholder,
+  readOnly,
+  required,
+  type,
+  value = '',
+}) =>
+  `<div class="utrecht-html">
+  <input${type ? ` type="${type}"` : ''}${invalid ? ' aria-invalid="true"' : ''}${disabled ? ' disabled' : ''}${
+    min !== '' ? ` min="${min}"` : ''
+  }${max !== '' ? ` max="${max}"` : ''}${pattern ? ` pattern="${pattern}"` : ''}${
+    placeholder ? ` placeholder="${placeholder}"` : ''
+  }${required ? ' required' : ''}${readOnly ? ' readonly' : ''} value="${value}"${
+    autoComplete ? ` autocomplete="${autoComplete}"` : ''
+  }>
+</div>`;

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

@@ -28,10 +28,10 @@ export class Textbox {
   static get is() { return "utrecht-textbox"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "autoComplete": {

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

@@ -0,0 +1,20 @@
+export const Textbox = ({
+  autoComplete = '',
+  disabled = false,
+  invalid = false,
+  min = '',
+  max = '',
+  pattern = '',
+  placeholder = '',
+  readOnly = false,
+  required = false,
+  type = '',
+  value = '',
+}) =>
+  `<utrecht-textbox${autoComplete ? ` autocomplete="${autoComplete}"` : ''}${disabled ? ' disabled="true"' : ''}${
+    invalid ? ' invalid="true"' : ''
+  }${min !== '' ? ` min="${min}"` : ''}${max !== '' ? ` max="${max}"` : ''}${pattern ? ` pattern="${pattern}"` : ''}${
+    placeholder ? ` placeholder="${placeholder}"` : ''
+  }${readOnly ? ' readonly="true"' : ''}${required ? ' required="true"' : ''}${value ? ` value="${value}"` : ''}${
+    type ? ` type="${type}"` : ''
+  }></utrecht-textbox>`;

package/dist/collection/toptask-nav/css/template.js

@@ -0,0 +1,50 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+import { ToptaskLink } from '../../toptask-link/css/template';
+
+export const defaultArgs = {
+  links: [],
+  grid: false,
+};
+
+export const exampleLinks = [
+  {
+    href: '#',
+    icon: 'utrecht-icon-rijbewijs',
+    textContent: 'Paspoort of ID-kaart aanvragen',
+  },
+  {
+    href: '#',
+    icon: 'utrecht-icon-melding',
+    textContent: 'Melding/klacht openbare ruimte doorgeven',
+  },
+  {
+    href: '#',
+    icon: 'utrecht-icon-verhuizen',
+    textContent: 'Verhuizing doorgeven',
+  },
+  {
+    href: '#',
+    textContent: 'Werken bij de gemeente',
+  },
+  {
+    href: '#',
+    textContent: 'Parkeren: kentekenwijziging doorgeven',
+  },
+  {
+    href: '#',
+    icon: 'utrecht-icon-afval',
+    textContent: 'Afval',
+  },
+];
+
+export const ToptaskNav = ({ links, grid = false }) => `<div class="${clsx('utrecht-toptask-nav', {
+  'utrecht-toptask-nav--grid': grid,
+})}">
+  ${links.map(ToptaskLink).join('\n')}
+</div>`;

package/dist/collection/unordered-list/html/template.js

@@ -0,0 +1,22 @@
+export const UnorderedList = () =>
+  `<section class="utrecht-html">
+  <ul>
+    <li>Lorem</li>
+    <li>Ipsum</li>
+    <li>Dolor</li>
+  </ul>
+</section>`;
+
+export const NestedUnorderedList = () =>
+  `<section class="utrecht-html">
+  <ul>
+    <li>Lorem</li>
+    <li>Ipsum
+      <ul>
+        <li>Lorem</li>
+        <li>Ipsum</li>
+      </ul>
+    </li>
+    <li>Dolor</li>
+  </ul>
+</section>`;