From 5479e50bef00cd24d37f55407082ab3b9351538b Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Sat, 1 Mar 2025 14:08:04 +0100 Subject: [PATCH 1/4] Use component space in gap and margin utilities --- proprietary/tokens/src/components/ams/gap.tokens.json | 10 +++++----- .../tokens/src/components/ams/margin.tokens.json | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/proprietary/tokens/src/components/ams/gap.tokens.json b/proprietary/tokens/src/components/ams/gap.tokens.json index 21cbf8055f..955dc3186c 100644 --- a/proprietary/tokens/src/components/ams/gap.tokens.json +++ b/proprietary/tokens/src/components/ams/gap.tokens.json @@ -1,11 +1,11 @@ { "ams": { "gap": { - "xs": { "value": "{ams.space.grid.xs}" }, - "sm": { "value": "{ams.space.grid.sm}" }, - "md": { "value": "{ams.space.grid.md}" }, - "lg": { "value": "{ams.space.grid.lg}" }, - "xl": { "value": "{ams.space.grid.xl}" } + "xs": { "value": "{ams.space.xs}" }, + "sm": { "value": "{ams.space.sm}" }, + "md": { "value": "{ams.space.md}" }, + "lg": { "value": "{ams.space.lg}" }, + "xl": { "value": "{ams.space.xl}" } } } } diff --git a/proprietary/tokens/src/components/ams/margin.tokens.json b/proprietary/tokens/src/components/ams/margin.tokens.json index 4834a24a8d..705fb57f38 100644 --- a/proprietary/tokens/src/components/ams/margin.tokens.json +++ b/proprietary/tokens/src/components/ams/margin.tokens.json @@ -1,11 +1,11 @@ { "ams": { "margin": { - "xs": { "value": "{ams.space.grid.xs}" }, - "sm": { "value": "{ams.space.grid.sm}" }, - "md": { "value": "{ams.space.grid.md}" }, - "lg": { "value": "{ams.space.grid.lg}" }, - "xl": { "value": "{ams.space.grid.xl}" } + "xs": { "value": "{ams.space.xs}" }, + "sm": { "value": "{ams.space.sm}" }, + "md": { "value": "{ams.space.md}" }, + "lg": { "value": "{ams.space.lg}" }, + "xl": { "value": "{ams.space.xl}" } } } } From 80bc8688ee44965cf9fa0d1c9b8e995b9e5d7aa8 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Sat, 1 Mar 2025 14:08:41 +0100 Subject: [PATCH 2/4] Add debug styles to highlight page sections --- packages/css/src/components/index.scss | 1 + .../components/screen/screen-poc-debug.scss | 49 +++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 packages/css/src/components/screen/screen-poc-debug.scss diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index b2bc2afed6..a0bad72167 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -56,6 +56,7 @@ @use "radio/radio"; @use "row/row"; @use "screen/screen"; +@use "screen/screen-poc-debug"; @use "search-field/search-field"; @use "select/select"; @use "skip-link/skip-link"; diff --git a/packages/css/src/components/screen/screen-poc-debug.scss b/packages/css/src/components/screen/screen-poc-debug.scss new file mode 100644 index 0000000000..424cef1391 --- /dev/null +++ b/packages/css/src/components/screen/screen-poc-debug.scss @@ -0,0 +1,49 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +body { + background-image: repeating-linear-gradient( + 45deg, + rgb(0 0 0 / 6.25%), + rgb(0 0 0 / 6.25%) var(--ams-space-grid-xs), + rgb(0 0 0 / 12.5%) var(--ams-space-grid-xs), + rgb(0 0 0 / 12.5%) var(--ams-space-grid-sm) + ); +} + +.ams-screen { + background: transparent; +} + +.ams-header, +.ams-page-body, +.ams-footer, +.ams-grid, +.ams-grid > *, +.ams-spotlight { + box-shadow: inset 0 0 0 0.5rem rgb(0 0 0 / 25%); +} + +main { + .ams-grid { + background-color: var(--ams-color-highlight-yellow); + + > * { + background-color: rgb(255 255 255 / 50%); + } + } + + .ams-spotlight { + background-color: var(--ams-color-highlight-purple); + + > .ams-grid { + background-color: transparent; + + > * { + background-color: rgb(255 255 255 / 25%); + } + } + } +} From e8e7b21e2151dbbd19a8e577b8166b18a53e161e Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Sat, 1 Mar 2025 14:11:01 +0100 Subject: [PATCH 3/4] Let Screen, Page Body, Breakout and Spotlight manage space --- packages/css/src/components/index.scss | 1 + .../components/screen/screen-poc-space.scss | 39 +++++ .../amsterdam/ArticlePage/ArticlePage.tsx | 2 +- .../src/pages/amsterdam/FormPage/FormPage.tsx | 148 +++++++++--------- .../src/pages/amsterdam/HomePage/HomePage.tsx | 2 +- 5 files changed, 117 insertions(+), 75 deletions(-) create mode 100644 packages/css/src/components/screen/screen-poc-space.scss diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index a0bad72167..bbcafa7119 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -57,6 +57,7 @@ @use "row/row"; @use "screen/screen"; @use "screen/screen-poc-debug"; +@use "screen/screen-poc-space"; @use "search-field/search-field"; @use "select/select"; @use "skip-link/skip-link"; diff --git a/packages/css/src/components/screen/screen-poc-space.scss b/packages/css/src/components/screen/screen-poc-space.scss new file mode 100644 index 0000000000..66d78d8d3e --- /dev/null +++ b/packages/css/src/components/screen/screen-poc-space.scss @@ -0,0 +1,39 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +// Add top and bottom padding to screen +// Remove padding from header +// Add more space below footer +.ams-screen { + padding-block: var(--ams-space-grid-sm); +} + +.ams-header, +[class*="ams-grid--padding-"] { + padding-block: 0 !important; +} + +// Add gap to Screen and Page Body +// To replace all manual block paddings on Grid +.ams-screen, +.ams-page-body { + display: grid; + gap: var(--ams-space-grid-md); +} + +.ams-grid, +.ams-spotlight { + &[class*="ams-mb-"] { + margin-block-end: 0 !important; + } +} + +// Add block padding to Spotlight and Breakout +// To replace manual block paddings on child Grids +.ams-breakout, +.ams-spotlight, +.ams-footer__spotlight { + padding-block: var(--ams-space-grid-md); +} diff --git a/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx b/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx index b30ec3d443..a14a8abd7e 100644 --- a/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx +++ b/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx @@ -21,7 +21,7 @@ export const ArticlePage = ({ }: ArticlePageProps) => ( <> -
+
{ const [textareaLength, setTextareaLength] = useState(0) return ( - - - - Home - - - Contact - -
e.preventDefault()}> - - - - Een duidelijke beschrijving van uw vraag helpt ons bij het behandelen. - -