Implemented searchbar, menu, dropdown and togglebutton components

.gitignore

@@ -24,5 +24,4 @@ yarn-error.log*
 
 *storybook.log
 .storybook/
-/src/stories
-*.stories.js
+/src/stories

src/Styles.js

@@ -0,0 +1,29 @@
+export const colors = {
+    purple: '#7F56D9',
+    darkGrey: '#344054',
+    grey: '#5D6B98',
+    lightGrey: '#B9C0D4',
+    green: '#079455'
+};
+
+export const fonts = {
+    fontFamily: "Inter, sans-serif",
+    bold: {
+        size: '16px',
+        lineHeight: '24px',
+        color: colors.darkGrey,
+        fontWeight: 500
+    },
+    default: {
+        size: '13px',
+        lineHeight: '13px',
+        color: colors.darkGrey,
+        fontWeight: 400
+    },
+    informative: {
+        size: '11px',
+        lineHeight: '11px',
+        color: colors.darkGrey,
+        fontWeight: 400
+    }
+};

src/components/BasicMenus/BasicMenu.stories.js

@@ -0,0 +1,84 @@
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import PeopleOutlineIcon from '@mui/icons-material/PeopleOutline';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import BusinessOutlinedIcon from '@mui/icons-material/BusinessOutlined';
+import PieChartOutlineOutlinedIcon from '@mui/icons-material/PieChartOutlineOutlined';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+
+const listContent = <List>
+    <ListItem sx={{width: 300}} disablePadding>
+        <ListItemButton>
+            <ListItemIcon>
+                <HomeOutlinedIcon />
+            </ListItemIcon>
+            <ListItemText primary="Home" />
+        </ListItemButton>
+    </ListItem>
+    <ListItem sx={{width: 300}} disablePadding>
+        <ListItemButton>
+            <ListItemIcon>
+                <PeopleOutlineIcon />
+            </ListItemIcon>
+            <ListItemText primary="People" />
+        </ListItemButton>
+    </ListItem>
+    <ListItem sx={{width: 300}} disablePadding>
+        <ListItemButton>
+            <ListItemIcon>
+                <AccessTimeIcon />
+            </ListItemIcon>
+            <ListItemText primary="Time off" />
+        </ListItemButton>
+    </ListItem>
+    <ListItem sx={{width: 300}} disablePadding>
+        <ListItemButton>
+            <ListItemIcon>
+                <BusinessOutlinedIcon />
+            </ListItemIcon>
+            <ListItemText primary="Company" />
+        </ListItemButton>
+    </ListItem>
+    <ListItem sx={{width: 300}} disablePadding>
+        <ListItemButton>
+            <ListItemIcon>
+                <PieChartOutlineOutlinedIcon />
+            </ListItemIcon>
+            <ListItemText primary="Reporting" />
+        </ListItemButton>
+    </ListItem>
+    <ListItem sx={{width: 300}} disablePadding>
+        <ListItemButton>
+            <ListItemIcon>
+                <SettingsOutlinedIcon />
+            </ListItemIcon>
+            <ListItemText primary="Settings" />
+        </ListItemButton>
+    </ListItem>
+</List>;
+
+//Storybook display settings
+export default { 
+    title: 'BasicMenus/BasicMenu',
+    component: Box,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs']
+};
+
+//Stories for each BasicMenu type
+export const Primary = {
+    args: {
+        sx: { 
+            width: '100%', 
+            maxWidth: 360 
+        },
+        children: listContent
+    }
+};

src/components/BasicMenus/Clickable.stories.js

@@ -0,0 +1,27 @@
+import Chip from '@mui/material/Chip';
+import TuneIcon from '@mui/icons-material/Tune';
+
+const handleClick = () => {
+    console.info('You clicked the Chip.');
+};
+
+//Storybook display settings
+export default {
+    title: 'BasicMenus/Clickable',
+    component: Chip,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs']
+};
+
+//Stories for each Clickable type
+export const Primary = {
+    args: {
+        icon: <TuneIcon />,
+        label: 'Customize',
+        variant: 'outlined',
+        onClick: handleClick,
+        sx: {borderRadius: "4px"}
+    }
+};

src/components/BasicMenus/DropDown.stories.js

@@ -0,0 +1,33 @@
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+
+const team = [
+    'Phoenix Baker',
+    'Olivia Rhye',
+    'Lana Steiner',
+    'Demi Wilkinson',
+    'Candice Wu',
+    'Natali Craig',
+    'Drew Cano'
+];
+
+//Storybook display settings
+export default {
+    title: 'BasicMenus/Dropdown',
+    component: Autocomplete,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs']
+};
+
+//Stories for each Dropdown type
+export const Primary = {
+    args: {
+        disablePortal: true,
+        id: "combo-box-demo",
+        options: team,
+        sx: {width: 300},
+        renderInput: (params) => <TextField {...params} placeholder="select team member" />
+    }
+};

src/components/BasicMenus/MenuItem.jsx

