From a6c3771f83c964cc1c45f323a9c1be823853b81f Mon Sep 17 00:00:00 2001 From: Meghana Date: Thu, 23 Apr 2020 02:15:32 +0530 Subject: [PATCH 01/10] search bar without filtering functionality --- .../ignitus-UserInterfaceBookRoutes/index.tsx | 5 ++ .../Components/index.ts | 1 + .../Components/secondaryDropDown.jsx | 37 ++++++++++++ .../ignitus-secondaryDropDown/constants.ts | 29 ++++++++++ .../ignitus-secondaryDropDown/styles.ts | 57 +++++++++++++++++++ .../ignitus-secondaryDropDown/types.ts | 9 +++ .../Components/index.tsx | 18 ++++++ .../interfaceSecondaryDropdown/styles.ts | 7 +++ 8 files changed, 163 insertions(+) create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.ts create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/constants.ts create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts create mode 100644 src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx create mode 100644 src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/styles.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx b/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx index 5c9b881a..9563d99d 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx @@ -25,6 +25,7 @@ import {interfaceMultiMediaInput} from '../../ignitus-UserInterfaceBook/Componen import {interfaceOverlay} from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceOverlay/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'; const Container = styled.div` display: flex; @@ -89,6 +90,10 @@ const UserInterfaceBookRoutes: React.FunctionComponent = () => ( path="/interface/defaultDropdown" component={interfaceDropDown} /> + + setShowOptions(1)} /> + {showOptions && ( + + )} + + ); +} + + +const Cards = () => { + return ( + + {Details.map((person, index) => + + + + + {person.name} + + + + )} + + ) +} diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/constants.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/constants.ts new file mode 100644 index 00000000..7e29bdf3 --- /dev/null +++ b/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" + } + + ] + diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts new file mode 100644 index 00000000..5df9e5a7 --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts @@ -0,0 +1,57 @@ +import styled from '@emotion/styled'; +import * as C from '../colors'; + +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: 2.5rem; +`; + +export const SearchBar = styled.input` + outline: none; + border: 0.1rem solid ${C.IgnitusBlue}; + border-radius: 0.5rem; + width: 20rem; + height: 2.5rem; +`; + +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; + // display:none +`; + +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; + +`; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts new file mode 100644 index 00000000..04d47ea7 --- /dev/null +++ b/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; +// }; diff --git a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx new file mode 100644 index 00000000..a0ba1246 --- /dev/null +++ b/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 = () => ( + + + Secondary DropDown + +
+ + +); + + diff --git a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/styles.ts b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/styles.ts new file mode 100644 index 00000000..3111a48d --- /dev/null +++ b/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 ; +`; + From 5e852eade8124fb3444c069b19bda22f0b6a24fb Mon Sep 17 00:00:00 2001 From: Meghana Date: Thu, 23 Apr 2020 02:37:49 +0530 Subject: [PATCH 02/10] added filter functionality --- .../Components/secondaryDropDown.jsx | 52 ++++++++++--------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx index 2def99d5..21976136 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx @@ -5,33 +5,35 @@ import {Details} from '../constants'; export default function SecondaryDropDown() { - const [showOptions, setShowOptions] = useState(false); + const [searchTerm, setSearchTerm] = React.useState(" "); + const [searchResults, setSearchResults] = React.useState([]); + const handleChange = event => { + setSearchTerm(event.target.value); + }; + React.useEffect(() => { + const results = Details.filter(person => + person.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + setSearchResults(results); + }, [searchTerm]); + return ( - setShowOptions(1)} /> - {showOptions && ( - - )} + + + {searchResults.map((person, index) => + + + + + {person.name} + + + + )} + ); } - - -const Cards = () => { - return ( - - {Details.map((person, index) => - - - - - {person.name} - - - - )} - - ) -} From 606ed0d46e620744b1b21daf82e091d6a1d88b79 Mon Sep 17 00:00:00 2001 From: Meghana Date: Thu, 23 Apr 2020 04:07:50 +0530 Subject: [PATCH 03/10] minor fixes --- .../Components/secondaryDropDown.jsx | 53 ++++++++++++------- .../ignitus-secondaryDropDown/styles.ts | 11 +++- 2 files changed, 43 insertions(+), 21 deletions(-) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx index 21976136..c002832a 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx @@ -1,39 +1,54 @@ -import React, { Component, useState } from 'react'; +import React, { useState } from 'react'; import * as S from '../styles'; import * as H from '../../typography'; import {Details} from '../constants'; export default function SecondaryDropDown() { - const [searchTerm, setSearchTerm] = React.useState(" "); + const [showOptions, setShowOptions] = React.useState(false); + const [searchTerm, setSearchTerm] = React.useState(""); const [searchResults, setSearchResults] = React.useState([]); const handleChange = event => { - setSearchTerm(event.target.value); + setSearchTerm(event.target.value); + setShowOptions(1); }; React.useEffect(() => { + if(searchTerm) + setShowOptions(1); + else + setShowOptions(null); const results = Details.filter(person => - person.name.toLowerCase().includes(searchTerm.toLowerCase()) + person.name.replace(/\s+/g,'').toLowerCase().includes(searchTerm.replace(/\s+/g,'').toLowerCase()) ); setSearchResults(results); }, [searchTerm]); return ( - - - {searchResults.map((person, index) => - - - - - {person.name} - - - - )} - + + + + {showOptions && + + {searchResults.map((person, index) => + + + + + {person.name} + + + + )} + + } ); } diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts index 5df9e5a7..625186e4 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import * as C from '../colors'; +import * as F from '../fonts'; export const ParentContainer = styled.div` display: flex; @@ -11,7 +12,7 @@ export const ParentContainer = styled.div` export const SearchBarWrapper = styled.div` width: 20rem; - height: 2.5rem; + height: 3rem; `; export const SearchBar = styled.input` @@ -20,6 +21,13 @@ export const SearchBar = styled.input` 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` @@ -30,7 +38,6 @@ export const OptionsContainer = styled.div` overflow:auto; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); border-radius: 0.5rem; - // display:none `; export const CardWrapper = styled.div` From f740ff5b7f04f731024e4ab8a51260b626e21a18 Mon Sep 17 00:00:00 2001 From: Meghana Varanasi <44519203+Meghana-12@users.noreply.github.com> Date: Thu, 23 Apr 2020 04:33:18 +0530 Subject: [PATCH 04/10] removed unused import --- .../ignitus-secondaryDropDown/Components/secondaryDropDown.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx index c002832a..aacc0dcf 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import * as S from '../styles'; import * as H from '../../typography'; import {Details} from '../constants'; From 88d1f5d4e7ef30d399b2a3e5cd88cfa27bae6d9e Mon Sep 17 00:00:00 2001 From: Meghana Varanasi <44519203+Meghana-12@users.noreply.github.com> Date: Thu, 23 Apr 2020 05:13:12 +0530 Subject: [PATCH 05/10] Update secondaryDropDown.jsx --- .../ignitus-secondaryDropDown/Components/secondaryDropDown.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx index aacc0dcf..e160a284 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx @@ -1,7 +1,7 @@ import React from 'react'; import * as S from '../styles'; import * as H from '../../typography'; -import {Details} from '../constants'; +import { Details } from '../constants'; export default function SecondaryDropDown() { From 4d7494ada601025a4a6e3769c7cc15d243f2d564 Mon Sep 17 00:00:00 2001 From: Meghana Varanasi <44519203+Meghana-12@users.noreply.github.com> Date: Thu, 23 Apr 2020 05:14:14 +0530 Subject: [PATCH 06/10] Update secondaryDropDown.jsx --- .../ignitus-secondaryDropDown/Components/secondaryDropDown.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx index e160a284..fe725208 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx @@ -6,7 +6,7 @@ import { Details } from '../constants'; export default function SecondaryDropDown() { const [showOptions, setShowOptions] = React.useState(false); - const [searchTerm, setSearchTerm] = React.useState(""); + const [searchTerm, setSearchTerm] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); const handleChange = event => { setSearchTerm(event.target.value); From 228b6f4fea35db59a6adf9887872c44dd9729a85 Mon Sep 17 00:00:00 2001 From: Meghana Varanasi <44519203+Meghana-12@users.noreply.github.com> Date: Thu, 23 Apr 2020 05:15:11 +0530 Subject: [PATCH 07/10] Update secondaryDropDown.jsx --- .../Components/secondaryDropDown.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx index fe725208..b9022b40 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx @@ -13,10 +13,12 @@ export default function SecondaryDropDown() { setShowOptions(1); }; React.useEffect(() => { - if(searchTerm) + if(searchTerm){ setShowOptions(1); - else + } + else{ setShowOptions(null); + } const results = Details.filter(person => person.name.replace(/\s+/g,'').toLowerCase().includes(searchTerm.replace(/\s+/g,'').toLowerCase()) ); From c1a272faaa986cbd8de4959acdb3586aa2db5bf9 Mon Sep 17 00:00:00 2001 From: Meghana Date: Thu, 23 Apr 2020 19:09:27 +0530 Subject: [PATCH 08/10] fixes --- ...daryDropDown.jsx => secondaryDropDown.tsx} | 28 +++++++++---------- src/ignitus-Shared/index.ts | 1 + 2 files changed, 15 insertions(+), 14 deletions(-) rename src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/{secondaryDropDown.jsx => secondaryDropDown.tsx} (69%) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.tsx similarity index 69% rename from src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx rename to src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.tsx index b9022b40..6d1b590f 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.jsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.tsx @@ -1,28 +1,26 @@ import React from 'react'; import * as S from '../styles'; import * as H from '../../typography'; -import { Details } from '../constants'; +import {Details} from '../constants'; -export default function SecondaryDropDown() { +export const SecondaryDropDown: React.FC = () => { const [showOptions, setShowOptions] = React.useState(false); const [searchTerm, setSearchTerm] = React.useState(''); - const [searchResults, setSearchResults] = React.useState([]); + const [searchResults, setSearchResults] = React.useState([] as any); const handleChange = event => { setSearchTerm(event.target.value); - setShowOptions(1); + setShowOptions(true); }; React.useEffect(() => { - if(searchTerm){ - setShowOptions(1); - } - else{ - setShowOptions(null); - } - const results = Details.filter(person => + const results = [] = Details.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 ( @@ -38,13 +36,13 @@ export default function SecondaryDropDown() { {showOptions && {searchResults.map((person, index) => - + - {person.name} + {person['name']} @@ -54,3 +52,5 @@ export default function SecondaryDropDown() { ); } + +export default SecondaryDropDown; diff --git a/src/ignitus-Shared/index.ts b/src/ignitus-Shared/index.ts index 9f065c36..55324b08 100644 --- a/src/ignitus-Shared/index.ts +++ b/src/ignitus-Shared/index.ts @@ -32,6 +32,7 @@ export {DefaultMultiMediaInput} from './ignitus-DesignSystem/ignitus-Atoms/ignit export {DefaultSearchInput} from './ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components'; +export {SecondaryDropDown} from './ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown'; /** * ignitus-Layout */ From 6d8eb47eea8118fb0984dbe7d95b16ea5609fd78 Mon Sep 17 00:00:00 2001 From: Rawat Date: Wed, 29 Apr 2020 23:37:53 +0200 Subject: [PATCH 09/10] =?UTF-8?q?Refactoring=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/index.ts | 1 - .../{secondaryDropDown.tsx => index.tsx} | 0 .../ignitus-secondaryDropDown/styles.ts | 2 +- src/ignitus-Shared/index.ts | 2 +- .../Components/index.tsx | 16 ++++++++-------- .../Atoms/interfaceSecondaryDropdown/styles.ts | 5 ----- .../InterfaceSideNavigation/constants.ts | 8 ++++---- 7 files changed, 14 insertions(+), 20 deletions(-) delete mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.ts rename src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/{secondaryDropDown.tsx => index.tsx} (100%) delete mode 100644 src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/styles.ts diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.ts deleted file mode 100644 index ff7b50fe..00000000 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default as SecondaryDropDown} from './secondaryDropDown'; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx similarity index 100% rename from src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown.tsx rename to src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts index a99b0887..eabd723a 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts @@ -24,7 +24,7 @@ export const SearchBar = styled.input` padding-left: 0.25rem; color: ${C.IgnitusBlue}; font-weight: ${F.SemiBold}; - :: placeholder { + &::placeholder { color: ${C.IgnitusBlue}; font-weight: ${F.SemiBold}; } diff --git a/src/ignitus-Shared/index.ts b/src/ignitus-Shared/index.ts index 1ba85679..2583ed57 100644 --- a/src/ignitus-Shared/index.ts +++ b/src/ignitus-Shared/index.ts @@ -50,7 +50,7 @@ export { export { SecondaryDropDown, -} from './ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/secondaryDropDown'; +} from './ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components'; /** * ignitus-Layout */ diff --git a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx index afde4392..230a0bf9 100644 --- a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx +++ b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx @@ -1,14 +1,14 @@ 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'; +import { Interface } from '../../../../styles'; +import { Heading2, SecondaryDropDown } from '../../../../../ignitus-Shared'; export const interfaceSecondaryDropDown: React.FC = () => ( - - Secondary DropDown - -
- + + Secondary DropDown +
+ + + ); diff --git a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/styles.ts b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/styles.ts deleted file mode 100644 index c7c0943f..00000000 --- a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/styles.ts +++ /dev/null @@ -1,5 +0,0 @@ -import styled from '@emotion/styled'; - -export const TitleWrapper = styled.div` - padding: 2rem 1rem 0rem 2rem; -`; diff --git a/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts b/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts index 37098359..64570952 100644 --- a/src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts +++ b/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', + }, ], }, ], From f58b0949d15eb7ea8a93a8444b55050db7774c38 Mon Sep 17 00:00:00 2001 From: Rawat Date: Thu, 30 Apr 2020 00:14:53 +0200 Subject: [PATCH 10/10] =?UTF-8?q?Refactoring=20=F0=9F=8E=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/index.tsx | 26 +++++++++---------- .../ignitus-secondaryDropDown/styles.ts | 9 +++---- .../ignitus-secondaryDropDown/types.ts | 11 +++----- .../Components/index.tsx | 3 ++- .../interfaceSecondaryDropdown}/constants.ts | 16 +++++++----- .../Atoms/interfaceSecondaryDropdown/types.ts | 4 +++ 6 files changed, 33 insertions(+), 36 deletions(-) rename src/{ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown => ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown}/constants.ts (82%) create mode 100644 src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/types.ts diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx index 039631a3..6c8a24d0 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx @@ -1,9 +1,9 @@ import React from 'react'; import * as S from '../styles'; import * as H from '../../typography'; -import { Details } from '../constants'; +import { DataType } from '../types'; -export const SecondaryDropDown: React.FC = () => { +export const SecondaryDropDown = ({ data }) => { const [showOptions, setShowOptions] = React.useState(false); const [searchTerm, setSearchTerm] = React.useState(''); const [searchResults, setSearchResults] = React.useState([] as any); @@ -12,14 +12,12 @@ export const SecondaryDropDown: React.FC = () => { setShowOptions(true); }; React.useEffect(() => { - const results = - [] || - Details.filter(person => - person.name - .replace(/\s+/g, '') - .toLowerCase() - .includes(searchTerm.replace(/\s+/g, '').toLowerCase()), - ); + const results: [] | DataType = data.filter(person => + person.name + .replace(/\s+/g, '') + .toLowerCase() + .includes(searchTerm.replace(/\s+/g, '').toLowerCase()), + ); setSearchResults(results); if (searchTerm) { setShowOptions(true); @@ -40,11 +38,11 @@ export const SecondaryDropDown: React.FC = () => { {showOptions && ( - {searchResults.map(person => ( - - + {searchResults.map(({ name, avatar }) => ( + + - {person.name} + {name} ))} diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts index eabd723a..9a59a71f 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts @@ -3,16 +3,13 @@ import * as C from '../colors'; import * as F from '../fonts'; export const ParentContainer = styled.div` - display: flex; + display: inline-flex; flex-direction: column; - width: 20rem; - margin: 2rem; - max-height: 20rem; `; export const SearchBarWrapper = styled.div` width: 20rem; - height: 3rem; + height: 2rem; `; export const SearchBar = styled.input` @@ -20,7 +17,7 @@ export const SearchBar = styled.input` border: 0.1rem solid ${C.IgnitusBlue}; border-radius: 0.5rem; width: 20rem; - height: 2.5rem; + height: 2rem; padding-left: 0.25rem; color: ${C.IgnitusBlue}; font-weight: ${F.SemiBold}; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts index 04d47ea7..afbdbe43 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts @@ -1,9 +1,4 @@ -export type SecondaryDropDownProps = { - label: string; - options: string[]; - display: string; +export type DataType = { + avatar: string; + name: string; }; - -// export type DropDownProps = { -// display: string; -// }; diff --git a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx index 230a0bf9..99a0b9ba 100644 --- a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx +++ b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Interface } from '../../../../styles'; +import { data } from '../constants'; import { Heading2, SecondaryDropDown } from '../../../../../ignitus-Shared'; export const interfaceSecondaryDropDown: React.FC = () => ( @@ -8,7 +9,7 @@ export const interfaceSecondaryDropDown: React.FC = () => ( Secondary DropDown
- + ); diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/constants.ts b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/constants.ts similarity index 82% rename from src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/constants.ts rename to src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/constants.ts index 97c2d1cc..484e4cbd 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/constants.ts +++ b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/constants.ts @@ -1,31 +1,33 @@ -export const Details = [ +import { DataType } from './types'; + +export const data: DataType[] = [ { - avatarLink: + avatar: 'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png', name: 'Harpar Hopman', }, { - avatarLink: + avatar: 'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png', name: 'Hara Hopman', }, { - avatarLink: + avatar: 'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png', name: 'Harbour Center', }, { - avatarLink: + avatar: 'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png', name: 'Harvard University', }, { - avatarLink: + avatar: 'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png', name: 'Henry Harbour', }, { - avatarLink: + avatar: 'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png', name: 'Hara Jackson', }, diff --git a/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/types.ts b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/types.ts new file mode 100644 index 00000000..afbdbe43 --- /dev/null +++ b/src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/types.ts @@ -0,0 +1,4 @@ +export type DataType = { + avatar: string; + name: string; +};