@utrecht/web-component-library-stencil 1.0.0-alpha.291 → 1.0.0-alpha.294

package/dist/collection/button/css/stories/02-appearance.js

@@ -1,57 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2022 Robbert Broersma
- */
-
-import { Button } from '../template';
-
-export const defaultArgs = {
-  textContent: '',
-  defaultButton: true,
-  primaryActionButton: false,
-  secondaryActionButton: false,
-  subtleButton: false,
-};
-
-export const ButtonTable = ({
-  textContent = '',
-  defaultButton = true,
-  primaryActionButton = false,
-  secondaryActionButton = false,
-  subtleButton = false,
-}) => {
-  const appearances = [
-    defaultButton && 'button',
-    primaryActionButton && 'primary-action-button',
-    secondaryActionButton && 'secondary-action-button',
-    subtleButton && 'subtle-button',
-  ].filter(Boolean);
-  return `<table class="utrecht-table" style="inline-size: auto">
-  <thead class="utrecht--table__header">
-    <tr class="utrecht-table__row">
-      <th class="utrecht-table__header-cell"></th>
-      <th class="utrecht-table__header-cell">Default</th>
-      <th class="utrecht-table__header-cell">Active</th>
-      <th class="utrecht-table__header-cell">Hover</th>
-      <th class="utrecht-table__header-cell">Focus</th>
-      <th class="utrecht-table__header-cell">Focus visible</th>
-      <th class="utrecht-table__header-cell">Disabled</th>
-    </tr>
-  </thead>
-  <tbody class="utrecht--table__body">${appearances
-    .map(
-      (appearance) => `
-    <tr class="utrecht-table__row">
-      <th class="utrecht-table__header-cell">${appearance}</th>
-      <td class="utrecht-table__cell">${Button({ appearance, textContent })}</td>
-      <td class="utrecht-table__cell">${Button({ appearance, textContent, active: true })}</td>
-      <td class="utrecht-table__cell">${Button({ appearance, textContent, hover: true })}</td>
-      <td class="utrecht-table__cell">${Button({ appearance, textContent, focus: true })}</td>
-      <td class="utrecht-table__cell">${Button({ appearance, textContent, focus: true, focusVisible: true })}</td>
-      <td class="utrecht-table__cell">${Button({ appearance, textContent, disabled: true })}</td>
-    </tr>`,
-    )
-    .join('')}
-  </tbody>
-</table>`;
-};

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

@@ -1,82 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  active: false,
-  appearance: 'button',
-  busy: false,
-  disabled: false,
-  focus: false,
-  focusVisible: false,
-  hover: false,
-  textContent: '',
-  type: 'button',
-};
-
-export const argTypes = {
-  active: {
-    description: 'Active',
-    control: 'boolean',
-  },
-  appearance: {
-    description: 'Appearance',
-    control: { type: 'select' },
-    options: ['', 'button', 'primary-action-button', 'secondary-action-button', 'subtle-button'],
-  },
-  busy: {
-    description: 'Busy',
-    control: 'boolean',
-  },
-  disabled: {
-    description: 'Disabled',
-    control: 'boolean',
-  },
-  focus: {
-    description: 'Focus',
-    control: 'boolean',
-  },
-  focusVisible: {
-    description: 'Focus visible',
-    control: 'boolean',
-  },
-  hover: {
-    description: 'Hover',
-    control: 'boolean',
-  },
-  textContent: {
-    description: 'Button text',
-    control: 'text',
-  },
-  type: {
-    control: { type: 'select' },
-    options: ['', 'button', 'reset', 'submit'],
-  },
-};
-
-export const Button = ({
-  active = false,
-  appearance = null,
-  busy = false,
-  disabled = false,
-  focus = false,
-  focusVisible = false,
-  hover = false,
-  textContent = '',
-  type = 'button',
-}) =>
-  `<button class="${clsx('utrecht-button', {
-    'utrecht-button--active': active,
-    'utrecht-button--busy': busy,
-    'utrecht-button--hover': hover,
-    'utrecht-button--focus': focus,
-    'utrecht-button--focus-visible': focusVisible,
-    'utrecht-button--disabled': disabled,
-    'utrecht-button--primary-action': appearance === 'primary-action-button',
-    'utrecht-button--secondary-action': appearance === 'secondary-action-button',
-    'utrecht-button--subtle': appearance === 'subtle-button',
-  })}"${disabled ? ' aria-disabled="true"' : ''} type="${type}">${textContent}</button>`;

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

