diff --git a/demo-DES-654-table-of-content/.nojekyll b/demo-DES-654-table-of-content/.nojekyll new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demo-DES-654-table-of-content/1ad758c0a9d23606a01d55f0c5fee3d3c78a8eaa.txt b/demo-DES-654-table-of-content/1ad758c0a9d23606a01d55f0c5fee3d3c78a8eaa.txt new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demo-DES-654-table-of-content/CHANGELOG.md b/demo-DES-654-table-of-content/CHANGELOG.md new file mode 100644 index 0000000000..490c62f0d3 --- /dev/null +++ b/demo-DES-654-table-of-content/CHANGELOG.md @@ -0,0 +1,38 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.2.0](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.1.8...design-system-assets-v0.2.0) (2024-03-12) + + +### ⚠ BREAKING CHANGES + +* Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125)) + +### Features + +* Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125)) ([1c81f3b](https://github.com/Amsterdam/design-system/commit/1c81f3bd14c1f202eec2341aec1888fb74d956d5)) + +## [0.1.8](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.1.7...design-system-assets-v0.1.8) (2024-03-08) + + +### Features + +* Logo Museum Weesp ([#1088](https://github.com/Amsterdam/design-system/issues/1088)) ([da1b780](https://github.com/Amsterdam/design-system/commit/da1b7808b5bcf17acb93fe46531a9722814e9256)) + +## [0.1.7](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.6...@amsterdam/design-system-assets@0.1.7) (2024-01-31) + +**Note:** Version bump only for package @amsterdam/design-system-assets + +## [0.1.6](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.5...@amsterdam/design-system-assets@0.1.6) (2023-12-22) + +**Note:** Version bump only for package @amsterdam/design-system-assets + +## [0.1.5](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.4...@amsterdam/design-system-assets@0.1.5) (2023-12-01) + +**Note:** Version bump only for package @amsterdam/design-system-assets + +## [0.1.4](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.3...@amsterdam/design-system-assets@0.1.4) (2023-11-27) + +**Note:** Version bump only for package @amsterdam/design-system-assets diff --git a/demo-DES-654-table-of-content/LICENSE.md b/demo-DES-654-table-of-content/LICENSE.md new file mode 100644 index 0000000000..31c3f34604 --- /dev/null +++ b/demo-DES-654-table-of-content/LICENSE.md @@ -0,0 +1,7 @@ + + +# License + +The open source license does NOT apply to files in this directory. + +These are properietary assets to the City of Amsterdam. diff --git a/demo-DES-654-table-of-content/README.md b/demo-DES-654-table-of-content/README.md new file mode 100644 index 0000000000..a2ebf9ad27 --- /dev/null +++ b/demo-DES-654-table-of-content/README.md @@ -0,0 +1,9 @@ + + +# Assets + +Assets for the City of Amsterdam + +## Web app manifest, app icons and favicon + +See the Design System documentation for an [overview and examples of the manifest and these icons](https://amsterdam.github.io/design-system/?path=/docs/docs-assets-favicon-app-icons--docs). diff --git a/demo-DES-654-table-of-content/app-icons/icon-192.png b/demo-DES-654-table-of-content/app-icons/icon-192.png new file mode 100644 index 0000000000..d2f996b477 Binary files /dev/null and b/demo-DES-654-table-of-content/app-icons/icon-192.png differ diff --git a/demo-DES-654-table-of-content/app-icons/icon-512.png b/demo-DES-654-table-of-content/app-icons/icon-512.png new file mode 100644 index 0000000000..b711622f05 Binary files /dev/null and b/demo-DES-654-table-of-content/app-icons/icon-512.png differ diff --git a/demo-DES-654-table-of-content/assets/Accordion.docs-oCaqCB5W.js b/demo-DES-654-table-of-content/assets/Accordion.docs-oCaqCB5W.js new file mode 100644 index 0000000000..c3fda107bc --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Accordion.docs-oCaqCB5W.js @@ -0,0 +1,73 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as s}from"./index-DlpNa54Y.js";import{M as i,d as r,P as c,e as d,f as o}from"./index-ahswvvAf.js";import{A as h,E as l,T as p}from"./Accordion.stories-BDkuSoA4.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./exampleContent-CRK3_7Hv.js";import"./clsx-B-dksMZM.js";import"./index.esm-DQkeu4as.js";import"./getHeadingElement-DiRwFEz7.js";import"./Icon-CuaumHXX.js";import"./useKeyboardFocus-CRUFsA_C.js";import"./Paragraph-C4jU4-Z4.js";const m=` + +# Accordion + +The accordion component is a clickable (vertically stacked) list of headings to hide or show associated content. +With an accordion, you offer content to users progressively. + +## Guidelines + +- Use an accordion on a full page with essential and non-essential content. +- Hiding non-essential content helps users get to important content more quickly. +- Avoid using an accordion to avoid too much essential content on 1 page. +- Rewrite the page more compactly or divide the content over multiple pages instead of using the accordion in the first place. +- Don’t hide essential information in an accordion. +- An accordion consists of several accordion sections. +- Use a minimum of 3 and a maximum of 10 sections underneath each other. +- It is essential for accordion sections to have clear headings, as the user cannot "scan" the hidden content to find relevant information. +- Hiding the content has the disadvantage that "search in page" does not yield any hidden content results. +- If you know the search term the user used to get to the accordion page, you can automatically expand the sections that contain the search term. +- The accordion’s content may contain formatting (e.g. headings, lists, links and buttons). + +You can navigate an accordion with your keyboard: + +| key | element | +| :------------- | :-------------------------------------------------------------------------------------------------------------------- | +| Enter or Space | Open or close the accordion section that has the focus | +| Tab | Go to the next element that can have focus | +| Shift + Tab | Go to the next element that can have focus | +| Down arrow | If an accordion section has focus, go to the next section; if the last section has focus, go to the first section | +| Up arrow | If an accordion section has focus, go to the previous section; if the first section has focus, go to the last section | +| Home | If an accordion section has focus: go to the first section | +| End | If an accordion section has focus, go to the last section | + +## Relevant WCAG requirements + +The WCAG requirements for the Button and Heading components also apply to the accordion header. + +Pay extra attention to these parts: + +- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the accordion sections depends on where in the page the accordion is placed, this may differ per page. +- [WCAG requirement 1.3.6](https://www.w3.org/TR/WCAG21/#identify-purpose): use \`aria-controls\` for the button, and use a \`region\` landmark for the expandable region (use the HTML element \`
\` for this) +- [WCAG requirement 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): contrast between text and background and between icon and background is sufficient in all variants, all interactive statuses and all possible combinations. +- [WCAG requirement 3.2.1](https://www.w3.org/TR/WCAG21/#on-focus): do not automatically make the accordion expanded when the button gets focus. +- [WCAG requirement 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): Support the optional keys: \`Down Arrow\`, \`Up Arrow\`, \`Home\` and \`End\`. +- \`Space\` should activate the button, not scroll the page (use \`keypressEvt.preventDefault()\`). +- [WCAG requirement 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): The text used both as a heading and as a label for the button must be clear because the content is not always visible. +- [WCAG requirement 2.4.10](https://www.w3.org/TR/WCAG21/#section-headings): accordions that are part of the running text must use section headings. + +## References + +- [W3C - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) +`;function a(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...s(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:h}),` +`,e.jsx(r,{children:m}),` +`,e.jsxs(n.p,{children:[`Each accordion section has its unique name. +Provide this name via the `,e.jsx(n.code,{children:"label"})," property of the ",e.jsx(n.code,{children:"Accordion.Section"})," component."]}),` +`,e.jsx(c,{}),` +`,e.jsx(d,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"expanded-by-default",children:"Expanded by default"}),` +`,e.jsxs(n.p,{children:["If you want the contents of an accordion section to appear initially, pass the ",e.jsx(n.code,{children:"expanded"})," property to the ",e.jsx(n.code,{children:"Accordion.Section"})," component."]}),` +`,e.jsx(o,{of:l}),` +`,e.jsx(n.h2,{id:"too-many-landmarks",children:"Too many landmarks"}),` +`,e.jsxs(n.p,{children:["By default, an accordion section uses the HTML tag ",e.jsx(n.code,{children:"section"}),` to render the content. +Having many accordion sections on your page (more than 6) can lead to too many landmark regions, confusing screen reader users. +In that case, use `,e.jsx(n.code,{children:"section={false}"}),`. +Please note: Storybook does not correctly display this property in the code block.`]}),` +`,e.jsx(o,{of:p}),` +`,e.jsx(n.h2,{id:"technical-explanation",children:"Technical explanation"}),` +`,e.jsxs(n.p,{children:["Currently (28-6-2023), the HTML element ",e.jsx(n.code,{children:"details"}),` element has some accessibility problems. +`,e.jsx(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#summaries_as_headings",rel:"nofollow",children:"For example, a heading in a summary is not adequately understood by screen readers"}),` and +NVDA does not read Chrome and Edge’s collapsed and expanded status correctly. +That’s why we chose not to use this native element. +If these problems are solved, we could do this.`]})]})}function I(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(a,{...t})}):a(t)}export{I as default}; diff --git a/demo-DES-654-table-of-content/assets/Accordion.stories-BDkuSoA4.js b/demo-DES-654-table-of-content/assets/Accordion.stories-BDkuSoA4.js new file mode 100644 index 0000000000..1a4fe46b29 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Accordion.stories-BDkuSoA4.js @@ -0,0 +1,38 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{a as S}from"./exampleContent-CRK3_7Hv.js";import{c as p}from"./clsx-B-dksMZM.js";import{r as n}from"./index-BwDkhjyp.js";import{t as O}from"./index.esm-DQkeu4as.js";import{g as H}from"./getHeadingElement-DiRwFEz7.js";import{I as M}from"./Icon-CuaumHXX.js";import{u as $}from"./useKeyboardFocus-CRUFsA_C.js";import{P as r}from"./Paragraph-C4jU4-Z4.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const z={headingLevel:1,section:!0},T=n.createContext(z);try{Context.displayName="Context",Context.__docgenInfo={description:`Context lets components pass information deep down without explicitly +passing props. + +Created from {@link createContext}`,displayName:"Context",props:{}}}catch{}const I=n.forwardRef(({label:o,expanded:h=!1,children:d,className:m,...u},c)=>{const{headingLevel:g,section:R}=n.useContext(T),[l,V]=n.useState(h),q=H(g),A=n.useId(),x=`button-${A}`,_=`panel-${A}`;return e.jsxs("div",{className:p("ams-accordion__section",m),ref:c,...u,children:[e.jsx(q,{className:"ams-accordion__header",children:e.jsxs("button",{"aria-controls":_,"aria-expanded":l,className:"ams-accordion__button",id:x,onClick:()=>V(!l),type:"button",children:[e.jsx(M,{svg:O,size:"level-5",className:"ams-accordion__icon"}),o]})}),R?e.jsx("section",{id:_,"aria-labelledby":x,className:p("ams-accordion__panel",{"ams-accordion__panel--expanded":l}),children:d}):e.jsx("div",{id:_,"aria-labelledby":x,className:p("ams-accordion__panel",{"ams-accordion__panel--expanded":l}),children:d})]})});I.displayName="Accordion.Section";try{Accordion.Section.displayName="Accordion.Section",Accordion.Section.__docgenInfo={description:"",displayName:"Accordion.Section",props:{label:{defaultValue:null,description:"The heading text.",name:"label",required:!0,type:{name:"string"}},expanded:{defaultValue:{value:"false"},description:"Whether the content is displayed initially.",name:"expanded",required:!1,type:{name:"boolean"}}}}}catch{}const L=n.forwardRef(({children:o,className:h,headingLevel:d,section:m=!0},u)=>{const c=n.useRef(null);n.useImperativeHandle(u,()=>c.current);const{keyDown:g}=$(c,{rotating:!0});return e.jsx(T.Provider,{value:{headingLevel:d,section:m},children:e.jsx("div",{className:p("ams-accordion",h),onKeyDown:g,ref:c,children:o})})});L.displayName="Accordion";const a=Object.assign(L,{Section:I});try{a.displayName="Accordion",a.__docgenInfo={description:"",displayName:"Accordion",props:{headingLevel:{defaultValue:null,description:"The hierarchical level of the Accordion Section heading(s) within the document.",name:"headingLevel",required:!0,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}},section:{defaultValue:{value:"true"},description:"Whether to use a ‘section’ element for each Accordion Section.",name:"section",required:!1,type:{name:"boolean"}}}}}catch{}const y=S(),f=S(),b=S(),B={title:"Components/Containers/Accordion",component:a,args:{headingLevel:1}},t={args:{children:[e.jsx(a.Section,{label:"Eerste sectie",children:e.jsx(r,{children:y})},1),e.jsx(a.Section,{label:"Tweede sectie",children:e.jsx(r,{children:f})},2),e.jsx(a.Section,{label:"Derde sectie",children:e.jsx(r,{children:b})},3)]}},i={args:{children:[e.jsx(a.Section,{label:"Eerste sectie",children:e.jsx(r,{children:y})},1),e.jsx(a.Section,{label:"Tweede sectie",expanded:!0,children:e.jsx(r,{children:f})},2),e.jsx(a.Section,{label:"Derde sectie",children:e.jsx(r,{children:b})},3)]}},s={args:{section:!1,children:[e.jsx(a.Section,{label:"Eerste sectie",children:e.jsx(r,{children:y})},1),e.jsx(a.Section,{label:"Tweede sectie",children:e.jsx(r,{children:f})},2),e.jsx(a.Section,{label:"Derde sectie",children:e.jsx(r,{children:b})},3)]}};var j,v,P;t.parameters={...t.parameters,docs:{...(j=t.parameters)==null?void 0:j.docs,source:{originalSource:`{ + args: { + children: [ + {paragraph1} + , + {paragraph2} + , + {paragraph3} + ] + } +}`,...(P=(v=t.parameters)==null?void 0:v.docs)==null?void 0:P.source}}};var E,N,k;i.parameters={...i.parameters,docs:{...(E=i.parameters)==null?void 0:E.docs,source:{originalSource:`{ + args: { + children: [ + {paragraph1} + , + {paragraph2} + , + {paragraph3} + ] + } +}`,...(k=(N=i.parameters)==null?void 0:N.docs)==null?void 0:k.source}}};var w,C,D;s.parameters={...s.parameters,docs:{...(w=s.parameters)==null?void 0:w.docs,source:{originalSource:`{ + args: { + section: false, + children: [ + {paragraph1} + , + {paragraph2} + , + {paragraph3} + ] + } +}`,...(D=(C=s.parameters)==null?void 0:C.docs)==null?void 0:D.source}}};const K=["Default","ExpandedByDefault","TooManyLandmarks"],ee=Object.freeze(Object.defineProperty({__proto__:null,Default:t,ExpandedByDefault:i,TooManyLandmarks:s,__namedExportsOrder:K,default:B},Symbol.toStringTag,{value:"Module"}));export{ee as A,i as E,s as T}; diff --git a/demo-DES-654-table-of-content/assets/Alert.docs-B1IsZFUt.js b/demo-DES-654-table-of-content/assets/Alert.docs-B1IsZFUt.js new file mode 100644 index 0000000000..b183f8e484 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Alert.docs-B1IsZFUt.js @@ -0,0 +1,53 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as s}from"./index-DlpNa54Y.js";import{M as o,d as a,P as c,e as l,f as i}from"./index-ahswvvAf.js";import{A as h,W as d,E as m,S as p,I as f,a as u,b as x,c as j}from"./Alert.stories-DtE95yDU.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-DQkeu4as.js";import"./clsx-B-dksMZM.js";import"./Icon-CuaumHXX.js";import"./Heading-CWbN3elW.js";import"./getHeadingElement-DiRwFEz7.js";import"./IconButton-CFmnpWmC.js";import"./VisuallyHidden-Db-04MJ9.js";import"./UnorderedList-J9gSHTlV.js";import"./Link-DfaTqfXA.js";import"./Paragraph-C4jU4-Z4.js";const g=` + +# Alert + +An Alert informs the user of a significant or time-sensitive message without interrupting their task. + +## Specifications + +There are four types of notifications: + +- **Warning** (orange) when action is needed to prevent damage. +- **Error** (red) indicates an error has occurred. +- **Confirmation** (green) to reassure that a process is complete. +- **Notification** (blue) to bring attention to a message. + +## Guidelines + +- Place an orange Alert directly below the Header for important and urgent information. + Examples: system outage or changes in the opening hours of a City Office. +- Ensure sufficient white space around the Alert. + The grid’s white space is a good reference – place the Alert in its own cell. +- By default, the Alert cannot be closed. + This functionality can be added optionally. +- Optionally, the title can be omitted. +`;function r(t){const e={h2:"h2",h3:"h3",p:"p",...s(),...t.components};return n.jsxs(n.Fragment,{children:[n.jsx(o,{of:h}),` +`,n.jsx(a,{children:g}),` +`,n.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(e.p,{children:"The default Alert is a warning."}),` +`,n.jsx(c,{}),` +`,n.jsx(l,{}),` +`,n.jsx(e.h3,{id:"warning",children:"Warning"}),` +`,n.jsx(e.p,{children:"Display a warning when user action is required."}),` +`,n.jsx(i,{of:d}),` +`,n.jsx(e.h3,{id:"error",children:"Error"}),` +`,n.jsx(e.p,{children:`In case of an error, use the red alert. +Provide the user with suggestions on alternative ways to achieve the goal.`}),` +`,n.jsx(i,{of:m}),` +`,n.jsx(e.h3,{id:"success",children:"Success"}),` +`,n.jsx(e.p,{children:"Announce the success of a significant action."}),` +`,n.jsx(i,{of:p}),` +`,n.jsx(e.h3,{id:"info",children:"Info"}),` +`,n.jsx(e.p,{children:"An informative message can emphasize matters that are useful to follow."}),` +`,n.jsx(i,{of:f}),` +`,n.jsx(e.h3,{id:"with-inline-link",children:"With Inline Link"}),` +`,n.jsx(e.p,{children:"Include an inline link in the text to guide the user."}),` +`,n.jsx(i,{of:u}),` +`,n.jsx(e.h3,{id:"with-list",children:"With List"}),` +`,n.jsx(e.p,{children:"For clarification, formatted text can be included in the alert."}),` +`,n.jsx(i,{of:x}),` +`,n.jsx(e.h3,{id:"without-title",children:"Without Title"}),` +`,n.jsx(e.p,{children:`Sometimes, a title is unnecessary. +The icon automatically becomes slightly smaller.`}),` +`,n.jsx(i,{of:j})]})}function z(t={}){const{wrapper:e}={...s(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(r,{...t})}):r(t)}export{z as default}; diff --git a/demo-DES-654-table-of-content/assets/Alert.stories-DtE95yDU.js b/demo-DES-654-table-of-content/assets/Alert.stories-DtE95yDU.js new file mode 100644 index 0000000000..4f00e0d750 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Alert.stories-DtE95yDU.js @@ -0,0 +1,64 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{m as v,p as J,q as Q}from"./index.esm-DQkeu4as.js";import{c as X}from"./clsx-B-dksMZM.js";import{r as Y}from"./index-BwDkhjyp.js";import{I as Z}from"./Icon-CuaumHXX.js";import{H as ee}from"./Heading-CWbN3elW.js";import{I as ne}from"./IconButton-CFmnpWmC.js";import{U as m}from"./UnorderedList-J9gSHTlV.js";import{L as re}from"./Link-DfaTqfXA.js";import{P as n}from"./Paragraph-C4jU4-Z4.js";const ae={error:v,info:J,success:Q,warning:v},u=Y.forwardRef(({children:h,className:H,closeable:B,closeButtonLabel:K="Sluiten",headingLevel:G=2,onClose:R,severity:g="warning",title:c,...F},M)=>{const p=c?"level-4":"level-5",$=c?"section":"div";return e.jsxs($,{...F,ref:M,className:X("ams-alert",g&&`ams-alert--${g}`,H),children:[e.jsx("div",{className:"ams-alert__icon",children:e.jsx(Z,{size:p,svg:ae[g]})}),e.jsxs("div",{className:"ams-alert__content",children:[c&&e.jsx(ee,{level:G,size:"level-4",children:c}),h]}),B&&e.jsx(ne,{label:K,size:p,onClick:R})]})});u.displayName="Alert";try{u.displayName="Alert",u.__docgenInfo={description:"",displayName:"Alert",props:{closeable:{defaultValue:null,description:"Whether the user can dismiss the Alert. Adds a button to its top right.",name:"closeable",required:!1,type:{name:"boolean"}},closeButtonLabel:{defaultValue:{value:"Sluiten"},description:"The label for the button that dismisses the Alert.",name:"closeButtonLabel",required:!1,type:{name:"string"}},headingLevel:{defaultValue:{value:"2"},description:"The hierarchical level of the Alert’s heading within the document.",name:"headingLevel",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}},onClose:{defaultValue:null,description:"A function to run when dismissing.",name:"onClose",required:!1,type:{name:"(() => void)"}},severity:{defaultValue:{value:"warning"},description:"The significance of the message conveyed.",name:"severity",required:!1,type:{name:"enum",value:[{value:'"error"'},{value:'"info"'},{value:'"success"'},{value:'"warning"'}]}},title:{defaultValue:null,description:"The text for the Heading.",name:"title",required:!1,type:{name:"string"}}}}}catch{}const te={title:"Components/Feedback/Alert",component:u,args:{title:"Let op",closeable:!1}},r={args:{children:e.jsx(n,{children:"Tijdens Koningsdag zijn alle Stadsloketten gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente zijn niet bereikbaar."})}},a={args:{children:e.jsx(n,{children:"U bent vergeten verplichte velden in te vullen."}),title:"Vul de gegevens aan"}},t={args:{children:e.jsx(n,{children:"Wegens een technische fout kon het formulier niet worden verzonden. We hebben uw gegevens niet ontvangen. Probeer het over een paar minuten opnieuw."}),severity:"error",title:"Niet gelukt"}},s={args:{children:e.jsx(n,{children:"Het formulier is verzonden. We hebben uw gegevens goed ontvangen."}),closeable:!0,severity:"success",title:"Gelukt"}},o={args:{children:e.jsx(n,{children:"Tijdens de hijswerkzaamheden geldt er een korte verkeersstop. We zetten verkeersregelaars in, volg hun aanwijzingen op. De verkeersstop duurt ongeveer 10 minuten."}),closeable:!0,severity:"info"}},i={args:{title:"Vul de gegevens aan",children:[e.jsx(n,{children:"U bent vergeten de volgende verplichte velden in te vullen:"},1),e.jsxs(m,{children:[e.jsx(m.Item,{children:"Naam"}),e.jsx(m.Item,{children:"Telefoonnummer"})]},2)]}},l={args:{children:e.jsxs(n,{children:["Tijdens Koningsdag zijn"," ",e.jsx(re,{variant:"inline",href:"#",children:"alle Stadsloketten"})," ","gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente zijn niet bereikbaar."]}),severity:"info"}},d={args:{children:e.jsx(n,{children:"De geschatte wachttijd in de adreszoeker klopt momenteel niet altijd. We werken aan een oplossing."}),title:void 0}};var f,k,j;r.parameters={...r.parameters,docs:{...(f=r.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + children: + Tijdens Koningsdag zijn alle Stadsloketten gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente + zijn niet bereikbaar. + + } +}`,...(j=(k=r.parameters)==null?void 0:k.docs)==null?void 0:j.source}}};var b,y,S;a.parameters={...a.parameters,docs:{...(b=a.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + children: U bent vergeten verplichte velden in te vullen., + title: 'Vul de gegevens aan' + } +}`,...(S=(y=a.parameters)==null?void 0:y.docs)==null?void 0:S.source}}};var x,z,w;t.parameters={...t.parameters,docs:{...(x=t.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + children: + Wegens een technische fout kon het formulier niet worden verzonden. We hebben uw gegevens niet ontvangen. + Probeer het over een paar minuten opnieuw. + , + severity: 'error', + title: 'Niet gelukt' + } +}`,...(w=(z=t.parameters)==null?void 0:z.docs)==null?void 0:w.source}}};var P,L,W;s.parameters={...s.parameters,docs:{...(P=s.parameters)==null?void 0:P.docs,source:{originalSource:`{ + args: { + children: Het formulier is verzonden. We hebben uw gegevens goed ontvangen., + closeable: true, + severity: 'success', + title: 'Gelukt' + } +}`,...(W=(L=s.parameters)==null?void 0:L.docs)==null?void 0:W.source}}};var _,I,T;o.parameters={...o.parameters,docs:{...(_=o.parameters)==null?void 0:_.docs,source:{originalSource:`{ + args: { + children: + Tijdens de hijswerkzaamheden geldt er een korte verkeersstop. We zetten verkeersregelaars in, volg hun + aanwijzingen op. De verkeersstop duurt ongeveer 10 minuten. + , + closeable: true, + severity: 'info' + } +}`,...(T=(I=o.parameters)==null?void 0:I.docs)==null?void 0:T.source}}};var A,U,N;i.parameters={...i.parameters,docs:{...(A=i.parameters)==null?void 0:A.docs,source:{originalSource:`{ + args: { + title: 'Vul de gegevens aan', + children: [U bent vergeten de volgende verplichte velden in te vullen:, + Naam + Telefoonnummer + ] + } +}`,...(N=(U=i.parameters)==null?void 0:U.docs)==null?void 0:N.source}}};var V,q,O;l.parameters={...l.parameters,docs:{...(V=l.parameters)==null?void 0:V.docs,source:{originalSource:`{ + args: { + children: + Tijdens Koningsdag zijn{' '} + + alle Stadsloketten + {' '} + gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente zijn niet bereikbaar. + , + severity: 'info' + } +}`,...(O=(q=l.parameters)==null?void 0:q.docs)==null?void 0:O.source}}};var D,E,C;d.parameters={...d.parameters,docs:{...(D=d.parameters)==null?void 0:D.docs,source:{originalSource:`{ + args: { + children: + De geschatte wachttijd in de adreszoeker klopt momenteel niet altijd. We werken aan een oplossing. + , + title: undefined + } +}`,...(C=(E=d.parameters)==null?void 0:E.docs)==null?void 0:C.source}}};const se=["Default","Warning","Error","Success","Info","WithList","WithInlineLink","WithoutTitle"],ve=Object.freeze(Object.defineProperty({__proto__:null,Default:r,Error:t,Info:o,Success:s,Warning:a,WithInlineLink:l,WithList:i,WithoutTitle:d,__namedExportsOrder:se,default:te},Symbol.toStringTag,{value:"Module"}));export{ve as A,t as E,o as I,s as S,a as W,l as a,i as b,d as c}; diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Bold-B-eEYlh-.eot b/demo-DES-654-table-of-content/assets/AmsterdamSans-Bold-B-eEYlh-.eot new file mode 100644 index 0000000000..383d801e89 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Bold-B-eEYlh-.eot differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Bold-CN8ieXn0.woff b/demo-DES-654-table-of-content/assets/AmsterdamSans-Bold-CN8ieXn0.woff new file mode 100644 index 0000000000..820da6c665 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Bold-CN8ieXn0.woff differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Bold-rXlH1Jru.woff2 b/demo-DES-654-table-of-content/assets/AmsterdamSans-Bold-rXlH1Jru.woff2 new file mode 100644 index 0000000000..0ac92ef3fb Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Bold-rXlH1Jru.woff2 differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-BoldItalic-D8IgX2tE.eot b/demo-DES-654-table-of-content/assets/AmsterdamSans-BoldItalic-D8IgX2tE.eot new file mode 100644 index 0000000000..4b6688659c Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-BoldItalic-D8IgX2tE.eot differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-BoldItalic-DGVdd_B4.woff2 b/demo-DES-654-table-of-content/assets/AmsterdamSans-BoldItalic-DGVdd_B4.woff2 new file mode 100644 index 0000000000..72a076dc02 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-BoldItalic-DGVdd_B4.woff2 differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-BoldItalic-Iks2g4JK.woff b/demo-DES-654-table-of-content/assets/AmsterdamSans-BoldItalic-Iks2g4JK.woff new file mode 100644 index 0000000000..83c3db2c65 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-BoldItalic-Iks2g4JK.woff differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-ExtraBold-0zPbyHYJ.eot b/demo-DES-654-table-of-content/assets/AmsterdamSans-ExtraBold-0zPbyHYJ.eot new file mode 100644 index 0000000000..d8b311252d Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-ExtraBold-0zPbyHYJ.eot differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-ExtraBold-GN1-Za61.woff b/demo-DES-654-table-of-content/assets/AmsterdamSans-ExtraBold-GN1-Za61.woff new file mode 100644 index 0000000000..1be787d044 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-ExtraBold-GN1-Za61.woff differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-ExtraBold-hk2GetsY.woff2 b/demo-DES-654-table-of-content/assets/AmsterdamSans-ExtraBold-hk2GetsY.woff2 new file mode 100644 index 0000000000..c3858f05b8 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-ExtraBold-hk2GetsY.woff2 differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Italic-D8oH3P5t.woff b/demo-DES-654-table-of-content/assets/AmsterdamSans-Italic-D8oH3P5t.woff new file mode 100644 index 0000000000..225b450a48 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Italic-D8oH3P5t.woff differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Italic-DW94SgHh.woff2 b/demo-DES-654-table-of-content/assets/AmsterdamSans-Italic-DW94SgHh.woff2 new file mode 100644 index 0000000000..dad1e544a1 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Italic-DW94SgHh.woff2 differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Italic-Djuh9q7q.eot b/demo-DES-654-table-of-content/assets/AmsterdamSans-Italic-Djuh9q7q.eot new file mode 100644 index 0000000000..03b986f33e Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Italic-Djuh9q7q.eot differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Light-C9JJu_TU.eot b/demo-DES-654-table-of-content/assets/AmsterdamSans-Light-C9JJu_TU.eot new file mode 100644 index 0000000000..bbea6b3e24 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Light-C9JJu_TU.eot differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Light-D_AncfMf.woff2 b/demo-DES-654-table-of-content/assets/AmsterdamSans-Light-D_AncfMf.woff2 new file mode 100644 index 0000000000..64bffd1e35 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Light-D_AncfMf.woff2 differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Light-iEj3CW9t.woff b/demo-DES-654-table-of-content/assets/AmsterdamSans-Light-iEj3CW9t.woff new file mode 100644 index 0000000000..27f5365b40 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Light-iEj3CW9t.woff differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Regular-BSIiMMb3.eot b/demo-DES-654-table-of-content/assets/AmsterdamSans-Regular-BSIiMMb3.eot new file mode 100644 index 0000000000..8a555f4a86 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Regular-BSIiMMb3.eot differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Regular-QnM7etvR.woff2 b/demo-DES-654-table-of-content/assets/AmsterdamSans-Regular-QnM7etvR.woff2 new file mode 100644 index 0000000000..ba85adcd68 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Regular-QnM7etvR.woff2 differ diff --git a/demo-DES-654-table-of-content/assets/AmsterdamSans-Regular-nwmnLZDN.woff b/demo-DES-654-table-of-content/assets/AmsterdamSans-Regular-nwmnLZDN.woff new file mode 100644 index 0000000000..9196d86610 Binary files /dev/null and b/demo-DES-654-table-of-content/assets/AmsterdamSans-Regular-nwmnLZDN.woff differ diff --git a/demo-DES-654-table-of-content/assets/AppIcons-BY8PzKWO.js b/demo-DES-654-table-of-content/assets/AppIcons-BY8PzKWO.js new file mode 100644 index 0000000000..8c8efbd451 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/AppIcons-BY8PzKWO.js @@ -0,0 +1 @@ +import{j as s}from"./jsx-runtime-Nms4Y4qS.js";import{I as i}from"./index.esm-B0Sjsx63.js";const o=()=>s.jsx("div",{className:"ams-docs-gallery",children:s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{src:"favicon/apple-touch-icon.png",width:180,height:180}),s.jsx("figcaption",{children:"apple-touch-icon.png (180px)"})]})}),e=()=>s.jsxs("div",{className:"ams-docs-gallery",children:[s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{src:"favicon/favicon.ico",width:16,height:16}),s.jsx("figcaption",{children:"favicon.ico (16px)"})]}),s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{src:"favicon/favicon.ico",width:32,height:32}),s.jsx("figcaption",{children:"favicon.ico (32px)"})]}),s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{src:"favicon/favicon.ico",width:48,height:48}),s.jsx("figcaption",{children:"favicon.ico (48px)"})]}),s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{src:"favicon/favicon.ico",width:64,height:64}),s.jsx("figcaption",{children:"favicon.ico (64px)"})]})]}),n=()=>s.jsx("div",{className:"ams-docs-gallery",children:s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{src:"favicon/icon.svg",width:64,height:64}),s.jsx("figcaption",{children:"icon.svg (64px)"})]})}),r=()=>s.jsxs("div",{className:"ams-docs-gallery",children:[s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{src:"app-icons/icon-192.png",width:192,height:192}),s.jsx("figcaption",{children:"icon-192.png (192px)"})]}),s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{src:"app-icons/icon-512.png",width:512,height:512}),s.jsx("figcaption",{children:"icon-512.png (512px)"})]})]});export{o as A,e as F,n as S,r as W}; diff --git a/demo-DES-654-table-of-content/assets/AspectRatio-BxbFlkWk.js b/demo-DES-654-table-of-content/assets/AspectRatio-BxbFlkWk.js new file mode 100644 index 0000000000..1373e18695 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/AspectRatio-BxbFlkWk.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-Nms4Y4qS.js";import{c as p}from"./clsx-B-dksMZM.js";import{r as l}from"./index-BwDkhjyp.js";const a=l.forwardRef(({children:e,className:t,ratio:s="square",...r},o)=>i.jsx("div",{...r,ref:o,className:p("ams-aspect-ratio",`ams-aspect-ratio--${s}`,t),children:e}));a.displayName="AspectRatio";try{a.displayName="AspectRatio",a.__docgenInfo={description:"",displayName:"AspectRatio",props:{ratio:{defaultValue:{value:"square"},description:"The dimensions.",name:"ratio",required:!1,type:{name:"enum",value:[{value:'"square"'},{value:'"wide"'},{value:'"x-wide"'},{value:'"x-tall"'},{value:'"tall"'},{value:'"2x-wide"'}]}}}}}catch{}export{a as A}; diff --git a/demo-DES-654-table-of-content/assets/AspectRatio.docs-BFleGWqV.js b/demo-DES-654-table-of-content/assets/AspectRatio.docs-BFleGWqV.js new file mode 100644 index 0000000000..ac742be0b3 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/AspectRatio.docs-BFleGWqV.js @@ -0,0 +1,40 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as i}from"./index-DlpNa54Y.js";import{M as a,d as r,P as l,e as d,f as o}from"./index-ahswvvAf.js";import{A as x,D as h,E as m,W as p,S as c,T as f,a as j}from"./AspectRatio.stories-D__dCfe8.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./AspectRatio-BxbFlkWk.js";import"./clsx-B-dksMZM.js";import"./Image-z3YSpimw.js";const u=` + +# Aspect Ratio + +Aspect Ratio updates the height of an element with its width. + +These are the proportions we use: + +| keyword | ratio | +| :-------- | ----: | +| \`2x-wide\` | 32:9 | +| \`x-wide\` | 16:9 | +| \`wide\` | 5:4 | +| \`square\` | 1:1 | +| \`tall\` | 4:5 | +| \`x-tall\` | 9:16 | + +## Guidelines + +- Use this component to constrain images, videos and other elements to one of the available aspect ratios. +`;function s(t){const n={h2:"h2",p:"p",...i(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:x}),` +`,e.jsx(r,{children:u}),` +`,e.jsx(l,{}),` +`,e.jsx(d,{}),` +`,e.jsx(n.h2,{id:"double-extra-wide",children:"Double extra wide"}),` +`,e.jsx(n.p,{children:"We only use this aspect ratio for a ‘hero’ image across the entire website width."}),` +`,e.jsx(o,{of:h}),` +`,e.jsx(n.h2,{id:"extra-wide",children:"Extra wide"}),` +`,e.jsx(o,{of:m}),` +`,e.jsx(n.h2,{id:"wide",children:"Wide"}),` +`,e.jsx(o,{of:p}),` +`,e.jsx(n.h2,{id:"square",children:"Square"}),` +`,e.jsx(o,{of:c}),` +`,e.jsx(n.h2,{id:"tall",children:"Tall"}),` +`,e.jsx(o,{of:f}),` +`,e.jsx(n.h2,{id:"extra-tall",children:"Extra Tall"}),` +`,e.jsx(n.p,{children:`This variant may be suitable for telephones. +Most devices nowadays have an aspect ratio of 9:19.5. +Images of 9:16 fill approximately 80% of the screen.`}),` +`,e.jsx(o,{of:j})]})}function X(t={}){const{wrapper:n}={...i(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{X as default}; diff --git a/demo-DES-654-table-of-content/assets/AspectRatio.stories-D__dCfe8.js b/demo-DES-654-table-of-content/assets/AspectRatio.stories-D__dCfe8.js new file mode 100644 index 0000000000..5521adfe55 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/AspectRatio.stories-D__dCfe8.js @@ -0,0 +1,33 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{A as C}from"./AspectRatio-BxbFlkWk.js";import{I as O}from"./Image-z3YSpimw.js";const v={title:"Components/Layout/Aspect Ratio",component:C,args:{ratio:"square"},argTypes:{ratio:{control:"radio",options:["2x-wide","x-wide","wide","square","tall","x-tall"]}}},I={"2x-wide":{image:"https://picsum.photos/1280/360"},"x-wide":{image:"https://picsum.photos/640/360"},wide:{image:"https://picsum.photos/450/360"},square:{image:"https://picsum.photos/360/360"},tall:{image:"https://picsum.photos/360/450"},"x-tall":{image:"https://picsum.photos/360/640"}},e={decorators:[p=>n.jsx("div",{style:{display:"flex",justifyContent:"center"},children:n.jsx(p,{})})],render:({ratio:p})=>n.jsx(C,{ratio:p,children:n.jsx(O,{alt:"",src:I[p??"square"].image})})},r={...e},a={...e,args:{ratio:"2x-wide"}},s={...e,args:{ratio:"x-wide"}},t={...e,args:{ratio:"wide"}},o={...e,args:{ratio:"square"}},i={...e,args:{ratio:"tall"}},c={...e,args:{ratio:"x-tall"}};var m,l,d;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{ + ...StoryTemplate +}`,...(d=(l=r.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var u,g,x;a.parameters={...a.parameters,docs:{...(u=a.parameters)==null?void 0:u.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + ratio: '2x-wide' + } +}`,...(x=(g=a.parameters)==null?void 0:g.docs)==null?void 0:x.source}}};var S,y,T;s.parameters={...s.parameters,docs:{...(S=s.parameters)==null?void 0:S.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + ratio: 'x-wide' + } +}`,...(T=(y=s.parameters)==null?void 0:y.docs)==null?void 0:T.source}}};var h,w,f;t.parameters={...t.parameters,docs:{...(h=t.parameters)==null?void 0:h.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + ratio: 'wide' + } +}`,...(f=(w=t.parameters)==null?void 0:w.docs)==null?void 0:f.source}}};var j,E,q;o.parameters={...o.parameters,docs:{...(j=o.parameters)==null?void 0:j.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + ratio: 'square' + } +}`,...(q=(E=o.parameters)==null?void 0:E.docs)==null?void 0:q.source}}};var W,_,b;i.parameters={...i.parameters,docs:{...(W=i.parameters)==null?void 0:W.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + ratio: 'tall' + } +}`,...(b=(_=i.parameters)==null?void 0:_.docs)==null?void 0:b.source}}};var A,D,R;c.parameters={...c.parameters,docs:{...(A=c.parameters)==null?void 0:A.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + ratio: 'x-tall' + } +}`,...(R=(D=c.parameters)==null?void 0:D.docs)==null?void 0:R.source}}};const z=["Default","DoubleExtraWide","ExtraWide","Wide","Square","Tall","ExtraTall"],k=Object.freeze(Object.defineProperty({__proto__:null,Default:r,DoubleExtraWide:a,ExtraTall:c,ExtraWide:s,Square:o,Tall:i,Wide:t,__namedExportsOrder:z,default:v},Symbol.toStringTag,{value:"Module"}));export{k as A,a as D,s as E,o as S,i as T,t as W,c as a}; diff --git a/demo-DES-654-table-of-content/assets/Avatar.docs-BDmkmEDv.js b/demo-DES-654-table-of-content/assets/Avatar.docs-BDmkmEDv.js new file mode 100644 index 0000000000..b46b3d6774 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Avatar.docs-BDmkmEDv.js @@ -0,0 +1,30 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as a}from"./index-DlpNa54Y.js";import{M as i,d as s,P as c,e as p,f as t}from"./index-ahswvvAf.js";import{A as l,W as m,F as d,I as h}from"./Avatar.stories-D3utLMbS.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-DQkeu4as.js";import"./clsx-B-dksMZM.js";import"./VisuallyHidden-Db-04MJ9.js";import"./Image-z3YSpimw.js";import"./Icon-CuaumHXX.js";import"./Header-DF3VOPHu.js";import"./Logo-C5ZbuiYN.js";import"./Heading-CWbN3elW.js";import"./getHeadingElement-DiRwFEz7.js";import"./PageMenu-DQ_snOzP.js";const u=` + +# Avatar + +A circular badge representing a person. + +## Design + +The avatar contains 1 or 2 initial letters from the person's full name, a picture, or a generic icon. +The default background colour is dark blue. + +## Usage + +Display an avatar for the person currently using the application, +or to associate a person with a content item. +`;function o(e){const r={h2:"h2",h3:"h3",p:"p",...a(),...e.components};return n.jsxs(n.Fragment,{children:[n.jsx(i,{of:l}),` +`,n.jsx(s,{children:u}),` +`,n.jsx(r.h2,{id:"stories",children:"Stories"}),` +`,n.jsx(r.h3,{id:"default",children:"Default"}),` +`,n.jsx(c,{}),` +`,n.jsx(p,{}),` +`,n.jsx(r.h3,{id:"with-picture",children:"With Picture"}),` +`,n.jsx(r.p,{children:`The Avatar can also display a photo or other image for the person. +Make sure to scale the image down to around 100 pixels to prevent unnecessary data transfers.`}),` +`,n.jsx(t,{of:m}),` +`,n.jsx(r.h3,{id:"fallback-icon",children:"Fallback Icon"}),` +`,n.jsx(r.p,{children:"A user icon displays if no label and image are provided."}),` +`,n.jsx(t,{of:d}),` +`,n.jsx(r.h3,{id:"in-a-header",children:"In a Header"}),` +`,n.jsx(t,{of:h})]})}function S(e={}){const{wrapper:r}={...a(),...e.components};return r?n.jsx(r,{...e,children:n.jsx(o,{...e})}):o(e)}export{S as default}; diff --git a/demo-DES-654-table-of-content/assets/Avatar.stories-D3utLMbS.js b/demo-DES-654-table-of-content/assets/Avatar.stories-D3utLMbS.js new file mode 100644 index 0000000000..6ab198cbfa --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Avatar.stories-D3utLMbS.js @@ -0,0 +1,24 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{r as A,b as L}from"./index.esm-DQkeu4as.js";import{c as M}from"./clsx-B-dksMZM.js";import{r as D}from"./index-BwDkhjyp.js";import{V as w}from"./VisuallyHidden-Db-04MJ9.js";import{I as H}from"./Image-z3YSpimw.js";import{I as C}from"./Icon-CuaumHXX.js";import{H as T}from"./Header-DF3VOPHu.js";import{P as c}from"./PageMenu-DQ_snOzP.js";const V=({imageSrc:a,initials:r})=>a?e.jsx(H,{src:a,alt:""}):r.length?e.jsx("span",{"aria-hidden":!0,children:r}):e.jsx(C,{svg:A,size:"level-6"}),l=D.forwardRef(({label:a,imageSrc:r,className:j,color:y="dark-blue",...P},_)=>{const i=a.slice(0,2).toUpperCase(),I=i.length===0?"Gebruiker":`Initialen gebruiker: ${i}`;return e.jsxs("span",{...P,ref:_,className:M("ams-avatar",`ams-avatar--${y}`,r&&"ams-avatar--has-image",j),children:[e.jsx(w,{children:I}),e.jsx(V,{imageSrc:r,initials:i})]})});l.displayName="Avatar";try{l.displayName="Avatar",l.__docgenInfo={description:"",displayName:"Avatar",props:{color:{defaultValue:{value:"dark-blue"},description:"The background colour.",name:"color",required:!1,type:{name:"enum",value:[{value:'"blue"'},{value:'"dark-blue"'},{value:'"dark-green"'},{value:'"green"'},{value:'"magenta"'},{value:'"orange"'},{value:'"purple"'},{value:'"red"'},{value:'"yellow"'}]}},imageSrc:{defaultValue:null,description:"The url for the user’s image. Its center will be displayed. Should be square and scaled down.",name:"imageSrc",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"The text content. Should be the user’s initials. The first two characters will be displayed.",name:"label",required:!0,type:{name:"string"}}}}}catch{}const q={title:"Components/Feedback/Avatar",component:l,args:{label:"DS",imageSrc:""}},s={},n={args:{label:"PS",imageSrc:"https://i.pravatar.cc/128"}},t={args:{imageSrc:void 0,label:""}},o={args:{label:"DS"},render:a=>e.jsx(T,{links:e.jsxs(c,{children:[e.jsx(c.Link,{href:"#",children:"Contact"}),e.jsx(c.Link,{href:"#",icon:L,children:"Zoeken"}),e.jsx("li",{children:e.jsx(l,{...a})})]}),title:"Dashboard"})};var u,d,m;s.parameters={...s.parameters,docs:{...(u=s.parameters)==null?void 0:u.docs,source:{originalSource:"{}",...(m=(d=s.parameters)==null?void 0:d.docs)==null?void 0:m.source}}};var p,g,h;n.parameters={...n.parameters,docs:{...(p=n.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + label: 'PS', + imageSrc: 'https://i.pravatar.cc/128' + } +}`,...(h=(g=n.parameters)==null?void 0:g.docs)==null?void 0:h.source}}};var f,b,v;t.parameters={...t.parameters,docs:{...(f=t.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + imageSrc: undefined, + label: '' + } +}`,...(v=(b=t.parameters)==null?void 0:b.docs)==null?void 0:v.source}}};var S,k,x;o.parameters={...o.parameters,docs:{...(S=o.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + label: 'DS' + }, + render: args =>
+ Contact + + Zoeken + +
  • + +
    • + } title="Dashboard" /> +}`,...(x=(k=o.parameters)==null?void 0:k.docs)==null?void 0:x.source}}};const F=["Default","WithPicture","FallbackIcon","InAHeader"],U=Object.freeze(Object.defineProperty({__proto__:null,Default:s,FallbackIcon:t,InAHeader:o,WithPicture:n,__namedExportsOrder:F,default:q},Symbol.toStringTag,{value:"Module"}));export{U as A,t as F,o as I,n as W}; diff --git a/demo-DES-654-table-of-content/assets/Badge.docs-CdjJCDkB.js b/demo-DES-654-table-of-content/assets/Badge.docs-CdjJCDkB.js new file mode 100644 index 0000000000..8bfc8669ef --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Badge.docs-CdjJCDkB.js @@ -0,0 +1,18 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as r}from"./index-DlpNa54Y.js";import{M as s,d as i,P as a,e as c}from"./index-ahswvvAf.js";import{B as m}from"./Badge.stories-BHtx8p7M.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const d=` + +# Badge + +A prominently coloured box containing 1 or 2 words. +Guides the user in taking a specific action or describes its surrounding content. + +## Design + +The badge can contain a short text or a number. +The default background colour is dark green. +Suggestions on when to use the other colours will follow soon. +`;function e(o){const t={h2:"h2",h3:"h3",...r(),...o.components};return n.jsxs(n.Fragment,{children:[n.jsx(s,{of:m}),` +`,n.jsx(i,{children:d}),` +`,n.jsx(t.h2,{id:"stories",children:"Stories"}),` +`,n.jsx(t.h3,{id:"default",children:"Default"}),` +`,n.jsx(a,{}),` +`,n.jsx(c,{})]})}function k(o={}){const{wrapper:t}={...r(),...o.components};return t?n.jsx(t,{...o,children:n.jsx(e,{...o})}):e(o)}export{k as default}; diff --git a/demo-DES-654-table-of-content/assets/Badge.stories-BHtx8p7M.js b/demo-DES-654-table-of-content/assets/Badge.stories-BHtx8p7M.js new file mode 100644 index 0000000000..ae3a510659 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Badge.stories-BHtx8p7M.js @@ -0,0 +1,4 @@ +import{j as c}from"./jsx-runtime-Nms4Y4qS.js";import{c as p}from"./clsx-B-dksMZM.js";import{r as m}from"./index-BwDkhjyp.js";const a=m.forwardRef(({label:r,className:s,color:n="dark-green",...d},u)=>c.jsx("span",{...d,ref:u,className:p("ams-badge",`ams-badge--${n}`,s),children:r}));a.displayName="Badge";try{a.displayName="Badge",a.__docgenInfo={description:"",displayName:"Badge",props:{color:{defaultValue:{value:"dark-green"},description:"The background colour.",name:"color",required:!1,type:{name:"enum",value:[{value:'"blue"'},{value:'"dark-blue"'},{value:'"dark-green"'},{value:'"green"'},{value:'"magenta"'},{value:'"orange"'},{value:'"purple"'},{value:'"yellow"'}]}},label:{defaultValue:null,description:"The text content.",name:"label",required:!0,type:{name:"string | number"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const i={title:"Components/Feedback/Badge",component:a,args:{label:"Tip"}},e={};var o,t,l;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(l=(t=e.parameters)==null?void 0:t.docs)==null?void 0:l.source}}};const g=["Default"],v=Object.freeze(Object.defineProperty({__proto__:null,Default:e,__namedExportsOrder:g,default:i},Symbol.toStringTag,{value:"Module"}));export{v as B}; diff --git a/demo-DES-654-table-of-content/assets/Blockquote-XJcoMbef.js b/demo-DES-654-table-of-content/assets/Blockquote-XJcoMbef.js new file mode 100644 index 0000000000..214e605d3c --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Blockquote-XJcoMbef.js @@ -0,0 +1 @@ +import{j as l}from"./jsx-runtime-Nms4Y4qS.js";import{c}from"./clsx-B-dksMZM.js";import{r as i}from"./index-BwDkhjyp.js";const o=i.forwardRef(({children:e,className:r,inverseColor:a,...t},s)=>l.jsx("blockquote",{...t,ref:s,className:c("ams-blockquote",a&&"ams-blockquote--inverse-color",r),children:e}));o.displayName="Blockquote";try{o.displayName="Blockquote",o.__docgenInfo={description:"",displayName:"Blockquote",props:{inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}}}}}catch{}export{o as B}; diff --git a/demo-DES-654-table-of-content/assets/Blockquote.docs-yxeljffK.js b/demo-DES-654-table-of-content/assets/Blockquote.docs-yxeljffK.js new file mode 100644 index 0000000000..cb1abe8443 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Blockquote.docs-yxeljffK.js @@ -0,0 +1,25 @@ +import{j as t}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as r}from"./index-DlpNa54Y.js";import{M as s,d as i,P as a,e as m,f as c}from"./index-ahswvvAf.js";import{B as h,I as l}from"./Blockquote.stories-CMUg-udV.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./decorators-Dh4yEj-W.js";import"./exampleContent-CRK3_7Hv.js";import"./Blockquote-XJcoMbef.js";import"./clsx-B-dksMZM.js";const u=` + +# Blockquote + +We use blockquotes to emphasize citations. +A quote appears differently from the main text to make it stand out. + +## Guidelines + +- Quote someone’s literal written or oral text. +- A quote has a width of half or a whole column of text. +- The component adds the correct quotation marks. + +## Relevant WCAG requirements + +- [WCAG 3.1.2](https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html): if the citation is in a language other than that of the surrounding content, indicate so through the \`lang\` attribute. +`;function n(e){const o={code:"code",h2:"h2",h3:"h3",p:"p",...r(),...e.components};return t.jsxs(t.Fragment,{children:[t.jsx(s,{of:h}),` +`,t.jsx(i,{children:u}),` +`,t.jsx(a,{}),` +`,t.jsx(m,{}),` +`,t.jsx(o.h2,{id:"examples",children:"Examples"}),` +`,t.jsx(o.h3,{id:"inverse-colour",children:"Inverse colour"}),` +`,t.jsxs(o.p,{children:["Set the ",t.jsx(o.code,{children:"inverseColor"}),` prop if the Blockquote sits on a dark background. +This ensures the colour of the text provides enough contrast.`]}),` +`,t.jsx(c,{of:l})]})}function E(e={}){const{wrapper:o}={...r(),...e.components};return o?t.jsx(o,{...e,children:t.jsx(n,{...e})}):n(e)}export{E as default}; diff --git a/demo-DES-654-table-of-content/assets/Blockquote.stories-CMUg-udV.js b/demo-DES-654-table-of-content/assets/Blockquote.stories-CMUg-udV.js new file mode 100644 index 0000000000..a1de2c2c79 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Blockquote.stories-CMUg-udV.js @@ -0,0 +1,8 @@ +import{i as l}from"./decorators-Dh4yEj-W.js";import{e as i}from"./exampleContent-CRK3_7Hv.js";import{B as m}from"./Blockquote-XJcoMbef.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const p=i(),u={title:"Components/Text/Blockquote",component:m,args:{children:p,inverseColor:!1},argTypes:{children:{description:"The text for the quote.",table:{disable:!1}}},decorators:[l]},e={},o={args:{inverseColor:!0}};var r,t,s;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:"{}",...(s=(t=e.parameters)==null?void 0:t.docs)==null?void 0:s.source}}};var a,c,n;o.parameters={...o.parameters,docs:{...(a=o.parameters)==null?void 0:a.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(n=(c=o.parameters)==null?void 0:c.docs)==null?void 0:n.source}}};const d=["Default","InvertedColor"],C=Object.freeze(Object.defineProperty({__proto__:null,Default:e,InvertedColor:o,__namedExportsOrder:d,default:u},Symbol.toStringTag,{value:"Module"}));export{C as B,o as I}; diff --git a/demo-DES-654-table-of-content/assets/Breadcrumb.docs-DIXhWJGG.js b/demo-DES-654-table-of-content/assets/Breadcrumb.docs-DIXhWJGG.js new file mode 100644 index 0000000000..90463350e1 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Breadcrumb.docs-DIXhWJGG.js @@ -0,0 +1,27 @@ +import{j as t}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as i}from"./index-DlpNa54Y.js";import{M as a,d as s,P as o}from"./index-ahswvvAf.js";import{B as c}from"./Breadcrumb.stories-Cw5Ydqfl.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const m=` + +# Breadcrumb + +The breadcrumb is a secondary navigation pattern that helps a user understand the structure between levels in the website up to the current page. +Users can use it to navigate. + +## Guidelines + +### Use like this + +Only use the breadcrumb trail if it adds something functional for the user and the structure is ‘static’. + +### Avoid this + +Do not display the breadcrumb trail on a form page. +It distracts the user from their task, or one can accidentally interpret it as a Progress Indicator. + +It is a secondary navigation pattern. +It can’t replace the main navigation. +`;function r(n){const e={h2:"h2",li:"li",ul:"ul",...i(),...n.components};return t.jsxs(t.Fragment,{children:[t.jsx(a,{of:c}),` +`,t.jsx(s,{children:m}),` +`,t.jsx(o,{}),` +`,t.jsx(e.h2,{id:"usage",children:"Usage"}),` +`,t.jsxs(e.ul,{children:[` +`,t.jsx(e.li,{children:"A breadcrumb should not display more than 8 items."}),` +`]})]})}function C(n={}){const{wrapper:e}={...i(),...n.components};return e?t.jsx(e,{...n,children:t.jsx(r,{...n})}):r(n)}export{C as default}; diff --git a/demo-DES-654-table-of-content/assets/Breadcrumb.stories-Cw5Ydqfl.js b/demo-DES-654-table-of-content/assets/Breadcrumb.stories-Cw5Ydqfl.js new file mode 100644 index 0000000000..7f989b76c2 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Breadcrumb.stories-Cw5Ydqfl.js @@ -0,0 +1,11 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{c as t}from"./clsx-B-dksMZM.js";import{r as u}from"./index-BwDkhjyp.js";const l=u.forwardRef(({children:a,className:c,...s},i)=>e.jsx("li",{className:"ams-breadcrumb__item",children:e.jsx("a",{...s,className:t("ams-breadcrumb__link",c),ref:i,children:a})}));l.displayName="Breadcrumb.Link";try{Breadcrumb.Link.displayName="Breadcrumb.Link",Breadcrumb.Link.__docgenInfo={description:"",displayName:"Breadcrumb.Link",props:{}}}catch{}const b=u.forwardRef(({children:a,className:c,...s},i)=>e.jsx("nav",{...s,className:t("ams-breadcrumb",c),ref:i,children:e.jsx("ol",{className:"ams-breadcrumb__list",children:a})}));b.displayName="Breadcrumb";const r=Object.assign(b,{Link:l});try{r.displayName="Breadcrumb",r.__docgenInfo={description:"",displayName:"Breadcrumb",props:{}}}catch{}const p={title:"Components/Navigation/Breadcrumb",component:r},n={args:{children:[e.jsx(r.Link,{href:"#",children:"Home"},1),e.jsx(r.Link,{href:"#",children:"Nieuws"},2),e.jsx(r.Link,{href:"#",children:"Kennisgevingen en bekendmakingen"},3)]}};var m,o,d;n.parameters={...n.parameters,docs:{...(m=n.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + children: [ + Home + , + Nieuws + , + Kennisgevingen en bekendmakingen + ] + } +}`,...(d=(o=n.parameters)==null?void 0:o.docs)==null?void 0:d.source}}};const _=["Default"],g=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:_,default:p},Symbol.toStringTag,{value:"Module"}));export{g as B}; diff --git a/demo-DES-654-table-of-content/assets/Button-_hHZidVy.js b/demo-DES-654-table-of-content/assets/Button-_hHZidVy.js new file mode 100644 index 0000000000..3eb20ace23 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Button-_hHZidVy.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-Nms4Y4qS.js";import{c as m}from"./clsx-B-dksMZM.js";import{r as u}from"./index-BwDkhjyp.js";const e=u.forwardRef(({children:r,className:t,type:a,disabled:o,variant:n="primary",...s},p)=>i.jsx("button",{...s,ref:p,disabled:o,className:m("ams-button",`ams-button--${n}`,t),type:a||"button",children:r}));e.displayName="Button";try{e.displayName="Button",e.__docgenInfo={description:"",displayName:"Button",props:{variant:{defaultValue:{value:"primary"},description:"The level of prominence. Use a primary button only once per page or section.",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'}]}}}}}catch{}export{e as B}; diff --git a/demo-DES-654-table-of-content/assets/Button.docs-CCnQ4qoZ.js b/demo-DES-654-table-of-content/assets/Button.docs-CCnQ4qoZ.js new file mode 100644 index 0000000000..1118b9a8bd --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Button.docs-CCnQ4qoZ.js @@ -0,0 +1,55 @@ +import{j as t}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as s}from"./index-DlpNa54Y.js";import{M as a,d as i,P as c,e as l,f as o}from"./index-ahswvvAf.js";import{B as h,P as u,S as d,T as p,W as m,a as b}from"./Button.stories-DlAqWszt.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-DQkeu4as.js";import"./Button-_hHZidVy.js";import"./clsx-B-dksMZM.js";import"./Icon-CuaumHXX.js";const w=` + +# Button + +Allows the user to perform actions and operate the user interface. + +## Guidelines + +- A short label text that describes the function of the button. +- A clear contrasting colour scheme so that it is easy to recognize and quickly locate. +- Use the correct type of button for the corresponding application. + For example, a button within a form must always be of the type \`submit\`. +- Make sure one can operate a button through a keyboard. + +## Relevant WCAG requirements + +- [WCAG requirement 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): + You can activate the button with \`Enter\` or \`Space\`, and it is possible with ‘Tab’ the button to focus. + Using \`Space\` does not result in scrolling the page. +- [WCAG requirement 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): the label of the button must be clear +- [WCAG requirement 2.5.2](https://www.w3.org/TR/WCAG21/#pointer-cancellation): + - do not use the \`mousedown\` event to activate the button, instead use the \`click\` event + - \`mousedown\` may only be used if \`mouseup\` undoes the effect, for example, a “fast forward” button to fast-forward audio or video. +- [WCAG requirement 2.5.5](https://www.w3.org/TR/WCAG21/#target-size): The button must be large enough to click, and small buttons should not be too close to another button. + +## References + +- [W3C - Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) +- [W3C - Headings & labels](https://www.w3.org/TR/WCAG21/#headings-and-labels) +`;function r(n){const e={h2:"h2",h3:"h3",p:"p",...s(),...n.components};return t.jsxs(t.Fragment,{children:[t.jsx(a,{of:h}),` +`,t.jsx(i,{children:w}),` +`,t.jsx(c,{}),` +`,t.jsx(l,{}),` +`,t.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,t.jsx(e.p,{children:`Primary, secondary and tertiary buttons can be used side by side. +Skipping levels is allowed.`}),` +`,t.jsx(e.h3,{id:"primary",children:"Primary"}),` +`,t.jsx(e.p,{children:`The most important call-to-action button. +One primary button may be used per screen.`}),` +`,t.jsx(o,{of:u}),` +`,t.jsx(e.h3,{id:"secondary",children:"Secondary"}),` +`,t.jsx(e.p,{children:`Use the secondary button for less prominent calls to action. +It is possible to use more than 1 secondary button.`}),` +`,t.jsx(o,{of:d}),` +`,t.jsx(e.h3,{id:"tertiary",children:"Tertiary"}),` +`,t.jsx(e.p,{children:"Use tertiary buttons for unimportant calls to action – as many as necessary."}),` +`,t.jsx(o,{of:p}),` +`,t.jsx(e.h3,{id:"button-with-an-icon",children:"Button with an icon"}),` +`,t.jsx(o,{of:m}),` +`,t.jsx(e.h3,{id:"text-wrapping",children:"Text wrapping"}),` +`,t.jsx(e.p,{children:`Keep in mind that the label may occasionally wrap over multiple lines: +a shorter text might be unavailable, +two buttons could sit next to each other on a narrow screen, +or the user has configured a large font on their device.`}),` +`,t.jsx(o,{of:b})]})}function P(n={}){const{wrapper:e}={...s(),...n.components};return e?t.jsx(e,{...n,children:t.jsx(r,{...n})}):r(n)}export{P as default}; diff --git a/demo-DES-654-table-of-content/assets/Button.stories-DlAqWszt.js b/demo-DES-654-table-of-content/assets/Button.stories-DlAqWszt.js new file mode 100644 index 0000000000..2f79a03113 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Button.stories-DlAqWszt.js @@ -0,0 +1,29 @@ +import{j as t}from"./jsx-runtime-Nms4Y4qS.js";import{S as T}from"./index.esm-DQkeu4as.js";import{B}from"./Button-_hHZidVy.js";import{I as j}from"./Icon-CuaumHXX.js";const W={title:"Components/Buttons/Button",component:B,args:{children:"Button label",variant:"primary",disabled:!1},argTypes:{children:{description:"The text for the label and/or an icon.",table:{disable:!1}},disabled:{description:"Prevents interaction. Avoid if possible."}}},r={},e={args:{variant:"secondary"}},a={args:{variant:"tertiary"}},s={args:{children:["Button label",t.jsx(j,{svg:T,size:"level-5"},"icon")]},argTypes:{children:{table:{disable:!0}}}},n={args:{children:"Vergunningsaanvraag verzenden"},decorators:[f=>t.jsx("div",{style:{maxWidth:"16rem"},children:t.jsx(f,{})})]};var o,i,c;r.parameters={...r.parameters,docs:{...(o=r.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(c=(i=r.parameters)==null?void 0:i.docs)==null?void 0:c.source}}};var d,l,p;e.parameters={...e.parameters,docs:{...(d=e.parameters)==null?void 0:d.docs,source:{originalSource:`{ + args: { + variant: 'secondary' + } +}`,...(p=(l=e.parameters)==null?void 0:l.docs)==null?void 0:p.source}}};var m,u,g;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + variant: 'tertiary' + } +}`,...(g=(u=a.parameters)==null?void 0:u.docs)==null?void 0:g.source}}};var y,v,h;s.parameters={...s.parameters,docs:{...(y=s.parameters)==null?void 0:y.docs,source:{originalSource:`{ + args: { + children: ['Button label', ] + }, + argTypes: { + children: { + table: { + disable: true + } + } + } +}`,...(h=(v=s.parameters)==null?void 0:v.docs)==null?void 0:h.source}}};var S,b,x;n.parameters={...n.parameters,docs:{...(S=n.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + children: 'Vergunningsaanvraag verzenden' + }, + decorators: [Story =>
    + +
    ] +}`,...(x=(b=n.parameters)==null?void 0:b.docs)==null?void 0:x.source}}};const I=["Primary","Secondary","Tertiary","WithIcon","TextWrapping"],E=Object.freeze(Object.defineProperty({__proto__:null,Primary:r,Secondary:e,Tertiary:a,TextWrapping:n,WithIcon:s,__namedExportsOrder:I,default:W},Symbol.toStringTag,{value:"Module"}));export{E as B,r as P,e as S,a as T,s as W,n as a}; diff --git a/demo-DES-654-table-of-content/assets/Card-vGcoej70.js b/demo-DES-654-table-of-content/assets/Card-vGcoej70.js new file mode 100644 index 0000000000..172b383e33 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Card-vGcoej70.js @@ -0,0 +1 @@ +import{j as o}from"./jsx-runtime-Nms4Y4qS.js";import{c as s}from"./clsx-B-dksMZM.js";import{r as i}from"./index-BwDkhjyp.js";import{P as _}from"./Paragraph-C4jU4-Z4.js";const p=i.forwardRef(({children:a,className:r,tagline:e,...d},l)=>o.jsxs("hgroup",{...d,ref:l,className:s("ams-card__heading-group",r),children:[a,o.jsx(_,{size:"small",children:e})]}));p.displayName="Card.HeadingGroup";try{Card.HeadingGroup.displayName="Card.HeadingGroup",Card.HeadingGroup.__docgenInfo={description:"",displayName:"Card.HeadingGroup",props:{tagline:{defaultValue:null,description:"A short phrase of text, e.g. to categorise the card. Displayed above the card heading.",name:"tagline",required:!0,type:{name:"string"}}}}}catch{}const n=i.forwardRef(({children:a,className:r,...e},d)=>o.jsx("a",{...e,ref:d,className:s("ams-card__link",r),children:a}));n.displayName="Card.Link";try{Card.Link.displayName="Card.Link",Card.Link.__docgenInfo={description:"",displayName:"Card.Link",props:{}}}catch{}const c=i.forwardRef(({children:a,className:r,...e},d)=>o.jsx("article",{...e,ref:d,className:s("ams-card",r),children:a}));c.displayName="Card";const t=Object.assign(c,{HeadingGroup:p,Link:n});try{t.displayName="Card",t.__docgenInfo={description:"",displayName:"Card",props:{}}}catch{}export{t as C}; diff --git a/demo-DES-654-table-of-content/assets/Card.docs-DPYNTpCa.js b/demo-DES-654-table-of-content/assets/Card.docs-DPYNTpCa.js new file mode 100644 index 0000000000..bb9726154f --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Card.docs-DPYNTpCa.js @@ -0,0 +1,38 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as o}from"./index-DlpNa54Y.js";import{M as r,d as s,P as c,f as a}from"./index-ahswvvAf.js";import{C as d,W as l,a as h}from"./Card.stories-uS_JCQTI.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Card-vGcoej70.js";import"./clsx-B-dksMZM.js";import"./Paragraph-C4jU4-Z4.js";import"./Heading-CWbN3elW.js";import"./getHeadingElement-DiRwFEz7.js";import"./AspectRatio-BxbFlkWk.js";import"./Image-z3YSpimw.js";const p=` + +# Card + +Use a card on an overview page to link to an article page, such as a news article, a job vacancy, or a search result. +The card typically includes the title, introduction, and an image of the content. +The link is mandatory. + +## Guidelines + +- The title of a card is a link within a heading. + The same guidelines as for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-text-heading--docs) apply here. + The link is active across the entire area of the card. +- A card needs more content than just a title. + Supplement this with textual and/or visual content. +- Place the text in a regular paragraph. + Only use the smallest text size for a tagline or date. +- This component may not be the best option if the content does not represent a detailed page. + For referencing a thematic page, use a [top task link](/docs/components-navigation-top-task-link--docs). + You can also use a [regular link](/docs/components-navigation-link--docs). + +## Screen Readers + +With a screen reader, you can navigate using headings and links in a document. +The title of a card is a link within a heading, allowing you to utilize both navigation methods. +A screen reader reads the title first, followed by the rest of the content. +`;function i(t){const n={a:"a",code:"code",h2:"h2",p:"p",...o(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:d}),` +`,e.jsx(s,{children:p}),` +`,e.jsx(c,{}),` +`,e.jsx(n.h2,{id:"with-tagline",children:"With Tagline"}),` +`,e.jsxs(n.p,{children:[`A card can display a tagline above the title, a short term like a category or type of information. +Wrap the tagline and the title in a `,e.jsx(n.code,{children:"Card.HeadingGroup"}),`. +This ensures screen readers first read the title and then the tagline.`]}),` +`,e.jsx(a,{of:l}),` +`,e.jsx(n.h2,{id:"with-image",children:"With Image"}),` +`,e.jsxs(n.p,{children:[`A card often displays the image of the detail page. +Use `,e.jsx(n.a,{href:"/docs/layout-aspect-ratio--docs",children:"Aspect Ratio"})," for the correct aspect ratio."]}),` +`,e.jsx(a,{of:h})]})}function P(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{P as default}; diff --git a/demo-DES-654-table-of-content/assets/Card.stories-uS_JCQTI.js b/demo-DES-654-table-of-content/assets/Card.stories-uS_JCQTI.js new file mode 100644 index 0000000000..a35619d0c3 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Card.stories-uS_JCQTI.js @@ -0,0 +1,33 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{C as r}from"./Card-vGcoej70.js";import{H as o}from"./Heading-CWbN3elW.js";import{P as i}from"./Paragraph-C4jU4-Z4.js";import{A}from"./AspectRatio-BxbFlkWk.js";import{I as x}from"./Image-z3YSpimw.js";const j=new Intl.DateTimeFormat("nl",{day:"numeric",month:"long",year:"numeric"}),f=j.format(Date.now()),C={title:"Components/Navigation/Card",component:r,decorators:[u=>e.jsx("div",{style:{maxWidth:"24rem"},children:e.jsx(u,{})})]},a={args:{children:[e.jsx(o,{size:"level-4",children:e.jsx(r.Link,{href:"/",children:"Monitor Attracties MRA"})},1),e.jsx(i,{children:"Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam."},2)]}},t={args:{children:[e.jsx(r.HeadingGroup,{tagline:"Dossier",children:e.jsx(o,{size:"level-4",children:e.jsx(r.Link,{href:"/",children:"Monitor Attracties MRA"})})},1),e.jsx(i,{children:"Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam."},2)]}},n={args:{children:[e.jsx(A,{ratio:"wide",children:e.jsx(x,{alt:"",src:"https://picsum.photos/450/360"})},1),e.jsx(r.HeadingGroup,{tagline:"Dossier",children:e.jsx(o,{size:"level-4",children:e.jsx(r.Link,{href:"/",children:"Monitor Attracties MRA"})})},2),e.jsx(i,{children:"Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam."},3),e.jsx(i,{size:"small",children:f},4)]}};var s,d,l;a.parameters={...a.parameters,docs:{...(s=a.parameters)==null?void 0:s.docs,source:{originalSource:`{ + args: { + children: [ + Monitor Attracties MRA + , + Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam. + ] + } +}`,...(l=(d=a.parameters)==null?void 0:d.docs)==null?void 0:l.source}}};var c,m,g;t.parameters={...t.parameters,docs:{...(c=t.parameters)==null?void 0:c.docs,source:{originalSource:`{ + args: { + children: [ + + Monitor Attracties MRA + + , + Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam. + ] + } +}`,...(g=(m=t.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var p,h,k;n.parameters={...n.parameters,docs:{...(p=n.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + children: [ + + , + + Monitor Attracties MRA + + , + Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam. + , + {today} + ] + } +}`,...(k=(h=n.parameters)==null?void 0:h.docs)==null?void 0:k.source}}};const v=["Default","WithTagline","WithImage"],R=Object.freeze(Object.defineProperty({__proto__:null,Default:a,WithImage:n,WithTagline:t,__namedExportsOrder:v,default:C},Symbol.toStringTag,{value:"Module"}));export{R as C,t as W,n as a}; diff --git a/demo-DES-654-table-of-content/assets/Checkbox-Dnr-vBw_.js b/demo-DES-654-table-of-content/assets/Checkbox-Dnr-vBw_.js new file mode 100644 index 0000000000..93dcd16ecf --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Checkbox-Dnr-vBw_.js @@ -0,0 +1 @@ +import{j as r}from"./jsx-runtime-Nms4Y4qS.js";import{c as m}from"./clsx-B-dksMZM.js";import{r as a}from"./index-BwDkhjyp.js";const s=a.forwardRef(({children:c,className:o,invalid:l,indeterminate:n,...t},d)=>{const i=a.useId(),e=a.useRef(null);return a.useImperativeHandle(d,()=>e.current),a.useEffect(()=>{e.current&&(e.current.indeterminate=!!n)},[e,n]),r.jsxs("div",{className:m("ams-checkbox",o),children:[r.jsx("input",{...t,type:"checkbox",className:"ams-checkbox__input",ref:e,id:i,"aria-invalid":l||void 0}),r.jsxs("label",{className:"ams-checkbox__label",htmlFor:i,children:[r.jsx("span",{className:"ams-checkbox__checkmark"}),c]})]})});s.displayName="Checkbox";try{s.displayName="Checkbox",s.__docgenInfo={description:"",displayName:"Checkbox",props:{invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}},indeterminate:{defaultValue:null,description:"Allows being neither checked nor unchecked.",name:"indeterminate",required:!1,type:{name:"boolean"}}}}}catch{}export{s as C}; diff --git a/demo-DES-654-table-of-content/assets/Checkbox.docs-B9Bpp579.js b/demo-DES-654-table-of-content/assets/Checkbox.docs-B9Bpp579.js new file mode 100644 index 0000000000..54caccb4d1 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Checkbox.docs-B9Bpp579.js @@ -0,0 +1,37 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as s}from"./index-DlpNa54Y.js";import{M as i,d as a,P as r,e as l,f as c}from"./index-ahswvvAf.js";import{C as h,L as d}from"./Checkbox.stories-BFZlrJ3T.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Checkbox-Dnr-vBw_.js";import"./clsx-B-dksMZM.js";const m=` + +# Checkbox + +Allows users to make a selection or agree to terms. + +## Guidelines + +- Checkboxes are used for one or multiple choices that do not exclude each other. +- Each checkbox operates independently of other checkboxes in a list at the same hierarchical level. + Checking an additional checkbox does not affect other selections in that list. +- You can use a checkbox for bulk selection or deselection of an entire list of checkboxes. + Still, it should be clear that the bulk selection checkbox is at a different hierarchical level than the list being fully selected or deselected. +- Use a group of checkboxes to filter data on a page, in a menu, or within a component. +- A checkbox can answer a closed question if multiple answers are possible. +- A list of checkboxes is vertically stacked to enhance readability and usability. +- A list of checkboxes should be in a \`fieldset\` with a \`legend\` describing what the list is about. + For example, if the checkboxes are used to get answers to a question, the \`legend\` is the question. + +## Checkbox Labels + +A label starts with a capital letter. +It does not have punctuation at the end if it is a single sentence, word, or fragment. +It is written in the first person when asking the user to agree to the terms and conditions. + +## Relevant WCAG Requirements + +- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): It is clear for both users and programmatically what the purpose of a form field is. + +Checkbox is an interactive element; therefore, [the general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply. +`;function o(t){const n={h2:"h2",h3:"h3",...s(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:h}),` +`,e.jsx(a,{children:m}),` +`,e.jsx(r,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"long-label",children:"Long label"}),` +`,e.jsx(c,{of:d})]})}function L(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{L as default}; diff --git a/demo-DES-654-table-of-content/assets/Checkbox.stories-BFZlrJ3T.js b/demo-DES-654-table-of-content/assets/Checkbox.stories-BFZlrJ3T.js new file mode 100644 index 0000000000..31cc450a15 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Checkbox.stories-BFZlrJ3T.js @@ -0,0 +1,5 @@ +import{j as u}from"./jsx-runtime-Nms4Y4qS.js";import{C as t}from"./Checkbox-Dnr-vBw_.js";const{useArgs:p}=__STORYBOOK_MODULE_PREVIEW_API__,b={title:"Components/Forms/Checkbox",component:t,args:{checked:!1,children:"Checkbox label",disabled:!1,indeterminate:!1,invalid:!1},argTypes:{checked:{description:"Whether the control is checked."},children:{description:"The text for the label.",table:{disable:!1}},disabled:{description:"Prevents interaction. Avoid if possible."},onChange:{action:"clicked",table:{disable:!0}}},render:l=>{const[,d]=p(),g=h=>{d({checked:h.target.checked})};return u.jsx(t,{onClick:g,...l})}},e={},r={args:{children:"Ik heb alle gegevens correct en volledig ingevuld. Ik begrijp dat een verhuizing via internet dezelfde juridische status heeft als een verhuizing met een geschreven geldige handtekening."}};var n,s,a;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:"{}",...(a=(s=e.parameters)==null?void 0:s.docs)==null?void 0:a.source}}};var i,o,c;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{ + args: { + children: 'Ik heb alle gegevens correct en volledig ingevuld. Ik begrijp dat een verhuizing via internet dezelfde juridische status heeft als een verhuizing met een geschreven geldige handtekening.' + } +}`,...(c=(o=r.parameters)==null?void 0:o.docs)==null?void 0:c.source}}};const m=["Default","LongLabel"],v=Object.freeze(Object.defineProperty({__proto__:null,Default:e,LongLabel:r,__namedExportsOrder:m,default:b},Symbol.toStringTag,{value:"Module"}));export{v as C,r as L}; diff --git a/demo-DES-654-table-of-content/assets/Color-RQJUDNI5-5pAJ1omJ.js b/demo-DES-654-table-of-content/assets/Color-RQJUDNI5-5pAJ1omJ.js new file mode 100644 index 0000000000..5baedb1942 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Color-RQJUDNI5-5pAJ1omJ.js @@ -0,0 +1 @@ +import{n as M,h as ue,i as Me,F as Ce,j as $e,k as Ne}from"./index-ahswvvAf.js";import{R as h,r as b}from"./index-BwDkhjyp.js";import{g as fe}from"./_commonjsHelpers-BosuxZz1.js";import{_ as Oe,i as J,a as Ie}from"./index-B8K4vdXH.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-DrFu-skq.js";function $(){return($=Object.assign||function(e){for(var t=1;t=0||(o[n]=e[n]);return o}function K(e){var t=b.useRef(e),n=b.useRef(function(r){t.current&&t.current(r)});return t.current=e,n.current}var S=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=1),e>n?n:e0:p.buttons>0)&&o.current?a(ne(o.current,p,l.current)):_(!1)},N=function(){return _(!1)};function _(p){var m=i.current,x=V(o.current),C=p?x.addEventListener:x.removeEventListener;C(m?"touchmove":"mousemove",k),C(m?"touchend":"mouseup",N)}return[function(p){var m=p.nativeEvent,x=o.current;if(x&&(re(m),!function(X,R){return R&&!j(X)}(m,i.current)&&x)){if(j(m)){i.current=!0;var C=m.changedTouches||[];C.length&&(l.current=C[0].identifier)}x.focus(),a(ne(x,m,l.current)),_(!0)}},function(p){var m=p.which||p.keyCode;m<37||m>40||(p.preventDefault(),s({left:m===39?.05:m===37?-.05:0,top:m===40?.05:m===38?-.05:0}))},_]},[s,a]),d=c[0],f=c[1],g=c[2];return b.useEffect(function(){return g},[g]),h.createElement("div",$({},r,{onTouchStart:d,onMouseDown:d,className:"react-colorful__interactive",ref:o,onKeyDown:f,tabIndex:0,role:"slider"}))}),z=function(e){return e.filter(Boolean).join(" ")},ee=function(e){var t=e.color,n=e.left,r=e.top,o=r===void 0?.5:r,a=z(["react-colorful__pointer",e.className]);return h.createElement("div",{className:a,style:{top:100*o+"%",left:100*n+"%"}},h.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},y=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=Math.pow(10,t)),Math.round(n*e)/n},Se={grad:.9,turn:360,rad:360/(2*Math.PI)},Re=function(e){return ge(A(e))},A=function(e){return e[0]==="#"&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?y(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?y(parseInt(e.substring(6,8),16)/255,2):1}},Te=function(e,t){return t===void 0&&(t="deg"),Number(e)*(Se[t]||1)},je=function(e){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?Fe({h:Te(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},Fe=function(e){var t=e.s,n=e.l;return{h:e.h,s:(t*=(n<50?n:100-n)/100)>0?2*t/(n+t)*100:0,v:n+t,a:e.a}},ze=function(e){return Pe(de(e))},he=function(e){var t=e.s,n=e.v,r=e.a,o=(200-t)*n/100;return{h:y(e.h),s:y(o>0&&o<200?t*n/100/(o<=100?o:200-o)*100:0),l:y(o/2),a:y(r,2)}},G=function(e){var t=he(e);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},q=function(e){var t=he(e);return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},de=function(e){var t=e.h,n=e.s,r=e.v,o=e.a;t=t/360*6,n/=100,r/=100;var a=Math.floor(t),s=r*(1-n),l=r*(1-(t-a)*n),i=r*(1-(1-t+a)*n),c=a%6;return{r:y(255*[r,l,s,s,i,r][c]),g:y(255*[i,r,r,l,s,s][c]),b:y(255*[s,s,i,r,r,l][c]),a:y(o,2)}},He=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?ge({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:t[7]===void 0?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}},H=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},Pe=function(e){var t=e.r,n=e.g,r=e.b,o=e.a,a=o<1?H(y(255*o)):"";return"#"+H(t)+H(n)+H(r)+a},ge=function(e){var t=e.r,n=e.g,r=e.b,o=e.a,a=Math.max(t,n,r),s=a-Math.min(t,n,r),l=s?a===t?(n-r)/s:a===n?2+(r-t)/s:4+(t-n)/s:0;return{h:y(60*(l<0?l+6:l)),s:y(a?s/a*100:0),v:y(a/255*100),a:o}},me=h.memo(function(e){var t=e.hue,n=e.onChange,r=z(["react-colorful__hue",e.className]);return h.createElement("div",{className:r},h.createElement(Z,{onMove:function(o){n({h:360*o.left})},onKey:function(o){n({h:S(t+360*o.left,0,360)})},"aria-label":"Hue","aria-valuenow":y(t),"aria-valuemax":"360","aria-valuemin":"0"},h.createElement(ee,{className:"react-colorful__hue-pointer",left:t/360,color:G({h:t,s:100,v:100,a:1})})))}),be=h.memo(function(e){var t=e.hsva,n=e.onChange,r={backgroundColor:G({h:t.h,s:100,v:100,a:1})};return h.createElement("div",{className:"react-colorful__saturation",style:r},h.createElement(Z,{onMove:function(o){n({s:100*o.left,v:100-100*o.top})},onKey:function(o){n({s:S(t.s+100*o.left,0,100),v:S(t.v-100*o.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+y(t.s)+"%, Brightness "+y(t.v)+"%"},h.createElement(ee,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:G(t)})))}),ve=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},pe=function(e,t){return e.replace(/\s/g,"")===t.replace(/\s/g,"")},Le=function(e,t){return e.toLowerCase()===t.toLowerCase()||ve(A(e),A(t))};function ye(e,t,n){var r=K(n),o=b.useState(function(){return e.toHsva(t)}),a=o[0],s=o[1],l=b.useRef({color:t,hsva:a});b.useEffect(function(){if(!e.equal(t,l.current.color)){var c=e.toHsva(t);l.current={hsva:c,color:t},s(c)}},[t,e]),b.useEffect(function(){var c;ve(a,l.current.hsva)||e.equal(c=e.fromHsva(a),l.current.color)||(l.current={hsva:a,color:c},r(c))},[a,e,r]);var i=b.useCallback(function(c){s(function(d){return Object.assign({},d,c)})},[]);return[a,i]}var qe=typeof window<"u"?b.useLayoutEffect:b.useEffect,Be=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},oe=new Map,xe=function(e){qe(function(){var t=e.current?e.current.ownerDocument:document;if(t!==void 0&&!oe.has(t)){var n=t.createElement("style");n.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,oe.set(t,n);var r=Be();r&&n.setAttribute("nonce",r),t.head.appendChild(n)}},[])},We=function(e){var t=e.className,n=e.colorModel,r=e.color,o=r===void 0?n.defaultColor:r,a=e.onChange,s=Q(e,["className","colorModel","color","onChange"]),l=b.useRef(null);xe(l);var i=ye(n,o,a),c=i[0],d=i[1],f=z(["react-colorful",t]);return h.createElement("div",$({},s,{ref:l,className:f}),h.createElement(be,{hsva:c,onChange:d}),h.createElement(me,{hue:c.h,onChange:d,className:"react-colorful__last-control"}))},Xe={defaultColor:"000",toHsva:Re,fromHsva:function(e){return ze({h:e.h,s:e.s,v:e.v,a:1})},equal:Le},De=function(e){return h.createElement(We,$({},e,{colorModel:Xe}))},Ke=function(e){var t=e.className,n=e.hsva,r=e.onChange,o={backgroundImage:"linear-gradient(90deg, "+q(Object.assign({},n,{a:0}))+", "+q(Object.assign({},n,{a:1}))+")"},a=z(["react-colorful__alpha",t]),s=y(100*n.a);return h.createElement("div",{className:a},h.createElement("div",{className:"react-colorful__alpha-gradient",style:o}),h.createElement(Z,{onMove:function(l){r({a:l.left})},onKey:function(l){r({a:S(n.a+l.left)})},"aria-label":"Alpha","aria-valuetext":s+"%","aria-valuenow":s,"aria-valuemin":"0","aria-valuemax":"100"},h.createElement(ee,{className:"react-colorful__alpha-pointer",left:n.a,color:q(n)})))},we=function(e){var t=e.className,n=e.colorModel,r=e.color,o=r===void 0?n.defaultColor:r,a=e.onChange,s=Q(e,["className","colorModel","color","onChange"]),l=b.useRef(null);xe(l);var i=ye(n,o,a),c=i[0],d=i[1],f=z(["react-colorful",t]);return h.createElement("div",$({},s,{ref:l,className:f}),h.createElement(be,{hsva:c,onChange:d}),h.createElement(me,{hue:c.h,onChange:d}),h.createElement(Ke,{hsva:c,onChange:d,className:"react-colorful__last-control"}))},Ve={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:je,fromHsva:q,equal:pe},Ae=function(e){return h.createElement(we,$({},e,{colorModel:Ve}))},Ge={defaultColor:"rgba(0, 0, 0, 1)",toHsva:He,fromHsva:function(e){var t=de(e);return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},equal:pe},Ue=function(e){return h.createElement(we,$({},e,{colorModel:Ge}))},Ye={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]};const F=Ye,ke={};for(const e of Object.keys(F))ke[F[e]]=e;const u={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};var _e=u;for(const e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);const{channels:t,labels:n}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:t}),Object.defineProperty(u[e],"labels",{value:n})}u.rgb.hsl=function(e){const t=e[0]/255,n=e[1]/255,r=e[2]/255,o=Math.min(t,n,r),a=Math.max(t,n,r),s=a-o;let l,i;a===o?l=0:t===a?l=(n-r)/s:n===a?l=2+(r-t)/s:r===a&&(l=4+(t-n)/s),l=Math.min(l*60,360),l<0&&(l+=360);const c=(o+a)/2;return a===o?i=0:c<=.5?i=s/(a+o):i=s/(2-a-o),[l,i*100,c*100]};u.rgb.hsv=function(e){let t,n,r,o,a;const s=e[0]/255,l=e[1]/255,i=e[2]/255,c=Math.max(s,l,i),d=c-Math.min(s,l,i),f=function(g){return(c-g)/6/d+1/2};return d===0?(o=0,a=0):(a=d/c,t=f(s),n=f(l),r=f(i),s===c?o=r-n:l===c?o=1/3+t-r:i===c&&(o=2/3+n-t),o<0?o+=1:o>1&&(o-=1)),[o*360,a*100,c*100]};u.rgb.hwb=function(e){const t=e[0],n=e[1];let r=e[2];const o=u.rgb.hsl(e)[0],a=1/255*Math.min(t,Math.min(n,r));return r=1-1/255*Math.max(t,Math.max(n,r)),[o,a*100,r*100]};u.rgb.cmyk=function(e){const t=e[0]/255,n=e[1]/255,r=e[2]/255,o=Math.min(1-t,1-n,1-r),a=(1-t-o)/(1-o)||0,s=(1-n-o)/(1-o)||0,l=(1-r-o)/(1-o)||0;return[a*100,s*100,l*100,o*100]};function Je(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}u.rgb.keyword=function(e){const t=ke[e];if(t)return t;let n=1/0,r;for(const o of Object.keys(F)){const a=F[o],s=Je(e,a);s.04045?((t+.055)/1.055)**2.4:t/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92;const o=t*.4124+n*.3576+r*.1805,a=t*.2126+n*.7152+r*.0722,s=t*.0193+n*.1192+r*.9505;return[o*100,a*100,s*100]};u.rgb.lab=function(e){const t=u.rgb.xyz(e);let n=t[0],r=t[1],o=t[2];n/=95.047,r/=100,o/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;const a=116*r-16,s=500*(n-r),l=200*(r-o);return[a,s,l]};u.hsl.rgb=function(e){const t=e[0]/360,n=e[1]/100,r=e[2]/100;let o,a,s;if(n===0)return s=r*255,[s,s,s];r<.5?o=r*(1+n):o=r+n-r*n;const l=2*r-o,i=[0,0,0];for(let c=0;c<3;c++)a=t+1/3*-(c-1),a<0&&a++,a>1&&a--,6*a<1?s=l+(o-l)*6*a:2*a<1?s=o:3*a<2?s=l+(o-l)*(2/3-a)*6:s=l,i[c]=s*255;return i};u.hsl.hsv=function(e){const t=e[0];let n=e[1]/100,r=e[2]/100,o=n;const a=Math.max(r,.01);r*=2,n*=r<=1?r:2-r,o*=a<=1?a:2-a;const s=(r+n)/2,l=r===0?2*o/(a+o):2*n/(r+n);return[t,l*100,s*100]};u.hsv.rgb=function(e){const t=e[0]/60,n=e[1]/100;let r=e[2]/100;const o=Math.floor(t)%6,a=t-Math.floor(t),s=255*r*(1-n),l=255*r*(1-n*a),i=255*r*(1-n*(1-a));switch(r*=255,o){case 0:return[r,i,s];case 1:return[l,r,s];case 2:return[s,r,i];case 3:return[s,l,r];case 4:return[i,s,r];case 5:return[r,s,l]}};u.hsv.hsl=function(e){const t=e[0],n=e[1]/100,r=e[2]/100,o=Math.max(r,.01);let a,s;s=(2-n)*r;const l=(2-n)*o;return a=n*o,a/=l<=1?l:2-l,a=a||0,s/=2,[t,a*100,s*100]};u.hwb.rgb=function(e){const t=e[0]/360;let n=e[1]/100,r=e[2]/100;const o=n+r;let a;o>1&&(n/=o,r/=o);const s=Math.floor(6*t),l=1-r;a=6*t-s,s&1&&(a=1-a);const i=n+a*(l-n);let c,d,f;switch(s){default:case 6:case 0:c=l,d=i,f=n;break;case 1:c=i,d=l,f=n;break;case 2:c=n,d=l,f=i;break;case 3:c=n,d=i,f=l;break;case 4:c=i,d=n,f=l;break;case 5:c=l,d=n,f=i;break}return[c*255,d*255,f*255]};u.cmyk.rgb=function(e){const t=e[0]/100,n=e[1]/100,r=e[2]/100,o=e[3]/100,a=1-Math.min(1,t*(1-o)+o),s=1-Math.min(1,n*(1-o)+o),l=1-Math.min(1,r*(1-o)+o);return[a*255,s*255,l*255]};u.xyz.rgb=function(e){const t=e[0]/100,n=e[1]/100,r=e[2]/100;let o,a,s;return o=t*3.2406+n*-1.5372+r*-.4986,a=t*-.9689+n*1.8758+r*.0415,s=t*.0557+n*-.204+r*1.057,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,s=s>.0031308?1.055*s**(1/2.4)-.055:s*12.92,o=Math.min(Math.max(0,o),1),a=Math.min(Math.max(0,a),1),s=Math.min(Math.max(0,s),1),[o*255,a*255,s*255]};u.xyz.lab=function(e){let t=e[0],n=e[1],r=e[2];t/=95.047,n/=100,r/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116;const o=116*n-16,a=500*(t-n),s=200*(n-r);return[o,a,s]};u.lab.xyz=function(e){const t=e[0],n=e[1],r=e[2];let o,a,s;a=(t+16)/116,o=n/500+a,s=a-r/200;const l=a**3,i=o**3,c=s**3;return a=l>.008856?l:(a-16/116)/7.787,o=i>.008856?i:(o-16/116)/7.787,s=c>.008856?c:(s-16/116)/7.787,o*=95.047,a*=100,s*=108.883,[o,a,s]};u.lab.lch=function(e){const t=e[0],n=e[1],r=e[2];let o;o=Math.atan2(r,n)*360/2/Math.PI,o<0&&(o+=360);const s=Math.sqrt(n*n+r*r);return[t,s,o]};u.lch.lab=function(e){const t=e[0],n=e[1],o=e[2]/360*2*Math.PI,a=n*Math.cos(o),s=n*Math.sin(o);return[t,a,s]};u.rgb.ansi16=function(e,t=null){const[n,r,o]=e;let a=t===null?u.rgb.hsv(e)[2]:t;if(a=Math.round(a/50),a===0)return 30;let s=30+(Math.round(o/255)<<2|Math.round(r/255)<<1|Math.round(n/255));return a===2&&(s+=60),s};u.hsv.ansi16=function(e){return u.rgb.ansi16(u.hsv.rgb(e),e[2])};u.rgb.ansi256=function(e){const t=e[0],n=e[1],r=e[2];return t===n&&n===r?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(r/255*5)};u.ansi16.rgb=function(e){let t=e%10;if(t===0||t===7)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];const n=(~~(e>50)+1)*.5,r=(t&1)*n*255,o=(t>>1&1)*n*255,a=(t>>2&1)*n*255;return[r,o,a]};u.ansi256.rgb=function(e){if(e>=232){const a=(e-232)*10+8;return[a,a,a]}e-=16;let t;const n=Math.floor(e/36)/5*255,r=Math.floor((t=e%36)/6)/5*255,o=t%6/5*255;return[n,r,o]};u.rgb.hex=function(e){const n=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(n.length)+n};u.hex.rgb=function(e){const t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let n=t[0];t[0].length===3&&(n=n.split("").map(l=>l+l).join(""));const r=parseInt(n,16),o=r>>16&255,a=r>>8&255,s=r&255;return[o,a,s]};u.rgb.hcg=function(e){const t=e[0]/255,n=e[1]/255,r=e[2]/255,o=Math.max(Math.max(t,n),r),a=Math.min(Math.min(t,n),r),s=o-a;let l,i;return s<1?l=a/(1-s):l=0,s<=0?i=0:o===t?i=(n-r)/s%6:o===n?i=2+(r-t)/s:i=4+(t-n)/s,i/=6,i%=1,[i*360,s*100,l*100]};u.hsl.hcg=function(e){const t=e[1]/100,n=e[2]/100,r=n<.5?2*t*n:2*t*(1-n);let o=0;return r<1&&(o=(n-.5*r)/(1-r)),[e[0],r*100,o*100]};u.hsv.hcg=function(e){const t=e[1]/100,n=e[2]/100,r=t*n;let o=0;return r<1&&(o=(n-r)/(1-r)),[e[0],r*100,o*100]};u.hcg.rgb=function(e){const t=e[0]/360,n=e[1]/100,r=e[2]/100;if(n===0)return[r*255,r*255,r*255];const o=[0,0,0],a=t%1*6,s=a%1,l=1-s;let i=0;switch(Math.floor(a)){case 0:o[0]=1,o[1]=s,o[2]=0;break;case 1:o[0]=l,o[1]=1,o[2]=0;break;case 2:o[0]=0,o[1]=1,o[2]=s;break;case 3:o[0]=0,o[1]=l,o[2]=1;break;case 4:o[0]=s,o[1]=0,o[2]=1;break;default:o[0]=1,o[1]=0,o[2]=l}return i=(1-n)*r,[(n*o[0]+i)*255,(n*o[1]+i)*255,(n*o[2]+i)*255]};u.hcg.hsv=function(e){const t=e[1]/100,n=e[2]/100,r=t+n*(1-t);let o=0;return r>0&&(o=t/r),[e[0],o*100,r*100]};u.hcg.hsl=function(e){const t=e[1]/100,r=e[2]/100*(1-t)+.5*t;let o=0;return r>0&&r<.5?o=t/(2*r):r>=.5&&r<1&&(o=t/(2*(1-r))),[e[0],o*100,r*100]};u.hcg.hwb=function(e){const t=e[1]/100,n=e[2]/100,r=t+n*(1-t);return[e[0],(r-t)*100,(1-r)*100]};u.hwb.hcg=function(e){const t=e[1]/100,r=1-e[2]/100,o=r-t;let a=0;return o<1&&(a=(r-o)/(1-o)),[e[0],o*100,a*100]};u.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]};u.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]};u.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]};u.gray.hsl=function(e){return[0,0,e[0]]};u.gray.hsv=u.gray.hsl;u.gray.hwb=function(e){return[0,100,e[0]]};u.gray.cmyk=function(e){return[0,0,0,e[0]]};u.gray.lab=function(e){return[e[0],0,0]};u.gray.hex=function(e){const t=Math.round(e[0]/100*255)&255,r=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return"000000".substring(r.length)+r};u.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]};const B=_e;function Qe(){const e={},t=Object.keys(B);for(let n=t.length,r=0;r1&&(n=r),e(n))};return"conversion"in e&&(t.conversion=e.conversion),t}function st(e){const t=function(...n){const r=n[0];if(r==null)return r;r.length>1&&(n=r);const o=e(n);if(typeof o=="object")for(let a=o.length,s=0;s{O[e]={},Object.defineProperty(O[e],"channels",{value:U[e].channels}),Object.defineProperty(O[e],"labels",{value:U[e].labels});const t=rt(e);Object.keys(t).forEach(r=>{const o=t[r];O[e][r]=st(o),O[e][r].raw=at(o)})});var lt=O;const w=fe(lt);var it=Oe,ct=function(){return it.Date.now()},ut=ct,ft=/\s/;function ht(e){for(var t=e.length;t--&&ft.test(e.charAt(t)););return t}var dt=ht,gt=dt,mt=/^\s+/;function bt(e){return e&&e.slice(0,gt(e)+1).replace(mt,"")}var vt=bt,pt=vt,ae=J,yt=Ie,se=NaN,xt=/^[-+]0x[0-9a-f]+$/i,wt=/^0b[01]+$/i,kt=/^0o[0-7]+$/i,_t=parseInt;function Et(e){if(typeof e=="number")return e;if(yt(e))return se;if(ae(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=ae(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=pt(e);var n=wt.test(e);return n||kt.test(e)?_t(e.slice(2),n?2:8):xt.test(e)?se:+e}var Mt=Et,Ct=J,D=ut,le=Mt,$t="Expected a function",Nt=Math.max,Ot=Math.min;function It(e,t,n){var r,o,a,s,l,i,c=0,d=!1,f=!1,g=!0;if(typeof e!="function")throw new TypeError($t);t=le(t)||0,Ct(n)&&(d=!!n.leading,f="maxWait"in n,a=f?Nt(le(n.maxWait)||0,t):a,g="trailing"in n?!!n.trailing:g);function k(v){var E=r,T=o;return r=o=void 0,c=v,s=e.apply(T,E),s}function N(v){return c=v,l=setTimeout(m,t),d?k(v):s}function _(v){var E=v-i,T=v-c,te=t-E;return f?Ot(te,a-T):te}function p(v){var E=v-i,T=v-c;return i===void 0||E>=t||E<0||f&&T>=a}function m(){var v=D();if(p(v))return x(v);l=setTimeout(m,_(v))}function x(v){return l=void 0,g&&r?k(v):(r=o=void 0,s)}function C(){l!==void 0&&clearTimeout(l),c=0,r=i=o=l=void 0}function X(){return l===void 0?s:x(D())}function R(){var v=D(),E=p(v);if(r=arguments,o=this,i=v,E){if(l===void 0)return N(i);if(f)return clearTimeout(l),l=setTimeout(m,t),k(i)}return l===void 0&&(l=setTimeout(m,t)),s}return R.cancel=C,R.flush=X,R}var St=It,Rt=St,Tt=J,jt="Expected a function";function Ft(e,t,n){var r=!0,o=!0;if(typeof e!="function")throw new TypeError(jt);return Tt(n)&&(r="leading"in n?!!n.leading:r,o="trailing"in n?!!n.trailing:o),Rt(e,t,{leading:r,maxWait:t,trailing:o})}var zt=Ft;const Ht=fe(zt);var Pt=M.div({position:"relative",maxWidth:250}),Lt=M(ue)({position:"absolute",zIndex:1,top:4,left:4}),qt=M.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Bt=M(Me)(({theme:e})=>({fontFamily:e.typography.fonts.base})),Wt=M.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Xt=M.div(({theme:e,active:t})=>({width:16,height:16,boxShadow:t?`${e.appBorderColor} 0 0 0 1px inset, ${e.textMutedColor}50 0 0 0 4px`:`${e.appBorderColor} 0 0 0 1px inset`,borderRadius:e.appBorderRadius})),Dt=`url('data:image/svg+xml;charset=utf-8,')`,ie=({value:e,active:t,onClick:n,style:r,...o})=>{let a=`linear-gradient(${e}, ${e}), ${Dt}, linear-gradient(#fff, #fff)`;return h.createElement(Xt,{...o,active:t,onClick:n,style:{...r,backgroundImage:a}})},Kt=M(Ce.Input)(({theme:e})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:e.typography.fonts.base})),Vt=M($e)(({theme:e})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:e.input.color})),Ee=(e=>(e.RGB="rgb",e.HSL="hsl",e.HEX="hex",e))(Ee||{}),P=Object.values(Ee),At=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Gt=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Ut=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,Y=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Yt=/^\s*#?([0-9a-f]{3})\s*$/i,Jt={hex:De,rgb:Ue,hsl:Ae},L={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},ce=e=>{let t=e==null?void 0:e.match(At);if(!t)return[0,0,0,1];let[,n,r,o,a=1]=t;return[n,r,o,a].map(Number)},I=e=>{if(!e)return;let t=!0;if(Gt.test(e)){let[s,l,i,c]=ce(e),[d,f,g]=w.rgb.hsl([s,l,i])||[0,0,0];return{valid:t,value:e,keyword:w.rgb.keyword([s,l,i]),colorSpace:"rgb",rgb:e,hsl:`hsla(${d}, ${f}%, ${g}%, ${c})`,hex:`#${w.rgb.hex([s,l,i]).toLowerCase()}`}}if(Ut.test(e)){let[s,l,i,c]=ce(e),[d,f,g]=w.hsl.rgb([s,l,i])||[0,0,0];return{valid:t,value:e,keyword:w.hsl.keyword([s,l,i]),colorSpace:"hsl",rgb:`rgba(${d}, ${f}, ${g}, ${c})`,hsl:e,hex:`#${w.hsl.hex([s,l,i]).toLowerCase()}`}}let n=e.replace("#",""),r=w.keyword.rgb(n)||w.hex.rgb(n),o=w.rgb.hsl(r),a=e;if(/[^#a-f0-9]/i.test(e)?a=n:Y.test(e)&&(a=`#${n}`),a.startsWith("#"))t=Y.test(a);else try{w.keyword.hex(a)}catch{t=!1}return{valid:t,value:a,keyword:w.rgb.keyword(r),colorSpace:"hex",rgb:`rgba(${r[0]}, ${r[1]}, ${r[2]}, 1)`,hsl:`hsla(${o[0]}, ${o[1]}%, ${o[2]}%, 1)`,hex:a}},Qt=(e,t,n)=>{if(!e||!(t!=null&&t.valid))return L[n];if(n!=="hex")return(t==null?void 0:t[n])||L[n];if(!t.hex.startsWith("#"))try{return`#${w.keyword.hex(t.hex)}`}catch{return L.hex}let r=t.hex.match(Yt);if(!r)return Y.test(t.hex)?t.hex:L.hex;let[o,a,s]=r[1].split("");return`#${o}${o}${a}${a}${s}${s}`},Zt=(e,t)=>{let[n,r]=b.useState(e||""),[o,a]=b.useState(()=>I(n)),[s,l]=b.useState((o==null?void 0:o.colorSpace)||"hex");b.useEffect(()=>{let f=e||"",g=I(f);r(f),a(g),l((g==null?void 0:g.colorSpace)||"hex")},[e]);let i=b.useMemo(()=>Qt(n,o,s).toLowerCase(),[n,o,s]),c=b.useCallback(f=>{let g=I(f),k=(g==null?void 0:g.value)||f||"";r(k),k===""&&(a(void 0),t(void 0)),g&&(a(g),l(g.colorSpace),t(g.value))},[t]),d=b.useCallback(()=>{let f=P.indexOf(s)+1;f>=P.length&&(f=0),l(P[f]);let g=(o==null?void 0:o[P[f]])||"";r(g),t(g)},[o,s,t]);return{value:n,realValue:i,updateValue:c,color:o,colorSpace:s,cycleColorSpace:d}},W=e=>e.replace(/\s*/,"").toLowerCase(),en=(e,t,n)=>{let[r,o]=b.useState(t!=null&&t.valid?[t]:[]);b.useEffect(()=>{t===void 0&&o([])},[t]);let a=b.useMemo(()=>(e||[]).map(l=>typeof l=="string"?I(l):l.title?{...I(l.color),keyword:l.title}:I(l.color)).concat(r).filter(Boolean).slice(-27),[e,r]),s=b.useCallback(l=>{l!=null&&l.valid&&(a.some(i=>W(i[n])===W(l[n]))||o(i=>i.concat(l)))},[n,a]);return{presets:a,addPreset:s}},tn=({name:e,value:t,onChange:n,onFocus:r,onBlur:o,presetColors:a,startOpen:s=!1})=>{let l=b.useCallback(Ht(n,200),[n]),{value:i,realValue:c,updateValue:d,color:f,colorSpace:g,cycleColorSpace:k}=Zt(t,l),{presets:N,addPreset:_}=en(a,f,g),p=Jt[g];return h.createElement(Pt,null,h.createElement(Lt,{startOpen:s,closeOnOutsideClick:!0,onVisibleChange:()=>_(f),tooltip:h.createElement(qt,null,h.createElement(p,{color:c==="transparent"?"#000000":c,onChange:d,onFocus:r,onBlur:o}),N.length>0&&h.createElement(Wt,null,N.map((m,x)=>h.createElement(ue,{key:`${m.value}-${x}`,hasChrome:!1,tooltip:h.createElement(Bt,{note:m.keyword||m.value})},h.createElement(ie,{value:m[g],active:f&&W(m[g])===W(f[g]),onClick:()=>d(m.value)})))))},h.createElement(ie,{value:c,style:{margin:4}})),h.createElement(Kt,{id:Ne(e),value:i,onChange:m=>d(m.target.value),onFocus:m=>m.target.select(),placeholder:"Choose color..."}),i?h.createElement(Vt,{onClick:k}):null)},hn=tn;export{tn as ColorControl,hn as default}; diff --git a/demo-DES-654-table-of-content/assets/Column.docs-DMKOXL6B.js b/demo-DES-654-table-of-content/assets/Column.docs-DMKOXL6B.js new file mode 100644 index 0000000000..e433d707ff --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Column.docs-DMKOXL6B.js @@ -0,0 +1,20 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as o}from"./index-DlpNa54Y.js";import{M as a,d as r,P as i,e as m,f as d}from"./index-ahswvvAf.js";import{C as c,a as l}from"./Column.stories-topuiM3x.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./Paragraph-C4jU4-Z4.js";import"./Card-vGcoej70.js";import"./Heading-CWbN3elW.js";import"./getHeadingElement-DiRwFEz7.js";const h=` + +# Column + +Stacks its children vertically and adds a vertical gap between them. +`;function t(s){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:c}),` +`,e.jsx(r,{children:h}),` +`,e.jsx(n.h2,{id:"design",children:"Design"}),` +`,e.jsxs(n.p,{children:["The five ",e.jsx(n.a,{href:"/docs/docs-design-guidelines-space--docs",children:"space"})," sizes are available for the size of the gap."]}),` +`,e.jsx(n.h2,{id:"how-to-use",children:"How to Use"}),` +`,e.jsx(n.p,{children:"Wrap a Column around a set of components that need the same amount of white space between them."}),` +`,e.jsxs(n.p,{children:["To add white space below a single element, you can alternatively use a utility class for bottom margins, e.g. ",e.jsx(n.code,{children:'class="ams-mb--md"'}),"."]}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"default",children:"Default"}),` +`,e.jsx(i,{}),` +`,e.jsx(m,{}),` +`,e.jsx(n.h3,{id:"use-another-html-element",children:"Use Another HTML Element"}),` +`,e.jsxs(n.p,{children:["By default, a Column renders a ",e.jsx(n.code,{children:"
    "}),`. +Use the `,e.jsx(n.code,{children:"as"})," prop to make your markup more semantic."]}),` +`,e.jsx(d,{of:l})]})}function X(s={}){const{wrapper:n}={...o(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{X as default}; diff --git a/demo-DES-654-table-of-content/assets/Column.stories-topuiM3x.js b/demo-DES-654-table-of-content/assets/Column.stories-topuiM3x.js new file mode 100644 index 0000000000..6c5edbdc99 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Column.stories-topuiM3x.js @@ -0,0 +1,28 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{c as j}from"./clsx-B-dksMZM.js";import{r as C}from"./index-BwDkhjyp.js";import{P as r}from"./Paragraph-C4jU4-Z4.js";import{C as a}from"./Card-vGcoej70.js";import{H as o}from"./Heading-CWbN3elW.js";const s=C.forwardRef(({as:n="div",children:g,className:h,gap:f="medium",...v},x)=>e.jsx(n,{...v,ref:x,className:j("ams-column",`ams-column--${f}`,h),children:g}));s.displayName="Column";try{s.displayName="Column",s.__docgenInfo={description:"",displayName:"Column",props:{as:{defaultValue:null,description:"The HTML element to use.",name:"as",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"div"'},{value:'"section"'}]}},gap:{defaultValue:{value:"medium"},description:"The amount of vertical space between items.",name:"gap",required:!1,type:{name:"string"}}}}}catch{}const k=Array.from(Array(3).keys()).map(n=>e.jsx(r,{className:"ams-docs-pink-box",children:n+1},n)),b={title:"Components/Layout/Column",component:s,args:{children:k},argTypes:{gap:{control:"radio",options:["extra-small","small","medium","large","extra-large"]}}},l={},i={args:{as:"section",children:[e.jsxs(a,{children:[e.jsx(a.HeadingGroup,{tagline:"Nieuws",children:e.jsx(o,{level:2,size:"level-3",children:e.jsx(a.Link,{href:"#",children:"Nieuwe manieren om afval op te halen"})})}),e.jsx(r,{children:"Afvalboten, bakfietsen en ondergrondse containers. We experimenteren met nieuwe manieren om afval op te halen in het centrum."}),e.jsx(r,{size:"small",children:"Gepubliceerd: 1 juli 2023"})]},1),e.jsxs(a,{children:[e.jsx(a.HeadingGroup,{tagline:"Nieuws",children:e.jsx(o,{level:2,size:"level-3",children:e.jsx(a.Link,{href:"#",children:"Verlenging proef ophalen afval per boot"})})}),e.jsx(r,{children:"Een proef met het anders ophalen van afval. We halen vuilniszakken hier op met kleine wagentjes, kleine vuilniswagens en een afvalboot."}),e.jsx(r,{size:"small",children:"Gepubliceerd: 15 juni 2023"})]},2)]}};var t,m,d;l.parameters={...l.parameters,docs:{...(t=l.parameters)==null?void 0:t.docs,source:{originalSource:"{}",...(d=(m=l.parameters)==null?void 0:m.docs)==null?void 0:d.source}}};var p,c,u;i.parameters={...i.parameters,docs:{...(p=i.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + as: 'section', + children: [ + + + Nieuwe manieren om afval op te halen + + + + Afvalboten, bakfietsen en ondergrondse containers. We experimenteren met nieuwe manieren om afval op te halen + in het centrum. + + Gepubliceerd: 1 juli 2023 + , + + + Verlenging proef ophalen afval per boot + + + + Een proef met het anders ophalen van afval. We halen vuilniszakken hier op met kleine wagentjes, kleine + vuilniswagens en een afvalboot. + + Gepubliceerd: 15 juni 2023 + ] + } +}`,...(u=(c=i.parameters)==null?void 0:c.docs)==null?void 0:u.source}}};const y=["Default","CustomTagName"],G=Object.freeze(Object.defineProperty({__proto__:null,CustomTagName:i,Default:l,__namedExportsOrder:y,default:b},Symbol.toStringTag,{value:"Module"}));export{G as C,i as a}; diff --git a/demo-DES-654-table-of-content/assets/DateInput.docs-DNmdEQsu.js b/demo-DES-654-table-of-content/assets/DateInput.docs-DNmdEQsu.js new file mode 100644 index 0000000000..5725f6da99 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/DateInput.docs-DNmdEQsu.js @@ -0,0 +1,19 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as o}from"./index-DlpNa54Y.js";import{M as r,d as a,P as d,e as m,f as s}from"./index-ahswvvAf.js";import{D as c,I as p,a as l}from"./DateInput.stories-D2lfrHBX.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-B0Sjsx63.js";import"./clsx-B-dksMZM.js";import"./index.esm-DQkeu4as.js";const h=` + +# Date Input + +Helps users enter a date. + +## Visual considerations + +This component uses a native date input, which is styled differently in different browsers and operating systems. +Recreating the native functionality is quite difficult and prone to accessibility errors, which is why we’ve chosen not to do that. +This does mean that this component does not look identical on all browsers and operating systems. +`;function i(t){const e={h2:"h2",...o(),...t.components};return n.jsxs(n.Fragment,{children:[n.jsx(r,{of:c}),` +`,n.jsx(a,{children:h}),` +`,n.jsx(d,{}),` +`,n.jsx(m,{}),` +`,n.jsx(e.h2,{id:"invalid",children:"Invalid"}),` +`,n.jsx(s,{of:p}),` +`,n.jsx(e.h2,{id:"disabled",children:"Disabled"}),` +`,n.jsx(s,{of:l})]})}function X(t={}){const{wrapper:e}={...o(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(i,{...t})}):i(t)}export{X as default}; diff --git a/demo-DES-654-table-of-content/assets/DateInput.stories-D2lfrHBX.js b/demo-DES-654-table-of-content/assets/DateInput.stories-D2lfrHBX.js new file mode 100644 index 0000000000..c3c743cbe5 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/DateInput.stories-D2lfrHBX.js @@ -0,0 +1,12 @@ +import{D as l}from"./index.esm-B0Sjsx63.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const m={title:"Components/Forms/Date Input",component:l,args:{disabled:!1},argTypes:{disabled:{description:"Prevents interaction. Avoid if possible."}}},e={},r={args:{required:!0}},a={args:{disabled:!0}};var s,t,o;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:"{}",...(o=(t=e.parameters)==null?void 0:t.docs)==null?void 0:o.source}}};var n,d,c;r.parameters={...r.parameters,docs:{...(n=r.parameters)==null?void 0:n.docs,source:{originalSource:`{ + args: { + required: true + } +}`,...(c=(d=r.parameters)==null?void 0:d.docs)==null?void 0:c.source}}};var i,p,u;a.parameters={...a.parameters,docs:{...(i=a.parameters)==null?void 0:i.docs,source:{originalSource:`{ + args: { + disabled: true + } +}`,...(u=(p=a.parameters)==null?void 0:p.docs)==null?void 0:u.source}}};const g=["Default","Invalid","Disabled"],D=Object.freeze(Object.defineProperty({__proto__:null,Default:e,Disabled:a,Invalid:r,__namedExportsOrder:g,default:m},Symbol.toStringTag,{value:"Module"}));export{D,r as I,a}; diff --git a/demo-DES-654-table-of-content/assets/DescriptionList.docs-C_u4xmxW.js b/demo-DES-654-table-of-content/assets/DescriptionList.docs-C_u4xmxW.js new file mode 100644 index 0000000000..6c7a66f74c --- /dev/null +++ b/demo-DES-654-table-of-content/assets/DescriptionList.docs-C_u4xmxW.js @@ -0,0 +1,29 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as i}from"./index-DlpNa54Y.js";import{M as s,d as a,P as l,e as m,f as o}from"./index-ahswvvAf.js";import{D as p,M as c,I as d}from"./DescriptionList.stories-Cdvqbb0c.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-B0Sjsx63.js";import"./clsx-B-dksMZM.js";import"./index.esm-DQkeu4as.js";import"./decorators-Dh4yEj-W.js";import"./exampleContent-CRK3_7Hv.js";const h=` + +# Description List + +A collection of terms and their details. + +## Design + +On a narrow screen, details appear indented below their term. +From the medium breakpoint, terms and details appear next to each other. +The column for the details is twice as wide as the one for the term. + +Details are set in bold text. + +## References + +- [MDN: \`
    \`: The Description List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) +- [WCAG: Using description lists](https://www.w3.org/WAI/WCAG22/Techniques/html/H40) +`;function r(n){const t={code:"code",h2:"h2",h3:"h3",p:"p",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:p}),` +`,e.jsx(a,{children:h}),` +`,e.jsx(l,{}),` +`,e.jsx(m,{}),` +`,e.jsx(t.h2,{id:"multiple-details",children:"Multiple details"}),` +`,e.jsx(t.p,{children:"A term may have multiple details."}),` +`,e.jsx(o,{of:c}),` +`,e.jsx(t.h3,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsxs(t.p,{children:["Set the ",e.jsx(t.code,{children:"inverseColor"}),` prop if the Description List sits on a dark background. +This ensures the colour of the text provides enough contrast.`]}),` +`,e.jsx(o,{of:d})]})}function W(n={}){const{wrapper:t}={...i(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(r,{...n})}):r(n)}export{W as default}; diff --git a/demo-DES-654-table-of-content/assets/DescriptionList.stories-Cdvqbb0c.js b/demo-DES-654-table-of-content/assets/DescriptionList.stories-Cdvqbb0c.js new file mode 100644 index 0000000000..e8b554e91a --- /dev/null +++ b/demo-DES-654-table-of-content/assets/DescriptionList.stories-Cdvqbb0c.js @@ -0,0 +1,9 @@ +import{j as s}from"./jsx-runtime-Nms4Y4qS.js";import{a as e}from"./index.esm-B0Sjsx63.js";import{i as u}from"./decorators-Dh4yEj-W.js";import{a as x}from"./exampleContent-CRK3_7Hv.js";const h=x(),j={title:"Components/Text/Description List",component:e,decorators:[u],args:{children:[s.jsx(e.Term,{children:"Gebied"},1),s.jsx(e.Details,{children:"Gemeente Amsterdam"},2),s.jsx(e.Term,{children:"Stadsdeel"},3),s.jsx(e.Details,{children:"West"},4),s.jsx(e.Term,{children:"Opmerkingen"},5),s.jsx(e.Details,{children:h},6)],inverseColor:!1}},r={},t={args:{children:[s.jsx(e.Term,{children:"Gebied"},1),s.jsx(e.Details,{children:"Gemeente Amsterdam"},2),s.jsx(e.Term,{children:"Stadsdeel"},3),s.jsx(e.Details,{children:"Noord"},4),s.jsx(e.Details,{children:"Oost"},5),s.jsx(e.Details,{children:"Zuid"},6),s.jsx(e.Details,{children:"West"},7)]}},i={args:{inverseColor:!0}};var o,a,n;r.parameters={...r.parameters,docs:{...(o=r.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(n=(a=r.parameters)==null?void 0:a.docs)==null?void 0:n.source}}};var c,l,d;t.parameters={...t.parameters,docs:{...(c=t.parameters)==null?void 0:c.docs,source:{originalSource:`{ + args: { + children: [Gebied, Gemeente Amsterdam, Stadsdeel, Noord, Oost, Zuid, West] + } +}`,...(d=(l=t.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var p,m,D;i.parameters={...i.parameters,docs:{...(p=i.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(D=(m=i.parameters)==null?void 0:m.docs)==null?void 0:D.source}}};const L=["Default","MultipleDetails","InvertedColor"],S=Object.freeze(Object.defineProperty({__proto__:null,Default:r,InvertedColor:i,MultipleDetails:t,__namedExportsOrder:L,default:j},Symbol.toStringTag,{value:"Module"}));export{S as D,i as I,t as M}; diff --git a/demo-DES-654-table-of-content/assets/Dialog.docs-OvqwdXqk.js b/demo-DES-654-table-of-content/assets/Dialog.docs-OvqwdXqk.js new file mode 100644 index 0000000000..f4b8c7a75c --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Dialog.docs-OvqwdXqk.js @@ -0,0 +1,52 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as s}from"./index-DlpNa54Y.js";import{M as a,d as i,P as l,e as c,f as n}from"./index-ahswvvAf.js";import{D as h,W as d,T as p,V as m}from"./Dialog.stories-D3C0fHQf.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./Heading-CWbN3elW.js";import"./getHeadingElement-DiRwFEz7.js";import"./IconButton-CFmnpWmC.js";import"./index.esm-DQkeu4as.js";import"./VisuallyHidden-Db-04MJ9.js";import"./Icon-CuaumHXX.js";import"./Button-_hHZidVy.js";import"./Paragraph-C4jU4-Z4.js";const u=` + +# Dialog + +A Dialog allows the user to focus on one task or a piece of information by popping up and blocking the page content until the modal task is completed or until the user dismisses the action. + +## Guidelines + +- Use dialogs sparingly because they interrupt the user’s workflow. +- Use a dialog for short and non-frequent tasks. + Consider using the main flow for regular tasks. + +## The order of buttons + +If your Dialog needs more than one button, put the one for the primary action first and the other buttons behind it. +Sighted users will read the primary action first, in line with the natural reading order. +The same goes for users of screen readers, who will hear the primary action first, and users of a keyboard, who will focus the primary action first. +Also, this approach keeps the order of buttons consistent on both narrow and wide screens: if the buttons do not fit next to each other, they get stacked vertically with the primary action on top. + +## Keyboard Support + +| key | function | +| :---------- | :--------------------------------------------------------------- | +| Tab | Moves focus to the next focusable element inside the dialog. | +| Shift + Tab | Moves focus to the previous focusable element inside the dialog. | +| Escape | Closes the dialog. | + +## References + +- [HTMLDialogElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement) +- [Return value](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue) +- [Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://www.nngroup.com/articles/modal-nonmodal-dialog/) +- [Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) +`;function r(t){const o={code:"code",h2:"h2",p:"p",pre:"pre",...s(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:h}),` +`,e.jsx(i,{children:u}),` +`,e.jsx(l,{}),` +`,e.jsx(c,{}),` +`,e.jsx(o.h2,{id:"with-scrollbar",children:"With Scrollbar"}),` +`,e.jsx(o.p,{children:"Content taller than the dialog itself will scroll."}),` +`,e.jsx(n,{of:d,className:"ams-dialog-story"}),` +`,e.jsx(o.h2,{id:"open-dialog-button",children:"Open Dialog Button"}),` +`,e.jsx(o.p,{children:"Click or tap the button to open a dialog."}),` +`,e.jsx(n,{of:p}),` +`,e.jsx(o.p,{children:"Some basic example code to open and close a dialog:"}),` +`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-ts",children:`const openDialog = () => (document.querySelector("#openDialog") as HTMLDialogElement)?.showModal(); + +const closeDialog = (e: MouseEvent) => e.currentTarget.closest("dialog")?.close(); +`})}),` +`,e.jsx(o.h2,{id:"vertically-stacked-buttons",children:"Vertically Stacked Buttons"}),` +`,e.jsx(o.p,{children:`If the buttons don’t fit next to each other, they will stack vertically and stretch to the full width. +This can occur with a narrow Dialog, long Button labels, a large text size or zooming in.`}),` +`,e.jsx(n,{of:m})]})}function P(t={}){const{wrapper:o}={...s(),...t.components};return o?e.jsx(o,{...t,children:e.jsx(r,{...t})}):r(t)}export{P as default}; diff --git a/demo-DES-654-table-of-content/assets/Dialog.stories-D3C0fHQf.js b/demo-DES-654-table-of-content/assets/Dialog.stories-D3C0fHQf.js new file mode 100644 index 0000000000..aac2ad9445 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Dialog.stories-D3C0fHQf.js @@ -0,0 +1,111 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{c as B}from"./clsx-B-dksMZM.js";import{r as P}from"./index-BwDkhjyp.js";import{H as d}from"./Heading-CWbN3elW.js";import{I as C}from"./IconButton-CFmnpWmC.js";import{B as a}from"./Button-_hHZidVy.js";import{P as t}from"./Paragraph-C4jU4-Z4.js";const g=P.forwardRef(({actions:n,children:r,className:D,closeButtonLabel:z="Sluiten",title:S,..._},A)=>e.jsx("dialog",{..._,ref:A,className:B("ams-dialog",D),children:e.jsxs("form",{method:"dialog",className:"ams-dialog__form",children:[e.jsxs("header",{className:"ams-dialog__header",children:[e.jsx(d,{size:"level-4",children:S}),e.jsx(C,{formNoValidate:!0,label:z,size:"level-4"})]}),e.jsx("article",{className:"ams-dialog__article",children:r}),n&&e.jsx("footer",{className:"ams-dialog__footer",children:n})]})}));g.displayName="Dialog";try{g.displayName="Dialog",g.__docgenInfo={description:"",displayName:"Dialog",props:{actions:{defaultValue:null,description:"The button(s) in the footer. Start with a primary button.",name:"actions",required:!1,type:{name:"ReactNode"}},closeButtonLabel:{defaultValue:{value:"Sluiten"},description:"The label for the button that dismisses the Dialog.",name:"closeButtonLabel",required:!1,type:{name:"string"}}}}}catch{}const c=n=>{var r;return(r=n.currentTarget.closest("dialog"))==null?void 0:r.close()},N={title:"Components/Containers/Dialog",component:g,args:{actions:e.jsxs(e.Fragment,{children:[e.jsx(a,{type:"submit",children:"Doorgaan"}),e.jsx(a,{onClick:c,variant:"tertiary",children:"Stoppen"})]}),children:e.jsx(t,{children:"Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet opgeslagen zijn."}),title:"Niet alle gegevens zijn opgeslagen"},argTypes:{actions:{table:{disable:!0}}}},o={args:{open:!0},argTypes:{open:{description:"Whether the dialog box is active and available for interaction."},title:{description:"The text for the heading."}},decorators:[n=>e.jsx("div",{style:{backgroundColor:"#0006",position:"absolute",width:"100%",height:"100%"},children:e.jsx(n,{})})],parameters:{layout:"fullscreen",docs:{story:{height:"32em"}}}},i={args:{actions:e.jsx(a,{onClick:c,children:"Sluiten"}),children:[e.jsx(d,{level:2,size:"level-5",children:"Algemeen"},1),e.jsx(t,{children:"De gemeente Amsterdam verwerkt bij de uitvoering van haar taken en verplichtingen persoonsgegevens. De manier waarop de gemeente Amsterdam om gaat met persoonsgegevens is vastgelegd in het stedelijk kader verwerken persoonsgegevens."},2),e.jsx(t,{children:"Deze verklaring geeft aanvullende informatie over de omgang met persoonsgegevens door de gemeente Amsterdam en over uw mogelijkheden tot het uitoefenen van uw rechten met betrekking tot persoonsgegevens."},3),e.jsx(t,{children:"Meer specifieke informatie over privacy en de verwerking van persoonsgegevens door de gemeente Amsterdam kunt u op de hoofdpagina vinden."},4),e.jsx(t,{children:"Vanwege nieuwe wetgeving of andere ontwikkelingen, past de gemeente regelmatig haar processen aan. Dit kunnen ook wijzigingen zijn in de wijze van het verwerken van persoonsgegevens. Wij raden u daarom aan om regelmatig deze pagina te bekijken. Deze pagina wordt doorlopend geactualiseerd."},5),e.jsx(d,{level:2,size:"level-5",children:"Geldende wet- en regelgeving en reikwijdte"},6),e.jsx(t,{children:"Vanaf 25 mei 2018 is de Algemene verordening gegevensbescherming (Avg) van toepassing op alle verwerkingen van persoonsgegevens. Deze Europese wetgeving heeft directe werking in Nederland. Voor die zaken die nationaal geregeld moeten worden, is de Uitvoeringswet Avg in Nederland aanvullend van toepassing. Deze wetteksten kunt u vinden op de website van Autoriteit Persoonsgegevens."},7)],open:!0,title:"Privacyverklaring gemeente Amsterdam"},decorators:[n=>e.jsx("div",{style:{backgroundColor:"#0006",position:"absolute",width:"100%",height:"100%"},children:e.jsx(n,{})})],parameters:{layout:"fullscreen",docs:{story:{height:"100vh"}}}},s={args:{id:"openDialog"},decorators:[n=>e.jsxs("article",{children:[e.jsx(a,{onClick:()=>{var r;return(r=document.querySelector("#openDialog"))==null?void 0:r.showModal()},children:"Open Dialog"}),e.jsx(n,{})]})]},l={args:{actions:e.jsxs(e.Fragment,{children:[e.jsx(a,{type:"submit",children:"Lange teksten op deze knoppen"}),e.jsx(a,{onClick:c,variant:"tertiary",children:"Om verticaal stapelen te demonstreren"})]}),open:!0},decorators:[n=>e.jsx("div",{style:{backgroundColor:"#0006",position:"absolute",width:"100%",height:"100%"},children:e.jsx(n,{})})],parameters:{layout:"fullscreen",docs:{story:{height:"32em"}}}};var p,m,v;o.parameters={...o.parameters,docs:{...(p=o.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + open: true + }, + argTypes: { + open: { + description: 'Whether the dialog box is active and available for interaction.' + }, + title: { + description: 'The text for the heading.' + } + }, + decorators: [Story =>
    + +
    ], + parameters: { + layout: 'fullscreen', + docs: { + story: { + height: '32em' + } + } + } +}`,...(v=(m=o.parameters)==null?void 0:m.docs)==null?void 0:v.source}}};var u,h,k;i.parameters={...i.parameters,docs:{...(u=i.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + actions: , + children: [ + Algemeen + , + De gemeente Amsterdam verwerkt bij de uitvoering van haar taken en verplichtingen persoonsgegevens. De manier + waarop de gemeente Amsterdam om gaat met persoonsgegevens is vastgelegd in het stedelijk kader verwerken + persoonsgegevens. + , + Deze verklaring geeft aanvullende informatie over de omgang met persoonsgegevens door de gemeente Amsterdam en + over uw mogelijkheden tot het uitoefenen van uw rechten met betrekking tot persoonsgegevens. + , + Meer specifieke informatie over privacy en de verwerking van persoonsgegevens door de gemeente Amsterdam kunt u + op de hoofdpagina vinden. + , + Vanwege nieuwe wetgeving of andere ontwikkelingen, past de gemeente regelmatig haar processen aan. Dit kunnen + ook wijzigingen zijn in de wijze van het verwerken van persoonsgegevens. Wij raden u daarom aan om regelmatig + deze pagina te bekijken. Deze pagina wordt doorlopend geactualiseerd. + , + Geldende wet- en regelgeving en reikwijdte + , + Vanaf 25 mei 2018 is de Algemene verordening gegevensbescherming (Avg) van toepassing op alle verwerkingen van + persoonsgegevens. Deze Europese wetgeving heeft directe werking in Nederland. Voor die zaken die nationaal + geregeld moeten worden, is de Uitvoeringswet Avg in Nederland aanvullend van toepassing. Deze wetteksten kunt u + vinden op de website van Autoriteit Persoonsgegevens. + ], + open: true, + title: 'Privacyverklaring gemeente Amsterdam' + }, + decorators: [Story =>
    + +
    ], + parameters: { + layout: 'fullscreen', + docs: { + story: { + height: '100vh' + } + } + } +}`,...(k=(h=i.parameters)==null?void 0:h.docs)==null?void 0:k.source}}};var w,y,j;s.parameters={...s.parameters,docs:{...(w=s.parameters)==null?void 0:w.docs,source:{originalSource:`{ + args: { + id: 'openDialog' + }, + decorators: [Story =>
    + + +
    ] +}`,...(j=(y=s.parameters)==null?void 0:y.docs)==null?void 0:j.source}}};var f,b,x;l.parameters={...l.parameters,docs:{...(f=l.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + actions: <> + + + , + open: true + }, + decorators: [Story =>
    + +
    ], + parameters: { + layout: 'fullscreen', + docs: { + story: { + height: '32em' + } + } + } +}`,...(x=(b=l.parameters)==null?void 0:b.docs)==null?void 0:x.source}}};const T=["Default","WithScrollbar","TriggerButton","VerticalButtons"],q=Object.freeze(Object.defineProperty({__proto__:null,Default:o,TriggerButton:s,VerticalButtons:l,WithScrollbar:i,__namedExportsOrder:T,default:N},Symbol.toStringTag,{value:"Module"}));export{q as D,s as T,l as V,i as W}; diff --git a/demo-DES-654-table-of-content/assets/DocsRenderer-K4EAMTCU-BzvZslfn.js b/demo-DES-654-table-of-content/assets/DocsRenderer-K4EAMTCU-BzvZslfn.js new file mode 100644 index 0000000000..70ef6091c3 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/DocsRenderer-K4EAMTCU-BzvZslfn.js @@ -0,0 +1,2 @@ +const __vite__fileDeps=["./index-DlpNa54Y.js","./index-BwDkhjyp.js","./_commonjsHelpers-BosuxZz1.js"],__vite__mapDeps=i=>i.map(i=>__vite__fileDeps[i]); +import{_ as p}from"./iframe-F98oaA96.js";import{R as e,r as c}from"./index-BwDkhjyp.js";import{r as l,u}from"./react-18-CdTkaE-n.js";import{C as h,A as E,H as d,D as x}from"./index-ahswvvAf.js";import"../sb-preview/runtime.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";var _={code:h,a:E,...d},D=class extends c.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){let{showException:r}=this.props;r(t)}render(){let{hasError:t}=this.state,{children:r}=this.props;return t?null:e.createElement(e.Fragment,null,r)}},H=class{constructor(){this.render=async(t,r,o)=>{let n={..._,...r==null?void 0:r.components},s=x;return new Promise((m,a)=>{p(()=>import("./index-DlpNa54Y.js"),__vite__mapDeps([0,1,2]),import.meta.url).then(({MDXProvider:i})=>l(e.createElement(D,{showException:a,key:Math.random()},e.createElement(i,{components:n},e.createElement(s,{context:t,docsParameter:r}))),o)).then(()=>m())})},this.unmount=t=>{u(t)}}};export{H as DocsRenderer,_ as defaultComponents}; diff --git a/demo-DES-654-table-of-content/assets/Field.docs-1o8JWSmr.js b/demo-DES-654-table-of-content/assets/Field.docs-1o8JWSmr.js new file mode 100644 index 0000000000..238d987af6 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Field.docs-1o8JWSmr.js @@ -0,0 +1,16 @@ +import{j as t}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as o}from"./index-DlpNa54Y.js";import{M as e,d as s,P as a,e as m,f as p}from"./index-ahswvvAf.js";import{F as d,W as l}from"./Field.stories-QqBWZD5o.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-B0Sjsx63.js";import"./clsx-B-dksMZM.js";import"./index.esm-DQkeu4as.js";import"./Label-7rbJKFpg.js";import"./Paragraph-C4jU4-Z4.js";const c=` + +# Field + +Wraps a single input and its related elements. May indicate that the input has a validation error. + +## Guidelines + +Only use Field to wrap a single input. Use [Fieldset](/docs/components-forms-fieldset--docs) to wrap multiple inputs. +`;function r(n){const i={h2:"h2",p:"p",...o(),...n.components};return t.jsxs(t.Fragment,{children:[t.jsx(e,{of:d}),` +`,t.jsx(s,{children:c}),` +`,t.jsx(a,{}),` +`,t.jsx(m,{}),` +`,t.jsx(i.h2,{id:"with-error",children:"With Error"}),` +`,t.jsx(i.p,{children:"A Field can indicate if the contained input has a validation error."}),` +`,t.jsx(p,{of:l})]})}function P(n={}){const{wrapper:i}={...o(),...n.components};return i?t.jsx(i,{...n,children:t.jsx(r,{...n})}):r(n)}export{P as default}; diff --git a/demo-DES-654-table-of-content/assets/Field.stories-QqBWZD5o.js b/demo-DES-654-table-of-content/assets/Field.stories-QqBWZD5o.js new file mode 100644 index 0000000000..8f7eeb78f9 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Field.stories-QqBWZD5o.js @@ -0,0 +1,12 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{T as c}from"./index.esm-B0Sjsx63.js";import{c as x}from"./clsx-B-dksMZM.js";import{r as j}from"./index-BwDkhjyp.js";import{L as m}from"./Label-7rbJKFpg.js";import{P as u}from"./Paragraph-C4jU4-Z4.js";const r=j.forwardRef(({children:i,className:v,invalid:g,...h},f)=>e.jsx("div",{...h,ref:f,className:x("ams-field",g&&"ams-field--invalid",v),children:i}));r.displayName="Field";try{r.displayName="Field",r.__docgenInfo={description:"",displayName:"Field",props:{invalid:{defaultValue:null,description:"Whether the field has an input with a validation error",name:"invalid",required:!1,type:{name:"boolean"}}}}}catch{}const y={title:"Components/Forms/Field",component:r,args:{invalid:!1},render:i=>e.jsxs(r,{invalid:i.invalid,children:[e.jsx(m,{htmlFor:"input1",children:"Waar gaat het om?"}),e.jsx(u,{id:"description1",size:"small",children:"Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u."}),e.jsx(c,{id:"input1","aria-describedby":"description1","aria-invalid":i.invalid?!0:void 0})]})},a={},n={args:{invalid:!0},render:i=>e.jsxs(r,{invalid:i.invalid,children:[e.jsx(m,{htmlFor:"input2",children:"Waar gaat het om?"}),e.jsx(u,{id:"description2",size:"small",children:"Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u."}),e.jsx(c,{id:"input2","aria-describedby":"description2","aria-invalid":i.invalid?!0:void 0})]})};var s,t,d;a.parameters={...a.parameters,docs:{...(s=a.parameters)==null?void 0:s.docs,source:{originalSource:"{}",...(d=(t=a.parameters)==null?void 0:t.docs)==null?void 0:d.source}}};var o,l,p;n.parameters={...n.parameters,docs:{...(o=n.parameters)==null?void 0:o.docs,source:{originalSource:`{ + args: { + invalid: true + }, + render: args => + + + Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u. + + + +}`,...(p=(l=n.parameters)==null?void 0:l.docs)==null?void 0:p.source}}};const _=["Default","WithError"],P=Object.freeze(Object.defineProperty({__proto__:null,Default:a,WithError:n,__namedExportsOrder:_,default:y},Symbol.toStringTag,{value:"Module"}));export{P as F,n as W}; diff --git a/demo-DES-654-table-of-content/assets/Fieldset-BdWirkiG.js b/demo-DES-654-table-of-content/assets/Fieldset-BdWirkiG.js new file mode 100644 index 0000000000..6fc524a907 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Fieldset-BdWirkiG.js @@ -0,0 +1 @@ +import{j as t}from"./jsx-runtime-Nms4Y4qS.js";import{c as l}from"./clsx-B-dksMZM.js";import{r as o}from"./index-BwDkhjyp.js";const e=o.forwardRef(({children:s,className:r,legend:a,...d},i)=>t.jsxs("fieldset",{...d,ref:i,className:l("ams-fieldset",r),children:[t.jsx("legend",{className:"ams-fieldset__legend",children:a}),s]}));e.displayName="Fieldset";try{e.displayName="Fieldset",e.__docgenInfo={description:"",displayName:"Fieldset",props:{legend:{defaultValue:null,description:"The text for the caption.",name:"legend",required:!0,type:{name:"string"}}}}}catch{}export{e as F}; diff --git a/demo-DES-654-table-of-content/assets/Fieldset.docs-BH_gq5X6.js b/demo-DES-654-table-of-content/assets/Fieldset.docs-BH_gq5X6.js new file mode 100644 index 0000000000..390356bbf0 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Fieldset.docs-BH_gq5X6.js @@ -0,0 +1,26 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as s}from"./index-DlpNa54Y.js";import{M as r,d as i,P as p,e as a,f as l}from"./index-ahswvvAf.js";import{F as d,C as u}from"./Fieldset.stories-C3WPZRpe.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Fieldset-BdWirkiG.js";import"./clsx-B-dksMZM.js";import"./Checkbox-Dnr-vBw_.js";const m=` + +# Fieldset + +A component to group related form inputs. + +## Guidelines + +- Use Fieldset when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when asking for an address. +- When grouping radio inputs, use \`role="radiogroup"\` on Fieldset to have this grouping explicitly announced as a radio group. Fieldset has a default role of \`group\`. + +## Relevant WCAG Requirements + +- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Fieldset labels the purpose of a group of inputs. + +## References + +- [Providing a description for groups of form controls using fieldset and legend elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H71) +`;function t(n){const o={h2:"h2",h3:"h3",p:"p",...s(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:d}),` +`,e.jsx(i,{children:m}),` +`,e.jsx(p,{}),` +`,e.jsx(a,{}),` +`,e.jsx(o.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(o.h3,{id:"checkbox-group",children:"Checkbox group"}),` +`,e.jsx(o.p,{children:"Fieldset is used to group related form inputs, like checkboxes."}),` +`,e.jsx(l,{of:u})]})}function G(n={}){const{wrapper:o}={...s(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(t,{...n})}):t(n)}export{G as default}; diff --git a/demo-DES-654-table-of-content/assets/Fieldset.stories-C3WPZRpe.js b/demo-DES-654-table-of-content/assets/Fieldset.stories-C3WPZRpe.js new file mode 100644 index 0000000000..5ea6457511 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Fieldset.stories-C3WPZRpe.js @@ -0,0 +1,6 @@ +import{j as o}from"./jsx-runtime-Nms4Y4qS.js";import{F as l}from"./Fieldset-BdWirkiG.js";import{C as s}from"./Checkbox-Dnr-vBw_.js";const m={title:"Components/Forms/Fieldset",component:l,args:{children:"Body van de fieldset",legend:"Label van de fieldset"}},e={},r={args:{children:[o.jsx(s,{children:"Horecabedrijf"},1),o.jsx(s,{children:"Ander soort bedrijf"},2),o.jsx(s,{children:"Evenement"},3),o.jsx(s,{children:"Iets anders"},4)],legend:"Waar gaat uw melding over?"}};var a,t,n;e.parameters={...e.parameters,docs:{...(a=e.parameters)==null?void 0:a.docs,source:{originalSource:"{}",...(n=(t=e.parameters)==null?void 0:t.docs)==null?void 0:n.source}}};var c,d,i;r.parameters={...r.parameters,docs:{...(c=r.parameters)==null?void 0:c.docs,source:{originalSource:`{ + args: { + children: [Horecabedrijf, Ander soort bedrijf, Evenement, Iets anders], + legend: 'Waar gaat uw melding over?' + } +}`,...(i=(d=r.parameters)==null?void 0:d.docs)==null?void 0:i.source}}};const p=["Default","CheckboxGroup"],u=Object.freeze(Object.defineProperty({__proto__:null,CheckboxGroup:r,Default:e,__namedExportsOrder:p,default:m},Symbol.toStringTag,{value:"Module"}));export{r as C,u as F}; diff --git a/demo-DES-654-table-of-content/assets/Footer.docs-e8teVdIx.js b/demo-DES-654-table-of-content/assets/Footer.docs-e8teVdIx.js new file mode 100644 index 0000000000..3c3e853bda --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Footer.docs-e8teVdIx.js @@ -0,0 +1,20 @@ +import{j as o}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as i}from"./index-DlpNa54Y.js";import{M as r,d as s,P as a}from"./index-ahswvvAf.js";import{F as m}from"./Footer.stories-lE_0oTJ5.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-DQkeu4as.js";import"./clsx-B-dksMZM.js";import"./Spotlight-DLLZALiQ.js";import"./VisuallyHidden-Db-04MJ9.js";import"./Grid-CwB6HQaq.js";import"./LinkList-DB6g-rx2.js";import"./Icon-CuaumHXX.js";import"./Heading-CWbN3elW.js";import"./getHeadingElement-DiRwFEz7.js";import"./Paragraph-C4jU4-Z4.js";import"./PageMenu-DQ_snOzP.js";const p=` + +# Footer + +The footer is the closing section on every web page. +Its content provides service information. +A part is prescribed, and a part is filled based on the website’s objectives. + +## Guidelines + +- The footer is mandatory, and there is one on every page. +- The first column focuses on contact information. + The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available). +- The second column contains links to relevant (online) sites or sources. +- The third column refers to newsletters, social media, etc. +- The last part of the footer is intended for links to privacy policies, cookie statements, explanations about the website, etc. + It is not intended for links to contact information, for example. +`;function n(t){return o.jsxs(o.Fragment,{children:[o.jsx(r,{of:m}),` +`,o.jsx(s,{children:p}),` +`,o.jsx(a,{})]})}function P(t={}){const{wrapper:e}={...i(),...t.components};return e?o.jsx(e,{...t,children:o.jsx(n,{...t})}):n()}export{P as default}; diff --git a/demo-DES-654-table-of-content/assets/Footer.stories-lE_0oTJ5.js b/demo-DES-654-table-of-content/assets/Footer.stories-lE_0oTJ5.js new file mode 100644 index 0000000000..4e43b8ccb6 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Footer.stories-lE_0oTJ5.js @@ -0,0 +1,100 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{c as j,g as z}from"./index.esm-DQkeu4as.js";import{c}from"./clsx-B-dksMZM.js";import{r as k}from"./index-BwDkhjyp.js";import{S as y}from"./Spotlight-DLLZALiQ.js";import{V as p}from"./VisuallyHidden-Db-04MJ9.js";import{G as i}from"./Grid-CwB6HQaq.js";import{L as n}from"./LinkList-DB6g-rx2.js";import{H as l}from"./Heading-CWbN3elW.js";import{P as g}from"./Paragraph-C4jU4-Z4.js";import{P as m}from"./PageMenu-DQ_snOzP.js";const f=k.forwardRef(({children:r,className:o,...a},s)=>e.jsx("div",{...a,ref:s,className:c("ams-footer__bottom",o),children:r}));f.displayName="Footer.Bottom";try{Footer.Bottom.displayName="Footer.Bottom",Footer.Bottom.__docgenInfo={description:"",displayName:"Footer.Bottom",props:{}}}catch{}const v=k.forwardRef(({children:r,className:o,...a},s)=>e.jsx(y,{...a,color:"dark-blue",ref:s,className:c("ams-footer__top",o),children:r}));v.displayName="Footer.Top";try{Footer.Top.displayName="Footer.Top",Footer.Top.__docgenInfo={description:"",displayName:"Footer.Top",props:{}}}catch{}const x=k.forwardRef(({children:r,className:o,...a},s)=>e.jsx("footer",{...a,ref:s,className:c("ams-footer",o),children:r}));x.displayName="Footer";const d=Object.assign(x,{Bottom:f,Top:v});try{d.displayName="Footer",d.__docgenInfo={description:"",displayName:"Footer",props:{}}}catch{}const _={title:"Components/Containers/Footer",component:d},t={args:{children:[e.jsxs(d.Top,{children:[e.jsx(p,{children:e.jsx(l,{children:"Colofon"})}),e.jsxs(i,{gapVertical:"large",paddingVertical:"medium",children:[e.jsx(i.Cell,{span:3,children:e.jsxs("div",{style:{display:"grid",gap:"2.5rem"},children:[e.jsx(l,{level:2,size:"level-4",inverseColor:!0,children:"Contact"}),e.jsx(g,{size:"small",inverseColor:!0,children:"Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Neem dan contact met ons op."}),e.jsxs(n,{children:[e.jsx(n.Link,{href:"mailto:redactie.os@amsterdam.nl",icon:j,onBackground:"dark",size:"small",children:"E-mail"}),e.jsx(n.Link,{href:"tel:+31202510333",icon:z,onBackground:"dark",size:"small",children:"020 251 0333"})]})]})}),e.jsx(i.Cell,{span:3,start:{narrow:1,medium:5,wide:5},children:e.jsxs("div",{style:{display:"grid",gap:"2.5rem"},children:[e.jsx(l,{level:2,size:"level-4",inverseColor:!0,children:"Panels en enquêtes"}),e.jsx(g,{size:"small",inverseColor:!0,children:"Bent u uitgenodigd om mee te doen aan onderzoek of heeft u vragen over het panel of stadspaspanel?"}),e.jsxs(n,{children:[e.jsx(n.Link,{href:"#",onBackground:"dark",rel:"external",size:"small",children:"Meedoen aan onderzoek"}),e.jsx(n.Link,{href:"#",onBackground:"dark",rel:"external",size:"small",children:"Panel Amsterdam"}),e.jsx(n.Link,{href:"#",onBackground:"dark",rel:"external",size:"small",children:"Stadspaspanel Amsterdam"})]})]})}),e.jsx(i.Cell,{span:3,start:{narrow:1,medium:1,wide:9},children:e.jsxs("div",{style:{display:"grid",gap:"2.5rem"},children:[e.jsx(l,{level:2,size:"level-4",inverseColor:!0,children:"Onderzoek en Statistiek"}),e.jsxs(n,{children:[e.jsx(n.Link,{href:"#",onBackground:"dark",size:"small",children:"Over Onderzoek en Statistiek"}),e.jsx(n.Link,{href:"#",onBackground:"dark",size:"small",children:"Veelgestelde vragen"}),e.jsx(n.Link,{href:"#",onBackground:"dark",rel:"external",size:"small",children:"Nieuwsbrief"}),e.jsx(n.Link,{href:"#",onBackground:"dark",size:"small",children:"Vacatures"})]})]})})]})]},"footer-top"),e.jsxs(d.Bottom,{children:[e.jsx(p,{children:e.jsx(l,{level:2,children:"Over deze website"})}),e.jsx(i,{paddingVertical:"small",children:e.jsx(i.Cell,{span:"all",children:e.jsxs(m,{children:[e.jsx(m.Link,{href:"#",children:"Privacy"}),e.jsx(m.Link,{href:"#",children:"Toegankelijkheid"})]})})})]},"footer-bottom")]}};var L,h,u;t.parameters={...t.parameters,docs:{...(L=t.parameters)==null?void 0:L.docs,source:{originalSource:`{ + args: { + children: [ + + Colofon + + + +
    + + Contact + + + Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Neem dan contact met ons op. + + + + E-mail + + + 020 251 0333 + + +
    +     + +
    + + Panels en enquêtes + + + Bent u uitgenodigd om mee te doen aan onderzoek of heeft u vragen over het panel of stadspaspanel? + + + + Meedoen aan onderzoek + + + Panel Amsterdam + + + Stadspaspanel Amsterdam + + +
    +     + +
    + + Onderzoek en Statistiek + + + + Over Onderzoek en Statistiek + + + Veelgestelde vragen + + + Nieuwsbrief + + + Vacatures + + +
    +     +     +     , + + Over deze website + + + + + Privacy + Toegankelijkheid + + + + ] + } +}`,...(u=(h=t.parameters)==null?void 0:h.docs)==null?void 0:u.source}}};const B=["Default"],O=Object.freeze(Object.defineProperty({__proto__:null,Default:t,__namedExportsOrder:B,default:_},Symbol.toStringTag,{value:"Module"}));export{O as F}; diff --git a/demo-DES-654-table-of-content/assets/FormFieldCharacterCounter.docs-CIYRxFK7.js b/demo-DES-654-table-of-content/assets/FormFieldCharacterCounter.docs-CIYRxFK7.js new file mode 100644 index 0000000000..6de40efb50 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/FormFieldCharacterCounter.docs-CIYRxFK7.js @@ -0,0 +1,26 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as o}from"./index-DlpNa54Y.js";import{M as a,d as s,P as i,e as h,f as c}from"./index-ahswvvAf.js";import{F as m,E as u}from"./FormFieldCharacterCounter.stories-Qv0IIJsN.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const l=` + +# Form Field Character Counter + +Help users know how much text they can enter when there is a limit on the number of characters. + +Users will get updates at a pace that works best for the way they interact with the textarea. This means: + +- sighted users will see a count message that updates as they type +- screen reader users will hear the count announcement when they stop typing. + +This component does not restrict the user from entering information. The user can enter more than the character limit, but are told they’ve entered too many characters. This lets them type or copy and paste their full answer, then edit it down. + +## Guidelines + +- Only use a character counter when there is a good reason for limiting the number of characters users can enter. + For example, if there is an indication that users are likely to enter more information than they need to. + Or when there is a legal or technical reason that means an entry must be no more than a certain number of characters. +- If your users keep hitting the character limit imposed by the backend of your service then try to increase the limit rather than use a character counter. +`;function r(t){const n={h2:"h2",p:"p",...o(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:m}),` +`,e.jsx(s,{children:l}),` +`,e.jsx(i,{}),` +`,e.jsx(h,{}),` +`,e.jsx(n.h2,{id:"error",children:"Error"}),` +`,e.jsx(n.p,{children:"When the length exceeds the maximum length, the color of the text changes to red."}),` +`,e.jsx(c,{of:u})]})}function E(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(r,{...t})}):r(t)}export{E as default}; diff --git a/demo-DES-654-table-of-content/assets/FormFieldCharacterCounter.stories-Qv0IIJsN.js b/demo-DES-654-table-of-content/assets/FormFieldCharacterCounter.stories-Qv0IIJsN.js new file mode 100644 index 0000000000..8732e11c42 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/FormFieldCharacterCounter.stories-Qv0IIJsN.js @@ -0,0 +1,9 @@ +import{j as h}from"./jsx-runtime-Nms4Y4qS.js";import{c as f}from"./clsx-B-dksMZM.js";import{r as g}from"./index-BwDkhjyp.js";const t=g.forwardRef(({className:a,length:o,maxLength:n,...i},p)=>h.jsx("div",{...i,ref:p,className:f("ams-form-field-character-counter",o>n&&"ams-form-field-character-counter--error",a),role:"status",children:`${o} van ${n} tekens`}));t.displayName="FormFieldCharacterCounter";try{t.displayName="FormFieldCharacterCounter",t.__docgenInfo={description:"",displayName:"FormFieldCharacterCounter",props:{length:{defaultValue:null,description:"The current length of the field’s value.",name:"length",required:!0,type:{name:"number"}},maxLength:{defaultValue:null,description:"The maximum length of the field’s value.",name:"maxLength",required:!0,type:{name:"number"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const F={title:"Components/Forms/Form Field Character Counter",component:t,args:{length:7,maxLength:10}},e={},r={args:{length:1001,maxLength:1e3}};var s,c,m;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:"{}",...(m=(c=e.parameters)==null?void 0:c.docs)==null?void 0:m.source}}};var l,u,d;r.parameters={...r.parameters,docs:{...(l=r.parameters)==null?void 0:l.docs,source:{originalSource:`{ + args: { + length: 1001, + maxLength: 1000 + } +}`,...(d=(u=r.parameters)==null?void 0:u.docs)==null?void 0:d.source}}};const _=["Default","Error"],E=Object.freeze(Object.defineProperty({__proto__:null,Default:e,Error:r,__namedExportsOrder:_,default:F},Symbol.toStringTag,{value:"Module"}));export{r as E,E as F}; diff --git a/demo-DES-654-table-of-content/assets/Grid-CwB6HQaq.js b/demo-DES-654-table-of-content/assets/Grid-CwB6HQaq.js new file mode 100644 index 0000000000..75d619517a --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Grid-CwB6HQaq.js @@ -0,0 +1,5 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{c as u}from"./clsx-B-dksMZM.js";import{r as m}from"./index-BwDkhjyp.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const f=(e,l)=>{if(!e&&!l)return[];const a=[];if(e==="all"||typeof e=="number")a.push(`ams-grid__cell--span-${e}`);else if(e){const{narrow:r,medium:s,wide:i}=e;a.push(`ams-grid__cell--span-${r}`,`ams-grid__cell--span-${s}-medium`,`ams-grid__cell--span-${i}-wide`)}if(typeof l=="number")a.push(`ams-grid__cell--start-${l}`);else if(l){const{narrow:r,medium:s,wide:i}=l;a.push(`ams-grid__cell--start-${r}`,`ams-grid__cell--start-${s}-medium`,`ams-grid__cell--start-${i}-wide`)}return a},o=m.forwardRef(({as:e="div",children:l,className:a,span:r,start:s,...i},d)=>n.jsx(e,{...i,ref:d,className:u("ams-grid__cell",f(r,s),a),children:l}));o.displayName="Grid.Cell";try{Grid.Cell.displayName="Grid.Cell",Grid.Cell.__docgenInfo={description:"",displayName:"Grid.Cell",props:{as:{defaultValue:null,description:"The HTML element to use.",name:"as",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"div"'},{value:'"section"'}]}},span:{defaultValue:null,description:`Lets the cell span the full width of all grid variants. +The amount of grid columns the cell spans.`,name:"span",required:!1,type:{name:'"all" | GridColumnNumber | GridColumnNumbers'}},start:{defaultValue:null,description:"The index of the grid column the cell starts at.",name:"start",required:!1,type:{name:"GridColumnNumber | GridColumnNumbers"}}}}}catch{}const g=(e,l,a)=>{const r=[];return a?[`ams-grid--padding-vertical--${a}`]:(e&&r.push(`ams-grid--padding-bottom--${e}`),l&&r.push(`ams-grid--padding-top--${l}`),r)},c=m.forwardRef(({children:e,className:l,gapVertical:a,paddingBottom:r,paddingTop:s,paddingVertical:i,...d},p)=>n.jsx("div",{...d,ref:p,className:u("ams-grid",a&&`ams-grid--gap-vertical--${a}`,g(r,s,i),l),children:e}));c.displayName="Grid";const t=Object.assign(c,{Cell:o});try{t.displayName="Grid",t.__docgenInfo={description:"",displayName:"Grid",props:{gapVertical:{defaultValue:null,description:"The amount of space between rows.",name:"gapVertical",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"small"'},{value:'"large"'}]}},paddingBottom:{defaultValue:null,description:"The amount of space below.",name:"paddingBottom",required:!1,type:{name:"enum",value:[{value:'"medium"'},{value:'"small"'},{value:'"large"'}]}},paddingTop:{defaultValue:null,description:"The amount of space above.",name:"paddingTop",required:!1,type:{name:"enum",value:[{value:'"medium"'},{value:'"small"'},{value:'"large"'}]}},paddingVertical:{defaultValue:null,description:"The amount of space above and below.",name:"paddingVertical",required:!1,type:{name:"enum",value:[{value:'"medium"'},{value:'"small"'},{value:'"large"'}]}}}}}catch{}export{t as G}; diff --git a/demo-DES-654-table-of-content/assets/Grid.docs-2rSNxxxK.js b/demo-DES-654-table-of-content/assets/Grid.docs-2rSNxxxK.js new file mode 100644 index 0000000000..25e94fdbb7 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Grid.docs-2rSNxxxK.js @@ -0,0 +1,75 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as t}from"./index-DlpNa54Y.js";import{M as r,d as a,P as l,e as d,f as s}from"./index-ahswvvAf.js";import{G as c,V as h,a as p,S as m,C as u,b as w,c as f,d as x}from"./Grid.stories-hQfXx2BA.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Screen-DD3ND5ci.js";import"./clsx-B-dksMZM.js";import"./Grid-CwB6HQaq.js";const j=` + +# Grid + +Divides the screen into columns to align the elements of a page. + +## Usage + +Every page should use the grid as the foundation for its layout. +It is placed directly within the [Screen](/docs/components-layout-screen--docs). + +A [Footer](/docs/components-containers-footer--docs) and a [Spotlight](/docs/components-containers-spotlight--docs) are slightly wider than the grid. +You close one instance of the grid before these components. +Inside and optionally after them, you start a new one. +Multiple instances of the grid component are possible on a page, but the columns of all grids must align precisely. + +Within the grid, you create cells containing the desired content. +A cell often spans multiple columns of the grid. + +## Design + +The [design choices](/docs/docs-design-guidelines-grid--docs) are described in the design guidelines. +`;function i(o){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...t(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:c}),` +`,e.jsx(a,{children:j}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.p,{children:`The pink areas below represent the columns of the grid. +The spaces in between are white.`}),` +`,e.jsx(n.p,{children:`The grid has 12 columns on wide screens, so all 12 cells in this example are in a row. +On narrow screens, you will see three rows of four columns; on medium-wide screens, one row of eight and one of four.`}),` +`,e.jsx(l,{}),` +`,e.jsx(d,{}),` +`,e.jsx(n.h3,{id:"vertical-margin",children:"Vertical Margin"}),` +`,e.jsxs(n.p,{children:[`Unlike the horizontal margins between columns, the vertical ones above and below are adjustable. +The`,e.jsx(n.code,{children:"paddingVertical"}),", ",e.jsx(n.code,{children:"paddingTop"}),", and ",e.jsx(n.code,{children:"paddingBottom"}),` props add white space above and below the grid. +This is useful in a coloured area like `,e.jsx(n.a,{href:"/docs/components-containers-footer--docs",children:"Footer"})," or ",e.jsx(n.a,{href:"/docs/components-containers-spotlight--docs",children:"Spotlight"})," or between two consecutive grids."]}),` +`,e.jsxs(n.p,{children:["Specify a value of ",e.jsx(n.code,{children:"medium"}),` for vertical white space as wide as the horizontal. +Use `,e.jsx(n.code,{children:"small"})," for half of that width and ",e.jsx(n.code,{children:"large"})," for double."]}),` +`,e.jsx(n.p,{children:"These white spaces also shrink and grow with the window width."}),` +`,e.jsx(s,{of:h}),` +`,e.jsx(n.h3,{id:"vertical-white-space",children:"Vertical White Space"}),` +`,e.jsx(n.p,{children:"A grid automatically creates multiple rows if the next cell no longer fits on the current row."}),` +`,e.jsx(n.p,{children:`By default, there is as much white space between two rows as between two columns. +In some cases, more or less white space might be better.`}),` +`,e.jsx(s,{of:p}),` +`,e.jsx(n.h3,{id:"cells-spanning-columns",children:"Cells Spanning Columns"}),` +`,e.jsxs(n.p,{children:[`A cell defaults to spanning 1 column in the grid. +Use the `,e.jsx(n.code,{children:"span"})," prop to make a cell span more columns."]}),` +`,e.jsx(s,{of:m}),` +`,e.jsx(n.h3,{id:"different-widths",children:"Different Widths"}),` +`,e.jsxs(n.p,{children:[`You can make the number of columns a cell spans depend on the window width. +Use the `,e.jsx(n.code,{children:"span"})," prop with 3 values for narrow, medium, and wide windows."]}),` +`,e.jsxs(n.p,{children:["With ",e.jsx(n.code,{children:"span={{ narrow: 4, medium: 6, wide: 8 }}"}),", this cell is 4 out of 4 columns wide on narrow windows, 6 out of 8 on medium windows, and 8 out of 12 on wide windows."]}),` +`,e.jsx(s,{of:u}),` +`,e.jsx(n.h3,{id:"full-width",children:"Full Width"}),` +`,e.jsxs(n.p,{children:["To make the cell full width – whether the grid has 4, 8, or 12 columns – use ",e.jsx(n.code,{children:'span="all"'}),"."]}),` +`,e.jsx(s,{of:w}),` +`,e.jsx(n.h3,{id:"start-position",children:"Start Position"}),` +`,e.jsxs(n.p,{children:[`Each cell automatically starts in the next available position in the grid. +You usually don’t need to specify a value of 1 explicitly. +You can adjust the starting position of a cell with the `,e.jsx(n.code,{children:"start"}),` prop. +This way, you can align cells in multiple rows or place a cell in the centre of a wide grid. +It can also skip a column for more white space between cells.`]}),` +`,e.jsxs(n.p,{children:[`The starting position of a cell may also depend on the window width. +Use the `,e.jsx(n.code,{children:"start"})," prop with 3 values, just like with ",e.jsx(n.code,{children:"span"}),"."]}),` +`,e.jsxs(n.p,{children:["An example with ",e.jsx(n.code,{children:"start={2}"}),":"]}),` +`,e.jsx(s,{of:f}),` +`,e.jsx(n.h3,{id:"use-another-html-element",children:"Use Another HTML Element"}),` +`,e.jsxs(n.p,{children:["By default, a Grid Cell renders a ",e.jsx(n.code,{children:"
    "}),`. +Use the `,e.jsx(n.code,{children:"as"})," prop to make your markup more semantic."]}),` +`,e.jsx(s,{of:x}),` +`,e.jsx(n.h2,{id:"guidelines",children:"Guidelines"}),` +`,e.jsx(n.p,{children:`Ensure that the number of columns you assign to a cell matches the amount of columns in the grid for the respective window width. +The same applies to starting a cell in a later column. +If the total of both values is too large, the browser adds columns to the grid. +This is not allowed.`})]})}function I(o={}){const{wrapper:n}={...t(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(i,{...o})}):i(o)}export{I as default}; diff --git a/demo-DES-654-table-of-content/assets/Grid.stories-hQfXx2BA.js b/demo-DES-654-table-of-content/assets/Grid.stories-hQfXx2BA.js new file mode 100644 index 0000000000..4279aac754 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Grid.stories-hQfXx2BA.js @@ -0,0 +1,62 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{S as E}from"./Screen-DD3ND5ci.js";import{G as r}from"./Grid-CwB6HQaq.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const d={control:{type:"radio",labels:{undefined:"none",small:"small",medium:"medium",large:"large"}},options:[void 0,"small","medium","large"]},R={title:"Components/Layout/Grid",component:r,argTypes:{gapVertical:{control:{type:"radio",labels:{none:"none",small:"small",undefined:"medium",large:"large"}},options:["none","small",void 0,"large"]},paddingVertical:d,paddingTop:d,paddingBottom:d}};r.Cell;const g={decorators:[a=>e.jsx(E,{children:e.jsx(a,{})})]},i={decorators:[a=>e.jsx(E,{children:e.jsx(r,{children:e.jsx(a,{})})})],render:({children:a,...B})=>e.jsx(r.Cell,{...B,children:a})},H=Array.from(Array(12).keys()).map(a=>e.jsx(r.Cell,{className:"ams-docs-pink-box"},a)),s={...g,args:{children:H}},n={...g,args:{children:H,paddingVertical:"medium"}},o={...g,args:{children:Array.from(Array(6).keys()).map(a=>e.jsx(r.Cell,{className:"ams-docs-pink-box",span:4},a)),gapVertical:"small"}},l={...i,args:{children:e.jsx("p",{className:"ams-docs-paragraph ams-docs-pink-box",children:"Deze cel beslaat 4 kolommen."}),span:4}},t={...i,args:{children:e.jsx("p",{className:"ams-docs-paragraph ams-docs-pink-box",children:"Deze cel heeft 3 instellingen voor de breedte."}),span:{narrow:4,medium:6,wide:8}}},c={...i,args:{children:e.jsx("p",{className:"ams-docs-paragraph ams-docs-pink-box",children:"Deze cel beslaat de volledige breedte van het grid."}),span:"all"}},p={...i,args:{children:e.jsx("p",{className:"ams-docs-paragraph ams-docs-pink-box",children:"Deze cel start in kolom 2."}),span:3,start:2}},m={...i,args:{as:"section"},render:({as:a})=>e.jsx(r,{children:e.jsx(r.Cell,{as:a,span:"all",children:e.jsxs("p",{className:"ams-docs-pink-box ams-docs-paragraph",children:["Deze cel gebruikt het HTML-element `",a,"`."]})})})};var u,h,x;s.parameters={...s.parameters,docs:{...(u=s.parameters)==null?void 0:u.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + children: TwelveGridCells + } +}`,...(x=(h=s.parameters)==null?void 0:h.docs)==null?void 0:x.source}}};var S,b,y;n.parameters={...n.parameters,docs:{...(S=n.parameters)==null?void 0:S.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + children: TwelveGridCells, + paddingVertical: 'medium' + } +}`,...(y=(b=n.parameters)==null?void 0:b.docs)==null?void 0:y.source}}};var C,k,T;o.parameters={...o.parameters,docs:{...(C=o.parameters)==null?void 0:C.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + children: Array.from(Array(6).keys()).map(i => ), + gapVertical: 'small' + } +}`,...(T=(k=o.parameters)==null?void 0:k.docs)==null?void 0:T.source}}};var j,G,f;l.parameters={...l.parameters,docs:{...(j=l.parameters)==null?void 0:j.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + children:

    Deze cel beslaat 4 kolommen.

    , + span: 4 + } +}`,...(f=(G=l.parameters)==null?void 0:G.docs)==null?void 0:f.source}}};var N,v,V;t.parameters={...t.parameters,docs:{...(N=t.parameters)==null?void 0:N.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + children:

    Deze cel heeft 3 instellingen voor de breedte.

    , + span: { + narrow: 4, + medium: 6, + wide: 8 + } + } +}`,...(V=(v=t.parameters)==null?void 0:v.docs)==null?void 0:V.source}}};var D,z,A;c.parameters={...c.parameters,docs:{...(D=c.parameters)==null?void 0:D.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + children:

    Deze cel beslaat de volledige breedte van het grid.

    , + span: 'all' + } +}`,...(A=(z=c.parameters)==null?void 0:z.docs)==null?void 0:A.source}}};var w,_,M;p.parameters={...p.parameters,docs:{...(w=p.parameters)==null?void 0:w.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + children:

    Deze cel start in kolom 2.

    , + span: 3, + start: 2 + } +}`,...(M=(_=p.parameters)==null?void 0:_.docs)==null?void 0:M.source}}};var P,L,O;m.parameters={...m.parameters,docs:{...(P=m.parameters)==null?void 0:P.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + as: 'section' + }, + render: ({ + as + }: GridCellProps) => + +

    Deze cel gebruikt het HTML-element \`{as}\`.

    +     +     +}`,...(O=(L=m.parameters)==null?void 0:L.docs)==null?void 0:O.source}}};const q=["Default","VerticalSpace","VerticalGap","SpanMultipleColumns","ConfigureGridVariants","SpanAllColumns","StartPosition","CustomTagName"],K=Object.freeze(Object.defineProperty({__proto__:null,ConfigureGridVariants:t,CustomTagName:m,Default:s,SpanAllColumns:c,SpanMultipleColumns:l,StartPosition:p,VerticalGap:o,VerticalSpace:n,__namedExportsOrder:q,default:R},Symbol.toStringTag,{value:"Module"}));export{t as C,K as G,l as S,n as V,o as a,c as b,p as c,m as d}; diff --git a/demo-DES-654-table-of-content/assets/Header-DF3VOPHu.js b/demo-DES-654-table-of-content/assets/Header-DF3VOPHu.js new file mode 100644 index 0000000000..96e031fff2 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Header-DF3VOPHu.js @@ -0,0 +1 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{c as u}from"./clsx-B-dksMZM.js";import{r as c}from"./index-BwDkhjyp.js";import{V as h}from"./VisuallyHidden-Db-04MJ9.js";import{L as p}from"./Logo-C5ZbuiYN.js";import{H as f}from"./Heading-CWbN3elW.js";const a=c.forwardRef(({className:r,logoBrand:n="amsterdam",logoLink:t="/",logoLinkTitle:o="Ga naar de homepage",title:l,links:s,menu:i,...d},m)=>e.jsx(e.Fragment,{children:e.jsxs("header",{...d,ref:m,className:u("ams-header",r),children:[e.jsxs("a",{href:t,className:"ams-header__logo-link",children:[e.jsx(h,{children:o}),e.jsx(p,{brand:n})]}),s&&e.jsx("div",{className:"ams-header__links",children:s}),i&&e.jsx("div",{className:"ams-header__menu",children:i}),l&&e.jsx("div",{className:"ams-header__title",children:e.jsx(f,{level:1,size:"level-3",className:"ams-header__title-heading",children:l})})]})}));a.displayName="Header";try{a.displayName="Header",a.__docgenInfo={description:"",displayName:"Header",props:{logoBrand:{defaultValue:{value:"amsterdam"},description:"The name of the brand for which to display the logo.",name:"logoBrand",required:!1,type:{name:"enum",value:[{value:'"amsterdam"'},{value:'"ggd-amsterdam"'},{value:'"museum-weesp"'},{value:'"stadsarchief"'},{value:'"stadsbank-van-lening"'},{value:'"vga-verzekeringen"'}]}},logoLink:{defaultValue:{value:"/"},description:"The url for the link on the logo.",name:"logoLink",required:!1,type:{name:"string"}},logoLinkTitle:{defaultValue:{value:"Ga naar de homepage"},description:"The accessible text for the link on the logo.",name:"logoLinkTitle",required:!1,type:{name:"string"}},title:{defaultValue:null,description:"The name of the application.",name:"title",required:!1,type:{name:"string"}},links:{defaultValue:null,description:"The list of menu links. Use a Page Menu here.",name:"links",required:!1,type:{name:"ReactNode"}},menu:{defaultValue:null,description:"A button to toggle the visibility of a Mega Menu.",name:"menu",required:!1,type:{name:"ReactNode"}}}}}catch{}export{a as H}; diff --git a/demo-DES-654-table-of-content/assets/Header.docs-DW-MHXNh.js b/demo-DES-654-table-of-content/assets/Header.docs-DW-MHXNh.js new file mode 100644 index 0000000000..4deedf8224 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Header.docs-DW-MHXNh.js @@ -0,0 +1,36 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as a}from"./index-DlpNa54Y.js";import{M as o,d as r,P as h,e as m,f as t}from"./index-ahswvvAf.js";import{H as d,W as l,a as p,b as u,c,d as x,e as j,f as g}from"./Header.stories-Dm3gthCL.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-DQkeu4as.js";import"./Header-DF3VOPHu.js";import"./clsx-B-dksMZM.js";import"./VisuallyHidden-Db-04MJ9.js";import"./Logo-C5ZbuiYN.js";import"./Heading-CWbN3elW.js";import"./getHeadingElement-DiRwFEz7.js";import"./PageMenu-DQ_snOzP.js";import"./Icon-CuaumHXX.js";const f=` + +# Header + +Arranges the City’s logo, the title of the website, and a page menu. + +## Guidelines + +- Use the Header when the site is hosted on amsterdam.nl or one of its subdomains. +- The page menu can contain a maximum of 5 items, including menu and search. +- When you have a long subsite title, use no or as few page menu items as possible. + +## References + +- A Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be use to group navigation elements. +- [WCAG 3.2.3](https://wcag.com/designers/3-2-3-consistent-navigation/) Consistent Navigation: Navigation menus that appear on multiple pages are consistent. +`;function s(i){const e={a:"a",h2:"h2",p:"p",...a(),...i.components};return n.jsxs(n.Fragment,{children:[n.jsx(o,{of:d}),` +`,n.jsx(r,{children:f}),` +`,n.jsx(h,{}),` +`,n.jsx(m,{}),` +`,n.jsx(e.h2,{id:"with-logo-variant",children:"With logo variant"}),` +`,n.jsx(t,{of:l}),` +`,n.jsx(e.h2,{id:"with-subsite-title",children:"With subsite title"}),` +`,n.jsx(t,{of:p}),` +`,n.jsx(e.h2,{id:"with-menu",children:"With menu"}),` +`,n.jsx(t,{of:u}),` +`,n.jsx(e.h2,{id:"with-links",children:"With links"}),` +`,n.jsxs(e.p,{children:["Use a ",n.jsx(e.a,{href:"?path=/docs/components-navigation-page-menu--docs",children:"Page Menu"}),` to add links. +A Page Menu in the Header should not wrap.`]}),` +`,n.jsx(t,{of:c}),` +`,n.jsx(e.h2,{id:"with-links-and-menu",children:"With links and menu"}),` +`,n.jsx(t,{of:x}),` +`,n.jsx(e.h2,{id:"with-a-title-and-menu",children:"With a title and menu"}),` +`,n.jsx(t,{of:j}),` +`,n.jsx(e.h2,{id:"with-a-title-links-and-menu",children:"With a title, links and menu"}),` +`,n.jsx(t,{of:g})]})}function F(i={}){const{wrapper:e}={...a(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(s,{...i})}):s(i)}export{F as default}; diff --git a/demo-DES-654-table-of-content/assets/Header.stories-Dm3gthCL.js b/demo-DES-654-table-of-content/assets/Header.stories-Dm3gthCL.js new file mode 100644 index 0000000000..17f58fa6d7 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Header.stories-Dm3gthCL.js @@ -0,0 +1,53 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{b as u}from"./index.esm-DQkeu4as.js";import{H as v}from"./Header-DF3VOPHu.js";import{P as n}from"./PageMenu-DQ_snOzP.js";const D={title:"Components/Containers/Header",component:v},a={},r={args:{logoBrand:"ggd-amsterdam",logoLink:"https://www.ggd.amsterdam.nl/",logoLinkTitle:"Naar de homepage van de GGD Amsterdam"}},s={args:{title:"Aan de Amsterdamse grachten"}},t={args:{links:e.jsxs(n,{alignEnd:!0,wrap:!1,children:[e.jsx(n.Link,{href:"#",children:"Contact"}),e.jsx(n.Link,{href:"#",children:"Mijn Amsterdam"}),e.jsx(n.Link,{href:"#",icon:u,children:"Zoeken"})]})}},o={args:{menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"})}},i={args:{menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"}),links:e.jsxs(n,{alignEnd:!0,wrap:!1,children:[e.jsx(n.Link,{href:"#",children:"Contact"}),e.jsx(n.Link,{href:"#",children:"Mijn Amsterdam"}),e.jsx(n.Link,{href:"#",icon:u,children:"Zoeken"})]})}},m={args:{title:"Aan de Amsterdamse grachten",menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"})}},c={args:{title:"Aan de Amsterdamse grachten",links:e.jsxs(n,{alignEnd:!0,wrap:!1,children:[e.jsx(n.Link,{href:"#",children:"Contact"}),e.jsx(n.Link,{href:"#",children:"Mijn Amsterdam"}),e.jsx(n.Link,{href:"#",icon:u,children:"Zoeken"})]}),menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"})}};var d,l,g;a.parameters={...a.parameters,docs:{...(d=a.parameters)==null?void 0:d.docs,source:{originalSource:"{}",...(g=(l=a.parameters)==null?void 0:l.docs)==null?void 0:g.source}}};var h,p,k;r.parameters={...r.parameters,docs:{...(h=r.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + logoBrand: 'ggd-amsterdam', + logoLink: 'https://www.ggd.amsterdam.nl/', + logoLinkTitle: 'Naar de homepage van de GGD Amsterdam' + } +}`,...(k=(p=r.parameters)==null?void 0:p.docs)==null?void 0:k.source}}};var M,L,f;s.parameters={...s.parameters,docs:{...(M=s.parameters)==null?void 0:M.docs,source:{originalSource:`{ + args: { + title: 'Aan de Amsterdamse grachten' + } +}`,...(f=(L=s.parameters)==null?void 0:L.docs)==null?void 0:f.source}}};var P,j,A;t.parameters={...t.parameters,docs:{...(P=t.parameters)==null?void 0:P.docs,source:{originalSource:`{ + args: { + links: + Contact + Mijn Amsterdam + + Zoeken + + + } +}`,...(A=(j=t.parameters)==null?void 0:j.docs)==null?void 0:A.source}}};var b,_,x;o.parameters={...o.parameters,docs:{...(b=o.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + menu: + } +}`,...(x=(_=o.parameters)==null?void 0:_.docs)==null?void 0:x.source}}};var S,W,w;i.parameters={...i.parameters,docs:{...(S=i.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + menu: , + links: + Contact + Mijn Amsterdam + + Zoeken + + + } +}`,...(w=(W=i.parameters)==null?void 0:W.docs)==null?void 0:w.source}}};var N,T,C;m.parameters={...m.parameters,docs:{...(N=m.parameters)==null?void 0:N.docs,source:{originalSource:`{ + args: { + title: 'Aan de Amsterdamse grachten', + menu: + } +}`,...(C=(T=m.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};var E,Z,H;c.parameters={...c.parameters,docs:{...(E=c.parameters)==null?void 0:E.docs,source:{originalSource:`{ + args: { + title: 'Aan de Amsterdamse grachten', + links: + Contact + Mijn Amsterdam + + Zoeken + + , + menu: + } +}`,...(H=(Z=c.parameters)==null?void 0:Z.docs)==null?void 0:H.source}}};const G=["Default","WithLogoVariant","WithTitle","WithLinks","WithMenu","WithLinksAndMenu","WithTitleAndMenu","WithTitleLinksAndMenu"],V=Object.freeze(Object.defineProperty({__proto__:null,Default:a,WithLinks:t,WithLinksAndMenu:i,WithLogoVariant:r,WithMenu:o,WithTitle:s,WithTitleAndMenu:m,WithTitleLinksAndMenu:c,__namedExportsOrder:G,default:D},Symbol.toStringTag,{value:"Module"}));export{V as H,r as W,s as a,o as b,t as c,i as d,m as e,c as f}; diff --git a/demo-DES-654-table-of-content/assets/Heading-CWbN3elW.js b/demo-DES-654-table-of-content/assets/Heading-CWbN3elW.js new file mode 100644 index 0000000000..147678a7f4 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Heading-CWbN3elW.js @@ -0,0 +1 @@ +import{j as d}from"./jsx-runtime-Nms4Y4qS.js";import{c as m}from"./clsx-B-dksMZM.js";import{r as c}from"./index-BwDkhjyp.js";import{g as v}from"./getHeadingElement-DiRwFEz7.js";const e=c.forwardRef(({children:a,className:i,inverseColor:n,level:l=1,size:r,...t},o)=>{const s=v(l),u=r?r.split("-")[1]:l;return d.jsx(s,{ref:o,className:m("ams-heading",`ams-heading--${u}`,n&&"ams-heading--inverse-color",i),...t,children:a})});e.displayName="Heading";try{e.displayName="Heading",e.__docgenInfo={description:"",displayName:"Heading",props:{inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}},level:{defaultValue:{value:"1"},description:"The hierarchical level within the document.",name:"level",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}},size:{defaultValue:null,description:"Uses larger or smaller text without changing its position in the heading hierarchy.",name:"size",required:!1,type:{name:"enum",value:[{value:'"level-3"'},{value:'"level-4"'},{value:'"level-5"'},{value:'"level-6"'},{value:'"level-1"'},{value:'"level-2"'}]}}}}}catch{}export{e as H}; diff --git a/demo-DES-654-table-of-content/assets/Heading.docs-DcLhz5wJ.js b/demo-DES-654-table-of-content/assets/Heading.docs-DcLhz5wJ.js new file mode 100644 index 0000000000..adfc6992d0 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Heading.docs-DcLhz5wJ.js @@ -0,0 +1,45 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as i}from"./index-DlpNa54Y.js";import{M as r,d as a,P as h,e as d,f as s}from"./index-ahswvvAf.js";import{H as c,a as g,b as l,c as p,d as u,I as m}from"./Heading.stories-BuYlM5jF.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./decorators-Dh4yEj-W.js";import"./exampleContent-CRK3_7Hv.js";import"./Heading-CWbN3elW.js";import"./clsx-B-dksMZM.js";import"./getHeadingElement-DiRwFEz7.js";const w=` + +# Heading + +A heading conveys information about the content below it. +Use headings to allow the user to grasp the structure of the page quickly. + +## Guidelines + +- A heading describes the content beneath it. +- Do not use a heading for formatting and styling. Use it to represent the page’s structure. +- Use headings hierarchically, and do not skip heading levels. + So, an \`h1\` heading should be followed by an \`h2\`, not an \`h3\`. + +## Relevant WCAG Requirements + +- [WCAG 1.3.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-content-structure-separation-programmatic): + Text that looks like a heading is also recognized as a heading by a computer. + Using the correct heading level makes the page structure clear for all users. +- [WCAG 2.4.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-skip): Headings can be used to navigate to the next section with the keyboard. +- [WCAG 2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels): Use headings to describe the purpose or subject of the underlying content. +- [WCAG 2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-headings): Use headings to structure the content. + +## References + +- [W3C - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) +- [W3C - Headings & labels](https://www.w3.org/TR/WCAG21/#headings-and-labels) +- [A11Y project - Heading structure](https://www.a11yproject.com/posts/how-to-accessible-heading-structure/) +`;function o(t){const n={code:"code",h2:"h2",h3:"h3",p:"p",...i(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:c}),` +`,e.jsx(a,{children:w}),` +`,e.jsx(h,{}),` +`,e.jsx(d,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"heading-1",children:"Heading 1"}),` +`,e.jsx(s,{of:g}),` +`,e.jsx(n.h3,{id:"heading-2",children:"Heading 2"}),` +`,e.jsx(s,{of:l}),` +`,e.jsx(n.h3,{id:"heading-3",children:"Heading 3"}),` +`,e.jsx(s,{of:p}),` +`,e.jsx(n.h3,{id:"heading-4",children:"Heading 4"}),` +`,e.jsx(s,{of:u}),` +`,e.jsx(n.h3,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsxs(n.p,{children:["Set the ",e.jsx(n.code,{children:"inverseColor"}),` prop if the Heading sits on a dark background. +This ensures the colour of the text provides enough contrast.`]}),` +`,e.jsx(s,{of:m})]})}function D(t={}){const{wrapper:n}={...i(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{D as default}; diff --git a/demo-DES-654-table-of-content/assets/Heading.stories-BuYlM5jF.js b/demo-DES-654-table-of-content/assets/Heading.stories-BuYlM5jF.js new file mode 100644 index 0000000000..9e33a862e6 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Heading.stories-BuYlM5jF.js @@ -0,0 +1,20 @@ +import{i as T}from"./decorators-Dh4yEj-W.js";import{b as y}from"./exampleContent-CRK3_7Hv.js";import{H as D}from"./Heading-CWbN3elW.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const I=y(),O={title:"Components/Text/Heading",component:D,args:{children:I,inverseColor:!1},argTypes:{children:{description:"The heading text.",table:{disable:!1}}},decorators:[T]},e={},r={},a={args:{level:2}},s={args:{level:3}},o={args:{level:4}},t={args:{inverseColor:!0}};var n,c,d;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:"{}",...(d=(c=e.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var i,l,m;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:"{}",...(m=(l=r.parameters)==null?void 0:l.docs)==null?void 0:m.source}}};var p,g,u;a.parameters={...a.parameters,docs:{...(p=a.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + level: 2 + } +}`,...(u=(g=a.parameters)==null?void 0:g.docs)==null?void 0:u.source}}};var H,v,f;s.parameters={...s.parameters,docs:{...(H=s.parameters)==null?void 0:H.docs,source:{originalSource:`{ + args: { + level: 3 + } +}`,...(f=(v=s.parameters)==null?void 0:v.docs)==null?void 0:f.source}}};var S,b,C;o.parameters={...o.parameters,docs:{...(S=o.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + level: 4 + } +}`,...(C=(b=o.parameters)==null?void 0:b.docs)==null?void 0:C.source}}};var _,h,x;t.parameters={...t.parameters,docs:{...(_=t.parameters)==null?void 0:_.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(x=(h=t.parameters)==null?void 0:h.docs)==null?void 0:x.source}}};const j=["Default","Heading1","Heading2","Heading3","Heading4","InvertedColor"],P=Object.freeze(Object.defineProperty({__proto__:null,Default:e,Heading1:r,Heading2:a,Heading3:s,Heading4:o,InvertedColor:t,__namedExportsOrder:j,default:O},Symbol.toStringTag,{value:"Module"}));export{P as H,t as I,r as a,a as b,s as c,o as d}; diff --git a/demo-DES-654-table-of-content/assets/Icon-CuaumHXX.js b/demo-DES-654-table-of-content/assets/Icon-CuaumHXX.js new file mode 100644 index 0000000000..3c256001a0 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Icon-CuaumHXX.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-Nms4Y4qS.js";import{c as t}from"./clsx-B-dksMZM.js";import{r as c}from"./index-BwDkhjyp.js";const a=c.forwardRef(({className:l,size:e="level-3",square:s,svg:o,...r},n)=>i.jsx("span",{ref:n,className:t("ams-icon",e==="level-3"&&"ams-icon--size-3",e==="level-4"&&"ams-icon--size-4",e==="level-5"&&"ams-icon--size-5",e==="level-6"&&"ams-icon--size-6",s&&"ams-icon--square",l),...r,children:o()}));a.displayName="Icon";try{a.displayName="Icon",a.__docgenInfo={description:"",displayName:"Icon",props:{size:{defaultValue:{value:"level-3"},description:"The size of the icon. Corresponds with the text levels.",name:"size",required:!1,type:{name:"enum",value:[{value:'"level-3"'},{value:'"level-4"'},{value:'"level-5"'},{value:'"level-6"'}]}},square:{defaultValue:null,description:"Whether the icon container should be made square.",name:"square",required:!1,type:{name:"boolean"}},svg:{defaultValue:null,description:"The component rendering the icon’s markup.",name:"svg",required:!0,type:{name:"Function"}}}}}catch{}export{a as I}; diff --git a/demo-DES-654-table-of-content/assets/Icon.docs-CyDp6rXv.js b/demo-DES-654-table-of-content/assets/Icon.docs-CyDp6rXv.js new file mode 100644 index 0000000000..d42d2b88c6 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Icon.docs-CyDp6rXv.js @@ -0,0 +1,60 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as a}from"./index-DlpNa54Y.js";import{M as i,d as r,P as c,e as l,f as o}from"./index-ahswvvAf.js";import{I as h,W as d,S as m,L as p,a as u,b as x,c as f}from"./Icon.stories-Cw-4nnXa.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-DQkeu4as.js";import"./Icon-CuaumHXX.js";import"./clsx-B-dksMZM.js";import"./Heading-CWbN3elW.js";import"./getHeadingElement-DiRwFEz7.js";const g=` + +# Icon + +Icons are visual symbols used to represent ideas, themes, or actions. +They communicate the message at a glance and draw attention to important (interactive) information. +Always use an \`Icon\` component to encapsulate an SVG icon for proper styling and sizing. + +## Interactive Elements + +Use an icon to support textual interactive elements like buttons and links. +Always try to provide accompanying text for an icon. +Only use icons without accompanying text if they adhere to international standards, such as menu (hamburger icon), search (magnifying glass), next, previous, play, pause, etc. + +## Color + +Icons are black or white. +When used as part of an interactive element, they are dark blue. +When disabled, they are grey. +They must adhere to the same contrast ratio for accessibility as typography against a background colour. +The icon defaults to the colour of the container it is in. + +## Alignment + +Icons are aligned to the left of the text by default and vertically centred to the middle of the first line of text. + +## Size + +Icons use the same text levels as all typographic components to determine their size. +This ensures easy alignment between icons and text. +[Refer to the typography documentation for more information](/docs/docs-design-guidelines-typography--docs). +`;function s(t){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...a(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:h}),` +`,e.jsx(r,{children:g}),` +`,e.jsx(n.h1,{id:"usage",children:"Usage"}),` +`,e.jsxs(n.p,{children:["Use the React Icon component together with a React SVG component from ",e.jsx(n.code,{children:"@amsterdam/design-system-react-icons"}),`. +Import this SVG as follows:`]}),` +`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-js",children:`import { EmailIcon } from "@amsterdam/design-system-react-icons"; +`})}),` +`,e.jsx(n.p,{children:"Then, you can use it in the component like this:"}),` +`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:` +`})}),` +`,e.jsx(c,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"with-text",children:"With text"}),` +`,e.jsxs(n.p,{children:[`Icons can be used alongside text. +Using the same text levels for both the icon and text aligns them perfectly. +`,e.jsx(n.a,{href:"/docs/docs-design-guidelines-typography--docs",children:"Consult the documentation on typography for more information"}),"."]}),` +`,e.jsx(o,{of:d}),` +`,e.jsx(n.h3,{id:"square",children:"Square"}),` +`,e.jsxs(n.p,{children:["Sometimes it’s useful for the icon to take up square space, for example, with the ",e.jsx(n.a,{href:"/docs/components-buttons-icon-button--docs",children:"Icon Button"}),"."]}),` +`,e.jsx(o,{of:m}),` +`,e.jsx(n.h3,{id:"level-3",children:"Level 3"}),` +`,e.jsx(o,{of:p}),` +`,e.jsx(n.h3,{id:"level-4",children:"Level 4"}),` +`,e.jsx(o,{of:u}),` +`,e.jsx(n.h3,{id:"level-5",children:"Level 5"}),` +`,e.jsx(o,{of:x}),` +`,e.jsx(n.h3,{id:"level-6",children:"Level 6"}),` +`,e.jsx(o,{of:f})]})}function D(t={}){const{wrapper:n}={...a(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{D as default}; diff --git a/demo-DES-654-table-of-content/assets/Icon.stories-Cw-4nnXa.js b/demo-DES-654-table-of-content/assets/Icon.stories-Cw-4nnXa.js new file mode 100644 index 0000000000..5a966b6f9a --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Icon.stories-Cw-4nnXa.js @@ -0,0 +1,44 @@ +import{j as s}from"./jsx-runtime-Nms4Y4qS.js";import{I as m,c as e}from"./index.esm-DQkeu4as.js";import{I as W}from"./Icon-CuaumHXX.js";import{H as D}from"./Heading-CWbN3elW.js";const M={title:"Components/Media/Icon",component:W,argTypes:{svg:{control:{type:"select"},options:Object.keys(m),mapping:m}}},r={args:{svg:e}},a={decorators:[i=>s.jsx("span",{style:{display:"flex",gap:"1rem"},children:s.jsx(i,{})})],render:i=>s.jsxs(s.Fragment,{children:[s.jsx(W,{...i,size:"level-3"}),s.jsx(D,{size:"level-3",children:"Inline text"})]}),args:{svg:e}},o={args:{svg:e,square:!0}},n={args:{svg:e,size:"level-3"}},c={args:{svg:e,size:"level-4"}},t={args:{svg:e,size:"level-5"}},l={args:{svg:e,size:"level-6"}};var p,g,d;r.parameters={...r.parameters,docs:{...(p=r.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon + } +}`,...(d=(g=r.parameters)==null?void 0:g.docs)==null?void 0:d.source}}};var v,u,I;a.parameters={...a.parameters,docs:{...(v=a.parameters)==null?void 0:v.docs,source:{originalSource:`{ + decorators: [Story => + + ], + render: args => <> + + Inline text + , + args: { + svg: Icons.EmailIcon + } +}`,...(I=(u=a.parameters)==null?void 0:u.docs)==null?void 0:I.source}}};var S,x,z;o.parameters={...o.parameters,docs:{...(S=o.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + square: true + } +}`,...(z=(x=o.parameters)==null?void 0:x.docs)==null?void 0:z.source}}};var f,y,j;n.parameters={...n.parameters,docs:{...(f=n.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + size: 'level-3' + } +}`,...(j=(y=n.parameters)==null?void 0:y.docs)==null?void 0:j.source}}};var E,L,_;c.parameters={...c.parameters,docs:{...(E=c.parameters)==null?void 0:E.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + size: 'level-4' + } +}`,...(_=(L=c.parameters)==null?void 0:L.docs)==null?void 0:_.source}}};var b,h,q;t.parameters={...t.parameters,docs:{...(b=t.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + size: 'level-5' + } +}`,...(q=(h=t.parameters)==null?void 0:h.docs)==null?void 0:q.source}}};var H,O,T;l.parameters={...l.parameters,docs:{...(H=l.parameters)==null?void 0:H.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + size: 'level-6' + } +}`,...(T=(O=l.parameters)==null?void 0:O.docs)==null?void 0:T.source}}};const k=["Default","WithText","Square","Level3","Level4","Level5","Level6"],w=Object.freeze(Object.defineProperty({__proto__:null,Default:r,Level3:n,Level4:c,Level5:t,Level6:l,Square:o,WithText:a,__namedExportsOrder:k,default:M},Symbol.toStringTag,{value:"Module"}));export{w as I,n as L,o as S,a as W,c as a,t as b,l as c}; diff --git a/demo-DES-654-table-of-content/assets/IconButton-CFmnpWmC.js b/demo-DES-654-table-of-content/assets/IconButton-CFmnpWmC.js new file mode 100644 index 0000000000..3327589674 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/IconButton-CFmnpWmC.js @@ -0,0 +1 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{a as i}from"./index.esm-DQkeu4as.js";import{c}from"./clsx-B-dksMZM.js";import{r as d}from"./index-BwDkhjyp.js";import{V as m}from"./VisuallyHidden-Db-04MJ9.js";import{I as p}from"./Icon-CuaumHXX.js";const t=d.forwardRef(({className:o,label:n,onBackground:a,size:r="level-5",svg:l=i,...s},u)=>e.jsxs("button",{...s,ref:u,className:c("ams-icon-button",a==="light"&&"ams-icon-button--on-background-light",a==="dark"&&"ams-icon-button--on-background-dark",o),children:[e.jsx(m,{children:n}),e.jsx(p,{svg:l,size:r,square:!0})]}));t.displayName="IconButton";try{t.displayName="IconButton",t.__docgenInfo={description:"",displayName:"IconButton",props:{label:{defaultValue:null,description:"The accessible text for the button. Will be announced by screen readers. Should describe the button’s action.",name:"label",required:!0,type:{name:"string"}},onBackground:{defaultValue:null,description:"Describes the underlying background colour. Allows the icon to provide visual contrast.",name:"onBackground",required:!1,type:{name:"enum",value:[{value:'"light"'},{value:'"dark"'}]}},size:{defaultValue:{value:"level-5"},description:"The size of the icon. Corresponds with the text levels.",name:"size",required:!1,type:{name:"enum",value:[{value:'"level-3"'},{value:'"level-4"'},{value:'"level-5"'},{value:'"level-6"'}]}},svg:{defaultValue:null,description:"The component rendering the icon’s markup.",name:"svg",required:!1,type:{name:"Function"}}}}}catch{}export{t as I}; diff --git a/demo-DES-654-table-of-content/assets/IconButton.docs-DgQd_Al8.js b/demo-DES-654-table-of-content/assets/IconButton.docs-DgQd_Al8.js new file mode 100644 index 0000000000..b69f782c40 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/IconButton.docs-DgQd_Al8.js @@ -0,0 +1,35 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as r}from"./index-DlpNa54Y.js";import{M as i,d as a,P as l,e as c,f as t}from"./index-ahswvvAf.js";import{I as d,O as h,a as u,L as m,b as x,c as p,d as j}from"./IconButton.stories-B7B46tkn.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-DQkeu4as.js";import"./IconButton-CFmnpWmC.js";import"./clsx-B-dksMZM.js";import"./VisuallyHidden-Db-04MJ9.js";import"./Icon-CuaumHXX.js";const f=` + +# Icon Button + +A button containing only an icon. + +## Guidelines + +- Use this button only if the icon is entirely clear and understandable. + Many icons are interpreted differently by different users. + Only use universally recognized icons, such as a close icon or a play icon. +- Provide a label text that describes what the button does for screen reader users. + +## Relevant WCAG Requirements + +The Icon Button follows [the same requirements and guidelines as a regular button](/docs/components-buttons-button--docs). +`;function s(o){const e={h2:"h2",h3:"h3",p:"p",...r(),...o.components};return n.jsxs(n.Fragment,{children:[n.jsx(i,{of:d}),` +`,n.jsx(a,{children:f}),` +`,n.jsx(l,{}),` +`,n.jsx(c,{}),` +`,n.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(e.h3,{id:"on-light-background",children:"On Light Background"}),` +`,n.jsx(e.p,{children:"On a light (not white) background, the icon is black."}),` +`,n.jsx(t,{of:h}),` +`,n.jsx(e.h3,{id:"on-dark-background",children:"On Dark Background"}),` +`,n.jsx(e.p,{children:"On a dark background, the icon is white."}),` +`,n.jsx(t,{of:u}),` +`,n.jsx(e.h3,{id:"level-3",children:"Level 3"}),` +`,n.jsx(t,{of:m}),` +`,n.jsx(e.h3,{id:"level-4",children:"Level 4"}),` +`,n.jsx(t,{of:x}),` +`,n.jsx(e.h3,{id:"level-5",children:"Level 5"}),` +`,n.jsx(t,{of:p}),` +`,n.jsx(e.h3,{id:"level-6",children:"Level 6"}),` +`,n.jsx(t,{of:j})]})}function X(o={}){const{wrapper:e}={...r(),...o.components};return e?n.jsx(e,{...o,children:n.jsx(s,{...o})}):s(o)}export{X as default}; diff --git a/demo-DES-654-table-of-content/assets/IconButton.stories-B7B46tkn.js b/demo-DES-654-table-of-content/assets/IconButton.stories-B7B46tkn.js new file mode 100644 index 0000000000..4a1003d31b --- /dev/null +++ b/demo-DES-654-table-of-content/assets/IconButton.stories-B7B46tkn.js @@ -0,0 +1,28 @@ +import{I as c}from"./index.esm-DQkeu4as.js";import{I as j}from"./IconButton-CFmnpWmC.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const x={title:"Components/Buttons/Icon Button",component:j,args:{label:"Sluiten",onBackground:void 0,disabled:!1,size:void 0},argTypes:{disabled:{description:"Prevents interaction. Avoid if possible."},onBackground:{control:{type:"radio",labels:{undefined:"default",light:"light",dark:"dark"}},options:[void 0,"light","dark"]},size:{control:{type:"radio",labels:{undefined:"level-5"}},options:["level-3","level-4",void 0,"level-6"]},svg:{control:{type:"select"},options:Object.keys(c),mapping:c}}},e={},r={args:{onBackground:"light"}},s={args:{onBackground:"dark"}},a={args:{size:"level-3"}},o={args:{size:"level-4"}},n={args:{size:"level-5"}},t={args:{size:"level-6"}};var l,d,i;e.parameters={...e.parameters,docs:{...(l=e.parameters)==null?void 0:l.docs,source:{originalSource:"{}",...(i=(d=e.parameters)==null?void 0:d.docs)==null?void 0:i.source}}};var p,u,g;r.parameters={...r.parameters,docs:{...(p=r.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + onBackground: 'light' + } +}`,...(g=(u=r.parameters)==null?void 0:u.docs)==null?void 0:g.source}}};var m,v,k;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + onBackground: 'dark' + } +}`,...(k=(v=s.parameters)==null?void 0:v.docs)==null?void 0:k.source}}};var B,f,b;a.parameters={...a.parameters,docs:{...(B=a.parameters)==null?void 0:B.docs,source:{originalSource:`{ + args: { + size: 'level-3' + } +}`,...(b=(f=a.parameters)==null?void 0:f.docs)==null?void 0:b.source}}};var z,L,S;o.parameters={...o.parameters,docs:{...(z=o.parameters)==null?void 0:z.docs,source:{originalSource:`{ + args: { + size: 'level-4' + } +}`,...(S=(L=o.parameters)==null?void 0:L.docs)==null?void 0:S.source}}};var O,h,y;n.parameters={...n.parameters,docs:{...(O=n.parameters)==null?void 0:O.docs,source:{originalSource:`{ + args: { + size: 'level-5' + } +}`,...(y=(h=n.parameters)==null?void 0:h.docs)==null?void 0:y.source}}};var I,_,D;t.parameters={...t.parameters,docs:{...(I=t.parameters)==null?void 0:I.docs,source:{originalSource:`{ + args: { + size: 'level-6' + } +}`,...(D=(_=t.parameters)==null?void 0:_.docs)==null?void 0:D.source}}};const P=["Default","OnLightBackground","OnDarkBackground","Level3","Level4","Level5","Level6"],C=Object.freeze(Object.defineProperty({__proto__:null,Default:e,Level3:a,Level4:o,Level5:n,Level6:t,OnDarkBackground:s,OnLightBackground:r,__namedExportsOrder:P,default:x},Symbol.toStringTag,{value:"Module"}));export{C as I,a as L,r as O,s as a,o as b,n as c,t as d}; diff --git a/demo-DES-654-table-of-content/assets/Image-z3YSpimw.js b/demo-DES-654-table-of-content/assets/Image-z3YSpimw.js new file mode 100644 index 0000000000..f9534b5d8d --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Image-z3YSpimw.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-Nms4Y4qS.js";import{c as t}from"./clsx-B-dksMZM.js";import{r as m}from"./index-BwDkhjyp.js";const e=m.forwardRef(({className:a,cover:r=!1,...s},o)=>i.jsx("img",{...s,ref:o,className:t("ams-image",r&&"ams-image--cover",a)}));e.displayName="Image";try{e.displayName="Image",e.__docgenInfo={description:"",displayName:"Image",props:{cover:{defaultValue:{value:"false"},description:"Whether to display the image exactly as large as its container. This will clip the image if necessary.",name:"cover",required:!1,type:{name:"boolean"}}}}}catch{}export{e as I}; diff --git a/demo-DES-654-table-of-content/assets/Image.docs-BXc62UsJ.js b/demo-DES-654-table-of-content/assets/Image.docs-BXc62UsJ.js new file mode 100644 index 0000000000..9fa91b9ec1 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Image.docs-BXc62UsJ.js @@ -0,0 +1,37 @@ +import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as i}from"./index-DlpNa54Y.js";import{M as a,d as r,P as l,e as c,f as o}from"./index-ahswvvAf.js";import{I as d,M as m,L as h}from"./Image.stories-BEWLhhXt.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Image-z3YSpimw.js";import"./clsx-B-dksMZM.js";const p=` + +# Image + +Displays an image. + +## Guidelines + +- Do not forget to include a description of the image in the \`alt\` attribute. + This ensures that screen reader users can also access this information. + Additionally, it can aid in search engine optimization. +- A description is unnecessary for decorative images; use \`alt=""\` for these. + Examples are images that add little to the nearby text or pictures that purely contribute to the design or atmosphere of the page (source: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)). +- Optionally specify multiple candidates for the image through the \`srcSet\` attribute. + For example, provide small, medium, and large variants for various screen sizes. + This prevents unnecessary downloading of large files. + Do this especially for the main image of a page, where the difference between sizes on a narrow and wide screen is most significant. +- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](/docs/components-layout-aspect-ratio--docs) component. + +## Relevant WCAG Requirements + +- [WCAG 1.1.1](https://www.w3.org/TR/WCAG22/#non-text-content): Non-text content must have a text alternative. +- [WCAG 1.4.5](https://www.w3.org/TR/WCAG22/#images-of-text): Use text instead of images of text. +- [WCAG 1.4.9](https://www.w3.org/TR/WCAG22/#images-of-text-no-exception): Use images of text only when there is no alternative. +`;function s(n){const t={a:"a",code:"code",h2:"h2",p:"p",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:d}),` +`,e.jsx(r,{children:p}),` +`,e.jsx(t.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(l,{}),` +`,e.jsx(c,{}),` +`,e.jsx(t.h2,{id:"provide-multiple-sources",children:"Provide multiple sources"}),` +`,e.jsxs(t.p,{children:["Use the srcSet prop, which controls the corresponding HTML attribute (see ",e.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset",rel:"nofollow",children:"MDN"}),`), to let the browser select the optimal source file for the image. +A mobile device can often download a smaller file, saving the user’s bandwidth and time.`]}),` +`,e.jsx(o,{of:m}),` +`,e.jsx(t.h2,{id:"prevent-unnecessary-loading",children:"Prevent unnecessary loading"}),` +`,e.jsxs(t.p,{children:["Set the ",e.jsx(t.code,{children:"loading"})," attribute (see ",e.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading",rel:"nofollow",children:"MDN"}),") to ",e.jsx(t.code,{children:"lazy"}),` and the browser will wait to load the image until it is close to the viewport. +Consider setting this for images below the top area of the page.`]}),` +`,e.jsx(o,{of:h})]})}function E(n={}){const{wrapper:t}={...i(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(s,{...n})}):s(n)}export{E as default}; diff --git a/demo-DES-654-table-of-content/assets/Image.stories-BEWLhhXt.js b/demo-DES-654-table-of-content/assets/Image.stories-BEWLhhXt.js new file mode 100644 index 0000000000..31ec56d42a --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Image.stories-BEWLhhXt.js @@ -0,0 +1,32 @@ +import{I as l}from"./Image-z3YSpimw.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const d={title:"Components/Media/Image",component:l},s={args:{alt:"",src:"https://picsum.photos/640/360"},argTypes:{alt:{description:"Describes the image for non-visual users."},src:{description:"The url for the image."},srcSet:{description:"A set of candidate images."}}},e={args:{alt:"",srcSet:"https://picsum.photos/640/360 640w, https://picsum.photos/1280/720 1280w",sizes:"(max-width: 36rem) 640px, 50vw"}},t={args:{alt:"",src:"https://picsum.photos/2560/1440",loading:"lazy"}};var r,a,o;s.parameters={...s.parameters,docs:{...(r=s.parameters)==null?void 0:r.docs,source:{originalSource:`{ + args: { + alt: '', + src: 'https://picsum.photos/640/360' + }, + argTypes: { + alt: { + description: 'Describes the image for non-visual users.' + }, + src: { + description: 'The url for the image.' + }, + srcSet: { + description: 'A set of candidate images.' + } + } +}`,...(o=(a=s.parameters)==null?void 0:a.docs)==null?void 0:o.source}}};var n,c,p;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:`{ + args: { + alt: '', + srcSet: 'https://picsum.photos/640/360 640w, https://picsum.photos/1280/720 1280w', + sizes: '(max-width: 36rem) 640px, 50vw' + } +}`,...(p=(c=e.parameters)==null?void 0:c.docs)==null?void 0:p.source}}};var i,m,u;t.parameters={...t.parameters,docs:{...(i=t.parameters)==null?void 0:i.docs,source:{originalSource:`{ + args: { + alt: '', + src: 'https://picsum.photos/2560/1440', + loading: 'lazy' + } +}`,...(u=(m=t.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};const g=["Default","MultipleSources","LazyLoading"],f=Object.freeze(Object.defineProperty({__proto__:null,Default:s,LazyLoading:t,MultipleSources:e,__namedExportsOrder:g,default:d},Symbol.toStringTag,{value:"Module"}));export{f as I,t as L,e as M}; diff --git a/demo-DES-654-table-of-content/assets/Label-7rbJKFpg.js b/demo-DES-654-table-of-content/assets/Label-7rbJKFpg.js new file mode 100644 index 0000000000..088714705a --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Label-7rbJKFpg.js @@ -0,0 +1 @@ +import{j as t}from"./jsx-runtime-Nms4Y4qS.js";import{c as l}from"./clsx-B-dksMZM.js";import{r as p}from"./index-BwDkhjyp.js";const a=p.forwardRef(({children:r,className:e,...s},o)=>t.jsx("label",{...s,ref:o,className:l("ams-label",e),children:r}));a.displayName="Label";try{a.displayName="Label",a.__docgenInfo={description:"",displayName:"Label",props:{}}}catch{}export{a as L}; diff --git a/demo-DES-654-table-of-content/assets/Label.docs-CFJmyNk5.js b/demo-DES-654-table-of-content/assets/Label.docs-CFJmyNk5.js new file mode 100644 index 0000000000..c81ef9fa39 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Label.docs-CFJmyNk5.js @@ -0,0 +1,13 @@ +import{j as t}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as e}from"./index-DlpNa54Y.js";import{M as s,d as i,P as a,e as m}from"./index-ahswvvAf.js";import{L as p}from"./Label.stories-D9uMd7Qa.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Label-7rbJKFpg.js";import"./clsx-B-dksMZM.js";const c=` + +# Label + +Describes a form control. + +## Guidelines + +Always associate a form element (such as an \`input\` or \`textarea\`) with a label. +`;function r(n){return t.jsxs(t.Fragment,{children:[t.jsx(s,{of:p}),` +`,t.jsx(i,{children:c}),` +`,t.jsx(a,{}),` +`,t.jsx(m,{})]})}function E(n={}){const{wrapper:o}={...e(),...n.components};return o?t.jsx(o,{...n,children:t.jsx(r,{...n})}):r()}export{E as default}; diff --git a/demo-DES-654-table-of-content/assets/Label.stories-D9uMd7Qa.js b/demo-DES-654-table-of-content/assets/Label.stories-D9uMd7Qa.js new file mode 100644 index 0000000000..1e75042540 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Label.stories-D9uMd7Qa.js @@ -0,0 +1,4 @@ +import{L as a}from"./Label-7rbJKFpg.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const s={title:"Components/Forms/Label",component:a,args:{children:"Label"},argTypes:{children:{description:"The text content.",table:{disable:!1}}}},e={};var t,r,o;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:"{}",...(o=(r=e.parameters)==null?void 0:r.docs)==null?void 0:o.source}}};const l=["Default"],c=Object.freeze(Object.defineProperty({__proto__:null,Default:e,__namedExportsOrder:l,default:s},Symbol.toStringTag,{value:"Module"}));export{c as L}; diff --git a/demo-DES-654-table-of-content/assets/Link-DfaTqfXA.js b/demo-DES-654-table-of-content/assets/Link-DfaTqfXA.js new file mode 100644 index 0000000000..6e6fceccc6 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Link-DfaTqfXA.js @@ -0,0 +1 @@ +import{j as o}from"./jsx-runtime-Nms4Y4qS.js";import{c as s}from"./clsx-B-dksMZM.js";import{r as d}from"./index-BwDkhjyp.js";const a=d.forwardRef(({children:e,variant:n="standalone",onBackground:l,className:i,...r},t)=>o.jsx("a",{...r,ref:t,className:s("ams-link",{"ams-link--standalone":n==="standalone","ams-link--inline":n==="inline","ams-link--on-background-light":l==="light","ams-link--on-background-dark":l==="dark"},i),children:e}));a.displayName="Link";try{a.displayName="Link",a.__docgenInfo={description:"",displayName:"Link",props:{onBackground:{defaultValue:null,description:"Describes the underlying background colour. Allows the text to provide visual contrast.",name:"onBackground",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"light"'},{value:'"dark"'}]}},variant:{defaultValue:{value:"standalone"},description:"Whether the link is inline or stands alone.",name:"variant",required:!1,type:{name:"enum",value:[{value:'"inline"'},{value:'"standalone"'}]}}}}}catch{}export{a as L}; diff --git a/demo-DES-654-table-of-content/assets/Link.docs-aHrUtRx0.js b/demo-DES-654-table-of-content/assets/Link.docs-aHrUtRx0.js new file mode 100644 index 0000000000..826c2557ec --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Link.docs-aHrUtRx0.js @@ -0,0 +1,65 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as s}from"./index-DlpNa54Y.js";import{M as a,d as r,P as l,e as c,f as i}from"./index-ahswvvAf.js";import{L as h,S as d,I as p,o as m,a as g}from"./Link.stories-Bdm-Havn.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Link-DfaTqfXA.js";import"./clsx-B-dksMZM.js";import"./Paragraph-C4jU4-Z4.js";const u=` + +# Link + +A link is a navigation element and can be used independently or inline with text. +It is the lightweight variant for navigation. + +## Guidelines + +Use a link in the following cases: + +- To navigate to another page within the website or application +- To navigate to another website (see [External links](#external-links)) +- To navigate to an element on the same page +- To link to emails or phone numbers (start the link with \`mailto:\` or \`tel:\`) + +A link is a navigation component. +Use a button instead of a link when an action is desired. + +### External links + +Always include \`rel="external"\` for an external link. +Avoid \`target="_blank"\`, but use \`rel="external noopener"\` if necessary. +For more information: [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/) + +### Visited style + +Visited links indicate that a user has already opened the link. +We discourage using styles for visited links because they often make the page less clear and navigation more challenging. +The inline link does have a visited style. +It is not part of navigation elements that are frequently scanned. + +## Relevant WCAG Requirements + +- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum) +- [WCAG 2.4.4](https://www.w3.org/TR/WCAG21/#link-purpose-in-context) +- [WCAG 2.5.3](https://www.w3.org/TR/WCAG21/#label-in-name) +- [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts) + +## References + +- [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/): Avoid \`target="_blank"\` or use \`rel="external noopener"\` if necessary. +- [_A comprehensive guide to designing perfect links in UX_, on Prototypr](https://blog.prototypr.io/a-guide-to-designing-perfect-links-in-ux-414558f35730): Best practices for links. +- [_Writing Hyperlinks: Salient, Descriptive, Start with Keyword_ by Norman Nielsen Group](https://www.nngroup.com/articles/writing-links/): How to write good links? An extensive article on links. +- [_Hover, focus, active_, by Wunder](https://wunder.io/wunderpedia/accessibility/accessible-uis/hover-focus-active/): A good explanation of the states that elements like links and buttons have in browsers. +- [MDN: \`\`: The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a): Comprehensive overview of all possibilities of links in HTML. +`;function o(t){const e={h2:"h2",h3:"h3",p:"p",...s(),...t.components};return n.jsxs(n.Fragment,{children:[n.jsx(a,{of:h}),` +`,n.jsx(r,{children:u}),` +`,n.jsx(l,{}),` +`,n.jsx(c,{}),` +`,n.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(e.h3,{id:"standalone-links",children:"Standalone Links"}),` +`,n.jsx(e.p,{children:`Place standalone links directly after a piece of content. +Don’t use them in sentences or paragraphs. +They should never have an associated icon.`}),` +`,n.jsx(i,{of:d}),` +`,n.jsx(e.h3,{id:"inline-links",children:"Inline Links"}),` +`,n.jsx(e.p,{children:`Use inline links within sentences or paragraphs of text. +An icon can be added to inline links, positioned after the link. +Don’t use too many inline links on the same page, as it may confuse the user.`}),` +`,n.jsx(i,{of:p}),` +`,n.jsx(e.h3,{id:"on-dark-background",children:"On Dark Background"}),` +`,n.jsx(i,{of:m}),` +`,n.jsx(e.h3,{id:"on-light-background",children:"On Light Background"}),` +`,n.jsx(i,{of:g})]})}function D(t={}){const{wrapper:e}={...s(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(o,{...t})}):o(t)}export{D as default}; diff --git a/demo-DES-654-table-of-content/assets/Link.stories-Bdm-Havn.js b/demo-DES-654-table-of-content/assets/Link.stories-Bdm-Havn.js new file mode 100644 index 0000000000..e2775baa64 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/Link.stories-Bdm-Havn.js @@ -0,0 +1,31 @@ +import{j as r}from"./jsx-runtime-Nms4Y4qS.js";import{L as b}from"./Link-DfaTqfXA.js";import{P as j}from"./Paragraph-C4jU4-Z4.js";const B={title:"Components/Navigation/Link",component:b,args:{children:"Link label",href:"#",onBackground:void 0},argTypes:{children:{description:"The link text.",table:{disable:!1}},onBackground:{control:{type:"radio",labels:{undefined:"default",light:"light",dark:"dark"}},options:[void 0,"light","dark"]},href:{description:"The url for the link.",name:"href",type:{name:"string",required:!1}}}},a={},n={},o={args:{children:"typograaf",variant:"inline"},decorators:[e=>r.jsxs(j,{children:["Jouw ",r.jsx(e,{})," biedt mij zulke exquise schreven!"]})]},s={args:{onBackground:"dark"},decorators:[e=>r.jsx("div",{style:{background:"#004699",display:"inline",padding:"16px"},children:r.jsx(e,{})})]},t={args:{onBackground:"light"},decorators:[e=>r.jsx("div",{style:{background:"#FFE600",display:"inline",padding:"16px"},children:r.jsx(e,{})})]};var i,d,c;a.parameters={...a.parameters,docs:{...(i=a.parameters)==null?void 0:i.docs,source:{originalSource:"{}",...(c=(d=a.parameters)==null?void 0:d.docs)==null?void 0:c.source}}};var l,p,g;n.parameters={...n.parameters,docs:{...(l=n.parameters)==null?void 0:l.docs,source:{originalSource:"{}",...(g=(p=n.parameters)==null?void 0:p.docs)==null?void 0:g.source}}};var u,m,k;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + children: 'typograaf', + variant: 'inline' + }, + decorators: [Story => + Jouw biedt mij zulke exquise schreven! + ] +}`,...(k=(m=o.parameters)==null?void 0:m.docs)==null?void 0:k.source}}};var h,y,f;s.parameters={...s.parameters,docs:{...(h=s.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + onBackground: 'dark' + }, + decorators: [Story =>
    + +
    ] +}`,...(f=(y=s.parameters)==null?void 0:y.docs)==null?void 0:f.source}}};var x,S,v;t.parameters={...t.parameters,docs:{...(x=t.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + onBackground: 'light' + }, + decorators: [Story =>
    + +
    ] +}`,...(v=(S=t.parameters)==null?void 0:S.docs)==null?void 0:v.source}}};const L=["Default","Standalone","Inline","onDarkBackground","onLightBackground"],E=Object.freeze(Object.defineProperty({__proto__:null,Default:a,Inline:o,Standalone:n,__namedExportsOrder:L,default:B,onDarkBackground:s,onLightBackground:t},Symbol.toStringTag,{value:"Module"}));export{o as I,E as L,n as S,t as a,s as o}; diff --git a/demo-DES-654-table-of-content/assets/LinkList-DB6g-rx2.js b/demo-DES-654-table-of-content/assets/LinkList-DB6g-rx2.js new file mode 100644 index 0000000000..09b50de1a8 --- /dev/null +++ b/demo-DES-654-table-of-content/assets/LinkList-DB6g-rx2.js @@ -0,0 +1 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{c as r}from"./clsx-B-dksMZM.js";import{r as o}from"./index-BwDkhjyp.js";import{d as p}from"./index.esm-DQkeu4as.js";import{I as L}from"./Icon-CuaumHXX.js";const k={small:"level-6",medium:"level-5",large:"level-4"},c=o.forwardRef(({children:e,className:s,icon:t,onBackground:i,size:a,...d},u)=>n.jsx("li",{children:n.jsxs("a",{className:r("ams-link-list__link",i&&`ams-link-list__link--on-background-${i}`,a&&`ams-link-list__link--${a}`,s),ref:u,...d,children:[n.jsx(L,{svg:t??p,size:k[a??"medium"]}),e]})}));c.displayName="LinkList.Link";try{LinkList.Link.displayName="LinkList.Link",LinkList.Link.__docgenInfo={description:"One link with a Link List.",displayName:"LinkList.Link",props:{icon:{defaultValue:null,description:"An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list.",name:"icon",required:!1,type:{name:"Function"}},onBackground:{defaultValue:null,description:"Describes the underlying background colour. Allows the text to provide visual contrast.",name:"onBackground",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"light"'},{value:'"dark"'}]}},size:{defaultValue:null,description:"The size of the text. Use the same size for all items in the list.",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'}]}}}}}catch{}const m=o.forwardRef(({children:e,className:s,...t},i)=>n.jsx("ul",{ref:i,className:r("ams-link-list",s),...t,children:e}));m.displayName="LinkList";const l=Object.assign(m,{Link:c});try{l.displayName="LinkList",l.__docgenInfo={description:"",displayName:"LinkList",props:{}}}catch{}export{l as L}; diff --git a/demo-DES-654-table-of-content/assets/LinkList.docs-BX72w5_M.js b/demo-DES-654-table-of-content/assets/LinkList.docs-BX72w5_M.js new file mode 100644 index 0000000000..1b5a99e90f --- /dev/null +++ b/demo-DES-654-table-of-content/assets/LinkList.docs-BX72w5_M.js @@ -0,0 +1,45 @@ +import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as r}from"./index-DlpNa54Y.js";import{M as l,d as a,P as c,f as o,e as h}from"./index-ahswvvAf.js";import{L as d,C as m,S as p,a as s,O as x,b as u}from"./LinkList.stories-DEiZM3iK.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-DQkeu4as.js";import"./exampleContent-CRK3_7Hv.js";import"./LinkList-DB6g-rx2.js";import"./clsx-B-dksMZM.js";import"./Icon-CuaumHXX.js";const f=` + +# Link List + +A collection of related links. + +## Design + +Every list item starts with a chevron. +It emphasizes the list structure and thematic coherence. +The chevron is part of the link. +Therefore, it is blue and clickable. + +## Guidelines + +Use a Link List to present multiple links within a theme. + +For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component. +`;function t(i){const e={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...r(),...i.components};return n.jsxs(n.Fragment,{children:[n.jsx(l,{of:d}),` +`,n.jsx(a,{children:f}),` +`,n.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(e.h3,{id:"default",children:"Default"}),` +`,n.jsxs(e.p,{children:[`The Link List has no props. +It is just a container for the items, rendering a `,n.jsx(e.code,{children:"