feat: add search bar component

src/scss/components/_index.scss

@@ -2,4 +2,5 @@
 @forward "callout/callout";
 @forward "card/card";
 @forward "icon/icon";
+@forward "search-bar/search-bar";
 @forward "table/table";

src/scss/components/search-bar/_search-bar.scss

@@ -0,0 +1,23 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/spacing" as *;
+
+.iati-search-bar {
+  display: flex;
+  flex-flow: row nowrap;
+
+  & input[type="text"] {
+    flex-grow: 1;
+    padding: $padding-block;
+    border: 1px solid $color-grey-20;
+    border-right: none;
+
+    &::placeholder {
+      color: $color-grey-40;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $color-grey-30;
+    }
+  }
+}

src/scss/components/search-bar/search-bar.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { html } from "lit";
+
+const meta: Meta = {
+  title: "Components/Search Bar",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Search: Story = {
+  render: () => html`
+    <div class="iati-search-bar">
+      <input type="text" placeholder="Search" />
+      <button type="submit" class="iati-button">Go</button>
+    </div>
+  `,
+};