From a4d8de225facefd8a51207d04cefeba60f06f533 Mon Sep 17 00:00:00 2001
From: Jake Albaugh <jalbaugh@figma.com>
Date: Mon, 10 Jun 2024 16:52:41 -0500
Subject: [PATCH] search component and slider styles

---
 figma.config.json                            |  1 +
 src/stories/ui/primitives/Search.stories.tsx | 15 ++++
 src/ui/compositions/Headers/Headers.tsx      |  2 +-
 src/ui/primitives/Search/Search.figma.tsx    | 20 ++++++
 src/ui/primitives/Search/Search.tsx          | 74 ++++++++++++++++++++
 src/ui/primitives/Search/search.css          | 34 +++++++++
 src/ui/primitives/Slider/slider.css          | 18 ++---
 src/ui/primitives/index.ts                   |  1 +
 8 files changed, 155 insertions(+), 10 deletions(-)
 create mode 100644 src/stories/ui/primitives/Search.stories.tsx
 create mode 100644 src/ui/primitives/Search/Search.figma.tsx
 create mode 100644 src/ui/primitives/Search/Search.tsx
 create mode 100644 src/ui/primitives/Search/search.css

diff --git a/figma.config.json b/figma.config.json
index d854bfd..ce53124 100644
--- a/figma.config.json
+++ b/figma.config.json
@@ -60,6 +60,7 @@
       "<FIGMA_URL_RADIO>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1204",
       "<FIGMA_URL_RADIOFIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1412",
       "<FIGMA_URL_RADIOGROUP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1200",
+      "<FIGMA_URL_SEARCH>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2236-14989",
       "<FIGMA_URL_SELECT>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1162",
       "<FIGMA_URL_SELECT_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2136-2336",
       "<FIGMA_URL_SLIDER>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=3734-22471",
diff --git a/src/stories/ui/primitives/Search.stories.tsx b/src/stories/ui/primitives/Search.stories.tsx
new file mode 100644
index 0000000..48b88a4
--- /dev/null
+++ b/src/stories/ui/primitives/Search.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Search } from "ui/primitives";
+
+const meta: Meta<typeof Search> = {
+  component: Search,
+  title: "UI Primitives/Search",
+  parameters: { layout: "centered" },
+};
+export default meta;
+type Story = StoryObj<typeof Search>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => <Search {...args} />,
+};
diff --git a/src/ui/compositions/Headers/Headers.tsx b/src/ui/compositions/Headers/Headers.tsx
index df661fc..fa81bec 100644
--- a/src/ui/compositions/Headers/Headers.tsx
+++ b/src/ui/compositions/Headers/Headers.tsx
@@ -164,7 +164,7 @@ export function HeaderAuth() {
                 </FlexItem>
               </Flex>
             ) : (
-              <ButtonGroup align="justify">{userButtons}</ButtonGroup>
+              <ButtonGroup align="center">{userButtons}</ButtonGroup>
             )}
           </Flex>
         </Dialog>