@@ -1,41 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const defaultArgs = {
-  busy: false,
-  disabled: false,
-  focusable: false,
-  textContent: '',
-  type: 'button',
-};
-
-export const argTypes = {
-  busy: {
-    description: 'Busy',
-    control: 'boolean',
-  },
-  disabled: {
-    description: 'Disabled',
-    control: 'boolean',
-  },
-  focusable: {
-    description: 'Focusable',
-    control: 'boolean',
-  },
-  textContent: {
-    description: 'Content of the button',
-    control: 'text',
-  },
-  type: {
-    description: 'Type',
-    control: { type: 'select' },
-    options: ['', 'button', 'reset', 'submit'],
-  },
-};
-
-export const Button = ({ busy = false, disabled = false, focusable = false, textContent = '', type = 'button' }) =>
-  `<button type="${type || 'button'}"${busy ? ' aria-busy="true"' : ''}${
-    disabled ? (focusable ? ' aria-disabled="true"' : ' disabled') : ''
-  }>${textContent}</button>`;

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

@@ -1,44 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const defaultArgs = {
-  busy: false,
-  disabled: false,
-  textContent: '',
-  type: '',
-};
-
-export const argTypes = {
-  appearance: {
-    description: 'Appearance',
-    control: { type: 'select' },
-    options: ['', 'button', 'primary-action-button', 'secondary-action-button', 'subtle-button'],
-  },
-  busy: {
-    description: 'Busy',
-    control: 'boolean',
-  },
-  disabled: {
-    description: 'Disabled',
-    control: 'boolean',
-  },
-  textContent: {
-    description: 'Button text',
-    control: 'text',
-  },
-  type: {
-    description: 'Type',
-    type: {
-      name: 'enum',
-    },
-    options: ['', 'button', 'reset', 'submit'],
-  },
-};
-
-export const Button = ({ appearance = '', busy = false, disabled = false, textContent = '', type = '' }) =>
-  `<utrecht-button${appearance ? ` appearance="${appearance}"` : ''}${busy ? ' busy="true"' : ''}${
-    disabled ? ' disabled' : ''
-  }${type ? ` type="${type}"` : ''}>${textContent}</utrecht-button>`;

package/dist/collection/button-group/css/template.js

@@ -1,13 +0,0 @@
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  direction: 'horizontal',
-  innerHTML: '',
-};
-
-export const ButtonGroup = ({ innerHTML = '', direction = 'horizontal' }) =>
-  `<div class="${clsx(
-    'utrecht-button-group',
-    direction === 'horizontal' && 'utrecht-button-group--horizontal',
-    direction === 'vertical' && 'utrecht-button-group--vertical',
-  )}" role="group">${innerHTML}</div>`;

package/dist/collection/button-link/css/template.js

@@ -1,25 +0,0 @@
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  external: false,
-  hover: false,
-  href: '',
-  focus: false,
-  focusVisible: false,
-  textContent: '',
-};
-
-export const ButtonLink = ({
-  external = false,
-  hover = false,
-  href = '',
-  focus = false,
-  focusVisible = false,
-  textContent = '',
-}) =>
-  `<a role="button" href="${href}" class="${clsx(
-    'utrecht-button-link',
-    hover && 'utrecht-button-link--hover',
-    focus && 'utrecht-button-link--focus',
-    focusVisible && 'utrecht-button-link--focus-visible',
-  )}"${external ? ' rel="external noopener noreferrer"' : ''}>${textContent}</a>`;

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

@@ -1,19 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  checked: false,
-  disabled: false,
-};
-
-export const Checkbox = ({ checked = false, disabled = false }) =>
-  `<input type="checkbox"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
-    'utrecht-checkbox',
-    'utrecht-checkbox--html-input',
-    checked && 'utrecht-checkbox--checked',
-    disabled && 'utrecht-checkbox--disabled',
-  )}">`;

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

@@ -1,14 +0,0 @@
-export const defaultArgs = {
-  checked: false,
-  disabled: false,
-  invalid: false,
-  required: false,
-  value: '',
-};
-
-export const Checkbox = ({ checked = false, disabled = false, invalid = false, required = false, value = '' }) =>
-  `<div class="utrecht-html">
-  <input type="checkbox"${checked ? ' checked' : ''}${invalid ? ' aria-invalid="true"' : ''}${
-    disabled ? ' disabled' : ''
-  }${required ? ' required' : ''}${value ? ` value="${value}"` : ''}>
-</div>`;

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

