From fad3da1e2214da7c32495ca957459af56a1c4ac8 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 8 Jul 2024 13:22:30 +0200 Subject: [PATCH] Add two example pages for Amopis --- storybook/config/preview.tsx | 2 +- storybook/src/pages/Introduction.docs.mdx | 4 + .../amopis/DetailsPage/DetailsPage.docs.mdx | 10 + .../DetailsPage/DetailsPage.stories.tsx | 18 ++ .../pages/amopis/DetailsPage/DetailsPage.tsx | 163 +++++++++++++ .../pages/amopis/TablePage/TablePage.docs.mdx | 10 + .../amopis/TablePage/TablePage.stories.tsx | 18 ++ .../src/pages/amopis/TablePage/TablePage.tsx | 222 ++++++++++++++++++ storybook/src/pages/amopis/common/Layout.tsx | 33 +++ storybook/src/pages/amopis/common/Sidebar.tsx | 17 ++ .../src/pages/amopis/common/SiteHeader.tsx | 17 ++ storybook/src/pages/amopis/common/Submenu.tsx | 23 ++ storybook/src/pages/amopis/common/amopis.scss | 69 ++++++ storybook/src/pages/amopis/common/config.tsx | 60 +++++ 14 files changed, 665 insertions(+), 1 deletion(-) create mode 100644 storybook/src/pages/amopis/DetailsPage/DetailsPage.docs.mdx create mode 100644 storybook/src/pages/amopis/DetailsPage/DetailsPage.stories.tsx create mode 100644 storybook/src/pages/amopis/DetailsPage/DetailsPage.tsx create mode 100644 storybook/src/pages/amopis/TablePage/TablePage.docs.mdx create mode 100644 storybook/src/pages/amopis/TablePage/TablePage.stories.tsx create mode 100644 storybook/src/pages/amopis/TablePage/TablePage.tsx create mode 100644 storybook/src/pages/amopis/common/Layout.tsx create mode 100644 storybook/src/pages/amopis/common/Sidebar.tsx create mode 100644 storybook/src/pages/amopis/common/SiteHeader.tsx create mode 100644 storybook/src/pages/amopis/common/Submenu.tsx create mode 100644 storybook/src/pages/amopis/common/amopis.scss create mode 100644 storybook/src/pages/amopis/common/config.tsx diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx index 0d83a4401c..f5ade19aa8 100644 --- a/storybook/config/preview.tsx +++ b/storybook/config/preview.tsx @@ -43,7 +43,7 @@ export const parameters = { 'Components', ['Buttons', 'Containers', 'Feedback', 'Forms', 'Layout', 'Media', 'Navigation', 'Text'], 'Pages', - ['Introduction', 'Amsterdam.nl', ['Home Page']], + ['Introduction', 'Amsterdam.nl', ['Home Page'], 'Amopis'], ], }, }, diff --git a/storybook/src/pages/Introduction.docs.mdx b/storybook/src/pages/Introduction.docs.mdx index a5f6bf6eb5..7f7680458b 100644 --- a/storybook/src/pages/Introduction.docs.mdx +++ b/storybook/src/pages/Introduction.docs.mdx @@ -11,6 +11,10 @@ It uses the latest release of the libraries, without any customizations, giving Currently, we offer a home page and an article page for the upcoming Amsterdam.nl website. +As an example of an application created with our libraries, we have two pages for ‘Amopis’. +These employ some custom class names and inline styles for features we don’t yet support. +These pages are not intended for reuse. + ## Documentation The ‘Docs’ page explains the design decisions for this type of page and how to build it. diff --git a/storybook/src/pages/amopis/DetailsPage/DetailsPage.docs.mdx b/storybook/src/pages/amopis/DetailsPage/DetailsPage.docs.mdx new file mode 100644 index 0000000000..467f050a49 --- /dev/null +++ b/storybook/src/pages/amopis/DetailsPage/DetailsPage.docs.mdx @@ -0,0 +1,10 @@ +{/* @license CC0-1.0 */} + +import { Meta } from "@storybook/blocks"; +import * as DetailsPageStories from "./DetailsPage.stories.tsx"; + + + +# Details Page + +Displays properties of an entity. diff --git a/storybook/src/pages/amopis/DetailsPage/DetailsPage.stories.tsx b/storybook/src/pages/amopis/DetailsPage/DetailsPage.stories.tsx new file mode 100644 index 0000000000..94d4cee4bf --- /dev/null +++ b/storybook/src/pages/amopis/DetailsPage/DetailsPage.stories.tsx @@ -0,0 +1,18 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { Meta, StoryObj } from '@storybook/react' +import { DetailsPage } from './DetailsPage' +import { commonMeta } from '../common/config' + +const meta = { + ...commonMeta, + title: 'Pages/Amopis/Details Page', + component: DetailsPage, +} satisfies Meta + +export default meta + +export const Default: StoryObj = {} diff --git a/storybook/src/pages/amopis/DetailsPage/DetailsPage.tsx b/storybook/src/pages/amopis/DetailsPage/DetailsPage.tsx new file mode 100644 index 0000000000..10faa12d15 --- /dev/null +++ b/storybook/src/pages/amopis/DetailsPage/DetailsPage.tsx @@ -0,0 +1,163 @@ +import { + AspectRatio, + Breadcrumb, + Column, + DescriptionList, + Grid, + Heading, + Image, + Link, + LinkList, + Paragraph, + Row, + Tabs, +} from '@amsterdam/design-system-react' +import { EditDocumentIcon, EmailIcon } from '@amsterdam/design-system-react-icons' +import '../common/amopis.scss' +import { Submenu } from '../common/Submenu' +import { menu } from '../common/config' + +export const DetailsPage = () => ( + + + + Dashboard + Projecten + + Kerngegevens + Brug 423 opwaardering (Berlagebrug) – ams20192715 + + + + + {menu.level3.map(({ label }, index) => ( + + {label} + + ))} + + + + +
+ +
+ + +
+ + + Kerngegevens + + + Wijzig kerngegevens + + + +
+ + Opdrachtgevers + + + Ambtelijk opdrachtgever + + + Marise Ent + + + + Bestuurlijk Opdrachtgever Stad + + + Melanie van der Horst + + + + +
+
+ + Opdrachtnemers + + + Accounthouder + + + Paul Brouwer + + + + Opdrachtnemer + + + Erik Bakker + + + + Projectbeheerser + + + Klaas Helmers + + + + Projectbeheerser + + + Marjolein Boomer + + + + Projectbeheerser + + + Carina Cairo + + + + +
+
+ + Basisgegevens + + + Gebied + Gemeente Amsterdam + Stadsdeel + Amsterdam + Stadsdeel + Amsterdam + Status + Actief + Projectsoort + Programma Bruggen + +
+ +
+ + +
+ +
+ + + + + Impressie Brug 423   Afbeelding wijzigen + +
+
+ + + + + Locatie Brug 423   Bekijk op datapunt.nl + +
+ +
+ + +) diff --git a/storybook/src/pages/amopis/TablePage/TablePage.docs.mdx b/storybook/src/pages/amopis/TablePage/TablePage.docs.mdx new file mode 100644 index 0000000000..3e3b24a131 --- /dev/null +++ b/storybook/src/pages/amopis/TablePage/TablePage.docs.mdx @@ -0,0 +1,10 @@ +{/* @license CC0-1.0 */} + +import { Meta } from "@storybook/blocks"; +import * as TablePageStories from "./TablePage.stories.tsx"; + + + +# Table Page + +Displays items of a collection. diff --git a/storybook/src/pages/amopis/TablePage/TablePage.stories.tsx b/storybook/src/pages/amopis/TablePage/TablePage.stories.tsx new file mode 100644 index 0000000000..42756194bf --- /dev/null +++ b/storybook/src/pages/amopis/TablePage/TablePage.stories.tsx @@ -0,0 +1,18 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { Meta, StoryObj } from '@storybook/react' +import { TablePage } from './TablePage' +import { commonMeta } from '../common/config' + +const meta = { + ...commonMeta, + title: 'Pages/Amopis/Table Page', + component: TablePage, +} satisfies Meta + +export default meta + +export const Default: StoryObj = {} diff --git a/storybook/src/pages/amopis/TablePage/TablePage.tsx b/storybook/src/pages/amopis/TablePage/TablePage.tsx new file mode 100644 index 0000000000..bacc3a1d0d --- /dev/null +++ b/storybook/src/pages/amopis/TablePage/TablePage.tsx @@ -0,0 +1,222 @@ +import { + Accordion, + Badge, + Breadcrumb, + Button, + Column, + Grid, + Heading, + IconButton, + Paragraph, + Table, + Tabs, +} from '@amsterdam/design-system-react' +import { DocumentEditIcon, SearchIcon } from '@amsterdam/design-system-react-icons' +import '../common/amopis.scss' +import { Submenu } from '../common/Submenu' +import { menu } from '../common/config' + +export const TablePage = () => ( + + + + Dashboard + Planning + + Capaciteitsraming + Brug 423 opwaardering (Berlagebrug) – ams20192715 + + + + + {menu.level3.map(({ label }, index) => ( + + {label} + + ))} + + + + +
+ +
+ + +
+ +
+ Ramingen + Hier staan alle ramingen voor dit project. +
+
+ + Actuele ramingen + + + + + Raming + Versie + Status + In behandeling bij + Laatste wijziging + Acties + + + + + 2025 + 25-2 + + + + Marise Ent + + {`${new Date('2023-11-12').toLocaleDateString('nl-NL')} ${new Date('2023-11-12T11:42').toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}`} + + + + + + + 2024 + 24-7 + + + + Klaas Helmers + + {`${new Date('2023-11-01').toLocaleDateString('nl-NL')} ${new Date('2023-11-01T15:40').toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}`} + + + + + + + 2026 + 26-1 + + + + Klaas Helmers + + {`${new Date('2023-11-12').toLocaleDateString('nl-NL')} ${new Date('2023-11-12T11:42').toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}`} + + + + + + +
+
+ + + + + + Raming + Versie + Status + In behandeling bij + Laatste wijziging + Acties + + + + + 2024 + 24-6 + + + + Marjolein Boomer + + {`${new Date('2023-10-10').toLocaleDateString('nl-NL')} ${new Date('2023-10-10T07:49').toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}`} + + + + + + + 2024 + 24-5 + + + + Klaas Helmers + + {`${new Date('2023-09-18').toLocaleDateString('nl-NL')} ${new Date('2023-09-18T15:40').toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}`} + + + + + + + 2024 + 24-4 + + + + Marjolein Boomer + + {`${new Date('2023-09-18').toLocaleDateString('nl-NL')} ${new Date('2023-09-18T11:42').toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}`} + + + + + + + 2024 + 24-3 + + + + Marjolein Boomer + + {`${new Date('2023-09-17').toLocaleDateString('nl-NL')} ${new Date('2023-09-17T07:49').toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}`} + + + + + + + 2024 + 24-2 + + + + Marise Ent + + {`${new Date('2023-09-15').toLocaleDateString('nl-NL')} ${new Date('2023-09-15T15:40').toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}`} + + + + + + + 2025 + 24-1 + + + + Klaas Helmers + + {`${new Date('2023-09-09').toLocaleDateString('nl-NL')} ${new Date('2023-09-09T11:42').toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })}`} + + + + + + +
+ + +
+ +
+ +
+ + +) diff --git a/storybook/src/pages/amopis/common/Layout.tsx b/storybook/src/pages/amopis/common/Layout.tsx new file mode 100644 index 0000000000..5caf87c939 --- /dev/null +++ b/storybook/src/pages/amopis/common/Layout.tsx @@ -0,0 +1,33 @@ +import { Grid, PageMenu, Screen, SkipLink } from '@amsterdam/design-system-react' +import { HTMLAttributes } from 'react' +import type { PropsWithChildren } from 'react' +import { Sidebar } from './Sidebar' +import { SiteHeader } from './SiteHeader' + +type LayoutProps = PropsWithChildren> + +export const Layout = ({ children }: LayoutProps) => ( + <> + Direct naar inhoud + +
+ +
+ +
+ {children} +
+ + + + E-mail je vraag of feedback + Bekijk veelgestelde vragen + Bekijk releasebeschrijving + + + +
+
+ + +) diff --git a/storybook/src/pages/amopis/common/Sidebar.tsx b/storybook/src/pages/amopis/common/Sidebar.tsx new file mode 100644 index 0000000000..20dc391a30 --- /dev/null +++ b/storybook/src/pages/amopis/common/Sidebar.tsx @@ -0,0 +1,17 @@ +import { Column, Paragraph } from '@amsterdam/design-system-react' +import { menu } from './config' + +export const Sidebar = () => ( +
+ + {menu.level1.map(({ Icon, label }, index) => ( + + {Icon && } + + {label} + + + ))} + +
+) diff --git a/storybook/src/pages/amopis/common/SiteHeader.tsx b/storybook/src/pages/amopis/common/SiteHeader.tsx new file mode 100644 index 0000000000..cb25cf1420 --- /dev/null +++ b/storybook/src/pages/amopis/common/SiteHeader.tsx @@ -0,0 +1,17 @@ +import { Avatar, Grid, Header } from '@amsterdam/design-system-react' + +const getRandomLetter = () => Math.floor(Math.random() * 26) + 65 +const generateInitials = (): string => String.fromCharCode(...[getRandomLetter(), getRandomLetter()]) + +export const SiteHeader = () => ( + + +
} + logoLink="amopis" + logoLinkTitle="Naar de homepage van Amopis" + /> + + +) diff --git a/storybook/src/pages/amopis/common/Submenu.tsx b/storybook/src/pages/amopis/common/Submenu.tsx new file mode 100644 index 0000000000..d42652d6dc --- /dev/null +++ b/storybook/src/pages/amopis/common/Submenu.tsx @@ -0,0 +1,23 @@ +import { Icon, Tabs } from '@amsterdam/design-system-react' +import { ChevronRightIcon } from '@amsterdam/design-system-react-icons' +import { menu } from './config' + +type SubmenuProps = { + activeTab?: number +} + +export const Submenu = ({ activeTab }: SubmenuProps) => ( + + + {menu.level2.map(({ label }, index) => ( + + + {label} + + ))} + + {menu.level2.map(({ label }, index) => ( + + ))} + +) diff --git a/storybook/src/pages/amopis/common/amopis.scss b/storybook/src/pages/amopis/common/amopis.scss new file mode 100644 index 0000000000..3879452009 --- /dev/null +++ b/storybook/src/pages/amopis/common/amopis.scss @@ -0,0 +1,69 @@ +/* Copied from the CSS package because it doesn’t export SCSS variables. */ +$ams-breakpoint-medium: 36rem; +$ams-breakpoint-wide: 68rem; + +.ams-application-screen { + block-size: 100dvh; + display: flex; +} + +.ams-application-container { + display: grid; + grid-template-columns: 1fr; + + @media screen and (min-width: $ams-breakpoint-wide) { + grid-template-columns: 112px 1fr; + } +} + +.ams-application-content { + display: flex; + flex-direction: column; +} + +.ams-application-body { + background-color: var(--ams-color-neutral-grey1); + flex: auto; +} + +.ams-application-white-background { + background-color: var(--ams-color-primary-white); +} + +.ams-application-sidebar { + align-items: center; + background-color: var(--ams-color-primary-blue); + display: none; + flex-direction: column; + padding-block-start: calc(40px + 3 * var(--ams-grid-row-gap-md)); + + @media screen and (min-width: $ams-breakpoint-wide) { + display: flex; + } +} + +.ams-application-tabs-vertical { + border-block-end: none; + flex-direction: column; +} + +.ams-application-tabs-vertical .ams-tabs__button { + align-items: center; + border-block-end: var(--ams-tabs-list-border-block-end); + display: flex; + gap: var(--ams-space-xs); + padding-inline: var(--ams-space-sm); + text-align: start; +} + +.ams-application-column--halign-center { + justify-items: center; +} + +.ams-application-row--align-between { + justify-content: space-between; +} + +.ams-application-row--valign-baseline { + align-items: baseline; +} diff --git a/storybook/src/pages/amopis/common/config.tsx b/storybook/src/pages/amopis/common/config.tsx new file mode 100644 index 0000000000..e74fd66658 --- /dev/null +++ b/storybook/src/pages/amopis/common/config.tsx @@ -0,0 +1,60 @@ +import { + DocumentTextIcon, + ExternalLinkIcon, + HousingIcon, + StopIcon, + SuitcaseIcon, +} from '@amsterdam/design-system-react-icons' +import { Meta } from '@storybook/react' +import type { ElementType } from 'react' +import { Layout } from '../common/Layout' + +type Menu = { + level1: Array + level2: Array + level3: Array +} + +type MenuItem = { + Icon?: ElementType + label: string +} + +export const menu: Menu = { + level1: [ + { Icon: HousingIcon, label: 'Dashboard' }, + { Icon: SuitcaseIcon, label: 'Projecten' }, + { Icon: DocumentTextIcon, label: 'Rapportages' }, + { Icon: ExternalLinkIcon, label: 'Analyses' }, + { Icon: StopIcon, label: 'Instellingen' }, + ], + level2: [ + { label: 'Projectdetails' }, + { label: 'Projectstructuur' }, + { label: 'Planning' }, + { label: 'Capaciteitsraming' }, + { label: 'Financiën' }, + ], + level3: [ + { label: 'Overzicht' }, + { label: 'Kerngegevens' }, + { label: 'Projectinformatie' }, + { label: 'Projectgrenzen' }, + { label: 'Projectcodes' }, + { label: 'Autorisaties' }, + ], +} + +export const commonMeta = { + parameters: { + layout: 'fullscreen', + themes: { themeOverride: 'Compact' }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +} satisfies Meta