add search box

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/DropDownMenu/DropDownMenu.tsx

@@ -1,14 +1,14 @@
 import { Paper, PaperProps } from '@mui/material';
 import styled from '@emotion/styled';
 
-import { PSYCHSCREEN_TONAL_PALETTES  } from '../../constants';
+import { PSYCHSCREEN_TONAL_PALETTES } from '../../constants';
 
 /**
  * PsychSCREEN drop down menu properties.
  * @member onItemClicked event handler for when a menu item is clicked.
  * @member items list of items to be displayed in the menu.
  */
- export type DropDownMenuProps = PaperProps;
+export type DropDownMenuProps = PaperProps;
 
 const DropDownMenu = styled(Paper)<DropDownMenuProps>(() => ({
     boxShadow: "0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3)",

src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { TextField, TextFieldProps, InputAdornment } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import styled from '@emotion/styled';
+
+/**
+ * PsychSCREEN drop down menu properties.
+ * @member onItemClicked event handler for when a menu item is clicked.
+ * @member items list of items to be displayed in the menu.
+ */
+export type SearchBoxProps = TextFieldProps & {
+    width?: number;
+};
+
+const StyledTextField = styled(TextField)<SearchBoxProps>(() => ({
+    fontSize: "16px",
+    lineHeight: "24px",
+    letterSpacing: "0.5px",
+    fontWeight: 400,
+    height: "56px"
+}));
+
+const SearchBox: React.FC<SearchBoxProps> = props => (
+    <StyledTextField
+        label="What can we help you find?"
+        variant="standard"
+        helperText="e.g. schizophrenia, years of education"
+        InputProps={{
+            endAdornment: (
+                <InputAdornment position="end">
+                    <SearchIcon style={{ color: "#49454F" }} />
+                </InputAdornment>
+            ),
+            style: {
+                height: "76px",
+                margin: "0px",
+                width: `${props.width || 436}px`
+            }
+        }}
+        inputProps={{
+            style: {
+                height: "24px",
+                paddingTop: "16px",
+                paddingLeft: "16px",
+                paddingBottom: "16px"
+            }
+        }}
+        FormHelperTextProps={{
+            style: {
+                paddingLeft: "16px",
+                lineHeight: "16px",
+                fontSize: "12px",
+                letterSpacing: "0.4px",
+                color: "#8D8D8D"
+            }
+        }}
+        InputLabelProps={{
+            style: {
+                marginTop: "-15px",
+                paddingTop: "16px",
+                paddingBottom: "16px",
+                paddingLeft: "16px",
+                color: "#8D8D8D"
+            }
+        }}
+        {...props}
+    />
+);
+export default SearchBox;

src/components/SearchBox/SearchBoxWithSelect.tsx

@@ -0,0 +1,46 @@
+import { MenuItem } from '@mui/material';
+import React, { useState } from 'react';
+import { Select } from '../Select';
+import SearchBox, { SearchBoxProps } from './SearchBox';
+
+export type SearchBoxWithSelectOption = {
+    value: string;
+    name: string;
+    helperText: string;
+}
+
+export type SearchBoxWithSelectProps = SearchBoxProps & {
+    selectOptions: SearchBoxWithSelectOption[];
+    onSelectChange?: (option: SearchBoxWithSelectOption) => void;
+    onSearchChange?: (value: string) => void;
+};
+
+const SearchBoxWithSelect: React.FC<SearchBoxWithSelectProps> = props => {
+    const [ option, setOption ] = useState(props.selectOptions[0]);
+    return (
+        <>
+            <Select
+                onChange={e => {
+                    setOption(props.selectOptions[e.target.value as number]);
+                    props.onSelectChange && props.onSelectChange(props.selectOptions[e.target.value as number]);
+                }}
+                defaultValue={0}
+            >
+                { props.selectOptions.map((option, i) => (
+                    <MenuItem
+                        key={option.value}
+                        value={i}
+                    >
+                        {option.name}
+                    </MenuItem>
+                ))}
+            </Select>
+            <SearchBox
+                onChange={e => props.onSearchChange && props.onSearchChange(e.target.value)}
+                helperText={option.helperText}
+                {...props}
+            />
+        </>
+    );
+};
+export default SearchBoxWithSelect;

src/components/SearchBox/index.ts

@@ -0,0 +1,3 @@
+import SearchBox, { SearchBoxProps } from './SearchBox';
+import SearchBoxWithSelect, { SearchBoxWithSelectProps } from './SearchBoxWithSelect';
+export { SearchBox, SearchBoxProps, SearchBoxWithSelect, SearchBoxWithSelectProps };

src/components/Select/Select.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Select as MUISelect, SelectProps as MUISelectProps } from '@mui/material';
+import styled from '@emotion/styled';
+
+/**
+ * PsychSCREEN drop down menu properties.
+ * @member onItemClicked event handler for when a menu item is clicked.
+ * @member items list of items to be displayed in the menu.
+ */
+export type SelectProps = MUISelectProps & {
+    width?: number;
+};
+
+const StyledSelect = styled(MUISelect)<SelectProps>(() => ({
+    fontSize: "16px",
+    lineHeight: "24px",
+    letterSpacing: "0.5px",
+    fontWeight: 400,
+    height: "56px",
+    padding: "16px",
+    color: "#000000"
+}));
+
+const Select: React.FC<SelectProps> = props => (
+    <StyledSelect
+        label="What can we help you find?"
+        variant="standard"
+        style={{
+            width: `${props.width || 172}px`,
+        }}
+        SelectDisplayProps={{ style: { paddingTop: "14px" } }}
+        {...props}
+    >   
+        {props.children}
+    </StyledSelect>
+);
+export default Select;

src/components/Select/index.ts

@@ -0,0 +1,2 @@
+import Select, { SelectProps } from './Select';
+export { Select, SelectProps };

src/index.ts

@@ -1,5 +1,7 @@
 export { AppBar, AppBarProps } from './components/AppBar';
 export { Button, ButtonProps } from './components/Button';
 export { Typography, TypographyProps } from './components/Typography';
+export { SearchBox, SearchBoxProps } from './components/SearchBox';
+export { Select, SelectProps } from './components/Select';
 export { DropDownMenu, DropDownMenuProps } from './components/DropDownMenu';
 export { PSYCHSCREEN_DEFAULT_THEME, PSYCHSCREEN_LIGHT_THEME, PSYCHSCREEN_DARK_THEME, PSYCHSCREEN_DEFAULT_FONT_FAMILY, PSYCHSCREEN_TONAL_PALETTES } from './constants';

stories/SearchBox.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { SearchBox, SearchBoxProps } from '../src';
+import "../src/App.css";
+import { SearchBoxWithSelect } from '../src/components/SearchBox';
+
+const meta: Meta = {
+  title: 'SearchBox', 
+  component: SearchBox,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const SELECT_OPTIONS = [
+  { name: "Disease/Trait", value: "disease", helperText: "e.g. schizophrenia, years of education" },
+  { name: "Gene/bCRE", value: "gene", helperText: "e.g. APOE, PPIF1" },
+  { name: "SNP/QTL", value: "SNP", helperText: "e.g. rs2836883, rs7690700" }
+]
+
+const Template: Story<SearchBoxProps & { withSelect?: boolean }> = args => args.withSelect ? (
+  <SearchBoxWithSelect
+    selectOptions={SELECT_OPTIONS}
+    label="What can we help you find?"
+    variant="standard"
+    {...args}
+  />
+) : (
+    <SearchBox label="What can we help you find?" variant="standard" {...args} />
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+export const WithSelect = Template.bind({});
+
+Default.args = {};
+WithSelect.args = { withSelect: true };

stories/Select.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Select, SelectProps } from '../src';
+import "../src/App.css";
+import { MenuItem } from '@mui/material';
+
+const meta: Meta = {
+  title: 'Select', 
+  component: Select,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<SelectProps> = args => (
+    <Select variant="standard" defaultValue="disease/trait" {...args}>
+      <MenuItem value="disease/trait">Disease/Trait</MenuItem>
+      <MenuItem value="gene/bcre">Gene/bCRE</MenuItem>
+      <MenuItem value="snp/qtl">SNP/QTL</MenuItem>
+      <MenuItem value="single-cell">Single Cell</MenuItem>
+    </Select>
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+
+Default.args = {};