Skip to content

Commit 59bcd46

Browse files
RobbertRobbert
committed
feat: improve content and style of error messages
1 parent 90e79ab commit 59bcd46

File tree

8 files changed

+463
-254
lines changed

8 files changed

+463
-254
lines changed

‎packages/example-editor/index.html‎

Lines changed: 155 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,174 @@
11
<!doctype html>
2-
<html>
2+
<html class="utrecht-root">
33
<head>
44
<meta charset="utf-8" />
55
<link href="https://unpkg.com/@nl-design-system-unstable/basis-design-tokens/dist/variables.css" rel="stylesheet" />
66
</head>
7-
<body>
8-
<div class="element"></div>
9-
<script type="module">
10-
import { defineUtrechtParagraph } from './src/custom-element/utrecht-paragraph.mjs';
11-
import { defineUtrechtUnorderedList } from './src/custom-element/utrecht-unordered-list.mjs';
12-
import { defineUtrechtUnorderedListItem } from './src/custom-element/utrecht-unordered-list-item.mjs';
13-
import { defineUtrechtOrderedList } from './src/custom-element/utrecht-ordered-list.mjs';
14-
import { defineUtrechtOrderedListItem } from './src/custom-element/utrecht-ordered-list-item.mjs';
15-
import { defineUtrechtHeading } from './src/custom-element/utrecht-heading.mjs';
16-
import { defineExampleEditorElement } from './src/tiptap/example-editor.js';
17-
import { defineUtrechtLink } from './src/custom-element/utrecht-link.ts';
18-
import { defineUtrechtSafeLink } from './src/custom-element/utrecht-safe-link.ts';
19-
defineExampleEditorElement();
20-
defineUtrechtParagraph();
21-
defineUtrechtHeading();
22-
defineUtrechtUnorderedList();
23-
defineUtrechtUnorderedListItem();
24-
defineUtrechtOrderedList();
25-
defineUtrechtOrderedListItem();
26-
defineUtrechtLink();
27-
defineUtrechtSafeLink();
28-
document.addEventListener('validationError', (evt) => {
29-
const result = document.getElementById('error-list');
30-
while (result.lastChild) {
31-
result.removeChild(result.lastChild);
32-
}
33-
evt.detail.errors.forEach((e) => {
34-
result.innerHTML += `<li>Validation Error: ${e.message}</li>`;
35-
});
36-
});
37-
</script>
38-
<div class="split-screen">
39-
<example-editor>
40-
<template>
41-
<utrecht-heading level="1">Heading</utrecht-heading>
42-
<utrecht-heading level="2">Heading</utrecht-heading>
43-
<utrecht-heading level="3">Heading</utrecht-heading>
44-
<utrecht-heading level="4">Heading</utrecht-heading>
45-
<utrecht-heading level="5">Heading</utrecht-heading>
46-
<utrecht-heading level="6">Heading</utrecht-heading>
47-
<utrecht-heading level="7">Heading 7</utrecht-heading>
48-
<utrecht-heading level="6"><b>Bold move to use b in an heading</b></utrecht-heading>
49-
<utrecht-heading level="6"><i>Bold move to use i in an heading</i></utrecht-heading>
50-
<utrecht-paragraph>Edit me!</utrecht-paragraph>
51-
<utrecht-paragraph>Text <b>in bold</b></utrecht-paragraph>
52-
<utrecht-paragraph>Text <i>in italic</i></utrecht-paragraph>
53-
<utrecht-paragraph>Text <em>with emphasis</em></utrecht-paragraph>
54-
<utrecht-paragraph>Text <strong>with strong emphasis</strong></utrecht-paragraph>
55-
<utrecht-paragraph>Text <u>with underline</u></utrecht-paragraph>
56-
<utrecht-paragraph>Text <utrecht-link href="HTTPS://EXAMPLE.COM/">with link</utrecht-link></utrecht-paragraph>
57-
<utrecht-paragraph
58-
>Empty link: <utrecht-link href="HTTPS://EXAMPLE.COM/">...</utrecht-link></utrecht-paragraph
59-
>
60-
<img src="avatar.png" alt="" width="64" height="64" />
61-
<utrecht-heading level="6"></utrecht-heading
62-
><!-- empty heading, oh no! -->
63-
<utrecht-paragraph></utrecht-paragraph
64-
><!-- empty paragraph, oh no! -->
65-
<utrecht-paragraph>&nbsp;</utrecht-paragraph
66-
><!-- empty-ish paragraph, oh no! -->
67-
<utrecht-paragraph>- fake list item</utrecht-paragraph>
68-
<utrecht-paragraph>- fake list item</utrecht-paragraph>
69-
<utrecht-paragraph>- fake list item</utrecht-paragraph>
70-
<utrecht-paragraph>- fake list item</utrecht-paragraph>
71-
<utrecht-heading level="2">Unordered List example</utrecht-heading>
72-
<utrecht-unordered-list>
73-
<utrecht-unordered-list-item
74-
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-unordered-list-item
75-
>
76-
<utrecht-unordered-list-item
77-
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-unordered-list-item
78-
>
79-
<utrecht-unordered-list-item
80-
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-unordered-list-item
81-
>
82-
</utrecht-unordered-list>
83-
<utrecht-heading level="2">Ordered List example</utrecht-heading>
84-
<utrecht-ordered-list>
85-
<utrecht-ordered-list-item
86-
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-ordered-list-item
87-
>
88-
<utrecht-ordered-list-item
89-
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-ordered-list-item
90-
>
91-
<utrecht-ordered-list-item
92-
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-ordered-list-item
93-
>
94-
</utrecht-ordered-list>
95-
<table>
96-
<tbody>
97-
<tr>
98-
<th>Table Header</th>
99-
<td>Table cell</td>
100-
</tr>
101-
</tbody>
102-
</table>
103-
<table>
104-
<caption>
105-
Table with 3 rows
106-
</caption>
107-
<tr>
108-
<th>Table Header</th>
109-
<td>Table cell</td>
110-
</tr>
111-
<tr>
112-
<th>Table Header</th>
113-
<td>Table cell</td>
114-
</tr>
115-
<tr>
116-
<th>Table Header</th>
117-
<td>Table cell</td>
118-
</tr>
119-
</table>
120-
<utrecht-paragraph>Table with empty caption:</utrecht-paragraph>
121-
<table>
122-
<caption></caption>
123-
<tr>
124-
<th>Table Header</th>
125-
<td>Table cell</td>
126-
</tr>
127-
<tr>
128-
<th>Table Header</th>
129-
<td>Table cell</td>
130-
</tr>
131-
</table>
132-
<utrecht-paragraph>Data list:</utrecht-paragraph>
133-
<dl><dt>foo</dt></dl>
134-
<utrecht-paragraph>Data list with empty key:</utrecht-paragraph>
135-
<dl>
136-
<dt></dt>
137-
<dd>value</dd>
138-
</dl>
139-
<utrecht-paragraph>Data list with empty value:</utrecht-paragraph>
140-
<dl>
141-
<dt>key</dt>
142-
<dd></dd>
143-
</dl>
144-
<utrecht-paragraph>Data list without term:</utrecht-paragraph>
145-
<dl>
146-
<dd>value</dd>
147-
</dl>
148-
<utrecht-paragraph>Data list without value:</utrecht-paragraph>
149-
<dl>
150-
<dt>key</dt>
151-
</dl>
152-
</template>
153-
</example-editor>
154-
<div class="sidebar"><ol id="error-list"></ol></div>
155-
</div>
7+
<body class="utrecht-body">
8+
<utrecht-page-layout>
9+
<utrecht-page-body>
10+
<div class="element"></div>
11+
<script type="module" src="./src/index.js"></script>
12+
<div class="split-screen">
13+
<example-editor>
14+
<template>
15+
<utrecht-heading level="1">Heading</utrecht-heading>
16+
<utrecht-heading level="2">Heading</utrecht-heading>
17+
<utrecht-heading level="3">Heading</utrecht-heading>
18+
<utrecht-heading level="4">Heading</utrecht-heading>
19+
<utrecht-heading level="5">Heading</utrecht-heading>
20+
<utrecht-heading level="6">Heading</utrecht-heading>
21+
<utrecht-heading level="7">Heading 7</utrecht-heading>
22+
<utrecht-heading level="6"><b>Bold move to use b in an heading</b></utrecht-heading>
23+
<utrecht-heading level="6"><i>Bold move to use i in an heading</i></utrecht-heading>
24+
<utrecht-paragraph>Edit me!</utrecht-paragraph>
25+
<utrecht-paragraph>Text <b>in bold</b></utrecht-paragraph>
26+
<utrecht-paragraph>Text <i>in italic</i></utrecht-paragraph>
27+
<utrecht-paragraph>Text <em>with emphasis</em></utrecht-paragraph>
28+
<utrecht-paragraph>Text <strong>with strong emphasis</strong></utrecht-paragraph>
29+
<utrecht-paragraph>Text <u>with underline</u></utrecht-paragraph>
30+
<utrecht-paragraph
31+
>Text <utrecht-link href="HTTPS://EXAMPLE.COM/">with link</utrecht-link></utrecht-paragraph
32+
>
33+
<utrecht-paragraph
34+
>Empty link: <utrecht-link href="HTTPS://EXAMPLE.COM/">...</utrecht-link></utrecht-paragraph
35+
>
36+
<img src="avatar.png" alt="" width="64" height="64" />
37+
<utrecht-heading level="6"></utrecht-heading
38+
><!-- empty heading, oh no! -->
39+
<utrecht-paragraph></utrecht-paragraph
40+
><!-- empty paragraph, oh no! -->
41+
<utrecht-paragraph>&nbsp;</utrecht-paragraph
42+
><!-- empty-ish paragraph, oh no! -->
43+
<utrecht-paragraph>- fake list item</utrecht-paragraph>
44+
<utrecht-paragraph>- fake list item</utrecht-paragraph>
45+
<utrecht-paragraph>- fake list item</utrecht-paragraph>
46+
<utrecht-paragraph>- fake list item</utrecht-paragraph>
47+
<utrecht-heading level="2">Unordered List example</utrecht-heading>
48+
<utrecht-unordered-list>
49+
<utrecht-unordered-list-item
50+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-unordered-list-item
51+
>
52+
<utrecht-unordered-list-item
53+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-unordered-list-item
54+
>
55+
<utrecht-unordered-list-item
56+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-unordered-list-item
57+
>
58+
</utrecht-unordered-list>
59+
<utrecht-heading level="2">Ordered List example</utrecht-heading>
60+
<utrecht-ordered-list>
61+
<utrecht-ordered-list-item
62+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-ordered-list-item
63+
>
64+
<utrecht-ordered-list-item
65+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-ordered-list-item
66+
>
67+
<utrecht-ordered-list-item
68+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-ordered-list-item
69+
>
70+
</utrecht-ordered-list>
71+
<table>
72+
<tbody>
73+
<tr>
74+
<th>Table Header</th>
75+
<td>Table cell</td>
76+
</tr>
77+
</tbody>
78+
</table>
79+
<table>
80+
<caption>
81+
Table with 3 rows
82+
</caption>
83+
<tr>
84+
<th>Table Header</th>
85+
<td>Table cell</td>
86+
</tr>
87+
<tr>
88+
<th>Table Header</th>
89+
<td>Table cell</td>
90+
</tr>
91+
<tr>
92+
<th>Table Header</th>
93+
<td>Table cell</td>
94+
</tr>
95+
</table>
96+
<utrecht-paragraph>Table with empty caption:</utrecht-paragraph>
97+
<table>
98+
<caption></caption>
99+
<tr>
100+
<th>Table Header</th>
101+
<td>Table cell</td>
102+
</tr>
103+
<tr>
104+
<th>Table Header</th>
105+
<td>Table cell</td>
106+
</tr>
107+
</table>
108+
<utrecht-paragraph>Data list:</utrecht-paragraph>
109+
<dl><dt>foo</dt></dl>
110+
<utrecht-paragraph>Data list with empty key:</utrecht-paragraph>
111+
<dl>
112+
<dt></dt>
113+
<dd>value</dd>
114+
</dl>
115+
<utrecht-paragraph>Data list with empty value:</utrecht-paragraph>
116+
<dl>
117+
<dt>key</dt>
118+
<dd></dd>
119+
</dl>
120+
<utrecht-paragraph>Data list without term:</utrecht-paragraph>
121+
<dl>
122+
<dd>value</dd>
123+
</dl>
124+
<utrecht-paragraph>Data list without value:</utrecht-paragraph>
125+
<dl>
126+
<dt>key</dt>
127+
</dl>
128+
</template>
129+
</example-editor>
130+
<div class="sidebar">
131+
<ol id="error-list" role="list"></ol>
132+
</div></div></utrecht-page-body
133+
></utrecht-page-layout>
156134
<style>
157135
.split-screen {
158136
display: flex;
159137
flex-direction: row;
138+
column-gap: max(var(--utrecht-focus-outline-width), 0);
160139
}
161140
example-editor {
162141
flex-grow: 1;
163142
}
164143
.sidebar {
165144
inline-size: 300px;
166145
}
146+
#error-list {
147+
list-style: none;
148+
padding: 0;
149+
margin: 0;
150+
display: flex;
151+
flex-direction: column;
152+
row-gap: 1em;
153+
--utrecht-alert-border-width: 1px;
154+
--utrecht-alert-border-color: currentColor;
155+
--utrecht-alert-error-border-color: currentColor;
156+
--utrecht-alert-info-border-color: currentColor;
157+
--utrecht-alert-ok-border-color: currentColor;
158+
--utrecht-alert-warning-border-color: currentColor;
159+
}
160+
.ProseMirror-focused,
161+
.focus-ring:focus-visible {
162+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
163+
var(--utrecht-focus-inverse-outline-color, transparent);
164+
165+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
166+
outline-color: var(--utrecht-focus-outline-color, revert);
167+
outline-offset: var(--utrecht-focus-outline-offset, revert);
168+
outline-style: var(--utrecht-focus-outline-style, revert);
169+
outline-width: var(--utrecht-focus-outline-width, revert);
170+
z-index: 1;
171+
}
167172
</style>
168173
</body>
169174
</html>