@@ -1,8 +0,0 @@
-export const defaultArgs = {
-  checked: false,
-  disabled: false,
-  value: '',
-};
-
-export const Checkbox = ({ checked = false, disabled = false, value = '' } = defaultArgs) =>
-  `<utrecht-checkbox${checked ? ' checked="true"' : ''}${disabled ? ' disabled="true"' : ''} value="${value}" />`;

package/dist/collection/custom-checkbox/css/template.js

@@ -1,46 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  active: false,
-  checked: false,
-  disabled: false,
-  focus: false,
-  indeterminate: false,
-  invalid: false,
-  required: false,
-  value: '',
-};
-
-export const CustomCheckbox = ({
-  active = false,
-  checked = false,
-  disabled = false,
-  focus = false,
-  indeterminate = false,
-  invalid = false,
-  required = false,
-  value = '',
-}) =>
-  `<span class="utrecht-custom-checkbox">
-  <input type="checkbox"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''}${required ? ' required' : ''}${
-    value ? ` value="${value}"` : ''
-  } class="utrecht-custom-checkbox__input">
-  <span class="${clsx(
-    'utrecht-custom-checkbox__box',
-    active && 'utrecht-custom-checkbox__box--active',
-    checked && 'utrecht-custom-checkbox__box--checked',
-    !checked && 'utrecht-custom-checkbox__box--not-checked',
-    disabled && 'utrecht-custom-checkbox__box--disabled',
-    focus && 'utrecht-custom-checkbox__box--focus',
-    invalid && 'utrecht-custom-checkbox__box--invalid',
-    indeterminate && 'utrecht-custom-checkbox__box--indeterminate',
-  )}">
-  <utrecht-icon-checkmark class="utrecht-custom-checkbox__icon utrecht-custom-checkbox__icon--checked">✔</utrecht-icon-checkmark>
-  <utrecht-icon-indeterminate class="utrecht-custom-checkbox__icon utrecht-custom-checkbox__icon--indeterminate">■</utrecht-icon-indeterminate>
-  </span>
-</span>`;

package/dist/collection/custom-checkbox/web-component/template.js

@@ -1,22 +0,0 @@
-export const defaultArgs = {
-  checked: false,
-  disabled: false,
-  indeterminate: false,
-  invalid: false,
-  required: false,
-  value: '',
-};
-
-export const CustomCheckbox = ({
-  checked = false,
-  disabled = false,
-  indeterminate = false,
-  invalid = false,
-  required = false,
-  value = '',
-}) =>
-  `<utrecht-custom-checkbox${checked ? ' checked="true"' : ''}${disabled ? ' disabled="true"' : ''}${
-    indeterminate ? ' indeterminate="true"' : ''
-  }${invalid ? ' invalid="true"' : ''}${required ? ' required="true"' : ''}${
-    value ? ` value="${value}"` : ''
-  }></utrecht-custom-checkbox>`;

package/dist/collection/custom-radio-button/css/template.js

@@ -1,30 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  checked: false,
-  disabled: false,
-  active: false,
-  focus: false,
-  invalid: false,
-};
-
-export const CustomRadioButton = ({
-  checked = false,
-  disabled = false,
-  active = false,
-  focus = false,
-  invalid = false,
-}) =>
-  `<input autofocus="true" type="radio"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
-    'utrecht-custom-radio-button',
-    checked && 'utrecht-custom-radio-button--checked',
-    disabled && 'utrecht-custom-radio-button--disabled',
-    active && 'utrecht-custom-radio-button--active',
-    focus && 'utrecht-custom-radio-button--focus',
-    invalid && 'utrecht-custom-radio-button--invalid',
-  )}">`;

package/dist/collection/digid-button/css/template.js

@@ -1,16 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const defaultArgs = {
-  label: '',
-  textContent: '',
-};
-
-export const DigidButton = ({ label = '', textContent = '' }) => `<div class="utrecht-digid-button">
-  <utrecht-digid-logo class="utrecht-digid-button__logo"></utrecht-digid-logo>
-  <button class="utrecht-digid-button__button utrecht-button utrecht-button--primary-action" type="button"${
-    label ? ` aria-label="${label}"` : ''
-  }>${textContent}</button>
-</div>`;

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

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

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

