Skip to content

Commit

Permalink
feat: add more vue components and stories
Browse files Browse the repository at this point in the history 
feat: add more vue components and stories

style: add secondary color tokens

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.450
 - @utrecht/icon@1.0.0-alpha.377
 - @utrecht/component-library-angular@1.0.0-alpha.268
 - @utrecht/component-library-css@1.0.0-alpha.489
 - @utrecht/component-library-formio@1.0.0-alpha.430
 - @utrecht/component-library-react@1.0.0-alpha.298
 - @utrecht/component-library-vue@1.0.0-alpha.266
 - @utrecht/web-component-library-angular@1.0.0-alpha.472
 - @utrecht/web-component-library-react@1.0.0-alpha.488
 - @utrecht/web-component-library-stencil@1.0.0-alpha.488
 - @utrecht/web-component-library-vue@1.0.0-alpha.434
 - @utrecht/assets@1.0.0-alpha.110
 - @utrecht/design-tokens@1.0.0-alpha.482

style: revert CSS overrides for Storybook doc pages

Essentially revert #1582, it is causing too many side effects

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.451
 - @utrecht/icon@1.0.0-alpha.378
 - @utrecht/component-library-angular@1.0.0-alpha.269
 - @utrecht/component-library-css@1.0.0-alpha.490
 - @utrecht/component-library-formio@1.0.0-alpha.431
 - @utrecht/component-library-react@1.0.0-alpha.299
 - @utrecht/component-library-vue@1.0.0-alpha.267
 - @utrecht/web-component-library-angular@1.0.0-alpha.473
 - @utrecht/web-component-library-react@1.0.0-alpha.489
 - @utrecht/web-component-library-stencil@1.0.0-alpha.489
 - @utrecht/web-component-library-vue@1.0.0-alpha.435
 - @utrecht/assets@1.0.0-alpha.111
 - @utrecht/design-tokens@1.0.0-alpha.483

build: update npm-check-updates first

raineorshine/npm-check-updates#1268

build: install patch updates

chore: `import-order` lint fixes

build: remove Stencil patch for CSP (Stencil 3 has out of the box support)

chore: fix markdown lint warnings

build: update minor versions

build: avoid `@vue/tsconfig` 0.2.0 and greater, requires TypeScript 5

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.452
 - @utrecht/icon@1.0.0-alpha.379
 - @utrecht/component-library-angular@1.0.0-alpha.270
 - @utrecht/component-library-css@1.0.0-alpha.491
 - @utrecht/component-library-formio@1.0.0-alpha.432
 - @utrecht/component-library-react@1.0.0-alpha.300
 - @utrecht/component-library-vue@1.0.0-alpha.268
 - @utrecht/web-component-library-angular@1.0.0-alpha.474
 - @utrecht/web-component-library-react@1.0.0-alpha.490
 - @utrecht/web-component-library-stencil@1.0.0-alpha.490
 - @utrecht/web-component-library-vue@1.0.0-alpha.436
 - @utrecht/assets@1.0.0-alpha.112
 - @utrecht/design-tokens@1.0.0-alpha.484

feat: new token voor line height

style: add `form-control` fallback for textbox line height

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.453
 - @utrecht/icon@1.0.0-alpha.380
 - @utrecht/component-library-angular@1.0.0-alpha.271
 - @utrecht/component-library-css@1.0.0-alpha.492
 - @utrecht/component-library-formio@1.0.0-alpha.433
 - @utrecht/component-library-react@1.0.0-alpha.301
 - @utrecht/component-library-vue@1.0.0-alpha.269
 - @utrecht/web-component-library-angular@1.0.0-alpha.475
 - @utrecht/web-component-library-react@1.0.0-alpha.491
 - @utrecht/web-component-library-stencil@1.0.0-alpha.491
 - @utrecht/web-component-library-vue@1.0.0-alpha.437
 - @utrecht/assets@1.0.0-alpha.113
 - @utrecht/design-tokens@1.0.0-alpha.485

feat: opencatalogi databadge designtokens

