@utrecht/web-component-library-stencil 1.0.0-alpha.292 → 1.0.0-alpha.295
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/collection/article/web-component/index.css +6 -3
- package/dist/collection/article/web-component/index.stencil.js +5 -0
- package/dist/collection/backdrop/web-component/index.css +6 -3
- package/dist/collection/backdrop/web-component/index.stencil.js +2 -1
- package/dist/collection/badge-counter/web-component/index.css +4 -2
- package/dist/collection/badge-counter/web-component/index.stencil.js +2 -1
- package/dist/collection/badge-data/web-component/index.css +6 -3
- package/dist/collection/badge-data/web-component/index.stencil.js +2 -1
- package/dist/collection/badge-status/web-component/index.css +6 -3
- package/dist/collection/badge-status/web-component/index.stencil.js +2 -1
- package/dist/collection/html-content/web-component/index.css +4 -2
- package/dist/collection/link-list/css/template.js +1 -1
- package/dist/components/article/web-component/index.stencil.d.ts +5 -0
- package/dist/components/article/web-component/index.stencil.js +5 -0
- package/dist/components/backdrop/web-component/index.stencil.d.ts +5 -0
- package/dist/components/backdrop/web-component/index.stencil.js +5 -4
- package/dist/components/badge-counter/web-component/index.stencil.d.ts +5 -0
- package/dist/components/badge-counter/web-component/index.stencil.js +5 -4
- package/dist/components/badge-data/web-component/index.stencil.d.ts +5 -0
- package/dist/components/badge-data/web-component/index.stencil.js +5 -4
- package/dist/components/badge-status/web-component/index.stencil.d.ts +5 -0
- package/dist/components/badge-status/web-component/index.stencil.js +5 -4
- package/dist/packages/web-component-library-stencil/dist/types/article/web-component/index.stencil.d.ts +5 -0
- package/dist/packages/web-component-library-stencil/dist/types/backdrop/web-component/index.stencil.d.ts +5 -0
- package/dist/packages/web-component-library-stencil/dist/types/badge-counter/web-component/index.stencil.d.ts +5 -0
- package/dist/packages/web-component-library-stencil/dist/types/badge-data/web-component/index.stencil.d.ts +5 -0
- package/dist/packages/web-component-library-stencil/dist/types/badge-status/web-component/index.stencil.d.ts +5 -0
- package/dist/types/article/web-component/index.stencil.d.ts +5 -0
- package/dist/types/backdrop/web-component/index.stencil.d.ts +5 -0
- package/dist/types/badge-counter/web-component/index.stencil.d.ts +5 -0
- package/dist/types/badge-data/web-component/index.stencil.d.ts +5 -0
- package/dist/types/badge-status/web-component/index.stencil.d.ts +5 -0
- package/package.json +2 -2
- package/dist/collection/alternate-lang-nav/css/template.js +0 -12
- package/dist/collection/article/css/template.js +0 -6
- package/dist/collection/article/html/template.js +0 -5
- package/dist/collection/article/web-component/template.js +0 -1
- package/dist/collection/backdrop/css/template.js +0 -28
- package/dist/collection/backdrop/web-component/template.js +0 -17
- package/dist/collection/badge-counter/css/template.js +0 -7
- package/dist/collection/badge-counter/web-component/template.js +0 -4
- package/dist/collection/badge-data/css/template.js +0 -6
- package/dist/collection/badge-data/web-component/template.js +0 -1
- package/dist/collection/badge-status/css/template.js +0 -7
- package/dist/collection/badge-status/web-component/template.js +0 -4
- package/dist/collection/breadcrumb/css/template.js +0 -41
- package/dist/collection/button/css/stories/02-appearance.js +0 -57
- package/dist/collection/button/css/template.js +0 -82
- package/dist/collection/button/html/template.js +0 -41
- package/dist/collection/button/web-component/template.js +0 -44
- package/dist/collection/button-group/css/template.js +0 -13
- package/dist/collection/button-link/css/template.js +0 -25
- package/dist/collection/checkbox/css/template.js +0 -19
- package/dist/collection/checkbox/html/template.js +0 -14
- package/dist/collection/checkbox/web-component/template.js +0 -8
- package/dist/collection/custom-checkbox/css/template.js +0 -46
- package/dist/collection/custom-checkbox/web-component/template.js +0 -22
- package/dist/collection/custom-radio-button/css/template.js +0 -30
- package/dist/collection/digid-button/css/template.js +0 -16
- package/dist/collection/digid-button/web-component/template.js +0 -1
- package/dist/collection/link/css/template.js +0 -57
- package/dist/collection/link/html/template.js +0 -11
- package/dist/collection/page/css/template.js +0 -6
- package/dist/collection/page/web-component/template.js +0 -5
- package/dist/collection/page-content/css/template.js +0 -10
- package/dist/collection/page-content/web-component/template.js +0 -1
- package/dist/collection/paragraph/web-component/template.js +0 -12
- package/dist/collection/unordered-list/css/template.js +0 -28
- package/dist/collection/unordered-list/html/template.js +0 -22
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license EUPL-1.2
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
4
5
|
*/
|
|
5
6
|
/**
|
|
6
7
|
* @license EUPL-1.2
|
|
7
|
-
* Copyright (c)
|
|
8
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
9
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
8
10
|
*/
|
|
9
11
|
/**
|
|
10
12
|
* @license EUPL-1.2
|
|
11
|
-
* Copyright (c)
|
|
13
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
14
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
12
15
|
*/
|
|
13
16
|
.utrecht-article {
|
|
14
17
|
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license EUPL-1.2
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
4
5
|
*/
|
|
5
6
|
/**
|
|
6
7
|
* @license EUPL-1.2
|
|
7
|
-
* Copyright (c)
|
|
8
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
9
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
8
10
|
*/
|
|
9
11
|
/**
|
|
10
12
|
* @license EUPL-1.2
|
|
11
|
-
* Copyright (c)
|
|
13
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
14
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
12
15
|
*/
|
|
13
16
|
.utrecht-backdrop {
|
|
14
17
|
background-color: var(--utrecht-backdrop-background-color);
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license EUPL-1.2
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
4
5
|
*/
|
|
5
6
|
/**
|
|
6
7
|
* @license EUPL-1.2
|
|
7
|
-
* Copyright (c)
|
|
8
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
9
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
8
10
|
*/
|
|
9
11
|
.utrecht-badge-counter {
|
|
10
12
|
background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, black));
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license EUPL-1.2
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
4
5
|
*/
|
|
5
6
|
/**
|
|
6
7
|
* @license EUPL-1.2
|
|
7
|
-
* Copyright (c)
|
|
8
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
9
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
8
10
|
*/
|
|
9
11
|
/**
|
|
10
12
|
* @license EUPL-1.2
|
|
11
|
-
* Copyright (c)
|
|
13
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
14
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
12
15
|
*/
|
|
13
16
|
.utrecht-badge-data {
|
|
14
17
|
background-color: var(--utrecht-badge-background-color, black);
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license EUPL-1.2
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
4
5
|
*/
|
|
5
6
|
/**
|
|
6
7
|
* @license EUPL-1.2
|
|
7
|
-
* Copyright (c)
|
|
8
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
9
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
8
10
|
*/
|
|
9
11
|
/**
|
|
10
12
|
* @license EUPL-1.2
|
|
11
|
-
* Copyright (c)
|
|
13
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
14
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
12
15
|
*/
|
|
13
16
|
.utrecht-badge-status {
|
|
14
17
|
background-color: var(--utrecht-badge-background-color, black);
|
|
@@ -12,11 +12,13 @@
|
|
|
12
12
|
.utrecht-html {
|
|
13
13
|
/**
|
|
14
14
|
* @license EUPL-1.2
|
|
15
|
-
* Copyright (c)
|
|
15
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
16
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
16
17
|
*/
|
|
17
18
|
/**
|
|
18
19
|
* @license EUPL-1.2
|
|
19
|
-
* Copyright (c)
|
|
20
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
21
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
20
22
|
*/
|
|
21
23
|
/**
|
|
22
24
|
* @license EUPL-1.2
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2021 Robbert Broersma
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import { Link } from '../../link/css/template';
|
|
6
|
+
import { Link } from '../../link/css/story-template';
|
|
7
7
|
|
|
8
8
|
export const LinkList = ({ links = [] }) => `<ul class="utrecht-link-list utrecht-link-list--html-ul">
|
|
9
9
|
${links.map((link) => `<li class="utrecht-link-list__item">${Link(link)}</li>`).join('\n ')}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5
|
+
*/
|
|
1
6
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
7
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
8
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5
|
+
*/
|
|
1
6
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
7
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
8
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
9
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
10
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
11
|
};
|
|
7
|
-
/**
|
|
8
|
-
* @license EUPL-1.2
|
|
9
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
10
|
-
*/
|
|
11
12
|
import { Component, h, Prop } from '@stencil/core';
|
|
12
13
|
import clsx from 'clsx';
|
|
13
14
|
let Backdrop = class Backdrop {
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5
|
+
*/
|
|
1
6
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
7
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
8
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
9
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
10
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
11
|
};
|
|
7
|
-
/**
|
|
8
|
-
* @license EUPL-1.2
|
|
9
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
10
|
-
*/
|
|
11
12
|
import { Component, h, Prop } from '@stencil/core';
|
|
12
13
|
let BadgeCounter = class BadgeCounter {
|
|
13
14
|
render() {
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5
|
+
*/
|
|
1
6
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
7
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
8
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
9
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
10
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
11
|
};
|
|
7
|
-
/**
|
|
8
|
-
* @license EUPL-1.2
|
|
9
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
10
|
-
*/
|
|
11
12
|
import { Component, h } from '@stencil/core';
|
|
12
13
|
let BadgeData = class BadgeData {
|
|
13
14
|
render() {
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5
|
+
*/
|
|
1
6
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
7
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
8
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
9
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
10
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
11
|
};
|
|
7
|
-
/**
|
|
8
|
-
* @license EUPL-1.2
|
|
9
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
10
|
-
*/
|
|
11
12
|
import { Component, h, Prop } from '@stencil/core';
|
|
12
13
|
let BadgeStatus = class BadgeStatus {
|
|
13
14
|
render() {
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.0-alpha.
|
|
2
|
+
"version": "1.0.0-alpha.295",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"description": "Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
|
|
5
5
|
"license": "EUPL-1.2",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"watch:stencil": "chokidar --follow-symlinks --initial --command \"npm run build:stencil\" \"../../components/**/*.(js|jsx|ts|tsx)\"",
|
|
56
56
|
"generate": "stencil generate"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "d9a782cce19bdfe7606f9deb0f0947557660730b"
|
|
59
59
|
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license EUPL-1.2
|
|
3
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import { Link } from '../../link/css/template';
|
|
8
|
-
|
|
9
|
-
export const AlternateLangNav = ({ languages }) =>
|
|
10
|
-
`<div class="utrecht-alternate-lang-nav">
|
|
11
|
-
${languages.map(Link).join('\n<span aria-hidden="true"> | </span>\n')}
|
|
12
|
-
</div>`;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const Article = ({ content }) => `<utrecht-article>${content}</utrecht-article>`;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license EUPL-1.2
|
|
3
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4
|
-
*/
|
|
5
|
-
import clsx from 'clsx';
|
|
6
|
-
|
|
7
|
-
export const defaultArgs = {
|
|
8
|
-
viewport: false,
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export const Backdrop = ({ viewport = false }) =>
|
|
12
|
-
`<div class="${clsx('utrecht-backdrop', viewport && 'utrecht-backdrop--viewport')}"></div>`;
|
|
13
|
-
|
|
14
|
-
export const checkerboard = (story) =>
|
|
15
|
-
`<div style="
|
|
16
|
-
--checkerboard-color-1: #000000;
|
|
17
|
-
--checkerboard-color-2: #ffffff;
|
|
18
|
-
--checkerboard-size: 16px;
|
|
19
|
-
background-color: var(--checkerboard-color-2);
|
|
20
|
-
background-image: linear-gradient(45deg, var(--checkerboard-color-1) 25%, transparent 25%, transparent 75%, var(--checkerboard-color-1) 75%,var(--checkerboard-color-1)), linear-gradient(45deg, var(--checkerboard-color-1) 25%, transparent 25%, transparent 75%, var(--checkerboard-color-1) 75%, var(--checkerboard-color-1));
|
|
21
|
-
background-position: 0 0, var(--checkerboard-size) var(--checkerboard-size);
|
|
22
|
-
background-size: calc(var(--checkerboard-size) * 2) calc(var(--checkerboard-size) * 2);
|
|
23
|
-
height: 100%;
|
|
24
|
-
min-height: calc(40 * var(--checkerboard-size));
|
|
25
|
-
min-width: calc(40 * var(--checkerboard-size));
|
|
26
|
-
position: relative;
|
|
27
|
-
width: 100%;
|
|
28
|
-
">${story()}</div>`;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export const Backdrop = ({ viewport }) => `<utrecht-backdrop${viewport ? ' viewport="true"' : ''}></utrecht-backdrop>`;
|
|
2
|
-
|
|
3
|
-
export const checkerboard = (story) =>
|
|
4
|
-
`<div style="
|
|
5
|
-
--checkerboard-color-1: #000000;
|
|
6
|
-
--checkerboard-color-2: #ffffff;
|
|
7
|
-
--checkerboard-size: 16px;
|
|
8
|
-
background-color: var(--checkerboard-color-2);
|
|
9
|
-
background-image: linear-gradient(45deg, var(--checkerboard-color-1) 25%, transparent 25%, transparent 75%, var(--checkerboard-color-1) 75%,var(--checkerboard-color-1)), linear-gradient(45deg, var(--checkerboard-color-1) 25%, transparent 25%, transparent 75%, var(--checkerboard-color-1) 75%, var(--checkerboard-color-1));
|
|
10
|
-
background-position: 0 0, var(--checkerboard-size) var(--checkerboard-size);
|
|
11
|
-
background-size: calc(var(--checkerboard-size) * 2) calc(var(--checkerboard-size) * 2);
|
|
12
|
-
height: 100%;
|
|
13
|
-
min-height: calc(40 * var(--checkerboard-size));
|
|
14
|
-
min-width: calc(40 * var(--checkerboard-size));
|
|
15
|
-
position: relative;
|
|
16
|
-
width: 100%;
|
|
17
|
-
">${story()}</div>`;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export const BadgeCounter = ({ locale = null, textContent = '', value = null, max = null }) =>
|
|
2
|
-
`<utrecht-badge-counter${typeof max !== 'undefined' && max !== null ? ` max="${max}"` : ''}${
|
|
3
|
-
typeof value !== 'undefined' && value !== null ? ` value="${value}"` : ''
|
|
4
|
-
}${locale ? ` locale="${locale}"` : ''}>${textContent}</utrecht-badge-counter>`;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const BadgeData = ({ textContent = '' }) => `<utrecht-badge-data>${textContent}</utrecht-badge-data>`;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license EUPL-1.2
|
|
3
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import clsx from 'clsx';
|
|
7
|
-
|
|
8
|
-
export const exampleItems = [
|
|
9
|
-
{ href: 'https://example.com/', title: 'Home', focus: true },
|
|
10
|
-
{ href: 'https://example.com/a/', title: 'Wonen en leven' },
|
|
11
|
-
{ href: 'https://example.com/a/b/', title: 'Afval' },
|
|
12
|
-
{ href: 'https://example.com/a/b/c/', title: "Kliko's", current: true },
|
|
13
|
-
];
|
|
14
|
-
|
|
15
|
-
export const Breadcrumb = ({ items, microdata, variant }) => `<nav class="${clsx(
|
|
16
|
-
'utrecht-breadcrumb',
|
|
17
|
-
variant === 'arrows' && 'utrecht-breadcrumb--arrows',
|
|
18
|
-
)}">
|
|
19
|
-
<ol class="utrecht-breadcrumb__list"${
|
|
20
|
-
microdata ? ' itemscope itemtype="https://schema.org/BreadcrumbList"' : ''
|
|
21
|
-
}>${items
|
|
22
|
-
.map(
|
|
23
|
-
({ href, title, current, focus }, index) => `
|
|
24
|
-
<li class="utrecht-breadcrumb__item"${
|
|
25
|
-
microdata ? ' itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"' : ''
|
|
26
|
-
}>
|
|
27
|
-
<a class="${clsx(
|
|
28
|
-
'utrecht-breadcrumb__link',
|
|
29
|
-
focus && 'utrecht-breadcrumb__link--focus',
|
|
30
|
-
'utrecht-link',
|
|
31
|
-
current && 'utrecht-link--current',
|
|
32
|
-
focus && 'utrecht-link--focus',
|
|
33
|
-
)}" href="${href}"${current ? ' aria-current="location"' : ''}${microdata ? ' itemprop="item"' : ''}>
|
|
34
|
-
<span class="utrecht-breadcrumb__text"${microdata ? ' itemprop="name"' : ''}>${title}</span>
|
|
35
|
-
${microdata ? `<meta itemprop="position" content="${index + 1}" />` : ''}
|
|
36
|
-
</a>
|
|
37
|
-
</li>`,
|
|
38
|
-
)
|
|
39
|
-
.join('\n')}
|
|
40
|
-
</ol>
|
|
41
|
-
</nav>`;
|