Secondary Dropdown

src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx

@@ -29,6 +29,7 @@ import { interfaceUserProfile } from '../../ignitus-UserInterfaceBook/Components
 import { InterfaceAvatar } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceAvatar/Components';
 import { interfaceSideProfile } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceSideProfile/Components/index';
 import { InterfaceProgress } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceProgress/index';
+import { interfaceSecondaryDropDown } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components';
 
 const Container = styled.div`
   display: flex;
@@ -93,6 +94,10 @@ export const UserInterfaceBookRoutes: React.FunctionComponent = () => (
           path="/interface/defaultDropdown"
           component={interfaceDropDown}
         />
+        <Route
+          path="/interface/secondaryDropdown"
+          component={interfaceSecondaryDropDown}
+        />
         <Route
           path="/interface/defaultCheckbox"
           component={interfaceCheckBox}

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import * as S from '../styles';
+import * as H from '../../typography';
+import { DataType } from '../types';
+
+export const SecondaryDropDown = ({ data }) => {
+  const [showOptions, setShowOptions] = React.useState(false);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [searchResults, setSearchResults] = React.useState([] as any);
+  const handleChange = event => {
+    setSearchTerm(event.target.value);
+    setShowOptions(true);
+  };
+  React.useEffect(() => {
+    const results: [] | DataType = data.filter(person =>
+      person.name
+        .replace(/\s+/g, '')
+        .toLowerCase()
+        .includes(searchTerm.replace(/\s+/g, '').toLowerCase()),
+    );
+    setSearchResults(results);
+    if (searchTerm) {
+      setShowOptions(true);
+    } else {
+      setShowOptions(false);
+    }
+  }, [searchTerm]);
+
+  return (
+    <S.ParentContainer className="ParentContainer">
+      <S.SearchBarWrapper>
+        <S.SearchBar
+          type="text"
+          placeholder="Search..."
+          onChange={handleChange}
+          value={searchTerm}
+        />
+      </S.SearchBarWrapper>
+      {showOptions && (
+        <S.OptionsContainer>
+          {searchResults.map(({ name, avatar }) => (
+            <S.CardWrapper key={`${name}`}>
+              <S.Avatar src={avatar} />
+              <S.NameWrapper>
+                <H.Heading5>{name}</H.Heading5>
+              </S.NameWrapper>
+            </S.CardWrapper>
+          ))}
+        </S.OptionsContainer>
+      )}
+    </S.ParentContainer>
+  );
+};

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts

@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import * as C from '../colors';
+import * as F from '../fonts';
+
+export const ParentContainer = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+`;
+
+export const SearchBarWrapper = styled.div`
+  width: 20rem;
+  height: 2rem;
+`;
+
+export const SearchBar = styled.input`
+  outline: none;
+  border: 0.1rem solid ${C.IgnitusBlue};
+  border-radius: 0.5rem;
+  width: 20rem;
+  height: 2rem;
+  padding-left: 0.25rem;
+  color: ${C.IgnitusBlue};
+  font-weight: ${F.SemiBold};
+  &::placeholder {
+    color: ${C.IgnitusBlue};
+    font-weight: ${F.SemiBold};
+  }
+`;
+
+export const OptionsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0.25rem;
+  background-color: ${C.White};
+  overflow: auto;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+`;
+
+export const CardWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-items: baseline;
+  padding: 0.5rem;
+  height: 3rem;
+  :hover {
+    background-color: ${C.GreyLight};
+  }
+  flex: 1;
+`;
+
+export const Avatar = styled.img`
+  border-radius: 50%;
+  width: 2.5rem;
+  margin: 0 1rem 0 1rem;
+`;
+
+export const NameWrapper = styled.div`
+  margin: 0.5rem;
+`;

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts

@@ -0,0 +1,4 @@
+export type DataType = {
+  avatar: string;
+  name: string;
+};

src/ignitus-Shared/index.ts

@@ -48,6 +48,9 @@ export {
   DefaultSearchInput,
 } from './ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components';
 
+export {
+  SecondaryDropDown,
+} from './ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components';
 /**
  * ignitus-Layout
  */

src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Interface } from '../../../../styles';
+import { data } from '../constants';
+import { Heading2, SecondaryDropDown } from '../../../../../ignitus-Shared';
+
+export const interfaceSecondaryDropDown: React.FC = () => (
+  <React.Fragment>
+    <Interface>
+      <Heading2>Secondary DropDown</Heading2>
+      <hr />
+
+      <SecondaryDropDown data={data} />
+    </Interface>
+  </React.Fragment>
+);

src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/constants.ts

@@ -0,0 +1,34 @@
+import { DataType } from './types';
+
+export const data: DataType[] = [
+  {
+    avatar:
+      'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
+    name: 'Harpar Hopman',
+  },
+  {
+    avatar:
+      'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
+    name: 'Hara Hopman',
+  },
+  {
+    avatar:
+      'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
+    name: 'Harbour Center',
+  },
+  {
+    avatar:
+      'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
+    name: 'Harvard University',
+  },
+  {
+    avatar:
+      'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
+    name: 'Henry Harbour',
+  },
+  {
+    avatar:
+      'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
+    name: 'Hara Jackson',
+  },
+];

src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/types.ts

@@ -0,0 +1,4 @@
+export type DataType = {
+  avatar: string;
+  name: string;
+};

src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts

@@ -86,10 +86,10 @@ export const allEdges: Edges[] = [
             title: 'Default',
             route: '/interface/defaultDropdown',
           },
-          // {
-          //   title: 'Secondary',
-          //   route: '/interface/secondaryDropdown',
-          // },
+          {
+            title: 'Secondary',
+            route: '/interface/secondaryDropdown',
+          },
         ],
       },
     ],