Merge branch 'develop' into task/DES-406-implement-release-please

Amsterdam · Jan 31, 2024 · d612924 · d612924
2 parents 03f0415 + 0e663bd
commit d612924
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 53 deletions.
diff --git a/packages/css/src/components/spotlight/spotlight.scss b/packages/css/src/components/spotlight/spotlight.scss
@@ -7,6 +7,10 @@
   background-color: var(--amsterdam-spotlight-blue-background-color);
 }
 
+.amsterdam-spotlight--dark-blue {
+  background-color: var(--amsterdam-spotlight-dark-blue-background-color);
+}
+
 .amsterdam-spotlight--dark-green {
   background-color: var(--amsterdam-spotlight-dark-green-background-color);
 }
@@ -15,10 +19,6 @@
   background-color: var(--amsterdam-spotlight-green-background-color);
 }
 
-.amsterdam-spotlight--light-blue {
-  background-color: var(--amsterdam-spotlight-light-blue-background-color);
-}
-
 .amsterdam-spotlight--magenta {
   background-color: var(--amsterdam-spotlight-magenta-background-color);
 }

diff --git a/packages/react/src/Footer/FooterTop.tsx b/packages/react/src/Footer/FooterTop.tsx
@@ -12,7 +12,7 @@ export type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const FooterTop = forwardRef(
   ({ children, className, ...restProps }: FooterTopProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <Spotlight {...restProps} color="blue" ref={ref} className={clsx('amsterdam-footer__top', className)}>
+    <Spotlight {...restProps} color="dark-blue" ref={ref} className={clsx('amsterdam-footer__top', className)}>
       {children}
     </Spotlight>
   ),

diff --git a/packages/react/src/Spotlight/Spotlight.test.tsx b/packages/react/src/Spotlight/Spotlight.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
-import { Spotlight } from './Spotlight'
+import { Spotlight, spotlightColors } from './Spotlight'
 import '@testing-library/jest-dom'
 
 describe('Spotlight', () => {
@@ -41,13 +41,15 @@ describe('Spotlight', () => {
     expect(ref.current).toBe(component)
   })
 
-  it('gets a color class if you set a color', () => {
-    const { container } = render(<Spotlight color="green" />)
+  spotlightColors.map((color) =>
+    it(`renders with ${color} color`, () => {
+      const { container } = render(<Spotlight color={color} />)
 
-    const component = container.querySelector(':only-child')
+      const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-spotlight--green')
-  })
+      expect(component).toHaveClass(`amsterdam-spotlight--${color}`)
+    }),
+  )
 
   it('renders a custom tag', () => {
     render(<Spotlight as="article" />)

diff --git a/packages/react/src/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx
@@ -6,13 +6,26 @@
 import clsx from 'clsx'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
+export const spotlightColors = [
+  'blue',
+  'dark-blue',
+  'dark-green',
+  'green',
+  'magenta',
+  'orange',
+  'purple',
+  'yellow',
+] as const
+
+type SpotlightColor = (typeof spotlightColors)[number]
+
 export type SpotlightProps = {
   as?: 'article' | 'aside' | 'div' | 'footer' | 'section'
-  color?: 'blue' | 'dark-green' | 'green' | 'light-blue' | 'magenta' | 'orange' | 'purple' | 'yellow'
+  color?: SpotlightColor
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Spotlight = forwardRef<HTMLDivElement, SpotlightProps>(
-  ({ children, className, as: Tag = 'div', color = 'blue', ...restProps }: SpotlightProps, ref) => (
+  ({ children, className, as: Tag = 'div', color = 'dark-blue', ...restProps }: SpotlightProps, ref) => (
     <Tag {...restProps} ref={ref} className={clsx('amsterdam-spotlight', `amsterdam-spotlight--${color}`, className)}>
       {children}
     </Tag>

diff --git a/proprietary/tokens/src/brand/amsterdam/color.tokens.json b/proprietary/tokens/src/brand/amsterdam/color.tokens.json
@@ -15,8 +15,7 @@
       "magenta": { "value": "#E50082" },
       "neutral-grey1": { "value": "#E8E8E8" },
       "neutral-grey2": { "value": "#BEBEBE" },
-      "neutral-grey3": { "value": "#767676" },
-      "neutral-grey4": { "value": "#323232" }
+      "neutral-grey3": { "value": "#767676" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/spotlight.tokens.json b/proprietary/tokens/src/components/amsterdam/spotlight.tokens.json
@@ -2,6 +2,9 @@
   "amsterdam": {
     "spotlight": {
       "blue": {
+        "background-color": { "value": "{amsterdam.color.blue}" }
+      },
+      "dark-blue": {
         "background-color": { "value": "{amsterdam.color.primary-blue}" }
       },
       "dark-green": {
@@ -10,9 +13,6 @@
       "green": {
         "background-color": { "value": "{amsterdam.color.green}" }
       },
-      "light-blue": {
-        "background-color": { "value": "{amsterdam.color.blue}" }
-      },
       "magenta": {
         "background-color": { "value": "{amsterdam.color.magenta}" }
       },

diff --git a/storybook/storybook-react/src/Spotlight/Spotlight.docs.mdx b/storybook/storybook-react/src/Spotlight/Spotlight.docs.mdx
@@ -14,22 +14,18 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 <Canvas of={SpotlightStories.Blue} />
 
-### Dark Green
+### Dark Blue
 
-<Canvas of={SpotlightStories.DarkGreen} />
+<Canvas of={SpotlightStories.DarkBlue} />
 
-### Yellow
+### Dark Green
 
-<Canvas of={SpotlightStories.Yellow} />
+<Canvas of={SpotlightStories.DarkGreen} />
 
 ### Green
 
 <Canvas of={SpotlightStories.Green} />
 
-### Light Blue
-
-<Canvas of={SpotlightStories.LightBlue} />
-
 ### Magenta
 
 <Canvas of={SpotlightStories.Magenta} />
@@ -42,6 +38,10 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 <Canvas of={SpotlightStories.Purple} />
 
+### Yellow
+
+<Canvas of={SpotlightStories.Yellow} />
+
 ### Custom HTML Element
 
 By default, a spotlight is included in your HTML as a `<div>`.

diff --git a/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx b/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx
@@ -22,18 +22,8 @@ const meta = {
     color: {
       control: {
         type: 'select',
-        labels: {
-          blue: 'Blauw',
-          'dark-green': 'Donkergroen',
-          green: 'Groen',
-          'light-blue': 'Lichtblauw',
-          magenta: 'Magenta',
-          orange: 'Oranje',
-          purple: 'Paars',
-          yellow: 'Geel',
-        },
       },
-      options: ['blue', 'dark-green', 'green', 'light-blue', 'magenta', 'orange', 'purple', 'yellow'],
+      options: ['blue', 'dark-blue', 'dark-green', 'green', 'magenta', 'orange', 'purple', 'yellow'],
     },
     children: {
       control: {
@@ -58,51 +48,51 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const Yellow: Story = {
+export const Blue: Story = {
   args: {
-    color: 'yellow',
+    color: 'blue',
   },
 }
 
-export const Orange: Story = {
+export const DarkBlue: Story = {
   args: {
-    color: 'orange',
+    color: 'dark-blue',
   },
 }
 
-export const Magenta: Story = {
+export const DarkGreen: Story = {
   args: {
-    color: 'magenta',
+    color: 'dark-green',
   },
 }
 
-export const Purple: Story = {
+export const Green: Story = {
   args: {
-    color: 'purple',
+    color: 'green',
   },
 }
 
-export const Blue: Story = {
+export const Magenta: Story = {
   args: {
-    color: 'blue',
+    color: 'magenta',
   },
 }
 
-export const LightBlue: Story = {
+export const Orange: Story = {
   args: {
-    color: 'light-blue',
+    color: 'orange',
   },
 }
 
-export const Green: Story = {
+export const Purple: Story = {
   args: {
-    color: 'green',
+    color: 'purple',
   },
 }
 
-export const DarkGreen: Story = {
+export const Yellow: Story = {
   args: {
-    color: 'dark-green',
+    color: 'yellow',
   },
 }