Rename ‘Highlight’ component to ‘Spotlight’

packages/css/src/components/grid/README.grid.md

@@ -6,7 +6,7 @@ Levert een tweedimensionaal raster waarop alle elementen van een pagina uitgelij
 
 Elke pagina moet het grid gebruiken als basis voor de layout, dus direct binnen [Screen](?path=/docs/layout-screen--docs).
 
-Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
+Een [Footer](?path=/docs/react_containers-footer--docs) en een [Spotlight](?path=/docs/react_containers-spotlight--docs) zijn iets breder dan het grid.
 Daarom wordt in HTML vóór deze componenten een instantie van Grid afgesloten en erbinnen een nieuwe geopend.
 
 Meerdere instanties van dit component zijn dus mogelijk op een pagina.

packages/css/src/components/index.scss

@@ -22,7 +22,7 @@
 @import "./grid/grid";
 @import "./grid/grid-cell";
 @import "./heading/heading";
-@import "./highlight/highlight";
+@import "./spotlight/spotlight";
 @import "./icon/icon";
 @import "./link/link";
 @import "./ordered-list/ordered-list";

packages/css/src/components/screen/README.md

@@ -9,7 +9,7 @@ Daarbinnen combineer je componenten als
 [Grid](?path=/docs/react_layout-grid--docs),
 Header,
 [Footer](?path=/docs/react_containers-footer--docs),
-[Highlight](?path=/docs/react_containers-highlight--docs)
+[Spotlight](?path=/docs/react_containers-spotlight--docs)
 en Figure.
 
 ## Ontwerp

packages/css/src/components/highlight/README.md → packages/css/src/components/spotlight/README.md

@@ -1,4 +1,4 @@
-# Highlight
+# Spotlight
 
 Benadrukt een sectie op een pagina middels een opvallende achtergrondkleur.
 

packages/css/src/components/spotlight/spotlight.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-spotlight--blue {
+  background-color: var(--amsterdam-spotlight-blue-background-color);
+}
+
+.amsterdam-spotlight--dark-green {
+  background-color: var(--amsterdam-spotlight-dark-green-background-color);
+}
+
+.amsterdam-spotlight--green {
+  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);
+}
+
+.amsterdam-spotlight--orange {
+  background-color: var(--amsterdam-spotlight-orange-background-color);
+}
+
+.amsterdam-spotlight--purple {
+  background-color: var(--amsterdam-spotlight-purple-background-color);
+}
+
+.amsterdam-spotlight--yellow {
+  background-color: var(--amsterdam-spotlight-yellow-background-color);
+}

packages/react/src/Footer/Footer.tsx

@@ -12,16 +12,16 @@ import {
   PropsWithChildren,
   RefAttributes,
 } from 'react'
