Deploying to gh-pages from @ 664bdc1 🚀

demo-npm_and_yarn/vite-6.0.3/CHANGELOG.md

@@ -0,0 +1,48 @@
+# 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.2](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.2.1...design-system-assets-v0.2.2) (2024-10-25)
+
+### Features
+
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460)) ([c19055b](https://github.com/Amsterdam/design-system/commit/c19055bd6453ce40ca43b31d599f14ec65d6037a))
+
+## [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/[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-npm_and_yarn/vite-6.0.3/CONTRIBUTING.md

@@ -0,0 +1,18 @@
+<!-- @license CC0-1.0 -->
+
+# Contributing Guidelines
+
+## Importing icons from Figma
+
+We create and update icons in Figma, then import them into this package for distribution.
+
+**Important**: Only export icons from Figma for use in this package. Do not use these icons directly in an application.
+
+To export all icons from [the Figma file](https://www.figma.com/design/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?node-id=6852-5124), use Figma's built-in SVG export feature.
+Select the frame containing all the icon shapes, press `Enter` to select direct children and then press `Enter` again to select all icon components.
+In the right-hand sidebar, click the plus sign next to Export. Choose SVG and export.
+Copy these files over to the `icons` folder and run the following command to optimize them:
+
+```sh
+npm run optimize-icons
+```

demo-npm_and_yarn/vite-6.0.3/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-npm_and_yarn/vite-6.0.3/README.md

@@ -0,0 +1,63 @@
+<!-- @license CC0-1.0 -->
+
+# Amsterdam Design System: Assets
+
+This package provides all assets from the [Amsterdam Design System](https://designsystem.amsterdam).
+Use it to include the correct fonts, icons or logos in your website or application.
+
+## Installation
+
+Install this package by itself if you want or need to reference assets directly in your project.
+
+Note that our [React components](https://www.npmjs.com/package/@amsterdam/design-system-react) provide more functionality for some of the assets and use them automatically.
+You should use that package if your application uses React.
+
+```sh
+npm install @amsterdam/design-system-assets
+```
+
+## Usage
+
+### Application icons
+
+The Design System handbook helps using [a favicon](https://designsystem.amsterdam/?path=/docs/brand-assets-favicon--docs) or [a web manifest and application icons](https://designsystem.amsterdam/?path=/docs/docs-developer-guide-web-app--docs) for home screens of devices in your website or application.
+
+### Font files
+
+The package contains our Amsterdam Sans font in OpenType format (.otf) and Web Open Format Font (.woff).
+Import our stylesheet to make all of them available to your project.
+
+<!-- prettier-ignore -->
+```ts
+import "@amsterdam/design-system-assets/font/index.css"
+```
+
+The Design System Handbook offers [more guidance in using the font](https://designsystem.amsterdam/?path=/docs/brand-assets-font--docs).
+
+Note that the font is proprietary. Using it requires [a license](https://designsystem.amsterdam/?path=/docs/docs-terms-of-use-copyright--docs).
+
+### Icons
+
+The Design System Handbook offers an [overview of our icon library](https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs).
+
+You can import the SVG files to use icons in your website or application.
+
+In a React project, use the [Icon component](https://designsystem.amsterdam/?path=/docs/components-media-icon--docs) instead.
+It offers a convenient API for using the icons and streamlines alignment with text.
+
+### Logos
+
+The logo of the City of Amsterdam is available as an SVG image, as well as logos for various departments and services.
+
+In a React project, use the [Logo component](https://designsystem.amsterdam/?path=/docs/components-media-logo--docs) instead.
+
+## Updating
+
+We follow semantic versioning and publish a [change log](https://github.com/Amsterdam/design-system/blob/main/proprietary/assets/CHANGELOG.md) to guide you through updates.
+The assets are a public API of the design system.
+Note that detecting changed or deleted assets is still a manual process.
+
+## Support
+
+Contact us if you have a question, find an issue, or want to contribute.
+Find ways to reach us on [designsystem.amsterdam](https://designsystem.amsterdam/?path=/docs/docs-introduction--docs#send-a-message).

demo-npm_and_yarn/vite-6.0.3/assets/Accordion.docs-XpaKDmfh.js

@@ -0,0 +1,83 @@
+import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as a}from"./index-3rgQkYFR.js";import{ae as i,aq as r,ar as c,as as d,at as o}from"./index-CF71P72j.js";import{A as h,E as l,R as m}from"./Accordion.stories-BS3oAY-u.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./exampleContent-hIIPvEhU.js";import"./getHeadingTag-Dv1eMqvl.js";import"./Icon-B4wlDyQ3.js";import"./useKeyboardFocus-CRUFsA_C.js";const p=`<!-- @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/)
+`;/*@license CC0-1.0*/function s(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...a(),...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.h3,{id:"limit-the-amount-of-accessibility-landmarks",children:"Limit the amount of accessibility landmarks"}),`
+`,e.jsxs(n.p,{children:["An Accordion Section renders a ",e.jsx(n.code,{children:"section"}),` element in HTML by default.
+Each of them introduces a landmark region, but having many of them on a page can confuse screen reader users.
+Let Accordions with 6 Sections or more render generic `,e.jsx(n.code,{children:"div"})," elements through ",e.jsx(n.code,{children:'sectionAs="div"'}),"."]}),`
+`,e.jsx(o,{of:m}),`
+`,e.jsx(n.h3,{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 M(t={}){const{wrapper:n}={...a(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{M as default};