Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: currency demo's #236

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

feat: currency demo's #236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6942ccb
build: install Utrecht Design System BEM class names
Robbert Mar 22, 2022
57fe265
feat: ValueCurrency component
Robbert Mar 22, 2022
4e1fc87
feat: Table components
Robbert Mar 22, 2022
f8a00e9
feat: transaction table demo
Robbert Mar 22, 2022
153ab00
ci: tmp deploy of this branch
Robbert Mar 22, 2022
17258c5
build: more flexible csp
Robbert Mar 25, 2022
374e44d
feat: ValueDate component
Robbert Mar 30, 2022
683f84f
WIP
Robbert Mar 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/continuous-delivery.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ on:
push:
branches:
- main
- feat/currency
pull_request:

jobs:
Expand Down
3 changes: 2 additions & 1 deletion next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ module.exports = {
headers: [
{
key: 'Content-Security-Policy',
value: "default-src 'self'",
value:
"default-src 'self'; style-src data: 'self' 'unsafe-inline'; script-src data: 'self' 'unsafe-eval'; connect-src 'self'",
},
{
key: 'Referrer-Policy',
Expand Down
13 changes: 13 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"@types/react": "17.0.39",
"@typescript-eslint/eslint-plugin": "5.12.0",
"@typescript-eslint/parser": "5.12.0",
"@utrecht/component-library-css": "1.0.0-alpha.186",
"eslint": "8.9.0",
"eslint-config-next": "12.1.0",
"eslint-config-prettier": "8.4.0",
Expand Down
7 changes: 1 addition & 6 deletions pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,12 @@ import type { AppProps } from "next/app";
import { useEffect } from "react";
import "../styles/globals.css";
import "@utrecht/design-tokens/dist/index.css";
import "@utrecht/component-library-css/dist/bem.css";

function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => {
import("@utrecht/web-component-library-stencil/dist/utrecht/utrecht.esm.js");
}, []);
useEffect(() => {
const script = document.createElement("script");
script.async = true;
script.src = "https://unpkg.com/@nl-design-system-unstable/theme-switcher";
document.body.appendChild(script);
}, []);

useEffect(() => {
document.documentElement.classList.add("utrecht-theme");
Expand Down
168 changes: 168 additions & 0 deletions pages/amounts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import { UtrechtDocument } from "@utrecht/web-component-library-react";
import Head from "next/head";
import { ValueCurrency } from "../src/components/ValueCurrency";
import { Table } from "../src/components/utrecht/Table";
import { TableBody } from "../src/components/utrecht/TableBody";
import { TableCell } from "../src/components/utrecht/TableCell";
import { TableHeader } from "../src/components/utrecht/TableHeader";
import { TableHeaderCell } from "../src/components/utrecht/TableHeaderCell";
import { TableRow } from "../src/components/utrecht/TableRow";

export default function AmountsDemo() {
return (
<>
<UtrechtDocument lang="nl">
<Head>
<title>Voorbeeld met bedragen</title>
</Head>

<main>
<h1>Voorbeeld met bedragen</h1>
<p>Dit is een tijdelijke pagina.</p>
<p>Lijst met eerst het bedrag uitgeschreven in tekst, daarna volgt de versie met speciale opmaak.</p>
<section>
<h2>Nederlands</h2>
<Table>
<TableHeader>
<TableRow>
<TableHeaderCell>Type bedrag</TableHeaderCell>
<TableHeaderCell>Uitgeschreven</TableHeaderCell>
<TableHeaderCell>Toegankelijk label</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>rond bedrag</TableCell>
<TableCell>honderddrieëntwintig euro</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="EUR" amount="123"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>bedrag met centen</TableCell>
<TableCell>drie euro en vijfennegentig cent</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="EUR" amount="3.95"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>bedrag met alleen centen</TableCell>
<TableCell>negenennegentig eurocent</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="EUR" amount="0.99"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>negatief bedrag</TableCell>
<TableCell>minus drie euro en vijfennegentig cent</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="EUR" amount="-3.95"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>groot bedrag</TableCell>
<TableCell>vierhonderdvijfendertigduizend euro</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="EUR" amount="435000"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>bedrag in buitenlandse valuta</TableCell>
<TableCell>honderd Amerikaanse dollar</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="USD" amount="100"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>bedrag in buitenlandse valuta</TableCell>
<TableCell>honderd Canadese dollar</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="CAD" amount="100"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>bedrag in buitenlandse valuta</TableCell>
<TableCell>honderd Britse pond</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="GBP" amount="100"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow></TableRow>
</TableBody>
</Table>
</section>
<section lang="en-US">
<h2>American English</h2>
<Table>
<thead>
<TableRow>
<TableHeaderCell>Type of amount</TableHeaderCell>
<TableHeaderCell>Written in full</TableHeaderCell>
<TableHeaderCell>Accessible label</TableHeaderCell>
</TableRow>
</thead>
<TableBody>
<TableRow>
<TableCell>simple amount</TableCell>
<TableCell>one hundred twenty-three dollars</TableCell>
<TableCell>
<ValueCurrency locale="en-US" currency="USD" amount="123"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>amount with cents</TableCell>
<TableCell>three dollars ninety-five</TableCell>
<TableCell>
<ValueCurrency locale="en-US" currency="USD" amount="3.95"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>only cents</TableCell>
<TableCell>ninety-nine cents</TableCell>
<TableCell>
<ValueCurrency locale="en-US" currency="USD" amount="0.99"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>negative amount</TableCell>
<TableCell>minus three dollars and ninety-five cents</TableCell>
<TableCell>
<ValueCurrency locale="en-US" currency="USD" amount="-3.95"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>large amount</TableCell>
<TableCell>four hundred thirty-five thousand dollars</TableCell>
<TableCell>
<ValueCurrency locale="en-US" currency="USD" amount="435000"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>amount with foreign currency</TableCell>
<TableCell>one hundred Euros</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="EUR" amount="100"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>amount with foreign currency</TableCell>
<TableCell>one hundred Canadian dollars</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="CAD" amount="100"></ValueCurrency>
</TableCell>
</TableRow>
<TableRow>
<TableCell>amount with foreign currency</TableCell>
<TableCell>one hundred pound sterling</TableCell>
<TableCell>
<ValueCurrency locale="nl-NL" currency="GBP" amount="100"></ValueCurrency>
</TableCell>
</TableRow>
</TableBody>
</Table>
</section>
</main>
</UtrechtDocument>
</>
);
}
128 changes: 128 additions & 0 deletions pages/transactions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
/* eslint-disable react/no-unescaped-entities */

import { UtrechtDocument } from "@utrecht/web-component-library-react";
import Head from "next/head";
import { useRouter } from "next/router";
import { AlternateLangNavComponent } from "../src/AlternateLangNavComponent";
import { ValueCurrency } from "../src/components/ValueCurrency";
import { ValueDate } from "../src/components/ValueDate";
import { Heading1 } from "../src/components/utrecht/Heading1";
import { Heading2 } from "../src/components/utrecht/Heading2";
import { Paragraph } from "../src/components/utrecht/Paragraph";
import { Table } from "../src/components/utrecht/Table";
import { TableBody } from "../src/components/utrecht/TableBody";
import { TableCell } from "../src/components/utrecht/TableCell";
import { TableHeader } from "../src/components/utrecht/TableHeader";
import { TableHeaderCell } from "../src/components/utrecht/TableHeaderCell";
import { TableRow } from "../src/components/utrecht/TableRow";
import { UnorderedList } from "../src/components/utrecht/UnorderedList";
import { UnorderedListItem } from "../src/components/utrecht/UnorderedListItem";

export default function Home() {
const locale = useRouter().locale || "en";

const locales = [
{
lang: "en",
hrefLang: "en",
title: "This page in English",
textContent: "EN",
},
{
lang: "nl",
hrefLang: "nl",
title: "Deze pagina in Nederlands",
textContent: "NL",
},
];

return (
<>
<UtrechtDocument lang="nl">
<Head>
<title>Voorbeeld met banktransacties</title>
</Head>
<header>
<nav>
<AlternateLangNavComponent locales={locales} />
</nav>
</header>

<main>
<Heading1>Voorbeeld met banktransacties</Heading1>
<Paragraph>Dit is een tijdelijke pagina.</Paragraph>
<UnorderedList>
<UnorderedListItem>
Voor de tabel is geen <code>caption</code> gebruikt maar een heading element (<code>h2</code> in dit
geval), zodat je de sneltoetsen voor "volgende heading" en "vorige heading" snel de goede tabel kan
vinden.
</UnorderedListItem>
<UnorderedListItem>
De heading is gekoppeld aan de tabel met <code>aria-labelledby</code>, zodat wanneer de tabel wordt
weergegeven door een screenreader wel de heading het effect heeft van een table caption. Zonder deze
koppeling, wanneer je achteruit door het document gaat, zou je een tabel tegenkomen zonder de context waar
het over gaat.
</UnorderedListItem>
<UnorderedListItem>
De bedragen in de tabel zijn voorzien van een <code>aria-label</code> waar de notatie van het bedrag is
geoptimaliseerd voor onder andere screen readers (zodat de waarde{" "}
<q lang="en">programmatically determined</q> kan worden).
</UnorderedListItem>
</UnorderedList>
<Heading2 id="8b19a39d-cdbb-4c97-bbeb-b1a8e568b7bd">januari 2022</Heading2>
<Table aria-labelledby="8b19a39d-cdbb-4c97-bbeb-b1a8e568b7bd">
<TableHeader>
<TableRow>
<TableHeaderCell>Icoon</TableHeaderCell>
<TableHeaderCell>
<div className="sr-only">Datum</div>
</TableHeaderCell>
<TableHeaderCell>Onderwerp</TableHeaderCell>
<TableHeaderCell>Bedrag</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell></TableCell>
<TableCell>
<ValueDate date="2022-01-20" className="sr-only" />
</TableCell>
<TableCell>
<div className="reverse">
<div aria-hidden="true">
<ValueDate date="2022-01-20" />
</div>
<div>Leefgeld</div>
</div>
</TableCell>
<TableCell className="utrecht-table__cell--numeric-column utrecht-table__cell--numeric-data">
<ValueCurrency locale={locale} currency="EUR" amount="-456" />
</TableCell>
</TableRow>
<TableRow>
<TableCell></TableCell>
<TableCell>
<ValueDate date="2022-01-20" className="sr-only" />
</TableCell>
<TableCell>
<div className="reverse">
<div aria-hidden="true">
<ValueDate date="2022-01-20" />
</div>
<div>Belastingdienst</div>
</div>
</TableCell>
<TableCell hidden>
<ValueDate date="2022-01-20" />
</TableCell>
<TableCell className="utrecht-table__cell--numeric-column utrecht-table__cell--numeric-data">
<ValueCurrency locale={locale} currency="EUR" amount="123" />
</TableCell>
</TableRow>
</TableBody>
</Table>
</main>
</UtrechtDocument>
</>
);
}
Loading