feat: Add date input (#1152)

packages/css/src/components/date-input/README.md

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+# Date Input
+
+Helps users enter a date.
+
+## Visual considerations
+
+This component uses a native date input, which is styled differently in different browsers and operating systems.
+Recreating the native functionality is quite difficult and prone to accessibility errors, which is why we’ve chosen not to do that.
+This does mean that this component does not look identical on all browsers and operating systems.

packages/css/src/components/date-input/date-input.scss

@@ -0,0 +1,78 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset {
+  // Reset native appearance, this causes issues on iOS and Android devices
+  -webkit-appearance: none;
+  appearance: none;
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  box-sizing: border-box;
+  margin-block: 0;
+}
+
+.ams-date-input {
+  background-color: var(--ams-date-input-background-color);
+  box-shadow: var(--ams-date-input-box-shadow);
+  color: var(--ams-date-input-color);
+  font-family: var(--ams-date-input-font-family);
+  font-size: var(--ams-date-input-font-size);
+  font-weight: var(--ams-date-input-font-weight);
+  line-height: var(--ams-date-input-line-height);
+
+  // Set min height for iOS, otherwise an empty box is a lot smaller than a filled one.
+  min-height: calc(
+    (var(--ams-date-input-font-size) * var(--ams-date-input-line-height)) + 2 * var(--ams-date-input-padding-block)
+  );
+
+  // Set min width for iOS, so the width is closer to the filled in width.
+  min-width: calc(8ch + (2 * var(--ams-date-input-padding-inline)));
+  outline-offset: var(--ams-date-input-outline-offset);
+  padding-block: var(--ams-date-input-padding-block);
+  padding-inline: var(--ams-date-input-padding-inline);
+  touch-action: manipulation;
+
+  @include text-rendering;
+  @include reset;
+
+  &:hover {
+    box-shadow: var(--ams-date-input-hover-box-shadow);
+  }
+}
+
+// This changes the default calendar icon on Chromium browsers only
+.ams-date-input::-webkit-calendar-picker-indicator {
+  appearance: none;
+  background-image: var(--ams-date-input-calender-picker-indicator-background-image);
+  cursor: pointer;
+}
+
+.ams-date-input:hover::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-date-input-hover-calender-picker-indicator-background-image);
+}
+
+.ams-date-input:disabled {
+  background-color: var(--ams-date-input-disabled-background-color);
+  box-shadow: var(--ams-date-input-disabled-box-shadow);
+  color: var(--ams-date-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ams-date-input:disabled::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-date-input-disabled-calender-picker-indicator-background-image);
+  visibility: visible;
+}
+
+.ams-date-input:invalid,
+.ams-date-input[aria-invalid="true"] {
+  box-shadow: var(--ams-date-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
+  }
+}

packages/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./date-input/date-input";
 @import "./document/document";
 @import "./avatar/avatar";
 @import "./form-field-character-counter/form-field-character-counter";

packages/react/src/DateInput/DateInput.test.tsx

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

packages/react/src/DateInput/DateInput.tsx

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, InputHTMLAttributes } from 'react'
+
+export type DateInputProps = InputHTMLAttributes<HTMLInputElement>
+
+export const DateInput = forwardRef(
+  ({ className, ...restProps }: DateInputProps, ref: ForwardedRef<HTMLInputElement>) => (
+    <input {...restProps} ref={ref} className={clsx('ams-date-input', className)} type="date" />
+  ),
+)
+
+DateInput.displayName = 'DateInput'

packages/react/src/DateInput/README.md

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

packages/react/src/DateInput/index.ts

@@ -0,0 +1,2 @@
+export { DateInput } from './DateInput'
+export type { DateInputProps } from './DateInput'

packages/react/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './DateInput'
 export * from './Avatar'
 export * from './FormFieldCharacterCounter'
 export * from './DescriptionList'

proprietary/tokens/src/components/ams/date-input.tokens.json

@@ -0,0 +1,45 @@
+{
+  "ams": {
+    "date-input": {
+      "background-color": { "value": "{ams.color.primary-white}" },
+      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "padding-block": { "value": "{ams.space.inside.xs}" },
+      "padding-inline": { "value": "{ams.space.inside.lg}" },
+      "calender-picker-indicator": {
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
+        }
+      },
+      "disabled": {
+        "background-color": { "value": "{ams.color.primary-white}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
+        "color": { "value": "{ams.color.neutral-grey2}" },
+        "calender-picker-indicator": {
+          "background-image": {
+            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
+          }
+        }
+      },
+      "hover": {
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" },
+        "calender-picker-indicator": {
+          "background-image": {
+            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
+          }
+        }
+      },
+      "invalid": {
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" }
+        }
+      }
+    }
+  }
+}

storybook/src/components/DateInput/DateInput.docs.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as DateInputStories from "./DateInput.stories.tsx";
+import README from "../../../../packages/css/src/components/date-input/README.md?raw";
+
+<Meta of={DateInputStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />
+
+## Invalid
+
+<Canvas of={DateInputStories.Invalid} />
+
+## Disabled
+
+<Canvas of={DateInputStories.Disabled} />

storybook/src/components/DateInput/DateInput.stories.tsx

@@ -0,0 +1,35 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { DateInput, DateInputProps } from '@amsterdam/design-system-react'
+import { Meta, StoryObj } from '@storybook/react'
+
+type StoryProps = DateInputProps & { invalid?: boolean }
+
+const meta = {
+  title: 'Components/Forms/Date Input',
+  component: DateInput,
+  args: {
+    disabled: false,
+  },
+} satisfies Meta<StoryProps>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Invalid: Story = {
+  args: {
+    required: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+}