Create Search component

src/components/Search/Search.module.css

@@ -0,0 +1,75 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.search {
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
+  border-radius: 9999px;
+  height: 36px;
+  box-sizing: border-box;
+  color: var(--cpd-color-text-primary);
+  display: flex;
+  flex-direction: row;
+  gap: var(--cpd-space-2x);
+  align-items: center;
+  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
+}
+
+@media (hover) {
+  .search:hover {
+    border-color: var(--cpd-color-border-interactive-hovered);
+  }
+}
+
+.search:focus-within {
+  border-color: currentcolor;
+}
+
+.icon {
+  color: var(--cpd-color-icon-secondary);
+  flex-shrink: 0;
+}
+
+.search:hover .icon {
+  color: var(--cpd-color-icon-primary);
+}
+
+@media (hover) {
+  .search:hover .icon {
+    color: var(--cpd-color-icon-primary);
+  }
+}
+
+.input {
+  border: 0;
+  background: inherit;
+  outline: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.input::placeholder {
+  color: var(--cpd-color-text-placeholder);
+}
+
+.input:focus::placeholder {
+  color: var(--cpd-color-text-secondary);
+}
+
+@media (hover) {
+  .search:hover .input::placeholder {
+    color: var(--cpd-color-text-secondary);
+  }
+}

src/components/Search/Search.stories.tsx

@@ -0,0 +1,37 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Search as SearchComponent } from "./Search";
+import { Form } from "@radix-ui/react-form";
+
+export default {
+  title: "Search",
+  component: SearchComponent,
+  argTypes: {},
+  args: {},
+} as Meta<typeof SearchComponent>;
+
+const Template: StoryFn<typeof SearchComponent> = (args) => (
+  <Form>
+    <SearchComponent {...args} />
+  </Form>
+);
+
+export const Search = Template.bind({});
+Search.args = {};

src/components/Search/Search.test.tsx

@@ -0,0 +1,33 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+
+import { Search } from "./Search";
+import { Form } from "@radix-ui/react-form";
+
+describe("Search", () => {
+  it("renders", () => {
+    const { asFragment } = render(
+      <Form>
+        <Search name="search" />
+      </Form>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/Search/Search.tsx

@@ -0,0 +1,71 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classnames from "classnames";
+import React, { useId } from "react";
+import styles from "./Search.module.css";
+import { Field, Label } from "../Form";
+
+import SearchIcon from "@vector-im/compound-design-tokens/icons/search.svg";
+
+type SearchProps = {
+  /**
+   * The CSS class name
+   */
+  className?: string;
+  /**
+   * The input placeholder.
+   * @default "Search…"
+   */
+  placeholder?: string;
+  /**
+   * The field name.
+   */
+  name: React.ComponentProps<typeof Field>["name"];
+  /**
+   * Event handler called when the search changes.
+   */
+  onChange?: (e: React.ChangeEvent) => void;
+};
+
+/**
+ * A standalone search component
+ */
+export const Search = ({
+  className,
+  onChange,
+  // TODO: i18n needs to be setup
+  placeholder = "Search…",
+  name,
+}: SearchProps) => {
+  const classes = classnames(styles.search, className);
+  const id = useId();
+  return (
+    <Field name={name} asChild>
+      <Label className={classes} htmlFor={id}>
+        <SearchIcon className={styles.icon} width={20} height={20} />
+        <input
+          id={id}
+          name={name}
+          type="search"
+          placeholder={placeholder}
+          onChange={onChange}
+          className={styles.input}
+        />
+      </Label>
+    </Field>
+  );
+};

src/components/Search/__snapshots__/Search.test.tsx.snap

@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Search > renders 1`] = `
+<DocumentFragment>
+  <form>
+    <label
+      class="_label_dc87d2 _field_dc87d2 _search_a9d8a5"
+      for=":r0:"
+    >
+      <svg
+        class="_icon_a9d8a5"
+        fill="none"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.0491 16.4633C13.7873 17.4274 12.2105 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5C18 12.2105 17.4274 13.7873 16.4633 15.0491L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0977 18.6834 20.0977 18.2929 19.7071L15.0491 16.4633ZM16 10.5C16 7.46243 13.5376 5 10.5 5C7.46243 5 5 7.46243 5 10.5C5 13.5376 7.46243 16 10.5 16C13.5376 16 16 13.5376 16 10.5Z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        class="_input_a9d8a5"
+        id=":r0:"
+        name="search"
+        placeholder="Search…"
+        type="search"
+      />
+    </label>
+  </form>
+</DocumentFragment>
+`;