React components/select

packages/components-react/src/index.ts

@@ -11,3 +11,4 @@ export {
   type LuxHeadingProps,
 } from './heading/Heading';
 export { LuxParagraph, type LuxParagraphProps } from './paragraph/Paragraph';
+export { LuxSelect, LuxSelectOption, type LuxSelectProps, type LuxSelectOptionProps } from './select/Select';

packages/components-react/src/select/Select.tsx

@@ -0,0 +1,12 @@
+import {
+  Select as UtrechtSelect,
+  SelectOption as UtrechtSelectOption,
+  type SelectOptionProps as UtrechtSelectOptionProps,
+  type SelectProps as UtrechtSelectProps,
+} from '@utrecht/component-library-react/dist/css-module';
+
+export type LuxSelectProps = UtrechtSelectProps;
+export type LuxSelectOptionProps = UtrechtSelectOptionProps;
+
+export const LuxSelect = UtrechtSelect;
+export const LuxSelectOption = UtrechtSelectOption;

packages/components-react/src/select/test/Select.spec.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { LuxSelect } from '../Select';
+
+describe('Select', () => {
+  it('renders a select', () => {
+    render(<LuxSelect />);
+
+    const select = screen.getByRole('combobox');
+
+    expect(select).toBeInTheDocument();
+    expect(select).toBeVisible();
+  });
+
+  it('can have an additional class name', () => {
+    render(<LuxSelect className="large" />);
+
+    const select = screen.getByRole('combobox');
+
+    expect(select).toHaveClass('large');
+
+    expect(select).toHaveClass('utrecht-select');
+  });
+
+  it('can be hidden', () => {
+    const { container } = render(<LuxSelect hidden />);
+
+    const select = container.querySelector(':only-child');
+
+    expect(select).not.toBeVisible();
+  });
+});

packages/storybook/package.json

@@ -53,6 +53,7 @@
     "@utrecht/alert-css": "1.1.0",
     "@utrecht/button-css": "1.2.0",
     "@utrecht/heading-css": "1.2.0",
+    "@utrecht/select-css": "1.2.0",
     "@utrecht/link-css": "1.1.0",
     "@utrecht/paragraph-css": "1.1.0",
     "@vitejs/plugin-react": "4.3.1",

packages/storybook/src/react-components/select/select.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Controls, Markdown, Meta } from "@storybook/blocks";
+import markdown from "@utrecht/select-css/README.md?raw";
+import * as SelectStories from "./select.stories.tsx";
+import { CitationDocumentation } from "../../utils/CitationDocumentation.tsx";
+
+<Meta of={SelectStories} />
+
+# Select
+
+<CitationDocumentation
+  component="Utrecht Select"
+  url="https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-heading--docs"
+/>
+
+<Markdown>{markdown}</Markdown>
+
+## Playground
+
+<Canvas of={SelectStories.Playground} />
+<Controls of={SelectStories.Playground} />
+
+## Variants
+
+### Disabled
+
+<Canvas of={SelectStories.Disabled} />
+### Required
+<Canvas of={SelectStories.Required} />
+### Invalid
+<Canvas of={SelectStories.Invalid} />
+### Focus
+<Canvas of={SelectStories.Focus} />
+### FocusVisible
+<Canvas of={SelectStories.FocusVisible} />
+### Hover
+<Canvas of={SelectStories.Hover} />

packages/storybook/src/react-components/select/select.stories.tsx

@@ -0,0 +1,102 @@
+import { LuxSelect, LuxSelectOption, type LuxSelectOptionProps } from '@lux-design-system/components-react';
+import tokens from '@lux-design-system/design-tokens/dist/index.json';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  title: 'React Components/Select',
+  id: 'react-components-select',
+  component: LuxSelect,
+  subcomponents: {},
+  parameters: {
+    tokens,
+    tokensPrefix: 'utrecht-select',
+  },
+  argTypes: {
+    disabled: {
+      description: 'disabled indicator',
+      control: 'boolean',
+    },
+    required: {
+      description: 'required indicator',
+      control: 'boolean',
+    },
+    invalid: {
+      description: 'invalid indicator',
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof LuxSelect>;
+
+export default meta;
+
+const selectOptions: LuxSelectOptionProps[] = [
+  { value: '', label: 'Select an option', disabled: true },
+  { value: '1', label: 'Option #1' },
+  { value: '2', label: 'Option #2' },
+  { value: '3', label: 'Option #3' },
+  { value: '4', label: 'Option #4' },
+];
+
+const SelectTemplate: Story = {
+  args: {},
+  render: ({ ...args }) => (
+    <LuxSelect {...args}>
+      {selectOptions &&
+        selectOptions.length > 0 &&
+        selectOptions.map(({ label, value, disabled }, index) => (
+          <LuxSelectOption key={index} value={value} disabled={disabled}>
+            {label}
+          </LuxSelectOption>
+        ))}
+    </LuxSelect>
+  ),
+};
+
+export const Playground: Story = {
+  ...SelectTemplate,
+  name: 'Playground',
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+  tags: ['!autodocs'],
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    required: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+  },
+};
+
+export const Focus: Story = {
+  parameters: {
+    pseudo: { focus: true },
+  },
+};
+
+export const FocusVisible: Story = {
+  parameters: {
+    pseudo: { focusVisible: true, focus: true },
+  },
+};
+
+export const Hover: Story = {
+  parameters: {
+    pseudo: { hover: true },
+  },
+};