From bc23b43cff3333d8eda4b2b073b1788436e07a23 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 31 Jan 2024 13:47:52 +0100
Subject: [PATCH] feat: Add initial documentation for colour palette (#1060)

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 .../storybook-docs/src/color.stories.mdx      | 36 +++++++++++++
 .../src/components/ColorPalette.tsx           | 41 +++++++++++++++
 .../src/components/color-palette.css          | 50 +++++++++++++++++++
 3 files changed, 127 insertions(+)
 create mode 100644 storybook/storybook-docs/src/color.stories.mdx
 create mode 100644 storybook/storybook-docs/src/components/ColorPalette.tsx
 create mode 100644 storybook/storybook-docs/src/components/color-palette.css

diff --git a/storybook/storybook-docs/src/color.stories.mdx b/storybook/storybook-docs/src/color.stories.mdx
new file mode 100644
index 0000000000..a072ed1030
--- /dev/null
+++ 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>
diff --git a/storybook/storybook-docs/src/components/ColorPalette.tsx b/storybook/storybook-docs/src/components/ColorPalette.tsx
new file mode 100644
index 0000000000..af7698d652
--- /dev/null
+++ b/storybook/storybook-docs/src/components/ColorPalette.tsx
@@ -0,0 +1,41 @@
+import './color-palette.css'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+
+export type DivProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+type ColorPaletteComponent = {
+  Section: typeof ColorPaletteSection
+  Tile: typeof ColorPaletteTile
+} & ForwardRefExoticComponent<DivProps & RefAttributes<HTMLDivElement>>
+
+export const ColorPalette = forwardRef(({ children, ...restProps }: DivProps, ref: ForwardedRef<HTMLDivElement>) => (
+  <div {...restProps} ref={ref} className="amsterdam-storybook-color-palette">
+    {children}
+  </div>
+)) as ColorPaletteComponent
+
+export const ColorPaletteSection = ({ children }: DivProps) => (
+  <div className="amsterdam-storybook-color-palette__section">{children}</div>
+)
+
+type ColourPaletteTileProps = {
+  color: string
+  name: string
+}
+
+export const ColorPaletteTile = ({ name, color }: ColourPaletteTileProps) => (
+  <div className="amsterdam-storybook-color-palette__tile">
+    <div className="amsterdam-storybook-color-palette__example" style={{ backgroundColor: color }} />
+    <dl className="sb-unstyled amsterdam-storybook-color-palette__description">
+      <dt className="amsterdam-storybook-color-palette__name">{name}</dt>
+      <dd className="amsterdam-storybook-color-palette__color">{color}</dd>
+    </dl>
+  </div>
+)
+
+ColorPalette.Section = ColorPaletteSection
+ColorPalette.Tile = ColorPaletteTile
+ColorPalette.displayName = 'ColourPalette'
+ColorPaletteSection.displayName = 'ColourPalette.Section'
+ColorPaletteTile.displayName = 'ColourPalette.Tile'
diff --git a/storybook/storybook-docs/src/components/color-palette.css b/storybook/storybook-docs/src/components/color-palette.css
new file mode 100644
index 0000000000..d04e81c784
--- /dev/null
+++ b/storybook/storybook-docs/src/components/color-palette.css
@@ -0,0 +1,50 @@
+.amsterdam-storybook-color-palette {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.amsterdam-storybook-color-palette__section {
+  align-items: start;
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.amsterdam-storybook-color-palette__tile {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.amsterdam-storybook-color-palette__example {
+  aspect-ratio: 16 / 9;
+  border: 1px solid rgb(0 0 0 / 12.5%);
+  grid-area: example;
+}
+
+.amsterdam-storybook-color-palette__description,
+.amsterdam-storybook-color-palette__name,
+.amsterdam-storybook-color-palette__color {
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.amsterdam-storybook-color-palette__description {
+  color: #000;
+  column-gap: 1ch;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: "Amsterdam Sans", "Arial", sans-serif;
+  justify-content: space-between;
+}
+
+.amsterdam-storybook-color-palette__name {
+  font-weight: 800;
+}
+
+.amsterdam-storybook-color-palette__color {
+  text-align: end;
+}