fix: linting voor data-badge

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.454
 - @utrecht/icon@1.0.0-alpha.381
 - @utrecht/component-library-angular@1.0.0-alpha.272
 - @utrecht/component-library-css@1.0.0-alpha.493
 - @utrecht/component-library-formio@1.0.0-alpha.434
 - @utrecht/component-library-react@1.0.0-alpha.302
 - @utrecht/component-library-vue@1.0.0-alpha.270
 - @utrecht/web-component-library-angular@1.0.0-alpha.476
 - @utrecht/web-component-library-react@1.0.0-alpha.492
 - @utrecht/web-component-library-stencil@1.0.0-alpha.492
 - @utrecht/web-component-library-vue@1.0.0-alpha.438
 - @utrecht/assets@1.0.0-alpha.114
 - @utrecht/design-tokens@1.0.0-alpha.486

docs: add WCAG 1280x1024px at 400% zoom viewport to Storybook

docs: improve skip link docs

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.455
 - @utrecht/icon@1.0.0-alpha.382
 - @utrecht/component-library-angular@1.0.0-alpha.273
 - @utrecht/component-library-css@1.0.0-alpha.494
 - @utrecht/component-library-formio@1.0.0-alpha.435
 - @utrecht/component-library-react@1.0.0-alpha.303
 - @utrecht/component-library-vue@1.0.0-alpha.271
 - @utrecht/web-component-library-angular@1.0.0-alpha.477
 - @utrecht/web-component-library-react@1.0.0-alpha.493
 - @utrecht/web-component-library-stencil@1.0.0-alpha.493
 - @utrecht/web-component-library-vue@1.0.0-alpha.439
 - @utrecht/assets@1.0.0-alpha.115
 - @utrecht/design-tokens@1.0.0-alpha.487

style: support design tokens in `::selection`

https://kilianvalkhof.com/2023/css-html/root-isnt-global/

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.456
 - @utrecht/icon@1.0.0-alpha.383
 - @utrecht/component-library-angular@1.0.0-alpha.274
 - @utrecht/component-library-css@1.0.0-alpha.495
 - @utrecht/component-library-formio@1.0.0-alpha.436
 - @utrecht/component-library-react@1.0.0-alpha.304
 - @utrecht/component-library-vue@1.0.0-alpha.272
 - @utrecht/web-component-library-angular@1.0.0-alpha.478
 - @utrecht/web-component-library-react@1.0.0-alpha.494
 - @utrecht/web-component-library-stencil@1.0.0-alpha.494
 - @utrecht/web-component-library-vue@1.0.0-alpha.440
 - @utrecht/assets@1.0.0-alpha.116
 - @utrecht/design-tokens@1.0.0-alpha.488

feat: allow unselected date and keep date when navigating months

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.457
 - @utrecht/icon@1.0.0-alpha.384
 - @utrecht/component-library-angular@1.0.0-alpha.275
 - @utrecht/component-library-css@1.0.0-alpha.496
 - @utrecht/component-library-formio@1.0.0-alpha.437
 - @utrecht/component-library-react@1.0.0-alpha.305
 - @utrecht/component-library-vue@1.0.0-alpha.273
 - @utrecht/web-component-library-angular@1.0.0-alpha.479
 - @utrecht/web-component-library-react@1.0.0-alpha.495
 - @utrecht/web-component-library-stencil@1.0.0-alpha.495
 - @utrecht/web-component-library-vue@1.0.0-alpha.441
 - @utrecht/assets@1.0.0-alpha.117
 - @utrecht/design-tokens@1.0.0-alpha.489

docs: make CSS tokens example simpler to uncomment one token at a time

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.458
 - @utrecht/icon@1.0.0-alpha.385
 - @utrecht/component-library-angular@1.0.0-alpha.276
 - @utrecht/component-library-css@1.0.0-alpha.497
 - @utrecht/component-library-formio@1.0.0-alpha.438
 - @utrecht/component-library-react@1.0.0-alpha.306
 - @utrecht/component-library-vue@1.0.0-alpha.274
 - @utrecht/web-component-library-angular@1.0.0-alpha.480
 - @utrecht/web-component-library-react@1.0.0-alpha.496
 - @utrecht/web-component-library-stencil@1.0.0-alpha.496
 - @utrecht/web-component-library-vue@1.0.0-alpha.442
 - @utrecht/assets@1.0.0-alpha.118
 - @utrecht/design-tokens@1.0.0-alpha.490

