Merge branch 'develop' into task/DES-406-implement-release-please

Amsterdam · Jan 31, 2024 · f3358dc · f3358dc
2 parents d612924 + 2bba111
commit f3358dc
Show file tree

Hide file tree

Showing 50 changed files with 250 additions and 43 deletions.
diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2024-01-31)
+
+### ⚠ BREAKING CHANGES
+
+* Change blue color names of Spotlight to match Badge API (#1061)
+* Allow zero row gap for Grid (#1040)
+* Add icon button (#1021)
+* Update alert appearance, make ‘warning’ the default and icon non-optional (#993)
+
+### Features
+
+* Add Badge component ([#1045](https://github.com/Amsterdam/design-system/issues/1045)) ([d346cdf](https://github.com/Amsterdam/design-system/commit/d346cdfd2b3c7fab08e6bae10314420f1fde8a5f))
+* Add icon button ([#1021](https://github.com/Amsterdam/design-system/issues/1021)) ([b6e1c26](https://github.com/Amsterdam/design-system/commit/b6e1c260878c09340c9fc89f8740ae033e206855))
+* Add MegaMenu component ([#992](https://github.com/Amsterdam/design-system/issues/992)) ([de9fcc6](https://github.com/Amsterdam/design-system/commit/de9fcc65cced79a07cf201613b8616193f86b810))
+* Add Table ([#1043](https://github.com/Amsterdam/design-system/issues/1043)) ([2175b22](https://github.com/Amsterdam/design-system/commit/2175b22dbab369fb5d7f817a09c7f0560d8d8195))
+* Allow zero row gap for Grid ([#1040](https://github.com/Amsterdam/design-system/issues/1040)) ([6ef7b08](https://github.com/Amsterdam/design-system/commit/6ef7b08c4962bad9c564ade67276b78e1a4712b8))
+* Change blue color names of Spotlight to match Badge API ([#1061](https://github.com/Amsterdam/design-system/issues/1061)) ([0e663bd](https://github.com/Amsterdam/design-system/commit/0e663bd1bcbc8c848d16962749d6113cd3aaaf20))
+* Introduce separate Link List component ([#1051](https://github.com/Amsterdam/design-system/issues/1051)) ([7ccf23d](https://github.com/Amsterdam/design-system/commit/7ccf23d1128a6cade34ec6846d0fee23335af525))
+
+### Bug Fixes
+
+* Update alert appearance, make ‘warning’ the default and icon non-optional ([#993](https://github.com/Amsterdam/design-system/issues/993)) ([df15253](https://github.com/Amsterdam/design-system/commit/df152538278a73c4aceb094fece70025ff35dc5f))
+
 ## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-22)
 
 ### ⚠ BREAKING CHANGES

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2024-01-31)
+
+### ⚠ BREAKING CHANGES
+
+* Change blue color names of Spotlight to match Badge API (#1061)
+* Allow zero row gap for Grid (#1040)
+* Add icon button (#1021)
+* Update alert appearance, make ‘warning’ the default and icon non-optional (#993)
+
+### Features
+
+* Add Badge component ([#1045](https://github.com/Amsterdam/design-system/issues/1045)) ([d346cdf](https://github.com/Amsterdam/design-system/commit/d346cdfd2b3c7fab08e6bae10314420f1fde8a5f))
+* Add icon button ([#1021](https://github.com/Amsterdam/design-system/issues/1021)) ([b6e1c26](https://github.com/Amsterdam/design-system/commit/b6e1c260878c09340c9fc89f8740ae033e206855))
+* Add MegaMenu component ([#992](https://github.com/Amsterdam/design-system/issues/992)) ([de9fcc6](https://github.com/Amsterdam/design-system/commit/de9fcc65cced79a07cf201613b8616193f86b810))
+* Add Table ([#1043](https://github.com/Amsterdam/design-system/issues/1043)) ([2175b22](https://github.com/Amsterdam/design-system/commit/2175b22dbab369fb5d7f817a09c7f0560d8d8195))
+* Allow zero row gap for Grid ([#1040](https://github.com/Amsterdam/design-system/issues/1040)) ([6ef7b08](https://github.com/Amsterdam/design-system/commit/6ef7b08c4962bad9c564ade67276b78e1a4712b8))
+* Change blue color names of Spotlight to match Badge API ([#1061](https://github.com/Amsterdam/design-system/issues/1061)) ([0e663bd](https://github.com/Amsterdam/design-system/commit/0e663bd1bcbc8c848d16962749d6113cd3aaaf20))
+* Introduce separate Link List component ([#1051](https://github.com/Amsterdam/design-system/issues/1051)) ([7ccf23d](https://github.com/Amsterdam/design-system/commit/7ccf23d1128a6cade34ec6846d0fee23335af525))
+
+### Bug Fixes
+
+* Include children in public prop types ([#1044](https://github.com/Amsterdam/design-system/issues/1044)) ([2b4c2f6](https://github.com/Amsterdam/design-system/commit/2b4c2f6372c3cf3098a1c848594a29a2ad7fb785))
+* Refactor interfaces to types ([#1055](https://github.com/Amsterdam/design-system/issues/1055)) ([91f1126](https://github.com/Amsterdam/design-system/commit/91f1126f27301688b0d1b2d63efa4af03ea2ddfc))
+* Refactor subcomponents ([#1050](https://github.com/Amsterdam/design-system/issues/1050)) ([9e48aec](https://github.com/Amsterdam/design-system/commit/9e48aec0444fe5c378614b9ffb2efc3b847f6b7a))
+* Update alert appearance, make ‘warning’ the default and icon non-optional ([#993](https://github.com/Amsterdam/design-system/issues/993)) ([df15253](https://github.com/Amsterdam/design-system/commit/df152538278a73c4aceb094fece70025ff35dc5f))
+
 ## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-22)
 
 ### ⚠ BREAKING CHANGES

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "Community for NL Design System",
   "description": "React component library bundle for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",

diff --git a/packages/react/src/Accordion/README.md b/packages/react/src/Accordion/README.md
@@ -1,3 +1,3 @@
 # React Accordion component
 
-[Accordion documentation](../../../css/src/accordion/README.md)
+[Accordion documentation](../../../css/src/components/accordion/README.md)
diff --git a/packages/react/src/Alert/README.md b/packages/react/src/Alert/README.md
@@ -1,3 +1,3 @@
 # React Alert component
 
-[Alert documentation](../../../css/src/alert/README.md)
+[Alert documentation](../../../css/src/components/alert/README.md)
diff --git a/packages/react/src/AspectRatio/README.md b/packages/react/src/AspectRatio/README.md
@@ -1,3 +1,3 @@
 # React Aspect Ratio component
 
-[Aspect ratio documentation](../../../css/src/aspect-ratio/README.md)
+[Aspect ratio documentation](../../../css/src/components/aspect-ratio/README.md)
diff --git a/packages/react/src/Badge/README.md b/packages/react/src/Badge/README.md
@@ -1,3 +1,3 @@
 # React Badge component
 
-[Badge documentation](../../../css/src/badge/README.md)
+[Badge documentation](../../../css/src/components/badge/README.md)
diff --git a/packages/react/src/Blockquote/README.md b/packages/react/src/Blockquote/README.md
@@ -1,3 +1,3 @@
 # React Blockquote component
 
-[Blockquote documentation](../../../css/src/blockquote/README.md)
+[Blockquote documentation](../../../css/src/components/blockquote/README.md)
diff --git a/packages/react/src/Breadcrumb/README.md b/packages/react/src/Breadcrumb/README.md
@@ -1,3 +1,3 @@
 # React Breadcrumb component
 
-[Breadcrumb documentation](../../../css/src/breadcrumb/README.md)
+[Breadcrumb documentation](../../../css/src/components/breadcrumb/README.md)
diff --git a/packages/react/src/Button/README.md b/packages/react/src/Button/README.md
@@ -1,3 +1,3 @@
 # React Button Component
 
-[Button documentation](../../../css/src/button/README.md)
+[Button documentation](../../../css/src/components/button/README.md)
diff --git a/packages/react/src/Card/README.md b/packages/react/src/Card/README.md
@@ -1,3 +1,3 @@
 # React Card component
 
-[Card documentation](../../../css/src/card/README.md)
+[Card documentation](../../../css/src/components/card/README.md)
diff --git a/packages/react/src/Checkbox/README.md b/packages/react/src/Checkbox/README.md
@@ -1,3 +1,3 @@
 # React Checkbox component
 
-[Checkbox documentation](../../../css/src/checkbox/README.md)
+[Checkbox documentation](../../../css/src/components/checkbox/README.md)
diff --git a/packages/react/src/Dialog/README.md b/packages/react/src/Dialog/README.md
@@ -1,3 +1,3 @@
-# React Modal component
+# React Dialog component
 
-[Modal documentation](../../../css/src/modal/README.md)
+[Dialog documentation](../../../css/src/components/dialog/README.md)
diff --git a/packages/react/src/Footer/README.md b/packages/react/src/Footer/README.md
@@ -1,3 +1,3 @@
 # React Footer component
 
-[Footer documentation](../../../css/src/footer/README.md)
+[Footer documentation](../../../css/src/components/footer/README.md)
diff --git a/packages/react/src/FormLabel/README.md b/packages/react/src/FormLabel/README.md
@@ -1,3 +1,3 @@
 # React Form Label Component
 
-[Form label documentation](../../../css/src/form-label/README.md)
+[Form label documentation](../../../css/src/components/form-label/README.md)
diff --git a/packages/react/src/Header/README.md b/packages/react/src/Header/README.md
@@ -1,3 +1,3 @@
 # React Header component
 
-[Header documentation](../../../css/src/header/README.md)
+[Header documentation](../../../css/src/components/header/README.md)
diff --git a/packages/react/src/Heading/README.md b/packages/react/src/Heading/README.md
@@ -1,3 +1,3 @@
 # React Heading Component
 
-[Heading documentation](../../../css/src/heading/README.md)
+[Heading documentation](../../../css/src/components/heading/README.md)
diff --git a/packages/react/src/Icon/README.md b/packages/react/src/Icon/README.md
@@ -1,3 +1,3 @@
 # React Icon Component
 
-[Icon documentation](../../../css/src/icon/README.md)
+[Icon documentation](../../../css/src/components/icon/README.md)
diff --git a/packages/react/src/IconButton/README.md b/packages/react/src/IconButton/README.md
@@ -1,3 +1,3 @@
 # React Icon Button component
 
-[Icon Button documentation](../../../css/src/icon-button/README.md)
+[Icon Button documentation](../../../css/src/components/icon-button/README.md)
diff --git a/packages/react/src/Image/README.md b/packages/react/src/Image/README.md
@@ -1,3 +1,3 @@
 # React Image component
 
-[Image documentation](../../../css/src/image/README.md)
+[Image documentation](../../../css/src/components/image/README.md)
diff --git a/packages/react/src/Link/README.md b/packages/react/src/Link/README.md
@@ -1,3 +1,3 @@
 # React Link Component
 
-[Link documentation](../../../css/src/link/README.md)
+[Link documentation](../../../css/src/components/link/README.md)
diff --git a/packages/react/src/LinkList/README.md b/packages/react/src/LinkList/README.md
@@ -1,3 +1,3 @@
 # React Link List component
 
-[Link List documentation](../../../css/src/link-list/README.md)
+[Link List documentation](../../../css/src/components/link-list/README.md)
diff --git a/packages/react/src/Logo/README.md b/packages/react/src/Logo/README.md
@@ -1,3 +1,3 @@
 # React Logo component
 
-[Logo documentation](../../../css/src/logo/README.md)
+[Logo documentation](../../../css/src/components/logo/README.md)
diff --git a/packages/react/src/Mark/README.md b/packages/react/src/Mark/README.md
@@ -1,3 +1,3 @@
 # React Mark component
 
-[Mark documentation](../../../css/src/mark/README.md)
+[Mark documentation](../../../css/src/components/mark/README.md)
diff --git a/packages/react/src/MegaMenu/README.md b/packages/react/src/MegaMenu/README.md
@@ -1,3 +1,3 @@
 # React Mega Menu component
 
-[Mega Menu documentation](../../../css/src/mega-menu/README.md)
+[Mega Menu documentation](../../../css/src/components/mega-menu/README.md)
diff --git a/packages/react/src/Overlap/README.md b/packages/react/src/Overlap/README.md
@@ -1,3 +1,3 @@
 # React Overlap component
 
-[Overlap documentation](../../../css/src/overlap/README.md)
+[Overlap documentation](../../../css/src/components/overlap/README.md)
diff --git a/packages/react/src/PageHeading/README.md b/packages/react/src/PageHeading/README.md
@@ -1,3 +1,3 @@
 # React Page Heading component
 
-[Page heading documentation](../../../css/src/page-heading/README.md)
+[Page heading documentation](../../../css/src/components/page-heading/README.md)
diff --git a/packages/react/src/PageMenu/README.md b/packages/react/src/PageMenu/README.md
@@ -1,3 +1,3 @@
 # Page Menu
 
-[Page menu documentation](../../../css/src/page-menu/README.md)
+[Page menu documentation](../../../css/src/components/page-menu/README.md)
diff --git a/packages/react/src/Pagination/README.md b/packages/react/src/Pagination/README.md
@@ -1,3 +1,3 @@
 # React Pagination component
 
-[Pagination documentation](../../../css/src/pagination/README.md)
+[Pagination documentation](../../../css/src/components/pagination/README.md)
diff --git a/packages/react/src/Paragraph/README.md b/packages/react/src/Paragraph/README.md
@@ -1,3 +1,3 @@
 # React Paragraph Component
 
-[Paragraph documentation](../../../css/src/paragraph/README.md)
+[Paragraph documentation](../../../css/src/components/paragraph/README.md)
diff --git a/packages/react/src/Screen/README.md b/packages/react/src/Screen/README.md
@@ -1,3 +1,3 @@
 # React Screen component
 
-[Screen documentation](../../../css/src/screen/README.md)
+[Screen documentation](../../../css/src/components/screen/README.md)
diff --git a/packages/react/src/SearchField/README.md b/packages/react/src/SearchField/README.md
@@ -1,3 +1,3 @@
 # React Search Field component
 
-[Search Field documentation](../../../css/src/search-field/README.md)
+[Search Field documentation](../../../css/src/components/search-field/README.md)
diff --git a/packages/react/src/SkipLink/README.md b/packages/react/src/SkipLink/README.md
@@ -1,3 +1,3 @@
 # React Skip Link component
 
-[Skip Link documentation](../../../css/src/skip-link/README.md)
+[Skip Link documentation](../../../css/src/components/skip-link/README.md)
diff --git a/packages/react/src/Spotlight/README.md b/packages/react/src/Spotlight/README.md
@@ -1,3 +1,3 @@
 # React Spotlight component
 
-[Spotlight documentation](../../../css/src/spotlight/README.md)
+[Spotlight documentation](../../../css/src/components/spotlight/README.md)
diff --git a/packages/react/src/Switch/README.md b/packages/react/src/Switch/README.md
@@ -5,4 +5,4 @@ It can be used as a standalone component or as a form control element.
 When used as a standalone component provide a `aria-labelledby` prop to keep it accessible.
 When used as a form control, make sure to add the associated `<FormLabel>` component.
 
-[Switch documentation](../../../css/src/switch/README.md)
+[Switch documentation](../../../css/src/components/switch/README.md)
diff --git a/packages/react/src/Table/README.md b/packages/react/src/Table/README.md
@@ -1,3 +1,3 @@
 # React Table component
 
-[Table documentation](../../../css/src/table/README.md)
+[Table documentation](../../../css/src/components/table/README.md)
diff --git a/packages/react/src/TextInput/README.md b/packages/react/src/TextInput/README.md
@@ -1,3 +1,3 @@
 # React Text Input component
 
-[Text Input documentation](../../../css/src/text-input/README.md)
+[Text Input documentation](../../../css/src/components/text-input/README.md)
diff --git a/packages/react/src/TopTaskLink/README.md b/packages/react/src/TopTaskLink/README.md
@@ -1,3 +1,3 @@
 # React Top Task Link component
 
-[Top task link documentation](../../../css/src/top-task-link/README.md)
+[Top task link documentation](../../../css/src/components/top-task-link/README.md)
diff --git a/packages/react/src/VisuallyHidden/README.md b/packages/react/src/VisuallyHidden/README.md
@@ -1,3 +1,3 @@
 # React Visually Hidden component
 
-[Visually hidden documentation](../../../css/src/visually-hidden/README.md)
+[Visually hidden documentation](../../../css/src/components/visually-hidden/README.md)
diff --git a/plop-templates/react.docs.md.hbs b/plop-templates/react.docs.md.hbs
@@ -1,3 +1,3 @@
 # React {{titleCase name}} component
 
-[{{titleCase name}} documentation](../../../css/src/{{kebabCase name}}/README.md)
+[{{titleCase name}} documentation](../../../css/src/components/{{kebabCase name}}/README.md)
diff --git a/proprietary/assets/CHANGELOG.md b/proprietary/assets/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.7](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2024-01-31)
+
+**Note:** Version bump only for package @amsterdam/design-system-assets
+
 ## [0.1.6](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-22)
 
 **Note:** Version bump only for package @amsterdam/design-system-assets

diff --git a/proprietary/assets/package.json b/proprietary/assets/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.6",
+  "version": "0.1.7",
   "author": "Community for NL Design System",
   "description": "Assets for the City of Amsterdam",
   "license": "SEE LICENSE IN LICENSE.md",

diff --git a/proprietary/react-icons/CHANGELOG.md b/proprietary/react-icons/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.12](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2024-01-31)
+
+**Note:** Version bump only for package @amsterdam/design-system-react-icons
+
 ## [0.1.11](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-22)
 
 **Note:** Version bump only for package @amsterdam/design-system-react-icons

diff --git a/proprietary/react-icons/package.json b/proprietary/react-icons/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.11",
+  "version": "0.1.12",
   "author": "Community for NL Design System",
   "description": "React icon components for the City of Amsterdam",
   "license": "SEE LICENSE IN LICENSE.md",

diff --git a/proprietary/tokens/CHANGELOG.md b/proprietary/tokens/CHANGELOG.md
@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2024-01-31)
+
+### ⚠ BREAKING CHANGES
+
+* Change blue color names of Spotlight to match Badge API (#1061)
+* Remove unused grey-4 color token (#1059)
+* Add icon button (#1021)
+* Update alert appearance, make ‘warning’ the default and icon non-optional (#993)
+
+### Features
+
+* Add Badge component ([#1045](https://github.com/Amsterdam/design-system/issues/1045)) ([d346cdf](https://github.com/Amsterdam/design-system/commit/d346cdfd2b3c7fab08e6bae10314420f1fde8a5f))
+* Add icon button ([#1021](https://github.com/Amsterdam/design-system/issues/1021)) ([b6e1c26](https://github.com/Amsterdam/design-system/commit/b6e1c260878c09340c9fc89f8740ae033e206855))
+* Add MegaMenu component ([#992](https://github.com/Amsterdam/design-system/issues/992)) ([de9fcc6](https://github.com/Amsterdam/design-system/commit/de9fcc65cced79a07cf201613b8616193f86b810))
+* Add Table ([#1043](https://github.com/Amsterdam/design-system/issues/1043)) ([2175b22](https://github.com/Amsterdam/design-system/commit/2175b22dbab369fb5d7f817a09c7f0560d8d8195))
+* Change blue color names of Spotlight to match Badge API ([#1061](https://github.com/Amsterdam/design-system/issues/1061)) ([0e663bd](https://github.com/Amsterdam/design-system/commit/0e663bd1bcbc8c848d16962749d6113cd3aaaf20))
+* Introduce separate Link List component ([#1051](https://github.com/Amsterdam/design-system/issues/1051)) ([7ccf23d](https://github.com/Amsterdam/design-system/commit/7ccf23d1128a6cade34ec6846d0fee23335af525))
+
+### Bug Fixes
+
+* Remove unused grey-4 color token ([#1059](https://github.com/Amsterdam/design-system/issues/1059)) ([379560e](https://github.com/Amsterdam/design-system/commit/379560eafc48d3301439c4e40268b65beae59a56))
+* Update alert appearance, make ‘warning’ the default and icon non-optional ([#993](https://github.com/Amsterdam/design-system/issues/993)) ([df15253](https://github.com/Amsterdam/design-system/commit/df152538278a73c4aceb094fece70025ff35dc5f))
+
 ## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-22)
 
 ### ⚠ BREAKING CHANGES

diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "Community for NL Design System",
   "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",

diff --git a/storybook/storybook-docs/src/color.stories.mdx b/storybook/storybook-docs/src/color.stories.mdx
@@ -0,0 +1,36 @@
+import tokens from "@amsterdam/design-system-tokens/dist/index.tokens.json";
+import { Meta } from "@storybook/blocks";
+import { ColorPalette } from "./components/ColorPalette";
+
+<Meta title="Docs/Assets/Colour" />
+
+# Colour
+
+The basic colours of Amsterdam are white, red, and black.
+We have 8 additional colours and 3 shades of grey.
+
+<ColorPalette>
+  <ColorPalette.Section>
+    <ColorPalette.Tile color={tokens.amsterdam.color["primary-white"]} name="white" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["primary-red"]} name="red" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["primary-black"]} name="black" />
+  </ColorPalette.Section>
+  <ColorPalette.Section>
+    <ColorPalette.Tile color={tokens.amsterdam.color["green"]} name="green" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["dark-green"]} name="dark green" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["blue"]} name="blue" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["primary-blue"]} name="dark blue" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["dark-blue"]} name="darker blue" />
+  </ColorPalette.Section>
+  <ColorPalette.Section>
+    <ColorPalette.Tile color={tokens.amsterdam.color["yellow"]} name="yellow" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["orange"]} name="orange" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["magenta"]} name="magenta" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["purple"]} name="purple" />
+  </ColorPalette.Section>
+  <ColorPalette.Section>
+    <ColorPalette.Tile color={tokens.amsterdam.color["neutral-grey1"]} name="light grey" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["neutral-grey2"]} name="grey" />
+    <ColorPalette.Tile color={tokens.amsterdam.color["neutral-grey3"]} name="dark grey" />
+  </ColorPalette.Section>
+</ColorPalette>