feat: add multi select component

src/lib/components/FadeInDown/FadeInDown.scss

@@ -0,0 +1,19 @@
+  @import "vanilla-framework";
+
+.fade-in--down {
+  @include vf-transition(#{transform, opacity, visibility}, fast);
+
+  &[aria-hidden='true'] {
+    height: 0;
+    opacity: 0;
+    transform: translate3d(0, -0.5rem, 0);
+    visibility: hidden;
+  }
+
+  &[aria-hidden='false'] {
+    height: auto;
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+  }
+}

src/lib/components/FadeInDown/FadeInDown.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta } from "@storybook/react";
+
+import { FadeInDown } from "@/lib/components/FadeInDown";
+
+const meta: Meta<typeof FadeInDown> = {
+  title: "components/FadeInDown",
+  component: FadeInDown,
+  tags: ["autodocs"],
+  parameters: {
+    status: {
+      type: "candidate",
+    },
+  },
+};
+
+export default meta;
+
+export const Example = {
+  args: {},
+};

src/lib/components/FadeInDown/FadeInDown.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+
+import { FadeInDown } from "./FadeInDown";
+
+it("renders with correct attributes", () => {
+  render(
+    <FadeInDown className="test-class" isVisible>
+      <div>Content</div>
+    </FadeInDown>,
+  );
+
+  const element = screen.getByText("Content").parentElement;
+  expect(element).toHaveAttribute("aria-hidden", "false");
+  expect(element).toHaveClass("fade-in--down test-class");
+});
+
+it("hides and reveals children", () => {
+  const { rerender } = render(
+    <FadeInDown isVisible>
+      <div>Content</div>
+    </FadeInDown>,
+  );
+  expect(screen.queryByText("Content")).toBeInTheDocument();
+
+  rerender(
+    <FadeInDown className="test-class" isVisible={false}>
+      <div>Test child</div>
+    </FadeInDown>,
+  );
+
+  expect(screen.queryByText("Content")).not.toBeInTheDocument();
+});

src/lib/components/FadeInDown/FadeInDown.tsx

@@ -0,0 +1,28 @@
+import { FC, PropsWithChildren } from "react";
+
+import classNames from "classnames";
+import "./FadeInDown.scss";
+
+export interface FadeInDownProps extends PropsWithChildren {
+  isVisible: boolean;
+  className?: string;
+}
+
+/**
+ * EXPERIMENTAL: This component is experimental and should be used internally only.
+ */
+export const FadeInDown: FC<FadeInDownProps> = ({
+  children,
+  className,
+  isVisible,
+}) => {
+  return (
+    <div
+      className={classNames("fade-in--down", className)}
+      aria-hidden={isVisible ? "false" : "true"}
+      style={{ visibility: isVisible ? "visible" : "hidden" }}
+    >
+      {children}
+    </div>
+  );
+};

src/lib/components/FadeInDown/index.ts

@@ -0,0 +1 @@
+export * from "./FadeInDown";

src/lib/components/MultiSelect/MultiSelect.scss

