upgrade: Amsterdam Design System 0.6.0 (#83)

* Update dependencies * Use gap utility class from design system * Use column component where possible * Tweak whitespace and others * Use margin-bottom utility class from design system * Add a key and simplify the rest * Replace some margin classes with columns and gaps * Replace column class name * Replace inline row styles with classes * Fix gap arguments * Extract filter component and configuration * Add example of site-level alert * Remove header padding override * Tweak things * Make site wide alert a bit more realistic
Amsterdam · Mar 8, 2024 · 2c61505 · 2c61505
1 parent 1b2ea3a
commit 2c61505
Show file tree

Hide file tree

Showing 26 changed files with 467 additions and 487 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,35 +21,35 @@
     "update:patch": "npm-check-updates --configFileName .ncurc.patch.js --deep --dep dev,prod --target patch --upgrade && pnpm install"
   },
   "dependencies": {
-    "@amsterdam/design-system-assets":  "^0.1.7",
-    "@amsterdam/design-system-css": "^0.5.0",
-    "@amsterdam/design-system-react": "^0.5.0",
+    "@amsterdam/design-system-assets": "^0.1.8",
+    "@amsterdam/design-system-css": "^0.6.0",
+    "@amsterdam/design-system-react": "^0.6.0",
     "@amsterdam/design-system-react-icons": "^0.1.12",
-    "@amsterdam/design-system-tokens": "^0.5.1",
+    "@amsterdam/design-system-tokens": "^0.6.0",
     "@babel/runtime": "^7.24.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.2"
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "npm-check-updates": "16.14.15",
     "plop": "^4.0.1",
     "prettier": "^3.2.5",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5"
   }
 }
diff --git a/src/index.css b/src/index.css
@@ -14,68 +14,23 @@
   min-height: 100vh;
 }
 
-/* Stacks and alignment */
+/* Row and column alignment */
 
