Secondary Dropdown

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

@@ -26,10 +26,12 @@ import {interfaceOverlay} from '../../ignitus-UserInterfaceBook/Components/Molec
 import {interfaceTags} from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceTags/Components';
 import {interfaceFilters} from '../../ignitus-UserInterfaceBook/Components/Templates/interfaceFilters/Components/index';
 import {interfaceUserProfile} from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceUserProfile/Components';
+import {interfaceSecondaryDropDown} from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/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';
 
+
 const Container = styled.div`
   display: flex;
   flex-direction: row;
@@ -93,6 +95,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.ts

@@ -0,0 +1 @@
+export {default as SecondaryDropDown} from './secondaryDropDown';

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import * as S from '../styles';
+import * as H from '../../typography';
+import { Details } from '../constants';
+
+
+export default function SecondaryDropDown() {
+  const [showOptions, setShowOptions] = React.useState(false);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [searchResults, setSearchResults] = React.useState([]);
+  const handleChange = event => {
+      setSearchTerm(event.target.value);
+      setShowOptions(1);
+  };
+  React.useEffect(() => {
+    if(searchTerm){
+      setShowOptions(1);
+    }
+    else{
+      setShowOptions(null);
+    }
+    const results = Details.filter(person =>
+      person.name.replace(/\s+/g,'').toLowerCase().includes(searchTerm.replace(/\s+/g,'').toLowerCase())
+    );
+    setSearchResults(results);
+  }, [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((person, index) =>
+            <S.CardWrapper key={person.name + "_" + index}>
+              <S.Avatar
+                src={person.avatarLink}
+              />
+              <S.NameWrapper>
+                <H.Heading5>
+                  {person.name}
+                </H.Heading5>
+              </S.NameWrapper>
+            </S.CardWrapper>
+          )}
+        </S.OptionsContainer>
+      }
+    </S.ParentContainer>
+  );
+}

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

@@ -0,0 +1,29 @@
+
+export const Details = [
+    {
+      "avatarLink": "https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png",
+      "name": "Harpar Hopman"
+    },
+    {
+      "avatarLink": "https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png",
+      "name": "Hara Hopman"
+    },
+    {
+      "avatarLink": "https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png",
+      "name": "Harbour Center"
+    },
+    {
+      "avatarLink": "https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png",
+      "name": "Harvard University"
+    },
+    {
+      "avatarLink": "https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png",
+      "name": "Henry Harbour"
+    },
+    {
+      "avatarLink": "https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png",
+      "name": "Hara Jackson"
+    }
+
+  ]
+

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

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+import * as C from '../colors';
+import * as F from '../fonts';
+
+export const ParentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 20rem;
+  margin: 2rem;
+  max-height: 20rem;
+`;
+
+export const SearchBarWrapper = styled.div`
+  width: 20rem;
+  height: 3rem;
+`;
+
+export const SearchBar = styled.input`
+  outline: none;
+  border: 0.1rem solid ${C.IgnitusBlue};
+  border-radius: 0.5rem;
+  width: 20rem;
+  height: 2.5rem;
+  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,9 @@
+export type SecondaryDropDownProps = {
+  label: string;
+  options: string[];
+  display: string;
+};
+
+// export type DropDownProps = {
+//   display: string;
+// };

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import * as T from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography';
+import SecondaryDropDown
+  from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown';
+import * as S from '../styles'
+
+
+export const interfaceSecondaryDropDown: React.FC =  () => (
+  <React.Fragment>
+    <S.TitleWrapper>
+      <T.Heading3>Secondary DropDown</T.Heading3>
+    </S.TitleWrapper>
+    <br/>
+    <SecondaryDropDown/>
+  </React.Fragment>
+);
+
+

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

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+
+export const TitleWrapper = styled.div`
+  padding: 2rem 1rem 0rem 2rem ;
+`;
+