From 739ee93481a04c875ae17e5e96b3f68a56b0111f Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Thu, 19 Dec 2024 12:42:22 +0100 Subject: [PATCH] Disallow blue Spotlight and make purple the default --- packages/css/src/components/spotlight/README.md | 4 ++++ .../css/src/components/spotlight/spotlight.scss | 12 ++++-------- packages/react/src/Spotlight/Spotlight.tsx | 13 +++++++++---- .../tokens/src/components/ams/spotlight.tokens.json | 7 +------ .../src/components/Spotlight/Spotlight.docs.mdx | 8 -------- .../src/components/Spotlight/Spotlight.stories.tsx | 12 ------------ 6 files changed, 18 insertions(+), 38 deletions(-) diff --git a/packages/css/src/components/spotlight/README.md b/packages/css/src/components/spotlight/README.md index a2eaf53cb0..6613f03c2d 100644 --- a/packages/css/src/components/spotlight/README.md +++ b/packages/css/src/components/spotlight/README.md @@ -7,6 +7,10 @@ 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). +- Do not use other background colours than the options below. + The blue appearance of Footer must remain unique – this is why that colour is not an option for Spotlight. + Red, black and grey aren’t options either. +- 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..4828818c07 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/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',