Drawer scroll list

packages/next-templates/package.json

@@ -30,7 +30,7 @@
     "@nl-design-system-unstable/voorbeeld-design-tokens": "1.0.0-alpha.96",
     "@svgr/webpack": "8.1.0",
     "@utrecht/component-library-css": "1.0.0-alpha.597",
-    "@utrecht/component-library-react": "1.0.0-alpha.406",
+    "@utrecht/component-library-react": "1.0.0-alpha.413",
     "@utrecht/design-tokens": "1.0.0-alpha.590",
     "@utrecht/web-component-library-react": "1.0.0-alpha.596",
     "@utrecht/web-component-library-stencil": "1.0.0-alpha.596",

packages/next-templates/src/app/drawer-scroll-list/erfgoed/page.tsx

@@ -0,0 +1,166 @@
+'use client';
+import { Article, Button, DataList, Drawer, Heading3, Link, Page, Paragraph } from '@utrecht/component-library-react';
+import '../styles/drawer-scroll-list.css';
+import Image from 'next/image';
+import BackArrow from '../pijltje-rechts.svg';
+import Kruisje from '../kruisje.svg';
+import { useState } from 'react';
+
+const linkData = [
+  { id: 'duitse_bommenwerper', href: '#voorbeeld--button-drawer', content: 'Duitse bommenwerper' },
+  { id: 'werf', href: '#voorbeeld--button-drawer2', content: 'Werk aan de werf' },
+  { id: 'vredebrug', href: '#', content: 'Bouw en sloop van kasteel Vredenburg' },
+  { id: 'cecilianklooster', href: '#', content: 'Ceciliaklooster' },
+  { id: 'middeleeuse-stadsmuur', href: '#', content: 'Middeleeuwse stadsmuur' },
+  { id: 'rijmvliet', href: '#', content: 'Oude tempel in Rijnvliet?' },
+  { id: 'dorp-aan-rivier', href: '#', content: 'Dorp aan de rivier' },
+  { id: 'romeinse-wachttoren', href: '#', content: 'Romeinse wachttorens' },
+  { id: 'blauwkapel', href: '#', content: 'Kerkje van Blauwkapel' },
+  { id: 'utrechtse-werven', href: '#', content: 'De Utrechtse werven' },
+  { id: 'domplein', href: '#', content: 'Domplein' },
+  { id: 'haardkuil-steentijd', href: '#', content: 'Haardkuil uit de oude steentijd' },
+  { id: 'janskerkhof', href: '#', content: 'Janskerkhof' },
+  { id: 'sterrenburg', href: '#', content: 'Bijlhouwerstoren en Sterrenburg' },
+  { id: 'natuur', href: '#', content: 'Natuur op de forten' },
+  { id: 'buurtoren', href: '#', content: 'Buurtoren' },
+  { id: 'plompetorengracht', href: '#', content: 'Rondom de Plompetorengracht' },
+  { id: 'herderplein', href: '#', content: 'Herderplein in buurt Halve Maan' },
+  { id: 'kamp', href: '#', content: 'Rondom de Nieuwe Kamp' },
+  { id: 'kanunniken', href: '#', content: 'Kanunniken te paard?' },
+  { id: 'paulusabdij', href: '#', content: 'Paulusabdij' },
+];
+
+const drawerData = [
+  [
+    {
+      title: 'Duitse Bommenwerper',
+      info: 'Utrechtse archeologen onderzochten in 2010 een neergestorte Duitse bommenwerper. Lees was ze ontdekte overhet vliegtuig.',
+      linkHref: 'https://erfgoed.utrecht.nl/verhalen/duitse-bommenwerper/',
+      period: 'Moderne tijd',
+      theme: 'Archeologie',
+      tags: 'Oorlog en verdediging',
+      href: '/duitsebommer.jpg',
+    },
+  ],
+  [
+    {
+      title: 'Werk aan de werf',
+      info: 'Utrecht staat bekend om zijn werven en werfkelders. De eigenaren van de grachtenpanden moesten deze vroeger onderhouden. In de 20e eeuw raakten de werven in verval. Toen nam de gemeente Utrecht het eigendom van de werfmuren en kades over. Verschillende restauratierondes volgden.',
+      linkHref: 'https://erfgoed.utrecht.nl/verhalen/werk-aan-de-werf/',
+      period: 'Moderne tijd',
+      theme: 'Gebouwen',
+      tags: 'Woningbouw',
+      href: '/werf.jpg',
+    },
+  ],
+];
+
+export default function Home() {
+  const [open, setOpen] = useState(false);
+  const [erfopen, setErfopen] = useState(false);
+  const [place, setPlace] = useState(0);
+
+  function addOpen() {
+    setOpen(true);
+  }
+
+  function closeOpen() {
+    setOpen(false);
+  }
+
+  function closeAll() {
+    setOpen(false);
+    setErfopen(false);
+  }
+
+  function openErfOpen(data: string) {
+    setErfopen(true);
+    setPlace(itemSelection(data));
+  }
+
+  function closeErfOpen() {
+    setErfopen(false);
+  }
+
+  function itemSelection(id: string) {
+    if (id !== undefined) {
+      return linkData.findIndex((obj) => obj.id === id);
+    } else {
+      setErfopen(false);
+      return 0;
+    }
+  }
+  return (
+    <Page>
+      <Button onClick={addOpen}>open drawer</Button>
+      <Drawer className="voorbeeld-drawer voorbeeld-drawer--erfgoed-drawer" open={open}>
+        <header aria-label="header-list-erfgoed" className="voorbeeld-drawer__header voorbeeld-drawer__header--sticky">
+          <Heading3>Erfgoed</Heading3>
+          <Button aria-label="sluit" onClick={closeOpen}>
+            <Kruisje />
+          </Button>
+        </header>
+
+        <div className="voorbeeld-drawer__body">
+          <ul className="voorbeeld--unorderedlist-lijst">
+            {linkData.map(({ id, href, content }) => (
+              <li>
+                <Link onClick={() => openErfOpen(id)} id={id} href={href}>
+                  {content}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Drawer>
+
+      <Drawer className="voorbeeld-drawer voorbeeld-drawer--button-drawer" open={erfopen}>
+        <header aria-label="header-erfgoed" className="voorbeeld-drawer__header voorbeeld-drawer__header--sticky">
+          <Button onClick={closeErfOpen} className="voorbeeld-drawer__button-back" aria-label="terug">
+            <BackArrow />
+          </Button>
+          <Button onClick={closeAll} className="voorbeeld-drawer__button-close" aria-label="sluit">
+            <Kruisje />
+          </Button>
+        </header>
+        {drawerData[place].map(({ title, info, linkHref, period, theme, tags, href }) => (
+          <Article>
+            <div className="voorbeeld-drawer__image">
+              <Image
+                alt="Duitse Bommenwerper in de lucht tijdens de tweede wereldoorlog"
+                src={href}
+                width={1080}
+                height={419}
+              />
+            </div>
+            <div className="voorbeeld-drawer__body voorbeeld-drawer__body--details">
+              <Heading3>{title}</Heading3>
+              <Paragraph>{info}</Paragraph>
+              <div>
+                <Link className="links" href={linkHref}>
+                  Lees het verhaal op de site
+                </Link>
+              </div>
+              <div className="voorbeeld-drawer__datalist">
+                <DataList>
+                  <div>
+                    <dt>Period</dt>
+                    <dd>{period}</dd>
+                  </div>
+                  <div>
+                    <dt>Thema</dt>
+                    <dd>{theme}</dd>
+                  </div>
+                  <div>
+                    <dt>Tags</dt>
+                    <dd>{tags}</dd>
+                  </div>
+                </DataList>
+              </div>
+            </div>
+          </Article>
+        ))}
+      </Drawer>
+    </Page>
+  );
+}

packages/next-templates/src/app/drawer-scroll-list/page.tsx

@@ -0,0 +1,106 @@
+'use client';
+import {
+  AccordionProvider,
+  Button,
+  Checkbox,
+  Document,
+  Drawer,
+  FormField,
+  FormLabel,
+  Heading3,
+} from '@utrecht/component-library-react';
+import './styles/drawer-scroll-list.css';
+
+import Kruisje from './kruisje.svg';
+
+const period = [
+  { label: 'Late middeleeuwen', value: 'Late middeleeuwen' },
+  { label: 'Moderne tijd', value: 'Moderne tijd' },
+  { label: 'Prehistorie', value: 'Prehistorie' },
+  { label: 'Romeinse tijd', value: 'Romeinse tijd' },
+  { label: 'Vroege middeleeuwen', value: 'Vroege middeleeuwen' },
+  { label: 'Vroegmoderne tijd', value: 'Vroegmoderne tijd' },
+];
+
+const theme = [
+  { label: '3D-reconstructies en animaties', value: '3D-reconstruction' },
+  { label: 'Archeologie', value: 'Archeologie' },
+  { label: 'Gebouwen', value: 'Gebouwen' },
+  { label: 'Oorlog en verdediging', value: 'Oorlog en verdediging' },
+  { label: 'Stedenbouw en groen', value: 'Stedenbouw en groen' },
+  { label: 'Werelderfgoed', value: 'Werelderfgoed' },
+];
+
+const tags = [
+  { label: 'Handel ambacht en industrie', value: 'Handel ambacht en industrie' },
+  { label: 'Landbouw veeteelt en visserij', value: 'Landbouw veeteelt en visserij' },
+  { label: 'Maritiem erfgoed', value: 'Maritiem erfgoed' },
+  { label: 'Moreelse route', value: 'Moreelse route' },
+  { label: 'Nieuwe hollandse waterlinie', value: 'Nieuwe hollandse waterlinie' },
+  { label: 'Oorlog en verdediging', value: 'Oorlog en verdediging' },
+  { label: 'Parken', value: 'Parken' },
+  { label: 'Religieus erfgoed', value: 'Religieus erfgoed' },
+  { label: 'Romeinse limes', value: 'Romeinse limes' },
+  { label: 'Woningbouw', value: 'Woningbouw' },
+];
+
+export default function Home() {
+  return (
+    <Document>
+      <Drawer className="voorbeeld-drawer" open>
+        <header className="voorbeeld-drawer__header voorbeeld-drawer__header--sticky">
+          <Heading3>Verfijn resultaten</Heading3>
+          <Button className="voorbeeld-drawer__button-close" aria-label="sluit">
+            <Kruisje />
+          </Button>
+        </header>
+        <AccordionProvider
+          sections={[
+            {
+              body: (
+                <div>
+                  {period.map(({ label, value }) => (
+                    <FormField>
+                      <Checkbox value={value} />
+                      <FormLabel>{label}</FormLabel>
+                    </FormField>
+                  ))}
+                </div>
+              ),
+              expanded: true,
+              label: 'periode',
+            },
+            {
+              body: (
+                <div>
+                  {theme.map(({ label, value }) => (
+                    <FormField>
+                      <Checkbox value={value} />
+                      <FormLabel>{label}</FormLabel>
+                    </FormField>
+                  ))}
+                </div>
+              ),
+              expanded: true,
+              label: 'Thema',
+            },
+            {
+              body: (
+                <div>
+                  {tags.map(({ label, value }) => (
+                    <FormField>
+                      <Checkbox value={value} />
+                      <FormLabel>{label}</FormLabel>
+                    </FormField>
+                  ))}
+                </div>
+              ),
+              expanded: true,
+              label: 'Tags',
+            },
+          ]}
+        />
+      </Drawer>
+    </Document>
+  );
+}

packages/next-templates/src/app/drawer-scroll-list/styles/drawer-scroll-list.css

@@ -0,0 +1,103 @@
+:root {
+  /* How do we get this from the design system? */
+  --utrecht-drawer-max-inline-size: 400px;
+}
+
+.voorbeeld-theme {
+  background: skyblue;
+}
+
+.voorbeeld-drawer {
+  inline-size: 100%;
+  max-inline-size: 400px;
+  /* this is where general styling goes for the drawer, like a shadow on the whole thing */
+}
+
+.voorbeeld-drawer--erfgoed-drawer {
+  /* this is the exceptions for the Erfgoed drawer */
+}
+
+.voorbeeld-drawer__header {
+  display: flex;
+  justify-content: space-between;
+  background-color: white;
+  border-bottom: 1px solid grey;
+  padding: 2em;
+}
+
+.voorbeeld-drawer__header :is(h2, h3, h4, h5, h6) {
+  align-self: center;
+}
+
+.voorbeeld-drawer__header--sticky {
+  position: sticky;
+  top: 0;
+}
+
+.voorbeeld--unorderedlist-lijst {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+/*
+.voorbeeld--unorderedlist-lijst li {
+  margin-block: 12px;
+} */
+
+.voorbeeld--unorderedlist-lijst a {
+  border-bottom: 1px solid grey;
+
+  padding: 12px 2em;
+  display: block;
+}
+
+.voorbeeld-drawer__button-update {
+  /* */
+}
+
+.voorbeeld-drawer__button-close {
+  /* */
+}
+
+.voorbeeld-drawer__image img {
+  width: 100%;
+  height: auto;
+}
+
+.voorbeeld-drawer__body {
+  /* */
+}
+
+.voorbeeld-drawer__body--details {
+  padding: 2em;
+}
+
+.voorbeeld-drawer__datalist {
+  /* */
+}
+
+/* to hide all the unclickable links */
+a[href="#"] {
+  display: none;
+  /* opacity: 0.3; */
+}
+
+.utrecht-button {
+  background-color: #ffb8ff;
+}
+
+.utrecht-page {
+  padding: 2em;
+}
+
+.utrecht-data-list {
+  margin-top: 2em;
+}
+
+.utrecht-data-list dt {
+  font-weight: bold;
+}
+
+.utrecht-data-list dd {
+  margin-left: 0;
+}