From 8d1c266f3f7e90b02bcb240c41256578a80c7668 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 20 Dec 2024 12:33:51 +0100 Subject: [PATCH] feat!: Disallow blue Spotlight and make purple the default (#1798) Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/css/src/components/spotlight/README.md | 2 ++ .../css/src/components/spotlight/spotlight.scss | 12 ++++-------- packages/react/src/Spotlight/Spotlight.tsx | 13 +++++++++---- .../tokens/src/components/ams/spotlight.tokens.json | 7 +------ .../src/components/Breakout/Breakout.stories.tsx | 4 ++-- .../src/components/Spotlight/Spotlight.docs.mdx | 8 -------- .../src/components/Spotlight/Spotlight.stories.tsx | 12 ------------ .../src/pages/amsterdam/ArticlePage/ArticleBody.tsx | 2 +- .../src/pages/amsterdam/HomePage/HomeSpotlight.tsx | 2 +- 9 files changed, 20 insertions(+), 42 deletions(-) diff --git a/packages/css/src/components/spotlight/README.md b/packages/css/src/components/spotlight/README.md index a2eaf53cb0..5998ccff7c 100644 --- a/packages/css/src/components/spotlight/README.md +++ b/packages/css/src/components/spotlight/README.md @@ -7,6 +7,8 @@ Emphasizes a section on a page through a distinctive background colour. ## Guidelines - Display the Spotlight at the entire width of the [Screen](/docs/components-layout-screen--docs); do not position it on the [Grid](/docs/components-layout-grid--docs). +- Add a Grid with medium vertical padding inside the Spotlight to add whitespace around the content, even for a single element. +- The default background is purple, but the colours can be chosen freely – they do not convey a meaning or theme in itself. - Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice. ## Relevant WCAG requirements diff --git a/packages/css/src/components/spotlight/spotlight.scss b/packages/css/src/components/spotlight/spotlight.scss index e3ce9d208b..e253c0103e 100644 --- a/packages/css/src/components/spotlight/spotlight.scss +++ b/packages/css/src/components/spotlight/spotlight.scss @@ -3,12 +3,12 @@ * Copyright Gemeente Amsterdam */ -.ams-spotlight--azure { - background-color: var(--ams-spotlight-azure-background-color); +.ams-spotlight { + background-color: var(--ams-spotlight-background-color); } -.ams-spotlight--blue { - background-color: var(--ams-spotlight-blue-background-color); +.ams-spotlight--azure { + background-color: var(--ams-spotlight-azure-background-color); } .ams-spotlight--green { @@ -27,10 +27,6 @@ background-color: var(--ams-spotlight-orange-background-color); } -.ams-spotlight--purple { - background-color: var(--ams-spotlight-purple-background-color); -} - .ams-spotlight--yellow { background-color: var(--ams-spotlight-yellow-background-color); } diff --git a/packages/react/src/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx index cc3e9799ba..cd2777bf37 100644 --- a/packages/react/src/Spotlight/Spotlight.tsx +++ b/packages/react/src/Spotlight/Spotlight.tsx @@ -6,9 +6,10 @@ import clsx from 'clsx' import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react' -export const spotlightColors = ['azure', 'blue', 'green', 'lime', 'magenta', 'orange', 'purple', 'yellow'] as const +const defaultColor = 'purple' +export const spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'] as const -type SpotlightColor = (typeof spotlightColors)[number] +type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor export type SpotlightProps = { /** The HTML element to use. */ @@ -18,8 +19,12 @@ export type SpotlightProps = { } & PropsWithChildren> export const Spotlight = forwardRef( - ({ children, className, as: Tag = 'div', color = 'blue', ...restProps }: SpotlightProps, ref: any) => ( - + ({ as: Tag = 'div', children, className, color = defaultColor, ...restProps }: SpotlightProps, ref: any) => ( + {children} ), diff --git a/proprietary/tokens/src/components/ams/spotlight.tokens.json b/proprietary/tokens/src/components/ams/spotlight.tokens.json index e6bc2022f4..5a75db0965 100644 --- a/proprietary/tokens/src/components/ams/spotlight.tokens.json +++ b/proprietary/tokens/src/components/ams/spotlight.tokens.json @@ -1,12 +1,10 @@ { "ams": { "spotlight": { + "background-color": { "value": "{ams.brand.color.purple.60}" }, "azure": { "background-color": { "value": "{ams.brand.color.azure.60}" } }, - "blue": { - "background-color": { "value": "{ams.brand.color.blue.60}" } - }, "green": { "background-color": { "value": "{ams.brand.color.green.60}" } }, @@ -19,9 +17,6 @@ "orange": { "background-color": { "value": "{ams.brand.color.orange.60}" } }, - "purple": { - "background-color": { "value": "{ams.brand.color.purple.60}" } - }, "yellow": { "background-color": { "value": "{ams.brand.color.yellow.60}" } } diff --git a/storybook/src/components/Breakout/Breakout.stories.tsx b/storybook/src/components/Breakout/Breakout.stories.tsx index 069f8c90c2..1b747df40a 100644 --- a/storybook/src/components/Breakout/Breakout.stories.tsx +++ b/storybook/src/components/Breakout/Breakout.stories.tsx @@ -27,7 +27,7 @@ export const Default: Story = { args: { children: [ - + , - + , diff --git a/storybook/src/components/Spotlight/Spotlight.docs.mdx b/storybook/src/components/Spotlight/Spotlight.docs.mdx index 39929e1f71..08d4c29f1f 100644 --- a/storybook/src/components/Spotlight/Spotlight.docs.mdx +++ b/storybook/src/components/Spotlight/Spotlight.docs.mdx @@ -18,10 +18,6 @@ import README from "../../../../packages/css/src/components/spotlight/README.md? -### Blue - - - ### Green @@ -38,10 +34,6 @@ import README from "../../../../packages/css/src/components/spotlight/README.md? -### Purple - - - ### Yellow diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx index 37afba8063..178cf96da1 100644 --- a/storybook/src/components/Spotlight/Spotlight.stories.tsx +++ b/storybook/src/components/Spotlight/Spotlight.stories.tsx @@ -36,12 +36,6 @@ export const Azure: Story = { }, } -export const Blue: Story = { - args: { - color: 'blue', - }, -} - export const Green: Story = { args: { color: 'green', @@ -66,12 +60,6 @@ export const Orange: Story = { }, } -export const Purple: Story = { - args: { - color: 'purple', - }, -} - export const Yellow: Story = { args: { color: 'yellow', diff --git a/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx b/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx index ef42cd9ad6..a8d477f18c 100644 --- a/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx +++ b/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx @@ -22,7 +22,7 @@ export const ArticleBody = ({ lead, paragraph1, spotlightHeading, spotlightLinkL {paragraph1} - + diff --git a/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx b/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx index 5e1d7be359..a1afef38c5 100644 --- a/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx +++ b/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx @@ -1,7 +1,7 @@ import { Grid, Heading, Link, Paragraph, Spotlight } from '@amsterdam/design-system-react' export const HomeSpotlight = () => ( - +