feat!: Disallow blue Spotlight and make purple the default (#1798)

Co-authored-by: Aram <[email protected]>
Amsterdam · Dec 20, 2024 · 8d1c266 · 8d1c266
1 parent 310f595
commit 8d1c266
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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<HTMLAttributes<HTMLElement>>
 
 export const Spotlight = forwardRef(
-  ({ children, className, as: Tag = 'div', color = 'blue', ...restProps }: SpotlightProps, ref: any) => (
-    <Tag {...restProps} ref={ref} className={clsx('ams-spotlight', `ams-spotlight--${color}`, className)}>
+  ({ as: Tag = 'div', children, className, color = defaultColor, ...restProps }: SpotlightProps, ref: any) => (
+    <Tag
+      {...restProps}
+      ref={ref}
+      className={clsx('ams-spotlight', color !== defaultColor && `ams-spotlight--${color}`, className)}
+    >
       {children}
     </Tag>
   ),

diff --git 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
@@ -27,7 +27,7 @@ export const Default: Story = {
   args: {
     children: [
       <Breakout.Cell colSpan="all" has="spotlight" key={1} rowSpan={{ medium: 2, narrow: 2, wide: 1 }} rowStart={2}>
-        <Spotlight />
+        <Spotlight color="green" />
       </Breakout.Cell>,
       <Breakout.Cell
         colSpan={{ medium: 8, narrow: 4, wide: 6 }}
@@ -57,7 +57,7 @@ export const VerticalLayout: Story = {
   args: {
     children: [
       <Breakout.Cell colSpan="all" has="spotlight" key={1} rowSpan={2} rowStart={2}>
-        <Spotlight />
+        <Spotlight color="orange" />
       </Breakout.Cell>,
       <Breakout.Cell colSpan="all" has="figure" key={2} rowSpan={2} rowStart={1}>
         <Image alt="" src="https://picsum.photos/1600/900" />

diff --git 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?
 
 <Canvas of={SpotlightStories.Azure} />
 
-### Blue
-
-<Canvas of={SpotlightStories.Blue} />
-
 ### Green
 
 <Canvas of={SpotlightStories.Green} />
@@ -38,10 +34,6 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 <Canvas of={SpotlightStories.Orange} />
 
-### Purple
-
-<Canvas of={SpotlightStories.Purple} />
-
 ### Yellow
 
 <Canvas of={SpotlightStories.Yellow} />

diff --git 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
@@ -22,7 +22,7 @@ export const ArticleBody = ({ lead, paragraph1, spotlightHeading, spotlightLinkL
         <Paragraph>{paragraph1}</Paragraph>
       </Grid.Cell>
     </Grid>
-    <Spotlight as="section" color="purple">
+    <Spotlight as="section">
       <Grid paddingTop="medium" paddingBottom="large">
         <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
           <Column gap="small">

diff --git 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 = () => (
-  <Spotlight color="purple">
+  <Spotlight>
     <Grid paddingVertical="medium">
       <Grid.Cell span={{ narrow: 4, medium: 4, wide: 6 }}>
         <Heading className="ams-mb--xs" inverseColor size="level-2">