feat: Add Tip Component

packages/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./tip/tip";
 @import "./badge/badge";
 @import "./table/table";
 @import "./mega-menu/mega-menu";

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

@@ -0,0 +1,7 @@
+# Tip
+
+Een tip is een groen vlakje met tekst dat voor een stuk tekst geplaatst wordt om aandacht te trekken en de gebruiker actief op weg helpt een actie uit te voeren.
+
+## Specificaties
+
+Het groene vlak lijnt links uit met lopende tekst. De tiptekst springt in. Een tip kan binnen een lijst op het eerste en tweede niveau gebruikt worden

packages/css/src/components/tip/tip.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-tip {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  gap: var(--amsterdam-tip-gap);
+  padding-block: var(--amsterdam-tip-padding-block);
+}

packages/react/src/Tip/README.md

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

packages/react/src/Tip/Tip.test.tsx

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

packages/react/src/Tip/Tip.tsx

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

packages/react/src/Tip/index.ts

@@ -0,0 +1,2 @@
+export { Tip } from './Tip'
+export type { TipProps } from './Tip'

packages/react/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './Tip'
 export * from './Badge'
 export * from './Table'
 export * from './MegaMenu'

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

@@ -0,0 +1,8 @@
+{
+  "amsterdam": {
+    "tip": {
+      "gap": { "value": "1rem" },
+      "padding-block": { "value": "1.5rem" }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as TipStories from "./Tip.stories.tsx";
+import README from "../../../../packages/css/src/components/tip/README.md?raw";
+
+<Meta of={TipStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />
+
+## In a list
+
+<Canvas of={TipStories.InAList} />

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

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import { Badge, Paragraph, Tip, UnorderedList } from '@amsterdam/design-system-react'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Feedback/Tip',
+  component: Tip,
+  args: {
+    children: [
+      <Badge label="Tip" key="badge" color="dark-green">
+        Tip
+      </Badge>,
+      <Paragraph key="paragraph">
+        Geeft u uw verhuizing van tevoren door, dan wordt uw melding bewaard tot de verhuisdatum. Dan pas begint de
+        termijn van 24 uur of 5 werkdagen.
+      </Paragraph>,
+    ],
+  },
+} satisfies Meta<typeof Tip>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const InAList: Story = {
+  decorators: (story) => (
+    <UnorderedList>
+      <UnorderedList.Item>Binnen Amsterdam op werkdagen binnen 24 uur.</UnorderedList.Item>
+      <UnorderedList.Item>
+        Vanuit een andere gemeente ongeveer 5 werkdagen.
+        {story()}
+      </UnorderedList.Item>
+    </UnorderedList>
+  ),
+}