diff --git a/proprietary/tokens/src/brand/ams/space.compact.tokens.json b/proprietary/tokens/src/brand/ams/space.compact.tokens.json index 302b8ec06b..0ed8e6686d 100644 --- a/proprietary/tokens/src/brand/ams/space.compact.tokens.json +++ b/proprietary/tokens/src/brand/ams/space.compact.tokens.json @@ -1,11 +1,11 @@ { "ams": { "space": { - "xs": { "value": "clamp(0.2188rem, 0.2109rem + 0.0391vw, 0.25rem)" }, - "sm": { "value": "clamp(0.4375rem, 0.4219rem + 0.0781vw, 0.5rem)" }, - "md": { "value": "clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem)" }, - "lg": { "value": "clamp(1.3125rem, 1.2656rem + 0.2344vw, 1.5rem)" }, - "xl": { "value": "clamp(1.75rem, 1.6875rem + 0.3125vw, 2rem)" }, + "xs": { "value": "0.25rem" }, + "sm": { "value": "0.5rem" }, + "md": { "value": "1rem" }, + "lg": { "value": "1.5rem" }, + "xl": { "value": "2rem" }, "grid": { "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" }, "sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" }, diff --git a/proprietary/tokens/src/brand/ams/text.compact.tokens.json b/proprietary/tokens/src/brand/ams/text.compact.tokens.json index 57134f0199..ebe9faa817 100644 --- a/proprietary/tokens/src/brand/ams/text.compact.tokens.json +++ b/proprietary/tokens/src/brand/ams/text.compact.tokens.json @@ -3,25 +3,25 @@ "text": { "level": { "0": { - "font-size": { "value": "clamp(1.5768rem, 1.4299rem + 0.7346vw, 2.1645rem)" } + "font-size": { "value": "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)" } }, "1": { - "font-size": { "value": "clamp(1.4016rem, 1.2883rem + 0.5665vw, 1.8547rem)" } + "font-size": { "value": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)" } }, "2": { - "font-size": { "value": "clamp(1.2458rem, 1.16rem + 0.4293vw, 1.5893rem)" } + "font-size": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" } }, "3": { - "font-size": { "value": "clamp(1.1074rem, 1.0438rem + 0.3181vw, 1.3619rem)" } + "font-size": { "value": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)" } }, "4": { - "font-size": { "value": "clamp(0.9844rem, 0.9387rem + 0.2283vw, 1.167rem)" } + "font-size": { "value": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)" } }, "5": { - "font-size": { "value": "clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem)" } + "font-size": { "value": "1rem" } }, "6": { - "font-size": { "value": "clamp(0.7778rem, 0.758rem + 0.0989vw, 0.8569rem)" } + "font-size": { "value": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)" } } } } diff --git a/proprietary/tokens/src/brand/ams/text.tokens.json b/proprietary/tokens/src/brand/ams/text.tokens.json index 8fe55897d9..452b2148b5 100644 --- a/proprietary/tokens/src/brand/ams/text.tokens.json +++ b/proprietary/tokens/src/brand/ams/text.tokens.json @@ -8,31 +8,31 @@ }, "level": { "0": { - "font-size": { "value": "clamp(2.432rem, calc(1.895rem + 2.683vw), 4.578rem)" }, + "font-size": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" }, "line-height": { "value": "1.15" } }, "1": { - "font-size": { "value": "clamp(2.084rem, calc(1.69rem + 1.973vw), 3.662rem)" }, + "font-size": { "value": "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)" }, "line-height": { "value": "1.2" } }, "2": { - "font-size": { "value": "clamp(1.786rem, calc(1.5rem + 1.43vw), 2.93rem)" }, + "font-size": { "value": "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)" }, "line-height": { "value": "1.25" } }, "3": { - "font-size": { "value": "clamp(1.531rem, calc(1.328rem + 1.016vw), 2.344rem)" }, + "font-size": { "value": "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)" }, "line-height": { "value": "1.3" } }, "4": { - "font-size": { "value": "clamp(1.313rem, calc(1.173rem + 0.703vw), 1.875rem)" }, + "font-size": { "value": "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)" }, "line-height": { "value": "1.5" } }, "5": { - "font-size": { "value": "clamp(1.125rem, calc(1.031rem + 0.469vw), 1.5rem)" }, + "font-size": { "value": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)" }, "line-height": { "value": "1.6" } }, "6": { - "font-size": { "value": "clamp(0.964rem, calc(0.905rem + 0.295vw), 1.2rem)" }, + "font-size": { "value": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)" }, "line-height": { "value": "1.6" } } } 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/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx index a1caac9b1f..e571fa4382 100644 --- a/storybook/src/docs/space.docs.mdx +++ b/storybook/src/docs/space.docs.mdx @@ -16,12 +16,12 @@ Or at the 4 edges of a component: at the top, bottom, start, and end of its cont as used for buttons and input fields, and for larger components with a coloured background or border. This type of space is based on the font size – the medium space length equals the default Paragraph font size. -Because our typography is fluid, this type of spacing is as well. We offer 5 lengths. ### Spacious -In Spacious Mode, the medium space grows from 18 to 24 pixels between window widths of 320 and 1600. +Because our typography is fluid in Spacious Mode, spacing is as well. +The medium space grows from 18 to 24 pixels between window widths of 320 and 1600. | | | 320 | 832 | 1600 | | --------------: | :--: | -----: | -------: | -----: | @@ -33,15 +33,15 @@ In Spacious Mode, the medium space grows from 18 to 24 pixels between window wid ### Compact -In Compact Mode, the medium space grows from 14 to 16 pixels between window widths of 320 and 1600. +In Compact Mode, the medium space is 16 pixels. -| | | 320 | 832 | 1600 | -| --------------: | :--: | -----: | -------: | -----: | -| **Extra small** | `xs` | 3.5 | 3.7 | 4 | -| **Small** | `sm` | 7 | 6.8 | 8 | -| **Medium** | `md` | **14** | **13.5** | **16** | -| **Large** | `lg` | 21 | 20.3 | 24 | -| **Extra large** | `xl` | 28 | 27.1 | 32 | +| | | | +| --------------: | :--: | -----: | +| **Extra small** | `xs` | 4 | +| **Small** | `sm` | 8 | +| **Medium** | `md` | **16** | +| **Large** | `lg` | 24 | +| **Extra large** | `xl` | 32 | ## Grid Space diff --git a/storybook/src/docs/typography.docs.mdx b/storybook/src/docs/typography.docs.mdx index 6efd08f983..bea8b5be0a 100644 --- a/storybook/src/docs/typography.docs.mdx +++ b/storybook/src/docs/typography.docs.mdx @@ -73,16 +73,17 @@ And the minimum: For applications, text that large would be counterproductive. That is why we have a compact theme for typography. -In this theme, Text Level 5 grows from 14 to 16 pixels. +Typography is not fluid in this theme. +Text Level 5 is 16 pixels on both narrow and wide windows. -Larger text levels grow with a factor of 7 ÷ 6 ≈ 1.167. -Smaller text levels grow with a factor of 9 ÷ 8 = 1.125. +Larger text levels grow with a factor of 9 ÷ 8 ≈ 1.125. +Smaller text levels grow with a factor of 16 ÷ 15 = 1.067. The maximum text sizes for all levels in the compact theme: @@ -91,7 +92,7 @@ And the minimum: @@ -114,11 +115,11 @@ The text sizes at those points are as follows, rounded to 1 decimal place: #### Compact -| Device Class | Design Width | 0 | 1 | 2 | 3 | 4 | 5 | 6 | -| :----------- | ------------ | ---: | ---: | ---: | ---: | ---: | ---: | ---: | -| Phone | 320 | 25.2 | 22.4 | 19.9 | 17.7 | 15.8 | 14 | 12.4 | -| Tablet | 832 | 29.0 | 25.3 | 22.1 | 19.3 | 16.9 | 14.8 | 13 | -| Desktop | 1600 | 34.6 | 29.6 | 25.4 | 21.8 | 18.7 | 16 | 13.7 | +| Device Class | Design Width | 0 | 1 | 2 | 3 | 4 | 5 | 6 | +| :----------- | ------------ | ---: | ---: | ---: | ---: | ---: | --: | ---: | +| Phone | 320 | 22.1 | 20.7 | 19.4 | 18.2 | 17.1 | 16 | 15 | +| Tablet | 832 | 24.8 | 22.7 | 20.8 | 19 | 17.4 | 16 | 14.7 | +| Desktop | 1600 | 28.8 | 25.6 | 22.8 | 20.3 | 18 | 16 | 14.2 | ## Emphasis 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..f06ca20291 --- /dev/null +++ b/storybook/src/pages/amopis/common/config.tsx @@ -0,0 +1,59 @@ +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', + }, + decorators: [ + (Story) => ( + + + + ), + ], +} satisfies Meta diff --git a/storybook/src/pages/amsterdam/common/config.tsx b/storybook/src/pages/amsterdam/common/config.tsx index 4c66b1e198..a1956d1922 100644 --- a/storybook/src/pages/amsterdam/common/config.tsx +++ b/storybook/src/pages/amsterdam/common/config.tsx @@ -11,6 +11,5 @@ export const commonMeta = { ], parameters: { layout: 'fullscreen', - themes: { themeOverride: 'Spacious' }, }, } satisfies Meta