@@ -0,0 +1,113 @@
+@import "vanilla-framework";
+@include vf-base;
+@include vf-p-lists;
+
+  $dropdown-max-height: 20rem;
+
+.multi-select {
+  position: relative;
+}
+
+.multi-select .p-form-validation__message {
+  margin-top: 0;
+}
+
+.multi-select__input {
+  position: relative;
+  cursor: pointer;
+  z-index: 11;
+
+  &.items-selected {
+    border-top: 0;
+    box-shadow: none;
+    top: -#{$border-radius};
+  }
+
+  &[disabled],
+  &[disabled="disabled"] {
+    opacity: 1;
+  }
+}
+
+.multi-select__dropdown {
+  @extend %vf-bg--x-light;
+  @extend %vf-has-box-shadow;
+
+  padding-top: $spv--x-small;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: calc(100% - #{$input-margin-bottom});
+  z-index: 10;
+}
+
+.multi-select__dropdown-list {
+  @extend %vf-list;
+
+  margin-bottom: 0;
+  max-height: $dropdown-max-height;
+  overflow: auto;
+}
+
+.multi-select__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  border-top: 1px solid $color-mid-light;
+  padding: $sph--small $sph--small 0 $sph--small;
+}
+
+.multi-select__dropdown-header {
+  text-transform: uppercase;
+  margin-bottom: 0;
+  padding: $spv--x-small $sph--small;
+  position: relative;
+}
+
+.multi-select__dropdown-item {
+  padding: 0 $sph--small;
+
+  &, .p-checkbox {
+    width: 100%;
+  }
+}
+
+.multi-select__dropdown-item-description {
+  @extend %small-text;
+
+  color: $color-mid-dark;
+}
+
+.multi-select__dropdown-button {
+  border: 0;
+  margin-bottom: 0;
+  padding-left: $sph--small;
+  padding-right: $sph--small;
+  text-align: left;
+  width: 100%;
+}
+
+.multi-select__selected-list {
+  background-color: $colors--light-theme--background-inputs;
+  border-bottom: 0;
+  margin: 0;
+  padding: $spv--x-small $sph--small;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.is-error .multi-select__selected-list {
+  border-color: $color-negative;
+}
+
+.multi-select__selected-item {
+  @include vf-inline-list-item;
+
+  margin-right: 0;
+
+  &:not(:last-child)::after {
+    content: ",\00a0";
+  }
+}
+

src/lib/components/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+
+import { Meta } from "@storybook/react";
+
+import {
+  MultiSelect,
+  MultiSelectItem,
+  MultiSelectProps,
+} from "@/lib/components/MultiSelect/MultiSelect";
+
+const Template = (props: MultiSelectProps) => {
+  const [selectedItems, setSelectedItems] = useState<MultiSelectItem[]>(
+    props.selectedItems || [],
+  );
+  return (
+    <MultiSelect
+      {...props}
+      selectedItems={selectedItems}
+      onItemsUpdate={setSelectedItems}
+    />
+  );
+};
+
+const meta: Meta<typeof MultiSelect> = {
+  title: "components/MultiSelect",
+  component: MultiSelect,
+  render: Template,
+  tags: ["autodocs"],
+  parameters: {},
+};
+
+export default meta;
+
+export const Example = {
+  args: {
+    items: Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`),
+    selectedItems: ["Item 1", "Item 2"],
+    disabledItems: ["Item 1", "Item 3"],
+  },
+};

src/lib/components/MultiSelect/MultiSelect.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { vi } from "vitest";
+
+import { MultiSelect } from "./MultiSelect";
+
+const items = ["item one", "item two"];
+
+it("shows options when opened", async () => {
+  render(<MultiSelect items={items} />);
+
+  items.forEach((item) => {
+    expect(
+      screen.queryByRole("checkbox", { name: item }),
+    ).not.toBeInTheDocument();
+  });
+
+  await userEvent.click(screen.getByRole("combobox"));
+
+  items.forEach((item) => {
+    expect(screen.queryByRole("checkbox", { name: item })).toBeInTheDocument();
+  });
+});
+
+it("opens the dropdown when the combobox is clicked", async () => {
+  render(<MultiSelect items={items} />);
+  expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  await userEvent.click(screen.getByRole("combobox"));
+  expect(screen.getByRole("listbox")).toBeInTheDocument();
+});
+
+it("can have some options preselected", async () => {
+  render(<MultiSelect items={items} selectedItems={[items[0]]} />);
+  expect(screen.getByRole("listitem", { name: items[0] })).toBeInTheDocument();
+  expect(
+    screen.queryByRole("checkbox", { name: items[0] }),
+  ).not.toBeInTheDocument();
+  await userEvent.click(screen.getByRole("combobox"));
+  expect(screen.getByRole("checkbox", { name: items[0] })).toBeInTheDocument();
+});
+
+it("can select options from the dropdown", async () => {
+  const onItemsUpdate = vi.fn();
+  render(<MultiSelect items={items} onItemsUpdate={onItemsUpdate} />);
+  await userEvent.click(screen.getByRole("combobox"));
+  await userEvent.click(screen.getByLabelText(items[0]));
+  await waitFor(() => expect(onItemsUpdate).toHaveBeenCalledWith([items[0]]));
+});
+
+it("can hide the options that have been selected", async () => {
+  render(<MultiSelect items={items} />);
+  await userEvent.click(screen.getByRole("combobox"));
+  await userEvent.click(screen.getByLabelText(items[0]));
+  expect(screen.queryByTestId("selected-option")).not.toBeInTheDocument();
+});
+
+it("can remove options that have been selected", async () => {
+  const onItemsUpdate = vi.fn();
+  render(
+    <MultiSelect
+      items={items}
+      selectedItems={items}
+      onItemsUpdate={onItemsUpdate}
+    />,
+  );
+  expect(screen.getAllByRole("listitem", { name: /item/ })).toHaveLength(2);
+  await userEvent.click(screen.getByRole("combobox"));
+  await userEvent.click(
+    within(screen.getByRole("listbox")).getByLabelText(items[0]),
+  );
+  expect(onItemsUpdate).toHaveBeenCalledWith([items[1]]);
+});
+
+it("can filter option list", async () => {
+  render(<MultiSelect items={[...items, "other"]} />);
+  await userEvent.click(screen.getByRole("combobox"));
+  expect(screen.getAllByRole("listitem")).toHaveLength(3);
+  await userEvent.type(screen.getByRole("combobox"), "item");
+  await waitFor(() => expect(screen.getAllByRole("listitem")).toHaveLength(2));
+});
+
+it("can display a dropdown header", async () => {
+  render(
+    <MultiSelect
+      header={<span data-testid="dropdown-header">Header</span>}
+      items={items}
+    />,
+  );
+  await userEvent.click(screen.getByRole("combobox"));
+  expect(screen.getByRole("heading", { name: "Header" })).toBeInTheDocument();
+});