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

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