-import { Highlight } from '../Highlight/Highlight'
+import { Spotlight } from '../Spotlight/Spotlight'
 
 export const FooterTop = forwardRef(
   (
     { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <Highlight {...restProps} color="blue" ref={ref} className={clsx('amsterdam-footer__top', className)}>
+    <Spotlight {...restProps} color="blue" ref={ref} className={clsx('amsterdam-footer__top', className)}>
       {children}
-    </Highlight>
+    </Spotlight>
   ),
 )
 

packages/react/src/Spotlight/README.md

@@ -0,0 +1,3 @@
+# React Spotlight component
+
+[Spotlight documentation](../../../css/src/spotlight/README.md)

packages/react/src/Highlight/Highlight.test.tsx → packages/react/src/Spotlight/Spotlight.test.tsx

@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
-import { Highlight } from './Highlight'
+import { Spotlight } from './Spotlight'
 import '@testing-library/jest-dom'
 
-describe('Highlight', () => {
+describe('Spotlight', () => {
   it('renders', () => {
-    const { container } = render(<Highlight />)
+    const { container } = render(<Spotlight />)
 
     const component = container.querySelector(':only-child')
 
@@ -14,38 +14,38 @@ describe('Highlight', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<Highlight />)
+    const { container } = render(<Spotlight />)
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-highlight')
+    expect(component).toHaveClass('amsterdam-spotlight')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<Highlight className="extra" />)
+    const { container } = render(<Spotlight className="extra" />)
 
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-highlight')
+    expect(component).toHaveClass('amsterdam-spotlight')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    const { container } = render(<Highlight ref={ref} />)
+    const { container } = render(<Spotlight ref={ref} />)
 
     const component = container.querySelector(':only-child')
 
     expect(ref.current).toBe(component)
   })
 
   it('gets a color class if you set a color', () => {
-    const { container } = render(<Highlight color="green" />)
+    const { container } = render(<Spotlight color="green" />)
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-highlight--green')
+    expect(component).toHaveClass('amsterdam-spotlight--green')
   })
 })

packages/react/src/Highlight/Highlight.tsx → packages/react/src/Spotlight/Spotlight.tsx

@@ -6,25 +6,25 @@
 import clsx from 'clsx'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface HighlightProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+export interface SpotlightProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
   as?: 'article' | 'aside' | 'div' | 'footer' | 'section'
   color?: 'blue' | 'dark-green' | 'green' | 'light-blue' | 'magenta' | 'orange' | 'purple' | 'yellow'
 }
 
-export const Highlight = forwardRef<HTMLDivElement, HighlightProps>(
-  ({ children, className, as = 'div', color = 'blue', ...restProps }: HighlightProps, ref) => {
+export const Spotlight = forwardRef<HTMLDivElement, SpotlightProps>(
+  ({ children, className, as = 'div', color = 'blue', ...restProps }: SpotlightProps, ref) => {
     const Component = as
 
     return (
       <Component
         {...restProps}
         ref={ref}
-        className={clsx('amsterdam-highlight', `amsterdam-highlight--${color}`, className)}
+        className={clsx('amsterdam-spotlight', `amsterdam-spotlight--${color}`, className)}
       >
         {children}
       </Component>
     )
   },
 )
 
-Highlight.displayName = 'Highlight'
+Spotlight.displayName = 'Spotlight'

packages/react/src/Spotlight/index.ts

@@ -0,0 +1,2 @@
+export { Spotlight } from './Spotlight'
+export type { SpotlightProps } from './Spotlight'

packages/react/src/index.ts

@@ -12,7 +12,7 @@ export * from './Image'
 export * from './Pagination'
 export * from './Screen'
 export * from './Switch'
-export * from './Highlight'
+export * from './Spotlight'
 export * from './Card'
 export * from './Alert'
 export * from './AspectRatio'

proprietary/tokens/src/components/amsterdam/highlight.tokens.json → proprietary/tokens/src/components/amsterdam/spotlight.tokens.json

@@ -1,6 +1,6 @@
 {
   "amsterdam": {
-    "highlight": {
+    "spotlight": {
       "blue": {
         "background-color": { "value": "{amsterdam.color.primary-blue}" }
       },

storybook/storybook-react/src/Grid/Grid.docs.mdx

@@ -29,7 +29,7 @@ Daarom bestaat er een compacte variant van het grid.
 In tegenstelling tot de horizontale marges zijn de verticale instelbaar.
 De opties `paddingVertical`, `paddingTop` en `paddingBottom` voegen witruimte boven en/of onder het grid toe.
 Dit is handig in een vlak met een achtergrondkleur zoals [Footer](?path=/docs/react_containers-footer--docs) of
-[Highlight](?path=/docs/react_containers-highlight--docs) of tussen twee opvolgende grids.
+[Spotlight](?path=/docs/react_containers-spotlight--docs) of tussen twee opvolgende grids.
 
 Elk kan een waarde `medium`, `small` of `large` krijgen.
 De witruimtes zijn even breed als de horizontale witruimte tussen de kolommen,

storybook/storybook-react/src/Spotlight/Spotlight.docs.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as SpotlightStories from "./Spotlight.stories.tsx";
+import README from "../../../../packages/css/src/components/spotlight/README.md?raw";
+
+<Meta of={SpotlightStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />
+
+### Blauw
+
+<Canvas of={SpotlightStories.Blue} />
+
+### Donkergroen
+
+<Canvas of={SpotlightStories.DarkGreen} />
+
+### Geel
+
+<Canvas of={SpotlightStories.Yellow} />
+
+### Groen
+
+<Canvas of={SpotlightStories.Green} />
+
+### Lichtblauw
+
+<Canvas of={SpotlightStories.LightBlue} />
+
+### Magenta
+
+<Canvas of={SpotlightStories.Magenta} />
+
+### Oranje
+
+<Canvas of={SpotlightStories.Orange} />
+
+### Paars
+
+<Canvas of={SpotlightStories.Purple} />

storybook/storybook-react/src/Highlight/Highlight.stories.tsx → storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx

@@ -3,13 +3,13 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-import { Blockquote, Grid, Highlight } from '@amsterdam/design-system-react'
+import { Blockquote, Grid, Spotlight } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 import { exampleQuote } from '../shared/exampleContent'
 
 const meta = {
-  title: 'Containers/Highlight',
-  component: Highlight,
+  title: 'Containers/Spotlight',
+  component: Spotlight,
   argTypes: {
     color: {
       options: ['blue', 'dark-green', 'green', 'light-blue', 'magenta', 'orange', 'purple', 'yellow'],
@@ -34,15 +34,15 @@ const meta = {
     },
   },
   render: ({ color }) => (
-    <Highlight color={color}>
+    <Spotlight color={color}>
       <Grid paddingVertical="medium">
         <Grid.Cell fullWidth>
           <Blockquote inverseColor={!color || !['green', 'yellow'].includes(color)}>{exampleQuote()}</Blockquote>
         </Grid.Cell>
       </Grid>
-    </Highlight>
+    </Spotlight>
   ),
-} satisfies Meta<typeof Highlight>
+} satisfies Meta<typeof Spotlight>
 
 export default meta