Skip to content

Commit

Permalink
Merge pull request #866 from Meghana-12/dropdown
Browse files Browse the repository at this point in the history
Dashboard Nav Dropdown
  • Loading branch information
divyanshu-rawat authored Jul 11, 2020
2 parents 86a39ce + 075fb9e commit 6c3662c
Show file tree
Hide file tree
Showing 17 changed files with 2,685 additions and 3,768 deletions.
24 changes: 11 additions & 13 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
module.exports = {
jest: {
verbose: true,
transform: {
'^.+\\.js$': 'babel-jest',
'^.+\\.(css|scss|less)$': 'jest-css-modules',
},
transformIgnorePatterns: ['/node_modules/'],
globals: {
NODE_ENV: 'test',
},
moduleFileExtensions: ['js', 'jsx'],
moduleDirectories: ['src'],
export const jest = {
verbose: true,
transform: {
'^.+\\.js$': 'babel-jest',
'^.+\\.(css|scss|less)$': 'jest-css-modules',
},
transformIgnorePatterns: ['/node_modules/'],
globals: {
NODE_ENV: 'test',
},
moduleFileExtensions: ['js', 'jsx'],
moduleDirectories: ['src'],
};
6,269 changes: 2,528 additions & 3,741 deletions package-lock.json

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@
"@types/eslint": "^6.1.8",
"@types/jest": "^25.1.3",
"@types/node": "^13.7.4",
"@types/react-dom": "^16.8.2",
"@types/react": "16.9.23",
"@types/react-dom": "^16.8.2",
"@types/react-redux": "^7.1.7",
"@types/react-router-dom": "5.1.3",
"@types/redux-logger": "3.0.7",
Expand All @@ -56,8 +56,10 @@
"eslint": "6.8.0",
"eslint-config-airbnb": "18.1.0",
"eslint-config-airbnb-typescript": "7.2.1",
"eslint-config-prettier": "6.11.0",
"eslint-plugin-import": "2.20.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-prettier": "3.1.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "2.5.1",
"husky": "^1.0.0-rc.13",
Expand All @@ -67,8 +69,6 @@
"jest-localstorage-mock": "^2.2.0",
"prettier": "1.17.0",
"sw-precache": "^5.2.1",
"eslint-config-prettier": "6.11.0",
"eslint-plugin-prettier": "3.1.3",
"typescript": "^3.1.6"
},
"jest": {
Expand Down
5 changes: 5 additions & 0 deletions src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { InterfaceProgress } from '../../ignitus-UserInterfaceBook/Components/Mo
import { interfaceSecondaryDropDown } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components';
import { interfaceScrollBar } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceScrollBar/Components';
import { interfaceToggleButtons } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceToggleButtons/Components';
import { interfaceDashboardNavigationDropdown } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceNavDropdown/Components';
import { interfaceOpportunitySideCard } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceOpportunitySideCard/Components';

const Container = styled.div`
Expand Down Expand Up @@ -146,6 +147,10 @@ export const UserInterfaceBookRoutes: React.FunctionComponent = () => (
path="/interface/toggleButtons"
component={interfaceToggleButtons}
/>
<Route
path="/interface/dashboardNavigationDropdown"
component={interfaceDashboardNavigationDropdown}
/>
<Route path="/interface/avatar" component={InterfaceAvatar} />
<Route path="/interface/sideProfile" component={interfaceSideProfile} />
<Route path="/interface/progress" component={InterfaceProgress} />
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { Layer } from '../../../ignitus-Organisms/ignitus-SideNavigation/Common/styles';
import * as S from '../styles';
import { Props } from '../types';
import { AppIcon } from '../../../../types/iconsTypes/iconEnums';

export const DashboardNavigationDropdown = ({ Options, Name }: Props) => {
const [content, setContent] = React.useState(false);
return (
<S.Container>
<S.NavigationHeading onClick={() => setContent(!content)}>
<S.Icon name={AppIcon.StudentIcon} />
{Name}
<S.Icon name={AppIcon.FilledArrowDownIcon} />
</S.NavigationHeading>
{content && (
<S.Column>
{Options.map(({ title }, x) => (
<div key={title}>
<Layer
border={Options.length - 1 !== x}
style={{ height: '1rem' }}
semiBold
marginTop={false}
marginBottom={false}
>
<S.Text> {title} </S.Text>
</Layer>
</div>
))}
</S.Column>
)}
</S.Container>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import styled from '@emotion/styled/macro';
import { White, IgnitusBlue } from '../colors';
import { Icon as I } from '../../../ignitus-Utilities/Components/icon';
import { StyleProps } from './types';
import { MD } from '../fonts';

export const Container = styled.div`
display: flex;
flex-direction: column;
width: 12rem;
`;

export const Column = styled.div`
background-color: ${White};
border-radius: 1rem;
margin-top: 1rem;
`;

export const NavigationHeading = styled.div`
align-items: center;
color: ${IgnitusBlue};
cursor: pointer;
display: flex;
font-size: ${MD};
justify-content: flex-end;
`;

export const Icon = styled(I)<StyleProps>`
height: 2rem;
fill: ${IgnitusBlue};
margin: 0 0.5rem;
`;

export const Text = styled.div`
text-align: center;
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export type Props = {
Options: Option[];
Name: string;
};

type Option = {
title: string;
};

export type StyleProps = {
marginLeft?: boolean;
marginRight?: boolean;
};
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ exports[`should rendered 1`] = `
cursor: pointer;
font-size: 18px;
font-weight: 400;
margin-top: none;
margin-bottom: none;
padding: 1rem 0;
width: 100%;
margin-top: none;
margin-bottom: none;
}
.emotion-1:hover {
background-color: #000066;
color: #ffffff;
}
.emotion-1:hover p {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
import styled from '@emotion/styled';

import { White, IgnitusBlue, GreyLight } from '../../../ignitus-Atoms/colors';
import { MD, Normal } from '../../../ignitus-Atoms/fonts';
import { MD, SemiBold, Normal } from '../../../ignitus-Atoms/fonts';
import { StyledLayerProps } from './types';

export const Layer = styled.div<StyledLayerProps>`
border-bottom: ${props => (props.border ? `1px solid ${GreyLight}` : 'null')};
color: ${IgnitusBlue};
cursor: pointer;
font-size: ${MD};
font-weight: ${Normal};
margin-top: ${props => (props.marginTop ? '0.5rem' : 'none')};
margin-bottom: ${props => (props.marginBottom ? '0.5rem' : 'none')};
font-weight: ${props => (props.semiBold ? `${SemiBold}` : `${Normal}`)};
padding: 1rem 0;
width: 100%;
margin-top: ${props => (props.marginTop ? '0.5rem' : 'none')};
margin-bottom: ${props => (props.marginBottom ? '0.5rem' : 'none')};
&:hover {
background-color: ${IgnitusBlue};
color: ${White};
p {
color: ${White};
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@ export interface LayerProps {
border?: boolean;
marginTop?: boolean;
marginBottom?: boolean;
semiBold?: boolean;
prepend?: React.ReactNode;
append?: React.ReactNode;
[rest: string]: any;
}

export type StyledLayerProps = {
border: boolean;
marginTop: boolean;
marginBottom: boolean;
marginTop?: boolean;
marginBottom?: boolean;
containIcon?: boolean;
semiBold?: boolean;
};
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,15 @@ export const SettingsContainer = styled(flexibleColDiv)`
border-radius: 16px;
box-shadow: 0 2px 4px 0 ${boxShadowColor};
width: 14rem;
overflow: hidden;
`;

export const Layer = styled(CommonLayer)`
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
height: 100%;
`;

export const SideNavIcon = styled(Icon)`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const MessageContainer = styled(flexibleColDiv)`
box-shadow: 0 2px 4px 0 ${boxShadowColor};
width: 14rem;
height: 16rem;
overflow: hidden;
`;

export const Layer = styled(CommonLayer)`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import * as S from '../style';
export const UserSettingsSideNavigation = () => {
return (
<S.SettingsContainer>
<S.Layer text="General" marginTop />
<S.Layer text="General" />
<S.Layer text="Password" />
<S.Layer text="Messaging" />
<S.Layer text="Notification" />
<S.Layer text="Blocked Users" />
<S.Layer text="Privacy" border={false} marginBottom />
<S.Layer text="Privacy" border={false} />
</S.SettingsContainer>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const SettingsContainer = styled(flexibleColDiv)`
border-radius: 16px;
box-shadow: 0 2px 4px 0 ${boxShadowColor};
width: 14rem;
height: 22rem;
height: 20rem;
`;

export const Layer = styled(CommonLayer)`
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import { DashboardNavigationDropdown } from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-navDropdown/Components';
import { Options, Name } from '../constants';
import { Heading2 } from '../../../../../ignitus-Shared';
import { Interface } from '../../../../styles';

export const interfaceDashboardNavigationDropdown = () => (
<Interface>
<Heading2>Dashboard DropDown</Heading2>
<hr />
<DashboardNavigationDropdown Options={Options} Name={Name} />
</Interface>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export const Options = [
{
title: 'Dashboard',
},
{
title: 'Profile',
},
{
title: 'Settings',
},
{ title: 'Privacy Policy' },
{
title: 'Log out',
},
];

export const Name = 'Sophia';
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,10 @@ export const allEdges: Edges[] = [
title: 'Secondary',
route: '/interface/secondaryDropdown',
},
{
title: 'Dashboard Navigation',
route: '/interface/dashboardNavigationDropdown',
},
],
},
{
Expand Down

0 comments on commit 6c3662c

Please sign in to comment.