diff --git a/demo-DES-720-add-issue-and-PR-templates/.nojekyll b/demo-DES-720-add-issue-and-PR-templates/.nojekyll new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demo-DES-720-add-issue-and-PR-templates/8b07a03a21716eb1e226769b361385dc3c36813b.txt b/demo-DES-720-add-issue-and-PR-templates/8b07a03a21716eb1e226769b361385dc3c36813b.txt new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demo-DES-720-add-issue-and-PR-templates/CHANGELOG.md b/demo-DES-720-add-issue-and-PR-templates/CHANGELOG.md new file mode 100644 index 0000000000..02e05646f6 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/CHANGELOG.md @@ -0,0 +1,45 @@ +# 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.1](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.2.0...design-system-assets-v0.2.1) (2024-06-05) + + +### Features + +* favicon, app icons and optional Web Manifest ([#1205](https://github.com/Amsterdam/design-system/issues/1205)) ([5513961](https://github.com/Amsterdam/design-system/commit/55139617966514207402f791a5b4e9778d059946)) + +## [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-720-add-issue-and-PR-templates/LICENSE.md b/demo-DES-720-add-issue-and-PR-templates/LICENSE.md new file mode 100644 index 0000000000..31c3f34604 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/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-720-add-issue-and-PR-templates/README.md b/demo-DES-720-add-issue-and-PR-templates/README.md new file mode 100644 index 0000000000..a2ebf9ad27 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/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-720-add-issue-and-PR-templates/app-icons/icon-192.png b/demo-DES-720-add-issue-and-PR-templates/app-icons/icon-192.png new file mode 100644 index 0000000000..d2f996b477 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/app-icons/icon-192.png differ diff --git a/demo-DES-720-add-issue-and-PR-templates/app-icons/icon-512.png b/demo-DES-720-add-issue-and-PR-templates/app-icons/icon-512.png new file mode 100644 index 0000000000..b711622f05 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/app-icons/icon-512.png differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Accordion.docs-Q7do3Apk.js b/demo-DES-720-add-issue-and-PR-templates/assets/Accordion.docs-Q7do3Apk.js new file mode 100644 index 0000000000..b99ab6ed78 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Accordion.docs-Q7do3Apk.js @@ -0,0 +1,83 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as s}from"./index-CRbi4mQH.js";import{M as i,d as r,P as c,e as d,f as o}from"./index-CQzUsdl8.js";import{A as h,E as l,T as m}from"./Accordion.stories-Bm_dkVaP.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./exampleContent-BEbrefRz.js";import"./clsx-B-dksMZM.js";import"./index.esm-Dr6r5gIo.js";import"./getHeadingElement-DiRwFEz7.js";import"./Icon-j44OzEOs.js";import"./useKeyboardFocus-CRUFsA_C.js";import"./Paragraph-DpVlyIEJ.js";const p=` + +# 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/) +`;/*@license CC0-1.0*/function a(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...s(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:h}),` +`,e.jsx(r,{children:p}),` +`,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:'sectionAs="div"'}),"."]}),` +`,e.jsx(o,{of:m}),` +`,e.jsx(n.h2,{id:"technical-considerations",children:"Technical considerations"}),` +`,e.jsxs(n.h3,{id:"the-accordion-parent-component",children:["The ",e.jsx(n.code,{children:"Accordion"})," parent component"]}),` +`,e.jsx(n.p,{children:"The parent component is used for several reasons:"}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsx(n.li,{children:"It sets the spacing between Accordion Sections."}),` +`,e.jsx(n.li,{children:"It allows you to set the same heading level for all Accordion Sections."}),` +`,e.jsx(n.li,{children:"It allows you to set the same HTML element for all Accordion Sections."}),` +`,e.jsx(n.li,{children:"It adds the extra keyboard navigation described in the guidelines."}),` +`]}),` +`,e.jsxs(n.h3,{id:"the-html-details-element",children:["The HTML ",e.jsx(n.code,{children:"details"})," element"]}),` +`,e.jsxs(n.p,{children:["Currently (28-6-2023), the ",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 q(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(a,{...t})}):a(t)}export{q as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Accordion.stories-Bm_dkVaP.js b/demo-DES-720-add-issue-and-PR-templates/assets/Accordion.stories-Bm_dkVaP.js new file mode 100644 index 0000000000..064024f1e3 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Accordion.stories-Bm_dkVaP.js @@ -0,0 +1,38 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{b as x,h as S}from"./exampleContent-BEbrefRz.js";import{c as u}from"./clsx-B-dksMZM.js";import{r as o}from"./index-uCp2LrAq.js";import{s as B}from"./index.esm-Dr6r5gIo.js";import{g as K}from"./getHeadingElement-DiRwFEz7.js";import{I as F}from"./Icon-j44OzEOs.js";import{u as W}from"./useKeyboardFocus-CRUFsA_C.js";import{P as n}from"./Paragraph-DpVlyIEJ.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const X={headingLevel:1,sectionAs:"section"},H=o.createContext(X);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 V=o.forwardRef(({label:r,expanded:d=!1,children:l,className:p,...h},c)=>{const{headingLevel:g,sectionAs:M}=o.useContext(H),[m,O]=o.useState(d),$=K(g),z=M||"section",v=o.useId(),P=`button-${v}`,k=`panel-${v}`;return e.jsxs("div",{className:u("ams-accordion__section",p),ref:c,...h,children:[e.jsx($,{className:"ams-accordion__header",children:e.jsxs("button",{"aria-controls":k,"aria-expanded":m,className:"ams-accordion__button",id:P,onClick:()=>O(!m),type:"button",children:[e.jsx(F,{svg:B,size:"level-5",className:"ams-accordion__icon"}),r]})}),e.jsx(z,{"aria-labelledby":P,className:u("ams-accordion__panel",{"ams-accordion__panel--expanded":m}),id:k,children:l})]})});V.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 q=o.forwardRef(({children:r,className:d,headingLevel:l,sectionAs:p="section"},h)=>{const c=o.useRef(null);o.useImperativeHandle(h,()=>c.current);const{keyDown:g}=W(c,{rotating:!0});return e.jsx(H.Provider,{value:{headingLevel:l,sectionAs:p},children:e.jsx("div",{className:u("ams-accordion",d),onKeyDown:g,ref:c,children:r})})});q.displayName="Accordion";const a=Object.assign(q,{Section:V});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"}]}},sectionAs:{defaultValue:{value:"section"},description:"The HTML element to use for each Accordion Section.",name:"sectionAs",required:!1,type:{name:"enum",value:[{value:'"div"'},{value:'"section"'}]}}}}}catch{}const A=S(),_=S(),y=S(),f=x(),b=x(),j=x(),G={title:"Components/Containers/Accordion",component:a,args:{headingLevel:1}},i={args:{children:[e.jsx(a.Section,{label:A,children:e.jsx(n,{children:f})},1),e.jsx(a.Section,{label:_,children:e.jsx(n,{children:b})},2),e.jsx(a.Section,{label:y,children:e.jsx(n,{children:j})},3)]}},t={args:{children:[e.jsx(a.Section,{label:A,children:e.jsx(n,{children:f})},1),e.jsx(a.Section,{label:_,expanded:!0,children:e.jsx(n,{children:b})},2),e.jsx(a.Section,{label:y,children:e.jsx(n,{children:j})},3)]}},s={args:{sectionAs:"div",children:[e.jsx(a.Section,{label:A,children:e.jsx(n,{children:f})},1),e.jsx(a.Section,{label:_,children:e.jsx(n,{children:b})},2),e.jsx(a.Section,{label:y,children:e.jsx(n,{children:j})},3)]}};var C,N,I;i.parameters={...i.parameters,docs:{...(C=i.parameters)==null?void 0:C.docs,source:{originalSource:`{ + args: { + children: [ + {paragraph1} + , + {paragraph2} + , + {paragraph3} + ] + } +}`,...(I=(N=i.parameters)==null?void 0:N.docs)==null?void 0:I.source}}};var E,T,w;t.parameters={...t.parameters,docs:{...(E=t.parameters)==null?void 0:E.docs,source:{originalSource:`{ + args: { + children: [ + {paragraph1} + , + {paragraph2} + , + {paragraph3} + ] + } +}`,...(w=(T=t.parameters)==null?void 0:T.docs)==null?void 0:w.source}}};var L,D,R;s.parameters={...s.parameters,docs:{...(L=s.parameters)==null?void 0:L.docs,source:{originalSource:`{ + args: { + sectionAs: 'div', + children: [ + {paragraph1} + , + {paragraph2} + , + {paragraph3} + ] + } +}`,...(R=(D=s.parameters)==null?void 0:D.docs)==null?void 0:R.source}}};const J=["Default","ExpandedByDefault","TooManyLandmarks"],ce=Object.freeze(Object.defineProperty({__proto__:null,Default:i,ExpandedByDefault:t,TooManyLandmarks:s,__namedExportsOrder:J,default:G},Symbol.toStringTag,{value:"Module"}));export{ce as A,t as E,s as T}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Alert-sdeIdlXL.js b/demo-DES-720-add-issue-and-PR-templates/assets/Alert-sdeIdlXL.js new file mode 100644 index 0000000000..a6004c1d6c --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Alert-sdeIdlXL.js @@ -0,0 +1,2 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{a as r,b as v,c as h}from"./index.esm-Dr6r5gIo.js";import{c as g}from"./clsx-B-dksMZM.js";import{r as y}from"./index-uCp2LrAq.js";import{I as x}from"./Icon-j44OzEOs.js";import{H as _}from"./Heading-CGpdaMNv.js";import{I as b}from"./IconButton-BIJEN4e9.js";const A={error:r,info:v,success:h,warning:r},l=y.forwardRef(({children:s,className:i,closeable:o,closeButtonLabel:c="Sluiten",heading:a,headingLevel:u=2,onClose:d,severity:t="warning",...m},f)=>{const n=a?"level-4":"level-5",p=a?"section":"div";return e.jsxs(p,{...m,ref:f,className:g("ams-alert",t&&`ams-alert--${t}`,i),children:[e.jsx("div",{className:"ams-alert__icon",children:e.jsx(x,{size:n,svg:A[t]})}),e.jsxs("div",{className:"ams-alert__content",children:[a&&e.jsx(_,{level:u,size:"level-4",children:a}),s]}),o&&e.jsx(b,{label:c,size:n,onClick:d})]})});l.displayName="Alert";try{l.displayName="Alert",l.__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"}},heading:{defaultValue:null,description:"The text for the Heading.",name:"heading",required:!1,type:{name:"string"}},headingLevel:{defaultValue:{value:"2"},description:`The hierarchical level of the Heading within the document. +Note: this intentionally does not change the font size.`,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"'}]}}}}}catch{}export{l as A}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Alert.docs-D8ZTbINk.js b/demo-DES-720-add-issue-and-PR-templates/assets/Alert.docs-D8ZTbINk.js new file mode 100644 index 0000000000..9adbfa0ffd --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Alert.docs-D8ZTbINk.js @@ -0,0 +1,55 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as s}from"./index-CRbi4mQH.js";import{M as o,d as a,P as c,e as h,f as i}from"./index-CQzUsdl8.js";import{A as l,W as d,E as m,S as p,I as f,a as u,b as x,c as g}from"./Alert.stories-CRL4-XiY.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Alert-sdeIdlXL.js";import"./index.esm-Dr6r5gIo.js";import"./clsx-B-dksMZM.js";import"./Icon-j44OzEOs.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./IconButton-BIJEN4e9.js";import"./UnorderedList-Dj5vkGIl.js";import"./Link-DP3a_gY9.js";import"./Paragraph-DpVlyIEJ.js";const j=` + +# 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 heading can be omitted. +`;/*@license CC0-1.0*/function r(t){const e={h2:"h2",h3:"h3",p:"p",...s(),...t.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(o,{of:l}),` +`,n.jsx(a,{children:j}),` +`,n.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(e.p,{children:"The default Alert is a warning."}),` +`,n.jsx(c,{}),` +`,n.jsx(h,{}),` +`,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-heading",children:"Without Heading"}),` +`,n.jsx(e.p,{children:`Sometimes, a heading is unnecessary. +The icon automatically becomes slightly smaller.`}),` +`,n.jsx(i,{of:g})]})}function q(t={}){const{wrapper:e}={...s(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(r,{...t})}):r(t)}export{q as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Alert.stories-CRL4-XiY.js b/demo-DES-720-add-issue-and-PR-templates/assets/Alert.stories-CRL4-XiY.js new file mode 100644 index 0000000000..43ca51b441 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Alert.stories-CRL4-XiY.js @@ -0,0 +1,64 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{A}from"./Alert-sdeIdlXL.js";import{U as g}from"./UnorderedList-Dj5vkGIl.js";import{L as E}from"./Link-DP3a_gY9.js";import{P as n}from"./Paragraph-DpVlyIEJ.js";const H={title:"Components/Feedback/Alert",component:A,args:{closeable:!1,heading:"Let op"}},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."}),heading:"Vul de gegevens aan"}},s={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."}),heading:"Niet gelukt",severity:"error"}},t={args:{children:e.jsx(n,{children:"Het formulier is verzonden. We hebben uw gegevens goed ontvangen."}),closeable:!0,heading:"Gelukt",severity:"success"}},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:{children:[e.jsx(n,{children:"U bent vergeten de volgende verplichte velden in te vullen:"},1),e.jsxs(g,{children:[e.jsx(g.Item,{children:"Naam"}),e.jsx(g.Item,{children:"Telefoonnummer"})]},2)],heading:"Vul de gegevens aan"}},d={args:{children:e.jsxs(n,{children:["Tijdens Koningsdag zijn"," ",e.jsx(E,{variant:"inline",href:"#",children:"alle Stadsloketten"})," ","gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente zijn niet bereikbaar."]}),severity:"info"}},l={args:{children:e.jsx(n,{children:"De geschatte wachttijd in de adreszoeker klopt momenteel niet altijd. We werken aan een oplossing."}),heading:void 0}};var c,h,m;r.parameters={...r.parameters,docs:{...(c=r.parameters)==null?void 0:c.docs,source:{originalSource:`{ + args: { + children: + Tijdens Koningsdag zijn alle Stadsloketten gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente + zijn niet bereikbaar. + + } +}`,...(m=(h=r.parameters)==null?void 0:h.docs)==null?void 0:m.source}}};var u,p,v;a.parameters={...a.parameters,docs:{...(u=a.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + children: U bent vergeten verplichte velden in te vullen., + heading: 'Vul de gegevens aan' + } +}`,...(v=(p=a.parameters)==null?void 0:p.docs)==null?void 0:v.source}}};var k,j,b;s.parameters={...s.parameters,docs:{...(k=s.parameters)==null?void 0:k.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. + , + heading: 'Niet gelukt', + severity: 'error' + } +}`,...(b=(j=s.parameters)==null?void 0:j.docs)==null?void 0:b.source}}};var f,z,P;t.parameters={...t.parameters,docs:{...(f=t.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + children: Het formulier is verzonden. We hebben uw gegevens goed ontvangen., + closeable: true, + heading: 'Gelukt', + severity: 'success' + } +}`,...(P=(z=t.parameters)==null?void 0:z.docs)==null?void 0:P.source}}};var W,S,w;o.parameters={...o.parameters,docs:{...(W=o.parameters)==null?void 0:W.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' + } +}`,...(w=(S=o.parameters)==null?void 0:S.docs)==null?void 0:w.source}}};var x,L,y;i.parameters={...i.parameters,docs:{...(x=i.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + children: [U bent vergeten de volgende verplichte velden in te vullen:, + Naam + Telefoonnummer + ], + heading: 'Vul de gegevens aan' + } +}`,...(y=(L=i.parameters)==null?void 0:L.docs)==null?void 0:y.source}}};var U,I,T;d.parameters={...d.parameters,docs:{...(U=d.parameters)==null?void 0:U.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' + } +}`,...(T=(I=d.parameters)==null?void 0:I.docs)==null?void 0:T.source}}};var O,D,_;l.parameters={...l.parameters,docs:{...(O=l.parameters)==null?void 0:O.docs,source:{originalSource:`{ + args: { + children: + De geschatte wachttijd in de adreszoeker klopt momenteel niet altijd. We werken aan een oplossing. + , + heading: undefined + } +}`,...(_=(D=l.parameters)==null?void 0:D.docs)==null?void 0:_.source}}};const K=["Default","Warning","Error","Success","Info","WithList","WithInlineLink","WithoutHeading"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:r,Error:s,Info:o,Success:t,Warning:a,WithInlineLink:d,WithList:i,WithoutHeading:l,__namedExportsOrder:K,default:H},Symbol.toStringTag,{value:"Module"}));export{M as A,s as E,o as I,t as S,a as W,d as a,i as b,l as c}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Bold-B-eEYlh-.eot b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Bold-B-eEYlh-.eot new file mode 100644 index 0000000000..383d801e89 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Bold-B-eEYlh-.eot differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Bold-CN8ieXn0.woff b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Bold-CN8ieXn0.woff new file mode 100644 index 0000000000..820da6c665 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Bold-CN8ieXn0.woff differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Bold-rXlH1Jru.woff2 b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Bold-rXlH1Jru.woff2 new file mode 100644 index 0000000000..0ac92ef3fb Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Bold-rXlH1Jru.woff2 differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-BoldItalic-D8IgX2tE.eot b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-BoldItalic-D8IgX2tE.eot new file mode 100644 index 0000000000..4b6688659c Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-BoldItalic-D8IgX2tE.eot differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-BoldItalic-DGVdd_B4.woff2 b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-BoldItalic-DGVdd_B4.woff2 new file mode 100644 index 0000000000..72a076dc02 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-BoldItalic-DGVdd_B4.woff2 differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-BoldItalic-Iks2g4JK.woff b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-BoldItalic-Iks2g4JK.woff new file mode 100644 index 0000000000..83c3db2c65 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-BoldItalic-Iks2g4JK.woff differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-ExtraBold-0zPbyHYJ.eot b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-ExtraBold-0zPbyHYJ.eot new file mode 100644 index 0000000000..d8b311252d Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-ExtraBold-0zPbyHYJ.eot differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-ExtraBold-GN1-Za61.woff b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-ExtraBold-GN1-Za61.woff new file mode 100644 index 0000000000..1be787d044 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-ExtraBold-GN1-Za61.woff differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-ExtraBold-hk2GetsY.woff2 b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-ExtraBold-hk2GetsY.woff2 new file mode 100644 index 0000000000..c3858f05b8 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-ExtraBold-hk2GetsY.woff2 differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Italic-D8oH3P5t.woff b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Italic-D8oH3P5t.woff new file mode 100644 index 0000000000..225b450a48 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Italic-D8oH3P5t.woff differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Italic-DW94SgHh.woff2 b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Italic-DW94SgHh.woff2 new file mode 100644 index 0000000000..dad1e544a1 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Italic-DW94SgHh.woff2 differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Italic-Djuh9q7q.eot b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Italic-Djuh9q7q.eot new file mode 100644 index 0000000000..03b986f33e Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Italic-Djuh9q7q.eot differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Light-C9JJu_TU.eot b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Light-C9JJu_TU.eot new file mode 100644 index 0000000000..bbea6b3e24 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Light-C9JJu_TU.eot differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Light-D_AncfMf.woff2 b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Light-D_AncfMf.woff2 new file mode 100644 index 0000000000..64bffd1e35 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Light-D_AncfMf.woff2 differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Light-iEj3CW9t.woff b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Light-iEj3CW9t.woff new file mode 100644 index 0000000000..27f5365b40 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Light-iEj3CW9t.woff differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Regular-BSIiMMb3.eot b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Regular-BSIiMMb3.eot new file mode 100644 index 0000000000..8a555f4a86 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Regular-BSIiMMb3.eot differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Regular-QnM7etvR.woff2 b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Regular-QnM7etvR.woff2 new file mode 100644 index 0000000000..ba85adcd68 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Regular-QnM7etvR.woff2 differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Regular-nwmnLZDN.woff b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Regular-nwmnLZDN.woff new file mode 100644 index 0000000000..9196d86610 Binary files /dev/null and b/demo-DES-720-add-issue-and-PR-templates/assets/AmsterdamSans-Regular-nwmnLZDN.woff differ diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AppIcons-VskMucNV.js b/demo-DES-720-add-issue-and-PR-templates/assets/AppIcons-VskMucNV.js new file mode 100644 index 0000000000..eba53663d1 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/AppIcons-VskMucNV.js @@ -0,0 +1 @@ +import{j as s}from"./jsx-runtime-X2b_N9AH.js";import{I as i}from"./index.esm-D-8Z0FST.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-720-add-issue-and-PR-templates/assets/ArticlePage.docs-DlHjQILI.js b/demo-DES-720-add-issue-and-PR-templates/assets/ArticlePage.docs-DlHjQILI.js new file mode 100644 index 0000000000..49654d0ee3 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/ArticlePage.docs-DlHjQILI.js @@ -0,0 +1,5 @@ +import{j as t}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as m}from"./index-CRbi4mQH.js";import{M as p}from"./index-CQzUsdl8.js";import{A as n}from"./ArticlePage.stories-DkyqIjrm.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-D-8Z0FST.js";import"./clsx-B-dksMZM.js";import"./index.esm-Dr6r5gIo.js";import"./Image.stories-4Fpvxr85.js";import"./Image-Bf5zYcta.js";import"./config-CInvwkKL.js";import"./PageMenu.stories-CI-pLzqM.js";import"./PageMenu-C-9UIlX6.js";import"./Icon-j44OzEOs.js";import"./Footer.stories-C6wuxGcy.js";import"./Spotlight-CscDyz0Q.js";import"./Grid-BRQJwiXa.js";import"./LinkList-QpW3ToL9.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./Paragraph-DpVlyIEJ.js";/*@license CC0-1.0*/function i(o){const r={h1:"h1",p:"p",...m(),...o.components};return t.jsxs(t.Fragment,{children:[` +`,` +`,t.jsx(p,{of:n}),` +`,t.jsx(r.h1,{id:"article-page",children:"Article Page"}),` +`,t.jsx(r.p,{children:"This page type is for news or similar kinds of articles."})]})}function b(o={}){const{wrapper:r}={...m(),...o.components};return r?t.jsx(r,{...o,children:t.jsx(i,{...o})}):i(o)}export{b as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/ArticlePage.stories-DkyqIjrm.js b/demo-DES-720-add-issue-and-PR-templates/assets/ArticlePage.stories-DkyqIjrm.js new file mode 100644 index 0000000000..36682bb377 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/ArticlePage.stories-DkyqIjrm.js @@ -0,0 +1,4 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{G as r,P as t,k as z,C as g,H as i,U as a,l as h,m as j,B as m,O as y,n as _,I}from"./index.esm-D-8Z0FST.js";import{L}from"./Image.stories-4Fpvxr85.js";import{c as A}from"./config-CInvwkKL.js";const u=({lead:n,paragraph1:s,spotlightHeading:o,spotlightLinkLabel:l})=>e.jsxs(e.Fragment,{children:[e.jsx(r,{paddingVertical:"medium",children:e.jsxs(r.Cell,{span:{narrow:4,medium:8,wide:10},start:{narrow:1,medium:1,wide:2},children:[e.jsx(t,{className:"ams-mb--md",size:"large",children:n}),e.jsx(t,{children:s})]})}),e.jsx(z,{as:"section",color:"purple",children:e.jsx(r,{paddingTop:"medium",paddingBottom:"large",children:e.jsx(r.Cell,{span:{narrow:4,medium:6,wide:8},start:{narrow:1,medium:2,wide:3},children:e.jsxs(g,{gap:"small",children:[e.jsx(i,{inverseColor:!0,level:2,children:o}),e.jsxs(a,{inverseColor:!0,children:[e.jsx(a.Item,{children:"Vraag uw paspoort of ID-kaart aan bij een Stadsloket in Amsterdam."}),e.jsx(a.Item,{children:"U kunt elke dag langskomen van 9.00 uur tot 17.00 uur en op donderdag tot 20.00 uur."}),e.jsx(a.Item,{children:"Op amsterdam.nl/paspoort staat wat u mee moet nemen."}),e.jsx(a.Item,{children:"Laat aan het loket bij uw aanvraag weten dat u kiest voor gratis bezorgen."}),e.jsx(a.Item,{children:"Als uw paspoort of ID-kaart klaar is, krijgt u een e-mail en sms-bericht met inloggegevens. Met deze inloggegevens kunt u zelf inplannen wanneer u uw reisdocument bezorgd wilt hebben."})]}),e.jsx(t,{inverseColor:!0,children:e.jsx(h,{href:"https://amsterdam.nl/paspoort/",onBackground:"dark",children:l})})]})})})}),e.jsx(r,{paddingVertical:"medium",children:e.jsx(r.Cell,{span:{narrow:4,medium:8,wide:10},start:{narrow:1,medium:1,wide:2},children:e.jsxs(g,{children:[e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Wanneer bezorgen we"}),e.jsx(t,{children:"We bezorgen op werkdagen en zaterdag tussen 8.00 en 18.00 uur. De ene week bezorgen wij op dinsdag en donderdag ook tot 21.00 uur en de andere week op woensdag tot 21.00 uur."})]}),e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Tekenen voor ontvangst"}),e.jsx(t,{children:"Zorg dat u thuis bent om uw paspoort of ID-kaart te ontvangen. Bij bezorging voor meerdere personen moeten alle personen aanwezig zijn. Ook kinderen vanaf 12 jaar moeten tekenen voor ontvangst. Tot 12 jaar tekent de ouder of wettelijk vertegenwoordiger van het kind."})]}),e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Bezorgen met waarde-transport"}),e.jsxs(t,{children:["De gemeente laat uw paspoort of ID-kaart bezorgen met een waarde-transport. Op"," ",e.jsx(h,{href:"https://mijnafspraak.nl/",children:"mijnafspraak.nl"})," ziet u wie er langskomt. De pasfoto van de medewerker is vanaf 8.00 uur zichtbaar. De bezorger controleert bij aankomst uw identiteit en geeft u het nieuwe reisdocument. U geeft uw oude reisdocument aan de bezorger. De bezorger maakt uw oude reisdocument ongeldig waar u bij bent. Daarna mag u het zelf houden of meegeven aan de bezorger, die het vernietigt."]})]}),e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Wanneer kan bezorgen niet?"}),e.jsxs(a,{children:[e.jsx(a.Item,{children:"Bij een spoedaanvraag."}),e.jsx(a.Item,{children:"Als u een geldig visum in uw paspoort hebt dat u nog wilt gebruiken."}),e.jsx(a.Item,{children:"Als u het oude reisdocument kwijt bent."}),e.jsx(a.Item,{children:"Als u op een van de Waddeneilanden woont. Daar bezorgen we niet."})]})]}),e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Meer weten"}),e.jsx(j,{children:e.jsx(j.Link,{href:"https://amsterdam.nl/paspoort/",children:"amsterdam.nl/paspoort"})})]})]})})})]});try{u.displayName="ArticleBody",u.__docgenInfo={description:"",displayName:"ArticleBody",props:{lead:{defaultValue:null,description:"",name:"lead",required:!0,type:{name:"string"}},paragraph1:{defaultValue:null,description:"",name:"paragraph1",required:!0,type:{name:"string"}},spotlightHeading:{defaultValue:null,description:"",name:"spotlightHeading",required:!0,type:{name:"string"}},spotlightLinkLabel:{defaultValue:null,description:"",name:"spotlightLinkLabel",required:!0,type:{name:"string"}}}}}catch{}const D=()=>e.jsx(r,{paddingTop:"small",children:e.jsx(r.Cell,{span:{narrow:4,medium:8,wide:10},start:{narrow:1,medium:1,wide:2},children:e.jsxs(m,{children:[e.jsx(m.Link,{href:"#",children:"Home"}),e.jsx(m.Link,{href:"#",children:"Nieuws"})]})})}),c=({heading:n,imageSrc:s})=>e.jsxs("header",{children:[e.jsx(r,{paddingBottom:"medium",children:e.jsxs(r.Cell,{span:{narrow:4,medium:8,wide:10},start:{narrow:1,medium:1,wide:2},children:[e.jsx(i,{className:"ams-mb--sm",children:n}),e.jsx(t,{size:"small",children:"7 juni 2024"})]})}),e.jsx(y,{children:e.jsx(_,{ratio:"2x-wide",children:e.jsx(I,{alt:"",loading:"lazy",src:s})})})]});try{c.displayName="ArticleHeader",c.__docgenInfo={description:"",displayName:"ArticleHeader",props:{heading:{defaultValue:null,description:"",name:"heading",required:!0,type:{name:"string"}},imageSrc:{defaultValue:null,description:"",name:"imageSrc",required:!0,type:{name:"string"}}}}}catch{}const p=({heading:n,imageSrc:s,lead:o,paragraph1:l,spotlightHeading:b,spotlightLinkLabel:v})=>e.jsxs(e.Fragment,{children:[e.jsx(D,{}),e.jsxs("main",{id:"main",children:[e.jsx(c,{heading:n,imageSrc:s}),e.jsx(u,{lead:o,paragraph1:l,spotlightHeading:b,spotlightLinkLabel:v})]})]});try{p.displayName="ArticlePage",p.__docgenInfo={description:"",displayName:"ArticlePage",props:{heading:{defaultValue:null,description:"",name:"heading",required:!0,type:{name:"string"}},imageSrc:{defaultValue:null,description:"",name:"imageSrc",required:!0,type:{name:"string"}},lead:{defaultValue:null,description:"",name:"lead",required:!0,type:{name:"string"}},paragraph1:{defaultValue:null,description:"",name:"paragraph1",required:!0,type:{name:"string"}},spotlightHeading:{defaultValue:null,description:"",name:"spotlightHeading",required:!0,type:{name:"string"}},spotlightLinkLabel:{defaultValue:null,description:"",name:"spotlightLinkLabel",required:!0,type:{name:"string"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */var x;const V={...A,title:"Pages/Amsterdam.nl/Article Page",component:p,args:{heading:"Ontvang uw paspoort of ID-kaart in de zomer gratis thuis",imageSrc:(x=L.args)==null?void 0:x.src,lead:"Niet meer naar het Stadsloket, maar thuis of op het werk uw nieuwe paspoort ontvangen. In juni en juli kan dat. Deze zomer bezorgt de gemeente reisdocumenten gratis aan huis. We doen dat om de drukte in de Stadsloketten te verminderen. En u hoeft maar 1 keer naar het Stadsloket.",paragraph1:"Van maandag 10 juni tot en met zaterdag 27 juli bezorgt de gemeente Amsterdam uw paspoort of ID-kaart gratis bij u thuis of op het werk. U moet wel naar het Stadsloket om uw reisdocument aan te vragen. Lees hier hoe het werkt.",spotlightHeading:"Vraag een paspoort of ID-kaart aan",spotlightLinkLabel:"Vraag nu een paspoort of ID-kaart aan"}},d={};var w,k,f;d.parameters={...d.parameters,docs:{...(w=d.parameters)==null?void 0:w.docs,source:{originalSource:"{}",...(f=(k=d.parameters)==null?void 0:k.docs)==null?void 0:f.source}}};const N=["Default"],C=Object.freeze(Object.defineProperty({__proto__:null,Default:d,__namedExportsOrder:N,default:V},Symbol.toStringTag,{value:"Module"}));export{C as A}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/AspectRatio-DxP_kpbd.js b/demo-DES-720-add-issue-and-PR-templates/assets/AspectRatio-DxP_kpbd.js new file mode 100644 index 0000000000..afdc8ae125 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/AspectRatio-DxP_kpbd.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-X2b_N9AH.js";import{c as p}from"./clsx-B-dksMZM.js";import{r as l}from"./index-uCp2LrAq.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-720-add-issue-and-PR-templates/assets/AspectRatio.docs-DR4CtSL9.js b/demo-DES-720-add-issue-and-PR-templates/assets/AspectRatio.docs-DR4CtSL9.js new file mode 100644 index 0000000000..d66be4c035 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/AspectRatio.docs-DR4CtSL9.js @@ -0,0 +1,42 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as i}from"./index-CRbi4mQH.js";import{M as a,d as r,P as l,e as d,f as o}from"./index-CQzUsdl8.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-BZULw34x.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./AspectRatio-DxP_kpbd.js";import"./clsx-B-dksMZM.js";import"./Image-Bf5zYcta.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\` | 16:5 | +| \`x-wide\` | 16:9 | +| \`wide\` | 4:3 | +| \`square\` | 1:1 | +| \`tall\` | 3:4 | +| \`x-tall\` | 9:16 | + +## Guidelines + +- Use this component to constrain images, videos and other elements to one of the available aspect ratios. +`;/*@license CC0-1.0*/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-720-add-issue-and-PR-templates/assets/AspectRatio.stories-BZULw34x.js b/demo-DES-720-add-issue-and-PR-templates/assets/AspectRatio.stories-BZULw34x.js new file mode 100644 index 0000000000..4e931cddd2 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/AspectRatio.stories-BZULw34x.js @@ -0,0 +1,33 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{A as C}from"./AspectRatio-DxP_kpbd.js";import{I as O}from"./Image-Bf5zYcta.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/1152/360"},"x-wide":{image:"https://picsum.photos/640/360"},wide:{image:"https://picsum.photos/480/360"},square:{image:"https://picsum.photos/360/360"},tall:{image:"https://picsum.photos/360/480"},"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-720-add-issue-and-PR-templates/assets/Avatar.docs-CvC-iFvP.js b/demo-DES-720-add-issue-and-PR-templates/assets/Avatar.docs-CvC-iFvP.js new file mode 100644 index 0000000000..25fe9cebaf --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Avatar.docs-CvC-iFvP.js @@ -0,0 +1,32 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as a}from"./index-CRbi4mQH.js";import{M as i,d as s,P as c,e as p,f as t}from"./index-CQzUsdl8.js";import{A as l,W as m,F as d,I as h}from"./Avatar.stories-BAp3G02i.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-Dr6r5gIo.js";import"./clsx-B-dksMZM.js";import"./Image-Bf5zYcta.js";import"./Icon-j44OzEOs.js";import"./Header-B4IFHnsE.js";import"./Logo-B6EXimfo.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./PageMenu-C-9UIlX6.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. +`;/*@license CC0-1.0*/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 R(e={}){const{wrapper:r}={...a(),...e.components};return r?n.jsx(r,{...e,children:n.jsx(o,{...e})}):o(e)}export{R as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Avatar.stories-BAp3G02i.js b/demo-DES-720-add-issue-and-PR-templates/assets/Avatar.stories-BAp3G02i.js new file mode 100644 index 0000000000..bc98bfa5fb --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Avatar.stories-BAp3G02i.js @@ -0,0 +1,24 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{q as A,e as L}from"./index.esm-Dr6r5gIo.js";import{c as M}from"./clsx-B-dksMZM.js";import{r as w}from"./index-uCp2LrAq.js";import{I as q}from"./Image-Bf5zYcta.js";import{I as C}from"./Icon-j44OzEOs.js";import{H as D}from"./Header-B4IFHnsE.js";import{P as c}from"./PageMenu-C-9UIlX6.js";const E=({imageSrc:a,initials:r})=>a?e.jsx(q,{src:a,alt:""}):r.length?e.jsx("span",{"aria-hidden":!0,children:r}):e.jsx(C,{svg:A,size:"level-6"}),o=w.forwardRef(({label:a,imageSrc:r,className:y,color:j="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--${j}`,r&&"ams-avatar--has-image",y),children:[e.jsx("span",{className:"ams-visually-hidden",children:I}),e.jsx(E,{imageSrc:r,initials:i})]})});o.displayName="Avatar";try{o.displayName="Avatar",o.__docgenInfo={description:"",displayName:"Avatar",props:{color:{defaultValue:{value:"blue"},description:"The background colour.",name:"color",required:!1,type:{name:"enum",value:[{value:'"black"'},{value:'"blue"'},{value:'"dark-green"'},{value:'"green"'},{value:'"grey-1"'},{value:'"grey-2"'},{value:'"grey-3"'},{value:'"light-blue"'},{value:'"magenta"'},{value:'"orange"'},{value:'"purple"'},{value:'"red"'},{value:'"white"'},{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 H={title:"Components/Feedback/Avatar",component:o,args:{label:"DS",imageSrc:""}},s={},n={args:{label:"PS",imageSrc:"https://i.pravatar.cc/128"}},t={args:{imageSrc:void 0,label:""}},l={args:{label:"DS"},render:a=>e.jsx(D,{links:e.jsxs(c,{alignEnd:!0,children:[e.jsx(c.Link,{href:"#",children:"Contact"}),e.jsx(c.Link,{href:"#",icon:L,children:"Zoeken"}),e.jsx("li",{children:e.jsx(o,{...a})})]})})};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,v;n.parameters={...n.parameters,docs:{...(p=n.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + label: 'PS', + imageSrc: 'https://i.pravatar.cc/128' + } +}`,...(v=(g=n.parameters)==null?void 0:g.docs)==null?void 0:v.source}}};var h,f,b;t.parameters={...t.parameters,docs:{...(h=t.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + imageSrc: undefined, + label: '' + } +}`,...(b=(f=t.parameters)==null?void 0:f.docs)==null?void 0:b.source}}};var S,x,k;l.parameters={...l.parameters,docs:{...(S=l.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + label: 'DS' + }, + render: args =>
+ Contact + + Zoeken + +
  • + +
    • + } /> +}`,...(k=(x=l.parameters)==null?void 0:x.docs)==null?void 0:k.source}}};const N=["Default","WithPicture","FallbackIcon","InAHeader"],$=Object.freeze(Object.defineProperty({__proto__:null,Default:s,FallbackIcon:t,InAHeader:l,WithPicture:n,__namedExportsOrder:N,default:H},Symbol.toStringTag,{value:"Module"}));export{$ as A,t as F,l as I,n as W}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Badge-BnLGL1Dc.js b/demo-DES-720-add-issue-and-PR-templates/assets/Badge-BnLGL1Dc.js new file mode 100644 index 0000000000..b9ab4fce8b --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Badge-BnLGL1Dc.js @@ -0,0 +1 @@ +import{j as t}from"./jsx-runtime-X2b_N9AH.js";import{c as n}from"./clsx-B-dksMZM.js";import{r as d}from"./index-uCp2LrAq.js";const e=d.forwardRef(({label:a,className:r,color:l="dark-green",...u},o)=>t.jsx("span",{...u,ref:o,className:n("ams-badge",`ams-badge--${l}`,r),children:a}));e.displayName="Badge";try{e.displayName="Badge",e.__docgenInfo={description:"",displayName:"Badge",props:{color:{defaultValue:{value:"dark-green"},description:"The background colour.",name:"color",required:!1,type:{name:"enum",value:[{value:'"black"'},{value:'"blue"'},{value:'"dark-green"'},{value:'"green"'},{value:'"grey-1"'},{value:'"grey-2"'},{value:'"grey-3"'},{value:'"light-blue"'},{value:'"magenta"'},{value:'"orange"'},{value:'"purple"'},{value:'"red"'},{value:'"white"'},{value:'"yellow"'}]}},label:{defaultValue:null,description:"The text content.",name:"label",required:!0,type:{name:"string | number"}}}}}catch{}export{e as B}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Badge.docs-yiwCwcJ3.js b/demo-DES-720-add-issue-and-PR-templates/assets/Badge.docs-yiwCwcJ3.js new file mode 100644 index 0000000000..46a787fc59 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Badge.docs-yiwCwcJ3.js @@ -0,0 +1,20 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as r}from"./index-CRbi4mQH.js";import{M as i,d as s,P as a,e as c}from"./index-CQzUsdl8.js";import{B as m}from"./Badge.stories-BJ2IQxbO.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Badge-BnLGL1Dc.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. +`;/*@license CC0-1.0*/function e(o){const t={h2:"h2",h3:"h3",...r(),...o.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(i,{of:m}),` +`,n.jsx(s,{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 y(o={}){const{wrapper:t}={...r(),...o.components};return t?n.jsx(t,{...o,children:n.jsx(e,{...o})}):e(o)}export{y as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Badge.stories-BJ2IQxbO.js b/demo-DES-720-add-issue-and-PR-templates/assets/Badge.stories-BJ2IQxbO.js new file mode 100644 index 0000000000..2b79540d1c --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Badge.stories-BJ2IQxbO.js @@ -0,0 +1,4 @@ +import{B as a}from"./Badge-BnLGL1Dc.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const s={title:"Components/Feedback/Badge",component:a,args:{label:"Tip"}},e={};var o,t,r;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(r=(t=e.parameters)==null?void 0:t.docs)==null?void 0:r.source}}};const c=["Default"],d=Object.freeze(Object.defineProperty({__proto__:null,Default:e,__namedExportsOrder:c,default:s},Symbol.toStringTag,{value:"Module"}));export{d as B}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Blockquote-7VFIi5C-.js b/demo-DES-720-add-issue-and-PR-templates/assets/Blockquote-7VFIi5C-.js new file mode 100644 index 0000000000..46003e13b5 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Blockquote-7VFIi5C-.js @@ -0,0 +1 @@ +import{j as l}from"./jsx-runtime-X2b_N9AH.js";import{c}from"./clsx-B-dksMZM.js";import{r as i}from"./index-uCp2LrAq.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-720-add-issue-and-PR-templates/assets/Blockquote.docs-CP6tperU.js b/demo-DES-720-add-issue-and-PR-templates/assets/Blockquote.docs-CP6tperU.js new file mode 100644 index 0000000000..530868fbb7 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Blockquote.docs-CP6tperU.js @@ -0,0 +1,27 @@ +import{j as t}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as r}from"./index-CRbi4mQH.js";import{M as s,d as i,P as a,e as m,f as c}from"./index-CQzUsdl8.js";import{B as h,I as l}from"./Blockquote.stories-Bb9KGB2j.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./decorators-CMqafKrE.js";import"./exampleContent-BEbrefRz.js";import"./Blockquote-7VFIi5C-.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. +`;/*@license CC0-1.0*/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-720-add-issue-and-PR-templates/assets/Blockquote.stories-Bb9KGB2j.js b/demo-DES-720-add-issue-and-PR-templates/assets/Blockquote.stories-Bb9KGB2j.js new file mode 100644 index 0000000000..44adebfb47 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Blockquote.stories-Bb9KGB2j.js @@ -0,0 +1,8 @@ +import{i as l}from"./decorators-CMqafKrE.js";import{e as i}from"./exampleContent-BEbrefRz.js";import{B as m}from"./Blockquote-7VFIi5C-.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-720-add-issue-and-PR-templates/assets/Breadcrumb.docs-22ZGmPID.js b/demo-DES-720-add-issue-and-PR-templates/assets/Breadcrumb.docs-22ZGmPID.js new file mode 100644 index 0000000000..aa4c806cac --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Breadcrumb.docs-22ZGmPID.js @@ -0,0 +1,29 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as i}from"./index-CRbi4mQH.js";import{M as a,d as s,P as o}from"./index-CQzUsdl8.js";import{B as c}from"./Breadcrumb.stories-BqSzPlAw.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.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. +`;/*@license CC0-1.0*/function r(t){const e={h2:"h2",li:"li",ul:"ul",...i(),...t.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(a,{of:c}),` +`,n.jsx(s,{children:m}),` +`,n.jsx(o,{}),` +`,n.jsx(e.h2,{id:"usage",children:"Usage"}),` +`,n.jsxs(e.ul,{children:[` +`,n.jsx(e.li,{children:"A breadcrumb should not display more than 8 items."}),` +`]})]})}function C(t={}){const{wrapper:e}={...i(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(r,{...t})}):r(t)}export{C as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Breadcrumb.stories-BqSzPlAw.js b/demo-DES-720-add-issue-and-PR-templates/assets/Breadcrumb.stories-BqSzPlAw.js new file mode 100644 index 0000000000..88b0c58e03 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Breadcrumb.stories-BqSzPlAw.js @@ -0,0 +1,13 @@ +import{j as r}from"./jsx-runtime-X2b_N9AH.js";import{c as t}from"./clsx-B-dksMZM.js";import{r as l}from"./index-uCp2LrAq.js";const u=l.forwardRef(({children:a,className:n,...s},d)=>r.jsx("li",{className:"ams-breadcrumb__item",children:r.jsx("a",{...s,className:t("ams-breadcrumb__link",n),ref:d,children:a})}));u.displayName="Breadcrumb.Link";try{Breadcrumb.Link.displayName="Breadcrumb.Link",Breadcrumb.Link.__docgenInfo={description:"",displayName:"Breadcrumb.Link",props:{}}}catch{}const b=l.forwardRef(({children:a,className:n,...s},d)=>r.jsx("nav",{...s,className:t("ams-breadcrumb",n),ref:d,children:r.jsx("ol",{className:"ams-breadcrumb__list",children:a})}));b.displayName="Breadcrumb";const e=Object.assign(b,{Link:u});try{e.displayName="Breadcrumb",e.__docgenInfo={description:"",displayName:"Breadcrumb",props:{}}}catch{}const p={title:"Components/Navigation/Breadcrumb",component:e},c={args:{children:[r.jsx(e.Link,{href:"#",children:"Home"},1),r.jsx(e.Link,{href:"#",children:"Afval"},2),r.jsx(e.Link,{href:"#",children:"Bedrijfsafval"},3),r.jsx(e.Link,{href:"#",children:"Recyclepunten voor bedrijven"},4)]}};var o,i,m;c.parameters={...c.parameters,docs:{...(o=c.parameters)==null?void 0:o.docs,source:{originalSource:`{ + args: { + children: [ + Home + , + Afval + , + Bedrijfsafval + , + Recyclepunten voor bedrijven + ] + } +}`,...(m=(i=c.parameters)==null?void 0:i.docs)==null?void 0:m.source}}};const f=["Default"],L=Object.freeze(Object.defineProperty({__proto__:null,Default:c,__namedExportsOrder:f,default:p},Symbol.toStringTag,{value:"Module"}));export{L as B}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Button-B8AXuJtG.js b/demo-DES-720-add-issue-and-PR-templates/assets/Button-B8AXuJtG.js new file mode 100644 index 0000000000..d88708431f --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Button-B8AXuJtG.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-X2b_N9AH.js";import{c as m}from"./clsx-B-dksMZM.js";import{r as u}from"./index-uCp2LrAq.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-720-add-issue-and-PR-templates/assets/Button.docs-Bin_vLCi.js b/demo-DES-720-add-issue-and-PR-templates/assets/Button.docs-Bin_vLCi.js new file mode 100644 index 0000000000..4ffd97f9bb --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Button.docs-Bin_vLCi.js @@ -0,0 +1,58 @@ +import{j as t}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as s}from"./index-CRbi4mQH.js";import{M as a,d as i,P as c,e as l,f as o}from"./index-CQzUsdl8.js";import{B as h,P as u,S as d,T as p,W as m,a as b}from"./Button.stories-B0h6az-d.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-Dr6r5gIo.js";import"./Button-B8AXuJtG.js";import"./clsx-B-dksMZM.js";import"./Icon-j44OzEOs.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) +`;/*@license CC0-1.0*/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. +This is fine.`}),` +`,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-720-add-issue-and-PR-templates/assets/Button.stories-B0h6az-d.js b/demo-DES-720-add-issue-and-PR-templates/assets/Button.stories-B0h6az-d.js new file mode 100644 index 0000000000..5ca5a87f85 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Button.stories-B0h6az-d.js @@ -0,0 +1,29 @@ +import{j as t}from"./jsx-runtime-X2b_N9AH.js";import{S as T}from"./index.esm-Dr6r5gIo.js";import{B}from"./Button-B8AXuJtG.js";import{I as j}from"./Icon-j44OzEOs.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-720-add-issue-and-PR-templates/assets/Card-CI5pmY0Y.js b/demo-DES-720-add-issue-and-PR-templates/assets/Card-CI5pmY0Y.js new file mode 100644 index 0000000000..ecc9fcf1d2 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Card-CI5pmY0Y.js @@ -0,0 +1 @@ +import{j as o}from"./jsx-runtime-X2b_N9AH.js";import{c as s}from"./clsx-B-dksMZM.js";import{r as i}from"./index-uCp2LrAq.js";import{P as _}from"./Paragraph-DpVlyIEJ.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-720-add-issue-and-PR-templates/assets/Card.docs-DSO8zuK6.js b/demo-DES-720-add-issue-and-PR-templates/assets/Card.docs-DSO8zuK6.js new file mode 100644 index 0000000000..98ac6881db --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Card.docs-DSO8zuK6.js @@ -0,0 +1,40 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as r,d as s,P as c,f as a}from"./index-CQzUsdl8.js";import{C as d,W as h,a as l}from"./Card.stories-CnbrXC7o.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./exampleContent-BEbrefRz.js";import"./Card-CI5pmY0Y.js";import"./clsx-B-dksMZM.js";import"./Paragraph-DpVlyIEJ.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./AspectRatio-DxP_kpbd.js";import"./Image-Bf5zYcta.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. +`;/*@license CC0-1.0*/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 heading, a short term like a category or type of information. +Wrap the tagline and the heading in a `,e.jsx(n.code,{children:"Card.HeadingGroup"}),`. +This ensures screen readers first read the heading and then the tagline.`]}),` +`,e.jsx(a,{of:h}),` +`,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:l})]})}function S(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{S as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Card.stories-CnbrXC7o.js b/demo-DES-720-add-issue-and-PR-templates/assets/Card.stories-CnbrXC7o.js new file mode 100644 index 0000000000..d5c044062b --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Card.stories-CnbrXC7o.js @@ -0,0 +1,31 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{a as x}from"./exampleContent-BEbrefRz.js";import{C as r}from"./Card-CI5pmY0Y.js";import{H as i}from"./Heading-CGpdaMNv.js";import{P as s}from"./Paragraph-DpVlyIEJ.js";import{A as f}from"./AspectRatio-DxP_kpbd.js";import{I as w}from"./Image-Bf5zYcta.js";const C=new Intl.DateTimeFormat("nl",{day:"numeric",month:"long",year:"numeric"}),y=C.format(Date.now()),t=x(),H={title:"Components/Navigation/Card",component:r,decorators:[j=>e.jsx("div",{style:{maxWidth:"24rem"},children:e.jsx(j,{})})]},a={args:{children:[e.jsx(i,{size:"level-4",children:e.jsx(r.Link,{href:"/",children:t.heading})},1),e.jsx(s,{children:t.description},2)]}},n={args:{children:[e.jsx(r.HeadingGroup,{tagline:"Dossier",children:e.jsx(i,{size:"level-4",children:e.jsx(r.Link,{href:"/",children:"Monitor Attracties MRA"})})},1),e.jsx(s,{children:"Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam."},2)]}},o={args:{children:[e.jsx(f,{ratio:"wide",children:e.jsx(w,{alt:"",src:"https://picsum.photos/480/360"})},1),e.jsx(r.HeadingGroup,{tagline:"Nieuws",children:e.jsx(i,{size:"level-4",children:e.jsx(r.Link,{href:"/",children:"Nederlands eerste houten woonwijk komt in Zuidoost"})})},2),e.jsx(s,{children:"We bouwen een levendige, groene en duurzame woonbuurt tussen de Gooiseweg en het Nelson Mandelapark."},3),e.jsx(s,{size:"small",children:y},4)]}};var d,l,c;a.parameters={...a.parameters,docs:{...(d=a.parameters)==null?void 0:d.docs,source:{originalSource:`{ + args: { + children: [ + {topTask.heading} + , {topTask.description}] + } +}`,...(c=(l=a.parameters)==null?void 0:l.docs)==null?void 0:c.source}}};var p,m,g;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. + ] + } +}`,...(g=(m=n.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var h,u,k;o.parameters={...o.parameters,docs:{...(h=o.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + children: [ + + , + + Nederlands eerste houten woonwijk komt in Zuidoost + + , + We bouwen een levendige, groene en duurzame woonbuurt tussen de Gooiseweg en het Nelson Mandelapark. + , + {today} + ] + } +}`,...(k=(u=o.parameters)==null?void 0:u.docs)==null?void 0:k.source}}};const v=["Default","WithTagline","WithImage"],W=Object.freeze(Object.defineProperty({__proto__:null,Default:a,WithImage:o,WithTagline:n,__namedExportsOrder:v,default:H},Symbol.toStringTag,{value:"Module"}));export{W as C,n as W,o as a}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Checkbox-DRBoUL7U.js b/demo-DES-720-add-issue-and-PR-templates/assets/Checkbox-DRBoUL7U.js new file mode 100644 index 0000000000..e834f20c65 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Checkbox-DRBoUL7U.js @@ -0,0 +1 @@ +import{j as r}from"./jsx-runtime-X2b_N9AH.js";import{c as m}from"./clsx-B-dksMZM.js";import{r as a}from"./index-uCp2LrAq.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,"aria-invalid":l||void 0,className:"ams-checkbox__input",id:i,ref:e,type:"checkbox"}),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-720-add-issue-and-PR-templates/assets/Checkbox.docs-C0isCFSP.js b/demo-DES-720-add-issue-and-PR-templates/assets/Checkbox.docs-C0isCFSP.js new file mode 100644 index 0000000000..165da89b0d --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Checkbox.docs-C0isCFSP.js @@ -0,0 +1,39 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as s}from"./index-CRbi4mQH.js";import{M as i,d as a,P as r,e as l,f as c}from"./index-CQzUsdl8.js";import{C as h,L as d}from"./Checkbox.stories-DbDJSR2i.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Checkbox-DRBoUL7U.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. +`;/*@license CC0-1.0*/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-720-add-issue-and-PR-templates/assets/Checkbox.stories-DbDJSR2i.js b/demo-DES-720-add-issue-and-PR-templates/assets/Checkbox.stories-DbDJSR2i.js new file mode 100644 index 0000000000..bbd7be5b69 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Checkbox.stories-DbDJSR2i.js @@ -0,0 +1,5 @@ +import{j as u}from"./jsx-runtime-X2b_N9AH.js";import{C as t}from"./Checkbox-DRBoUL7U.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-720-add-issue-and-PR-templates/assets/Color-PRSJMWNM-D55chzAC.js b/demo-DES-720-add-issue-and-PR-templates/assets/Color-PRSJMWNM-D55chzAC.js new file mode 100644 index 0000000000..f54b18e5dd --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Color-PRSJMWNM-D55chzAC.js @@ -0,0 +1 @@ +import{n as $,h as ue,i as Me,F as Ce,j as $e,k as Oe}from"./index-CQzUsdl8.js";import{R as h,r as m}from"./index-uCp2LrAq.js";import{g as fe}from"./_commonjsHelpers-BosuxZz1.js";import{_ as Ne,i as J,a as Ie}from"./index-B8K4vdXH.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-DrFu-skq.js";function N(){return(N=Object.assign||function(e){for(var t=1;t=0||(o[n]=e[n]);return o}function K(e){var t=m.useRef(e),n=m.useRef(function(r){t.current&&t.current(r)});return t.current=e,n.current}var R=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,s.current)):M(!1)},j=function(){return M(!1)};function M(p){var b=i.current,w=V(o.current),E=p?w.addEventListener:w.removeEventListener;E(b?"touchmove":"mousemove",x),E(b?"touchend":"mouseup",j)}return[function(p){var b=p.nativeEvent,w=o.current;if(w&&(re(b),!function(k,O){return O&&!F(k)}(b,i.current)&&w)){if(F(b)){i.current=!0;var E=b.changedTouches||[];E.length&&(s.current=E[0].identifier)}w.focus(),a(ne(w,b,s.current)),M(!0)}},function(p){var b=p.which||p.keyCode;b<37||b>40||(p.preventDefault(),l({left:b===39?.05:b===37?-.05:0,top:b===40?.05:b===38?-.05:0}))},M]},[l,a]),d=c[0],f=c[1],g=c[2];return m.useEffect(function(){return g},[g]),h.createElement("div",N({},r,{onTouchStart:d,onMouseDown:d,className:"react-colorful__interactive",ref:o,onKeyDown:f,tabIndex:0,role:"slider"}))}),H=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=H(["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}},je=function(e,t){return t===void 0&&(t="deg"),Number(e)*(Se[t]||1)},Te=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:je(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+"%)"},B=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),l=r*(1-n),s=r*(1-(t-a)*n),i=r*(1-(1-t+a)*n),c=a%6;return{r:y(255*[r,s,l,l,i,r][c]),g:y(255*[i,r,r,s,l,l][c]),b:y(255*[l,l,i,r,r,s][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}},P=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?P(y(255*o)):"";return"#"+P(t)+P(n)+P(r)+a},ge=function(e){var t=e.r,n=e.g,r=e.b,o=e.a,a=Math.max(t,n,r),l=a-Math.min(t,n,r),s=l?a===t?(n-r)/l:a===n?2+(r-t)/l:4+(t-n)/l:0;return{h:y(60*(s<0?s+6:s)),s:y(a?l/a*100:0),v:y(a/255*100),a:o}},me=h.memo(function(e){var t=e.hue,n=e.onChange,r=H(["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:R(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:R(t.s+100*o.left,0,100),v:R(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=m.useState(function(){return e.toHsva(t)}),a=o[0],l=o[1],s=m.useRef({color:t,hsva:a});m.useEffect(function(){if(!e.equal(t,s.current.color)){var c=e.toHsva(t);s.current={hsva:c,color:t},l(c)}},[t,e]),m.useEffect(function(){var c;ve(a,s.current.hsva)||e.equal(c=e.fromHsva(a),s.current.color)||(s.current={hsva:a,color:c},r(c))},[a,e,r]);var i=m.useCallback(function(c){l(function(d){return Object.assign({},d,c)})},[]);return[a,i]}var qe=typeof window<"u"?m.useLayoutEffect:m.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,l=Q(e,["className","colorModel","color","onChange"]),s=m.useRef(null);xe(s);var i=ye(n,o,a),c=i[0],d=i[1],f=H(["react-colorful",t]);return h.createElement("div",N({},l,{ref:s,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,N({},e,{colorModel:Xe}))},Ke=function(e){var t=e.className,n=e.hsva,r=e.onChange,o={backgroundImage:"linear-gradient(90deg, "+B(Object.assign({},n,{a:0}))+", "+B(Object.assign({},n,{a:1}))+")"},a=H(["react-colorful__alpha",t]),l=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(s){r({a:s.left})},onKey:function(s){r({a:R(n.a+s.left)})},"aria-label":"Alpha","aria-valuetext":l+"%","aria-valuenow":l,"aria-valuemin":"0","aria-valuemax":"100"},h.createElement(ee,{className:"react-colorful__alpha-pointer",left:n.a,color:B(n)})))},we=function(e){var t=e.className,n=e.colorModel,r=e.color,o=r===void 0?n.defaultColor:r,a=e.onChange,l=Q(e,["className","colorModel","color","onChange"]),s=m.useRef(null);xe(s);var i=ye(n,o,a),c=i[0],d=i[1],f=H(["react-colorful",t]);return h.createElement("div",N({},l,{ref:s,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:Te,fromHsva:B,equal:pe},Ae=function(e){return h.createElement(we,N({},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,N({},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 z=Ye,ke={};for(const e of Object.keys(z))ke[z[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),l=a-o;let s,i;a===o?s=0:t===a?s=(n-r)/l:n===a?s=2+(r-t)/l:r===a&&(s=4+(t-n)/l),s=Math.min(s*60,360),s<0&&(s+=360);const c=(o+a)/2;return a===o?i=0:c<=.5?i=l/(a+o):i=l/(2-a-o),[s,i*100,c*100]};u.rgb.hsv=function(e){let t,n,r,o,a;const l=e[0]/255,s=e[1]/255,i=e[2]/255,c=Math.max(l,s,i),d=c-Math.min(l,s,i),f=function(g){return(c-g)/6/d+1/2};return d===0?(o=0,a=0):(a=d/c,t=f(l),n=f(s),r=f(i),l===c?o=r-n:s===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,l=(1-n-o)/(1-o)||0,s=(1-r-o)/(1-o)||0;return[a*100,l*100,s*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(z)){const a=z[o],l=Je(e,a);l.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,l=t*.0193+n*.1192+r*.9505;return[o*100,a*100,l*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,l=500*(n-r),s=200*(r-o);return[a,l,s]};u.hsl.rgb=function(e){const t=e[0]/360,n=e[1]/100,r=e[2]/100;let o,a,l;if(n===0)return l=r*255,[l,l,l];r<.5?o=r*(1+n):o=r+n-r*n;const s=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?l=s+(o-s)*6*a:2*a<1?l=o:3*a<2?l=s+(o-s)*(2/3-a)*6:l=s,i[c]=l*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 l=(r+n)/2,s=r===0?2*o/(a+o):2*n/(r+n);return[t,s*100,l*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),l=255*r*(1-n),s=255*r*(1-n*a),i=255*r*(1-n*(1-a));switch(r*=255,o){case 0:return[r,i,l];case 1:return[s,r,l];case 2:return[l,r,i];case 3:return[l,s,r];case 4:return[i,l,r];case 5:return[r,l,s]}};u.hsv.hsl=function(e){const t=e[0],n=e[1]/100,r=e[2]/100,o=Math.max(r,.01);let a,l;l=(2-n)*r;const s=(2-n)*o;return a=n*o,a/=s<=1?s:2-s,a=a||0,l/=2,[t,a*100,l*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 l=Math.floor(6*t),s=1-r;a=6*t-l,l&1&&(a=1-a);const i=n+a*(s-n);let c,d,f;switch(l){default:case 6:case 0:c=s,d=i,f=n;break;case 1:c=i,d=s,f=n;break;case 2:c=n,d=s,f=i;break;case 3:c=n,d=i,f=s;break;case 4:c=i,d=n,f=s;break;case 5:c=s,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),l=1-Math.min(1,n*(1-o)+o),s=1-Math.min(1,r*(1-o)+o);return[a*255,l*255,s*255]};u.xyz.rgb=function(e){const t=e[0]/100,n=e[1]/100,r=e[2]/100;let o,a,l;return o=t*3.2406+n*-1.5372+r*-.4986,a=t*-.9689+n*1.8758+r*.0415,l=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,l=l>.0031308?1.055*l**(1/2.4)-.055:l*12.92,o=Math.min(Math.max(0,o),1),a=Math.min(Math.max(0,a),1),l=Math.min(Math.max(0,l),1),[o*255,a*255,l*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),l=200*(n-r);return[o,a,l]};u.lab.xyz=function(e){const t=e[0],n=e[1],r=e[2];let o,a,l;a=(t+16)/116,o=n/500+a,l=a-r/200;const s=a**3,i=o**3,c=l**3;return a=s>.008856?s:(a-16/116)/7.787,o=i>.008856?i:(o-16/116)/7.787,l=c>.008856?c:(l-16/116)/7.787,o*=95.047,a*=100,l*=108.883,[o,a,l]};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 l=Math.sqrt(n*n+r*r);return[t,l,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),l=n*Math.sin(o);return[t,a,l]};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 l=30+(Math.round(o/255)<<2|Math.round(r/255)<<1|Math.round(n/255));return a===2&&(l+=60),l};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(s=>s+s).join(""));const r=parseInt(n,16),o=r>>16&255,a=r>>8&255,l=r&255;return[o,a,l]};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),l=o-a;let s,i;return l<1?s=a/(1-l):s=0,l<=0?i=0:o===t?i=(n-r)/l%6:o===n?i=2+(r-t)/l:i=4+(t-n)/l,i/=6,i%=1,[i*360,l*100,s*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,l=a%1,s=1-l;let i=0;switch(Math.floor(a)){case 0:o[0]=1,o[1]=l,o[2]=0;break;case 1:o[0]=s,o[1]=1,o[2]=0;break;case 2:o[0]=0,o[1]=1,o[2]=l;break;case 3:o[0]=0,o[1]=s,o[2]=1;break;case 4:o[0]=l,o[1]=0,o[2]=1;break;default:o[0]=1,o[1]=0,o[2]=s}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 W=_e;function Qe(){const e={},t=Object.keys(W);for(let n=t.length,r=0;r1&&(n=r),e(n))};return"conversion"in e&&(t.conversion=e.conversion),t}function lt(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,l=0;l{I[e]={},Object.defineProperty(I[e],"channels",{value:U[e].channels}),Object.defineProperty(I[e],"labels",{value:U[e].labels});const t=rt(e);Object.keys(t).forEach(r=>{const o=t[r];I[e][r]=lt(o),I[e][r].raw=at(o)})});var st=I;const _=fe(st);var it=Ne,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,le=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 le;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)?le:+e}var Mt=Et,Ct=J,D=ut,se=Mt,$t="Expected a function",Ot=Math.max,Nt=Math.min;function It(e,t,n){var r,o,a,l,s,i,c=0,d=!1,f=!1,g=!0;if(typeof e!="function")throw new TypeError($t);t=se(t)||0,Ct(n)&&(d=!!n.leading,f="maxWait"in n,a=f?Ot(se(n.maxWait)||0,t):a,g="trailing"in n?!!n.trailing:g);function x(v){var C=r,T=o;return r=o=void 0,c=v,l=e.apply(T,C),l}function j(v){return c=v,s=setTimeout(b,t),d?x(v):l}function M(v){var C=v-i,T=v-c,te=t-C;return f?Nt(te,a-T):te}function p(v){var C=v-i,T=v-c;return i===void 0||C>=t||C<0||f&&T>=a}function b(){var v=D();if(p(v))return w(v);s=setTimeout(b,M(v))}function w(v){return s=void 0,g&&r?x(v):(r=o=void 0,l)}function E(){s!==void 0&&clearTimeout(s),c=0,r=i=o=s=void 0}function k(){return s===void 0?l:w(D())}function O(){var v=D(),C=p(v);if(r=arguments,o=this,i=v,C){if(s===void 0)return j(i);if(f)return clearTimeout(s),s=setTimeout(b,t),x(i)}return s===void 0&&(s=setTimeout(b,t)),l}return O.cancel=E,O.flush=k,O}var St=It,Rt=St,jt=J,Tt="Expected a function";function Ft(e,t,n){var r=!0,o=!0;if(typeof e!="function")throw new TypeError(Tt);return jt(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=$.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),Lt=$(ue)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),qt=$.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=$(Me)(({theme:e})=>({fontFamily:e.typography.fonts.base})),Wt=$.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Xt=$.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,style:t,...n})=>{let r=`linear-gradient(${e}, ${e}), ${Dt}, linear-gradient(#fff, #fff)`;return h.createElement(Xt,{...n,style:{...t,backgroundImage:r}})},Kt=$(Ce.Input)(({theme:e,readOnly:t})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:e.typography.fonts.base})),Vt=$($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||{}),L=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},q={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)},S=e=>{if(!e)return;let t=!0;if(Gt.test(e)){let[l,s,i,c]=ce(e),[d,f,g]=_.rgb.hsl([l,s,i])||[0,0,0];return{valid:t,value:e,keyword:_.rgb.keyword([l,s,i]),colorSpace:"rgb",rgb:e,hsl:`hsla(${d}, ${f}%, ${g}%, ${c})`,hex:`#${_.rgb.hex([l,s,i]).toLowerCase()}`}}if(Ut.test(e)){let[l,s,i,c]=ce(e),[d,f,g]=_.hsl.rgb([l,s,i])||[0,0,0];return{valid:t,value:e,keyword:_.hsl.keyword([l,s,i]),colorSpace:"hsl",rgb:`rgba(${d}, ${f}, ${g}, ${c})`,hsl:e,hex:`#${_.hsl.hex([l,s,i]).toLowerCase()}`}}let n=e.replace("#",""),r=_.keyword.rgb(n)||_.hex.rgb(n),o=_.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{_.keyword.hex(a)}catch{t=!1}return{valid:t,value:a,keyword:_.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 q[n];if(n!=="hex")return(t==null?void 0:t[n])||q[n];if(!t.hex.startsWith("#"))try{return`#${_.keyword.hex(t.hex)}`}catch{return q.hex}let r=t.hex.match(Yt);if(!r)return Y.test(t.hex)?t.hex:q.hex;let[o,a,l]=r[1].split("");return`#${o}${o}${a}${a}${l}${l}`},Zt=(e,t)=>{let[n,r]=m.useState(e||""),[o,a]=m.useState(()=>S(n)),[l,s]=m.useState((o==null?void 0:o.colorSpace)||"hex");m.useEffect(()=>{let f=e||"",g=S(f);r(f),a(g),s((g==null?void 0:g.colorSpace)||"hex")},[e]);let i=m.useMemo(()=>Qt(n,o,l).toLowerCase(),[n,o,l]),c=m.useCallback(f=>{let g=S(f),x=(g==null?void 0:g.value)||f||"";r(x),x===""&&(a(void 0),t(void 0)),g&&(a(g),s(g.colorSpace),t(g.value))},[t]),d=m.useCallback(()=>{let f=L.indexOf(l)+1;f>=L.length&&(f=0),s(L[f]);let g=(o==null?void 0:o[L[f]])||"";r(g),t(g)},[o,l,t]);return{value:n,realValue:i,updateValue:c,color:o,colorSpace:l,cycleColorSpace:d}},X=e=>e.replace(/\s*/,"").toLowerCase(),en=(e,t,n)=>{let[r,o]=m.useState(t!=null&&t.valid?[t]:[]);m.useEffect(()=>{t===void 0&&o([])},[t]);let a=m.useMemo(()=>(e||[]).map(s=>typeof s=="string"?S(s):s.title?{...S(s.color),keyword:s.title}:S(s.color)).concat(r).filter(Boolean).slice(-27),[e,r]),l=m.useCallback(s=>{s!=null&&s.valid&&(a.some(i=>X(i[n])===X(s[n]))||o(i=>i.concat(s)))},[n,a]);return{presets:a,addPreset:l}},tn=({name:e,value:t,onChange:n,onFocus:r,onBlur:o,presetColors:a,startOpen:l=!1,argType:s})=>{var E;let i=m.useCallback(Ht(n,200),[n]),{value:c,realValue:d,updateValue:f,color:g,colorSpace:x,cycleColorSpace:j}=Zt(t,i),{presets:M,addPreset:p}=en(a,g,x),b=Jt[x],w=!!((E=s==null?void 0:s.table)!=null&&E.readonly);return h.createElement(Pt,{"aria-readonly":w},h.createElement(Lt,{startOpen:l,trigger:w?[null]:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>p(g),tooltip:h.createElement(qt,null,h.createElement(b,{color:d==="transparent"?"#000000":d,onChange:f,onFocus:r,onBlur:o}),M.length>0&&h.createElement(Wt,null,M.map((k,O)=>h.createElement(ue,{key:`${k.value}-${O}`,hasChrome:!1,tooltip:h.createElement(Bt,{note:k.keyword||k.value})},h.createElement(ie,{value:k[x],active:g&&X(k[x])===X(g[x]),onClick:()=>f(k.value)})))))},h.createElement(ie,{value:d,style:{margin:4}})),h.createElement(Kt,{id:Oe(e),value:c,onChange:k=>f(k.target.value),onFocus:k=>k.target.select(),readOnly:w,placeholder:"Choose color..."}),c?h.createElement(Vt,{onClick:j}):null)},hn=tn;export{tn as ColorControl,hn as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Column-BRryplre.js b/demo-DES-720-add-issue-and-PR-templates/assets/Column-BRryplre.js new file mode 100644 index 0000000000..3e92da9f5e --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Column-BRryplre.js @@ -0,0 +1 @@ +import{j as l}from"./jsx-runtime-X2b_N9AH.js";import{c as i}from"./clsx-B-dksMZM.js";import{r as n}from"./index-uCp2LrAq.js";const e=n.forwardRef(({as:a="div",children:s,className:m,gap:r="medium",...o},t)=>l.jsx(a,{...o,ref:t,className:i("ams-column",`ams-column--${r}`,m),children:s}));e.displayName="Column";try{e.displayName="Column",e.__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{}export{e as C}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Column.docs-_byF7q8m.js b/demo-DES-720-add-issue-and-PR-templates/assets/Column.docs-_byF7q8m.js new file mode 100644 index 0000000000..7db1e9814f --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Column.docs-_byF7q8m.js @@ -0,0 +1,22 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as a,d as r,P as i,e as m,f as d}from"./index-CQzUsdl8.js";import{C as c,a as l}from"./Column.stories-DWfuHwM9.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Column-BRryplre.js";import"./clsx-B-dksMZM.js";import"./Paragraph-DpVlyIEJ.js";import"./Card-CI5pmY0Y.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";const h=` + +# Column + +Stacks its children vertically and adds a vertical gap between them. +`;/*@license CC0-1.0*/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 z(s={}){const{wrapper:n}={...o(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{z as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Column.stories-DWfuHwM9.js b/demo-DES-720-add-issue-and-PR-templates/assets/Column.stories-DWfuHwM9.js new file mode 100644 index 0000000000..8f0a4350b7 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Column.stories-DWfuHwM9.js @@ -0,0 +1,28 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{C as u}from"./Column-BRryplre.js";import{P as n}from"./Paragraph-DpVlyIEJ.js";import{C as a}from"./Card-CI5pmY0Y.js";import{H as s}from"./Heading-CGpdaMNv.js";const g=Array.from(Array(3).keys()).map(l=>e.jsx(n,{className:"ams-docs-pink-box",children:l+1},l)),h={title:"Components/Layout/Column",component:u,args:{children:g},argTypes:{gap:{control:"radio",options:["extra-small","small","medium","large","extra-large"]}}},r={},i={args:{as:"section",children:[e.jsxs(a,{children:[e.jsx(a.HeadingGroup,{tagline:"Nieuws",children:e.jsx(s,{level:2,size:"level-3",children:e.jsx(a.Link,{href:"#",children:"Nieuwe manieren om afval op te halen"})})}),e.jsx(n,{children:"Afvalboten, bakfietsen en ondergrondse containers. We experimenteren met nieuwe manieren om afval op te halen in het centrum."}),e.jsx(n,{size:"small",children:"Gepubliceerd: 1 juli 2023"})]},1),e.jsxs(a,{children:[e.jsx(a.HeadingGroup,{tagline:"Nieuws",children:e.jsx(s,{level:2,size:"level-3",children:e.jsx(a.Link,{href:"#",children:"Verlenging proef ophalen afval per boot"})})}),e.jsx(n,{children:"Een proef met het anders ophalen van afval. We halen vuilniszakken hier op met kleine wagentjes, kleine vuilniswagens en een afvalboot."}),e.jsx(n,{size:"small",children:"Gepubliceerd: 15 juni 2023"})]},2)]}};var o,t,d;r.parameters={...r.parameters,docs:{...(o=r.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(d=(t=r.parameters)==null?void 0:t.docs)==null?void 0:d.source}}};var p,m,c;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 + ] + } +}`,...(c=(m=i.parameters)==null?void 0:m.docs)==null?void 0:c.source}}};const f=["Default","CustomTagName"],b=Object.freeze(Object.defineProperty({__proto__:null,CustomTagName:i,Default:r,__namedExportsOrder:f,default:h},Symbol.toStringTag,{value:"Module"}));export{b as C,i as a}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/DateInput.docs-Dw5plOPK.js b/demo-DES-720-add-issue-and-PR-templates/assets/DateInput.docs-Dw5plOPK.js new file mode 100644 index 0000000000..ee49482c2d --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/DateInput.docs-Dw5plOPK.js @@ -0,0 +1,48 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as a,d as r,P as d,e as l,f as i}from"./index-CQzUsdl8.js";import{D as c,a as h,I as m,b as p}from"./DateInput.stories-CeLC8DfA.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const u=` + +# 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. +`;/*@license CC0-1.0*/function t(s){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",...o(),...s.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(a,{of:c}),` +`,e.jsx(r,{children:u}),` +`,e.jsx(d,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"date-and-time",children:"Date and time"}),` +`,e.jsxs(n.p,{children:["To let the user select a specific time on a date, use the ",e.jsx(n.code,{children:"datetime-local"}),` type. +Note that the control’s UI varies in general from browser to browser.`]}),` +`,e.jsx(n.p,{children:`The value represents a local date and time, not necessarily the user’s local date and time. +In other words, the input allows any valid combination of year, month, day, hour, and minute — even if such a combination is invalid in the user’s local time zone.`}),` +`,e.jsx(i,{of:h}),` +`,e.jsx(n.h3,{id:"invalid",children:"Invalid"}),` +`,e.jsxs(n.p,{children:[`Indicates that the input value does not meet the specified constraints. +An `,e.jsx(n.a,{href:"?path=/docs/components-forms-error-message--docs",children:"Error Message"}),` must be displayed above the field. +To highlight the error even more, the parent `,e.jsx(n.a,{href:"?path=/docs/components-forms-field--docs",children:"Field"})," component’s ",e.jsx(n.code,{children:"invalid"})," prop must also be set."]}),` +`,e.jsx(i,{of:m}),` +`,e.jsx(n.h3,{id:"disabled",children:"Disabled"}),` +`,e.jsx(n.p,{children:`A field that can not (yet) be used is indicated with a grey border. +It will not respond to interactions, e.g. with the mouse or keyboard.`}),` +`,e.jsx(n.p,{children:`Avoid disabling input fields. +They cause usability and accessibility problems.`}),` +`,e.jsx(n.p,{children:`Disabled fields are often skipped by screen readers. +This makes it hard for the user who rely on assistive technologies to understand the form’s content. +They are not included in form submissions, which can lead to incomplete or missing data.`}),` +`,e.jsx(n.p,{children:"Alternatives:"}),` +`,e.jsxs(n.ol,{children:[` +`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"readonly"}),` attribute. +This makes a field uneditable but keeps it accessible and included in form submissions.`]}),` +`,e.jsxs(n.li,{children:["Display data as plain text or within a non-input element like a ",e.jsx(n.code,{children:"span"})," or ",e.jsx(n.code,{children:"div"}),"."]}),` +`,e.jsx(n.li,{children:`Use conditional logic to hide or show fields based on user interaction. +This ensures all necessary fields are accessible and editable when needed.`}),` +`,e.jsx(n.li,{children:`Use a label or text to explain why a field is not editable if you must disable it temporarily. +This helps the user understand the context.`}),` +`]}),` +`,e.jsx(i,{of:p})]})}function C(s={}){const{wrapper:n}={...o(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{C as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/DateInput.stories-CeLC8DfA.js b/demo-DES-720-add-issue-and-PR-templates/assets/DateInput.stories-CeLC8DfA.js new file mode 100644 index 0000000000..05b1dbf3ef --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/DateInput.stories-CeLC8DfA.js @@ -0,0 +1,16 @@ +import{j as h}from"./jsx-runtime-X2b_N9AH.js";import{c as x}from"./clsx-B-dksMZM.js";import{r as S}from"./index-uCp2LrAq.js";const s=S.forwardRef(({className:o,invalid:_,type:D="date",...b},I)=>h.jsx("input",{...b,"aria-invalid":_||void 0,className:x("ams-date-input",o),ref:I,type:D}));s.displayName="DateInput";try{s.displayName="DateInput",s.__docgenInfo={description:"",displayName:"DateInput",props:{invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}},type:{defaultValue:{value:"date"},description:"The kind of data that the user should provide.",name:"type",required:!1,type:{name:"enum",value:[{value:'"date"'},{value:'"datetime-local"'}]}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const j={title:"Components/Forms/Date Input",component:s,args:{disabled:!1,invalid:!1},argTypes:{disabled:{description:"Prevents interaction. Avoid if possible."}}},e={},a={args:{type:"datetime-local"}},r={args:{invalid:!0}},t={args:{disabled:!0}};var i,n,d;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:"{}",...(d=(n=e.parameters)==null?void 0:n.docs)==null?void 0:d.source}}};var l,p,c;a.parameters={...a.parameters,docs:{...(l=a.parameters)==null?void 0:l.docs,source:{originalSource:`{ + args: { + type: 'datetime-local' + } +}`,...(c=(p=a.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};var u,m,f;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + invalid: true + } +}`,...(f=(m=r.parameters)==null?void 0:m.docs)==null?void 0:f.source}}};var v,g,y;t.parameters={...t.parameters,docs:{...(v=t.parameters)==null?void 0:v.docs,source:{originalSource:`{ + args: { + disabled: true + } +}`,...(y=(g=t.parameters)==null?void 0:g.docs)==null?void 0:y.source}}};const T=["Default","DateTime","Invalid","Disabled"],q=Object.freeze(Object.defineProperty({__proto__:null,DateTime:a,Default:e,Disabled:t,Invalid:r,__namedExportsOrder:T,default:j},Symbol.toStringTag,{value:"Module"}));export{q as D,r as I,a,t as b}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/DescriptionList.docs-Vhve3Bgb.js b/demo-DES-720-add-issue-and-PR-templates/assets/DescriptionList.docs-Vhve3Bgb.js new file mode 100644 index 0000000000..fde89b37ba --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/DescriptionList.docs-Vhve3Bgb.js @@ -0,0 +1,31 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as i}from"./index-CRbi4mQH.js";import{M as s,d as a,P as l,e as m,f as o}from"./index-CQzUsdl8.js";import{D as p,M as c,I as d}from"./DescriptionList.stories-DK-aW8kZ.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-D-8Z0FST.js";import"./clsx-B-dksMZM.js";import"./index.esm-Dr6r5gIo.js";import"./decorators-CMqafKrE.js";import"./exampleContent-BEbrefRz.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) +`;/*@license CC0-1.0*/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-720-add-issue-and-PR-templates/assets/DescriptionList.stories-DK-aW8kZ.js b/demo-DES-720-add-issue-and-PR-templates/assets/DescriptionList.stories-DK-aW8kZ.js new file mode 100644 index 0000000000..49d1929ef4 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/DescriptionList.stories-DK-aW8kZ.js @@ -0,0 +1,9 @@ +import{j as s}from"./jsx-runtime-X2b_N9AH.js";import{D as e}from"./index.esm-D-8Z0FST.js";import{i as u}from"./decorators-CMqafKrE.js";import{b as x}from"./exampleContent-BEbrefRz.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-720-add-issue-and-PR-templates/assets/Dialog.docs-BWoTDcc2.js b/demo-DES-720-add-issue-and-PR-templates/assets/Dialog.docs-BWoTDcc2.js new file mode 100644 index 0000000000..7843bfd9b1 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Dialog.docs-BWoTDcc2.js @@ -0,0 +1,54 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as s}from"./index-CRbi4mQH.js";import{M as a,d as i,P as l,e as c,f as n}from"./index-CQzUsdl8.js";import{D as h,W as d,T as p,V as m}from"./Dialog.stories-C6MA7pKt.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./IconButton-BIJEN4e9.js";import"./index.esm-Dr6r5gIo.js";import"./Icon-j44OzEOs.js";import"./Button-B8AXuJtG.js";import"./Paragraph-DpVlyIEJ.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/) +`;/*@license CC0-1.0*/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 H(t={}){const{wrapper:o}={...s(),...t.components};return o?e.jsx(o,{...t,children:e.jsx(r,{...t})}):r(t)}export{H as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Dialog.stories-C6MA7pKt.js b/demo-DES-720-add-issue-and-PR-templates/assets/Dialog.stories-C6MA7pKt.js new file mode 100644 index 0000000000..61801216a8 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Dialog.stories-C6MA7pKt.js @@ -0,0 +1,111 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{c as B}from"./clsx-B-dksMZM.js";import{r as P}from"./index-uCp2LrAq.js";import{H as d}from"./Heading-CGpdaMNv.js";import{I as C}from"./IconButton-BIJEN4e9.js";import{B as t}from"./Button-B8AXuJtG.js";import{P as a}from"./Paragraph-DpVlyIEJ.js";const l=P.forwardRef(({actions:n,children:r,className:D,closeButtonLabel:z="Sluiten",heading: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})]})}));l.displayName="Dialog";try{l.displayName="Dialog",l.__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"}},heading:{defaultValue:null,description:"The text for the Heading.",name:"heading",required:!0,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:l,args:{actions:e.jsxs(e.Fragment,{children:[e.jsx(t,{type:"submit",children:"Doorgaan"}),e.jsx(t,{onClick:c,variant:"tertiary",children:"Stoppen"})]}),children:e.jsx(a,{children:"Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet opgeslagen zijn."}),heading:"Niet alle gegevens zijn opgeslagen"},argTypes:{actions:{table:{disable:!0}}}},o={args:{open:!0},argTypes:{heading:{description:"The text for the heading."},open:{description:"Whether the dialog box is active and available for interaction."}},decorators:[n=>e.jsx("div",{style:{backgroundColor:"#0006",position:"absolute",width:"100%",height:"100%"},children:e.jsx(n,{})})],parameters:{docs:{story:{height:"32em"}},layout:"fullscreen"}},i={args:{actions:e.jsx(t,{onClick:c,children:"Sluiten"}),children:[e.jsx(d,{level:2,size:"level-5",children:"Algemeen"},1),e.jsx(a,{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(a,{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(a,{children:"Meer specifieke informatie over privacy en de verwerking van persoonsgegevens door de gemeente Amsterdam kunt u op de hoofdpagina vinden."},4),e.jsx(a,{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(a,{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)],heading:"Privacyverklaring gemeente Amsterdam",open:!0},decorators:[n=>e.jsx("div",{style:{backgroundColor:"#0006",position:"absolute",width:"100%",height:"100%"},children:e.jsx(n,{})})],parameters:{docs:{story:{height:"100vh"}},layout:"fullscreen"}},s={args:{id:"openDialog"},decorators:[n=>e.jsxs("article",{children:[e.jsx(t,{onClick:()=>{var r;return(r=document.querySelector("#openDialog"))==null?void 0:r.showModal()},children:"Open Dialog"}),e.jsx(n,{})]})]},g={args:{actions:e.jsxs(e.Fragment,{children:[e.jsx(t,{type:"submit",children:"Lange teksten op deze knoppen"}),e.jsx(t,{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:{docs:{story:{height:"32em"}},layout:"fullscreen"}};var p,m,u;o.parameters={...o.parameters,docs:{...(p=o.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + open: true + }, + argTypes: { + heading: { + description: 'The text for the heading.' + }, + open: { + description: 'Whether the dialog box is active and available for interaction.' + } + }, + decorators: [Story =>
    + +
    ], + parameters: { + docs: { + story: { + height: '32em' + } + }, + layout: 'fullscreen' + } +}`,...(u=(m=o.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};var h,v,k;i.parameters={...i.parameters,docs:{...(h=i.parameters)==null?void 0:h.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. + ], + heading: 'Privacyverklaring gemeente Amsterdam', + open: true + }, + decorators: [Story =>
    + +
    ], + parameters: { + docs: { + story: { + height: '100vh' + } + }, + layout: 'fullscreen' + } +}`,...(k=(v=i.parameters)==null?void 0:v.docs)==null?void 0:k.source}}};var y,w,f;s.parameters={...s.parameters,docs:{...(y=s.parameters)==null?void 0:y.docs,source:{originalSource:`{ + args: { + id: 'openDialog' + }, + decorators: [Story =>
    + + +
    ] +}`,...(f=(w=s.parameters)==null?void 0:w.docs)==null?void 0:f.source}}};var j,b,x;g.parameters={...g.parameters,docs:{...(j=g.parameters)==null?void 0:j.docs,source:{originalSource:`{ + args: { + actions: <> + + + , + open: true + }, + decorators: [Story =>
    + +
    ], + parameters: { + docs: { + story: { + height: '32em' + } + }, + layout: 'fullscreen' + } +}`,...(x=(b=g.parameters)==null?void 0:b.docs)==null?void 0:x.source}}};const T=["Default","WithScrollbar","TriggerButton","VerticalButtons"],L=Object.freeze(Object.defineProperty({__proto__:null,Default:o,TriggerButton:s,VerticalButtons:g,WithScrollbar:i,__namedExportsOrder:T,default:N},Symbol.toStringTag,{value:"Module"}));export{L as D,s as T,g as V,i as W}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/DocsRenderer-K4EAMTCU-DwewW2gd.js b/demo-DES-720-add-issue-and-PR-templates/assets/DocsRenderer-K4EAMTCU-DwewW2gd.js new file mode 100644 index 0000000000..fba7d77df7 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/DocsRenderer-K4EAMTCU-DwewW2gd.js @@ -0,0 +1,2 @@ +const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-CRbi4mQH.js","./index-uCp2LrAq.js","./_commonjsHelpers-BosuxZz1.js"])))=>i.map(i=>d[i]); +import{_ as p}from"./iframe-CbXJy8Sf.js";import{R as e,r as c}from"./index-uCp2LrAq.js";import{r as u,u as l}from"./react-18-DAjhTQGP.js";import{C as h,A as E,H as d,D as x}from"./index-CQzUsdl8.js";import"../sb-preview/runtime.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";var D={code:h,a:E,...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,n)=>{let s={...D,...r==null?void 0:r.components},a=x;return new Promise((m,i)=>{p(async()=>{const{MDXProvider:o}=await import("./index-CRbi4mQH.js");return{MDXProvider:o}},__vite__mapDeps([0,1,2]),import.meta.url).then(({MDXProvider:o})=>u(e.createElement(_,{showException:i,key:Math.random()},e.createElement(o,{components:s},e.createElement(a,{context:t,docsParameter:r}))),n)).then(()=>m())})},this.unmount=t=>{l(t)}}};export{H as DocsRenderer,D as defaultComponents}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/ErrorMessage-BHYT2tqE.js b/demo-DES-720-add-issue-and-PR-templates/assets/ErrorMessage-BHYT2tqE.js new file mode 100644 index 0000000000..12a1b1daa9 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/ErrorMessage-BHYT2tqE.js @@ -0,0 +1 @@ +import{j as s}from"./jsx-runtime-X2b_N9AH.js";import{c as n}from"./clsx-B-dksMZM.js";import{r as p}from"./index-uCp2LrAq.js";const e=p.forwardRef(({children:r,className:a,prefix:o="Invoerfout",...t},i)=>s.jsxs("p",{...t,ref:i,className:n("ams-error-message",a),children:[s.jsxs("span",{className:"ams-visually-hidden",children:[o,": "]}),r]}));e.displayName="ErrorMessage";try{e.displayName="ErrorMessage",e.__docgenInfo={description:"",displayName:"ErrorMessage",props:{prefix:{defaultValue:{value:"Invoerfout"},description:"An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’.",name:"prefix",required:!1,type:{name:"string"}}}}}catch{}export{e as E}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/ErrorMessage.docs-Q_EjKAb0.js b/demo-DES-720-add-issue-and-PR-templates/assets/ErrorMessage.docs-Q_EjKAb0.js new file mode 100644 index 0000000000..9d82f1eb0f --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/ErrorMessage.docs-Q_EjKAb0.js @@ -0,0 +1,22 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as t}from"./index-CRbi4mQH.js";import{M as s,d as i,P as a,e as m,f as d}from"./index-CQzUsdl8.js";import{E as c,W as h}from"./ErrorMessage.stories-B6s3kZi-.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./ErrorMessage-BHYT2tqE.js";import"./clsx-B-dksMZM.js";const p=` + +# Error Message + +Show an error message when there is a form field validation error. +In the error message explain what went wrong and how to fix it. + +For guidance and examples on using error messages in a form, +refer to the [Field](/docs/components-forms-field--docs) and [Field Set](/docs/components-forms-field-set--docs) documentation. + +Read the documentation by [NL Design System](https://www.nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen) and [Gov.uk](https://design-system.service.gov.uk/components/error-message/) for more information on the contents of error messages and when to show them. +`;/*@license CC0-1.0*/function r(o){const n={code:"code",h2:"h2",p:"p",...t(),...o.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(s,{of:c}),` +`,e.jsx(i,{children:p}),` +`,e.jsx(a,{}),` +`,e.jsx(m,{}),` +`,e.jsx(n.h2,{id:"with-a-custom-prefix",children:"With a custom prefix"}),` +`,e.jsxs(n.p,{children:[`Error messages are automatically prefixed with a visually hidden text, the Dutch word "Invoerfout". +This makes the error message more clear for screen reader users. +If you want to change this prefix, to support another language for example, you can use the `,e.jsx(n.code,{children:"prefix"})," prop."]}),` +`,e.jsx(d,{of:h})]})}function F(o={}){const{wrapper:n}={...t(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(r,{...o})}):r(o)}export{F as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/ErrorMessage.stories-B6s3kZi-.js b/demo-DES-720-add-issue-and-PR-templates/assets/ErrorMessage.stories-B6s3kZi-.js new file mode 100644 index 0000000000..c1bc133d3e --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/ErrorMessage.stories-B6s3kZi-.js @@ -0,0 +1,9 @@ +import{E as i}from"./ErrorMessage-BHYT2tqE.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const l={title:"Components/Forms/Error Message",component:i,args:{children:"Vul een geldig e-mailadres in, bijvoorbeeld naam@voorbeeld.nl."},argTypes:{children:{table:{disable:!1}}}},e={},r={args:{children:"Enter an email address in the correct format, like name@example.com",prefix:"Error"}};var a,o,s;e.parameters={...e.parameters,docs:{...(a=e.parameters)==null?void 0:a.docs,source:{originalSource:"{}",...(s=(o=e.parameters)==null?void 0:o.docs)==null?void 0:s.source}}};var t,n,c;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:`{ + args: { + children: 'Enter an email address in the correct format, like name@example.com', + prefix: 'Error' + } +}`,...(c=(n=r.parameters)==null?void 0:n.docs)==null?void 0:c.source}}};const m=["Default","WithCustomPrefix"],p=Object.freeze(Object.defineProperty({__proto__:null,Default:e,WithCustomPrefix:r,__namedExportsOrder:m,default:l},Symbol.toStringTag,{value:"Module"}));export{p as E,r as W}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Field-7IRG3ycG.js b/demo-DES-720-add-issue-and-PR-templates/assets/Field-7IRG3ycG.js new file mode 100644 index 0000000000..2194f4c8ea --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Field-7IRG3ycG.js @@ -0,0 +1 @@ +import{j as o}from"./jsx-runtime-X2b_N9AH.js";import{c as s}from"./clsx-B-dksMZM.js";import{r as t}from"./index-uCp2LrAq.js";const e=t.forwardRef(({children:a,className:i,invalid:r,...d},l)=>o.jsx("div",{...d,ref:l,className:s("ams-field",r&&"ams-field--invalid",i),children:a}));e.displayName="Field";try{e.displayName="Field",e.__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{}export{e as F}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Field.docs-C5gxIeFE.js b/demo-DES-720-add-issue-and-PR-templates/assets/Field.docs-C5gxIeFE.js new file mode 100644 index 0000000000..26e417c709 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Field.docs-C5gxIeFE.js @@ -0,0 +1,28 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as s,d as a,P as d,e as c,f as i}from"./index-CQzUsdl8.js";import{F as p,W as h,a as l}from"./Field.stories-Bzq8SkiS.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-D-8Z0FST.js";import"./clsx-B-dksMZM.js";import"./index.esm-Dr6r5gIo.js";import"./Field-7IRG3ycG.js";import"./Paragraph-DpVlyIEJ.js";const m=` + +# 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 [Field Set](/docs/components-forms-field-set--docs) to wrap multiple inputs. +`;/*@license CC0-1.0*/function r(n){const t={code:"code",h2:"h2",p:"p",...o(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(s,{of:p}),` +`,e.jsx(a,{children:m}),` +`,e.jsx(d,{}),` +`,e.jsx(c,{}),` +`,e.jsx(t.h2,{id:"with-description",children:"With Description"}),` +`,e.jsxs(t.p,{children:[`A Field can have a description. +Make sure to connect this description to the input in the Field, +otherwise it won’t be read by a screen reader. +Add an `,e.jsx(t.code,{children:"aria-describedby"})," attribute to the input and provide the ",e.jsx(t.code,{children:"id"})," of the describing element as its value."]}),` +`,e.jsx(i,{of:h}),` +`,e.jsx(t.h2,{id:"with-error",children:"With Error"}),` +`,e.jsxs(t.p,{children:[`A Field can indicate if the contained input has a validation error. +Use Error Message to describe the error. +Make sure to connect the error message to the input in the Field, +otherwise it won’t be read by a screen reader. +Add an `,e.jsx(t.code,{children:"aria-describedby"})," attribute to the input and provide the ",e.jsx(t.code,{children:"id"})," of Error Message as its value."]}),` +`,e.jsx(i,{of:l})]})}function X(n={}){const{wrapper:t}={...o(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(r,{...n})}):r(n)}export{X as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Field.stories-Bzq8SkiS.js b/demo-DES-720-add-issue-and-PR-templates/assets/Field.stories-Bzq8SkiS.js new file mode 100644 index 0000000000..155a477921 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Field.stories-Bzq8SkiS.js @@ -0,0 +1,26 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{L as t,T as d,E as x}from"./index.esm-D-8Z0FST.js";import{F as s}from"./Field-7IRG3ycG.js";import{P as j}from"./Paragraph-DpVlyIEJ.js";const b={title:"Components/Forms/Field",component:s,args:{invalid:!1}},i={render:r=>e.jsxs(s,{invalid:r.invalid,children:[e.jsx(t,{htmlFor:"input1",children:"Waar gaat het om?"}),e.jsx(d,{id:"input1",invalid:r.invalid})]})},a={render:r=>e.jsxs(s,{invalid:r.invalid,children:[e.jsx(t,{htmlFor:"input2",children:"Waar gaat het om?"}),e.jsx(j,{id:"description1",size:"small",children:"Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u."}),e.jsx(d,{id:"input2","aria-describedby":"description1",invalid:r.invalid})]})},n={args:{invalid:!0},render:r=>e.jsxs(s,{invalid:r.invalid,children:[e.jsx(t,{htmlFor:"input3",children:"Waar gaat het om?"}),e.jsx(j,{id:"description2",size:"small",children:"Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u."}),e.jsx(x,{id:"error",children:"Geef aan waar het om gaat."}),e.jsx(d,{id:"input3","aria-describedby":"description2 error","aria-required":!0,invalid:r.invalid})]})};var o,l,p;i.parameters={...i.parameters,docs:{...(o=i.parameters)==null?void 0:o.docs,source:{originalSource:`{ + render: args => + + + +}`,...(p=(l=i.parameters)==null?void 0:l.docs)==null?void 0:p.source}}};var c,m,g;a.parameters={...a.parameters,docs:{...(c=a.parameters)==null?void 0:c.docs,source:{originalSource:`{ + render: args => + + + Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u. + + + +}`,...(g=(m=a.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var u,v,h;n.parameters={...n.parameters,docs:{...(u=n.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + invalid: true + }, + render: args => + + + Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u. + + Geef aan waar het om gaat. + + +}`,...(h=(v=n.parameters)==null?void 0:v.docs)==null?void 0:h.source}}};const F=["Default","WithDescription","WithError"],z=Object.freeze(Object.defineProperty({__proto__:null,Default:i,WithDescription:a,WithError:n,__namedExportsOrder:F,default:b},Symbol.toStringTag,{value:"Module"}));export{z as F,a as W,n as a}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/FieldSet-DkgxHA-T.js b/demo-DES-720-add-issue-and-PR-templates/assets/FieldSet-DkgxHA-T.js new file mode 100644 index 0000000000..cf08476d99 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FieldSet-DkgxHA-T.js @@ -0,0 +1 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{c}from"./clsx-B-dksMZM.js";import{r as t}from"./index-uCp2LrAq.js";const o=t.forwardRef(({children:a,className:s,invalid:l,...r},d)=>{const i=t.useId();return e.jsxs("div",{className:c("ams-radio",s),children:[e.jsx("input",{...r,"aria-invalid":l||void 0,className:"ams-radio__input",id:i,ref:d,type:"radio"}),e.jsxs("label",{className:"ams-radio__label",htmlFor:i,children:[e.jsx("span",{className:"ams-radio__circle"}),a]})]})});o.displayName="Radio";try{o.displayName="Radio",o.__docgenInfo={description:"",displayName:"Radio",props:{invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}}}}}catch{}const n=t.forwardRef(({children:a,className:s,invalid:l,legend:r,...d},i)=>e.jsxs("fieldset",{...d,ref:i,className:c("ams-field-set",l&&"ams-field-set--invalid",s),children:[e.jsx("legend",{className:"ams-field-set__legend",children:r}),a]}));n.displayName="FieldSet";try{n.displayName="FieldSet",n.__docgenInfo={description:"",displayName:"FieldSet",props:{invalid:{defaultValue:null,description:"Whether the field set has an input with a validation error",name:"invalid",required:!1,type:{name:"boolean"}},legend:{defaultValue:null,description:"The text for the caption.",name:"legend",required:!0,type:{name:"string"}}}}}catch{}export{n as F,o as R}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/FieldSet.docs-xQ0jZ-9J.js b/demo-DES-720-add-issue-and-PR-templates/assets/FieldSet.docs-xQ0jZ-9J.js new file mode 100644 index 0000000000..9304feb095 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FieldSet.docs-xQ0jZ-9J.js @@ -0,0 +1,83 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as s,d,P as a,e as h,f as n}from"./index-CQzUsdl8.js";import{F as l,W as c,a as p,R as u,b as x,C as g,c as j}from"./FieldSet.stories-BabNO5Yg.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./FieldSet-DkgxHA-T.js";import"./clsx-B-dksMZM.js";import"./Label-BnSmP98q.js";import"./TextInput-DvUsoF4e.js";import"./Field-7IRG3ycG.js";import"./ErrorMessage-BHYT2tqE.js";import"./Paragraph-DpVlyIEJ.js";import"./Column-BRryplre.js";import"./Checkbox-DRBoUL7U.js";const b=` + +# Field Set + +A component to group related form inputs. + +## Guidelines + +- Use Field Set 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 Field Set when asking for an address. + +## Relevant WCAG Requirements + +- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Field Set 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) +`;/*@license CC0-1.0*/function t(i){const r={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...o(),...i.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(s,{of:l}),` +`,e.jsx(d,{children:b}),` +`,e.jsx(a,{}),` +`,e.jsx(h,{}),` +`,e.jsx(r.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(r.h2,{id:"with-description",children:"With Description"}),` +`,e.jsxs(r.p,{children:[`A Field Set can have a description. +Make sure to connect this description to the Field Set or a specific input, +otherwise this won’t be read by a screen reader. +Add an `,e.jsx(r.code,{children:"aria-describedby"}),` attribute to the Field Set +and provide the `,e.jsx(r.code,{children:"id"})," of the describing element as its value."]}),` +`,e.jsx(n,{of:c}),` +`,e.jsx(r.h2,{id:"with-error",children:"With Error"}),` +`,e.jsxs(r.p,{children:[`A Field Set can indicate whether any of the inputs it contains has a validation error. +Use Error Message to describe the error. +Make sure to connect the error message to the correct input in the Field Set, +otherwise it won’t be read by a screen reader. +Add an `,e.jsx(r.code,{children:"aria-describedby"})," attribute to the input and provide the ",e.jsx(r.code,{children:"id"})," of Error Message as its value."]}),` +`,e.jsx(n,{of:p}),` +`,e.jsx(r.h3,{id:"radio-group",children:"Radio group"}),` +`,e.jsxs(r.p,{children:[`Use a Field Set to group radio buttons. +When grouping radio inputs, use `,e.jsx(r.code,{children:'role="radiogroup"'})," on Field Set to have this grouping explicitly announced as a radio group (the default role is ",e.jsx(r.code,{children:"group"}),`). +Using `,e.jsx(r.code,{children:'role="radiogroup"'})," also allows you to use ",e.jsx(r.code,{children:"aria-required"})," on Field Set, which isn’t allowed for role ",e.jsx(r.code,{children:"group"}),`. +Always also set `,e.jsx(r.code,{children:"aria-required"})," on the individual radio buttons though, to make sure it’s read by screen readers."]}),` +`,e.jsx(n,{of:u}),` +`,e.jsx(r.h3,{id:"radio-group-with-error",children:"Radio group with error"}),` +`,e.jsxs(r.p,{children:[`A Field Set with a radio button group can also have a validation error. +In this case, connect the error message to the Field Set instead of an input. +Add an `,e.jsx(r.code,{children:"aria-describedby"})," attribute to the Field Set and provide the ",e.jsx(r.code,{children:"id"})," of Error Message as its value."]}),` +`,e.jsx(n,{of:x}),` +`,e.jsx(r.h3,{id:"checkbox-group",children:"Checkbox group"}),` +`,e.jsx(r.p,{children:"Use a Field Set to group checkboxes."}),` +`,e.jsxs(r.p,{children:["Please note: ",e.jsx(r.a,{href:"https://github.com/nvaccess/nvda/issues/12718",rel:"nofollow",children:"NVDA has a bug"}),` which causes it to +not report a description connected to a Field Set when it contains checkboxes.`]}),` +`,e.jsxs(r.p,{children:[`For this reason, we add the description text to the label. +Screen reader users will no longer be able to skip the description, +but we think that is preferable to missing the description entirely. +Add an `,e.jsx(r.code,{children:"id"})," to the Field Set and the description, and add both to the ",e.jsx(r.code,{children:"aria-labelledby"})," attribute of Field Set, like so:"]}),` +`,e.jsx(r.pre,{children:e.jsx(r.code,{className:"language-jsx",children:`
    + Description + ... +
    +`})}),` +`,e.jsxs(r.p,{children:["The order of the ",e.jsx(r.code,{children:"id"}),"s is the order in which they are read by screen readers."]}),` +`,e.jsx(n,{of:g}),` +`,e.jsx(r.h3,{id:"checkbox-group-with-error",children:"Checkbox group with error"}),` +`,e.jsxs(r.p,{children:["Because of ",e.jsx(r.a,{href:"https://github.com/nvaccess/nvda/issues/12718",rel:"nofollow",children:"the NVDA bug mentioned earlier"}),`, +we add the Error Message text to the label as well. +Add an `,e.jsx(r.code,{children:"id"})," to the Field Set and the Error Message, and add both to the ",e.jsx(r.code,{children:"aria-labelledby"})," attribute of Field Set, like so:"]}),` +`,e.jsx(r.pre,{children:e.jsx(r.code,{className:"language-jsx",children:`
    + Description + ... +
    +`})}),` +`,e.jsxs(r.p,{children:["The order of the ",e.jsx(r.code,{children:"id"}),"s is the order in which they are read by screen readers."]}),` +`,e.jsx(n,{of:j})]})}function L(i={}){const{wrapper:r}={...o(),...i.components};return r?e.jsx(r,{...i,children:e.jsx(t,{...i})}):t(i)}export{L as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/FieldSet.stories-BabNO5Yg.js b/demo-DES-720-add-issue-and-PR-templates/assets/FieldSet.stories-BabNO5Yg.js new file mode 100644 index 0000000000..52b6d7c2e6 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FieldSet.stories-BabNO5Yg.js @@ -0,0 +1,155 @@ +import{j as a}from"./jsx-runtime-X2b_N9AH.js";import{F as d,R as i}from"./FieldSet-DkgxHA-T.js";import{L as l}from"./Label-BnSmP98q.js";import{T as s}from"./TextInput-DvUsoF4e.js";import{F as o}from"./Field-7IRG3ycG.js";import{E as r}from"./ErrorMessage-BHYT2tqE.js";import{P as t}from"./Paragraph-DpVlyIEJ.js";import{C as h}from"./Column-BRryplre.js";import{C as n}from"./Checkbox-DRBoUL7U.js";const L={title:"Components/Forms/Field Set",component:d,args:{invalid:!1,legend:"Wat is uw naam?"},decorators:[e=>a.jsx("form",{children:a.jsx(e,{})})]},m={render:e=>a.jsxs(d,{invalid:e.invalid,legend:e.legend,children:[a.jsxs(o,{className:"ams-mb--sm",children:[a.jsx(l,{htmlFor:"input-a1",children:"Voornaam"}),e.invalid&&a.jsx(r,{id:"error-a1",children:"Vul uw voornaam in."}),a.jsx(s,{"aria-describedby":e.invalid?"error-a1":void 0,"aria-required":"true",id:"input-a1",invalid:e.invalid})]}),a.jsxs(o,{children:[a.jsx(l,{htmlFor:"input-a2",children:"Achternaam"}),e.invalid&&a.jsx(r,{id:"error-a2",children:"Vul uw achternaam in."}),a.jsx(s,{"aria-describedby":e.invalid?"error-a2":void 0,"aria-required":"true",id:"input-a2",invalid:e.invalid})]})]})},u={render:e=>a.jsxs(d,{invalid:e.invalid,legend:e.legend,"aria-describedby":"description-b",children:[a.jsx(t,{id:"description-b",size:"small",className:"ams-mb--sm",children:"Vul uw naam in zoals in uw paspoort staat."}),a.jsxs(o,{className:"ams-mb--sm",children:[a.jsx(l,{htmlFor:"input-b1",children:"Voornaam"}),e.invalid&&a.jsx(r,{id:"error-b1",children:"Vul uw voornaam in."}),a.jsx(s,{"aria-describedby":e.invalid?"error-b1":void 0,"aria-required":"true",id:"input-b1",invalid:e.invalid})]}),a.jsxs(o,{children:[a.jsx(l,{htmlFor:"input-b2",children:"Achternaam"}),e.invalid&&a.jsx(r,{id:"error-b2",children:"Vul uw achternaam in."}),a.jsx(s,{"aria-describedby":e.invalid?"error-b2":void 0,"aria-required":"true",id:"input-b2",invalid:e.invalid})]})]})},c={args:{invalid:!0},render:e=>a.jsxs(d,{invalid:e.invalid,legend:e.legend,"aria-describedby":"description-c",children:[a.jsx(t,{id:"description-c",size:"small",className:"ams-mb--sm",children:"Vul uw naam in zoals in uw paspoort staat."}),a.jsxs(o,{className:"ams-mb--sm",children:[a.jsx(l,{htmlFor:"input-c1",children:"Voornaam"}),e.invalid&&a.jsx(r,{id:"error-c1",children:"Vul uw voornaam in."}),a.jsx(s,{"aria-describedby":e.invalid?"error-c1":void 0,"aria-required":"true",id:"input-c1",invalid:e.invalid})]}),a.jsxs(o,{children:[a.jsx(l,{htmlFor:"input-c2",children:"Achternaam"}),e.invalid&&a.jsx(r,{id:"error-c2",children:"Vul uw achternaam in."}),a.jsx(s,{"aria-describedby":e.invalid?"error-c2":void 0,"aria-required":"true",id:"input-c2",invalid:e.invalid})]})]})},v={args:{legend:"Waar gaat uw melding over?"},render:e=>a.jsxs(d,{"aria-describedby":`description-d${e.invalid?" error-d":""}`,"aria-required":"true",invalid:e.invalid,legend:e.legend,role:"radiogroup",children:[a.jsx(t,{className:"ams-mb--sm",id:"description-d",size:"small",children:"De laatstgenoemde melding."}),e.invalid&&a.jsx(r,{className:"ams-mb--sm",id:"error-d",children:"Geef aan waar uw laatstgenoemde melding over gaat."}),a.jsxs(h,{gap:"extra-small",children:[a.jsx(i,{"aria-required":"true",invalid:e.invalid,name:"about",value:"horeca",children:"Horecabedrijf"}),a.jsx(i,{"aria-required":"true",invalid:e.invalid,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),a.jsx(i,{"aria-required":"true",invalid:e.invalid,name:"about",value:"evenement",children:"Evenement"}),a.jsx(i,{"aria-required":"true",invalid:e.invalid,name:"about",value:"anders",children:"Iets anders"})]})]})},b={args:{legend:"Waar gaat uw melding over?",invalid:!0},render:e=>a.jsxs(d,{"aria-describedby":`description-e${e.invalid?" error-e":""}`,"aria-required":"true",invalid:e.invalid,legend:e.legend,role:"radiogroup",children:[a.jsx(t,{className:"ams-mb--sm",id:"description-e",size:"small",children:"De laatstgenoemde melding."}),e.invalid&&a.jsx(r,{className:"ams-mb--sm",id:"error-e",children:"Geef aan waar uw laatstgenoemde melding over gaat."}),a.jsxs(h,{gap:"extra-small",children:[a.jsx(i,{"aria-required":"true",invalid:e.invalid,name:"about",value:"horeca",children:"Horecabedrijf"}),a.jsx(i,{"aria-required":"true",invalid:e.invalid,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),a.jsx(i,{"aria-required":"true",invalid:e.invalid,name:"about",value:"evenement",children:"Evenement"}),a.jsx(i,{"aria-required":"true",invalid:e.invalid,name:"about",value:"anders",children:"Iets anders"})]})]})},g={args:{legend:"Waar gaat uw melding over?"},render:e=>a.jsxs(d,{"aria-labelledby":`fieldset-f description-f${e.invalid?" error-f":""}`,id:"fieldset-f",invalid:e.invalid,legend:e.legend,children:[a.jsx(t,{className:"ams-mb--sm",id:"description-f",size:"small",children:"De laatstgenoemde melding."}),e.invalid&&a.jsx(r,{className:"ams-mb--sm",id:"error-f",children:"Geef aan waar uw melding over gaat."}),a.jsxs(h,{gap:"extra-small",children:[a.jsx(n,{"aria-required":"true",invalid:e.invalid,name:"about",value:"horeca",children:"Horecabedrijf"}),a.jsx(n,{"aria-required":"true",invalid:e.invalid,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),a.jsx(n,{"aria-required":"true",invalid:e.invalid,name:"about",value:"evenement",children:"Evenement"}),a.jsx(n,{"aria-required":"true",invalid:e.invalid,name:"about",value:"anders",children:"Iets anders"})]})]})},p={args:{invalid:!0,legend:"Waar gaat uw melding over?"},render:e=>a.jsxs(d,{"aria-labelledby":`fieldset-g description-g${e.invalid?" error-g":""}`,id:"fieldset-g",invalid:e.invalid,legend:e.legend,children:[a.jsx(t,{id:"description-g",size:"small",className:"ams-mb--sm",children:"De laatstgenoemde melding."}),e.invalid&&a.jsx(r,{className:"ams-mb--sm",id:"error-g",children:"Geef aan waar uw melding over gaat."}),a.jsxs(h,{gap:"extra-small",children:[a.jsx(n,{"aria-required":"true",invalid:e.invalid,name:"about",value:"horeca",children:"Horecabedrijf"}),a.jsx(n,{"aria-required":"true",invalid:e.invalid,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),a.jsx(n,{"aria-required":"true",invalid:e.invalid,name:"about",value:"evenement",children:"Evenement"}),a.jsx(n,{"aria-required":"true",invalid:e.invalid,name:"about",value:"anders",children:"Iets anders"})]})]})};var x,j,f;m.parameters={...m.parameters,docs:{...(x=m.parameters)==null?void 0:x.docs,source:{originalSource:`{ + render: args =>
    + + + {args.invalid && Vul uw voornaam in.} + + + + + {args.invalid && Vul uw achternaam in.} + + +
    +}`,...(f=(j=m.parameters)==null?void 0:j.docs)==null?void 0:f.source}}};var q,F,w;u.parameters={...u.parameters,docs:{...(q=u.parameters)==null?void 0:q.docs,source:{originalSource:`{ + render: args =>
    + + Vul uw naam in zoals in uw paspoort staat. + + + + {args.invalid && Vul uw voornaam in.} + + + + + {args.invalid && Vul uw achternaam in.} + + +
    +}`,...(w=(F=u.parameters)==null?void 0:F.docs)==null?void 0:w.source}}};var E,C,S;c.parameters={...c.parameters,docs:{...(E=c.parameters)==null?void 0:E.docs,source:{originalSource:`{ + args: { + invalid: true + }, + render: args =>
    + + Vul uw naam in zoals in uw paspoort staat. + + + + {args.invalid && Vul uw voornaam in.} + + + + + {args.invalid && Vul uw achternaam in.} + + +
    +}`,...(S=(C=c.parameters)==null?void 0:C.docs)==null?void 0:S.source}}};var y,N,R;v.parameters={...v.parameters,docs:{...(y=v.parameters)==null?void 0:y.docs,source:{originalSource:`{ + args: { + legend: 'Waar gaat uw melding over?' + }, + render: args =>
    + + De laatstgenoemde melding. + + {args.invalid && + Geef aan waar uw laatstgenoemde melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(R=(N=v.parameters)==null?void 0:N.docs)==null?void 0:R.source}}};var M,V,k;b.parameters={...b.parameters,docs:{...(M=b.parameters)==null?void 0:M.docs,source:{originalSource:`{ + args: { + legend: 'Waar gaat uw melding over?', + invalid: true + }, + render: args =>
    + + De laatstgenoemde melding. + + {args.invalid && + Geef aan waar uw laatstgenoemde melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(k=(V=b.parameters)==null?void 0:V.docs)==null?void 0:k.source}}};var W,z,G;g.parameters={...g.parameters,docs:{...(W=g.parameters)==null?void 0:W.docs,source:{originalSource:`{ + args: { + legend: 'Waar gaat uw melding over?' + }, + render: args =>
    + + De laatstgenoemde melding. + + {args.invalid && + Geef aan waar uw melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(G=(z=g.parameters)==null?void 0:z.docs)==null?void 0:G.source}}};var I,P,A;p.parameters={...p.parameters,docs:{...(I=p.parameters)==null?void 0:I.docs,source:{originalSource:`{ + args: { + invalid: true, + legend: 'Waar gaat uw melding over?' + }, + render: args =>
    + + De laatstgenoemde melding. + + {args.invalid && + Geef aan waar uw melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(A=(P=p.parameters)==null?void 0:P.docs)==null?void 0:A.source}}};const _=["Default","WithDescription","WithError","RadioGroup","RadioGroupWithError","CheckboxGroup","CheckboxGroupWithError"],U=Object.freeze(Object.defineProperty({__proto__:null,CheckboxGroup:g,CheckboxGroupWithError:p,Default:m,RadioGroup:v,RadioGroupWithError:b,WithDescription:u,WithError:c,__namedExportsOrder:_,default:L},Symbol.toStringTag,{value:"Module"}));export{g as C,U as F,v as R,u as W,c as a,b,p as c}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/FileInput.docs-CwJ9yAl3.js b/demo-DES-720-add-issue-and-PR-templates/assets/FileInput.docs-CwJ9yAl3.js new file mode 100644 index 0000000000..555db6f280 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FileInput.docs-CwJ9yAl3.js @@ -0,0 +1,26 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as l,d as r,P as a,e as c,f as t}from"./index-CQzUsdl8.js";import{F as d,M as p,A as m,D as h}from"./FileInput.stories-CfU1Me_7.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const f=` + +# File Input + +Allows the user to upload one or more files from their device. + +## Visual considerations + +The filename label and button are displayed in the language of the browser and can vary between browsers and operating systems. +`;/*@license CC0-1.0*/function s(i){const n={a:"a",code:"code",h2:"h2",li:"li",p:"p",ul:"ul",...o(),...i.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(l,{of:d}),` +`,e.jsx(r,{children:f}),` +`,e.jsx(a,{}),` +`,e.jsx(c,{}),` +`,e.jsx(n.h2,{id:"multiple-files",children:"Multiple Files"}),` +`,e.jsx(n.p,{children:"Allow multiple files to be selected. The label will update to show the number of files selected."}),` +`,e.jsx(t,{of:p}),` +`,e.jsx(n.h2,{id:"accept",children:"Accept"}),` +`,e.jsxs(n.p,{children:["Limit the types of files that can be selected. Some examples are ",e.jsx(n.code,{children:"image/*"}),", ",e.jsx(n.code,{children:"video/*"}),", or ",e.jsx(n.code,{children:"audio/*"}),". To limit to a specific file type, use the MIME type, such as ",e.jsx(n.code,{children:"application/pdf"}),"."]}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#limiting_accepted_file_types",rel:"nofollow",children:"MDN File Input"}),": More examples"]}),` +`]}),` +`,e.jsx(t,{of:m}),` +`,e.jsx(n.h2,{id:"disabled",children:"Disabled"}),` +`,e.jsx(t,{of:h})]})}function E(i={}){const{wrapper:n}={...o(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(s,{...i})}):s(i)}export{E as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/FileInput.stories-CfU1Me_7.js b/demo-DES-720-add-issue-and-PR-templates/assets/FileInput.stories-CfU1Me_7.js new file mode 100644 index 0000000000..62c6647c89 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FileInput.stories-CfU1Me_7.js @@ -0,0 +1,16 @@ +import{j as F}from"./jsx-runtime-X2b_N9AH.js";import{c as I}from"./clsx-B-dksMZM.js";import{r as S}from"./index-uCp2LrAq.js";const s=S.forwardRef(({className:o,...b},x)=>F.jsx("input",{...b,ref:x,className:I("ams-file-input",o),type:"file"}));s.displayName="FileInput";try{s.displayName="FileInput",s.__docgenInfo={description:"",displayName:"FileInput",props:{}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const j={title:"Components/Forms/File Input",component:s,args:{accept:void 0,multiple:!1,disabled:!1},argTypes:{accept:{control:{type:"text"}},multiple:{control:{type:"boolean"}},disabled:{control:{type:"boolean"}}}},e={},r={args:{multiple:!0}},a={args:{accept:"application/pdf"}},t={args:{disabled:!0}};var p,c,l;e.parameters={...e.parameters,docs:{...(p=e.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(l=(c=e.parameters)==null?void 0:c.docs)==null?void 0:l.source}}};var n,i,d;r.parameters={...r.parameters,docs:{...(n=r.parameters)==null?void 0:n.docs,source:{originalSource:`{ + args: { + multiple: true + } +}`,...(d=(i=r.parameters)==null?void 0:i.docs)==null?void 0:d.source}}};var m,u,f;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + accept: 'application/pdf' + } +}`,...(f=(u=a.parameters)==null?void 0:u.docs)==null?void 0:f.source}}};var g,_,y;t.parameters={...t.parameters,docs:{...(g=t.parameters)==null?void 0:g.docs,source:{originalSource:`{ + args: { + disabled: true + } +}`,...(y=(_=t.parameters)==null?void 0:_.docs)==null?void 0:y.source}}};const D=["Default","Multiple","Accept","Disabled"],E=Object.freeze(Object.defineProperty({__proto__:null,Accept:a,Default:e,Disabled:t,Multiple:r,__namedExportsOrder:D,default:j},Symbol.toStringTag,{value:"Module"}));export{a as A,t as D,E as F,r as M}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Footer.docs-CjMgAaEx.js b/demo-DES-720-add-issue-and-PR-templates/assets/Footer.docs-CjMgAaEx.js new file mode 100644 index 0000000000..24f115b00b --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Footer.docs-CjMgAaEx.js @@ -0,0 +1,32 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as i}from"./index-CRbi4mQH.js";import{M as s,d as r,P as a,f as m}from"./index-CQzUsdl8.js";import{F as c,O as p}from"./Footer.stories-C6wuxGcy.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-Dr6r5gIo.js";import"./PageMenu.stories-CI-pLzqM.js";import"./PageMenu-C-9UIlX6.js";import"./clsx-B-dksMZM.js";import"./Icon-j44OzEOs.js";import"./Spotlight-CscDyz0Q.js";import"./Grid-BRQJwiXa.js";import"./LinkList-QpW3ToL9.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./Paragraph-DpVlyIEJ.js";const l=` + +# Footer + +Provides service information at the bottom of every page. + +## Guidelines + +The Footer consists of a dark blue [Spotlight](/docs/components-containers-spotlight--docs) and a [Page Menu](?path=/docs/components-navigation-page-menu--docs). +It must be used on all websites for the City of Amsterdam. +For applications, only the Page Menu can be sufficient. +The Footer is the same on every page of the application. + +The Spotlight offers space for various practical links: + +- 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 menu at the very bottom is intended for links to privacy policies, cookie statements, information about the website itself, etc. +Contact details should not go here. +`;/*@license CC0-1.0*/function n(t){const o={h2:"h2",h3:"h3",p:"p",...i(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(s,{of:c}),` +`,e.jsx(r,{children:l}),` +`,e.jsx(a,{}),` +`,e.jsx(o.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(o.h3,{id:"onderzoek-en-statistiek",children:"Onderzoek en Statistiek"}),` +`,e.jsx(o.p,{children:`The footer for a specific website can be a bit different. +Here’s an example for the ‘Onderzoek en Statistiek’ department.`}),` +`,e.jsx(m,{of:p})]})}function A(t={}){const{wrapper:o}={...i(),...t.components};return o?e.jsx(o,{...t,children:e.jsx(n,{...t})}):n(t)}export{A as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Footer.stories-C6wuxGcy.js b/demo-DES-720-add-issue-and-PR-templates/assets/Footer.stories-C6wuxGcy.js new file mode 100644 index 0000000000..55cb95d454 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Footer.stories-C6wuxGcy.js @@ -0,0 +1,163 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{f as z,j as C,t as y,u as F,v as H,w as G,x as P}from"./index.esm-Dr6r5gIo.js";import{D as b}from"./PageMenu.stories-CI-pLzqM.js";import{c as k}from"./clsx-B-dksMZM.js";import{r as L}from"./index-uCp2LrAq.js";import{S}from"./Spotlight-CscDyz0Q.js";import{G as a}from"./Grid-BRQJwiXa.js";import{L as n}from"./LinkList-QpW3ToL9.js";import{H as r}from"./Heading-CGpdaMNv.js";import{P as c}from"./Paragraph-DpVlyIEJ.js";import{P as N}from"./PageMenu-C-9UIlX6.js";const B=L.forwardRef(({children:s,className:i,...l},t)=>e.jsx("div",{...l,ref:t,className:k("ams-footer__bottom",i),children:s}));B.displayName="Footer.Bottom";try{Footer.Bottom.displayName="Footer.Bottom",Footer.Bottom.__docgenInfo={description:"",displayName:"Footer.Bottom",props:{}}}catch{}const w=L.forwardRef(({children:s,className:i,...l},t)=>e.jsx(S,{...l,color:"dark-blue",ref:t,className:k("ams-footer__top",i),children:s}));w.displayName="Footer.Top";try{Footer.Top.displayName="Footer.Top",Footer.Top.__docgenInfo={description:"",displayName:"Footer.Top",props:{}}}catch{}const _=L.forwardRef(({children:s,className:i,...l},t)=>e.jsx("footer",{...l,ref:t,className:k("ams-footer",i),children:s}));_.displayName="Footer";const o=Object.assign(_,{Bottom:B,Top:w});try{o.displayName="Footer",o.__docgenInfo={description:"",displayName:"Footer",props:{}}}catch{}const V={title:"Components/Containers/Footer",component:o},O=[{icon:F,name:"Twitter"},{icon:H,name:"Facebook"},{icon:G,name:"Linkedin"},{icon:P,name:"Instagram"}];var g;const d={args:{children:[e.jsxs(o.Top,{children:[e.jsx(r,{className:"ams-visually-hidden",inverseColor:!0,children:"Colofon"}),e.jsxs(a,{gapVertical:"large",paddingVertical:"medium",children:[e.jsxs(a.Cell,{span:4,children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Meer weten"}),e.jsx(n,{children:["Veel gestelde vragen","Over ons","Werken bij","Kalender","Uit in Amsterdam","Bronnen"].map((s,i)=>e.jsx(n.Link,{href:"#",onBackground:"dark",size:"small",children:s},i))})]}),e.jsxs(a.Cell,{span:4,start:{narrow:1,medium:5,wide:5},children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Contact"}),e.jsx(c,{className:"ams-mb--xs",inverseColor:!0,size:"small",children:"Hebt u een vraag en kunt u het antwoord niet vinden op deze website? Neem dan contact met ons op."}),e.jsxs(n,{children:[e.jsx(n.Link,{href:"mailto:redactie@amsterdam.nl",icon:z,onBackground:"dark",size:"small",children:"E-mail"}),e.jsx(n.Link,{href:"tel:+3114020",icon:C,onBackground:"dark",size:"small",children:"14 020"}),e.jsx(n.Link,{href:"#",icon:y,onBackground:"dark",size:"small",children:"Contactgegevens en openingstijden"})]})]}),e.jsxs(a.Cell,{span:4,start:{narrow:1,medium:1,wide:9},children:[e.jsxs("section",{className:"ams-mb--md",children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Nieuwsbrief"}),e.jsx(n,{children:e.jsx(n.Link,{href:"#",onBackground:"dark",size:"small",children:"Inschrijven"})})]}),e.jsxs("section",{children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Volg ons"}),e.jsx(n,{children:O.map(({name:s,icon:i})=>e.jsx(n.Link,{href:"#",icon:i,onBackground:"dark",size:"small",children:s},s))})]})]})]})]},"footer-top"),e.jsxs(o.Bottom,{children:[e.jsx(r,{className:"ams-visually-hidden",level:2,children:"Over deze website"}),e.jsx(a,{paddingVertical:"small",children:e.jsx(a.Cell,{span:"all",children:e.jsx(N,{children:(g=b.args)==null?void 0:g.children})})})]},"footer-bottom")]}};var p;const m={args:{children:[e.jsxs(o.Top,{children:[e.jsx(r,{className:"ams-visually-hidden",inverseColor:!0,children:"Colofon"}),e.jsxs(a,{gapVertical:"large",paddingVertical:"medium",children:[e.jsxs(a.Cell,{span:3,children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Contact"}),e.jsx(c,{className:"ams-mb--xs",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:z,onBackground:"dark",size:"small",children:"E-mail"}),e.jsx(n.Link,{href:"tel:+31202510333",icon:C,onBackground:"dark",size:"small",children:"020 251 0333"})]})]}),e.jsxs(a.Cell,{span:3,start:{narrow:1,medium:5,wide:5},children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Panels en enquêtes"}),e.jsx(c,{className:"ams-mb--xs",inverseColor:!0,size:"small",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.jsxs(a.Cell,{span:3,start:{narrow:1,medium:1,wide:9},children:[e.jsx(r,{className:"ams-mb--xs",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(o.Bottom,{children:[e.jsx(r,{className:"ams-visually-hidden",level:2,children:"Over deze website"}),e.jsx(a,{paddingVertical:"small",children:e.jsx(a.Cell,{span:"all",children:e.jsx(N,{children:(p=b.args)==null?void 0:p.children})})})]},"footer-bottom")]}};var h,u,v;d.parameters={...d.parameters,docs:{...(h=d.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + children: [ + + Colofon + + + + + Meer weten + + + {['Veel gestelde vragen', 'Over ons', 'Werken bij', 'Kalender', 'Uit in Amsterdam', 'Bronnen'].map((label, index) => + {label} + )} + + + + + Contact + + + Hebt u een vraag en kunt u het antwoord niet vinden op deze website? Neem dan contact met ons op. + + + + E-mail + + + 14 020 + + + Contactgegevens en openingstijden + + + + +
    + + Nieuwsbrief + + + + Inschrijven + + +
    +
    + + Volg ons + + + {socialPlatforms.map(({ + name, + icon + }) => + {name} + )} + +
    +     +     +     , + + Over deze website + + + + {PageMenuStory.args?.children} + + + ] + } +}`,...(v=(u=d.parameters)==null?void 0:u.docs)==null?void 0:v.source}}};var x,f,j;m.parameters={...m.parameters,docs:{...(x=m.parameters)==null?void 0:x.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 + + + + {PageMenuStory.args?.children} + + + ] + } +}`,...(j=(f=m.parameters)==null?void 0:f.docs)==null?void 0:j.source}}};const T=["Default","Onderzoek"],J=Object.freeze(Object.defineProperty({__proto__:null,Default:d,Onderzoek:m,__namedExportsOrder:T,default:V},Symbol.toStringTag,{value:"Module"}));export{d as D,J as F,m as O}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/FormErrorList.docs-Bp-JYAfM.js b/demo-DES-720-add-issue-and-PR-templates/assets/FormErrorList.docs-Bp-JYAfM.js new file mode 100644 index 0000000000..12ec302117 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FormErrorList.docs-Bp-JYAfM.js @@ -0,0 +1,46 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as i,d as s,P as a,e as m}from"./index-CQzUsdl8.js";import{F as h}from"./FormErrorList.stories-DM8a4gf5.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./Alert-sdeIdlXL.js";import"./index.esm-Dr6r5gIo.js";import"./Icon-j44OzEOs.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./IconButton-BIJEN4e9.js";import"./LinkList-QpW3ToL9.js";const l=` + +# Form Error List + +Use this component at the top of a page to summarise any errors a user has made. +When a user makes an error, you must show both a Form Error List and an Error Message above each answer that contains an error. + +## Guidelines + +- Always show a Form Error List when there is a validation error, even if there’s only one. +- You must link the errors in the Form Error List to the answer they relate to (see below). + +## Linking from the Form Error List to each answer + +For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the \`id\` of that field. + +When a user has to enter their answer into multiple fields, such as day, month and year fields, link to the \`id\` of the first field that contains an error. +If you do not know which field contains an error, link to the \`id\` of the first field. + +For questions that require a user to select one or more options from a list using Radios or Checkboxes, link to the \`id\` of the first Radio or Checkbox. + +## Where to put the Form Error List + +Put the Form Error List directly above the first question on the page. Place it outside of the \`
    \`-tag, [to make sure screen readers do not skip it](https://nldesignsystem.nl/richtlijnen/formulieren/meerdere-stappen/#plaats-de-informatie-over-waar-de-gebruiker-is-in-de-stappen-boven-het-formulier). + +## Error count in document title + +This component adds the error count to the document title, +in line with [GOV.UK guidelines for informing users about validation errors](https://design-system.service.gov.uk/patterns/validation/#how-to-tell-the-user-about-validation-errors). + +## Relevant WCAG requirements + +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 Form Error List depends on where in the page it is placed, this may differ per page. + +## References + +- [Show an error summary above the form - NL Design System](https://www.nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen#zet-een-samenvatting-van-de-foutmeldingen-boven-het-formulier) +- [Error Summary component - Gov.uk](https://design-system.service.gov.uk/components/error-summary/) +`;/*@license CC0-1.0*/function n(t){return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:h}),` +`,e.jsx(s,{children:l}),` +`,e.jsx(a,{}),` +`,e.jsx(m,{})]})}function G(t={}){const{wrapper:r}={...o(),...t.components};return r?e.jsx(r,{...t,children:e.jsx(n,{...t})}):n()}export{G as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/FormErrorList.stories-DM8a4gf5.js b/demo-DES-720-add-issue-and-PR-templates/assets/FormErrorList.stories-DM8a4gf5.js new file mode 100644 index 0000000000..d19860e576 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FormErrorList.stories-DM8a4gf5.js @@ -0,0 +1,6 @@ +import{j as i}from"./jsx-runtime-X2b_N9AH.js";import{c as v}from"./clsx-B-dksMZM.js";import{r as l}from"./index-uCp2LrAq.js";import{A as y}from"./Alert-sdeIdlXL.js";import{L as d}from"./LinkList-QpW3ToL9.js";const L=(r,o={plural:"invoerfouten",singular:"invoerfout"})=>{const[e,a]=l.useState();return l.useEffect(()=>{a(document.title)},[]),e&&(r.length===1?document.title=`(${r.length} ${o.singular}) ${e}`:r.length>1?document.title=`(${r.length} ${o.plural}) ${e}`:document.title=e),null},n=l.forwardRef(({className:r,errorCountLabel:o,errors:e,heading:a="Verbeter de fouten voor u verder gaat",headingLevel:f=2,...g},h)=>{if(L(e,o),e.length!==0)return i.jsx(y,{...g,className:v("ams-form-error-list",r),heading:a,headingLevel:f,ref:h,role:"alert",severity:"error",children:i.jsx(d,{children:e.map(({id:s,label:u})=>i.jsx(d.Link,{href:s,children:u},`${s}-${u}`))})})});n.displayName="FormErrorList";try{n.displayName="FormErrorList",n.__docgenInfo={description:"",displayName:"FormErrorList",props:{errorCountLabel:{defaultValue:null,description:`The text following the error count. +This is used to show the error count in the document title.`,name:"errorCountLabel",required:!1,type:{name:"{ plural: string; singular: string; }"}},errors:{defaultValue:null,description:"The list of error messages to display.",name:"errors",required:!0,type:{name:"FormError[]"}},heading:{defaultValue:{value:"Verbeter de fouten voor u verder gaat"},description:"The text for the Heading.",name:"heading",required:!1,type:{name:"string"}},headingLevel:{defaultValue:{value:"2"},description:`The hierarchical level of the Heading within the document. +Note: this intentionally does not change the font size.`,name:"headingLevel",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const _={title:"Components/Forms/Form Error List",component:n,args:{errors:[{id:"#",label:"Vul een geldige datum in (bijvoorbeeld 6 januari 2030)."},{id:"#",label:"De geldigheidsdatum van uw paspoort moet in de toekomst liggen."}]}},t={};var m,c,p;t.parameters={...t.parameters,docs:{...(m=t.parameters)==null?void 0:m.docs,source:{originalSource:"{}",...(p=(c=t.parameters)==null?void 0:c.docs)==null?void 0:p.source}}};const E=["Default"],$=Object.freeze(Object.defineProperty({__proto__:null,Default:t,__namedExportsOrder:E,default:_},Symbol.toStringTag,{value:"Module"}));export{$ as F}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/FormFieldCharacterCounter.docs-B4Jwi6wT.js b/demo-DES-720-add-issue-and-PR-templates/assets/FormFieldCharacterCounter.docs-B4Jwi6wT.js new file mode 100644 index 0000000000..c2e304059b --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FormFieldCharacterCounter.docs-B4Jwi6wT.js @@ -0,0 +1,28 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as a,d as s,P as i,e as h,f as c}from"./index-CQzUsdl8.js";import{F as m,E as u}from"./FormFieldCharacterCounter.stories-DrptupD_.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.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. +`;/*@license CC0-1.0*/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-720-add-issue-and-PR-templates/assets/FormFieldCharacterCounter.stories-DrptupD_.js b/demo-DES-720-add-issue-and-PR-templates/assets/FormFieldCharacterCounter.stories-DrptupD_.js new file mode 100644 index 0000000000..e3510c13a6 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FormFieldCharacterCounter.stories-DrptupD_.js @@ -0,0 +1,9 @@ +import{j as h}from"./jsx-runtime-X2b_N9AH.js";import{c as f}from"./clsx-B-dksMZM.js";import{r as g}from"./index-uCp2LrAq.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-720-add-issue-and-PR-templates/assets/FormPage.docs-CKzWH4Dr.js b/demo-DES-720-add-issue-and-PR-templates/assets/FormPage.docs-CKzWH4Dr.js new file mode 100644 index 0000000000..c8c312c5f4 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FormPage.docs-CKzWH4Dr.js @@ -0,0 +1,5 @@ +import{j as o}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as i}from"./index-CRbi4mQH.js";import{M as p}from"./index-CQzUsdl8.js";import{F as e}from"./FormPage.stories-B02VmL6p.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-D-8Z0FST.js";import"./clsx-B-dksMZM.js";import"./index.esm-Dr6r5gIo.js";import"./config-CInvwkKL.js";import"./PageMenu.stories-CI-pLzqM.js";import"./PageMenu-C-9UIlX6.js";import"./Icon-j44OzEOs.js";import"./Footer.stories-C6wuxGcy.js";import"./Spotlight-CscDyz0Q.js";import"./Grid-BRQJwiXa.js";import"./LinkList-QpW3ToL9.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./Paragraph-DpVlyIEJ.js";/*@license CC0-1.0*/function m(t){const r={h1:"h1",p:"p",...i(),...t.components};return o.jsxs(o.Fragment,{children:[` +`,` +`,o.jsx(p,{of:e}),` +`,o.jsx(r.h1,{id:"form-page",children:"Form Page"}),` +`,o.jsx(r.p,{children:"This simple example presents various types of fields."})]})}function T(t={}){const{wrapper:r}={...i(),...t.components};return r?o.jsx(r,{...t,children:o.jsx(m,{...t})}):m(t)}export{T as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/FormPage.stories-B02VmL6p.js b/demo-DES-720-add-issue-and-PR-templates/assets/FormPage.stories-B02VmL6p.js new file mode 100644 index 0000000000..092d3f9545 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/FormPage.stories-B02VmL6p.js @@ -0,0 +1,4 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{G as d,B as m,H as g,F as a,L as n,P as l,a as b,b as v,c,C as y,T as s,R as o,d as f,S as t,A as F,e as w}from"./index.esm-D-8Z0FST.js";import{r as C}from"./index-uCp2LrAq.js";import{c as D}from"./config-CInvwkKL.js";const S=()=>{const[u,p]=C.useState(0);return e.jsx(d,{paddingTop:"small",paddingBottom:"medium",children:e.jsxs(d.Cell,{span:{narrow:4,medium:6,wide:8},start:{narrow:1,medium:2,wide:3},children:[e.jsx(m,{children:e.jsx(m.Link,{children:"Home"})}),e.jsx(g,{className:"ams-mb--md",children:"Contact"}),e.jsxs("form",{className:"ams-gap--md",id:"main",onSubmit:i=>i.preventDefault(),children:[e.jsxs(a,{children:[e.jsx(n,{htmlFor:"body",children:"Wat wilt u aan de gemeente vragen?"}),e.jsx(l,{id:"bodyDescription",size:"small",children:"Een duidelijke beschrijving van uw vraag helpt ons bij het behandelen."}),e.jsx(b,{"aria-describedby":"bodyDescription",id:"body",onChange:i=>p(i.target.value.length),rows:4}),e.jsx(v,{length:u,maxLength:1e3})]}),e.jsx(c,{"aria-describedby":"contactDetailsDescription",legend:"Wat zijn uw gegevens?",children:e.jsxs(y,{gap:"small",children:[e.jsx(l,{id:"contactDetailsDescription",children:"Wij hebben uw gegevens nodig om contact met u te kunnen opnemen."}),e.jsxs(a,{children:[e.jsx(n,{htmlFor:"initials",children:"Voorletters"}),e.jsx(s,{id:"initials",name:"initials"})]}),e.jsxs(a,{children:[e.jsx(n,{htmlFor:"familyName",children:"Achternaam"}),e.jsx(s,{autoComplete:"family-name",id:"familyName",name:"familyName"})]}),e.jsxs(c,{legend:"Woonplaats",children:[e.jsx(o,{name:"city",value:"amsterdam",children:"Amsterdam"}),e.jsx(o,{name:"city",value:"weesp",children:"Weesp"}),e.jsx(o,{name:"city",value:"anders",children:"Anders"})]}),e.jsxs(a,{children:[e.jsx(n,{htmlFor:"email",children:"E-mail"}),e.jsx(s,{autoComplete:"email",id:"email",name:"email"})]}),e.jsxs(f,{wrap:!0,children:[e.jsxs(a,{children:[e.jsx(n,{htmlFor:"countryCode",children:"Landnummer"}),e.jsxs(t,{id:"countryCode",name:"countryCode",children:[e.jsx(t.Option,{value:"+31",children:"Nederland +31"}),e.jsx(t.Option,{value:"+32",children:"België +32"}),e.jsx(t.Option,{value:"+33",children:"Frankrijk +33"})]})]}),e.jsxs(a,{children:[e.jsx(n,{htmlFor:"phone",children:"Telefoonnummer"}),e.jsx(s,{autoComplete:"tel",id:"phone",name:"phone"})]})]})]})}),e.jsx(F,{severity:"info",children:e.jsx(l,{children:"We bewaren uw contactgegevens voor het afhandelen van uw vraag of klacht en het verbeteren van onze dienstverlening."})}),e.jsx("div",{children:e.jsx(w,{type:"submit",children:"Versturen"})})]})]})})};/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const A={...D,title:"Pages/Amsterdam.nl/Form Page",component:S},r={};var h,j,x;r.parameters={...r.parameters,docs:{...(h=r.parameters)==null?void 0:h.docs,source:{originalSource:"{}",...(x=(j=r.parameters)==null?void 0:j.docs)==null?void 0:x.source}}};const L=["Default"],P=Object.freeze(Object.defineProperty({__proto__:null,Default:r,__namedExportsOrder:L,default:A},Symbol.toStringTag,{value:"Module"}));export{P as F}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Grid-BRQJwiXa.js b/demo-DES-720-add-issue-and-PR-templates/assets/Grid-BRQJwiXa.js new file mode 100644 index 0000000000..1f7da1a55e --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Grid-BRQJwiXa.js @@ -0,0 +1,5 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{c as u}from"./clsx-B-dksMZM.js";import{r as m}from"./index-uCp2LrAq.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-720-add-issue-and-PR-templates/assets/Grid.docs-B0cW20I1.js b/demo-DES-720-add-issue-and-PR-templates/assets/Grid.docs-B0cW20I1.js new file mode 100644 index 0000000000..259d2a331a --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Grid.docs-B0cW20I1.js @@ -0,0 +1,77 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as t}from"./index-CRbi4mQH.js";import{M as r,d as a,P as l,e as d,f as s}from"./index-CQzUsdl8.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-DMsNb0XN.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Screen-nsUNRErq.js";import"./clsx-B-dksMZM.js";import"./Grid-BRQJwiXa.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. +`;/*@license CC0-1.0*/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-720-add-issue-and-PR-templates/assets/Grid.stories-DMsNb0XN.js b/demo-DES-720-add-issue-and-PR-templates/assets/Grid.stories-DMsNb0XN.js new file mode 100644 index 0000000000..99900921f3 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Grid.stories-DMsNb0XN.js @@ -0,0 +1,62 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{S as E}from"./Screen-nsUNRErq.js";import{G as r}from"./Grid-BRQJwiXa.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-720-add-issue-and-PR-templates/assets/Header-B4IFHnsE.js b/demo-DES-720-add-issue-and-PR-templates/assets/Header-B4IFHnsE.js new file mode 100644 index 0000000000..cc645e6bf6 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Header-B4IFHnsE.js @@ -0,0 +1 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{c as u}from"./clsx-B-dksMZM.js";import{r as p}from"./index-uCp2LrAq.js";import{L as c}from"./Logo-B6EXimfo.js";import{H as h}from"./Heading-CGpdaMNv.js";const r=p.forwardRef(({appName:a,className:n,links:l,logoBrand:i="amsterdam",logoLink:d="/",logoLinkTitle:o="Ga naar de homepage",menu:s,...t},m)=>e.jsx(e.Fragment,{children:e.jsxs("header",{...t,ref:m,className:u("ams-header",n),children:[e.jsxs("a",{href:d,className:"ams-header__logo-link",children:[e.jsx("span",{className:"ams-visually-hidden",children:o}),e.jsx(c,{brand:i})]}),l&&e.jsx("div",{className:"ams-header__links",children:l}),s&&e.jsx("div",{className:"ams-header__menu",children:s}),a&&e.jsx("div",{className:"ams-header__app-name",children:e.jsx(h,{level:1,size:"level-3",className:"ams-header__app-name-heading",children:a})})]})}));r.displayName="Header";try{r.displayName="Header",r.__docgenInfo={description:"",displayName:"Header",props:{appName:{defaultValue:null,description:"The name of the application.",name:"appName",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"}},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"}},menu:{defaultValue:null,description:"A button to toggle the visibility of a Mega Menu.",name:"menu",required:!1,type:{name:"ReactNode"}}}}}catch{}export{r as H}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Header.docs-CngnaWhX.js b/demo-DES-720-add-issue-and-PR-templates/assets/Header.docs-CngnaWhX.js new file mode 100644 index 0000000000..7f7c0f3c5d --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Header.docs-CngnaWhX.js @@ -0,0 +1,48 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as s,d as r,P as m,e as h,f as t}from"./index-CQzUsdl8.js";import{H as p,W as d,a as l,b as c,c as u,d as f,e as g,f as x}from"./Header.stories-BEsaV2A7.js";import{S as w}from"./StatusBadge-CybIRuV-.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-Dr6r5gIo.js";import"./Header-B4IFHnsE.js";import"./clsx-B-dksMZM.js";import"./Logo-B6EXimfo.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./PageMenu-C-9UIlX6.js";import"./Icon-j44OzEOs.js";import"./Badge-BnLGL1Dc.js";const j=` + +# Header + +Displays the City’s logo at the top of every page, and optionally a navigation menu. +Includes the name of the application if it is not the general website. + +## Guidelines + +The Header must be used on all websites and applications for the City of Amsterdam. +It includes the logo of the City or the organization, the site title (except for the general website), and a menu with links to commonly used pages. + +The Header is important because it conveys our corporate identity and is the first thing people see. +Using it consistently helps users recognize and trust the website. +It is the same on every page of the application. + +The page menu can contain a maximum of 5 items. +The last two will often be ‘Search’ and ‘Menu’. +Labels should be short to ensure the menu fits on one line, even on medium-wide screens. +An icon can be added to the end of a link to make its function easier to find. + +## 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. +`;/*@license CC0-1.0*/function a(i){const e={a:"a",h2:"h2",p:"p",...o(),...i.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(s,{of:p}),` +`,n.jsx(w,{reason:"Needs work for narrow screens and integration with Mega Menu."}),` +`,n.jsx(r,{children:j}),` +`,n.jsx(m,{}),` +`,n.jsx(h,{}),` +`,n.jsx(e.h2,{id:"with-logo-variant",children:"With logo variant"}),` +`,n.jsx(t,{of:d}),` +`,n.jsx(e.h2,{id:"with-app-name",children:"With app name"}),` +`,n.jsx(t,{of:l}),` +`,n.jsx(e.h2,{id:"with-menu",children:"With menu"}),` +`,n.jsx(t,{of:c}),` +`,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:u}),` +`,n.jsx(e.h2,{id:"with-links-and-menu",children:"With links and menu"}),` +`,n.jsx(t,{of:f}),` +`,n.jsx(e.h2,{id:"with-app-name-and-menu",children:"With app name and menu"}),` +`,n.jsx(t,{of:g}),` +`,n.jsx(e.h2,{id:"with-app-name-links-and-menu",children:"With app name, links and menu"}),` +`,n.jsx(t,{of:x})]})}function U(i={}){const{wrapper:e}={...o(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(a,{...i})}):a(i)}export{U as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Header.stories-BEsaV2A7.js b/demo-DES-720-add-issue-and-PR-templates/assets/Header.stories-BEsaV2A7.js new file mode 100644 index 0000000000..432f87c87c --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Header.stories-BEsaV2A7.js @@ -0,0 +1,53 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{e as u}from"./index.esm-Dr6r5gIo.js";import{H as D}from"./Header-B4IFHnsE.js";import{P as n}from"./PageMenu-C-9UIlX6.js";const G={title:"Components/Containers/Header",component:D},a={},r={args:{logoBrand:"ggd-amsterdam",logoLink:"https://www.ggd.amsterdam.nl/",logoLinkTitle:"Naar de homepage van de GGD Amsterdam"}},s={args:{appName:"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"})}},m={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"})]}),menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"})}},i={args:{appName:"Aan de Amsterdamse grachten",menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"})}},c={args:{appName:"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,g,p;a.parameters={...a.parameters,docs:{...(d=a.parameters)==null?void 0:d.docs,source:{originalSource:"{}",...(p=(g=a.parameters)==null?void 0:g.docs)==null?void 0:p.source}}};var h,l,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=(l=r.parameters)==null?void 0:l.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: { + appName: 'Aan de Amsterdamse grachten' + } +}`,...(f=(L=s.parameters)==null?void 0:L.docs)==null?void 0:f.source}}};var A,P,j;t.parameters={...t.parameters,docs:{...(A=t.parameters)==null?void 0:A.docs,source:{originalSource:`{ + args: { + links: + Contact + Mijn Amsterdam + + Zoeken + + + } +}`,...(j=(P=t.parameters)==null?void 0:P.docs)==null?void 0:j.source}}};var b,N,_;o.parameters={...o.parameters,docs:{...(b=o.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + menu: + } +}`,...(_=(N=o.parameters)==null?void 0:N.docs)==null?void 0:_.source}}};var x,S,W;m.parameters={...m.parameters,docs:{...(x=m.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + links: + Contact + Mijn Amsterdam + + Zoeken + + , + menu: + } +}`,...(W=(S=m.parameters)==null?void 0:S.docs)==null?void 0:W.source}}};var w,C,E;i.parameters={...i.parameters,docs:{...(w=i.parameters)==null?void 0:w.docs,source:{originalSource:`{ + args: { + appName: 'Aan de Amsterdamse grachten', + menu: + } +}`,...(E=(C=i.parameters)==null?void 0:C.docs)==null?void 0:E.source}}};var Z,H,v;c.parameters={...c.parameters,docs:{...(Z=c.parameters)==null?void 0:Z.docs,source:{originalSource:`{ + args: { + appName: 'Aan de Amsterdamse grachten', + links: + Contact + Mijn Amsterdam + + Zoeken + + , + menu: + } +}`,...(v=(H=c.parameters)==null?void 0:H.docs)==null?void 0:v.source}}};const I=["Default","WithLogoVariant","WithAppName","WithLinks","WithMenu","WithLinksAndMenu","WithAppNameAndMenu","WithAppNameLinksAndMenu"],V=Object.freeze(Object.defineProperty({__proto__:null,Default:a,WithAppName:s,WithAppNameAndMenu:i,WithAppNameLinksAndMenu:c,WithLinks:t,WithLinksAndMenu:m,WithLogoVariant:r,WithMenu:o,__namedExportsOrder:I,default:G},Symbol.toStringTag,{value:"Module"}));export{V as H,r as W,s as a,o as b,t as c,m as d,i as e,c as f}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Heading-CGpdaMNv.js b/demo-DES-720-add-issue-and-PR-templates/assets/Heading-CGpdaMNv.js new file mode 100644 index 0000000000..bdfd7a10d6 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Heading-CGpdaMNv.js @@ -0,0 +1 @@ +import{j as d}from"./jsx-runtime-X2b_N9AH.js";import{c as m}from"./clsx-B-dksMZM.js";import{r as c}from"./index-uCp2LrAq.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-720-add-issue-and-PR-templates/assets/Heading.docs-DT8yEmyU.js b/demo-DES-720-add-issue-and-PR-templates/assets/Heading.docs-DT8yEmyU.js new file mode 100644 index 0000000000..c326ef7a55 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Heading.docs-DT8yEmyU.js @@ -0,0 +1,47 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as i}from"./index-CRbi4mQH.js";import{M as r,d as a,P as h,e as d,f as s}from"./index-CQzUsdl8.js";import{H as c,a as g,b as l,c as p,d as u,I as m}from"./Heading.stories-C2Lpw7Of.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./decorators-CMqafKrE.js";import"./exampleContent-BEbrefRz.js";import"./Heading-CGpdaMNv.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/) +`;/*@license CC0-1.0*/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-720-add-issue-and-PR-templates/assets/Heading.stories-C2Lpw7Of.js b/demo-DES-720-add-issue-and-PR-templates/assets/Heading.stories-C2Lpw7Of.js new file mode 100644 index 0000000000..3f4d53720d --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Heading.stories-C2Lpw7Of.js @@ -0,0 +1,20 @@ +import{i as T}from"./decorators-CMqafKrE.js";import{c as y}from"./exampleContent-BEbrefRz.js";import{H as D}from"./Heading-CGpdaMNv.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,C,b;o.parameters={...o.parameters,docs:{...(S=o.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + level: 4 + } +}`,...(b=(C=o.parameters)==null?void 0:C.docs)==null?void 0:b.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-720-add-issue-and-PR-templates/assets/HomePage.docs-Cs-CMf-6.js b/demo-DES-720-add-issue-and-PR-templates/assets/HomePage.docs-Cs-CMf-6.js new file mode 100644 index 0000000000..37146669af --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/HomePage.docs-Cs-CMf-6.js @@ -0,0 +1,39 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as o}from"./index-CRbi4mQH.js";import{M as t}from"./index-CQzUsdl8.js";import{H as a}from"./HomePage.stories-CgERA_bc.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-D-8Z0FST.js";import"./clsx-B-dksMZM.js";import"./index.esm-Dr6r5gIo.js";import"./Overlap.stories-CyLzdqTb.js";import"./SearchField-BywiADXF.js";import"./Icon-j44OzEOs.js";import"./AspectRatio-DxP_kpbd.js";import"./Image-Bf5zYcta.js";import"./Grid-BRQJwiXa.js";import"./config-CInvwkKL.js";import"./PageMenu.stories-CI-pLzqM.js";import"./PageMenu-C-9UIlX6.js";import"./Footer.stories-C6wuxGcy.js";import"./Spotlight-CscDyz0Q.js";import"./LinkList-QpW3ToL9.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./Paragraph-DpVlyIEJ.js";/*@license CC0-1.0*/function r(i){const e={code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...o(),...i.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(t,{of:a}),` +`,n.jsx(e.h1,{id:"home-page",children:"Home Page"}),` +`,n.jsx(e.h2,{id:"layout",children:"Layout"}),` +`,n.jsx(e.p,{children:"A typical layout for a homepage:"}),` +`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`Direct naar inhoud + + +
    + +
    + + + + + + + + +
    +
    + +
    + +`})}),` +`,n.jsxs(e.ol,{children:[` +`,n.jsx(e.li,{children:"The Skip Link prevents users from having to pass all preceding navigation links."}),` +`,n.jsx(e.li,{children:"The Screen component sets a maximum width for the entire page."}),` +`,n.jsx(e.li,{children:"The Grid divides the available width into 4, 8, or 12 columns."}),` +`,n.jsx(e.li,{children:"The Header shows the logo and menus for the application."}),` +`,n.jsx(e.li,{children:`The main element wraps everything between Header and Footer. +It carries an id for the skip link to target.`}),` +`,n.jsx(e.li,{children:`An Overlap stacks a Search Field on a background Image. +It is as wide as the Grid, hence it is a sibling of it.`}),` +`,n.jsx(e.li,{children:"Other components in the main area are laid out on a Grid again."}),` +`,n.jsx(e.li,{children:`The Footer contains its own Grid. +This allows its background colour to stretch to the Screen’s width.`}),` +`]})]})}function _(i={}){const{wrapper:e}={...o(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(r,{...i})}):r(i)}export{_ as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/HomePage.stories-CgERA_bc.js b/demo-DES-720-add-issue-and-PR-templates/assets/HomePage.stories-CgERA_bc.js new file mode 100644 index 0000000000..109b4f8ffa --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/HomePage.stories-CgERA_bc.js @@ -0,0 +1,4 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{G as s,H as i,o as n,n as a,I as d,k as j,P as l,l as t,O as x}from"./index.esm-D-8Z0FST.js";import{D as u}from"./Overlap.stories-CyLzdqTb.js";import{c as p}from"./config-CInvwkKL.js";const g=()=>e.jsxs(s,{paddingVertical:"medium",children:[e.jsx(s.Cell,{span:"all",children:e.jsx(i,{level:2,children:"Nieuws"})}),e.jsx(s.Cell,{span:4,children:e.jsxs(n,{children:[e.jsx(a,{ratio:"x-wide",children:e.jsx(d,{alt:"",src:"https://picsum.photos/640/360?random=1"})}),e.jsx(n.HeadingGroup,{tagline:"Nieuws",children:e.jsx(i,{level:2,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Nederlands eerste houten woonwijk komt in Zuidoost"})})})]})}),e.jsx(s.Cell,{span:4,children:e.jsxs(n,{children:[e.jsx(a,{ratio:"x-wide",children:e.jsx(d,{alt:"",src:"https://picsum.photos/640/360?random=2"})}),e.jsx(n.HeadingGroup,{tagline:"Nieuws",children:e.jsx(i,{level:2,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Gratis openbaar vervoer voor kinderen"})})})]})}),e.jsx(s.Cell,{span:4,children:e.jsxs(n,{children:[e.jsx(a,{ratio:"x-wide",children:e.jsx(d,{alt:"",src:"https://picsum.photos/640/360?random=3"})}),e.jsx(n.HeadingGroup,{tagline:"Nieuws",children:e.jsx(i,{level:2,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Zonnepanelen op uw dak? Zo houdt u uw huis veilig"})})})]})})]}),v=()=>e.jsx(j,{color:"purple",children:e.jsxs(s,{paddingVertical:"medium",children:[e.jsxs(s.Cell,{span:{narrow:4,medium:4,wide:6},children:[e.jsx(i,{className:"ams-mb--xs",inverseColor:!0,size:"level-2",children:"Ontheffing of vergunning"}),e.jsxs(l,{className:"ams-mb--sm",inverseColor:!0,children:["Check welke ontheffing of vergunning u nodig heeft. Bijvoorbeeld een RVV, TVM, objectvergunning,"," ","nachtwerkontheffing, e-RVV, e-TVM of filmmelding. Dat regult u allemaal met 1 formulier."]}),e.jsx(t,{href:"#",onBackground:"dark",variant:"standalone",children:"Eenvoudig regelen"})]}),e.jsxs(s.Cell,{span:{narrow:4,medium:4,wide:6},children:[e.jsx(i,{className:"ams-mb--xs",inverseColor:!0,size:"level-2",children:"Werkzaamheden"}),e.jsx(l,{className:"ams-mb--sm",inverseColor:!0,children:"Lees waar en wanneer we werken aan nieuwbouw, groot onderhoud, herinrichting van straten en wegen, aanpak van parken of ontwikkeling van hele gebieden."}),e.jsx(t,{href:"#",onBackground:"dark",variant:"standalone",children:"Alle bouw- en verkeerswerkzaamheden"})]})]})}),w=()=>e.jsxs(s,{paddingVertical:"medium",children:[e.jsx(s.Cell,{span:"all",children:e.jsx(i,{children:"Belangrijkste onderwerpen"})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(i,{level:2,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Gemeentebelastingen"})}),e.jsx(l,{size:"small",children:"Bekijk welke belastingen en heffingen er zijn, hoe u bezwaar maakt of een betalingsregeling treft."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(i,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Parkeren + Reizen (P+R)"})}),e.jsx(l,{size:"small",children:"U kunt met uw auto goedkoop parkeren bij een P+R-locatie aan de rand van de stad."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(i,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Paspoort, ID-kaart en rijbewijs"})}),e.jsx(l,{size:"small",children:"Vraag deze bewijzen aan of verleng ze. Geef een vermissing aan."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(i,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Onderwijs"})}),e.jsx(l,{size:"small",children:"Meld een kind aan voor basisschool, middelbare school of kinderopvang. Bekijk het kindtegoed op uw Stadspas."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(i,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Meldingen openbare ruimte en overlast"})}),e.jsx(l,{size:"small",children:"Ziet u op straat of in een park iets waarvan u wilt dat het gemaakt of opgeruimd wordt, dan kunt u dat bij de gemeente melden."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(i,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Verhuizing doorgeven"})}),e.jsx(l,{size:"small",children:"Geef uw nieuwe adres door als u binnen Amsterdam of naar Amsterdam verhuist."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(i,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Grof afval"})}),e.jsx(l,{size:"small",children:"Grof afval zijn spullen die niet in een vuilniszak passen."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(i,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Kennisgevingen en bekendmakingen"})}),e.jsx(l,{size:"small",children:"Kennisgevingen en bekendmakingen van de gemeente Amsterdam van de laatste 8 weken."})]})})]}),k=()=>{var o;return e.jsxs("main",{id:"main",children:[e.jsx(x,{children:(o=u.args)==null?void 0:o.children}),e.jsx(w,{}),e.jsx(v,{}),e.jsx(g,{})]})};/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const f={...p,title:"Pages/Amsterdam.nl/Home Page",component:k},r={};var h,c,m;r.parameters={...r.parameters,docs:{...(h=r.parameters)==null?void 0:h.docs,source:{originalSource:"{}",...(m=(c=r.parameters)==null?void 0:c.docs)==null?void 0:m.source}}};const z=["Default"],G=Object.freeze(Object.defineProperty({__proto__:null,Default:r,__namedExportsOrder:z,default:f},Symbol.toStringTag,{value:"Module"}));export{G as H}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Icon-j44OzEOs.js b/demo-DES-720-add-issue-and-PR-templates/assets/Icon-j44OzEOs.js new file mode 100644 index 0000000000..4c98ff0570 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Icon-j44OzEOs.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-X2b_N9AH.js";import{c as t}from"./clsx-B-dksMZM.js";import{r as c}from"./index-uCp2LrAq.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-720-add-issue-and-PR-templates/assets/Icon.docs-B1swQ_UA.js b/demo-DES-720-add-issue-and-PR-templates/assets/Icon.docs-B1swQ_UA.js new file mode 100644 index 0000000000..e7325e4a2e --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Icon.docs-B1swQ_UA.js @@ -0,0 +1,67 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as a}from"./index-CRbi4mQH.js";import{M as i,d as r,P as c,e as l,f as o}from"./index-CQzUsdl8.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-BL7KcvGF.js";import{S as g}from"./StatusBadge-CybIRuV-.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-Dr6r5gIo.js";import"./Icon-j44OzEOs.js";import"./clsx-B-dksMZM.js";import"./Heading-CGpdaMNv.js";import"./getHeadingElement-DiRwFEz7.js";import"./Badge-BnLGL1Dc.js";const j=` + +# 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). + +## Overview + +[You can find an overview of the available icons here](/docs/docs-assets-icons--docs). +`;/*@license CC0-1.0*/function s(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...a(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:h}),` +`,e.jsx(g,{reason:"The set of available icon names and the component API will change."}),` +`,e.jsx(r,{children:j}),` +`,e.jsx(n.h2,{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 G(t={}){const{wrapper:n}={...a(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{G as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Icon.stories-BL7KcvGF.js b/demo-DES-720-add-issue-and-PR-templates/assets/Icon.stories-BL7KcvGF.js new file mode 100644 index 0000000000..818e0c9887 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Icon.stories-BL7KcvGF.js @@ -0,0 +1,44 @@ +import{j as s}from"./jsx-runtime-X2b_N9AH.js";import{I as m,f as e}from"./index.esm-Dr6r5gIo.js";import{I as W}from"./Icon-j44OzEOs.js";import{H as D}from"./Heading-CGpdaMNv.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-720-add-issue-and-PR-templates/assets/IconButton-BIJEN4e9.js b/demo-DES-720-add-issue-and-PR-templates/assets/IconButton-BIJEN4e9.js new file mode 100644 index 0000000000..11a5ca22c8 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/IconButton-BIJEN4e9.js @@ -0,0 +1 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{d as i}from"./index.esm-Dr6r5gIo.js";import{c}from"./clsx-B-dksMZM.js";import{r as d}from"./index-uCp2LrAq.js";import{I as m}from"./Icon-j44OzEOs.js";const t=d.forwardRef(({className:a,label:o,onBackground:n,size:l="level-5",svg:r=i,...s},u)=>e.jsxs("button",{...s,ref:u,className:c("ams-icon-button",n==="light"&&"ams-icon-button--on-background-light",n==="dark"&&"ams-icon-button--on-background-dark",a),children:[e.jsx("span",{className:"ams-visually-hidden",children:o}),e.jsx(m,{svg:r,size:l,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-720-add-issue-and-PR-templates/assets/IconButton.docs-nZrbdEZU.js b/demo-DES-720-add-issue-and-PR-templates/assets/IconButton.docs-nZrbdEZU.js new file mode 100644 index 0000000000..2116468139 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/IconButton.docs-nZrbdEZU.js @@ -0,0 +1,37 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as r}from"./index-CRbi4mQH.js";import{M as i,d as a,P as l,e as c,f as t}from"./index-CQzUsdl8.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-DKRSQlw9.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-Dr6r5gIo.js";import"./IconButton-BIJEN4e9.js";import"./clsx-B-dksMZM.js";import"./Icon-j44OzEOs.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). +`;/*@license CC0-1.0*/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 P(o={}){const{wrapper:e}={...r(),...o.components};return e?n.jsx(e,{...o,children:n.jsx(s,{...o})}):s(o)}export{P as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/IconButton.stories-DKRSQlw9.js b/demo-DES-720-add-issue-and-PR-templates/assets/IconButton.stories-DKRSQlw9.js new file mode 100644 index 0000000000..331b8c3484 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/IconButton.stories-DKRSQlw9.js @@ -0,0 +1,28 @@ +import{I as c}from"./index.esm-Dr6r5gIo.js";import{I as j}from"./IconButton-BIJEN4e9.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-720-add-issue-and-PR-templates/assets/Image-Bf5zYcta.js b/demo-DES-720-add-issue-and-PR-templates/assets/Image-Bf5zYcta.js new file mode 100644 index 0000000000..85d0c05b3c --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Image-Bf5zYcta.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-X2b_N9AH.js";import{c as t}from"./clsx-B-dksMZM.js";import{r as m}from"./index-uCp2LrAq.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-720-add-issue-and-PR-templates/assets/Image.docs-ChKzMTlM.js b/demo-DES-720-add-issue-and-PR-templates/assets/Image.docs-ChKzMTlM.js new file mode 100644 index 0000000000..0a5f8cc55d --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Image.docs-ChKzMTlM.js @@ -0,0 +1,40 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as s}from"./index-CRbi4mQH.js";import{M as r,d as a,P as l,e as c,f as o}from"./index-CQzUsdl8.js";import{I as d,M as h,L as m}from"./Image.stories-4Fpvxr85.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Image-Bf5zYcta.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. +`;/*@license CC0-1.0*/function i(n){const t={a:"a",code:"code",h2:"h2",p:"p",...s(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(r,{of:d}),` +`,e.jsx(a,{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. +Don’t forget to still include the required `,e.jsx(t.code,{children:"src"})," attribute."]}),` +`,e.jsx(o,{of:h}),` +`,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:m})]})}function E(n={}){const{wrapper:t}={...s(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(i,{...n})}):i(n)}export{E as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Image.stories-4Fpvxr85.js b/demo-DES-720-add-issue-and-PR-templates/assets/Image.stories-4Fpvxr85.js new file mode 100644 index 0000000000..e1e8a2c636 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Image.stories-4Fpvxr85.js @@ -0,0 +1,33 @@ +import{I as l}from"./Image-Bf5zYcta.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:"",src:"https://picsum.photos/1280/720",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,o,a;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.' + } + } +}`,...(a=(o=s.parameters)==null?void 0:o.docs)==null?void 0:a.source}}};var n,c,p;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:`{ + args: { + alt: '', + src: 'https://picsum.photos/1280/720', + 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 h=["Default","MultipleSources","LazyLoading"],f=Object.freeze(Object.defineProperty({__proto__:null,Default:s,LazyLoading:t,MultipleSources:e,__namedExportsOrder:h,default:d},Symbol.toStringTag,{value:"Module"}));export{f as I,t as L,e as M}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Introduction.docs-XOQ-CuKe.js b/demo-DES-720-add-issue-and-PR-templates/assets/Introduction.docs-XOQ-CuKe.js new file mode 100644 index 0000000000..d5e99ef807 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Introduction.docs-XOQ-CuKe.js @@ -0,0 +1,22 @@ +import{j as e}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as s}from"./index-CRbi4mQH.js";import{M as i}from"./index-CQzUsdl8.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";/*@license CC0-1.0*/function o(n){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",...s(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{title:"Pages/Introduction"}),` +`,e.jsx(t.h1,{id:"introduction",children:"Introduction"}),` +`,e.jsx(t.p,{children:`This section demonstrates how to compose pages using the Design System’s components. +It uses the latest release of the libraries, without any customizations, giving an honest representation of what can be achieved with them and how they work in the browser.`}),` +`,e.jsx(t.p,{children:"Currently, we offer a home page and an article page for the upcoming Amsterdam.nl website."}),` +`,e.jsx(t.h2,{id:"documentation",children:"Documentation"}),` +`,e.jsx(t.p,{children:"The ‘Docs’ page explains the design decisions for this type of page and how to build it."}),` +`,e.jsx(t.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(t.p,{children:"Each example, of which the first is called ‘Default’, shows the actual page in its entirety."}),` +`,e.jsx(t.h3,{id:"flexible-content",children:"Flexible content"}),` +`,e.jsx(t.p,{children:`Reload an example to get new random texts and images. +Use the Control tab to experiment with your own content.`}),` +`,e.jsx(t.h3,{id:"test-for-accessibility-and-see-html-output",children:"Test for accessibility and see HTML output"}),` +`,e.jsx(t.p,{children:`The ‘Accessibility’ tab offers a report of various automatic tests. +The ‘HTML’ tab displays the entire HTML-document rendered by all components on the page.`}),` +`,e.jsx(t.h3,{id:"check-how-the-page-would-look-on-various-devices",children:"Check how the page would look on various devices"}),` +`,e.jsx(t.p,{children:"The buttons in the toolbar offer various features, of which the ‘three layered square’ button replicates the appearance and behaviour of the page on a phone, tablet or desktop. Press the button with the two arrows to rotate the screen."}),` +`,e.jsx(t.h3,{id:"see-the-page-full-screen",children:"See the page full-screen"}),` +`,e.jsxs(t.p,{children:["Use the ‘Go to full screen’ (or press ",e.jsx(t.code,{children:"alt+F"}),`) or ‘Open canvas in new tab’ buttons to the top right to see the entire page. +Alternatively, press `,e.jsx(t.code,{children:"alt+S,T,A"})," to hide the three panels."]})]})}function w(n={}){const{wrapper:t}={...s(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(o,{...n})}):o(n)}export{w as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Label-BnSmP98q.js b/demo-DES-720-add-issue-and-PR-templates/assets/Label-BnSmP98q.js new file mode 100644 index 0000000000..0f8fa7838a --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Label-BnSmP98q.js @@ -0,0 +1 @@ +import{j as t}from"./jsx-runtime-X2b_N9AH.js";import{c as l}from"./clsx-B-dksMZM.js";import{r as p}from"./index-uCp2LrAq.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-720-add-issue-and-PR-templates/assets/Label.docs-CqkRUEGD.js b/demo-DES-720-add-issue-and-PR-templates/assets/Label.docs-CqkRUEGD.js new file mode 100644 index 0000000000..5803d69721 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Label.docs-CqkRUEGD.js @@ -0,0 +1,15 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as e}from"./index-CRbi4mQH.js";import{M as s,d as i,P as a,e as m}from"./index-CQzUsdl8.js";import{L as p}from"./Label.stories-BasMlsJU.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Label-BnSmP98q.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. +`;/*@license CC0-1.0*/function r(t){return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(s,{of:p}),` +`,n.jsx(i,{children:c}),` +`,n.jsx(a,{}),` +`,n.jsx(m,{})]})}function E(t={}){const{wrapper:o}={...e(),...t.components};return o?n.jsx(o,{...t,children:n.jsx(r,{...t})}):r()}export{E as default}; diff --git a/demo-DES-720-add-issue-and-PR-templates/assets/Label.stories-BasMlsJU.js b/demo-DES-720-add-issue-and-PR-templates/assets/Label.stories-BasMlsJU.js new file mode 100644 index 0000000000..171af6e116 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Label.stories-BasMlsJU.js @@ -0,0 +1,4 @@ +import{L as a}from"./Label-BnSmP98q.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-720-add-issue-and-PR-templates/assets/Link-DP3a_gY9.js b/demo-DES-720-add-issue-and-PR-templates/assets/Link-DP3a_gY9.js new file mode 100644 index 0000000000..de9814b13c --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Link-DP3a_gY9.js @@ -0,0 +1 @@ +import{j as o}from"./jsx-runtime-X2b_N9AH.js";import{c as s}from"./clsx-B-dksMZM.js";import{r as d}from"./index-uCp2LrAq.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:'"light"'},{value:'"dark"'},{value:'"default"'}]}},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-720-add-issue-and-PR-templates/assets/Link.docs-c_wyVmXu.js b/demo-DES-720-add-issue-and-PR-templates/assets/Link.docs-c_wyVmXu.js new file mode 100644 index 0000000000..f554840378 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Link.docs-c_wyVmXu.js @@ -0,0 +1,67 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as s}from"./index-CRbi4mQH.js";import{M as a,d as r,P as l,e as c,f as i}from"./index-CQzUsdl8.js";import{L as h,S as d,I as p,o as m,a as g}from"./Link.stories-DJAhNfgD.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./Link-DP3a_gY9.js";import"./clsx-B-dksMZM.js";import"./Paragraph-DpVlyIEJ.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. +`;/*@license CC0-1.0*/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-720-add-issue-and-PR-templates/assets/Link.stories-DJAhNfgD.js b/demo-DES-720-add-issue-and-PR-templates/assets/Link.stories-DJAhNfgD.js new file mode 100644 index 0000000000..55fdbb08a0 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/Link.stories-DJAhNfgD.js @@ -0,0 +1,31 @@ +import{j as r}from"./jsx-runtime-X2b_N9AH.js";import{L as x}from"./Link-DP3a_gY9.js";import{P as j}from"./Paragraph-DpVlyIEJ.js";const B={title:"Components/Navigation/Link",component:x,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:"1rem"},children:r.jsx(e,{})})]},t={args:{onBackground:"light"},decorators:[e=>r.jsx("div",{style:{background:"#FFE600",display:"inline",padding:"1rem"},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 S,v,b;t.parameters={...t.parameters,docs:{...(S=t.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + onBackground: 'light' + }, + decorators: [Story =>
    + +
    ] +}`,...(b=(v=t.parameters)==null?void 0:v.docs)==null?void 0:b.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-720-add-issue-and-PR-templates/assets/LinkList-QpW3ToL9.js b/demo-DES-720-add-issue-and-PR-templates/assets/LinkList-QpW3ToL9.js new file mode 100644 index 0000000000..87aae01a03 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/LinkList-QpW3ToL9.js @@ -0,0 +1 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{c as r}from"./clsx-B-dksMZM.js";import{r as o}from"./index-uCp2LrAq.js";import{g as p}from"./index.esm-Dr6r5gIo.js";import{I as L}from"./Icon-j44OzEOs.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:'"light"'},{value:'"dark"'},{value:'"default"'}]}},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-720-add-issue-and-PR-templates/assets/LinkList.docs-BXHRMP5Q.js b/demo-DES-720-add-issue-and-PR-templates/assets/LinkList.docs-BXHRMP5Q.js new file mode 100644 index 0000000000..67c874d657 --- /dev/null +++ b/demo-DES-720-add-issue-and-PR-templates/assets/LinkList.docs-BXHRMP5Q.js @@ -0,0 +1,47 @@ +import{j as n}from"./jsx-runtime-X2b_N9AH.js";import{useMDXComponents as r}from"./index-CRbi4mQH.js";import{M as l,d as a,P as c,f as o,e as h}from"./index-CQzUsdl8.js";import{L as d,C as m,S as p,a as s,O as x,b as u}from"./LinkList.stories-DSn8SnnP.js";import"./index-uCp2LrAq.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CbXJy8Sf.js";import"../sb-preview/runtime.js";import"./index-BOkhicXD.js";import"./index-DXimoRZY.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-Dr6r5gIo.js";import"./exampleContent-BEbrefRz.js";import"./LinkList-QpW3ToL9.js";import"./clsx-B-dksMZM.js";import"./Icon-j44OzEOs.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. +`;/*@license CC0-1.0*/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:"