Mijn omgeving overzicht pagina

packages/next-templates/package.json

@@ -26,6 +26,8 @@
   "devDependencies": {
     "@fontsource/fira-sans": "5.0.18",
     "@fontsource/source-serif-pro": "5.0.8",
+    "@gemeente-denhaag/button": "0.2.3-alpha.384",
+    "@gemeente-denhaag/sidenav": "0.1.0-alpha.205",
     "@next/eslint-plugin-next": "13.5.6",
     "@nl-design-system-unstable/voorbeeld-design-tokens": "1.0.0-alpha.122",
     "@svgr/webpack": "8.1.0",

packages/next-templates/src/app/mijn-omgeving/DigiD-inloggen/page.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { Article, Page, PageContent, Heading1, ButtonGroup, Button } from '@utrecht/component-library-react';
+
+import '@/app/styling/css/wmebv.css';
+import { useEffect, useId } from 'react';
+
+export default function home() {
+  const formHeadingId = useId();
+
+  const stepLabel = 'Doe alsof u inlogt met DigiD';
+  const websiteLabel = 'gemeente Voorbeeld';
+
+  useEffect(() => {
+    if (typeof document?.title === 'string') {
+      document.title = `${stepLabel} - ${websiteLabel}`;
+    }
+  }, []);
+
+  return (
+    <Page>
+      <PageContent className="voorbeeld-page-content-flex">
+        <Article id="main" className="voorbeeld-article-space">
+          <Heading1 id={formHeadingId}>{stepLabel}</Heading1>
+          <form action="./ingelogd/stap1" method="get" aria-labelledby={formHeadingId}>
+            <ButtonGroup>
+              <Button type="submit" appearance="primary-action-button">
+                Inloggen
+              </Button>
+            </ButtonGroup>
+          </form>
+        </Article>
+      </PageContent>
+    </Page>
+  );
+}

packages/next-templates/src/app/mijn-omgeving/inloggen/page.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import {
+  Article,
+  Button,
+  ButtonGroup,
+  Heading1,
+  Heading2,
+  Icon,
+  Link,
+  Page,
+  PageContent,
+  Paragraph,
+} from '@utrecht/component-library-react';
+import { UtrechtDigidLogo } from '@utrecht/web-component-library-react';
+import { Fieldset, FieldsetLegend, FormField, FormLabel, RadioButton } from '@utrecht/component-library-react';
+
+import { IconArrowLeft } from '@tabler/icons-react';
+import '@/app/styling/css/wmebv.css';
+import '@/app/styling/css/detail-page.css';
+import '@utrecht/design-tokens/dist/index.css';
+import { useEffect } from 'react';
+
+import { ExampleHeader } from '@/components/ExampleHeader/ExampleHeader';
+import { ExampleFooter } from '@/components/ExampleFooter/ExampleFooter';
+
+export default function home() {
+  const stepLabel = 'Inloggen mijn omgeving';
+  const websiteLabel = 'gemeente Voorbeeld';
+
+  useEffect(() => {
+    if (typeof document?.title === 'string') {
+      document.title = `${stepLabel} - ${websiteLabel}`;
+    }
+  }, []);
+
+  return (
+    <Page>
+      <ExampleHeader />
+      <PageContent className="voorbeeld-page-content-flex">
+        <Article id="main" className="voorbeeld-article-space ">
+          <form method="POST" action="/api/wmebv/choose-form">
+            <ButtonGroup>
+              <Link href="./">
+                <Icon>
+                  <IconArrowLeft />
+                </Icon>
+                Terug
+              </Link>
+            </ButtonGroup>
+            <Heading1>Inloggen</Heading1>
+            <Paragraph className="paragraph_digid">
+              Dankzij uw DigiD kunt u overal makkelijk en veilig inloggen. Uw persoonlijke gegevens blijven goed
+              beschermd. Wanneer u inlogt worden uw persoonlijke gegevens automatisch ingevuld.
+            </Paragraph>
+            <UtrechtDigidLogo className="voorbeeld-digid-logo" aria-label="DigiD logo" role="img" />
+            <Fieldset id="df861ef1-844a-42df-8365-b54f59474fb8" role="radiogroup">
+              <FieldsetLegend className="fieldlabel_inloggen">Wilt u inloggen?</FieldsetLegend>
+              <FormField type="radio">
+                <Paragraph className="utrecht-form-field__label utrecht-form-field__label--radio">
+                  <FormLabel
+                    className="voorbeeld-radio-button-form-label"
+                    htmlFor="800b7f3f-5048-4dcc-8f23-d04fa6ca4199"
+                    type="radio"
+                  >
+                    <RadioButton
+                      className="utrecht-form-field__input"
+                      id="800b7f3f-5048-4dcc-8f23-d04fa6ca4199"
+                      name="loggedIn"
+                      value="true"
+                    />
+                    Ja
+                  </FormLabel>
+                </Paragraph>
+              </FormField>
+              <FormField type="radio">
+                <Paragraph className="utrecht-form-field__label utrecht-form-field__label--radio">
+                  <FormLabel
+                    className="voorbeeld-radio-button-form-label"
+                    htmlFor="fbc03e63-42c2-46e3-9acc-183fa64c6dcd"
+                    type="radio"
+                  >
+                    <RadioButton
+                      className="utrecht-form-field__input"
+                      id="fbc03e63-42c2-46e3-9acc-183fa64c6dcd"
+                      name="loggedIn"
+                      value="false"
+                    />
+                    Nee
+                  </FormLabel>
+                </Paragraph>
+              </FormField>
+            </Fieldset>
+            <ButtonGroup>
+              <Button type="submit" appearance="primary-action-button">
+                Doorgaan
+              </Button>
+            </ButtonGroup>
+          </form>
+        </Article>
+      </PageContent>
+      <ExampleFooter />
+    </Page>
+  );
+}

packages/next-templates/src/app/mijn-omgeving/mijn-zaken/page.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { Article, Document, Page } from '@utrecht/component-library-react';
+
+import { useForm } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
+
+import '@/app/styling/css/detail-page.css';
+import '@utrecht/design-tokens/dist/index.css';
+
+export default function Home() {
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<{ [key: string]: string }>();
+
+  return (
+    <Document>
+      <Page></Page>
+    </Document>
+  );
+}

packages/next-templates/src/app/mijn-omgeving/page.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import {
+  Article,
+  BreadcrumbNavLink,
+  BreadcrumbNav,
+  BreadcrumbNavSeparator,
+  Document,
+  Heading1,
+  Heading2,
+  Link,
+  Paragraph,
+  Page,
+  PageContent,
+} from '@utrecht/component-library-react';
+import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '@gemeente-denhaag/sidenav';
+
+import { HeaderIngelogd } from '@/components/ExampleHeader/HeaderIngelogd/HeaderIngelogd';
+import { ExampleFooter } from '@/components/ExampleFooter/ExampleFooter';
+import { Card } from '@/components/Card/Card';
+
+import {
+  IconCurrencyEuro,
+  IconLayoutGrid,
+  IconInbox,
+  IconArchive,
+  IconHome,
+  IconParking,
+  IconBuildingCommunity,
+  IconUser,
+} from '@tabler/icons-react';
+
+import { useForm } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
+
+import IconChevronRight from '../../app/styling/assets/chevronRight.svg';
+
+import '@/app/styling/css/detail-page.css';
+import '@utrecht/design-tokens/dist/index.css';
+import '@/app/styling/css/mijn-omgeving.css';
+
+export default function Home() {
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<{ [key: string]: string }>();
+
+  return (
+    <Document>
+      <Page>
+        <HeaderIngelogd />
+        <PageContent>
+          <BreadcrumbNav label="Kruimelpad">
+            <BreadcrumbNavLink href="" index={0} rel="home">
+              Home
+            </BreadcrumbNavLink>
+            <BreadcrumbNavSeparator>
+              <IconChevronRight className="voorbeeld-chevron-right-space" />
+            </BreadcrumbNavSeparator>
+            <BreadcrumbNavLink href="" index={1} rel="mijn-omgeving">
+              Mijn Omgeving
+            </BreadcrumbNavLink>
+          </BreadcrumbNav>
+
+          <Article id="main" className="voorbeeld-main-layout voorbeeld-toptask-layout">
+            <div className="voorbeeld-sidenav-layout">
+              <Sidenav>
+                <SidenavList>
+                  <SidenavItem className="voorbeeld-sidenav-spacing">
+                    <SidenavLink current href="#">
+                      <IconLayoutGrid />
+                      Overzicht
+                    </SidenavLink>
+                  </SidenavItem>
+
+                  <SidenavItem>
+                    <SidenavLink href="#">
+                      <IconInbox />
+                      Berichten
+                    </SidenavLink>
+                  </SidenavItem>
+                  <SidenavItem className="voorbeeld-sidenav-spacing">
+                    <SidenavLink href="#">
+                      <IconArchive />
+                      Mijn zaken
+                    </SidenavLink>
+                  </SidenavItem>
+                </SidenavList>
+              </Sidenav>
+
+              <Sidenav>
+                <SidenavList>
+                  <SidenavItem>
+                    <SidenavLink href="#">
+                      <IconCurrencyEuro />
+                      Belastingzaken
+                    </SidenavLink>
+                  </SidenavItem>
+                  <SidenavItem>
+                    <SidenavLink href="#">
+                      <IconHome /> WOZ
+                    </SidenavLink>
+                  </SidenavItem>
+                  <SidenavItem>
+                    <SidenavLink href="#">
+                      <IconParking />
+                      Parkeren
+                    </SidenavLink>
+                  </SidenavItem>
+                  <SidenavItem className="voorbeeld-sidenav-spacing">
+                    <SidenavLink href="#">
+                      <IconBuildingCommunity />
+                      Erfpacht
+                    </SidenavLink>
+                  </SidenavItem>
+                </SidenavList>
+              </Sidenav>
+
+              <Sidenav>
+                <SidenavList>
+                  <SidenavItem>
+                    <SidenavLink href="#">
+                      <IconUser />
+                      Account
+                    </SidenavLink>
+                  </SidenavItem>
+                </SidenavList>
+              </Sidenav>
+            </div>
+
+            <div className="voorbeeld-content">
+              <Heading1>Hallo Jeroen van Drouwen</Heading1>
+              <Paragraph>
+                In ‘Mijn omgeving’ kunt u zelf uw persoonlijke zaken regelen wanneer het u uitkomt. U kunt bijvoorbeeld
+                uw rekeningen betalen en zien wanneer uw aanvraag klaar is.
+              </Paragraph>
+
+              <Heading2>Wat moet ik regelen?</Heading2>
+              <Paragraph>U hoeft op dit moment niets te regelen.</Paragraph>
+              <Heading2>Mijn zaken</Heading2>
+              <Card />
+
+              <Link className="example--back-link" href="./mijn-omgeving/mijn-zaken">
+                Bekijk alle zaken
+              </Link>
+            </div>
+          </Article>
+        </PageContent>
+
+        <ExampleFooter />
+      </Page>
+    </Document>
+  );
+}

packages/next-templates/src/app/styling/css/mijn-omgeving.css

@@ -0,0 +1,16 @@
+.voorbeeld-main-layout {
+  margin-inline: auto;
+  padding-inline: var(--voorbeeld-space-block-cat);
+  max-inline-size: calc(var(--utrecht-article-max-inline-size) * 1.2);
+  inline-size: 100%;
+}
+
+.voorbeeld-toptask-layout {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--voorbeeld-space-column-elephant);
+}
+
+.voorbeeld-sidenav-spacing {
+  margin-bottom: var(--voorbeeld-space-row-rat);
+}