style: active state for buttons

style: use `:active` after `:focus` and avoid `:link`

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.459
 - @utrecht/icon@1.0.0-alpha.386
 - @utrecht/component-library-angular@1.0.0-alpha.277
 - @utrecht/component-library-css@1.0.0-alpha.498
 - @utrecht/component-library-formio@1.0.0-alpha.439
 - @utrecht/component-library-react@1.0.0-alpha.307
 - @utrecht/component-library-vue@1.0.0-alpha.275
 - @utrecht/web-component-library-angular@1.0.0-alpha.481
 - @utrecht/web-component-library-react@1.0.0-alpha.497
 - @utrecht/web-component-library-stencil@1.0.0-alpha.497
 - @utrecht/web-component-library-vue@1.0.0-alpha.443
 - @utrecht/assets@1.0.0-alpha.119
 - @utrecht/design-tokens@1.0.0-alpha.491

fix: revert "support design tokens in `::selection`"

This reverts commit fb62efe.

Unfortunately the following code makes the user selection invisible:

```
::selection {
    --color: red;
}
```

Somehow, only having a custom property, breaks `background-color` and
`color`. This totally works:

```
::selection {
    --color: red;
    background-color: Highlight;
    color: HighlightText;
}
```

However, the following would not be our intention:

```
.utrecht-theme,
.utrecht-theme ::selection {
    --color: red;
    background-color: Highlight;
    color: HighlightText;
}
```

Perhaps we could do the following, but I doubt it would be worth the complexity.

```
.utrecht-theme,
.utrecht-theme ::selection {
    --color: red;
}

.utrecht-theme ::selection {
    background-color: Highlight;
    color: HighlightText;
}
```

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.460
 - @utrecht/icon@1.0.0-alpha.387
 - @utrecht/component-library-angular@1.0.0-alpha.278
 - @utrecht/component-library-css@1.0.0-alpha.499
 - @utrecht/component-library-formio@1.0.0-alpha.440
 - @utrecht/component-library-react@1.0.0-alpha.308
 - @utrecht/component-library-vue@1.0.0-alpha.276
 - @utrecht/web-component-library-angular@1.0.0-alpha.482
 - @utrecht/web-component-library-react@1.0.0-alpha.498
 - @utrecht/web-component-library-stencil@1.0.0-alpha.498
 - @utrecht/web-component-library-vue@1.0.0-alpha.444
 - @utrecht/assets@1.0.0-alpha.120
 - @utrecht/design-tokens@1.0.0-alpha.492

style: add `text-style-adjust: reset`

Inspired by: Your CSS reset needs text-size-adjust (probably)

https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/

style: add `font-size: inherit` fallback to form inputs

style: explicitly use `user-select: none` on form components

feat: add selected state for table row and cells

style: use `Hightlight` and `HightlightText` as fallback selected style

style: `<th>` should be bold, even without design tokens

docs: add theme switcher to React Storybook

Dark mode is broken still, will look into it later

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.461
 - @utrecht/icon@1.0.0-alpha.388
 - @utrecht/component-library-angular@1.0.0-alpha.279
 - @utrecht/component-library-css@1.0.0-alpha.500
 - @utrecht/component-library-formio@1.0.0-alpha.441
 - @utrecht/component-library-react@1.0.0-alpha.309
 - @utrecht/component-library-vue@1.0.0-alpha.277
 - @utrecht/web-component-library-angular@1.0.0-alpha.483
 - @utrecht/web-component-library-react@1.0.0-alpha.499
 - @utrecht/web-component-library-stencil@1.0.0-alpha.499
 - @utrecht/web-component-library-vue@1.0.0-alpha.445
 - @utrecht/assets@1.0.0-alpha.121
 - @utrecht/design-tokens@1.0.0-alpha.493

