Merge pull request #898 from Dishebh/notification

Added Notifications component under Organisms route

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

@@ -32,6 +32,7 @@ import { interfaceFilters } from '../../ignitus-UserInterfaceBook/Components/Tem
 import { interfaceUserProfile } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceUserProfile/Components';
 import { InterfaceAvatar } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceAvatar/Components';
 import { interfaceSideProfile } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceSideProfile/Components/index';
+import { InterfaceNotifications } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index';
 import { InterfaceProgress } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceProgress/index';
 import { interfaceSecondaryDropDown } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components';
 import { interfaceScrollBar } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceScrollBar/Components';
@@ -154,6 +155,10 @@ export const UserInterfaceBookRoutes: React.FunctionComponent = () => (
         <Route path="/interface/avatar" component={InterfaceAvatar} />
         <Route path="/interface/sideProfile" component={interfaceSideProfile} />
         <Route path="/interface/progress" component={InterfaceProgress} />
+        <Route
+          path="/interface/notifications"
+          component={InterfaceNotifications}
+        />
         <Route path="/interface/messageCard" component={interfaceMessageCard} />
       </Switch>
     </LeftRow>

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components/index.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable import/extensions */
+/* eslint-disable jsx-a11y/accessible-emoji */
+import React from 'react';
+import * as S from '../styles';
+import { withErrorBoundary } from '../../../../ignitus-ErrorHandlingComponents/errorBoundary';
+import { AppIcon } from '../../../../types/iconsTypes/iconEnums';
+import * as C from '../../../ignitus-Atoms/colors';
+import { InputTypes } from '../types';
+
+export const Notifications = withErrorBoundary(
+  ({
+    textColor,
+    titleColor,
+    bgColor,
+    picture,
+    title,
+    textLeft,
+    textRight,
+    ...rest
+  }: InputTypes) => (
+    <S.Container color={textColor} bgColor={bgColor} {...rest}>
+      <S.LeftContainer>
+        {picture && <S.Image src={picture} />}
+        {textLeft}
+        <S.Text color={titleColor}>&nbsp; {title} &nbsp;</S.Text>
+        {textRight}
+      </S.LeftContainer>
+      <S.RightContainer>
+        <S.IconContainer>
+          <S.Icon color={C.GreyOne} name={AppIcon.CrossIcon} />
+        </S.IconContainer>
+      </S.RightContainer>
+    </S.Container>
+  ),
+);

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/styles.ts

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+import { Icon as I } from '../../../ignitus-Utilities/Components/icon';
+import { StyledTagProps } from './types';
+import { Paragraph } from '../../..';
+import { Bold } from '../../ignitus-Atoms/fonts';
+
+export const Container = styled.span<StyledTagProps>`
+  background: ${props => props.bgColor};
+  color: ${props => props.color};
+  border-radius: 0.5rem;
+  margin: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
+`;
+
+export const IconContainer = styled.div`
+  display: flex;
+`;
+
+export const Icon = styled(I)`
+  width: 1.5rem;
+  fill: ${props => props.color};
+  transition: 0.3s;
+`;
+
+export const Image = styled.img`
+  height: 3rem;
+  border-radius: 50%;
+  margin-right: 1rem;
+`;
+
+export const Text = styled(Paragraph)`
+  font-weight: ${Bold};
+  color: ${props => props.color};
+`;
+
+export const LeftContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const RightContainer = styled.div``;

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/types.ts

@@ -0,0 +1,14 @@
+export type InputTypes = {
+  textColor: string;
+  titleColor: string;
+  bgColor: string;
+  picture?: string;
+  title?: string;
+  textLeft?: string;
+  textRight?: string;
+};
+
+export type StyledTagProps = {
+  bgColor: string;
+  color: string;
+};

src/ignitus-Shared/index.ts

@@ -137,6 +137,9 @@ export {
   UserSettingsSideNavigation,
 } from './ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components';
 
+export {
+  Notifications,
+} from './ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components';
 /**
  * ignitus-Templates
  */

src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/Components/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { Heading2, Heading4 } from '../../../../../ignitus-Shared';
+import * as C from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors';
+import { Interface } from '../../../../styles';
+import * as S from '../style';
+
+export const InterfaceNotifications: React.FC = () => (
+  <Interface>
+    <Heading2>Notifications</Heading2>
+    <hr />
+    <Heading4>Today</Heading4>
+    <S.StyledNotifications
+      textColor={C.Black}
+      titleColor={C.IgnitusBlue}
+      bgColor={C.White}
+      picture="https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png"
+      title="Davis Johnson"
+      textRight="is tracking your progress"
+    />
+    <S.StyledNotifications
+      textColor={C.Black}
+      titleColor={C.Orange}
+      bgColor={C.White}
+      title="3 mentors"
+      textLeft="We found"
+      textRight="that could help you with your journey"
+    />
+    <S.StyledNotifications
+      textColor={C.Black}
+      titleColor={C.IgnitusBlue}
+      bgColor={C.White}
+      picture="https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png"
+      title="Donald Kunkel"
+      textRight="wants to connect with you"
+    />
+    <S.StyledNotifications
+      textColor={C.Black}
+      titleColor={C.Orange}
+      bgColor={C.White}
+      title="3 offers"
+      textLeft="We found"
+      textRight="that could interest you"
+    />
+
+    <br />
+    <br />
+    <br />
+
+    <Heading4>Yesterday</Heading4>
+    <S.StyledNotifications
+      textColor={C.Black}
+      titleColor={C.IgnitusBlue}
+      background={C.White}
+      image="https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png"
+      title="Donald Kunkel"
+      textRight="wants to connect with you"
+    />
+    <S.StyledNotifications
+      textColor={C.Black}
+      titleColor={C.Orange}
+      background={C.White}
+      title="3 mentors"
+      textLeft="We found"
+      textRight="that could help you with your journey"
+    />
+  </Interface>
+);

src/ignitus-UserInterfaceBook/Components/Organisms/interfaceNotifications/style.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import { Notifications } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Notifications/Components';
+
+export const StyledNotifications = styled(Notifications)`
+  padding: 1rem;
+  height: 2rem;
+`;

src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts

@@ -215,6 +215,10 @@ export const allEdges: Edges[] = [
         title: 'Random Avatar',
         route: '/interface/avatar',
       },
+      {
+        title: 'Notifications',
+        route: '/interface/notifications',
+      },
     ],
   },
   {