feat: Add TextArea Component

packages/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./text-area/text-area";
 @import "./column/column";
 @import "./margin/margin";
 @import "./gap/gap";

packages/css/src/components/text-area/README.md

@@ -0,0 +1,17 @@
+<!-- @license CC0-1.0 -->
+
+# TextArea
+
+A form field that allows the user to input text over multiple lines.
+
+## Guidelines
+
+- Use a TextArea when users need to enter more than 1 sentence of text, such as a comment or description.
+- The height of the TextArea should be appropriate for the information to be entered.
+- A TextArea must have a label, and in most cases, this label should be visible.
+- Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
+  Some browser extensions for spell-checking send this information to external servers.
+
+## Accessibility
+
+- [WCAG 2.1](https://www.w3.org/WAI/WCAG21/Techniques/html/H91.html) requires that the TextArea has a label or title attribute.

packages/css/src/components/text-area/text-area.scss

@@ -0,0 +1,70 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-text-area {
+  border: none;
+  box-shadow: var(--amsterdam-text-area-box-shadow);
+  color: var(--amsterdam-text-area-color);
+  font-family: var(--amsterdam-text-area-font-family);
+  font-size: var(--amsterdam-text-area-font-size);
+  font-weight: var(--amsterdam-text-area-font-weight);
+  line-height: var(--amsterdam-text-area-line-height);
+  max-width: 100%;
+  min-height: var(--amsterdam-text-area-min-height);
+  outline-offset: var(--amsterdam-text-area-outline-offset);
+  padding-block: var(--amsterdam-text-area-padding-block);
+  padding-inline: var(--amsterdam-text-area-padding-inline);
+  touch-action: manipulation;
+  width: 100%;
+
+  @include reset;
+
+  &:hover {
+    box-shadow: var(--amsterdam-text-area-hover-box-shadow);
+  }
+}
+
+.amsterdam-text-area::placeholder {
+  color: var(--amsterdam-text-area-placeholder-color);
+}
+
+.amsterdam-text-area:disabled {
+  background-color: var(--amsterdam-text-area-disabled-background-color);
+  box-shadow: var(--amsterdam-text-area-disabled-box-shadow);
+  color: var(--amsterdam-text-area-disabled-color);
+  cursor: var(--amsterdam-text-area-disabled-cursor);
+}
+
+.amsterdam-text-area:invalid,
+.amsterdam-text-area[aria-invalid="true"] {
+  box-shadow: var(--amsterdam-text-area-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--amsterdam-text-area-invalid-hover-box-shadow);
+  }
+}
+
+.amsterdam-text-area--resize-none {
+  resize: none;
+}
+
+.amsterdam-text-area--resize-horizontal {
+  resize: inline;
+}
+
+.amsterdam-text-area--resize-vertical {
+  resize: block;
+}
+
+.amsterdam-text-area--cols {
+  width: auto;
+}

packages/react/src/TextArea/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React TextArea component
+
+[TextArea documentation](../../../css/src/components/text-area/README.md)

