Skip to content

Commit

Permalink
Deploying to gh-pages from @ 4a41faf 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
remypar5 committed Sep 27, 2024
1 parent 57780fa commit 3216a11
Show file tree
Hide file tree
Showing 298 changed files with 1,993 additions and 1,191 deletions.
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { an as isSymbol_1, ao as Tr, a2 as gB, a0 as FB, w as wL, ap as MarkupIcon, aq as getControlId } from "./index-pRJpE9Zb.js";
import { an as isSymbol_1, ao as Tr, a2 as gB, a0 as FB, w as wL, ap as MarkupIcon, aq as getControlId } from "./index-BrWqjNpG.js";
import { R as React, r as reactExports } from "./index-aC1ZMUrs.js";
import { g as getDefaultExportFromCjs } from "./_commonjsHelpers-CcAunmGO.js";
import { _ as _root, i as isObject_1 } from "./index-DtSuK_9N.js";
import "./iframe-fAoXuYZs.js";
import "./iframe-J37HtSdB.js";
import "../sb-preview/runtime.js";
import "./index-B63kQkss.js";
import "./index-DLlB04eo.js";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-DXHhUSGJ.js","./index-aC1ZMUrs.js","./_commonjsHelpers-CcAunmGO.js"])))=>i.map(i=>d[i]);
import { _ as __vitePreload } from "./iframe-fAoXuYZs.js";
import { _ as __vitePreload } from "./iframe-J37HtSdB.js";
import { R as React, r as reactExports } from "./index-aC1ZMUrs.js";
import { r as renderElement, u as unmountElement } from "./react-18-BEw2RJX7.js";
import { ai as CodeOrSourceMdx, aj as AnchorMdx, ak as HeadersMdx, al as Docs } from "./index-pRJpE9Zb.js";
import { ai as CodeOrSourceMdx, aj as AnchorMdx, ak as HeadersMdx, al as Docs } from "./index-BrWqjNpG.js";
import "../sb-preview/runtime.js";
import "./_commonjsHelpers-CcAunmGO.js";
import "./index-B63kQkss.js";
Expand Down
8 changes: 4 additions & 4 deletions assets/alert-HoAEptpf.js → assets/alert-DC_FJBMH.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js";
import { useMDXComponents } from "./index-DXHhUSGJ.js";
import { ae as Meta, ah as Markdown2, af as Canvas, ag as Controls3, am as DescriptionContainer } from "./index-pRJpE9Zb.js";
import { A as AlertStories, P as Playground, I as Info, O as Ok, W as Warning, E as Error, a as AriaRole } from "./alert.stories-AKJquQPC.js";
import { ae as Meta, ah as Markdown2, af as Canvas, ag as Controls3, am as DescriptionContainer } from "./index-BrWqjNpG.js";
import { A as AlertStories, P as Playground, I as Info, O as Ok, W as Warning, E as Error, a as AriaRole } from "./alert.stories-5ne-VdK0.js";
import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js";
import "./index-aC1ZMUrs.js";
import "./_commonjsHelpers-CcAunmGO.js";
import "./iframe-fAoXuYZs.js";
import "./iframe-J37HtSdB.js";
import "../sb-preview/runtime.js";
import "./index-B63kQkss.js";
import "./index-DLlB04eo.js";
import "./index-DtSuK_9N.js";
import "./index-BdOSk9or.js";
import "./components-CiECMaMi.js";
import "./components-BEi5gG--.js";
import "./createVisualRegressionStory-CMDMpfq0.js";
const markdown = '<!-- @license CC0-1.0 -->\n\n# Alert\n\nDe _alert component_ is er voor berichten die de gebruiker snel moet weten, omdat ze belangrijk zijn voor het uitvoeren van de huidige taak. De alert is alleen voor eenvoudige berichten. Gebruik in de alert geen buttons, geen formulier-componenten en geen complexe opmaak zoals tabellen.\n\nLet op: de alert component gebruiken kan essentieël zijn voor gebruikers van een schermvoorlezer, maar onjuist gebruik kan heel erg vervelend zijn.\n\nGebruik niet een alert voor een algemene aankondiging die op meerdere pagina\'s staat, als het niet per se relevant is voor de huidige taak van de bezoeker. De alert wordt door schermvoorlezers als eerste voorgelezen op elke pagina waar de alert staat, het kan lastig zijn de website te gebruiken als de schermlezer elke keer wordt geblokkeerd met steeds dezelfde melding. Gebruik in die situaties de notification banner component.\n\n## Componenten die lijken op alert\n\n- de _alert_: wordt zo snel mogelijk aangekondigd.\n- de _notification banner_: wordt ook snel aangekondigd, omdat het één van eerste onderdelen van de pagina is als je de banner plaatst aan het begin van de page header. Je kunt de banner overslaan een _skip link_.\n- de _error appearance_ van de _form field description_: voor feedback in een formulier die hoort bij een form control. Wordt aangekondigd door schermlezers wanneer de form control focus heeft.\n\n## Tekst\n\nSchrijf een bericht voor de alert die ook duidelijk is als de gebruiker geen icoon of signaalkleur ziet.\n\nLet op: als de tekst met een script aangepast wordt dan wordt de alert in zijn geheel nogmaals voorgelezen door een schermvoorlezer. Een tekst met een veranderend onderdeel zoals "Over 14 minuten en 59 seconden verloopt je sessie.", heeft als effect dat de schermlezer alleen nog de alert voorleest en de pagina verder onbruikbaar is.\n\n## HTML\n\nHet belangrijkste onderdeel van de alert is het bericht, plaats die in een `<div role="alert">`.\n\nGebruik bij voorkeur een _paragraph component_ voor de inhoud van het bericht, voor een goede `font-size` en `line-height` en zodat de alert `margin` heeft wanneer de CSS niet geladen kan worden.\n\nAls je wel een button gebruikt (bijvoorbeeld om de alert te verbergen), plaats die dan nooit binnen het element met `role="alert"`, maar daarbuiten.\n\n```html\n<div class="utrecht-alert">\n <div class="utrecht-alert__icon">\n <!-- optioneel: een icon -->\n </div>\n <div class="utrecht-alert__message" role="alert">\n <!-- het bericht, bijvoorbeeld: -->\n <p class="utrecht-paragraph">Let op: er is nu een storing waardoor...</p>\n </div>\n <!-- optioneel en nog niet ondersteund: een button, buiten het bericht -->\n</div>\n```\n\n## Relevante WCAG eisen\n\n- [WCAG eis 1.1.1](https://www.w3.org/TR/WCAG21/#non-text-content): als de alert een icoon gebruikt met een bepaalde betekenis, moet de betekenis ook uit de tekst blijken.\n- [WCAG eis 1.4.1](https://www.w3.org/TR/WCAG21/#use-of-color): als de alert een signaalkleur gebruikt moet de tekst datzelfde ook duidelijk maken, bijvoorbeeld met signaalwoorden. Gebruik bijvoorbeeld "Let op:" voor een waarschuwing.\n- [WCAG eis 2.2.1](https://www.w3.org/TR/WCAG21/#timing-adjustable): laat de alert niet automatisch verdwijnen na een bepaalde tijd (lees de WCAG specificatie voor enkele uitzonderingen).\n';
function _createMdxContent(props) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js";
import { a as LuxAlert$1, L as LuxParagraph$1, t as tokens, c as createDesignTokensStory, b as LuxButton$1 } from "./components-CiECMaMi.js";
import { b as LuxAlert$1, a as LuxParagraph$1, t as tokens, c as createDesignTokensStory, d as LuxButton$1 } from "./components-BEi5gG--.js";
import { c as createVisualRegressionStory, V as VisualRegressionWrapper } from "./createVisualRegressionStory-CMDMpfq0.js";
const utrecht = {
alert: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js";
import { useMDXComponents } from "./index-DXHhUSGJ.js";
import { ae as Meta } from "./index-pRJpE9Zb.js";
import { ae as Meta } from "./index-BrWqjNpG.js";
import { D as DesignTokenOverview, a as DesignTokenBorderPreview } from "./DesignTokenSpacingPreview-yVeFn0oZ.js";
import "./index-aC1ZMUrs.js";
import "./_commonjsHelpers-CcAunmGO.js";
import "./iframe-fAoXuYZs.js";
import "./iframe-J37HtSdB.js";
import "../sb-preview/runtime.js";
import "./index-B63kQkss.js";
import "./index-DLlB04eo.js";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js";
import { useMDXComponents } from "./index-DXHhUSGJ.js";
import { ae as Meta } from "./index-pRJpE9Zb.js";
import { ae as Meta } from "./index-BrWqjNpG.js";
import { D as DesignTokenOverview, a as DesignTokenBorderPreview } from "./DesignTokenSpacingPreview-yVeFn0oZ.js";
import "./index-aC1ZMUrs.js";
import "./_commonjsHelpers-CcAunmGO.js";
import "./iframe-fAoXuYZs.js";
import "./iframe-J37HtSdB.js";
import "../sb-preview/runtime.js";
import "./index-B63kQkss.js";
import "./index-DLlB04eo.js";
Expand Down
12 changes: 6 additions & 6 deletions assets/button-BBhQNEcA.js → assets/button-Dr0zGJky.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js";
import { useMDXComponents } from "./index-DXHhUSGJ.js";
import { ae as Meta, ah as Markdown2, af as Canvas, ag as Controls3, am as DescriptionContainer } from "./index-pRJpE9Zb.js";
import { B as ButtonStories, P as Playground, a as Primary, S as Secondary, T as Tertiary, A as Active, H as Hover, F as Focus, b as Busy, c as Toggle, W as WithStartIcon, d as WithEndIcon } from "./button.stories-dNaKAHMe.js";
import { ae as Meta, ah as Markdown2, af as Canvas, ag as Controls3, am as DescriptionContainer } from "./index-BrWqjNpG.js";
import { B as ButtonStories, P as Playground, a as Primary, S as Secondary, T as Tertiary, A as Active, H as Hover, F as Focus, b as Busy, c as Toggle, W as WithStartIcon, d as WithEndIcon } from "./button.stories-pOyndj3o.js";
import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js";
import "./index-aC1ZMUrs.js";
import "./_commonjsHelpers-CcAunmGO.js";
import "./iframe-fAoXuYZs.js";
import "./iframe-J37HtSdB.js";
import "../sb-preview/runtime.js";
import "./index-B63kQkss.js";
import "./index-DLlB04eo.js";
import "./index-DtSuK_9N.js";
import "./index-BdOSk9or.js";
import "./components-CiECMaMi.js";
import "./components-BEi5gG--.js";
import "./createVisualRegressionStory-CMDMpfq0.js";
import "./index-DbgQBs_-.js";
const markdown = '<!-- @license CC0-1.0 -->\n\n# Button\n\nDe button component gebruik je zodat de gebruiker acties kan uit te voeren en de _user interface_ kan bedienen.\n\nVaak gebruik je een button in combinatie met de _button group_ component: plaats de button in een _button group_ als je ruimte tussen de button en andere componenten wilt.\n\n## Toepassing\n\n### Gebruik je een button of link?\n\nSommige ontwerpen hebben een button om naar een andere pagina te gaan. Sommige ontwerpen hebben link in een formulier om naar de vorige pagina te gaan, terwijl de gegevens wel tussentijds verstuurd en opgeslagen worden. Het is belangrijk dat je het goede HTML-element gebruikt dat past bij de actie, in plaats van het HTML-element kiest dat past bij het ontwerp.\n\nOm deze patronen te gebruiken zijn er vier componenten nodig:\n\n- link\n- link die eruit ziet als button\n- button\n- button die eruit ziet als link\n\nGebruik alleen een `<a>` element wanneer er geen gevolgen zijn. Gebruik een `<button>` element als je niet de browser back button kan gebruiken om het effect ongedaan te maken.\n\nEnkele voorbeelden waar je een link gebruikt:\n\n- een _call to action_ om te registreren: een link.\n- een knop om naar het loginformulier te gaan: een link\n- dezelfde pagina in een andere taal bekijken: een link.\n\nEnkele voorbeelden waar je een button gebruikt:\n\n- "Volgende stap" of "vorige stap" in een formulier. Gebruik een submit button wanneer gegevens tussendoor opgeslagen worden of verstuurd worden.\n- Uitloggen: button. Log niet uit met een link! Je navigatie moet het ondersteunen om zowel links als button dezelfde stijl te geven.\n- de voorkeurstaal aanpassen en dezelfde pagina in een andere taal bekijken: een button.\n\n## Anatomie\n\n### Terminologie\n\n- **button**: van het `<button>` HTML element, `role="button"` in ARIA.\n- **appearance**: van de [CSS `appearance` property](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) (bijvoorbeeld: `appearance: push-button`).\n\n### States\n\n- `normal`\n- `active`: de gebruiker activeert de button op dit moment. Bijvoorbeeld door er op te klikken. De `active` state duurt maar heel kort.\n- `pressed`: een ingedrukte button, bijvoorbeeld de _bold button_ in een toolbar van een rich text editor, of de button van een date picker popup. Een button kan lange tijd `pressed` zijn, in tegenstelling tot `active`.\n- `hover`: de gebruiker heeft de aanwijzer boven de button. Bijvoorbeeld door met de muiscursor er over te \'zweven\'.\n- `focus`\n- `focus` en `focus-visible`: de link heeft de focus door de `Tab` knop van het keyboard.\n- `disabled`\n- `disabled` en `focus-visible`: als een button disabled is (zeker een _primary action button_), dan moet wel duidelijk zijn dat de button er is en wat je kunt doen om verder te komen. Screen reader gebruikers moeten daarom focus kunnen hebben op een disabled button, om de bijbehorende uitleg te horen.\n\n## Design\n\nMaak elke button 44×44px of groter ([WCAG 2.5.5](https://www.w3.org/TR/WCAG21/#target-size)).\n\n## HTML\n\nGebruik het `<button type="button">` element in HTML om een button te maken.\n\nEen alternatief op `<button>` is bijvoorbeeld `<input type="button">`, maar die heeft minder mogelijkheden voor de inhoud van de button. Je kunt er bijvoorbeeld geen SVG icon in plaatsen. Nog een alternatief is `<div role="button" tabindex="0">`, maar `<button>` heeft het voordeel dat die ook werkt zonder CSS en zonder JavaScript.\n\n### Formulieren verzenden\n\nVoor formulieren verzenden gebruik je `<button type="submit">`. Gebruik ook de `submit` event van een formulier en niet alleen de `click` event van de button, zodat je ook vanuit een formulierveld op `Enter` kan drukken om het formulier te verzenden.\n\n## Hoe het niet moet\n\n### Geen koppeling met uitleg over button\n\nNiet:\n\n```html\n<p>\n <label for="upload">Bijlage:</label>\n <input type="file" id="upload" />\n</p>\n<p>Je mag een JPG of een PDF uploaden.</p>\n```\n\nWel:\n\n```html\n<p>\n <label for="upload">Bijlage:</label>\n <input type="file" id="upload" aria-describedby="upload-description" />\n</p>\n<p id="upload-description">Je mag een JPG of een PDF uploaden.</p>\n```\n\n---\n\nNiet:\n\n```html\n<p>\n <button type="submit">Verzenden</button>\n</p>\n<p>Door het formulier te verzenden ga je akkoord met de algemene voorwaarden.</p>\n```\n\nWel:\n\n```html\n<p>\n <button type="submit" aria-describedby="submit-description">Verzenden</button>\n</p>\n<p id="submit-description">Door het formulier te verzenden ga je akkoord met de algemene voorwaarden.</p>\n```\n\n### Geen koppeling met foutmelding bij een button\n\nNiet:\n\n```html\n<p>\n <button type="submit">Opslaan</button>\n</p>\n<p class="error">Je bent uitgelogd. Log opnieuw in om je wijzigingen op te slaan.</p>\n```\n\nWel:\n\n```html\n<p>\n <label for="upload">Bijlage:</label>\n <input type="file" id="upload" aria-describedby="upload-description" />\n</p>\n<p id="upload-description" class="error">Je mag een JPG of een PDF uploaden.</p>\n```\n\n## Relevante WCAG regels\n\n- [WCAG eis 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): je kan de button activeren met `Enter` of `Space`, en het is mogelijk met `Tab` de button te focussen. `Space` gebruiken heeft dan niet het effect dat de pagina scrollt.\n- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de label van de button moet duidelijk zijn\n- [WCAG eis 2.5.2](https://www.w3.org/TR/WCAG21/#pointer-cancellation):\n - gebruik niet de `mousedown` event om de button te activeren, gebruik liever de `click` event\n - `mousedown` mag alleen gebruikt worden als `mouseup` het effect weer ongedaan maakt, bijvoorbeeld een "_fast foward_" button om audio of video door te spoelen.\n- [WCAG eis 2.5.5](https://www.w3.org/TR/WCAG21/#target-size): de button moet groot genoeg zijn om aan te klikken, en kleine buttons moeten niet te dicht op een andere button staan.\n';
Expand Down Expand Up @@ -64,8 +64,8 @@ function _createMdxContent(props) {
of: Tertiary
}), "\n", jsxRuntimeExports.jsx(Canvas, {
of: Tertiary
}), "\n", jsxRuntimeExports.jsx(_components.h2, {
id: "states",
}), "\n", jsxRuntimeExports.jsx("h2", {
id: "states_examples",
children: "States"
}), "\n", jsxRuntimeExports.jsx(_components.h3, {
id: "active",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js";
import { t as tokens, e as LuxIconChevronLeft, f as LuxIconChevronRight, c as createDesignTokensStory, b as LuxButton$1 } from "./components-CiECMaMi.js";
import { t as tokens, f as LuxIconChevronLeft, h as LuxIconChevronRight, c as createDesignTokensStory, d as LuxButton$1 } from "./components-BEi5gG--.js";
import { i as instrument } from "./index-DbgQBs_-.js";
import { g as getDefaultExportFromCjs } from "./_commonjsHelpers-CcAunmGO.js";
import "./createVisualRegressionStory-CMDMpfq0.js";
Expand Down Expand Up @@ -27384,7 +27384,7 @@ const meta = {
options: [void 0, "button", "primary-action-button", "secondary-action-button", "subtle-button"]
},
children: {
name: "label",
name: "content (label)",
description: "Button text",
control: "text"
},
Expand All @@ -27410,6 +27410,11 @@ const meta = {
summary: "button"
}
}
},
forceState: {
table: {
disable: true
}
}
}
};
Expand Down Expand Up @@ -27489,6 +27494,13 @@ const Active = {
children: "Active Button",
forceState: "active"
},
argTypes: {
appearance: {
table: {
disable: true
}
}
},
play: async ({
canvasElement
}) => {
Expand All @@ -27513,6 +27525,13 @@ const Hover = {
children: "Hover Button",
forceState: "hover"
},
argTypes: {
appearance: {
table: {
disable: true
}
}
},
render: (args) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(LuxButton, { ...args, appearance: "primary-action-button", children: args.children }),
/* @__PURE__ */ jsxRuntimeExports.jsx(LuxButton, { ...args, appearance: "secondary-action-button", children: args.children }),
Expand All @@ -27527,6 +27546,13 @@ const Focus = {
children: "Focus Button",
forceState: "focus"
},
argTypes: {
appearance: {
table: {
disable: true
}
}
},
render: (args) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(LuxButton, { ...args, appearance: "primary-action-button", children: args.children }),
/* @__PURE__ */ jsxRuntimeExports.jsx(LuxButton, { ...args, appearance: "secondary-action-button", children: args.children }),
Expand Down Expand Up @@ -27662,6 +27688,13 @@ Active.parameters = {
children: 'Active Button',
forceState: 'active'
},
argTypes: {
appearance: {
table: {
disable: true
}
}
},
play: async ({
canvasElement
}) => {
Expand Down Expand Up @@ -27703,6 +27736,13 @@ Hover.parameters = {
children: 'Hover Button',
forceState: 'hover'
},
argTypes: {
appearance: {
table: {
disable: true
}
}
},
render: args => <>
<LuxButton {...args} appearance="primary-action-button">
{args.children}
Expand Down Expand Up @@ -27734,6 +27774,13 @@ Focus.parameters = {
children: 'Focus Button',
forceState: 'focus'
},
argTypes: {
appearance: {
table: {
disable: true
}
}
},
render: args => <>
<LuxButton {...args} appearance="primary-action-button">
{args.children}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js";
import { useMDXComponents } from "./index-DXHhUSGJ.js";
import { ae as Meta } from "./index-pRJpE9Zb.js";
import { ae as Meta } from "./index-BrWqjNpG.js";
import { D as DesignTokenOverview, b as DesignTokenColorPreview } from "./DesignTokenSpacingPreview-yVeFn0oZ.js";
import "./index-aC1ZMUrs.js";
import "./_commonjsHelpers-CcAunmGO.js";
import "./iframe-fAoXuYZs.js";
import "./iframe-J37HtSdB.js";
import "../sb-preview/runtime.js";
import "./index-B63kQkss.js";
import "./index-DLlB04eo.js";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js";
import { useMDXComponents } from "./index-DXHhUSGJ.js";
import { ae as Meta } from "./index-pRJpE9Zb.js";
import { ae as Meta } from "./index-BrWqjNpG.js";
import { D as DesignTokenOverview, b as DesignTokenColorPreview } from "./DesignTokenSpacingPreview-yVeFn0oZ.js";
import "./index-aC1ZMUrs.js";
import "./_commonjsHelpers-CcAunmGO.js";
import "./iframe-fAoXuYZs.js";
import "./iframe-J37HtSdB.js";
import "../sb-preview/runtime.js";
import "./index-B63kQkss.js";
import "./index-DLlB04eo.js";
Expand Down
Loading

0 comments on commit 3216a11

Please sign in to comment.