fix: accordion tokens fixed

feat: add new interactive state tokens for checked radio

refactor: reuse radio button icon svg

fix: use `defaultChecked` instead of `checked`

feat: support styling radio button icon

docs: radio button design guidelines

fix: radio button group `name` and `id` attributes

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.462
 - @utrecht/icon@1.0.0-alpha.389
 - @utrecht/component-library-angular@1.0.0-alpha.280
 - @utrecht/component-library-css@1.0.0-alpha.501
 - @utrecht/component-library-formio@1.0.0-alpha.442
 - @utrecht/component-library-react@1.0.0-alpha.310
 - @utrecht/component-library-vue@1.0.0-alpha.278
 - @utrecht/web-component-library-angular@1.0.0-alpha.484
 - @utrecht/web-component-library-react@1.0.0-alpha.500
 - @utrecht/web-component-library-stencil@1.0.0-alpha.500
 - @utrecht/web-component-library-vue@1.0.0-alpha.446
 - @utrecht/assets@1.0.0-alpha.122
 - @utrecht/design-tokens@1.0.0-alpha.494

docs: color sample docs

feat: add `border-radius` token to color sample component

style: prevent selection in Safari too

feat: color sample web component

test: unit tests for React ColorSample component

feat: color sample component for Angular

feat: add size tokens to color sample

style: ensure color sample can be printed

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.463
 - @utrecht/icon@1.0.0-alpha.390
 - @utrecht/component-library-angular@1.0.0-alpha.281
 - @utrecht/component-library-css@1.0.0-alpha.502
 - @utrecht/component-library-formio@1.0.0-alpha.443
 - @utrecht/component-library-react@1.0.0-alpha.311
 - @utrecht/component-library-vue@1.0.0-alpha.279
 - @utrecht/web-component-library-angular@1.0.0-alpha.485
 - @utrecht/web-component-library-react@1.0.0-alpha.501
 - @utrecht/web-component-library-stencil@1.0.0-alpha.501
 - @utrecht/web-component-library-vue@1.0.0-alpha.447
 - @utrecht/assets@1.0.0-alpha.123
 - @utrecht/design-tokens@1.0.0-alpha.495

fix: use `aria-label` instead of `title` for links

docs: some more WCAG links

docs: examples of how to use form-field-description

ci: disable `react/no-unescaped-entities` lint rule

The suggestion might prevent a bug sometimes, but MDX docs become unreadable.

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.464
 - @utrecht/icon@1.0.0-alpha.391
 - @utrecht/component-library-angular@1.0.0-alpha.282
 - @utrecht/component-library-css@1.0.0-alpha.503
 - @utrecht/component-library-formio@1.0.0-alpha.444
 - @utrecht/component-library-react@1.0.0-alpha.312
 - @utrecht/component-library-vue@1.0.0-alpha.280
 - @utrecht/web-component-library-angular@1.0.0-alpha.486
 - @utrecht/web-component-library-react@1.0.0-alpha.502
 - @utrecht/web-component-library-stencil@1.0.0-alpha.502
 - @utrecht/web-component-library-vue@1.0.0-alpha.448
 - @utrecht/assets@1.0.0-alpha.124
 - @utrecht/design-tokens@1.0.0-alpha.496

feat: add min and max date bounds

docs: add story for limited range calendar

test: add calendar tests

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.465
 - @utrecht/icon@1.0.0-alpha.392
 - @utrecht/component-library-angular@1.0.0-alpha.283
 - @utrecht/component-library-css@1.0.0-alpha.504
 - @utrecht/component-library-formio@1.0.0-alpha.445
 - @utrecht/component-library-react@1.0.0-alpha.313
 - @utrecht/component-library-vue@1.0.0-alpha.281
 - @utrecht/web-component-library-angular@1.0.0-alpha.487
 - @utrecht/web-component-library-react@1.0.0-alpha.503
 - @utrecht/web-component-library-stencil@1.0.0-alpha.503
 - @utrecht/web-component-library-vue@1.0.0-alpha.449
 - @utrecht/assets@1.0.0-alpha.125
 - @utrecht/design-tokens@1.0.0-alpha.497