@@ -1,57 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  active: false,
-  current: false,
-  external: false,
-  hreflang: '',
-  hover: false,
-  lang: '',
-  focus: false,
-  focusVisible: false,
-  href: null,
-  telephone: false,
-  textContent: '...',
-  title: '',
-  visited: false,
-  iconleft: false,
-};
-
-export const Link = ({
-  active = defaultArgs.active,
-  current = defaultArgs.current,
-  external = defaultArgs.external,
-  hreflang = defaultArgs.hreflang,
-  hover = defaultArgs.hover,
-  lang = defaultArgs.lang,
-  focus = defaultArgs.focus,
-  focusVisible = defaultArgs.focusVisible,
-  href = defaultArgs.href,
-  telephone = defaultArgs.telephone,
-  textContent = defaultArgs.textContent,
-  title = defaultArgs.title,
-  visited = defaultArgs.visited,
-  iconleft = defaultArgs.iconleft,
-}) =>
-  `<a href="${href === null ? `https://example.com/${lang}` : href}" class="${clsx('utrecht-link', {
-    'utrecht-link--active': active,
-    'utrecht-link--alternate-lang': lang && !current,
-    'utrecht-link--current-lang': lang && current,
-    'utrecht-link--external': external,
-    'utrecht-link--focus': focus,
-    'utrecht-link--focus-visible': focusVisible,
-    'utrecht-link--hover': hover,
-    'utrecht-link--telephone': telephone,
-    'utrecht-link--visited': visited,
-    'utrecht-link--icon-left': iconleft,
-  })}"${external ? ' rel="external noopener noreferrer"' : ''}${current ? ' aria-current="page"' : ''}${
-    title ? ` title="${title}"` : ''
-  }${hreflang ? ` hreflang="${hreflang}"` : ''}${lang ? ` lang="${lang}"` : ''}${
-    !current ? ' rel="alternate"' : ''
-  }>${textContent}</a>`;

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

@@ -1,11 +0,0 @@
-export const Link = ({ external = false, href = null, textContent = '' }) =>
-  `<section class="utrecht-html">
-  <a href="${href === null ? '#' : href}"${external ? ' rel="external noopener noreferrer"' : ''}>${textContent}</a>
-</section>`;
-
-export const AlternateLangLink = ({ textContent, title, current, lang, hreflang }) =>
-  `<section class="utrecht-html">
-  <a href="https://example.com/${lang}/" ${
-    current ? 'aria-current="page"' : ''
-  } title="${title}" hreflang="${hreflang}" lang="${lang}"${!current ? 'rel="alternate"' : ''}>${textContent}</a>
-</section>`;

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

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

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

@@ -1,5 +0,0 @@
-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/css/template.js

@@ -1,10 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const PageContent = ({ asideHTML = null, innerHTML = '', navHTML = null }) => `<div class="utrecht-page-content">
-${navHTML ? `  <nav class="utrecht-page-content__nav">${navHTML}</nav>` : ''}
-  <main class="utrecht-page-content__main">${innerHTML}</main>
-  ${asideHTML ? `<aside class="utrecht-page-content__aside">${asideHTML}</aside>` : ''}
-</div>`;

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

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

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

@@ -1,12 +0,0 @@
-export const defaultArgs = {
-  lead: false,
-  textContent: '',
-};
-
-export const Paragraph = ({ lead = false, textContent = '' }) =>
-  `<utrecht-paragraph ${lead ? 'lead="true"' : ''}">${textContent}</p>`;
-
-export const Paragraphs = ({ textContent = '' }) =>
-  `<utrecht-paragraph lead="true">${textContent}</utrecht-paragraph>
-<utrecht-paragraph">${textContent}</utrecht-paragraph>
-<utrecht-paragraph">${textContent}</utrecht-paragraph>`;

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

@@ -1,28 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  distanced: false,
-  items: [],
-  nested: false,
-};
-
-export const UnorderedList = ({ distanced = false, items = [], nested = false }) =>
-  `<ul class="${clsx(
-    'utrecht-unordered-list',
-    distanced && 'utrecht-unordered-list--distanced',
-    nested && 'utrecht-unordered-list--nested',
-  )}">
-${items
-  .map(
-    ({ items: subItems, textContent }) =>
-      `  <li class="utrecht-unordered-list__item">${textContent || ''}${
-        subItems ? UnorderedList({ nested: true, items: subItems }) : ''
-      }</li>`,
-  )
-  .join('\n')}
-</ul>`;

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

@@ -1,22 +0,0 @@
-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>`;