diff --git a/assets/Color-KGDBMAHA-D-EU84bj.js b/assets/Color-KGDBMAHA-CWBS_Wu0.js similarity index 99% rename from assets/Color-KGDBMAHA-D-EU84bj.js rename to assets/Color-KGDBMAHA-CWBS_Wu0.js index 439fd664..648d8cc6 100644 --- a/assets/Color-KGDBMAHA-D-EU84bj.js +++ b/assets/Color-KGDBMAHA-CWBS_Wu0.js @@ -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-DjOCnJ5z.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-BIS83Dcj.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-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/DocsRenderer-PKQXORMH-Bb9HMIyP.js b/assets/DocsRenderer-PKQXORMH-DIYNS0iY.js similarity index 95% rename from assets/DocsRenderer-PKQXORMH-Bb9HMIyP.js rename to assets/DocsRenderer-PKQXORMH-DIYNS0iY.js index 4afddce3..ef5dab32 100644 --- a/assets/DocsRenderer-PKQXORMH-Bb9HMIyP.js +++ b/assets/DocsRenderer-PKQXORMH-DIYNS0iY.js @@ -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-D8Bsb5lD.js"; +import { _ as __vitePreload } from "./iframe-DZw5951-.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 { aj as CodeOrSourceMdx, ak as AnchorMdx, al as HeadersMdx, am as Docs } from "./index-DjOCnJ5z.js"; +import { aj as CodeOrSourceMdx, ak as AnchorMdx, al as HeadersMdx, am as Docs } from "./index-BIS83Dcj.js"; import "../sb-preview/runtime.js"; import "./_commonjsHelpers-CcAunmGO.js"; import "./index-B63kQkss.js"; diff --git a/assets/alert-DNPNbpa2.js b/assets/alert-ByYjpmaI.js similarity index 97% rename from assets/alert-DNPNbpa2.js rename to assets/alert-ByYjpmaI.js index a274f706..fdf43aa3 100644 --- a/assets/alert-DNPNbpa2.js +++ b/assets/alert-ByYjpmaI.js @@ -1,12 +1,12 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-DjOCnJ5z.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-BIS83Dcj.js"; import { m as markdown } from "./README-i1AxuvIj.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-DtFtqMG0.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/alert-D1XVPspT.js b/assets/alert-CYTQxlgZ.js similarity index 95% rename from assets/alert-D1XVPspT.js rename to assets/alert-CYTQxlgZ.js index 601ce91e..d27a92de 100644 --- a/assets/alert-D1XVPspT.js +++ b/assets/alert-CYTQxlgZ.js @@ -1,18 +1,18 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3 } from "./index-DjOCnJ5z.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3 } from "./index-BIS83Dcj.js"; import { m as markdown } from "./README-i1AxuvIj.js"; -import { A as AlertStories, P as Playground, I as InfoAlert, S as SuccessAlert, W as WarningAlert, E as ErrorAlert } from "./alert.stories-7eMN2C8_.js"; +import { A as AlertStories, P as Playground, I as InfoAlert, S as SuccessAlert, W as WarningAlert, E as ErrorAlert } from "./alert.stories-DIOVyTFb.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-25q23o6t.js"; +import "./index-FCweSokR.js"; import "./index-BLZ711uc.js"; function _createMdxContent(props) { const _components = { diff --git a/assets/alert.stories-7eMN2C8_.js b/assets/alert.stories-DIOVyTFb.js similarity index 99% rename from assets/alert.stories-7eMN2C8_.js rename to assets/alert.stories-DIOVyTFb.js index 62737607..e72835af 100644 --- a/assets/alert.stories-7eMN2C8_.js +++ b/assets/alert.stories-DIOVyTFb.js @@ -1,6 +1,6 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o; import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; -import { L as LuxAlert, a as LuxHeading1, b as LuxParagraph } from "./index-25q23o6t.js"; +import { L as LuxAlert, a as LuxHeading1, b as LuxParagraph } from "./index-FCweSokR.js"; import { t as tokens } from "./index-BLZ711uc.js"; const meta = { title: "React Components/Alert", diff --git a/assets/border-tokens-Bp4laBWX.js b/assets/border-tokens-B3Vg3v7O.js similarity index 96% rename from assets/border-tokens-Bp4laBWX.js rename to assets/border-tokens-B3Vg3v7O.js index bdaa8c30..14eca43f 100644 --- a/assets/border-tokens-Bp4laBWX.js +++ b/assets/border-tokens-B3Vg3v7O.js @@ -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-DjOCnJ5z.js"; +import { ae as Meta } from "./index-BIS83Dcj.js"; import { D as DesignTokenOverview, a as DesignTokenBorderPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/border-tokens-DBBmM6CK.js b/assets/border-tokens-D8w13NIe.js similarity index 97% rename from assets/border-tokens-DBBmM6CK.js rename to assets/border-tokens-D8w13NIe.js index 4402dc36..dd902f4e 100644 --- a/assets/border-tokens-DBBmM6CK.js +++ b/assets/border-tokens-D8w13NIe.js @@ -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-DjOCnJ5z.js"; +import { ae as Meta } from "./index-BIS83Dcj.js"; import { D as DesignTokenOverview, a as DesignTokenBorderPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/button-CVmzTrnJ.js b/assets/button-7ARSaSV0.js similarity index 98% rename from assets/button-CVmzTrnJ.js rename to assets/button-7ARSaSV0.js index 9b83f6e1..edd8c192 100644 --- a/assets/button-CVmzTrnJ.js +++ b/assets/button-7ARSaSV0.js @@ -1,12 +1,12 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-DjOCnJ5z.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-BIS83Dcj.js"; import { m as markdown } from "./README-8lw3oO5y.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-Cla13ruH.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/button-CdojnM5b.js b/assets/button-BDFgV08J.js similarity index 96% rename from assets/button-CdojnM5b.js rename to assets/button-BDFgV08J.js index 0e11e8a1..07eb8e6c 100644 --- a/assets/button-CdojnM5b.js +++ b/assets/button-BDFgV08J.js @@ -1,18 +1,18 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3 } from "./index-DjOCnJ5z.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3 } from "./index-BIS83Dcj.js"; import { m as markdown } from "./README-8lw3oO5y.js"; -import { B as ButtonStories, P as Playground, S as SmallButton, a as Primary, b as Secondary, T as Tertiary, A as Active, F as Focus, H as Hover, D as Disabled, c as Busy, d as Toggle, e as ButtonWithIconAtPositionStart, f as ButtonWithIconAtPositionEnd } from "./button.stories-By0x1TI6.js"; +import { B as ButtonStories, P as Playground, S as SmallButton, a as Primary, b as Secondary, T as Tertiary, A as Active, F as Focus, H as Hover, D as Disabled, c as Busy, d as Toggle, e as ButtonWithIconAtPositionStart, f as ButtonWithIconAtPositionEnd } from "./button.stories-D5nKDnfC.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-25q23o6t.js"; +import "./index-FCweSokR.js"; import "./index-BLZ711uc.js"; function _createMdxContent(props) { const _components = { diff --git a/assets/button.stories-By0x1TI6.js b/assets/button.stories-D5nKDnfC.js similarity index 99% rename from assets/button.stories-By0x1TI6.js rename to assets/button.stories-D5nKDnfC.js index c7f980f5..df53b79e 100644 --- a/assets/button.stories-By0x1TI6.js +++ b/assets/button.stories-D5nKDnfC.js @@ -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, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M; import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; -import { c as LuxButton } from "./index-25q23o6t.js"; +import { c as LuxButton } from "./index-FCweSokR.js"; import { t as tokens } from "./index-BLZ711uc.js"; const { useArgs } = __STORYBOOK_MODULE_PREVIEW_API__; const meta = { diff --git a/assets/checkbox-CF3TDzc1.js b/assets/checkbox-CF3TDzc1.js new file mode 100644 index 00000000..387f31f7 --- /dev/null +++ b/assets/checkbox-CF3TDzc1.js @@ -0,0 +1,111 @@ +import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; +import { useMDXComponents } from "./index-DXHhUSGJ.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3 } from "./index-BIS83Dcj.js"; +import { C as CheckboxStories, P as Playground, D as Default, a as Checked, b as Disabled, c as CheckedAndDisabled, H as Hover, F as Focus, d as FocusVisible } from "./checkbox.stories-BEKsIV01.js"; +import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; +import "./index-aC1ZMUrs.js"; +import "./_commonjsHelpers-CcAunmGO.js"; +import "./iframe-DZw5951-.js"; +import "../sb-preview/runtime.js"; +import "./index-B63kQkss.js"; +import "./index-vKye6HrD.js"; +import "./index-DtSuK_9N.js"; +import "./index-BdOSk9or.js"; +import "./index-FCweSokR.js"; +import "./index-BLZ711uc.js"; +const markdown = '\n\n# Checkbox\n\n## Terminologie\n\n- **checkbox**: `type="checkbox"` in HTML, [`role="checkbox"`](https://www.w3.org/TR/wai-aria-1.2/#checkbox) in WAI-ARIA 1.2, "checkbox" in [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox).\n- **checked**: `checked` attribuut in HTML, `aria-checked="true"` in [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/#aria-checked), `:checked` pseudo-class in CSS.\n\n## Class names\n\n- `utrecht-checkbox`\n\n## Introduction\n\nCheckboxes are usually used to provide a way for users to make a range of selections (zero, one or more). They can also be used to tell users that they agree to specific terms.\n\n## When to use\n\nCheckboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.\n\n### Forms\n\nCan be used in forms on a full page or in modals.\n\n### Terms and conditions\n\nTurning the checkbox input on or off can indicate whether you agree to the terms.\n\n## Alternatives and related components\n\nUse radio buttons to display a list of options where users can only make one choice.\n\n## Anatomy\n\nThe checkbox consists of:\n\n1. Label (optional): indicates what should be selected below.\n2. Checkbox input: a checkbox input that indicates the correct status. By default it is not active.\n3. Checkbox label: describes the information you can select or deselect.\n4. Helper text (optional): displays more information about the checkboxes\n\n## (Interactive) states\n\nThe checkbox contains the states normal, hover, disabled, error and focus.\n\n## Accessibility\n\nScreen readers automatically report the status of the check box.\n\n### Labeling\n\n### External links\n\n### Keyboard support\n\n- Move focus to each checkbox using the tab key (or shift + tab when tabbing backwards)\n- Activate or deactivate checkboxes with the space key\n\n## Content guidelines\n\n### Checkbox labels\n\nCheckbox labels must:\n\n- Start with a capital letter\n- Not end in punctuation if it’s a single sentence, word, or a fragment\n- In case the checkbox asks to agree to the terms and conditions, use the first person\n\n## Best practices\n\n### Do\'s\n\nCheckboxes must:\n\n- Work independently of each other: selecting a checkbox may not change the selection status of another checkbox in the list.\n- Be positively boxed: for example “Enable notifications” instead of “Disable notifications”.\n- Always have a label handy when you use it to turn a setting on or off.\n- Use label tags as click targets.\n- Be arranged in a logical order, whether alphabetical, numeric, time-based or some other clear system.\n- Link to more information or have a subtitle for more explanation. Don\'t rely on tooltips to explain a checkbox.\n- If they are too long, run over the second line. This is preferable than truncation.\n- If they are too long, they will be aligned left\n- If they are too long, let the text flow under the checkbox so that the control and label are aligned at the top.\n\n### Don\'ts\n\nCheckboxes must:\n\n- Not cut with an omit task if the label is too long and run over 2 lines.\n\n## Relevante WCAG eisen\n\n- [WCAG eis 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html):\n - Gebruik `aria-controls` als de checkbox een regio zichtbaar of onzichtbaar maakt.\n- [WCAG eis 2.4.7](https://www.w3.org/TR/WCAG21/#focus-visible): focus moet zichtbaar zijn.\n- [WCAG eis 2.5.5](https://www.w3.org/TR/WCAG21/#target-size): de checkbox moet groot genoeg zijn om aan te klikken, ten minste 44×44px.\n\n## References\n\n- [https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)\n- [https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41](https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41)\n'; +function _createMdxContent(props) { + const _components = { + h1: "h1", + h2: "h2", + h3: "h3", + li: "li", + ul: "ul", + ...useMDXComponents(), + ...props.components + }; + return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { + children: [jsxRuntimeExports.jsx(Meta, { + of: CheckboxStories + }), "\n", jsxRuntimeExports.jsx(_components.h1, { + id: "checkbox", + children: "Checkbox" + }), "\n", jsxRuntimeExports.jsx(CitationDocumentation, { + component: "Utrecht Checkbox", + url: "https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-checkbox--docs" + }), "\n", jsxRuntimeExports.jsx(Markdown2, { + children: markdown + }), "\n", jsxRuntimeExports.jsx(_components.h2, { + id: "notes", + children: "Notes" + }), "\n", jsxRuntimeExports.jsxs(_components.ul, { + children: ["\n", jsxRuntimeExports.jsx(_components.li, { + children: "The checkbox supports different states: checked, disabled, invalid, required" + }), "\n", jsxRuntimeExports.jsx(_components.li, { + children: "All states can be combined" + }), "\n", jsxRuntimeExports.jsx(_components.li, { + children: "The component inherits its styling from the Utrecht Design System" + }), "\n"] + }), "\n", jsxRuntimeExports.jsx(_components.h2, { + id: "playground", + children: "Playground" + }), "\n", jsxRuntimeExports.jsx(Canvas, { + of: Playground + }), "\n", jsxRuntimeExports.jsx(Controls3, { + of: Playground + }), "\n", jsxRuntimeExports.jsx(_components.h2, { + id: "default", + children: "Default" + }), "\n", jsxRuntimeExports.jsx(Canvas, { + of: Default + }), "\n", jsxRuntimeExports.jsx(_components.h2, { + id: "states", + children: "States" + }), "\n", jsxRuntimeExports.jsx(_components.h3, { + id: "checked", + children: "Checked" + }), "\n", jsxRuntimeExports.jsx(Canvas, { + of: Checked + }), "\n", jsxRuntimeExports.jsx(_components.h3, { + id: "disabled", + children: "Disabled" + }), "\n", jsxRuntimeExports.jsx(Canvas, { + of: Disabled + }), "\n", jsxRuntimeExports.jsx(_components.h3, { + id: "checked-and-disabled", + children: "Checked and Disabled" + }), "\n", jsxRuntimeExports.jsx(Canvas, { + of: CheckedAndDisabled + }), "\n", jsxRuntimeExports.jsx(_components.h3, { + id: "hover", + children: "Hover" + }), "\n", jsxRuntimeExports.jsx(Canvas, { + of: Hover + }), "\n", jsxRuntimeExports.jsx(_components.h3, { + id: "focus", + children: "Focus" + }), "\n", jsxRuntimeExports.jsx(Canvas, { + of: Focus + }), "\n", jsxRuntimeExports.jsx(_components.h3, { + id: "focus-visible", + children: "Focus Visible" + }), "\n", jsxRuntimeExports.jsx(Canvas, { + of: FocusVisible + })] + }); +} +function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ...useMDXComponents(), + ...props.components + }; + return MDXLayout ? jsxRuntimeExports.jsx(MDXLayout, { + ...props, + children: jsxRuntimeExports.jsx(_createMdxContent, { + ...props + }) + }) : _createMdxContent(props); +} +export { + MDXContent as default +}; diff --git a/assets/checkbox.stories-BEKsIV01.js b/assets/checkbox.stories-BEKsIV01.js new file mode 100644 index 00000000..5d4b2091 --- /dev/null +++ b/assets/checkbox.stories-BEKsIV01.js @@ -0,0 +1,201 @@ +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 { d as LuxCheckbox } from "./index-FCweSokR.js"; +import { t as tokens } from "./index-BLZ711uc.js"; +const meta = { + title: "React Components/Checkbox", + id: "react-components-checkbox", + component: LuxCheckbox, + subcomponents: {}, + parameters: { + tokens, + tokensPrefix: "utrecht-checkbox" + }, + argTypes: { + checked: { + description: "Checked state", + control: "boolean" + }, + disabled: { + description: "Disabled state", + control: "boolean" + } + } +}; +const CheckboxTemplate = { + args: { + checked: false, + disabled: false, + invalid: false, + required: false + }, + render: ({ + ...args + }) => /* @__PURE__ */ jsxRuntimeExports.jsx(LuxCheckbox, { ...args }) +}; +const Playground = { + ...CheckboxTemplate, + name: "Playground", + parameters: { + docs: { + sourceState: "shown" + } + }, + tags: ["!autodocs"] +}; +const Default = { + name: "Default", + args: {} +}; +const Checked = { + name: "Checked", + args: { + checked: true + } +}; +const Disabled = { + name: "Disabled", + args: { + disabled: true + } +}; +const CheckedAndDisabled = { + name: "Checked and Disabled", + args: { + checked: true, + disabled: true + } +}; +const Hover = { + ...CheckboxTemplate, + name: "Hover", + parameters: { + pseudo: { + hover: true + } + } +}; +const Focus = { + ...CheckboxTemplate, + name: "Focus", + parameters: { + pseudo: { + focus: true, + focusVisible: true + } + } +}; +const FocusVisible = { + ...CheckboxTemplate, + name: "Focus Visible", + parameters: { + pseudo: { + focusVisible: true + } + } +}; +Playground.parameters = { + ...Playground.parameters, + docs: { + ...(_a = Playground.parameters) == null ? void 0 : _a.docs, + source: { + originalSource: "{\n ...CheckboxTemplate,\n name: 'Playground',\n parameters: {\n docs: {\n sourceState: 'shown'\n }\n },\n tags: ['!autodocs']\n}", + ...(_c = (_b = Playground.parameters) == null ? void 0 : _b.docs) == null ? void 0 : _c.source + } + } +}; +Default.parameters = { + ...Default.parameters, + docs: { + ...(_d = Default.parameters) == null ? void 0 : _d.docs, + source: { + originalSource: "{\n name: 'Default',\n args: {}\n}", + ...(_f = (_e = Default.parameters) == null ? void 0 : _e.docs) == null ? void 0 : _f.source + } + } +}; +Checked.parameters = { + ...Checked.parameters, + docs: { + ...(_g = Checked.parameters) == null ? void 0 : _g.docs, + source: { + originalSource: "{\n name: 'Checked',\n args: {\n checked: true\n }\n}", + ...(_i = (_h = Checked.parameters) == null ? void 0 : _h.docs) == null ? void 0 : _i.source + } + } +}; +Disabled.parameters = { + ...Disabled.parameters, + docs: { + ...(_j = Disabled.parameters) == null ? void 0 : _j.docs, + source: { + originalSource: "{\n name: 'Disabled',\n args: {\n disabled: true\n }\n}", + ...(_l = (_k = Disabled.parameters) == null ? void 0 : _k.docs) == null ? void 0 : _l.source + } + } +}; +CheckedAndDisabled.parameters = { + ...CheckedAndDisabled.parameters, + docs: { + ...(_m = CheckedAndDisabled.parameters) == null ? void 0 : _m.docs, + source: { + originalSource: "{\n name: 'Checked and Disabled',\n args: {\n checked: true,\n disabled: true\n }\n}", + ...(_o = (_n = CheckedAndDisabled.parameters) == null ? void 0 : _n.docs) == null ? void 0 : _o.source + } + } +}; +Hover.parameters = { + ...Hover.parameters, + docs: { + ...(_p = Hover.parameters) == null ? void 0 : _p.docs, + source: { + originalSource: "{\n ...CheckboxTemplate,\n name: 'Hover',\n parameters: {\n pseudo: {\n hover: true\n }\n }\n}", + ...(_r = (_q = Hover.parameters) == null ? void 0 : _q.docs) == null ? void 0 : _r.source + } + } +}; +Focus.parameters = { + ...Focus.parameters, + docs: { + ...(_s = Focus.parameters) == null ? void 0 : _s.docs, + source: { + originalSource: "{\n ...CheckboxTemplate,\n name: 'Focus',\n parameters: {\n pseudo: {\n focus: true,\n focusVisible: true\n }\n }\n}", + ...(_u = (_t = Focus.parameters) == null ? void 0 : _t.docs) == null ? void 0 : _u.source + } + } +}; +FocusVisible.parameters = { + ...FocusVisible.parameters, + docs: { + ...(_v = FocusVisible.parameters) == null ? void 0 : _v.docs, + source: { + originalSource: "{\n ...CheckboxTemplate,\n name: 'Focus Visible',\n parameters: {\n pseudo: {\n focusVisible: true\n }\n }\n}", + ...(_x = (_w = FocusVisible.parameters) == null ? void 0 : _w.docs) == null ? void 0 : _x.source + } + } +}; +const __namedExportsOrder = ["Playground", "Default", "Checked", "Disabled", "CheckedAndDisabled", "Hover", "Focus", "FocusVisible"]; +const CheckboxStories = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + Checked, + CheckedAndDisabled, + Default, + Disabled, + Focus, + FocusVisible, + Hover, + Playground, + __namedExportsOrder, + default: meta +}, Symbol.toStringTag, { value: "Module" })); +export { + CheckboxStories as C, + Default as D, + Focus as F, + Hover as H, + Playground as P, + Checked as a, + Disabled as b, + CheckedAndDisabled as c, + FocusVisible as d +}; diff --git a/assets/color-tokens-DyYHzs6C.js b/assets/color-tokens-BE4V-dh6.js similarity index 99% rename from assets/color-tokens-DyYHzs6C.js rename to assets/color-tokens-BE4V-dh6.js index 239426c9..6febf163 100644 --- a/assets/color-tokens-DyYHzs6C.js +++ b/assets/color-tokens-BE4V-dh6.js @@ -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-DjOCnJ5z.js"; +import { ae as Meta } from "./index-BIS83Dcj.js"; import { D as DesignTokenOverview, b as DesignTokenColorPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/color-tokens-BSZWCnmY.js b/assets/color-tokens-Bdpwjlin.js similarity index 99% rename from assets/color-tokens-BSZWCnmY.js rename to assets/color-tokens-Bdpwjlin.js index efaf815a..c40d3ee7 100644 --- a/assets/color-tokens-BSZWCnmY.js +++ b/assets/color-tokens-Bdpwjlin.js @@ -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-DjOCnJ5z.js"; +import { ae as Meta } from "./index-BIS83Dcj.js"; import { D as DesignTokenOverview, b as DesignTokenColorPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/community-component-aanleveren-D5TDvYOy.js b/assets/community-component-aanleveren-LSCsWnEQ.js similarity index 99% rename from assets/community-component-aanleveren-D5TDvYOy.js rename to assets/community-component-aanleveren-LSCsWnEQ.js index 1cfd6da8..31e41a44 100644 --- a/assets/community-component-aanleveren-D5TDvYOy.js +++ b/assets/community-component-aanleveren-LSCsWnEQ.js @@ -1,9 +1,9 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2 } from "./index-DjOCnJ5z.js"; +import { ae as Meta, af as Markdown2 } from "./index-BIS83Dcj.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/community-components-C_CEex70.js b/assets/community-components-BO8jjw8H.js similarity index 97% rename from assets/community-components-C_CEex70.js rename to assets/community-components-BO8jjw8H.js index 0110ee58..09553192 100644 --- a/assets/community-components-C_CEex70.js +++ b/assets/community-components-BO8jjw8H.js @@ -1,9 +1,9 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2 } from "./index-DjOCnJ5z.js"; +import { ae as Meta, af as Markdown2 } from "./index-BIS83Dcj.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/design-tokens-BZP-golS.js b/assets/design-tokens-LW40sKB2.js similarity index 98% rename from assets/design-tokens-BZP-golS.js rename to assets/design-tokens-LW40sKB2.js index 811826fe..ade0cd06 100644 --- a/assets/design-tokens-BZP-golS.js +++ b/assets/design-tokens-LW40sKB2.js @@ -1,9 +1,9 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2 } from "./index-DjOCnJ5z.js"; +import { ae as Meta, af as Markdown2 } from "./index-BIS83Dcj.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/document-BtBHHST9.js b/assets/document-DNcPsMCJ.js similarity index 94% rename from assets/document-BtBHHST9.js rename to assets/document-DNcPsMCJ.js index cd1aca9b..befff4d3 100644 --- a/assets/document-BtBHHST9.js +++ b/assets/document-DNcPsMCJ.js @@ -1,16 +1,16 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, ag as Canvas, ah as Controls3 } from "./index-DjOCnJ5z.js"; -import { D as DocumentStories, P as Playground } from "./document.stories-BZzDcweQ.js"; +import { ae as Meta, ag as Canvas, ah as Controls3 } from "./index-BIS83Dcj.js"; +import { D as DocumentStories, P as Playground } from "./document.stories-DWC-NMQl.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-25q23o6t.js"; +import "./index-FCweSokR.js"; import "./index-BLZ711uc.js"; import "./createDesignTokensStory-HiB5Jh-Q.js"; import "./createVisualRegressionStory-Ckg-wQz5.js"; diff --git a/assets/document.stories-BZzDcweQ.js b/assets/document.stories-DWC-NMQl.js similarity index 98% rename from assets/document.stories-BZzDcweQ.js rename to assets/document.stories-DWC-NMQl.js index 54eceaa9..bcd8facd 100644 --- a/assets/document.stories-BZzDcweQ.js +++ b/assets/document.stories-DWC-NMQl.js @@ -1,6 +1,6 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i; import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; -import { s as LuxDocument, b as LuxParagraph } from "./index-25q23o6t.js"; +import { t as LuxDocument, b as LuxParagraph } from "./index-FCweSokR.js"; import { t as tokens } from "./index-BLZ711uc.js"; import { c as createDesignTokensStory } from "./createDesignTokensStory-HiB5Jh-Q.js"; import { c as createVisualRegressionStory, V as VisualRegressionWrapper } from "./createVisualRegressionStory-Ckg-wQz5.js"; diff --git a/assets/focus-tokens-DgagXs84.js b/assets/focus-tokens-Hstk9Ewm.js similarity index 97% rename from assets/focus-tokens-DgagXs84.js rename to assets/focus-tokens-Hstk9Ewm.js index ba97e7cd..07a1e677 100644 --- a/assets/focus-tokens-DgagXs84.js +++ b/assets/focus-tokens-Hstk9Ewm.js @@ -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-DjOCnJ5z.js"; +import { ae as Meta } from "./index-BIS83Dcj.js"; import { D as DesignTokenOverview, b as DesignTokenColorPreview, a as DesignTokenBorderPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/font-tokens-CzMqsiQW.js b/assets/font-tokens-B_e7WMGW.js similarity index 99% rename from assets/font-tokens-CzMqsiQW.js rename to assets/font-tokens-B_e7WMGW.js index 08efc31c..b93403c6 100644 --- a/assets/font-tokens-CzMqsiQW.js +++ b/assets/font-tokens-B_e7WMGW.js @@ -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-DjOCnJ5z.js"; +import { ae as Meta } from "./index-BIS83Dcj.js"; import { D as DesignTokenOverview, c as DesignTokenFontPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/font-tokens-6yXpPyx1.js b/assets/font-tokens-D_LLlO2T.js similarity index 99% rename from assets/font-tokens-6yXpPyx1.js rename to assets/font-tokens-D_LLlO2T.js index 412e0f45..c809944d 100644 --- a/assets/font-tokens-6yXpPyx1.js +++ b/assets/font-tokens-D_LLlO2T.js @@ -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-DjOCnJ5z.js"; +import { ae as Meta } from "./index-BIS83Dcj.js"; import { D as DesignTokenOverview, c as DesignTokenFontPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/form-field-description-XBnfbEBR.js b/assets/form-field-description-Bd-VD1-2.js similarity index 97% rename from assets/form-field-description-XBnfbEBR.js rename to assets/form-field-description-Bd-VD1-2.js index 48e2d7f7..39c22504 100644 --- a/assets/form-field-description-XBnfbEBR.js +++ b/assets/form-field-description-Bd-VD1-2.js @@ -1,19 +1,19 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-DjOCnJ5z.js"; -import { F as FormFieldDescriptionStories, P as Playground, D as Default, V as Valid, I as Invalid, L as LongDescription } from "./form-field-description.stories-Ck_rj4Pn.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-BIS83Dcj.js"; +import { F as FormFieldDescriptionStories, P as Playground, D as Default, V as Valid, I as Invalid, L as LongDescription } from "./form-field-description.stories-Cl82vLjR.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-25q23o6t.js"; +import "./index-FCweSokR.js"; import "./index-BLZ711uc.js"; -import "./preview-B1dH9ukS.js"; +import "./preview-Dn1p4Bmj.js"; const markdown = '\n\n# Form field description\n\nGebruik dit component voor extra beschrijvingen en instructies bij formuliervelden. Gebruik variaties van dit component voor meldingen dat er iets mis is met de invoer (`invalid`), dat er iets fout ging met het behandelen van de invoer (`error`), feedback over de status van de invoer, of feedback dat de invoer OK is.\n\nDit component is meestal een onderdeel van het _form field_ component.\n\n## Feedback van een formulier\n\nFormulieren geven meerdere soorten feedback, die kun je allemaal weergeven met de _form field description_ component:\n\n- Informatie over de status van de invoer.\n- Resultaat van validatie: niet valide.\n- Resultaat van validatie: invoer voldoet aan de eisen.\n- Foutmelding bij een actie uitvoeren.\n- Resultaat van _submit_: verzenden gelukt.\n- Resultaat van _submit_: verzenden niet gelukt, want invoer voldoet niet aan de eisen.\n- Resultaat van _submit_: verzenden niet gelukt, want er is een fout bij de server.\n- Resultaat van een berekening.\n\nFeedback van een formulier moet duidelijk zijn voor gebruikers die hulpmiddelen gebruiken, zoals een _screen reader_. Kies bij alle feedback welke soort _live region_ gebruikt moet worden: _polite_ of _assertive_, beleefd of dringend.\n\nLet op: in de meeste sitaties moet je geen `role="status"` en `role="alert"` gebruiken in server-side templates. Het is niet handig als meerdere teksten direct worden voorgelezen door een _screen reader_ zodra de pagina geladen is.\n\n### Beleefd / _polite_\n\nGebruik _polite_ voor feedback over acties van de gebruiker. Dat kan in HTML met het attribuut `role="status"`, dat hoeft niet met `aria-live="polite"`. Zie ook: [Using role=status to present status messages](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22). Bijvoorbeeld:\n\n- informatie over hoeveel meer tekens nog gebruikt mogen worden voordat de limiet is bereikt.\n- informatie over hoeveel zoekresultaten een combobox heeft.\n\n### Dringend / _assertive_\n\nGebruik `role="alert"` voor fouten die optreden door een actie van de gebruiker, bijvoorbeeld:\n\n- Wanneer een formulierveld niet juist is ingevuld.\n- Wanneer een formulier niet verzonden kan worden, omdat geen verbinding met de server gemaakt kan worden.\n\n## Gebruikte termen\n\n- `form` komt van `
` in HTML en `role="form"` in WAI-ARIA.\n- `field` komt van `
` in HTML.\n- `description` komt van `aria-describedby`.\n- `invalid` komt van `:invalid` in CSS en `aria-invalid` in WAI-ARIA.\n- `valid` from `:valid` in CSS.\n\n## HTML\n\nGebruik een `id` attribuut op dit element, zodat je met `aria-describedby` op de _form control_ een koppeling kunt maken.\n\nGebruik in HTML in plaats van `aria-live="polite"` het attribuut `role="status"`.\n\nGebruik in HTML in plaats van `aria-live="assertive"` het attribuut `role="alert"`.\n\n## Relevante WCAG eisen\n\n- [WCAG eis 3.3.1](https://www.w3.org/TR/WCAG21/#error-identification). Gebruik `id` attribuut op de _form field description_ en koppel de _form control_ met `aria-describedby` aan deze `id`. Zie ook: [WCAG Technique: Using `aria-invalid` to Indicate An Error Field](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21)\n- [WCAG eis 3.3.2](https://www.w3.org/TR/WCAG21/#labels-or-instructions). Zie ook: [WCAG Technique ARIA1: Using the `aria-describedby` property to provide a descriptive label for user interface controls](https://www.w3.org/WAI/WCAG21/)\n- [WCAG eis 3.3.2](https://www.w3.org/TR/WCAG21/#error-suggestion)\n'; function _createMdxContent(props) { const _components = { diff --git a/assets/form-field-description.stories-Ck_rj4Pn.js b/assets/form-field-description.stories-Cl82vLjR.js similarity index 97% rename from assets/form-field-description.stories-Ck_rj4Pn.js rename to assets/form-field-description.stories-Cl82vLjR.js index f11d788e..5bff9f6e 100644 --- a/assets/form-field-description.stories-Ck_rj4Pn.js +++ b/assets/form-field-description.stories-Cl82vLjR.js @@ -1,7 +1,7 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o; -import { d as LuxFormFieldDescription } from "./index-25q23o6t.js"; +import { e as LuxFormFieldDescription } from "./index-FCweSokR.js"; import { t as tokens } from "./index-BLZ711uc.js"; -import { B as BADGES } from "./preview-B1dH9ukS.js"; +import { B as BADGES } from "./preview-Dn1p4Bmj.js"; const meta = { title: "React Components/Form Field/Form Field Description", id: "react-components-form-field-description", diff --git a/assets/form-field-error-message-DitKrpVJ.js b/assets/form-field-error-message-CHo7iaZB.js similarity index 97% rename from assets/form-field-error-message-DitKrpVJ.js rename to assets/form-field-error-message-CHo7iaZB.js index 5cd8a1bd..82263ced 100644 --- a/assets/form-field-error-message-DitKrpVJ.js +++ b/assets/form-field-error-message-CHo7iaZB.js @@ -1,19 +1,19 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-DjOCnJ5z.js"; -import { F as FormFieldErrorMessageStories, P as Playground, D as Default, a as Distanced } from "./form-field-error-message.stories-ClBG1nXn.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-BIS83Dcj.js"; +import { F as FormFieldErrorMessageStories, P as Playground, D as Default, a as Distanced } from "./form-field-error-message.stories-Dxym1wD-.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-25q23o6t.js"; +import "./index-FCweSokR.js"; import "./index-BLZ711uc.js"; -import "./preview-B1dH9ukS.js"; +import "./preview-Dn1p4Bmj.js"; const markdown = '\n\n# Form field error message\n\nGebruik dit component voor foutmeldingen bij formuliervelden die geen valide invoer hebben.\n\nDit component is meestal een onderdeel van het _form field_ component.\n\n## Gebruikte termen\n\n- `form` komt van `` in HTML en `role="form"` in WAI-ARIA.\n- `field` komt van `
` in HTML.\n- `error-message` komt van `aria-errormessage`.\n\n## HTML\n\nGebruik een `id` attribuut op dit element, zodat je met `aria-describedby` op de _form control_ met `aria-invalid="true"` een koppeling kunt maken. Support voor `aria-errormessage` is nog onvoldoende, dus gebruik voorlopig nog `aria-describedby`.\n\nGebruik in HTML in plaats van `aria-live="polite"` het attribuut `role="status"`.\n\nGebruik in HTML in plaats van `aria-live="assertive"` het attribuut `role="alert"`.\n\n## Relevante WCAG eisen\n\n- [WCAG eis 1.4.1](https://www.w3.org/TR/WCAG21/#use-of-color): gebruik niet alleen kleur om duidelijk te maken dat het een foutmelding is.\n- [WCAG eis 3.3.1](https://www.w3.org/TR/WCAG21/#error-identification). Gebruik `id` attribuut op de _form field description_ en koppel de _form control_ met `aria-describedby` aan deze `id`. Zie ook: [WCAG Technique: Using `aria-invalid` to Indicate An Error Field](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21)\n- [WCAG eis 3.3.2](https://www.w3.org/TR/WCAG21/#labels-or-instructions). Zie ook: [WCAG Technique ARIA1: Using the `aria-describedby` property to provide a descriptive label for user interface controls](https://www.w3.org/WAI/WCAG21/)\n- [WCAG eis 3.3.2](https://www.w3.org/TR/WCAG21/#error-suggestion)\n'; function _createMdxContent(props) { const _components = { diff --git a/assets/form-field-error-message.stories-ClBG1nXn.js b/assets/form-field-error-message.stories-Dxym1wD-.js similarity index 96% rename from assets/form-field-error-message.stories-ClBG1nXn.js rename to assets/form-field-error-message.stories-Dxym1wD-.js index 2d4f6bce..7628453c 100644 --- a/assets/form-field-error-message.stories-ClBG1nXn.js +++ b/assets/form-field-error-message.stories-Dxym1wD-.js @@ -1,9 +1,9 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i; import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; -import { e as LuxFormFieldErrorMessage } from "./index-25q23o6t.js"; +import { f as LuxFormFieldErrorMessage } from "./index-FCweSokR.js"; import { t as tokens } from "./index-BLZ711uc.js"; import { r as reactExports } from "./index-aC1ZMUrs.js"; -import { B as BADGES } from "./preview-B1dH9ukS.js"; +import { B as BADGES } from "./preview-Dn1p4Bmj.js"; const WrappedLuxFormFieldErrorMessage = reactExports.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(LuxFormFieldErrorMessage, { ...props, ref })); WrappedLuxFormFieldErrorMessage.displayName = "WrappedLuxFormFieldErrorMessage"; const meta = { diff --git a/assets/form-field-DHXsHDA0.js b/assets/form-field-f_lWLCFH.js similarity index 94% rename from assets/form-field-DHXsHDA0.js rename to assets/form-field-f_lWLCFH.js index f73a8d94..bb620585 100644 --- a/assets/form-field-DHXsHDA0.js +++ b/assets/form-field-f_lWLCFH.js @@ -1,24 +1,24 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; import { r as react_default } from "./index-cEa3Pm8r.js"; -import { af as Markdown2, ae as Meta, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-DjOCnJ5z.js"; -import { F as FormFieldStories, P as Playground, a as FormFieldTextbox, b as FormFieldDescription, c as FormFieldError } from "./form-field.stories-DqQF_8pV.js"; +import { af as Markdown2, ae as Meta, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-BIS83Dcj.js"; +import { F as FormFieldStories, P as Playground, a as FormFieldTextbox, b as FormFieldDescription, c as FormFieldError } from "./form-field.stories-CKQBWpKD.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; -import { m as meta } from "./form-field-textbox.stories-Br6En76C.js"; +import { m as meta } from "./form-field-textbox.stories-BeyL-M2t.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; import "./index-vKye6HrD.js"; -import "./iframe-D8Bsb5lD.js"; +import "./iframe-DZw5951-.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-25q23o6t.js"; +import "./index-FCweSokR.js"; import "./index-BLZ711uc.js"; -import "./preview-B1dH9ukS.js"; -import "./form-field-description.stories-Ck_rj4Pn.js"; -import "./form-field-error-message.stories-ClBG1nXn.js"; -import "./textbox.stories-Dg3fXZWI.js"; +import "./preview-Dn1p4Bmj.js"; +import "./form-field-description.stories-Cl82vLjR.js"; +import "./form-field-error-message.stories-Dxym1wD-.js"; +import "./textbox.stories-D1Vzmckm.js"; const mdAnatomy = '\n\n# Anatomy\n\nGebruik het _form field_ component om een alle onderdelen van een formulierveld in te verzamelen: het label, de _form control_, eventueel een extra beschrijving of de status en eventueel een validatiemelding of foutmelding.\n\nDe volgende componenten zijn vaak onderdeel van een _form field_:\n\n- _form label_ component\n- _form field description_ component met extra beschrijving\n- _form field description_ component met een validatiemelding\n- een form control component zoals bijvoorbeeld:\n - _textbox_ component\n - _textarea_ component\n - _checkbox_ component\n - _radio button_ component\n - _form select_ component\n - etcetera\n- _form field description_ component met een foutmelding\n- _form field description_ component status van component\n\n## Gebruikte termen\n\n- `form` komt van `` in HTML en `role="form"` in WAI-ARIA.\n- `field` komt van `
` in HTML.\n- `invalid` komt van `aria-invalid` in WAI-ARIA.\n- `radio` komt van `` in HTML.\n- `checkbox` komt van `` in HTML.\n- `label` komt van `