Implement mark component

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

@@ -1 +1,18 @@
 # Mark
+
+Markeert een fragment tekst met een gele achtergrond.
+Het zorgt voor sterke nadruk op de tekst en leidt de aandacht ernaartoe.
+
+## Richtlijnen
+
+### Zo gebruiken
+
+- Maximaal 1 markering per pagina.
+  De voorkeur is geen markering.
+- Maximaal 1 zin.
+
+### Dit vermijden
+
+- Niet in de titel en subtitels gebruiken.
+  Zorg voor een belangrijke, pakkende titel als de hele paragraaf belangrijk is.
+- Mag niet voor een hele paragraaf gebruikt worden.

packages/css/src/components/mark/mark.scss

@@ -4,5 +4,5 @@
  */
 
 .amsterdam-mark {
-  /* Add styles here */
+  background-color: var(--amsterdam-mark-background-color);
 }

packages/react/src/Mark/Mark.test.tsx

@@ -6,38 +6,27 @@ import '@testing-library/jest-dom'
 describe('Mark', () => {
   it('renders', () => {
     const { container } = render(<Mark />)
-
     const component = container.querySelector(':only-child')
-
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
     const { container } = render(<Mark />)
-
     const component = container.querySelector(':only-child')
-
     expect(component).toHaveClass('amsterdam-mark')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Mark className="extra" />)
-
     const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('extra')
-
-    expect(component).toHaveClass('amsterdam-mark')
+    expect(component).toHaveClass('amsterdam-mark extra')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLElement>()
-
     const { container } = render(<Mark ref={ref} />)
-
     const component = container.querySelector(':only-child')
-
     expect(ref.current).toBe(component)
   })
 })

packages/react/src/Mark/Mark.tsx

@@ -9,9 +9,9 @@ import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'rea
 export interface MarkProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}
 
 export const Mark = forwardRef(({ children, className, ...restProps }: MarkProps, ref: ForwardedRef<HTMLElement>) => (
-  <span {...restProps} ref={ref} className={clsx('amsterdam-mark', className)}>
+  <mark {...restProps} ref={ref} className={clsx('amsterdam-mark', className)}>
     {children}
-  </span>
+  </mark>
 ))
 
 Mark.displayName = 'Mark'

proprietary/tokens/src/components/amsterdam/mark.tokens.json

@@ -1,5 +1,7 @@
 {
   "amsterdam": {
-    "mark": {}
+    "mark": {
+      "background-color": { "value": "var(--amsterdam-color-yellow)" }
+    }
   }
 }

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

@@ -1,11 +1,11 @@
-import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Markdown, Meta, Primary } from "@storybook/blocks";
 import * as MarkStories from "./Mark.stories.tsx";
 import README from "../../../../packages/css/src/components/mark/README.md?raw";
 
 <Meta of={MarkStories} />
 
 <Markdown>{README}</Markdown>
 
-<Primary />
+## Voorbeeld
 
-<Controls />
+<Primary />

storybook/storybook-react/src/Mark/Mark.stories.tsx

@@ -3,11 +3,11 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-import { Mark } from '@amsterdam/design-system-react'
+import { Mark, Paragraph } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'Mark',
+  title: 'Text/Mark',
   component: Mark,
   args: {
     children: 'Nieuw component',
@@ -18,4 +18,15 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+  args: {
+    children: 'Wat vinden Amsterdammers belangrijk?',
+  },
+  render: (args) => (
+    <Paragraph>
+      Daarom organiseren we in 2024 het burgerberaad schone stad, waarin 150 Amsterdammers in gesprek gaan over hoe we
+      de stad beter schoonhouden. <Mark>{args.children}</Mark> Welke oplossingen zien zij? Hier zijn we benieuwd naar.
+      Want elke Amsterdammer heeft afval en moet het kwijt. Wij kunnen als gemeente veel van deze afvalexperts leren.
+    </Paragraph>
+  ),
+}