style: avoid oversized SVG icons

docs: icon story for CSS icon component

docs(release): design system packages

 - @utrecht/components@1.0.0-alpha.466
 - @utrecht/icon@1.0.0-alpha.393
 - @utrecht/component-library-angular@1.0.0-alpha.284
 - @utrecht/component-library-css@1.0.0-alpha.505
 - @utrecht/component-library-formio@1.0.0-alpha.446
 - @utrecht/component-library-react@1.0.0-alpha.314
 - @utrecht/component-library-vue@1.0.0-alpha.282
 - @utrecht/web-component-library-angular@1.0.0-alpha.488
 - @utrecht/web-component-library-react@1.0.0-alpha.504
 - @utrecht/web-component-library-stencil@1.0.0-alpha.504
 - @utrecht/web-component-library-vue@1.0.0-alpha.450
 - @utrecht/assets@1.0.0-alpha.126
 - @utrecht/design-tokens@1.0.0-alpha.498
  • Loading branch information
@AndreaBusse29
AndreaBusse29 committed May 16, 2023
1 parent 5459a0c commit fe27536
Show file tree
Hide file tree
Showing 163 changed files with 9,265 additions and 7,540 deletions.
1 change: 1 addition & 0 deletions .eslintrc.react.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"rules": {
"react/no-unescaped-entities": "off",
"react/no-unknown-property": "off",
"react/prop-types": "off",
"react/jsx-key": "off",
Expand Down
2 changes: 1 addition & 1 deletion .ncurc.minor.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const patchConfig = require('./.ncurc.patch');

module.exports = {
reject: [...patchConfig.reject, 'typescript'],
reject: [...patchConfig.reject, 'typescript', '@vue/tsconfig'],
};
136 changes: 85 additions & 51 deletions components/accordion/tokens.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,111 +3,145 @@
"accordion": {
"button": {
"padding-inline-end": {
"css": {
"syntax": "<length>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
}
}
},
"background-color": {
"css": {
"syntax": "<color>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
}
}
},
"color": {
"css": {
"syntax": "<color>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
}
}
},
"border-color": {
"css": {
"syntax": "<color>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
}
}
},
"border-width": {
"css": {
"syntax": "<length>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
}
}
},
"hover": {
"background-color": {
"css": {
"syntax": "<color>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
}
}
},
"border-color": {
"css": {
"syntax": "<color>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
}
}
}
},
"icon": {
"arrow-down": {
"css": {
"syntax": "<url>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<url>",
"inherits": true
}
}
},
"arrow-up": {
"css": {
"syntax": "<url>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<url>",
"inherits": true
}
}
},
"background-color": {
"css": {
"syntax": "<color>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
}
}
},
"size": {
"css": {
"syntax": "<length>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
}
}
}
}
},
"body": {
"border-color": {
"css": {
"syntax": "<color>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
}
}
},
"border-width": {
"css": {
"syntax": "<length>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
}
}
},
"padding-block-start": {
"css": {
"syntax": "<length>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
}
}
},
"padding-block-end": {
"css": {
"syntax": "<length>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
}
}
},
"padding-inline-start": {
"css": {
"syntax": "<length>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
}
}
},
"padding-inline-end": {
"css": {
"syntax": "<length>",
"inherits": true
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion components/alert-dialog/css/stories/type.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{/* @license CC0-1.0 */}

import { Canvas, Meta, Story } from "@storybook/addon-docs";
import { ButtonGroup } from "../../../button-group/css/story-template";
import { Button } from "../../../button/css/story-template";
import { ButtonGroup } from "../../../button-group/css/story-template";
import { Heading1 } from "../../../heading-1/css/story-template";
import { Paragraph } from "../../../paragraph/css/story-template";
import { AlertDialog, argTypes, defaultArgs, exampleArgs } from "../story-template";
Expand Down
2 changes: 1 addition & 1 deletion components/alert-dialog/css/story-template.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@

import clsx from 'clsx';
import React from 'react';
import { ButtonGroup } from '../../button-group/css/story-template';
import { Button } from '../../button/css/story-template';
import { ButtonGroup } from '../../button-group/css/story-template';
import { Heading1 } from '../../heading-1/css/story-template';
import { Paragraph } from '../../paragraph/css/story-template';

Expand Down
2 changes: 1 addition & 1 deletion components/alternate-lang-nav/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Use the `<nav>` with `<a>` element approach for hyperlinks to alternate language
- maak duidelijk dat je kunt navigeren naar alternatieve versies door het plaatsen van deze links in een `navigation` landmark (`<nav>`)
- [WCAG eis 2.4.4](https://www.w3.org/TR/WCAG21/#link-purpose-in-context): met alleen de naam van de taal als label ("English") is het doel van de link duidelijk in de context van een navigation landmark
- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): alle labels moeten duidelijk zijn:
- het label van de landmark (de heading in de `nav` of `section`)
- het label van de landmark (de heading in de `nav` of `section`). Zie ook: [Using `aria-label` to provide labels for objects](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6).
- het zichtbare label van de links of buttons
- het langere label van de link of button (in `aria-label` of `title`)
- [WCAG eis 2.4.9](https://www.w3.org/TR/WCAG21/#link-purpose-link-only): gebruik een label als "This page in English" zodat het doel van de link ook duidelijk is zonder context.
Expand Down
2 changes: 2 additions & 0 deletions components/alternate-lang-nav/css/stories/button-group.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import "../../../link/css/index.scss";

# Alternative language navigation: button group

Gebruik een button met `aria-pressed` om duidelijk te maken welke optie de huidige taal is. Zie ook: [WCAG Technique ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA5).

<Canvas>
<Story name="Button group" args={exampleArgs}>
{AlternateLangButtonGroup.bind({})}
Expand Down
10 changes: 5 additions & 5 deletions components/alternate-lang-nav/css/story-template.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@

import React from 'react';
import { ButtonGroup } from '../../button-group/css/story-template';
import { LinkButton } from '../../link-button/css/story-template';
import { Link } from '../../link/css/story-template';
import { LinkButton } from '../../link-button/css/story-template';
import './index.scss';

export const argTypes = {
Expand All @@ -31,8 +31,8 @@ export const defaultArgs = {
export const exampleArgs = {
headingLevel: 2,
languages: [
{ textContent: 'EN', title: 'This page in English', lang: 'en', current: true, hrefLang: 'en' },
{ textContent: 'NL', title: 'Deze pagina in Nederlands', lang: 'nl', current: false, hrefLang: 'nl' },
{ textContent: 'EN', ariaLabel: 'This page in English', lang: 'en', current: true, hrefLang: 'en' },
{ textContent: 'NL', ariaLabel: 'Deze pagina in Nederlands', lang: 'nl', current: false, hrefLang: 'nl' },
],
};

Expand Down Expand Up @@ -78,8 +78,8 @@ export const AlternateLangButtonGroup = ({ headingLevel = defaultArgs.headingLev
Taal kiezen
</Heading>
<ButtonGroup>
{languages.map(({ current, lang, textContent, title }, index) => (
<LinkButton pressed={!!current} aria-label={title} lang={lang} key={index}>
{languages.map(({ current, lang, textContent, ariaLabel }, index) => (
<LinkButton pressed={!!current} aria-label={ariaLabel} lang={lang} key={index}>
{textContent}
</LinkButton>
))}
Expand Down
1 change: 1 addition & 0 deletions components/backdrop/css/_mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
background-color: var(--utrecht-backdrop-background-color);
color: var(--utrecht-backdrop-color);
opacity: var(--_utrecht-backdrop-opacity);
-webkit-user-select: none;
user-select: none;

@keyframes utrecht-backdrop-fade-in {
Expand Down
2 changes: 1 addition & 1 deletion components/breadcrumb/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ Wel:
- [WCAG eis 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): gebruik het `<nav>` element voor de `navigation` landmark role.
- [WCAG eis 1.3.6](https://www.w3.org/TR/WCAG21/#identify-purpose)
- [WCAG eis 2.4.5](https://www.w3.org/TR/WCAG21/#multiple-ways)
- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de label van de `navigation` landmark maakt duidelijk dat het om het broodkruimelpad gaat.
- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de label van de `navigation` landmark maakt duidelijk dat het om het broodkruimelpad gaat. Zie ook: [Using `aria-label` to provide labels for objects](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA5).
- [WCAG eis 2.4.8](https://www.w3.org/TR/WCAG21/#location):
- gebruik `<a aria-current="location">` om de huidige pagina te markeren
- een kruimelpad is een manier om duidelijk te maken waar de gebruiker zich bevind in de context van een site met meerdere pagina's.
12 changes: 6 additions & 6 deletions components/button-link/css/_mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,16 @@
}

@mixin utrecht-button-link--html-a {
&:link:active {
@include utrecht-button-link--active;
}
&:link:focus {
&:focus {
@include utrecht-button-link--focus;
}
&:link:focus-visible {
&:focus-visible {
@include utrecht-button-link--focus-visible;
}
&:link:hover {
&:hover {
@include utrecht-button-link--hover;
}
&:active {
@include utrecht-button-link--active;
}
}
3 changes: 2 additions & 1 deletion components/button/css/_mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@
cursor: var(--utrecht-action-activate-cursor);
display: inline-flex;
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
gap: var(--utrecht-button-icon-gap);
inline-size: var(--utrecht-button-inline-size, auto);
Expand All @@ -199,6 +199,7 @@
padding-inline-end: var(--utrecht-button-padding-inline-end);
padding-inline-start: var(--utrecht-button-padding-inline-start);
text-transform: var(--utrecht-button-text-transform);
-webkit-user-select: none;
user-select: none;
}

Expand Down
10 changes: 5 additions & 5 deletions components/button/css/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,6 @@
@include utrecht-button--disabled;
}

.utrecht-button:active:not(:disabled, [aria-disabled="true"], .utrecht-button--disabled),
.utrecht-button--active {
@include utrecht-button--active;
}

.utrecht-button--focus-visible {
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
@include utrecht-focus-visible;
Expand Down Expand Up @@ -82,6 +77,11 @@
@include utrecht-button--hover;
}

.utrecht-button:active:not(:disabled, [aria-disabled="true"], .utrecht-button--disabled),
.utrecht-button--active {
@include utrecht-button--active;
}

@include utrecht-button-appearance("utrecht-button", "primary-action");
@include utrecht-button-appearance("utrecht-button", "secondary-action");
@include utrecht-button-appearance("utrecht-button", "subtle");
Expand Down
2 changes: 1 addition & 1 deletion components/button/css/stories/description.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{/* @license CC0-1.0 */}

import { Canvas, Description, Meta, Story } from "@storybook/addon-docs";
import descriptionDocs from "./_description.md";
import { Alert } from "../../../alert/css/story-template";
import { ButtonGroup } from "../../../button-group/css/story-template";
import { FormFieldDescription } from "../../../form-field-description/css/story-template";
import { Paragraph } from "../../../paragraph/css/story-template";
import { argTypes, Button, defaultArgs } from "../story-template";
import descriptionDocs from "./_description.md";
import "../index.scss";

export const ButtonWithDescription = ({ id, description, small, status, alertType, ...restProps }) => {
Expand Down
2 changes: 2 additions & 0 deletions components/checkbox/css/_mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
@include reset-input-checkbox;

cursor: var(--utrecht-action-activate-cursor, revert);
-webkit-user-select: none;
user-select: none;
}

/* stylelint-disable-next-line block-no-empty */
Expand Down
2 changes: 1 addition & 1 deletion components/checkbox/html/story-template.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const Checkbox = ({
<div className="utrecht-html">
<input
type="checkbox"
checked={checked}
defaultChecked={checked}
aria-invalid={invalid}
disabled={disabled}
required={required}
Expand Down
Loading

0 comments on commit fe27536

Please sign in to comment.