@amsterdam/design-system-css 0.3.0 → 0.4.0

package/src/components/switch/README.md

@@ -1,20 +1,22 @@
 # Switch
 
-Een switch (in het Nederlands: schakelaar) is een besturingselement om snel tussen twee verschillende staten te schakelen. Een schakelaar is van toepassing op een pagina of het hele systeem. Bijvoorbeeld een aan/uit-schakelaar.
+A switch is a control element to toggle between two different states quickly.
+A switch applies to a page or the entire system, such as an on/off switch.
 
-## Richtlijnen
+## Guidelines
 
-- Schakel alleen tussen twee verschillende statussen. Het is een binaire actie.
-- Gebruik labels met een schakelaar zodat de actie duidelijk is.
-- De actie vindt direct plaats zodra de gebruiker de schakelaar gebruikt.
+- Switch only between two different states.
+  It is a binary action.
+- Use labels with a switch to make the action clear.
+- The action takes place immediately when the user operates the switch.
 
-## Relevante WCAG eisen
+## Relevant WCAG Requirements
 
-- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): het is zowel voor een gebruiker als programmatisch duidelijk wat het doel van een formulierveld is.
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is.
 
-Switch is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.
+The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs).
 
-## Referenties
+## References
 
 - [Switch Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
 - [Role switch](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role)

package/src/components/table/README.md

@@ -0,0 +1,11 @@
+# Table
+
+Use the table component to let users compare information in rows and columns.
+Table is used to display simple information that does not need to be filtered or edited.
+
+## Guidelines
+
+- Use `<Table.Caption>` to describe a table in the same way you would use a heading.
+  A caption helps users find, navigate and understand tables.
+- Never use the table component to layout content on a page.
+  Instead, use [Grid](https://amsterdam.github.io/design-system/?path=/docs/react_layout-grid--docs).

package/src/components/table/table.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-table {
+  overflow-x: auto;
+}
+
+.amsterdam-table__table {
+  border-spacing: 0;
+  break-inside: avoid;
+  color: var(--amsterdam-table-color);
+  font-family: var(--amsterdam-table-font-family);
+  font-size: var(--amsterdam-table-font-size);
+  font-weight: var(--amsterdam-table-font-weight);
+  line-height: var(--amsterdam-table-line-height);
+}
+
+.amsterdam-table__caption {
+  font-weight: var(--amsterdam-table-caption-font-weight);
+  text-align: start;
+}
+
+.amsterdam-table__cell,
+.amsterdam-table__header-cell {
+  border-bottom: var(--amsterdam-table-cell-border-bottom);
+  padding-block: 1rem;
+  padding-inline: 1rem;
+  text-align: start;
+  vertical-align: top;
+}
+
+.amsterdam-table__header-cell {
+  font-weight: var(--amsterdam-table-header-cell-font-weight);
+}

package/src/components/text-input/README.md

@@ -1,12 +1,14 @@
 # Text Input
 
-Text input is een veld van een formulier waar een gebruiker tekst kan invoeren.
+A form field in which a user can enter text.
 
-## Richtlijnen
+## Guidelines
 
-- Gebruik een Text input als gebruikers tekst in moeten voeren die niet langer is dan 1 regel, zoals hun naam of telefoonnummer.
-- Gebruik een Text input niet als gebruikers meer dan 1 zin moeten invullen.
-- De breedte van de Text input moet passend zijn bij de informatie die ingevuld moet worden.
-- Een Text input moet een label hebben, en in de meeste gevallen moet dit label zichtbaar zijn.
-- Gebruik `spellcheck="false"` voor velden die gevoelige informatie kunnen bevatten, zoals wachtwoorden en persoonsgegevens. Sommige browser extensies voor spellingcontrole sturen deze informatie naar externe servers.
-- Pas waar mogelijk automatische hulp toe. Bij ingelogde systemen is bijvoorbeeld invoer vooraf in te vullen om fouten te voorkomen en tijd te besparen.
+- Use a Text Input when users need to enter a single line of text, such as their name or phone number.
+- Do not use a Text Input when users could provide more than 1 sentence of text.
+- The width of the Text Input should be appropriate for the information to be entered.
+- A Text Input must have a label, and in most cases, this label should be visible.
+- Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
+  Some browser extensions for spell-checking send this information to external servers.
+- Apply automatic assistance where possible.
+  For example, in logged-in systems, pre-filling input can prevent errors and save time.

package/src/components/top-task-link/README.md

@@ -1,20 +1,21 @@
 # Top Task Link
 
-Via dit opvallende navigatie-element vindt de Amsterdammer snel de weg naar veel voorkomende taken.
+A prominent navigation element to quickly start a task.
 
-## Richtlijnen
+## Guidelines
 
-- Een Top Task Link heeft zowel een titel als een beschrijving.
-- De titel beschrijft de essentie van de pagina waarnaar wordt verwezen.
-  Deze trekt de aandacht bij het scannen van de pagina.
-- De beschrijving geeft meer context.
-  Dit helpt de Amsterdammer bevestigen dat die zijn doel op de vervolgpagina inderdaad kan bereiken.
-- Houd beide teksten bondig. Een titel bestaat uit een paar woorden, de beschrijving uit 1 of 2 korte zinnen. De beschrijving eindigt dan ook op een punt of ander geschikt leesteken.
-- Plaats voor brede vensters 3 of 4 Top Task Links naast elkaar op het [Grid](?path=/docs/react_layout-grid--docs).
-  Als je meer Top Task Links hebt, zet ze dan op de volgende rij.
-  Probeer het aantal links op brede vensters te verdelen over rijen van 3 of 4 links. Als dit niet lukt, laat de laatste cellen van het grid dan leeg.
-- Heb je een groep verwijzingen waarvoor een beschrijving niet nodig of logisch is, gebruik dan een [Link List](?path=/docs/react_navigation-link--docs).
+- A Top Task Link has both a title and a description.
+- The title describes the essence of the page being referred to, attracting attention when scanning the page.
+- The description provides more context, helping the user confirm that they can indeed achieve their goal on the linked page.
+- Keep both texts concise.
+  A title consists of a few words, and the description consists of 1 or 2 short sentences.
+  The description should end with a period or another appropriate punctuation mark.
+- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](?path=/docs/react_layout-grid--docs).
+  If you have more Top Task Links, place them in the next row.
+  Try to distribute the amount of links on wide windows over rows of 3 or 4 links.
+  If this is not possible, leave the last cells of the grid empty.
+- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](?path=/docs/react_navigation-link--docs).
 