packages/react/src/TextArea/TextArea.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { createRef, useState } from 'react'
+import { TextArea } from './TextArea'
+import '@testing-library/jest-dom'
+
+describe('Text area', () => {
+  it('renders', () => {
+    render(<TextArea />)
+
+    const component = screen.getByRole('textbox')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<TextArea />)
+
+    const component = screen.getByRole('textbox')
+
+    expect(component).toHaveClass('amsterdam-text-area')
+  })
+
+  it('renders an additional class name', () => {
+    render(<TextArea className="extra" />)
+
+    const component = screen.getByRole('textbox')
+
+    expect(component).toHaveClass('amsterdam-text-area extra')
+  })
+
+  it('renders a textarea with resize class when resize prop is provided', () => {
+    render(<TextArea resize="horizontal" />)
+
+    const component = screen.getByRole('textbox')
+
+    expect(component).toHaveClass('amsterdam-text-area amsterdam-text-area--resize-horizontal')
+  })
+
+  it('renders a textarea with cols class when cols prop is provided', () => {
+    render(<TextArea cols={10} />)
+
+    const component = screen.getByRole('textbox')
+
+    expect(component).toHaveClass('amsterdam-text-area amsterdam-text-area--cols')
+  })
+
+  it('can be controlled', async () => {
+    function ControlledComponent() {
+      const [value, setValue] = useState('Hello')
+
+      return <TextArea value={value} onChange={(e) => setValue(e.target.value)} />
+    }
+
+    render(<ControlledComponent />)
+
+    const componentText = screen.getByDisplayValue('Hello')
+    expect(componentText).toBeInTheDocument()
+
+    const component = screen.getByRole('textbox')
+    if (component) {
+      await userEvent.type(component, ', World!')
+    }
+
+    const newComponentText = screen.getByDisplayValue('Hello, World!')
+    expect(newComponentText).toBeInTheDocument()
+  })
+
+  it('should not update the value when disabled', async () => {
+    render(<TextArea disabled defaultValue="Hello" />)
+
+    const component = screen.getByRole('textbox')
+    if (component) {
+      await userEvent.type(component, ', World!')
+    }
+
+    expect(component).toHaveValue('Hello')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLTextAreaElement>()
+
+    const { container } = render(<TextArea ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})

packages/react/src/TextArea/TextArea.tsx

@@ -0,0 +1,29 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, TextareaHTMLAttributes } from 'react'
+
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  resize?: 'default' | 'none' | 'horizontal' | 'vertical'
+}
+
+export const TextArea = forwardRef(
+  ({ className, resize = 'default', ...restProps }: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) => (
+    <textarea
+      {...restProps}
+      ref={ref}
+      className={clsx(
+        'amsterdam-text-area',
+        resize !== 'default' && `amsterdam-text-area--resize-${resize}`,
+        restProps.cols && 'amsterdam-text-area--cols',
+        className,
+      )}
+    />
+  ),
+)
+
+TextArea.displayName = 'TextArea'

packages/react/src/TextArea/index.ts

@@ -0,0 +1,2 @@
+export { TextArea } from './TextArea'
+export type { TextAreaProps } from './TextArea'

packages/react/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './TextArea'
 export * from './Column'
 export * from './Fieldset'
 export * from './LinkList'

proprietary/tokens/src/components/amsterdam/text-area.tokens.json

@@ -0,0 +1,36 @@
+{
+  "amsterdam": {
+    "text-area": {
+      "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-black}" },
+      "color": { "value": "{amsterdam.color.primary-black}" },
+      "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
+      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
+      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
+      "min-height": {
+        "value": "calc({amsterdam.typography.text-level.6.line-height} * 1em + 2 * {amsterdam.text-area.padding-block})"
+      },
+      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
+      "padding-block": { "value": "0.5rem" },
+      "padding-inline": { "value": "1rem" },
+      "disabled": {
+        "background-color": { "value": "{amsterdam.color.primary-white}" },
+        "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.neutral-grey2}" },
+        "color": { "value": "{amsterdam.color.neutral-grey2}" },
+        "cursor": { "value": "{amsterdam.action.disabled.cursor}" }
+      },
+      "hover": {
+        "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-black}" }
+      },
+      "invalid": {
+        "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-red}" },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-red}" }
+        }
+      },
+      "placeholder": {
+        "color": { "value": "{amsterdam.color.neutral-grey3}" }
+      }
+    }
+  }
+}

storybook/src/components/TextArea/TextArea.docs.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as TextAreaStories from "./TextArea.stories.tsx";
+import README from "../../../../packages/css/src/components/text-area/README.md?raw";
+
+<Meta of={TextAreaStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />
+
+## Vertical Resize
+
+<Canvas of={TextAreaStories.VerticalResize} />
+
+## Horizontal Resize
+
+<Canvas of={TextAreaStories.HorizontalResize} />
+
+## No Resize
+
+<Canvas of={TextAreaStories.NoResize} />
+
+## Invalid
+
+<Canvas of={TextAreaStories.Invalid} />
+
+## Disabled
+
+<Canvas of={TextAreaStories.Disabled} />