-.amsterdam-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.amsterdam-column-halign-center {
-  align-items: center;
+.amsterdam-column--halign-center {
+  justify-items: center;
 }
 
 .amsterdam-row {
   display: flex;
   flex-direction: row;
 }
 
-.amsterdam-row-align-between {
+.amsterdam-row--align-between {
   justify-content: space-between;
 }
 
-/* Gaps */
-
-.amsterdam-gap-xs {
-  gap: calc(var(--amsterdam-grid-gap) / 4);
-}
-
-.amsterdam-gap-sm {
-  gap: calc(var(--amsterdam-grid-gap) / 2);
-}
-
-.amsterdam-gap-md {
-  gap: var(--amsterdam-grid-gap);
-}
-
-.amsterdam-gap-lg {
-  gap: calc(var(--amsterdam-grid-gap) * 1.5);
-}
-
-.amsterdam-gap-xl {
-  gap: calc(var(--amsterdam-grid-gap) * 2);
-}
-
-/* Margin bottom */
-
-.amsterdam-mb-xs.amsterdam-mb-xs {
-  margin-block-end: calc(var(--amsterdam-grid-gap) / 4);
-}
-
-.amsterdam-mb-sm.amsterdam-mb-sm {
-  margin-block-end: calc(var(--amsterdam-grid-gap) / 2);
-}
-
-.amsterdam-mb-md.amsterdam-mb-md {
-  margin-block-end: var(--amsterdam-grid-gap);
-}
-
-.amsterdam-mb-lg.amsterdam-mb-lg {
-  margin-block-end: calc(var(--amsterdam-grid-gap) * 1.5);
-}
-
-.amsterdam-mb-lg.amsterdam-mb-lg {
-  margin-block-end: calc(var(--amsterdam-grid-gap) * 2);
+.amsterdam-row--valign-baseline {
+  align-items: baseline;
 }
 
 /* Indicate non-functional links */
@@ -84,12 +39,6 @@ a[href="#"] {
   cursor: not-allowed;
 }
 
-/* Override header padding */
-
-.amsterdam-header {
-  padding-block: 24px;
-}
-
 /* Set strong emphasis in extra bold type */
 strong {
   font-weight: 800;

diff --git a/src/shared/components/SiteFooter.tsx b/src/shared/components/SiteFooter.tsx
@@ -1,4 +1,13 @@
-import { Footer, Grid, Heading, Link, LinkList, Paragraph, VisuallyHidden } from '@amsterdam/design-system-react'
+import {
+  Column,
+  Footer,
+  Grid,
+  Heading,
+  Link,
+  LinkList,
+  Paragraph,
+  VisuallyHidden,
+} from '@amsterdam/design-system-react'
 import { ChattingIcon, PhoneIcon } from '@amsterdam/design-system-react-icons'
 
 export const SiteFooter = () => (
@@ -9,7 +18,7 @@ export const SiteFooter = () => (
       </VisuallyHidden>
       <Grid gapVertical="large" paddingVertical="medium">
         <Grid.Cell span={3}>
-          <div style={{ display: 'grid' }} className="amsterdam-gap-xs">
+          <Column gap="extra-small">
             <Heading level={2} size="level-4" inverseColor>
               Contact
             </Heading>
@@ -32,10 +41,10 @@ export const SiteFooter = () => (
                 Bel 14 020
               </LinkList.Link>
             </LinkList>
-          </div>
+          </Column>
         </Grid.Cell>
         <Grid.Cell span={3} start={{ narrow: 1, medium: 5, wide: 5 }}>
-          <div style={{ display: 'grid' }} className="amsterdam-gap-xs">
+          <Column gap="extra-small">
             <Heading level={2} size="level-4" inverseColor>
               Volg de gemeente
             </Heading>
@@ -94,12 +103,12 @@ export const SiteFooter = () => (
                 Werkenbij
               </LinkList.Link>
             </LinkList>
-          </div>
+          </Column>
         </Grid.Cell>
         <Grid.Cell span={3} start={{ narrow: 1, medium: 1, wide: 9 }}>
-          <div style={{ display: 'grid' }} className="amsterdam-gap-md">
-            <section>
-              <Heading level={2} size="level-4" inverseColor className="amsterdam-mb-xs">
+          <Column gap="small">
+            <Column as="section" gap="extra-small">
+              <Heading level={2} size="level-4" inverseColor>
                 Kalender
               </Heading>
               <Paragraph size="small" inverseColor>
@@ -113,9 +122,9 @@ export const SiteFooter = () => (
                 </Link>
                 .
               </Paragraph>
-            </section>
-            <section>
-              <Heading level={3} size="level-4" inverseColor className="amsterdam-mb-xs">
+            </Column>
+            <Column as="section" gap="extra-small">
+              <Heading level={3} size="level-4" inverseColor>
                 Uit in Amsterdam
               </Heading>
               <Paragraph size="small" inverseColor>
@@ -125,8 +134,8 @@ export const SiteFooter = () => (
                 </Link>{' '}
                 vindt u de beste tips op het gebied van cultuur, uitgaan en evenementen.
               </Paragraph>
-            </section>
-          </div>
+            </Column>
+          </Column>
         </Grid.Cell>
       </Grid>
     </Footer.Top>

diff --git a/src/shared/pages/RootPage.tsx b/src/shared/pages/RootPage.tsx
@@ -30,12 +30,14 @@ export const RootPage = () => (
     <Grid paddingVertical="large">
       <Grid.Cell span="all">
         <PageHeading>Prototypes</PageHeading>
-        <Heading level={2} size="level-4" className="amsterdam-mb-md">
+        <Heading level={2} size="level-4" className="amsterdam-mb--md">
           Amsterdam Design System
         </Heading>
         <LinkList>
           {sites.map(({ href, label }) => (
-            <LinkList.Link href={href}>{label}</LinkList.Link>
+            <LinkList.Link href={href} key={label}>
+              {label}
+            </LinkList.Link>
           ))}
         </LinkList>
       </Grid.Cell>

diff --git a/src/sites/amopis/components/amopis.css b/src/sites/amopis/components/amopis.css
@@ -25,10 +25,16 @@
   background-color: var(--amsterdam-color-primary-blue);
   display: flex;
   flex-direction: column;
-  padding-block-start: calc(40px + var(--amsterdam-grid-density-low-gap));
+  padding-block-start: calc(40px + 3 * var(--amsterdam-grid-row-gap-md));
   align-items: center;
 }
 
+.amopis-project-details-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 24px;
+  row-gap: var(--amsterdam-grid-row-gap-sm);
+}
+
 @media (max-width: 1087px) {
   .amopis-sidebar {
     display: none;

diff --git a/src/sites/amopis/components/project/Project.tsx b/src/sites/amopis/components/project/Project.tsx
@@ -2,6 +2,7 @@ import '../amopis.css'
 import {
   AspectRatio,
   Breadcrumb,
+  Column,
   Grid,
   Heading,
   Image,
@@ -18,7 +19,7 @@ export const Project = () => (
         <Breadcrumb.Item href="#">Dashboard</Breadcrumb.Item>
         <Breadcrumb.Item href="#">Projecten</Breadcrumb.Item>
       </Breadcrumb>
-      <Heading className="amsterdam-mb-sm">Kerngegevens</Heading>
+      <Heading className="amsterdam-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 }}>
@@ -61,26 +62,30 @@ export const Project = () => (
     </Grid.Cell>
     <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }}>
       <div className="amopis-white-background" style={{ padding: '1rem' }}>
-        <div className="amsterdam-column amsterdam-gap-sm">
-          <div className="amsterdam-row" style={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
+        <Column>
+          <div className="amsterdam-row amsterdam-row--align-between amsterdam-row--valign-baseline">
             <Heading level={3}>Kerngegevens</Heading>
             <LinkList>
               <LinkList.Link href="#" icon={EditDocumentIcon}>
                 Wijzig kerngegevens
               </LinkList.Link>
             </LinkList>
           </div>
-          <Heading level={3}>Opdrachtgevers</Heading>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 24px' }} className="amsterdam-gap-sm">
+          <section className="amopis-project-details-grid">
+            <Heading level={4} style={{ gridColumn: '1 / -1' }}>
+              Opdrachtgevers
+            </Heading>
             <Paragraph>Ambtelijk opdrachtgever</Paragraph>
             <Paragraph style={{ fontWeight: 'bold' }}>Marise Ent</Paragraph>
             <EmailIcon width={24} fill="#004469" />
             <Paragraph>Bestuurlijk Opdrachtgever Stad</Paragraph>
             <Paragraph style={{ fontWeight: 'bold' }}>Melanie van der Horst</Paragraph>
             <EmailIcon width={24} fill="#004469" />
-          </div>
-          <Heading level={3}>Opdrachtnemers</Heading>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 24px' }} className="amsterdam-gap-sm">
+          </section>
+          <section className="amopis-project-details-grid">
+            <Heading level={4} style={{ gridColumn: '1 / -1' }}>
+              Opdrachtnemers
+            </Heading>
             <Paragraph>Accounthouder</Paragraph>
             <Paragraph style={{ fontWeight: 'bold' }}>Paul Brouwer</Paragraph>
             <EmailIcon width={24} fill="#004469" />
@@ -96,9 +101,11 @@ export const Project = () => (
             <Paragraph>Projectbeheerser</Paragraph>
             <Paragraph style={{ fontWeight: 'bold' }}>Carina Cairo</Paragraph>
             <EmailIcon width={24} fill="#004469" />
-          </div>
-          <Heading level={3}>Basisgegevens</Heading>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 24px' }} className="amsterdam-gap-sm">
+          </section>
+          <section className="amopis-project-details-grid">
+            <Heading level={4} style={{ gridColumn: '1 / -1' }}>
+              Basisgegevens
+            </Heading>
             <Paragraph>Gebied</Paragraph>
             <Paragraph style={{ fontWeight: 'bold' }}>Gemeente Amsterdam</Paragraph>
             <span />
@@ -114,13 +121,13 @@ export const Project = () => (
             <Paragraph>Projectsoort</Paragraph>
             <Paragraph style={{ fontWeight: 'bold' }}>Programma Bruggen</Paragraph>
             <span />
-          </div>
-        </div>
+          </section>
+        </Column>
       </div>
     </Grid.Cell>
     <Grid.Cell span={{ narrow: 4, medium: 3, wide: 3 }} start={{ narrow: 1, medium: 3, wide: 10 }}>
       <div className="amopis-white-background" style={{ padding: '1rem' }}>
-        <div className="amsterdam-column amsterdam-gap-sm">
+        <Column gap="small">
           <div>
             <AspectRatio ratio="x-wide">
               <Image alt="" src="https://picsum.photos/900/720?random=1" />
@@ -137,7 +144,7 @@ export const Project = () => (
               Locatie Brug 423 &nbsp; <Link variant="inline">Bekijk op datapunt.nl</Link>
             </Paragraph>
           </div>
-        </div>
+        </Column>
       </div>
     </Grid.Cell>
   </Grid>