Merge branch 'develop' into feat/DES-873-badge-color-names

Amsterdam · Feb 14, 2025 · 4e15973 · 4e15973
2 parents 6575f2c + 387ae45
commit 4e15973
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 34 deletions.
diff --git a/packages/css/src/components/spotlight/README.md b/packages/css/src/components/spotlight/README.md
@@ -8,8 +8,11 @@ Emphasizes a section on a page through a distinctive background colour.
 
 - 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.
+- Use any of the [highlight colours](/docs/brand-design-tokens-colour--docs) for the background.
+  The design system does not prescribe a meaning to any of these colours.
+  The default is purple.
+- Use the default text colour (black) on an azure, lime, orange or yellow background.
+  Use the inverse text colour (white) on a green, magenta or purple background.
 
 ## Relevant WCAG requirements
 

diff --git a/packages/css/src/components/spotlight/spotlight.scss b/packages/css/src/components/spotlight/spotlight.scss
@@ -7,18 +7,18 @@
   background-color: var(--ams-spotlight-background-color);
 }
 
-.ams-spotlight--blue {
-  background-color: var(--ams-spotlight-blue-background-color);
-}
-
-.ams-spotlight--dark-green {
-  background-color: var(--ams-spotlight-dark-green-background-color);
+.ams-spotlight--azure {
+  background-color: var(--ams-spotlight-azure-background-color);
 }
 
 .ams-spotlight--green {
   background-color: var(--ams-spotlight-green-background-color);
 }
 
+.ams-spotlight--lime {
+  background-color: var(--ams-spotlight-lime-background-color);
+}
+
 .ams-spotlight--magenta {
   background-color: var(--ams-spotlight-magenta-background-color);
 }

diff --git a/packages/react/src/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx
@@ -6,10 +6,9 @@
 import clsx from 'clsx'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-const defaultColor = 'purple'
-export const spotlightColors = ['blue', 'dark-green', 'green', 'magenta', 'orange', 'yellow'] as const
+export const spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'] as const
 
-type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor
+type SpotlightColor = (typeof spotlightColors)[number]
 
 export type SpotlightProps = {
   /** The HTML element to use. */
@@ -19,12 +18,8 @@ export type SpotlightProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Spotlight = forwardRef(
-  ({ as: Tag = 'div', children, className, color = defaultColor, ...restProps }: SpotlightProps, ref: any) => (
-    <Tag
-      {...restProps}
-      className={clsx('ams-spotlight', color !== defaultColor && `ams-spotlight--${color}`, className)}
-      ref={ref}
-    >
+  ({ as: Tag = 'div', children, className, color, ...restProps }: SpotlightProps, ref: any) => (
+    <Tag {...restProps} className={clsx('ams-spotlight', color && `ams-spotlight--${color}`, className)} ref={ref}>
       {children}
     </Tag>
   ),

diff --git a/proprietary/tokens/src/components/ams/spotlight.tokens.json b/proprietary/tokens/src/components/ams/spotlight.tokens.json
@@ -2,13 +2,13 @@
   "ams": {
     "spotlight": {
       "background-color": { "value": "{ams.color.highlight.purple}" },
-      "blue": {
+      "azure": {
         "background-color": { "value": "{ams.color.highlight.azure}" }
       },
-      "dark-green": {
+      "green": {
         "background-color": { "value": "{ams.color.highlight.green}" }
       },
-      "green": {
+      "lime": {
         "background-color": { "value": "{ams.color.highlight.lime}" }
       },
       "magenta": {

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={{ narrow: 2, medium: 2, wide: 1 }} rowStart={2}>
-        <Spotlight color="dark-green" />
+        <Spotlight color="green" />
       </Breakout.Cell>,
       <Breakout.Cell
         colSpan={{ narrow: 4, medium: 8, wide: 6 }}

diff --git a/storybook/src/components/Spotlight/Spotlight.docs.mdx b/storybook/src/components/Spotlight/Spotlight.docs.mdx
@@ -14,18 +14,18 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 ## Examples
 
-### Blue
+### Azure
 
-<Canvas of={SpotlightStories.Blue} />
-
-### Dark Green
-
-<Canvas of={SpotlightStories.DarkGreen} />
+<Canvas of={SpotlightStories.Azure} />
 
 ### Green
 
 <Canvas of={SpotlightStories.Green} />
 
+### Lime
+
+<Canvas of={SpotlightStories.Lime} />
+
 ### Magenta
 
 <Canvas of={SpotlightStories.Magenta} />

diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx
@@ -5,6 +5,7 @@
 
 import { Blockquote, Grid } from '@amsterdam/design-system-react'
 import { Spotlight } from '@amsterdam/design-system-react/src'
+import { spotlightColors } from '@amsterdam/design-system-react/src/Spotlight/Spotlight'
 import { Meta, StoryObj } from '@storybook/react'
 import { exampleQuote } from '../shared/exampleContent'
 
@@ -13,11 +14,19 @@ const quote = exampleQuote()
 const meta = {
   title: 'Components/Containers/Spotlight',
   component: Spotlight,
+  argTypes: {
+    color: {
+      control: {
+        labels: { undefined: 'purple (default)' },
+      },
+      options: [undefined, ...spotlightColors],
+    },
+  },
   render: ({ as, color }) => (
     <Spotlight as={as} color={color}>
       <Grid paddingVertical="medium">
         <Grid.Cell span="all">
-          <Blockquote color={!color || !['green', 'yellow'].includes(color) ? 'inverse' : undefined}>
+          <Blockquote color={!color || ['green', 'magenta'].includes(color) ? 'inverse' : undefined}>
             {quote}
           </Blockquote>
         </Grid.Cell>
@@ -32,21 +41,21 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const Blue: Story = {
+export const Azure: Story = {
   args: {
-    color: 'blue',
+    color: 'azure',
   },
 }
 
-export const DarkGreen: Story = {
+export const Green: Story = {
   args: {
-    color: 'dark-green',
+    color: 'green',
   },
 }
 
-export const Green: Story = {
+export const Lime: Story = {
   args: {
-    color: 'green',
+    color: 'lime',
   },
 }