@@ -0,0 +1,58 @@
+import CheckIcon from '@mui/icons-material/Check';
+import { styled } from '@mui/system';
+import { useState } from 'react';
+import { colors, fonts } from '../../Styles';
+import PropTypes from 'prop-types';
+
+/**
+ * Selectable component for dropdown menus.
+ * 
+ * Props:
+ * - children<Any>: Text to be used for the button label
+ * 
+ * - style<Object>: Optional prop for adding further inline styling 
+ *      Default: {}
+ */
+export default function MenuItem ({children, style}) {
+    const [selected, setSelected] = useState(false);
+
+    function handleClick() {
+        setSelected(!selected);
+    }
+
+    let Item = styled("div")({...{
+        fontFamily: fonts.fontFamily,
+        backgroundColor: selected ? "#F9FAFB" : "#FFFFFF",
+        border: "1px solid #FFFFFF",
+        borderRadius: "4px",
+        width: "100%",
+        minWidth: "200px",
+        minHeight: "36px",
+        padding: "6px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        "&:hover": {
+            cursor: "pointer",
+            border: "1px solid #D0D5DD"
+        }
+    }, ...style});
+
+    return (
+        <Item onClick={handleClick}>
+            {children}
+            {selected && <CheckIcon sx={{color: colors.purple}} />}
+        </Item>
+    );
+};
+
+//Control panel settings for storybook
+MenuItem.propTypes = {
+    //MenuItem text
+    children: PropTypes.string
+};
+
+//Default values for this component
+MenuItem.defaultProps = {
+    style: {}
+};

src/components/BasicMenus/MenuItem.stories.js

@@ -0,0 +1,18 @@
+import MenuItem from './MenuItem';
+
+//Storybook display settings
+export default {
+    title: 'BasicMenus/MenuItem',
+    component: MenuItem,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs']
+};
+
+//Stories for each MenuItem type
+export const Primary = {
+    args: {
+        children: "Menu Item"
+    }
+};

src/components/BasicMenus/MenuToggleButton.jsx

@@ -0,0 +1,55 @@
+import Chip from '@mui/material/Chip';
+import Box from '@mui/system/Box';
+import { styled } from '@mui/system';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Button component which displays a dropdown menu when toggled.
+ * 
+ * Props:
+ * - label<String>: Text to be used for the button label.
+ * 
+ * - menuComponent<Component>: Menu component to be displayed when button is toggled.
+ * 
+ * - icon<Component>: Optional prop for including an icon in the button label.
+ *      Default: null
+ * 
+ * - style<Object>: Optional prop for adding further inline styling .
+ *      Default: {}
+ */
+export default function MenuToggleButton({label, menuComponent, icon, style}) {
+    const [selected, setSelected] = useState(false);
+    const [display, setDisplay] = useState("none");
+
+    const StyledChip = styled(Chip)({
+        backgroundColor: (selected) ? "#F9FAFB" : "#FFFFFF",
+        borderRadius: "4px"
+    });
+
+    function handleClick() {
+        setSelected(!selected);
+        setDisplay((selected) ? "block" : "none");
+    }
+
+    return (
+        <Box sx={style}>
+            <StyledChip icon={icon} label={label} variant="outlined" onClick={handleClick} />
+            <Box sx={{display: display, position: "absolute"}}>
+                {menuComponent}
+            </Box>
+        </Box>
+    );
+};
+
+//Control panel settings for storybook
+MenuToggleButton.propTypes = {
+    //Button text
+    label: PropTypes.string.isRequired
+};
+
+//Default values for this component
+MenuToggleButton.defaultProps = {
+    icon: null,
+    style: {}
+};

src/components/BasicMenus/MenuToggleButton.stories.js

@@ -0,0 +1,58 @@
+import MenuToggleButton from './MenuToggleButton';
+import TuneIcon from '@mui/icons-material/Tune';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import MenuItem from './MenuItem';
+
+const selectableContent = (
+    <Box sx={{ 
+        width: '100%', 
+        maxWidth: 360, 
+        border: "1px solid #EAECF0", 
+        borderRadius: 2 
+    }}>
+        <List>
+            <ListItem sx={{width: 300, paddingX: 1, paddingY: "3px"}}>
+                <MenuItem>Name</MenuItem>
+            </ListItem>
+            <ListItem sx={{width: 300, paddingX: 1, paddingY: "3px"}}>
+                <MenuItem>Status</MenuItem>
+            </ListItem>
+            <ListItem sx={{width: 300, paddingX: 1, paddingY: "3px"}}>
+                <MenuItem>Role</MenuItem>
+            </ListItem>
+            <ListItem sx={{width: 300, paddingX: 1, paddingY: "3px"}}>
+                <MenuItem>Team</MenuItem>
+            </ListItem>
+            <ListItem sx={{width: 300, paddingX: 1, paddingY: "3px"}}>
+                <MenuItem>Hire date</MenuItem>
+            </ListItem>
+            <ListItem sx={{width: 300, paddingX: 1, paddingY: "3px"}}>
+                <MenuItem>Employee No</MenuItem>
+            </ListItem>
+            <ListItem sx={{width: 300, paddingX: 1, paddingY: "3px"}}>
+                <MenuItem>Employment status</MenuItem>
+            </ListItem>
+        </List>
+    </Box>
+);
+
+//Storybook display settings
+export default {
+    title: 'BasicMenus/ToggleButton',
+    component: MenuToggleButton,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs']
+};
+
+//Stories for each ToggleButton type
+export const Primary = {
+    args: {
+        menuComponent: selectableContent,
+        icon: <TuneIcon />,
+        label: 'Customize'
+    }
+};