-## Relevante WCAG eisen
+## Relevant WCAG requirements
 
-Voor de Top Task Link gelden dezelfde eisen als voor [reguliere links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
+The Top Task Link is subject to the same requirements as [regular links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).

package/src/components/unordered-list/README.md

@@ -1,7 +1,7 @@
 # Unordered List
 
-Een lijst is een verticale groep gerelateerde inhoud.
-Deze lijst kan 2 niveaus hebben.
-Het eerste niveau bestaat uit vierkantjes.
-Het tweede niveau bestaat uit halve kastlijntjes.
-Tekst in de lijstitems springt een vaste afstand in.
+A list is a vertical group of related content.
+This list can have 2 levels.
+The first level consists of squares.
+The second level consists of en dashes (–).
+Text in the list items is indented by a fixed distance.

package/src/components/visually-hidden/README.md

@@ -1,5 +1,6 @@
 # Visually Hidden
 
-Het Visually Hidden component kan gebruikt worden om inhoud te verbergen voor ziende gebruikers, maar beschikbaar te houden voor niet-visuele _user agents_, zoals schermlezers.
+Hides content from sighted users but keeps it accessible to non-visual user agents, such as screen readers.
 
-Let op: In de overgrote meerderheid van de gevallen moet inhoud die visueel beschikbaar is, ook beschikbaar zijn voor niet-visuele _user agents_, en omgekeerd. Uitgebreide aanwijzingen of instructies die alleen door niet-visuele _user agents_ worden gelezen, doen al snel meer kwaad dan goed.
+Note: in most cases, visually available content should be accessible to non-visual user agents and vice versa.
+Elaborate instructions or guidance read only by non-visual user agents can do more harm than good.

package/src/components/button/button-css.md

@@ -1,12 +0,0 @@
-# CSS Button
-
-Het button component maakt gebruik van de CSS library van de gemeente Utrecht. Daarop is het Amsterdam Design toegepast. Concreet betekent dit dat de Utrecht class names worden gebruikt met de Amsterdamse css attribuut waarden.
-Een voorbeeld van een HTML button met de Amsterdamse styling is:
-
-```html
-<button class="utrecht-button">Amsterdam Button</button>
-```
-
-Deze button wordt getoond met de Amsterdamse button styling.
-
-Vedere documentatie van de Utrecht button is terug te vinden in hun [github](https://github.com/nl-design-system/utrecht/tree/main/components/button) repository.

package/src/components/checkbox/checkbox-css.md

@@ -1,3 +0,0 @@
-# CSS Checkbox
-
-Het selectievakje bestaat uit een vakje en een tekstlabel. Het tekstlabel staat rechts van het selectievakje. Om toegankelijkheid te vergroten is het volledige component (vakje en label) klikbaar.

package/src/components/footer/footer-css.md

@@ -1,11 +0,0 @@
-# CSS Footer
-
-Gebruik het `footer` element als buitenste container van de footer.
-
-De voettekst is blauw met witte tekst en iconen, met onderaan een witte balk. Op desktop heeft het blauwe deel van de voettekst 3 kolommen. Op mobiel heeft het blauwe deel van de voettekst 1 kolom. Kolom 1, 2 en 3 van de desktop staan dan onder elkaar.
-
-De functionaliteit op desktop en mobiel is gelijk.
-
-De hoogte wordt bepaald door de content. De breedte van de voettekst op desktop is niet schermvullend.
-
-De voettekst wordt nooit ingeklapt. Ook niet in mobiele weergave.

package/src/components/heading/heading-css.md

@@ -1,3 +0,0 @@
-# CSS Heading
-
-Gebruik de juiste heading HTML-elementen als je van deze classes gebruik maakt. De beschikbare elementen zijn: `h1`, `h2`, `h3`, `h4`, `h5` en `h6`. Let bij het kiezen van een heading niveau op de structuur van de pagina. Heading niveaus worden gebruikt om informatie te groeperen. De titel van de pagina krijgt een `h1`. De eerste subtitel een `h2`. De daarna volgende titels van secties die horen bij die subtitel krijgen een `h3`, enzovoort. Als je een nieuwe sectie begint, gebruik je weer een `h2`. Het is toegestaan om stijl en semantiek los van elkaar te trekken. Een `h1` kan bijvoorbeeld de class `amsterdam-heading-2` krijgen.

package/src/components/paragraph/paragraph-css.md

@@ -1,3 +0,0 @@
-# HTML
-
-Gebruik altijd het `<p>` HTML-element, die heeft automatisch de goede paragraph role in de accessibility tree (dat is nodig voor WCAG eis 1.3.1). Ook is zo de tekst nog steeds goed leesbaar als de CSS niet geladen kan worden.