chore: Redeploy application examples to evaluate visual design changes

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)" },

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)" }
         }
       }
     }

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" }
         }
       }

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'],
       ],
     },
   },

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
 

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:
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
-  fontSizes={[34.6, 29.6, 25.4, 21.8, 18.7, 16, 13.7]}
+  fontSizes={[28.8, 25.6, 22.8, 20.3, 18, 16, 14.2]}
   fontWeight={400}
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
 />
@@ -91,7 +92,7 @@ And the minimum:
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
-  fontSizes={[25.2, 22.4, 19.9, 17.7, 15.8, 14, 12.4]}
+  fontSizes={[22.1, 20.7, 19.4, 18.2, 17.1, 16, 15]}
   fontWeight={400}
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
 />
@@ -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
 

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.

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";
+
+<Meta of={DetailsPageStories} />
+
+# Details Page
+
+Displays properties of an entity.

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<typeof DetailsPage>
+
+export default meta
+
+export const Default: StoryObj = {}

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 = () => (
+  <Grid paddingVertical="medium">
+    <Grid.Cell span="all">
+      <Breadcrumb>
+        <Breadcrumb.Link href="#">Dashboard</Breadcrumb.Link>
+        <Breadcrumb.Link href="#">Projecten</Breadcrumb.Link>
+      </Breadcrumb>
+      <Heading className="ams-mb--sm">Kerngegevens</Heading>
+      <Heading level={2}>Brug 423 opwaardering (Berlagebrug) – ams20192715</Heading>
+    </Grid.Cell>
+    <Grid.Cell span={{ narrow: 4, medium: 8, wide: 10 }} start={{ narrow: 1, medium: 1, wide: 3 }}>
+      <Tabs>
+        <Tabs.List>
+          {menu.level3.map(({ label }, index) => (
+            <Tabs.Button tab={index} key={label}>
+              {label}
+            </Tabs.Button>
+          ))}
+        </Tabs.List>
+      </Tabs>
+    </Grid.Cell>
+    <Grid.Cell start={1} span={{ narrow: 4, medium: 2, wide: 2 }}>
+      <div className="ams-application-white-background">
+        <Submenu />
+      </div>
+    </Grid.Cell>
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }}>
+      <div className="ams-application-white-background" style={{ padding: '1rem' }}>
+        <Column>
+          <Row className="ams-application-row--align-between amopis-row--valign-baseline">
+            <Heading level={3}>Kerngegevens</Heading>
+            <LinkList>
+              <LinkList.Link href="#" icon={EditDocumentIcon}>
+                Wijzig kerngegevens
+              </LinkList.Link>
+            </LinkList>
+          </Row>
+          <section>
+            <Heading level={4} className="ams-mb--sm">
+              Opdrachtgevers
+            </Heading>
+            <DescriptionList>
+              <DescriptionList.Term>Ambtelijk opdrachtgever</DescriptionList.Term>
+              <DescriptionList.Details>
+                <Row style={{ justifyContent: 'space-between' }}>
+                  <span>Marise Ent</span>
+                  <EmailIcon width={24} fill="#004469" />
+                </Row>
+              </DescriptionList.Details>
+              <DescriptionList.Term>Bestuurlijk Opdrachtgever Stad</DescriptionList.Term>
+              <DescriptionList.Details>
+                <Row style={{ justifyContent: 'space-between' }}>
+                  <span>Melanie van der Horst</span>
+                  <EmailIcon width={24} fill="#004469" />
+                </Row>
+              </DescriptionList.Details>
+            </DescriptionList>
+          </section>
+          <section>
+            <Heading level={4} className="ams-mb--sm">
+              Opdrachtnemers
+            </Heading>
+            <DescriptionList>
+              <DescriptionList.Term>Accounthouder</DescriptionList.Term>
+              <DescriptionList.Details>
+                <Row style={{ justifyContent: 'space-between' }}>
+                  <span>Paul Brouwer</span>
+                  <EmailIcon width={24} fill="#004469" />
+                </Row>
+              </DescriptionList.Details>
+              <DescriptionList.Term>Opdrachtnemer</DescriptionList.Term>
+              <DescriptionList.Details>
+                <Row style={{ justifyContent: 'space-between' }}>
+                  <span>Erik Bakker</span>
+                  <EmailIcon width={24} fill="#004469" />
+                </Row>
+              </DescriptionList.Details>
+              <DescriptionList.Term>Projectbeheerser</DescriptionList.Term>
+              <DescriptionList.Details>
+                <Row style={{ justifyContent: 'space-between' }}>
+                  <span>Klaas Helmers</span>
+                  <EmailIcon width={24} fill="#004469" />
+                </Row>
+              </DescriptionList.Details>
+              <DescriptionList.Term>Projectbeheerser</DescriptionList.Term>
+              <DescriptionList.Details>
+                <Row style={{ justifyContent: 'space-between' }}>
+                  <span>Marjolein Boomer</span>
+                  <EmailIcon width={24} fill="#004469" />
+                </Row>
+              </DescriptionList.Details>
+              <DescriptionList.Term>Projectbeheerser</DescriptionList.Term>
+              <DescriptionList.Details>
+                <Row style={{ justifyContent: 'space-between' }}>
+                  <span>Carina Cairo</span>
+                  <EmailIcon width={24} fill="#004469" />
+                </Row>
+              </DescriptionList.Details>
+            </DescriptionList>
+          </section>
+          <section>
+            <Heading level={4} className="ams-mb--sm">
+              Basisgegevens
+            </Heading>
+            <DescriptionList>
+              <DescriptionList.Term>Gebied</DescriptionList.Term>
+              <DescriptionList.Details>Gemeente Amsterdam</DescriptionList.Details>
+              <DescriptionList.Term>Stadsdeel</DescriptionList.Term>
+              <DescriptionList.Details>Amsterdam</DescriptionList.Details>
+              <DescriptionList.Term>Stadsdeel</DescriptionList.Term>
+              <DescriptionList.Details>Amsterdam</DescriptionList.Details>
+              <DescriptionList.Term>Status</DescriptionList.Term>
+              <DescriptionList.Details>Actief</DescriptionList.Details>
+              <DescriptionList.Term>Projectsoort</DescriptionList.Term>
+              <DescriptionList.Details>Programma Bruggen</DescriptionList.Details>
+            </DescriptionList>
+          </section>
+        </Column>
+      </div>
+    </Grid.Cell>
+    <Grid.Cell span={{ narrow: 4, medium: 3, wide: 3 }} start={{ narrow: 1, medium: 3, wide: 10 }}>
+      <div className="ams-application-white-background" style={{ padding: '1rem' }}>
+        <Column gap="small">
+          <div>
+            <AspectRatio ratio="x-wide">
+              <Image alt="" src="https://picsum.photos/900/720?random=1" />
+            </AspectRatio>
+            <Paragraph>
+              Impressie Brug 423 &nbsp; <Link variant="inline">Afbeelding wijzigen</Link>
+            </Paragraph>
+          </div>
+          <div>
+            <AspectRatio ratio="x-wide">
+              <Image alt="" src="https://picsum.photos/900/720?random=2" />
+            </AspectRatio>
+            <Paragraph>
+              Locatie Brug 423 &nbsp; <Link variant="inline">Bekijk op datapunt.nl</Link>
+            </Paragraph>
+          </div>
+        </Column>
+      </div>
+    </Grid.Cell>
+  </Grid>
+)