1 files changed, 37 insertions, 0 deletions
diff --git a/comm/mail/components/storybook/stories/search-bar.stories.mjs b/comm/mail/components/storybook/stories/search-bar.stories.mjs
new file mode 100644
index 0000000000..40bf74f28f
--- /dev/null
+++ b/comm/mail/components/storybook/stories/search-bar.stories.mjs
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { html } from "lit";
+import { action } from "@storybook/addon-actions";
+import "mail/components/unifiedtoolbar/content/search-bar.mjs"; //eslint-disable-line import/no-unassigned-import
+
+export default {
+  title: "Widgets/Search Bar",
+};
+
+export const SearchBar = () => html`
+  <template id="searchBarTemplate">
+    <form>
+      <input type="search" placeholder="" required="required" />
+      <div aria-hidden="true"><slot name="placeholder"></slot></div>
+      <button class="button button-flat icon-button">
+        <slot name="button"></slot>
+      </button>
+    </form>
+  </template>
+  <search-bar
+    @search="${action("search")}"
+    @autocomplete="${action("autocomplete")}"
+  >
+    <span slot="placeholder"
+      >Search Field Placeholder <kbd>Ctrl</kbd> + <kbd>K</kbd>
+    </span>
+    <img
+      alt="Search"
+      slot="button"
+      class="search-button"
+      src="chrome://messenger/skin/icons/new/compact/search.svg"
+    />
+  </search-bar>
+`;