Deploying to gh-pages from @ 1ad758c 🚀

demo-DES-654-table-of-content/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.2.0](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.1.8...design-system-assets-v0.2.0) (2024-03-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125))
+
+### Features
+
+* Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125)) ([1c81f3b](https://github.com/Amsterdam/design-system/commit/1c81f3bd14c1f202eec2341aec1888fb74d956d5))
+
+## [0.1.8](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.1.7...design-system-assets-v0.1.8) (2024-03-08)
+
+
+### Features
+
+* Logo Museum Weesp  ([#1088](https://github.com/Amsterdam/design-system/issues/1088)) ([da1b780](https://github.com/Amsterdam/design-system/commit/da1b7808b5bcf17acb93fe46531a9722814e9256))
+
+## [0.1.7](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2024-01-31)
+
+**Note:** Version bump only for package @amsterdam/design-system-assets
+
+## [0.1.6](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-22)
+
+**Note:** Version bump only for package @amsterdam/design-system-assets
+
+## [0.1.5](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-01)
+
+**Note:** Version bump only for package @amsterdam/design-system-assets
+
+## [0.1.4](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-11-27)
+
+**Note:** Version bump only for package @amsterdam/design-system-assets

demo-DES-654-table-of-content/LICENSE.md

@@ -0,0 +1,7 @@
+<!-- @license CC0-1.0 -->
+
+# License
+
+The open source license does NOT apply to files in this directory.
+
+These are properietary assets to the City of Amsterdam.

demo-DES-654-table-of-content/README.md

@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+# 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).

demo-DES-654-table-of-content/assets/Accordion.docs-oCaqCB5W.js

@@ -0,0 +1,73 @@
+import{j as e}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as s}from"./index-DlpNa54Y.js";import{M as i,d as r,P as c,e as d,f as o}from"./index-ahswvvAf.js";import{A as h,E as l,T as p}from"./Accordion.stories-BDkuSoA4.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./exampleContent-CRK3_7Hv.js";import"./clsx-B-dksMZM.js";import"./index.esm-DQkeu4as.js";import"./getHeadingElement-DiRwFEz7.js";import"./Icon-CuaumHXX.js";import"./useKeyboardFocus-CRUFsA_C.js";import"./Paragraph-C4jU4-Z4.js";const m=`<!-- @license CC0-1.0 -->
+
+# 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 \`<section>\` for this)
+- [WCAG requirement 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): contrast between text and background and between icon and background is sufficient in all variants, all interactive statuses and all possible combinations.
+- [WCAG requirement 3.2.1](https://www.w3.org/TR/WCAG21/#on-focus): do not automatically make the accordion expanded when the button gets focus.
+- [WCAG requirement 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): Support the optional keys: \`Down Arrow\`, \`Up Arrow\`, \`Home\` and \`End\`.
+- \`Space\` should activate the button, not scroll the page (use \`keypressEvt.preventDefault()\`).
+- [WCAG requirement 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): The text used both as a heading and as a label for the button must be clear because the content is not always visible.
+- [WCAG requirement 2.4.10](https://www.w3.org/TR/WCAG21/#section-headings): accordions that are part of the running text must use section headings.
+
+## References
+
+- [W3C - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
+`;function a(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...s(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:h}),`
+`,e.jsx(r,{children:m}),`
+`,e.jsxs(n.p,{children:[`Each accordion section has its unique name.
+Provide this name via the `,e.jsx(n.code,{children:"label"})," property of the ",e.jsx(n.code,{children:"Accordion.Section"})," component."]}),`
+`,e.jsx(c,{}),`
+`,e.jsx(d,{}),`
+`,e.jsx(n.h2,{id:"examples",children:"Examples"}),`
+`,e.jsx(n.h3,{id:"expanded-by-default",children:"Expanded by default"}),`
+`,e.jsxs(n.p,{children:["If you want the contents of an accordion section to appear initially, pass the ",e.jsx(n.code,{children:"expanded"})," property to the ",e.jsx(n.code,{children:"Accordion.Section"})," component."]}),`
+`,e.jsx(o,{of:l}),`
+`,e.jsx(n.h2,{id:"too-many-landmarks",children:"Too many landmarks"}),`
+`,e.jsxs(n.p,{children:["By default, an accordion section uses the HTML tag ",e.jsx(n.code,{children:"section"}),` to render the content.
+Having many accordion sections on your page (more than 6) can lead to too many landmark regions, confusing screen reader users.
+In that case, use `,e.jsx(n.code,{children:"section={false}"}),`.
+Please note: Storybook does not correctly display this property in the code block.`]}),`
+`,e.jsx(o,{of:p}),`
+`,e.jsx(n.h2,{id:"technical-explanation",children:"Technical explanation"}),`
+`,e.jsxs(n.p,{children:["Currently (28-6-2023), the HTML element ",e.jsx(n.code,{children:"details"}),` element has some accessibility problems.
+`,e.jsx(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#summaries_as_headings",rel:"nofollow",children:"For example, a heading in a summary is not adequately understood by screen readers"}),` and
+NVDA does not read Chrome and Edge’s collapsed and expanded status correctly.
+That’s why we chose not to use this native element.
+If these problems are solved, we could do this.`]})]})}function I(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(a,{...t})}):a(t)}export{I as default};

demo-DES-654-table-of-content/assets/Alert.docs-B1IsZFUt.js

@@ -0,0 +1,53 @@
+import{j as n}from"./jsx-runtime-Nms4Y4qS.js";import{useMDXComponents as s}from"./index-DlpNa54Y.js";import{M as o,d as a,P as c,e as l,f as i}from"./index-ahswvvAf.js";import{A as h,W as d,E as m,S as p,I as f,a as u,b as x,c as j}from"./Alert.stories-DtE95yDU.js";import"./index-BwDkhjyp.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-F98oaA96.js";import"../sb-preview/runtime.js";import"./index-B8XB3FuZ.js";import"./index-COebWTXQ.js";import"./index-B8K4vdXH.js";import"./index-DrFu-skq.js";import"./index.esm-DQkeu4as.js";import"./clsx-B-dksMZM.js";import"./Icon-CuaumHXX.js";import"./Heading-CWbN3elW.js";import"./getHeadingElement-DiRwFEz7.js";import"./IconButton-CFmnpWmC.js";import"./VisuallyHidden-Db-04MJ9.js";import"./UnorderedList-J9gSHTlV.js";import"./Link-DfaTqfXA.js";import"./Paragraph-C4jU4-Z4.js";const g=`<!-- @license CC0-1.0 -->
+
+# Alert
+
+An Alert informs the user of a significant or time-sensitive message without interrupting their task.
+
+## Specifications
+
+There are four types of notifications:
+
+- **Warning** (orange) when action is needed to prevent damage.
+- **Error** (red) indicates an error has occurred.
+- **Confirmation** (green) to reassure that a process is complete.
+- **Notification** (blue) to bring attention to a message.
+
+## Guidelines
+
+- Place an orange Alert directly below the Header for important and urgent information.
+  Examples: system outage or changes in the opening hours of a City Office.
+- Ensure sufficient white space around the Alert.
+  The grid’s white space is a good reference – place the Alert in its own cell.
+- By default, the Alert cannot be closed.
+  This functionality can be added optionally.
+- Optionally, the title can be omitted.
+`;function r(t){const e={h2:"h2",h3:"h3",p:"p",...s(),...t.components};return n.jsxs(n.Fragment,{children:[n.jsx(o,{of:h}),`
+`,n.jsx(a,{children:g}),`
+`,n.jsx(e.h2,{id:"examples",children:"Examples"}),`
+`,n.jsx(e.p,{children:"The default Alert is a warning."}),`
+`,n.jsx(c,{}),`
+`,n.jsx(l,{}),`
+`,n.jsx(e.h3,{id:"warning",children:"Warning"}),`
+`,n.jsx(e.p,{children:"Display a warning when user action is required."}),`
+`,n.jsx(i,{of:d}),`
+`,n.jsx(e.h3,{id:"error",children:"Error"}),`
+`,n.jsx(e.p,{children:`In case of an error, use the red alert.
+Provide the user with suggestions on alternative ways to achieve the goal.`}),`
+`,n.jsx(i,{of:m}),`
+`,n.jsx(e.h3,{id:"success",children:"Success"}),`
+`,n.jsx(e.p,{children:"Announce the success of a significant action."}),`
+`,n.jsx(i,{of:p}),`
+`,n.jsx(e.h3,{id:"info",children:"Info"}),`
+`,n.jsx(e.p,{children:"An informative message can emphasize matters that are useful to follow."}),`
+`,n.jsx(i,{of:f}),`
+`,n.jsx(e.h3,{id:"with-inline-link",children:"With Inline Link"}),`
+`,n.jsx(e.p,{children:"Include an inline link in the text to guide the user."}),`
+`,n.jsx(i,{of:u}),`
+`,n.jsx(e.h3,{id:"with-list",children:"With List"}),`
+`,n.jsx(e.p,{children:"For clarification, formatted text can be included in the alert."}),`
+`,n.jsx(i,{of:x}),`
+`,n.jsx(e.h3,{id:"without-title",children:"Without Title"}),`
+`,n.jsx(e.p,{children:`Sometimes, a title is unnecessary.
+The icon automatically becomes slightly smaller.`}),`
+`,n.jsx(i,{of:j})]})}function z(t={}){const{wrapper:e}={...s(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(r,{...t})}):r(t)}export{z as default};