diff --git a/src/ui/primitives/Search/Search.figma.tsx b/src/ui/primitives/Search/Search.figma.tsx
new file mode 100644
index 0000000..82fcad6
--- /dev/null
+++ b/src/ui/primitives/Search/Search.figma.tsx
@@ -0,0 +1,20 @@
+import figma from "@figma/code-connect";
+import { Search } from "./Search";
+
+figma.connect(Search, "<FIGMA_URL_SEARCH>", {
+  props: {
+    value: figma.enum("Value Type", {
+      Default: figma.string("Value"),
+    }),
+    placeholder: figma.enum("Value Type", {
+      Default: "Placeholder here...",
+      Placeholder: figma.string("Value"),
+    }),
+    isDisabled: figma.enum("State", {
+      Disabled: true,
+    }),
+  },
+  example: ({ value, placeholder, isDisabled }) => (
+    <Search value={value} placeholder={placeholder} disabled={isDisabled} />
+  ),
+});
diff --git a/src/ui/primitives/Search/Search.tsx b/src/ui/primitives/Search/Search.tsx
new file mode 100644
index 0000000..e6bb9cc
--- /dev/null
+++ b/src/ui/primitives/Search/Search.tsx
@@ -0,0 +1,74 @@
+import { clsx } from "clsx";
+import { IconSearch, IconX } from "icons";
+import React, { useRef, useState } from "react";
+import {
+  Popover as RACPopover,
+  type InputProps as RACInputProps,
+} from "react-aria-components";
+import { IconButton } from "../IconButton/IconButton";
+import { Input } from "../Input/Input";
+import { ListBox, ListBoxItem } from "../ListBox/ListBox";
+import "./search.css";
+
+export type SearchProps = RACInputProps & {
+  results?: string[];
+};
+export const Search = React.forwardRef(function Search(
+  { className, results, ...props }: SearchProps,
+  ref: React.ForwardedRef<HTMLInputElement>,
+) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const classNames = clsx(className, "search-input-container");
+
+  return (
+    <div className={classNames}>
+      <Input
+        type="search"
+        className="search-input"
+        value={searchTerm}
+        onInput={(e) => setSearchTerm(e.currentTarget.value)}
+        ref={(node) => {
+          inputRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        }}
+        {...props}
+      />
+      <span className="search-icon">
+        {searchTerm ? (
+          <IconButton
+            aria-label="Clear search"
+            onPress={() => setSearchTerm("")}
+            size="small"
+            variant="subtle"
+          >
+            <IconX />
+          </IconButton>
+        ) : (
+          <IconButton
+            aria-label="Clear search"
+            onPress={() => inputRef?.current?.focus()}
+            size="small"
+            variant="subtle"
+          >
+            <IconSearch />
+          </IconButton>
+        )}
+      </span>
+      {results && (
+        <RACPopover>
+          <ListBox>
+            {results.map((a) => (
+              <ListBoxItem onAction={() => setSearchTerm(a)}>{a}</ListBoxItem>
+            ))}
+          </ListBox>
+        </RACPopover>
+      )}
+    </div>
+  );
+});
diff --git a/src/ui/primitives/Search/search.css b/src/ui/primitives/Search/search.css
new file mode 100644
index 0000000..abce875
--- /dev/null
+++ b/src/ui/primitives/Search/search.css
@@ -0,0 +1,34 @@
+/* clears the ‘X’ from Internet Explorer */
+.search-input::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.search-input::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+/* clears the ‘X’ from Chrome */
+.search-input::-webkit-search-decoration,
+.search-input::-webkit-search-cancel-button,
+.search-input::-webkit-search-results-button,
+.search-input::-webkit-search-results-decoration {
+  display: none;
+}
+
+.search-input-container {
+  position: relative;
+}
+
+.search-input {
+  border-radius: var(--sds-size-radius-full);
+  padding-right: calc(var(--sds-size-padding-xxl) + var(--sds-size-padding-xs));
+}
+
+.search-icon {
+  position: absolute;
+  top: 50%;
+  right: var(--sds-size-padding-xs);
+  transform: translateY(-50%);
+}
diff --git a/src/ui/primitives/Slider/slider.css b/src/ui/primitives/Slider/slider.css
index 737492c..7baf63a 100644
--- a/src/ui/primitives/Slider/slider.css
+++ b/src/ui/primitives/Slider/slider.css
@@ -1,11 +1,11 @@
 .slider-field {
-  --slider-thumb-background-color: var(--sds-color-bg-default-default);
-  --slider-thumb-border-color: var(--sds-color-border-brand-default);
-  --slider-track-background-color: var(--sds-color-bg-brand-default);
+  --slider-thumb-background-color: var(--sds-color-bg-brand-default);
+  --slider-thumb-border-color: var(--sds-color-bg-brand-default);
+  --slider-track-background-color: var(--sds-color-bg-brand-secondary);
   font: var(--sds-font-body-base);
 
   &[data-disabled] {
-    --slider-thumb-background-color: var(--sds-color-icon-disabled-default);
+    --slider-thumb-background-color: var(--sds-color-bg-disabled-default);
     --slider-thumb-border-color: var(--sds-color-border-disabled-default);
     --slider-track-background-color: var(--sds-color-bg-disabled-default);
   }
@@ -14,11 +14,11 @@
   /* &[data-orientation="horizontal"] { */
   width: 100%;
   .slider {
-    height: var(--sds-typography-scale-05);
+    height: var(--sds-size-gap-lg);
     width: 100%;
 
     &:before {
-      height: var(--sds-typography-scale-02);
+      height: var(--sds-size-gap-sm);
       top: 50%;
       width: 100%;
       transform: translateY(-50%);
@@ -44,8 +44,8 @@
   border-radius: var(--border-radius);
   box-shadow: inset 0 0 0 var(--sds-size-border-width)
     var(--slider-thumb-border-color);
-  height: var(--sds-typography-scale-05);
-  width: var(--sds-typography-scale-05);
+  height: var(--sds-size-gap-lg);
+  width: var(--sds-size-gap-lg);
   forced-color-adjust: none;
 
   &[data-focus-visible] {
@@ -69,9 +69,9 @@
   position: relative;
 
   &::before {
+    content: "";
     background: var(--slider-track-background-color);
     border-radius: var(--sds-size-radius-full);
-    content: "";
     display: block;
     position: absolute;
   }
diff --git a/src/ui/primitives/index.ts b/src/ui/primitives/index.ts
index ae097d0..48bbf57 100644
--- a/src/ui/primitives/index.ts
+++ b/src/ui/primitives/index.ts
@@ -17,6 +17,7 @@ export * from "./Notification/Notification";
 export * from "./Pagination/Pagination";
 export * from "./Popover/Popover";
 export * from "./Radio/Radio";
+export * from "./Search/Search";
 export * from "./Select/Select";
 export * from "./Slider/Slider";
 export * from "./Switch/Switch";