Add Collapsible Search Input (#1464)

* created collapsed input

* resolve icon conflict

ui/components/Icon.tsx

@@ -13,6 +13,7 @@ import NavigateBeforeIcon from "@material-ui/icons/NavigateBefore";
 import NavigateNextIcon from "@material-ui/icons/NavigateNext";
 import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
 import SaveAltIcon from "@material-ui/icons/SaveAlt";
+import SearchIcon from "@material-ui/icons/Search";
 import SkipNextIcon from "@material-ui/icons/SkipNext";
 import SkipPreviousIcon from "@material-ui/icons/SkipPrevious";
 import * as React from "react";
@@ -42,6 +43,7 @@ export enum IconType {
   FilterIcon,
   ClearIcon,
   Circle,
+  SearchIcon,
 }
 
 type Props = {
@@ -115,6 +117,8 @@ function getIcon(i: IconType) {
           <circle cx="50" cy="50" r="45" />
         </svg>
       );
+    case IconType.SearchIcon:
+      return SearchIcon;
 
     default:
       break;

ui/components/SearchInput.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import styled from "styled-components";
+import Button from "./Button";
+import Flex from "./Flex";
+import Icon, { IconType } from "./Icon";
+import Input from "./Input";
+import Spacer from "./Spacer";
+
+export interface Props {
+  className?: string;
+  /** function to store input in parent component state */
+  setSearch: (value: string) => void;
+  /** customizable text for input placeholder */
+  placeholder?: string;
+}
+
+const CollapsibleInput = styled(Input)`
+  max-width: 0px;
+  overflow: hidden;
+  transition: max-width 0.5s ease;
+  &.show {
+    max-width: 250px;
+  }
+`;
+
+function SearchInput({ className, setSearch, placeholder = "SEARCH" }: Props) {
+  const [show, setShow] = React.useState(false);
+  return (
+    <Flex className={className} align start>
+      <CollapsibleInput
+        className={show && "show"}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setSearch(e.target.value)
+        }
+        placeholder={placeholder}
+      />
+      <Spacer padding="xxs" />
+      <Button onClick={() => setShow(!show)} variant="text" color="inherit">
+        <Icon type={IconType.SearchIcon} size="medium" color="neutral30" />
+      </Button>
+    </Flex>
+  );
+}
+
+export default styled(SearchInput).attrs({ className: SearchInput.name })``;

ui/stories/SearchInput.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import SearchInput, { Props } from "../components/SearchInput";
+
+export default {
+  title: "SearchInput",
+  component: SearchInput,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Series of deletable MUI Chip components: https://mui.com/components/chips/",
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<Props> = (args) => {
+  return <SearchInput {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};