‎packages/example-editor/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@frameless/example-editor",
33
"author": "Frameless",
44
"description": "Rich text editor with NL Design System components",
5-
"license": "SEE LICENSE IN LICENSE.md",
5+
"license": "EUPL-1.2",
66
"keywords": [
77
"nl-design-system"
88
],
@@ -25,6 +25,7 @@
2525
"dependencies": {
2626
"@tiptap/core": "2.11.7",
2727
"@tiptap/pm": "2.11.7",
28+
"@utrecht/body-css": "1.2.0",
2829
"@utrecht/heading-1-css": "1.5.0",
2930
"@utrecht/heading-2-css": "1.5.0",
3031
"@utrecht/heading-3-css": "1.5.0",
@@ -33,7 +34,10 @@
3334
"@utrecht/heading-6-css": "1.5.0",
3435
"@utrecht/link-css": "1.6.0",
3536
"@utrecht/ordered-list-css": "1.5.1",
37+
"@utrecht/page-body-css": "0.1.0",
38+
"@utrecht/page-layout-css": "1.1.0",
3639
"@utrecht/paragraph-css": "2.3.0",
40+
"@utrecht/root-css": "1.2.0",
3741
"@utrecht/table-css": "1.5.0",
3842
"@utrecht/unordered-list-css": "1.5.0",
3943
"@utrecht/web-component-library-stencil": "3.4.0",

‎packages/example-editor/src/custom-element/utrecht-link.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export class UtrechtLink extends HTMLElement {
1111
this.shadow.adoptedStyleSheets.push(stylesheet);
1212
const a = this.ownerDocument.createElement('a');
1313
a.setAttribute('href', this.getAttribute('href') || '');
14+
a.setAttribute('target', this.getAttribute('target') || '');
1415
a.classList.add('utrecht-link');
1516
a.classList.add('utrecht-link--html-a');
1617
const slot = this.ownerDocument.createElement('slot');

0 commit comments

Comments
 (0)