Merge branch 'develop' into feature/DES-488-hero-image

# Conflicts:
#	packages/css/src/components/index.scss
#	packages/react/src/index.ts

packages/css/src/components/index.scss

@@ -5,6 +5,7 @@
 
 /* Append here */
 @import "./hero-image/hero-image";
+@import "./mark/mark";
 @import "./text-input/text-input";
 @import "./search-field/search-field";
 @import "./logo/logo";

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

@@ -0,0 +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

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-mark {
+  background-color: var(--amsterdam-mark-background-color);
+}

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

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { Mark } from './Mark'
+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('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

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export interface MarkProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}
+
+export const Mark = forwardRef(({ children, className, ...restProps }: MarkProps, ref: ForwardedRef<HTMLElement>) => (
+  <mark {...restProps} ref={ref} className={clsx('amsterdam-mark', className)}>
+    {children}
+  </mark>
+))
+
+Mark.displayName = 'Mark'

packages/react/src/Mark/README.md

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

packages/react/src/Mark/index.ts

@@ -0,0 +1,2 @@
+export { Mark } from './Mark'
+export type { MarkProps } from './Mark'

packages/react/src/index.ts

@@ -5,6 +5,7 @@
 
 /* Append here */
 export * from './HeroImage'
+export * from './Mark'
 export * from './TextInput'
 export * from './SearchField'
 export * from './Logo'

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

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

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

@@ -0,0 +1,11 @@
+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>
+
+## Voorbeeld
+
+<Primary />

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

@@ -0,0 +1,32 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import { Mark, Paragraph } from '@amsterdam/design-system-react'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Text/Mark',
+  component: Mark,
+  args: {
+    children: 'Nieuw component',
+  },
+} satisfies Meta<typeof Mark>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Wat vinden Amsterdammers belangrijk?',
+  },
+  render: ({ children }) => (
+    <Paragraph>
+      Daarom organiseren we in 2024 het burgerberaad schone stad, waarin 150 Amsterdammers in gesprek gaan over hoe we
+      de stad beter schoonhouden. <Mark>{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>
+  ),
+}