packages/next-templates/src/components/Card/Card.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { Paragraph, LinkList } from '@utrecht/component-library-react';
+import './card.css';
+
+export const Card = () => (
+  <section className="example-section">
+    <div className="example-card-group">
+      <div className="example-card">
+        <Paragraph className="example-card-title">Vraag aan de gemeente</Paragraph>
+        <LinkList links={[{ href: './mijn-omgeving/mijn-zaken', children: 'Bekijk zaak' }]} />
+      </div>
+    </div>
+  </section>
+);
+
+Card.displayName = 'Card';

packages/next-templates/src/components/Card/card.css

@@ -0,0 +1,26 @@
+.example-section {
+  margin-block-start: var(--voorbeeld-space-block-rabbit);
+}
+
+.example-card-group {
+  --example-card-border-width: var(--voorbeeld-border-width-sm,);
+  --example-card-border-color: var(--voorbeeld-color-dark-alpha-100);
+  --example-card-title-font-size: var(--voorbeeld-typography-font-size-xl);
+  --example-card-title-line-height: var(--voorbeeld-typography-line-height-lg);
+}
+
+.example-card {
+  border: var(--example-card-border-width) solid var(--example-card-border-color);
+  flex: 1 1 calc(50% - 64px);
+  padding-block-end: calc(2rem - var(--voorbeeld-space-block-ant));
+  padding-block-start: calc(1.5rem - var(--voorbeeld-space-block-ant));
+  padding-inline-start: calc(1.5rem - var(--voorbeeld-space-inline-ant));
+
+  border-radius: var(--voorbeeld-border-radius-md);
+  margin-bottom: var(--voorbeeld-space-block-rabbit);
+}
+
+.example-card-title {
+  font-size: var(--voorbeeld-typography-font-size-lg);
+  font-weight: var(--voorbeeld-typography-font-weight-bold);
+}