From f6089fc0eae571cd2655c6a0b8c1caca6f2b0c15 Mon Sep 17 00:00:00 2001 From: Paarmita Date: Thu, 19 Mar 2020 22:25:06 +0100 Subject: [PATCH 01/41] Add buttons in UIKit --- .../Components/login.jsx | 3 - .../Components/Signup.jsx | 3 - .../ignitus-StudentLogin/Components/Login.jsx | 3 - .../Components/Signup.jsx | 3 - .../Components/dashBoardHeader.js | 5 - .../Components/Dashboard.js | 7 +- src/ignitus-Routes/privateRoutes/index.js | 4 +- src/ignitus-Routes/protectedRoutes/index.js | 2 - .../logo-Png/IgnitusBlackLogo.png | Bin 0 -> 18156 bytes .../logo-Png/IgnitusBlackLogoFull.png | Bin 0 -> 5267 bytes .../logo-Png/IgnitusBlueLogoFull.png | Bin 0 -> 7450 bytes .../logo-Png/IgnitusWhiteLogoFull.png | Bin 0 -> 5722 bytes .../logo-Svg/ignitusBlackLogoFull.svg | 19 +++ .../logo-Svg/ignitusBlueLogoFull.svg | 19 +++ .../logo-Svg/ignitusWhiteLogo.svg | 18 +++ .../logo-Svg/ignitusWhiteLogoFull.svg | 19 +++ .../ignitus-Atoms/atoms.ts | 58 ------- .../ignitus-Atoms/colors.ts | 5 +- .../ignitus-Buttons/Components/index.tsx | 152 ++++++++++++++++++ .../ignitus-NotFound/Components/index.tsx | 2 +- .../ignitus-Layout/ignitus-NotFound/style.ts | 3 +- .../Components/OppurtunityList.tsx | 5 - .../Components/index.tsx | 1 - .../Components/index.tsx | 31 ++++ .../ignitus-MessageSideNavigation/style.ts | 35 ++++ .../Components/index.tsx | 1 - .../errorBoundary/index.js | 1 - .../Components/index.tsx | 40 ++++- src/ignitus-UserInterfaceKit/styles.ts | 7 +- 29 files changed, 341 insertions(+), 105 deletions(-) create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Png/IgnitusBlackLogo.png create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Png/IgnitusBlackLogoFull.png create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Png/IgnitusBlueLogoFull.png create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Png/IgnitusWhiteLogoFull.png create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlackLogoFull.svg create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlueLogoFull.svg create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusWhiteLogo.svg create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusWhiteLogoFull.svg create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components/index.tsx create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts diff --git a/src/ignitus-Authentication/ignitus-ProfessorLogin/Components/login.jsx b/src/ignitus-Authentication/ignitus-ProfessorLogin/Components/login.jsx index 13b2c5b1..7163b364 100644 --- a/src/ignitus-Authentication/ignitus-ProfessorLogin/Components/login.jsx +++ b/src/ignitus-Authentication/ignitus-ProfessorLogin/Components/login.jsx @@ -1,6 +1,3 @@ -/* eslint-disable react/jsx-filename-extension */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import React, { useState } from 'react'; import { withErrorBoundary } from '../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary'; diff --git a/src/ignitus-Authentication/ignitus-ProfessorSignUp/Components/Signup.jsx b/src/ignitus-Authentication/ignitus-ProfessorSignUp/Components/Signup.jsx index 1d3cf2c6..042fa266 100644 --- a/src/ignitus-Authentication/ignitus-ProfessorSignUp/Components/Signup.jsx +++ b/src/ignitus-Authentication/ignitus-ProfessorSignUp/Components/Signup.jsx @@ -1,6 +1,3 @@ -/* eslint-disable react/jsx-filename-extension */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import React from 'react'; import { Link } from 'react-router-dom'; import * as t from './Constants'; diff --git a/src/ignitus-Authentication/ignitus-StudentLogin/Components/Login.jsx b/src/ignitus-Authentication/ignitus-StudentLogin/Components/Login.jsx index e8db3b6d..33893c76 100644 --- a/src/ignitus-Authentication/ignitus-StudentLogin/Components/Login.jsx +++ b/src/ignitus-Authentication/ignitus-StudentLogin/Components/Login.jsx @@ -1,6 +1,3 @@ -/* eslint-disable react/jsx-filename-extension */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import React, { useState } from 'react'; import isEmpty from 'lodash/isEmpty'; import PropTypes from 'prop-types'; diff --git a/src/ignitus-Authentication/ignitus-StudentSignUp/Components/Signup.jsx b/src/ignitus-Authentication/ignitus-StudentSignUp/Components/Signup.jsx index ef5e4109..b000785a 100644 --- a/src/ignitus-Authentication/ignitus-StudentSignUp/Components/Signup.jsx +++ b/src/ignitus-Authentication/ignitus-StudentSignUp/Components/Signup.jsx @@ -1,6 +1,3 @@ -/* eslint-disable react/jsx-filename-extension */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; diff --git a/src/ignitus-Dashboard/ignitus-DashboardHeader/Components/dashBoardHeader.js b/src/ignitus-Dashboard/ignitus-DashboardHeader/Components/dashBoardHeader.js index 130e0a38..ac300ff2 100644 --- a/src/ignitus-Dashboard/ignitus-DashboardHeader/Components/dashBoardHeader.js +++ b/src/ignitus-Dashboard/ignitus-DashboardHeader/Components/dashBoardHeader.js @@ -1,8 +1,3 @@ -/* eslint-disable react/prop-types */ -/* eslint-disable jsx-a11y/anchor-is-valid */ -/* eslint-disable react/jsx-filename-extension */ -/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import React from 'react'; import { Redirect, Link } from 'react-router-dom'; import { HashLink } from 'react-router-hash-link'; diff --git a/src/ignitus-Dashboard/ignitus-StudentDashboard/Components/Dashboard.js b/src/ignitus-Dashboard/ignitus-StudentDashboard/Components/Dashboard.js index 9441c3a3..30dbb7aa 100644 --- a/src/ignitus-Dashboard/ignitus-StudentDashboard/Components/Dashboard.js +++ b/src/ignitus-Dashboard/ignitus-StudentDashboard/Components/Dashboard.js @@ -1,10 +1,7 @@ -/* eslint-disable no-unused-expressions */ -/* eslint-disable jsx-a11y/accessible-emoji */ -/* eslint-disable react/jsx-filename-extension */ import React from 'react'; import '../Styles/style.scss'; -import {withErrorBoundary} from '../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary'; -import {WebsiteUnderConstruction} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components'; +import { withErrorBoundary } from '../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary'; +import { WebsiteUnderConstruction } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components'; const Dashboard = () => (
diff --git a/src/ignitus-Routes/privateRoutes/index.js b/src/ignitus-Routes/privateRoutes/index.js index 096cca82..9df6aa86 100644 --- a/src/ignitus-Routes/privateRoutes/index.js +++ b/src/ignitus-Routes/privateRoutes/index.js @@ -1,10 +1,8 @@ -/* eslint-disable react/jsx-filename-extension */ -/* eslint-disable react/destructuring-assignment */ + import React from 'react'; import { Redirect, Route } from 'react-router-dom'; import PropTypes from 'prop-types'; -// eslint-disable-next-line react/prefer-stateless-function const PrivateRoute = ({ Component }) => ( Pyzse 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 YD^&`abAyD^WdHyG07*qoM6N<$f{Hj&pa1{> literal 0 HcmV?d00001 diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Png/IgnitusWhiteLogoFull.png b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Png/IgnitusWhiteLogoFull.png new file mode 100644 index 0000000000000000000000000000000000000000..6f7d00b174867da4ddf0d4865ab59ce76c7990d7 GIT binary patch literal 5722 zcmV-g7NzNlP)CbA@D$g ze`Jf&{ho)mL;@fPk;lW~Z~&Mgh?tez3KT_AE|pRU?#gXnZUz)ZQ7(~E0On|U1VvGl zOQRHi3#{3LqA1Ep{s;5p+WAaE@eL@7qKsgUg7A~~{e3A6Z$MELT@fKqP!lSy{}UkmT5MwHpu%HSo;(bS>*Xr zP!vUZZSc?^u(Mn13BrZ5Kj{*L+zrp2bO|VmqMQQQ9Q?RxNqf&}cEYhr$UO2U$)$ZR}|%pLEF{bV>elwfM7wh zmjodnPhy3ZlP8t(VAE&Obkyr6@)}92)e&e#xkS)*HFuuS%L2lp%{Or6q+1EcNf_Nn zR?8KhNnn3NNP6k~Zg~aO3-Ohw#8TROQ zVm;;Vjko{7t!E&wD+Kp^ZW7ejeEiWlw&t{|4Jyi|g0drY7Dz_|W8YC;%IWT4eBBm8 z9gqd?q9xx0r&|kU+z8jZ21QXW8$9gRR!H4j($aPq5mLX>z9z0`f^l&Q_tN>XInY9E zKv5KhU`_5|9&bpPz=?yh^R^$|=2^1@MNt$N)|hslFpLS1dNWi5L_3GrzyMgdeThhy zctSAhx)epZV9?s)Hh4IIvJ9lH9Gp`a0NR0!90uT=J5;wNHmBq@?1qY>D5Jo71a?q2 z)6vw{&=af&PuhaGE?Co5;io9dac~6LP_1r1G(Xm(!>EEzQIuB$4@r9F_2&&o3o~pE ze(2)xilWFIOH-=K^#ob32s55Whu9+o7B(Z(ygBx@DvB~w(2fGft}fT7+#F?R>`#&T zr73V}jAn_lKVaqXJ*m(_JL0@U6^4p3U$73jm9qwxz(^c{wG#vq+5AjI84p6V=kFk`vp;k8uUqoFL1FKBpFe^u zE$8W{F~WI?H!bJB!#FZjO;Ay0$NwVI6y^3ux&7epBy2vG+ikgRoph$$c9DYMv-9~+ zh{M&`zR{nntE=x^kBVPA@@>jI1%JMU2+-R4+^Kcc4x4iO3brl4Deq6Gd__^t1w0%$ zsc^&KS1|}HyIU40M|6V5!|2iLmU>h+!M%`wA3C?E5ng-8GUwPr$XjWGRSZJo9CN$Z zdv2fJi%lttG6PVy#fgIfScm44BG9Z`gjLSRl9qZbB|*x^9z%lE6_hP?+6B%@*L@!l zl6g#pgeFA()?D~9@1(j93vqTv!D_QroFJgT3pEl@>K$F5!fFJz_1SN{~`#% z6cj}{Z&(;+o&e|-QQ8rxZ=8MCTy9M8RKr3q@%DGxCRwwS@}mbKQN-3r7a6hO>madro!!{u1XtBBtkl<($CwdAXg=$NUCNvBO}GwNrQ0fB?!-Y+TMd zU@NwFn^*7(pzM|4lH*LZ^_J^WjqnmcIYNv}(vtTs@GzK&bggbZ*e;-ZMWUH2C_kKo zmQI+UE(YTQd=R~a$0>mFizmmPHbPWEcp6~sPO;`~g)IxH<6*=YiEKc=r^s~cK-pig zo#2CphZ-tvWCNY04O@G@-;o+uz?a4gs%nK zZs!d)!)UqWD0Ex!a2{}oRLHk(JC~F0z9pSBgT+MDN17f;!ai%slcUv44a|f<8^5@= zh0TXM$EMcr|IQaVryEre9t|=23|aw}@(o8_#WfuIm5~8^3pNT2MW&(1EA+-&yXEkJ z!#8N>4u@-1i`Zjmwbra7&(`;a#M=L>0DGMqXb$oiun}tLA%5hxQ?~{IewdB3%Xmp{ zUEerP`@5HBQZ1bCcLT~S5$-AfcojW9_+0+tyiq6t4HD2zmI!G{s8PtQr@#o_24wER zj#8Sy@n->5*5h+o?v!1#qWZv%^a$OfbYJ})e63q4F}Gb(ZXcYom%Kfc$0;8P)@sD| z`2})GPRVHJag!iRz-fQ9F)$LpL3jpWAeq84c4KYem{~`#yLj+q~C7`&F8aGaEftJmopqVl@8;bdv7>>Y}a_x zk}h-3ontp^7y#ChtGl|~!~>p)rie%G8l$~eV%o&Vc;&2wG*mYAKwSU4>K>(ixwC)e zlx48p#Nm@;|GDVWIVyW+#%1n#TXvLn!|8J;U#Om;Oe4-#8hcfP{eI?b&^$rTjI{t z60qu~`yeOK>^@VPj}V|NpKcKP*yRgmU>bG5a?I_5uK8m}IV4ak=U&s2w&3mdg6Dve z2_k7ZUhscuJ~Ls!no2&>J;_}x5(>`((CKnTcfHUq7rP16rSQ&epuJ87Oh?xi0NfWs*cXCDf%jq#QSY&5Xw(U5N10{XEL_8I6$5!fHKe5=6U z-gh#M^bX1~hx?A}Sior@y>NyI>LQ}tX#^qGVeE4}^k1q*TRS0V>T*lVkH5h*0+D`H z(*Al0K(q$`%()KwJZARGrQrY0y&wF5;Or}Or1K6D%0Kf8`+fsuu88tzlpsVNAp<+S zokH!UPlAkQX?*VcChYlEYI{h2^z8~URCns4{l(uCu(KPgQ7{9FMB#n!J(w1FY4&w@ zknXpCVK{}bZ}32&M}Jq2<5P5ee<=!K-x7P;jD;7VD31mULbSeFl~}Qz zGw~0wdQAg5uI+NI!tj6%G=)ZVXfkfg)Z1N5G{Uc%*E|UgaFNnNw)?$f!>?kah7_6~ zZ9UZJHA}dgLw-;GTi$S`K-f<_4_d(Kvj(f7I5&CGF`1@>F^UZ-o9gdug0w_qQ9*QP~ptuJU}5MD&k1&o^zUqNY7h+_*vY)EAo z&a+I<>+J4LmLqT3Y?Z=c{LdID?E{Z({2^WcFD)l04T(lr+)LgjP&tr=9(xBIzhT7p$v_jJIjJIzKwhexVVG&fmv2puUSit;o zHFoN~yq&2>#}-)Lut}=gswHQ;dU2I)@x6cjzeJokbnFT2`nP8bH`W$fMlR>3^-cxW zk%C=ZA-3xA2B&r=O}qCrIDx4J*EtBn#Q99uW8mdnihhLw@V!&5$$je!E-7pv=d0|7 zq`XM?9et4=~;F{3R8~m($5od^jaSRc<#{2#b2Eb;#l;?&g z-r*D+;ri-97nIo|I=g~$Qs9WVq0HF)U3NQ(sqL4N8yDT;Ox84q+q)v^tousTR8v82K3x@K0((G z1E)hF>@(0#Lx`1a+!lmFI+nmNlSTr=DWKLS2MJUMNsu30rwYQ$MY=h9g_m-i&_fQ@ zrX{<0jGbS%aAv-k0j+9^5Mv)Y@)+-X*J!bH4jOFeB?z5~7(TJurCX2Z1==}K?hqtF zde9EqHNIS=2k66)Fh?9%m$bvKhb#sIR;$dpn{A*U(oH|c&SfI^bs^QO?~8|oL*bX( z@tghbeQ(nS2}$5B2bep^Ma2mFhjz8^IO0_=`2LY%0!(qQ9v6&X;5~~;ryN2a_ATw! zJ3t27mBTVT4mtJ^hA1!C^9Tb8T-T6Ar5=QGhOEi*7+W8df9Evf9Q&ca1KP#SGHj=F zP_3nmK7l;0F>+C`D>y;WF0c}c>{4)?z~{z-upQ!Ox=RJ^lp?z63b0)b`cIlk(vfuw z_KjJ2>o0iUSKr@{&k^dfR6bq*KAr+>T0He zGH&_Y@Ay1a)*sdNU>*FS(%k;;C~pH+yP`Cv+$jF$E!K0d4WFaZJVFou6QAn?)PXC$ zh8)Y$&ghZ^JEi{yb>NE+Lfz@u`!1hN7F3}Z;s)$&v!bdaU-PwdPFJ}906BU&Ine(K zb$j3PB#o*LIkaouPgOm@@k4d$LfYd}$Vcfv&cf`1su7L`8=(|{(}D-FJG6Squ*)+ao5~h9|^S)o;lnVpa-q!YZt*f`c5NnpzYsIX?sE2MRbK% z<2S9ehuHIWrSDT7x6eXK?`SnYB5ZQOaw6(rz`pG01xBBL@J4po?^hEA1wm`-sLoT> z*FY`YzwxH@y(h+Kb6;C&ls81Uu2Lu`(Iu4g02J)hQhBn_Ww3)TxTRCaeMyQN|TwElfWy|gnbpspN*z`86k<`t+#gQK$_?0E*BI<8H09>l~J&#J_*CA?RN#(xxjy@ z5LAwh3PNQxJT)#YKa$fcbzz5&?vlXUf}IrqcF1f9MHzzH2$jiT->-YxoLMQ=G`L@( zIqi%#GH+16?^olO@>G;Ts3261Ld=@bigGGw*H}@Mi$?{aq9_;7ISax96h%=YP>oPg zl#53Np`s`kj|xIXQ7#@8go>hEJf|uMi^yYbQ?LF5MNyQwf_9PUTnN9vcf&iOUBG!C zNOuj2q9_rZgXxGvGz+Y)9)+Vq>4n;<$P)8r?N&o-= M07*qoM6N<$f^cLhga7~l literal 0 HcmV?d00001 diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlackLogoFull.svg b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlackLogoFull.svg new file mode 100644 index 00000000..8e6c99ca --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlackLogoFull.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlueLogoFull.svg b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlueLogoFull.svg new file mode 100644 index 00000000..8f0ec043 --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlueLogoFull.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusWhiteLogo.svg b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusWhiteLogo.svg new file mode 100644 index 00000000..88920cee --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusWhiteLogo.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusWhiteLogoFull.svg b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusWhiteLogoFull.svg new file mode 100644 index 00000000..beed74f6 --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/logo-Svg/ignitusWhiteLogoFull.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts index 03a84fa9..cefbdf9d 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts @@ -2,17 +2,9 @@ import styled from '@emotion/styled'; import * as C from './colors'; import * as F from './fonts'; -type InputProps = { - primary: true; -}; - const breakpoints = [576, 768, 992, 1200]; const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`); -const colors = { - ignitusBlue: C.IgnitusBlue, -}; - export const Heading1 = styled.h1` font-weight: ${F.Medium}; font-size: ${F.XXXL}; @@ -67,56 +59,6 @@ export const Separator = styled.hr` color: ${C.Grey1}; `; -export const Button = styled.button` - border-radius: 5px; - padding: 15px 22px; - text-align: center; - text-decoration: none; - transition: all 0.3s ease; - display: inline-block; - cursor: pointer; - line-height: 1rem; - margin: 10px; -`; - -export const PrimaryButton = styled(Button)` - color: ${C.White}; - font-size: ${F.MD}; - font-weight: ${F.Normal}; - background-color: ${props => - props.primary ? colors['ignitusBlue'] : 'null'}; - border: none; - &:hover, - &:focus { - text-decoration: none; - background-color: ${C.SecondaryColor}; - color: ${C.IgnitusBlue}; - font-size: ${F.MD}; - } -`; - -export const SecondaryButton = styled(Button)` - color: ${C.IgnitusBlue}; - font-size: ${F.MD}; - background-color: ${C.White}; - border: 2px solid ${C.IgnitusBlue}; -`; - -export const GreyButton = styled(Button)` - color: ${C.IgnitusBlue}; - font-size: ${F.MD}; - line-height: 1rem; - background-color: ${C.GreyLight}; - border: none; - &:hover, - &:focus { - text-decoration: none; - background-color: ${C.Grey1}; - color: ${C.IgnitusBlue}; - font-size: ${F.MD}; - } -`; - export const Card = styled.a` display: block; height: auto; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors.ts index 5289b4f9..a9fe5f8b 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors.ts @@ -8,8 +8,9 @@ export const GreySecondaryText: string = '#4D4D4D'; export const GreyLight: string = '#E0E0E0'; export const Grey1: string = '#9C9C9C'; export const Grey2: string = '#C4C4C4'; -export const Red: string = '#FF4444'; -export const Green: string = '#219653'; +export const Red: string = '#dd3030'; +export const Green: string = '#209653'; +export const Yellow: string = '#ffd747'; export const OtherBlue: string = '#7272F4'; export const TwitterIconColor: string = ' #1dcaff'; export const LinkedinIconColor: string = '#2867B2'; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx new file mode 100644 index 00000000..f119fb4a --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx @@ -0,0 +1,152 @@ +import styled from '@emotion/styled'; +import * as C from '../../colors'; +import * as F from '../../fonts'; + +export const Button = styled.button` + padding: 16px 32px; + text-align: center; + text-decoration: none; + transition: all 0.3s ease; + display: inline-block; + cursor: pointer; + border-radius: 5px; + line-height: 1rem; + margin: 5px; + border: none; + font-size: ${F.MD}; + font-weight: ${F.Normal}; + &:hover, + &:focus { + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.24); + } +`; + +export const PrimaryButton = styled(Button)` + color: ${C.White}; + background-color: ${C.IgnitusBlue}; + &:hover, + &:focus { + background-color: ${C.SecondaryColor}; + color: ${C.IgnitusBlue}; +} +`; + +export const SecondaryButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: ${C.White}; + border: 2px solid ${C.IgnitusBlue}; +`; + +export const WhiteButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: ${C.White}; + &:hover, +`; + +export const GreyButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: ${C.GreyLight}; + border: none; + &:hover, + &:focus { + background-color: ${C.Grey2}; + color: ${C.IgnitusBlue}; + } +`; + +export const OrangeButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: ${C.SecondaryColor}; + border: none; +`; + +export const DisabledButton = styled(Button)` + color: ${C.GreySecondaryText}; + background-color: ${C.GreyLight}; + border: none; + cursor: default; +`; + +export const DangerButton = styled(Button)` + color: ${C.White}; + background-color: ${C.Red}; + border: none; +`; + +export const GreenButton = styled(Button)` + color: ${C.White}; + background-color: ${C.Green}; + border: none; +`; + +export const YellowButton = styled(Button)` + color: ${C.GreySecondaryText}; + background-color: ${C.Yellow}; + border: none; +`; + + +export const TextButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: inherit; + border: none; + &:hover, + &:focus { + background-color: ${C.GreyLight}; + color: ${C.IgnitusBlue}; + } +`; + + +export const TextButtonUnderline = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: inherit; + border: none; + text-decoration: underline; + &:hover, + &:focus { + background-color: ${C.GreyLight}; + color: ${C.IgnitusBlue}; + } +`; + + +export const StyledButtonBottomRight = styled(Button)` +color: ${C.White}; +background-color: ${C.IgnitusBlue}; +border-radius: 0px 30px; +&:hover, +&:focus { + background-color: ${C.SecondaryColor}; + color: ${C.IgnitusBlue}; +} +`; + +export const StyledButtonTopLeft = styled(Button)` +color: ${C.White}; +background-color: ${C.IgnitusBlue}; +border-radius: 30px 0px; +&:hover, +&:focus { + background-color: ${C.SecondaryColor}; + color: ${C.IgnitusBlue}; +} +`; + +export const RoundedPrimaryButton = styled(PrimaryButton)` + border-radius: 30px; +`; + +export const MediumPrimaryButton = styled(PrimaryButton)` + padding: 8px 20px; + font-size: ${F.SM}; + border-radius: 3px; +} +`; + +export const SmallPrimaryButton = styled(PrimaryButton)` + padding: 4px 15px; + font-size: ${F.XS}; + border-radius: 3px; +} +`; \ No newline at end of file diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index.tsx index 746d70cf..0caecf4a 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index.tsx @@ -16,7 +16,7 @@ export const Notfound = () => ( The page you are looking for is not available! 🔨 - + Home Page diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts index 2b4f0dc4..a4fcbb75 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import {keyframes} from '@emotion/core'; import * as C from '../../ignitus-Atoms/colors'; import {SM} from '../../ignitus-Atoms/fonts'; -import {Paragraph, PrimaryButton} from '../../ignitus-Atoms/atoms'; +import {Paragraph} from '../../ignitus-Atoms/atoms'; +import {PrimaryButton} from '../../ignitus-Atoms/ignitus-Buttons/Components/index' export const eye = keyframes` 0% ,30% , 55%, 90% , 100% { diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList.tsx index b328e91a..ea7a323e 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList.tsx @@ -1,8 +1,3 @@ -/* eslint-disable react/prop-types */ -/* eslint-disable jsx-a11y/anchor-is-valid */ -/* eslint-disable react/jsx-filename-extension */ -/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import React from 'react'; import * as S from '../styles'; import {withErrorBoundary} from '../../../../ignitus-ErrorHandlingComponents/errorBoundary'; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index.tsx index 4bc30414..599a75ad 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/jsx-filename-extension */ import React from 'react'; import * as S from '../style'; import {AppIcon} from '../../../../../types/iconsTypes/enums'; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components/index.tsx new file mode 100644 index 00000000..5eddda0f --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import * as S from '../style'; + +type props = { + text: string; + border?: boolean; + marginTop?: boolean; + marginBottom?: boolean; +}; + +export default function MessageSideNavigation() { + return ( + + + + + + + ); +} + +const Layer = ({ + text, + border = true, + marginTop = false, + marginBottom = false, +}: props) => ( + + {text} + +); diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts new file mode 100644 index 00000000..a031733c --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts @@ -0,0 +1,35 @@ +import styled from '@emotion/styled'; +import * as C from '../../../ignitus-Atoms/colors'; +import {flexibleColDiv} from '../../../ignitus-Atoms/atoms'; +import {MD, Normal} from '../../../ignitus-Atoms/fonts'; + +type Props = { + border: boolean; + marginTop: boolean; + marginBottom: boolean; +}; + +export const MessageContainer = styled(flexibleColDiv)` + background: ${C.White}; + border-radius: 16px; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); + width: 12rem; +`; + +export const Layer = styled.div` + border-bottom: ${props => + props.border ? `1px solid ${C.GreyLight}` : 'null'}; + color: ${C.IgnitusBlue}; + cursor: pointer; + font-size: ${MD}; + font-weight: ${Normal}; + padding: 1rem; + margin-top: ${props => (props.marginTop ? '0.5rem' : 'none')}; + margin-bottom: ${props => (props.marginBottom ? '0.5rem' : 'none')}; + text-align: center; + width: 100%; + &:hover { + background-color: ${C.IgnitusBlue}; + color: ${C.White}; + } +`; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components/index.tsx index f56ae6bb..9336aad0 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components/index.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/jsx-filename-extension */ import React from 'react'; import * as S from '../style'; diff --git a/src/ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary/index.js b/src/ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary/index.js index ad7e8f6e..d615f206 100644 --- a/src/ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary/index.js +++ b/src/ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary/index.js @@ -1,4 +1,3 @@ -/* eslint-disable react/jsx-filename-extension */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/src/ignitus-UserInterfaceKit/Components/index.tsx b/src/ignitus-UserInterfaceKit/Components/index.tsx index d6bdb4d7..b2d00d7d 100644 --- a/src/ignitus-UserInterfaceKit/Components/index.tsx +++ b/src/ignitus-UserInterfaceKit/Components/index.tsx @@ -1,9 +1,11 @@ import React from 'react'; import * as A from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +import * as Button from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index'; import * as K from '../styles'; import UserSettingsSideNavigation from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components'; import {Opportunity} from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; import SideNavigation from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components'; +import MessageSideNavigation from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components'; export const UIkit = () => ( @@ -13,7 +15,6 @@ export const UIkit = () => ( Colors Icons - Typography Heading1 Heading2 @@ -32,11 +33,37 @@ export const UIkit = () => ( Separator Progress bar + {/* https://miro.medium.com/max/2800/1*rPFTtW01pNiPF7nwuJER5Q.png */} Buttons - Primary Button - Secondary Button - Grey Button - + Primary Button + Secondary Button + Grey Button + Orange Button + White Button + Medium Sized Buttons + Medium Primary Button + Small Sized Buttons + Small Primary Button + Button States + Disabled State + Danger State + Yellow Button + Green Button + Text Button + Text Button + Text Button + Styled Buttons + Styled Button Bottom Right + Styled Button Top Left + Rounded Button + Rounded Primary Button + Social Buttons + Button with Icons + Floating Action Button + Icon with text link + Icon Button + Text link + Text Link Molecules Input field with buttons Overlay @@ -49,8 +76,8 @@ export const UIkit = () => ( + - Opportunity list Forms @@ -59,7 +86,6 @@ export const UIkit = () => ( Templates Profile side section Forms - Filter with tags Posts Cards with different formats diff --git a/src/ignitus-UserInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/styles.ts index 7e1e3fe4..f76041f5 100644 --- a/src/ignitus-UserInterfaceKit/styles.ts +++ b/src/ignitus-UserInterfaceKit/styles.ts @@ -24,6 +24,11 @@ export const Heading4 = styled(A.Heading4)` color: ${C.GreyText}; `; +export const Heading6 = styled(A.Heading6)` + margin: 10px 0; + color: ${C.GreyText}; +`; + export const Card = styled(A.Card)` width: 60%; `; @@ -45,5 +50,5 @@ export const AngelList = styled(AngelListIcon)` export const NavigationWrapper = styled.div` display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; `; From ca949a0c6b12d565ad857b386dae77c630794167 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 01:00:17 +0100 Subject: [PATCH 02/41] =?UTF-8?q?Toggle=20Hook=20added=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-CoreTeam/Styles/index.ts | 2 +- .../ignitus-Assets/ignitus-Icons/icon.tsx | 56 ------------------- .../ignitus-DashboardSideNavigation/style.ts | 2 +- .../ignitus-Utilities/Components/icon.tsx | 56 +++++++++++++++++++ .../reactHooks/toogleHook.ts | 15 +++++ .../Components/sideNavigation.tsx | 1 + 6 files changed, 74 insertions(+), 58 deletions(-) delete mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/icon.tsx create mode 100644 src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx create mode 100644 src/ignitus-Shared/ignitus-Utilities/reactHooks/toogleHook.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/sideNavigation.tsx diff --git a/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts b/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts index 3874ae2a..adc6577b 100644 --- a/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts +++ b/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; import * as T from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; -import Icon from "../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/icon"; +import Icon from "../../../ignitus-Shared/ignitus-Utilities/Components/icon"; type LinkWrapperProps = { toggle: boolean; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/icon.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/icon.tsx deleted file mode 100644 index d5589c43..00000000 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/icon.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, {HTMLAttributes} from 'react'; -import TwitterIcon from './twitterIcon/twitterIcon'; -import LinkedInIcon from './linkedInIcon/linkedInIcon'; -import AngelListIcon from './angelListIcon/angelListIcon'; -import ChevronIcon from './chevronIcon/chevronIcon'; -import PlusIcon from './plusIcon/plusIcon'; -import ApplyIcon from './applyIcon/applyIcon'; -import HeartIcon from './heartIcon/heartIcon'; -import {AppIcon} from '../../../types/iconsTypes/enums'; -import MessageIcon from './messageIcon/messageIcon'; -import SaveIcon from './saveIcon/saveIcon'; -import NetworkIcon from './networkIcon'; -import MentorsIcon from './mentorsIcon/mentorsIcon'; - -type Props = { - name: AppIcon; -} & HTMLAttributes; - -const Icon = ({name, ...rest}: Props) => { - switch (name) { - case AppIcon.AngelListIcon: - return ; - - case AppIcon.ApplyIcon: - return ; - - case AppIcon.Chevron: - return ; - - case AppIcon.HeartIcon: - return ; - - case AppIcon.LinkedInIcon: - return ; - - case AppIcon.PlusIcon: - return ; - - case AppIcon.TwitterIcon: - return ; - - case AppIcon.MessageIcon: - return ; - - case AppIcon.SaveIcon: - return ; - - case AppIcon.NetworkIcon: - return ; - - case AppIcon.MentorsIcon: - return ; - } -}; - -export default Icon; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts index c65d07aa..1a2de052 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import * as C from '../../../ignitus-Atoms/colors'; import {flexibleColDiv} from '../../../ignitus-Atoms/atoms'; import {MD, Normal} from '../../../ignitus-Atoms/fonts'; -import Icon from '../../../ignitus-Assets/ignitus-Icons/icon'; +import Icon from '../../../../ignitus-Utilities/Components/icon'; type Props = { border: boolean; diff --git a/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx b/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx new file mode 100644 index 00000000..e8dd6c9e --- /dev/null +++ b/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx @@ -0,0 +1,56 @@ +import React, {HTMLAttributes} from 'react'; +import TwitterIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/twitterIcon/twitterIcon'; +import LinkedInIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/linkedInIcon/linkedInIcon'; +import AngelListIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/angelListIcon/angelListIcon'; +import ChevronIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/chevronIcon/chevronIcon'; +import PlusIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/plusIcon/plusIcon'; +import ApplyIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/applyIcon/applyIcon'; +import HeartIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/heartIcon/heartIcon'; +import {AppIcon} from '../../types/iconsTypes/enums'; +import MessageIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/messageIcon/messageIcon'; +import SaveIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/saveIcon/saveIcon'; +import NetworkIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/networkIcon'; +import MentorsIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/mentorsIcon/mentorsIcon'; + +type Props = { + name: AppIcon; +} & HTMLAttributes; + +const Icon = ({name, ...rest}: Props) => { + switch (name) { + case AppIcon.AngelListIcon: + return ; + + case AppIcon.ApplyIcon: + return ; + + case AppIcon.Chevron: + return ; + + case AppIcon.HeartIcon: + return ; + + case AppIcon.LinkedInIcon: + return ; + + case AppIcon.PlusIcon: + return ; + + case AppIcon.TwitterIcon: + return ; + + case AppIcon.MessageIcon: + return ; + + case AppIcon.SaveIcon: + return ; + + case AppIcon.NetworkIcon: + return ; + + case AppIcon.MentorsIcon: + return ; + } +}; + +export default Icon; diff --git a/src/ignitus-Shared/ignitus-Utilities/reactHooks/toogleHook.ts b/src/ignitus-Shared/ignitus-Utilities/reactHooks/toogleHook.ts new file mode 100644 index 00000000..07d9ebea --- /dev/null +++ b/src/ignitus-Shared/ignitus-Utilities/reactHooks/toogleHook.ts @@ -0,0 +1,15 @@ +import React from 'react'; + +type UseToggleReturn = [boolean, () => void]; + +const useToggle = (inititalValue = false): UseToggleReturn => { + const [value, setValue] = React.useState(inititalValue); + + const toggleValue = () => { + setValue(!value); + }; + + return [value, toggleValue]; +}; + +export default useToggle; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation.tsx new file mode 100644 index 00000000..35953e26 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation.tsx @@ -0,0 +1 @@ +export default{} \ No newline at end of file From 8e6148c38cfec4a269c89ac3241cb81844acfa3b Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 13:01:06 +0100 Subject: [PATCH 03/41] =?UTF-8?q?Refactoring=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-DashboardSideNavigation/style.ts | 17 ++- .../ignitus-MessageSideNavigation/style.ts | 13 +- .../style.ts | 13 +- .../sideNavigation/KitSideNavigation.tsx | 10 ++ .../Components/sideNavigation/style.ts | 7 ++ .../Components/userInterfaceKit/index.tsx | 111 ++++++++++++++++++ .../Components/userInterfaceKit/styles.ts | 63 ++++++++++ 7 files changed, 211 insertions(+), 23 deletions(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts index 1a2de052..88168541 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import * as C from '../../../ignitus-Atoms/colors'; +import {White, IgnitusBlue, GreyLight} from '../../../ignitus-Atoms/colors'; import {flexibleColDiv} from '../../../ignitus-Atoms/atoms'; import {MD, Normal} from '../../../ignitus-Atoms/fonts'; import Icon from '../../../../ignitus-Utilities/Components/icon'; @@ -11,16 +11,15 @@ type Props = { }; export const SettingsContainer = styled(flexibleColDiv)` - background: ${C.White}; + background: ${White}; border-radius: 16px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); width: 12rem; `; export const Layer = styled.div` - border-bottom: ${props => - props.border ? `1px solid ${C.GreyLight}` : 'null'}; - color: ${C.IgnitusBlue}; + border-bottom: ${props => (props.border ? `1px solid ${GreyLight}` : 'null')}; + color: ${IgnitusBlue}; cursor: pointer; font-size: ${MD}; font-weight: ${Normal}; @@ -31,10 +30,10 @@ export const Layer = styled.div` flex-direction: row; width: 100%; &:hover { - background-color: ${C.IgnitusBlue}; - color: ${C.White}; + background-color: ${IgnitusBlue}; + color: ${White}; svg { - fill: ${C.White}; + fill: ${White}; } } `; @@ -42,7 +41,7 @@ export const Layer = styled.div` export const SideNavIcon = styled(Icon)` height: 1.5rem; width: 1.5rem; - fill: ${C.IgnitusBlue}; + fill: ${IgnitusBlue}; `; export const styledParagraph = styled.p` diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts index a031733c..c34b628e 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import * as C from '../../../ignitus-Atoms/colors'; +import {White, IgnitusBlue, GreyLight} from '../../../ignitus-Atoms/colors'; import {flexibleColDiv} from '../../../ignitus-Atoms/atoms'; import {MD, Normal} from '../../../ignitus-Atoms/fonts'; @@ -10,16 +10,15 @@ type Props = { }; export const MessageContainer = styled(flexibleColDiv)` - background: ${C.White}; + background: ${White}; border-radius: 16px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); width: 12rem; `; export const Layer = styled.div` - border-bottom: ${props => - props.border ? `1px solid ${C.GreyLight}` : 'null'}; - color: ${C.IgnitusBlue}; + border-bottom: ${props => (props.border ? `1px solid ${GreyLight}` : 'null')}; + color: ${IgnitusBlue}; cursor: pointer; font-size: ${MD}; font-weight: ${Normal}; @@ -29,7 +28,7 @@ export const Layer = styled.div` text-align: center; width: 100%; &:hover { - background-color: ${C.IgnitusBlue}; - color: ${C.White}; + background-color: ${IgnitusBlue}; + color: ${White}; } `; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts index 54c8a446..0f21c84e 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import * as C from '../../../ignitus-Atoms/colors'; +import {White, GreyLight, IgnitusBlue} from '../../../ignitus-Atoms/colors'; import {flexibleColDiv} from '../../../ignitus-Atoms/atoms'; import {MD, Normal} from '../../../ignitus-Atoms/fonts'; @@ -10,16 +10,15 @@ type Props = { }; export const SettingsContainer = styled(flexibleColDiv)` - background: ${C.White}; + background: ${White}; border-radius: 16px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); width: 12rem; `; export const Layer = styled.div` - border-bottom: ${props => - props.border ? `1px solid ${C.GreyLight}` : 'null'}; - color: ${C.IgnitusBlue}; + border-bottom: ${props => (props.border ? `1px solid ${GreyLight}` : 'null')}; + color: ${IgnitusBlue}; cursor: pointer; font-size: ${MD}; font-weight: ${Normal}; @@ -29,7 +28,7 @@ export const Layer = styled.div` text-align: center; width: 100%; &:hover { - background-color: ${C.IgnitusBlue}; - color: ${C.White}; + background-color: ${IgnitusBlue}; + color: ${White}; } `; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx new file mode 100644 index 00000000..52f0eaae --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import * as S from './style'; + +class KitSideNavigation extends React.Component { + render() { + return ; + } +} + +export default KitSideNavigation; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts new file mode 100644 index 00000000..bbceb66d --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +export const NavigationContainer = styled.nav` + width: 15rem; + height: 45rem; + background: black; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx new file mode 100644 index 00000000..ac4f422e --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import * as A from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +import * as Button from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index'; +import * as K from './styles'; +import UserSettingsSideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components'; +import {Opportunity} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; +import SideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components'; +import MessageSideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components'; +import KitSideNavigation from '../sideNavigation/KitSideNavigation'; + +export const UIkit = () => ( + + + + + + Ignitus UIKit + Atoms + Colors + Icons + + Typography + Heading1 + Heading2 + Heading3 + Heading4 + Heading5 + Heading6 + Paragraph + Checkboxes + Radio buttons + Input Fields + Dropdowns + Tags + Card + Card + Separator + + Progress bar + {/* https://miro.medium.com/max/2800/1*rPFTtW01pNiPF7nwuJER5Q.png */} + Buttons + Primary Button + Secondary Button + Grey Button + Orange Button + White Button + Medium Sized Buttons + + {' '} + Medium Primary Button{' '} + + Small Sized Buttons + + {' '} + Small Primary Button{' '} + + Button States + Disabled State + Danger State + Yellow Button + Green Button + Text Button + Text Button + Text Button + Styled Buttons + + {' '} + Styled Button Bottom Right{' '} + + + {' '} + Styled Button Top Left{' '} + + Rounded Button + + {' '} + Rounded Primary Button{' '} + + Social Buttons + Button with Icons + Floating Action Button + Icon with text link + Icon Button + Text link + Text Link + Molecules + Input field with buttons + Overlay + Card with details + + Organisms + Navigations + Footer + Sidebars + + + + + + Opportunity list + + Forms + Filter with tags + + Templates + Profile side section + Forms + Posts Cards with different formats + + +); diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts new file mode 100644 index 00000000..9ce336f5 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts @@ -0,0 +1,63 @@ +import styled from '@emotion/styled'; +import * as A from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; +import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; +import TwitterIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/twitterIcon/twitterIcon'; +import LinkedInIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/linkedInIcon/linkedInIcon'; +import AngelListIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/angelListIcon/angelListIcon'; + +export const UIKitContainer = styled.div` + display: none; +`; +export const SideNavigationContainer = styled.div` +`; + +export const Container = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 22rem; +`; + +export const Heading1 = styled(A.Heading1)` + text-align: center; +`; + +export const Heading2 = styled(A.Heading2)` + margin: 20px 0; + font-weight: ${F.Medium}; +`; + +export const Heading4 = styled(A.Heading4)` + margin: 20px 0; + color: ${C.GreyText}; +`; + +export const Heading6 = styled(A.Heading6)` + margin: 10px 0; + color: ${C.GreyText}; +`; + +export const Card = styled(A.Card)` + width: 60%; +`; + +export const Twitter = styled(TwitterIcon)` + height: 3rem; + &:hover { + fill: red; + } +`; + +export const LinkedIn = styled(LinkedInIcon)` + height: 3rem; +`; + +export const AngelList = styled(AngelListIcon)` + height: 3rem; +`; + +export const NavigationWrapper = styled.div` + display: grid; + grid-template-columns: 1fr 1fr 1fr; +`; From 7c01df9bf719aa13156afd23469dc1b4c3db7a9d Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 13:01:31 +0100 Subject: [PATCH 04/41] =?UTF-8?q?Side=20Navigation=20WIP=20=F0=9F=9A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ignitus-Routes/publicRoutes/index.js | 2 +- .../Components/index.tsx | 92 ------------------- .../Components/sideNavigation.tsx | 1 - .../sideNavigation/KitSideNavigation.tsx | 7 +- .../Components/sideNavigation/style.ts | 8 +- .../Components/userInterfaceKit/styles.ts | 2 +- src/ignitus-UserInterfaceKit/styles.ts | 54 ----------- 7 files changed, 15 insertions(+), 151 deletions(-) delete mode 100644 src/ignitus-UserInterfaceKit/Components/index.tsx delete mode 100644 src/ignitus-UserInterfaceKit/Components/sideNavigation.tsx delete mode 100644 src/ignitus-UserInterfaceKit/styles.ts diff --git a/src/ignitus-Routes/publicRoutes/index.js b/src/ignitus-Routes/publicRoutes/index.js index f59c8ef8..7ec84f80 100644 --- a/src/ignitus-Routes/publicRoutes/index.js +++ b/src/ignitus-Routes/publicRoutes/index.js @@ -21,7 +21,7 @@ import Loadable from "react-loadable"; import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; import JobConfirmation from "../../ignitus-Careers/ignitus-JobConfirmation"; -import { UIkit } from "../../ignitus-UserInterfaceKit/Components"; +import { UIkit } from "../../ignitus-UserInterfaceKit/Components/userInterfaceKit"; // RouteBased CodeSplitting. diff --git a/src/ignitus-UserInterfaceKit/Components/index.tsx b/src/ignitus-UserInterfaceKit/Components/index.tsx deleted file mode 100644 index b2d00d7d..00000000 --- a/src/ignitus-UserInterfaceKit/Components/index.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; -import * as A from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; -import * as Button from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index'; -import * as K from '../styles'; -import UserSettingsSideNavigation from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components'; -import {Opportunity} from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; -import SideNavigation from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components'; -import MessageSideNavigation from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components'; - -export const UIkit = () => ( - - - Ignitus UIKit - Atoms - Colors - Icons - - Typography - Heading1 - Heading2 - Heading3 - Heading4 - Heading5 - Heading6 - Paragraph - Checkboxes - Radio buttons - Input Fields - Dropdowns - Tags - Card - Card - Separator - - Progress bar - {/* https://miro.medium.com/max/2800/1*rPFTtW01pNiPF7nwuJER5Q.png */} - Buttons - Primary Button - Secondary Button - Grey Button - Orange Button - White Button - Medium Sized Buttons - Medium Primary Button - Small Sized Buttons - Small Primary Button - Button States - Disabled State - Danger State - Yellow Button - Green Button - Text Button - Text Button - Text Button - Styled Buttons - Styled Button Bottom Right - Styled Button Top Left - Rounded Button - Rounded Primary Button - Social Buttons - Button with Icons - Floating Action Button - Icon with text link - Icon Button - Text link - Text Link - Molecules - Input field with buttons - Overlay - Card with details - - Organisms - Navigations - Footer - Sidebars - - - - - - Opportunity list - - Forms - Filter with tags - - Templates - Profile side section - Forms - Posts Cards with different formats - - -); diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation.tsx deleted file mode 100644 index 35953e26..00000000 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation.tsx +++ /dev/null @@ -1 +0,0 @@ -export default{} \ No newline at end of file diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx index 52f0eaae..2ee42326 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx @@ -1,9 +1,14 @@ import React from 'react'; import * as S from './style'; +import {Heading2} from '../userInterfaceKit/styles'; class KitSideNavigation extends React.Component { render() { - return ; + return ( + + Atoms + + ); } } diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts index bbceb66d..17b40acc 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts @@ -1,7 +1,13 @@ import styled from '@emotion/styled'; +import {Heading3} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; export const NavigationContainer = styled.nav` width: 15rem; - height: 45rem; + height: 28rem; background: black; `; + +export const Heading = styled(Heading3)` + color: ${C.White}; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts index 9ce336f5..933aefa3 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts @@ -16,7 +16,7 @@ export const Container = styled.div` display: flex; flex-direction: row; justify-content: space-between; - margin-top: 22rem; + margin-top: 4rem; `; export const Heading1 = styled(A.Heading1)` diff --git a/src/ignitus-UserInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/styles.ts deleted file mode 100644 index f76041f5..00000000 --- a/src/ignitus-UserInterfaceKit/styles.ts +++ /dev/null @@ -1,54 +0,0 @@ -import styled from '@emotion/styled'; -import * as A from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; -import * as C from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; -import * as F from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; -import TwitterIcon from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/twitterIcon/twitterIcon'; -import LinkedInIcon from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/linkedInIcon/linkedInIcon'; -import AngelListIcon from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/angelListIcon/angelListIcon'; - -export const UIKitContainer = styled.div` - padding: 5em; -`; - -export const Heading1 = styled(A.Heading1)` - text-align: center; -`; - -export const Heading2 = styled(A.Heading2)` - margin: 20px 0; - font-weight: ${F.Medium}; -`; - -export const Heading4 = styled(A.Heading4)` - margin: 20px 0; - color: ${C.GreyText}; -`; - -export const Heading6 = styled(A.Heading6)` - margin: 10px 0; - color: ${C.GreyText}; -`; - -export const Card = styled(A.Card)` - width: 60%; -`; - -export const Twitter = styled(TwitterIcon)` - height: 3rem; - &:hover { - fill: red; - } -`; - -export const LinkedIn = styled(LinkedInIcon)` - height: 3rem; -`; - -export const AngelList = styled(AngelListIcon)` - height: 3rem; -`; - -export const NavigationWrapper = styled.div` - display: grid; - grid-template-columns: 1fr 1fr 1fr; -`; From 0fe06d39f331d76837607256dead6bb761f40d97 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 14:44:27 +0100 Subject: [PATCH 05/41] =?UTF-8?q?UIKIT=20navigation=20UI=20updates=20?= =?UTF-8?q?=E2=98=98=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/KitSideNavigation.tsx | 23 +++ .../sideNavigation/Components/index.ts | 2 + .../sideNavigation/KitSideNavigation.tsx | 15 -- .../Components/sideNavigation/constants.ts | 137 ++++++++++++++++++ .../Components/sideNavigation/style.ts | 12 +- .../Components/sideNavigation/types.ts | 1 + .../Components/userInterfaceKit/index.tsx | 2 +- 7 files changed, 175 insertions(+), 17 deletions(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/index.ts delete mode 100644 src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx new file mode 100644 index 00000000..d7810202 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import * as S from '../style'; +import {edges} from '../constants'; + +class KitSideNavigation extends React.Component { + render() { + const navigation = edges.map(menuItem => ( + + {menuItem.node.title} + {menuItem.node.children ? ( + + {menuItem.node.children.map(({title}) => ( + {title} + ))} + + ) : null} + + )); + return {navigation}; + } +} + +export default KitSideNavigation; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/index.ts new file mode 100644 index 00000000..8ef02bc1 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/index.ts @@ -0,0 +1,2 @@ + +export { default as KitSideNavigation } from './KitSideNavigation'; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx deleted file mode 100644 index 2ee42326..00000000 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/KitSideNavigation.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import * as S from './style'; -import {Heading2} from '../userInterfaceKit/styles'; - -class KitSideNavigation extends React.Component { - render() { - return ( - - Atoms - - ); - } -} - -export default KitSideNavigation; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts new file mode 100644 index 00000000..09f1b143 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts @@ -0,0 +1,137 @@ +export const edges = [ + { + node: { + title: 'Atoms', + children: [ + { + title: 'Colors', + route: null, + }, + { + title: 'Icons', + route: null, + }, + { + title: 'Typography', + route: null, + }, + { + title: 'Input Fields', + route: null, + }, + { + title: 'Card', + route: null, + }, + { + title: 'tags', + route: null, + }, + { + title: 'Separator', + route: null, + }, + { + title: 'Progress bar', + route: null, + }, + { + title: 'Buttons', + route: null, + }, + { + title: 'Toggles', + route: null, + }, + ], + }, + }, + + { + node: { + title: 'Molecules', + children: [ + { + title: 'Input with Buttons', + route: null, + }, + { + title: 'Overlay', + route: null, + }, + ], + }, + }, + + { + node: { + title: 'Organisms', + children: [ + { + title: 'Navigation', + route: null, + }, + { + title: 'Side Navigation', + route: null, + }, + { + title: 'Footer', + route: null, + }, + { + title: 'SideBars', + route: null, + }, + { + title: 'Card Layouts', + route: null, + }, + { + title: 'Forms', + route: null, + }, + ], + }, + }, + + { + node: { + title: 'Templates', + children: [ + { + title: 'Forms', + route: null, + }, + { + title: 'Filters', + route: null, + }, + { + title: 'Profile Side Section', + route: null, + }, + { + title: 'Authentication Forms', + route: null, + }, + ], + }, + }, + + { + node: { + title: 'Layouts', + children: [ + { + title: 'Not Found', + route: null, + }, + { + title: 'Under Construction', + route: null, + }, + ], + }, + }, +]; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts index 17b40acc..ef1c1e27 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts @@ -4,10 +4,20 @@ import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/c export const NavigationContainer = styled.nav` width: 15rem; - height: 28rem; + padding: 2rem; background: black; `; export const Heading = styled(Heading3)` color: ${C.White}; + margin-bottom: 0; +`; + +export const UnorderedList = styled.ul` + list-style: none; +`; + +export const ListItem = styled.li` + color: ${C.White}; + padding: 0.5rem; `; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts new file mode 100644 index 00000000..8cec2e9c --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts @@ -0,0 +1 @@ +export {}; \ No newline at end of file diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx index ac4f422e..6da4b8dc 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx @@ -6,7 +6,7 @@ import UserSettingsSideNavigation from '../../../ignitus-Shared/ignitus-DesignSy import {Opportunity} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; import SideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components'; import MessageSideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components'; -import KitSideNavigation from '../sideNavigation/KitSideNavigation'; +import KitSideNavigation from '../sideNavigation/Components/KitSideNavigation'; export const UIkit = () => ( From 8fe43cbaa937d769b95d673fde242bde5bac4f64 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 14:57:33 +0100 Subject: [PATCH 06/41] =?UTF-8?q?New=20icons=20added=20for=20navigation=20?= =?UTF-8?q?=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-Icons/keyBoardArrowDown/index.ts | 1 + .../keyBoardArrowDown/keyBoardArrowDown.tsx | 23 +++++++++++++++++++ .../keyBoardArrowRight/KeyBoardArrowRight.tsx | 23 +++++++++++++++++++ .../ignitus-Icons/keyBoardArrowRight/index.ts | 1 + .../ignitus-Utilities/Components/icon.tsx | 8 +++++++ src/ignitus-Shared/types/iconsTypes/enums.ts | 2 ++ .../Components/sideNavigation/style.ts | 2 ++ 7 files changed, 60 insertions(+) create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/index.ts create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/keyBoardArrowDown.tsx create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/KeyBoardArrowRight.tsx create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/index.ts diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/index.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/index.ts new file mode 100644 index 00000000..ea6a24f8 --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/index.ts @@ -0,0 +1 @@ +export { default } from './keyBoardArrowDown'; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/keyBoardArrowDown.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/keyBoardArrowDown.tsx new file mode 100644 index 00000000..ee4074de --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/keyBoardArrowDown.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import {HTMLAttributes} from 'react'; +type Props = HTMLAttributes; + +const KeyBoardArrowDown = ({title = 'KeyBoardArrowDown', ...rest}: Props) => { + return ( + + ); +}; + +export default KeyBoardArrowDown; + +/* SVG credits goes to https://material.io/resources/icons/ */ diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/KeyBoardArrowRight.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/KeyBoardArrowRight.tsx new file mode 100644 index 00000000..c02240ea --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/KeyBoardArrowRight.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import {HTMLAttributes} from 'react'; +type Props = HTMLAttributes; + +const KeyBoardArrowRight = ({title = 'KeyBoardArrowRight', ...rest}: Props) => { + return ( + + ); +}; + +export default KeyBoardArrowRight; + +/* SVG credits goes to https://material.io/resources/icons/ */ diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/index.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/index.ts new file mode 100644 index 00000000..4fe49057 --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/index.ts @@ -0,0 +1 @@ +export { default } from './KeyBoardArrowRight'; diff --git a/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx b/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx index e8dd6c9e..00f27229 100644 --- a/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx +++ b/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx @@ -11,6 +11,8 @@ import MessageIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons import SaveIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/saveIcon/saveIcon'; import NetworkIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/networkIcon'; import MentorsIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/mentorsIcon/mentorsIcon'; +import KeyBoardArrowDown from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/keyBoardArrowDown'; +import KeyBoardArrowRight from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/KeyBoardArrowRight'; type Props = { name: AppIcon; @@ -50,6 +52,12 @@ const Icon = ({name, ...rest}: Props) => { case AppIcon.MentorsIcon: return ; + + case AppIcon.KeyBoardArrowDown: + return ; + + case AppIcon.KeyBoardArrowRight: + return ; } }; diff --git a/src/ignitus-Shared/types/iconsTypes/enums.ts b/src/ignitus-Shared/types/iconsTypes/enums.ts index 9ace3c39..541aaab0 100644 --- a/src/ignitus-Shared/types/iconsTypes/enums.ts +++ b/src/ignitus-Shared/types/iconsTypes/enums.ts @@ -10,4 +10,6 @@ export enum AppIcon { MessageIcon = 'MessageIcon', NetworkIcon = 'NetworkIcon', MentorsIcon = 'MentorsIcon', + KeyBoardArrowDown = 'KeyBoardArrowDown', + KeyBoardArrowRight = 'KeyBoardArrowRight', } diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts index ef1c1e27..5f05b18e 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts @@ -11,6 +11,7 @@ export const NavigationContainer = styled.nav` export const Heading = styled(Heading3)` color: ${C.White}; margin-bottom: 0; + margin-top: 1rem; `; export const UnorderedList = styled.ul` @@ -20,4 +21,5 @@ export const UnorderedList = styled.ul` export const ListItem = styled.li` color: ${C.White}; padding: 0.5rem; + cursor: pointer; `; From d203789383df4c1b19c278d65650bde29b647684 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 15:05:48 +0100 Subject: [PATCH 07/41] =?UTF-8?q?Arrow=20Icons=20added=20=F0=9F=8E=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/KitSideNavigation.tsx | 8 +++++++- .../Components/sideNavigation/style.ts | 14 +++++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx index d7810202..6b4b0cdd 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx @@ -1,12 +1,18 @@ import React from 'react'; import * as S from '../style'; import {edges} from '../constants'; +import {AppIcon} from '../../../../ignitus-Shared/types/iconsTypes/enums'; class KitSideNavigation extends React.Component { render() { const navigation = edges.map(menuItem => ( - {menuItem.node.title} + + {' '} + {menuItem.node.title}{' '} + + + {menuItem.node.children ? ( {menuItem.node.children.map(({title}) => ( diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts index 5f05b18e..07f7ec6f 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts @@ -1,6 +1,8 @@ import styled from '@emotion/styled'; import {Heading3} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; +import Icon from '../../../ignitus-Shared/ignitus-Utilities/Components/icon'; +import {flexibleRowDiv} from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; export const NavigationContainer = styled.nav` width: 15rem; @@ -11,7 +13,6 @@ export const NavigationContainer = styled.nav` export const Heading = styled(Heading3)` color: ${C.White}; margin-bottom: 0; - margin-top: 1rem; `; export const UnorderedList = styled.ul` @@ -23,3 +24,14 @@ export const ListItem = styled.li` padding: 0.5rem; cursor: pointer; `; + +export const Arrow = styled(Icon)` + height: 2rem; + fill: ${C.White}; + cursor: pointer; +`; + +export const HeadingArrowContainer = styled(flexibleRowDiv)` + margin-top: 1rem; + justify-content: unset; +`; From a427ea9c352bbe18ee873f72ee6ec847adab4b58 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 15:34:17 +0100 Subject: [PATCH 08/41] =?UTF-8?q?Navigation=20expansion/collapsed=20behavi?= =?UTF-8?q?our=20implemented=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/KitSideNavigation.tsx | 71 +++++++++++++------ .../Components/sideNavigation/constants.ts | 10 ++- .../Components/sideNavigation/style.ts | 13 +++- 3 files changed, 67 insertions(+), 27 deletions(-) diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx index 6b4b0cdd..64533926 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx @@ -1,29 +1,54 @@ -import React from 'react'; +import React, {useState} from 'react'; import * as S from '../style'; -import {edges} from '../constants'; import {AppIcon} from '../../../../ignitus-Shared/types/iconsTypes/enums'; +import { + moleculesEdges, + atomsEdges, + templatesEdges, + layoutEdges, + organismsEdges, +} from '../constants'; -class KitSideNavigation extends React.Component { - render() { - const navigation = edges.map(menuItem => ( - - - {' '} - {menuItem.node.title}{' '} - - +const KitSideNavigation = () => { + return ( + + + + + + + + ); +}; - {menuItem.node.children ? ( - - {menuItem.node.children.map(({title}) => ( - {title} - ))} - - ) : null} - - )); - return {navigation}; - } -} +const NavigationLayers = ({edges}: any) => { + const [isExpanded, toogleIsExpanded] = useState(false); + const navigation = edges.map(menuItem => ( + + { + toogleIsExpanded(!isExpanded); + }} + > + {' '} + {menuItem.node.title}{' '} + + + + {menuItem.node.children ? ( + + ) : null} + + )); + return navigation; +}; + +const UnorderedList = ({isExpanded, menuItem}) => ( + + {menuItem.node.children.map(({title}) => ( + {title} + ))} + +); export default KitSideNavigation; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts index 09f1b143..a032cac1 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts @@ -1,4 +1,4 @@ -export const edges = [ +export const atomsEdges = [ { node: { title: 'Atoms', @@ -46,7 +46,9 @@ export const edges = [ ], }, }, +]; +export const moleculesEdges = [ { node: { title: 'Molecules', @@ -62,7 +64,9 @@ export const edges = [ ], }, }, +]; +export const organismsEdges = [ { node: { title: 'Organisms', @@ -94,7 +98,9 @@ export const edges = [ ], }, }, +]; +export const templatesEdges = [ { node: { title: 'Templates', @@ -118,7 +124,9 @@ export const edges = [ ], }, }, +]; +export const layoutEdges = [ { node: { title: 'Layouts', diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts index 07f7ec6f..b1e8d243 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts @@ -4,6 +4,10 @@ import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/c import Icon from '../../../ignitus-Shared/ignitus-Utilities/Components/icon'; import {flexibleRowDiv} from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; +type ArrowProps = { + isExpanded: boolean; +}; + export const NavigationContainer = styled.nav` width: 15rem; padding: 2rem; @@ -15,8 +19,9 @@ export const Heading = styled(Heading3)` margin-bottom: 0; `; -export const UnorderedList = styled.ul` +export const UnorderedList = styled.ul` list-style: none; + display: ${props => (props.isExpanded ? 'block' : 'none')}; `; export const ListItem = styled.li` @@ -25,13 +30,15 @@ export const ListItem = styled.li` cursor: pointer; `; -export const Arrow = styled(Icon)` +export const Arrow = styled(Icon)` height: 2rem; fill: ${C.White}; - cursor: pointer; + transform: ${props => (props.isExpanded ? 'rotate(90deg)' : 'rotate(0deg)')}; + transition: transform 200ms ease-in-out; `; export const HeadingArrowContainer = styled(flexibleRowDiv)` margin-top: 1rem; justify-content: unset; + cursor: pointer; `; From 6fc07ab480cc5ad3d1c4a323ed2299aec69a71d9 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 15:36:10 +0100 Subject: [PATCH 09/41] =?UTF-8?q?Toggle=20Hook=20used=20=F0=9F=99=8C?= =?UTF-8?q?=F0=9F=8F=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sideNavigation/Components/KitSideNavigation.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx index 64533926..7195e1d2 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx @@ -1,6 +1,7 @@ -import React, {useState} from 'react'; +import React from 'react'; import * as S from '../style'; import {AppIcon} from '../../../../ignitus-Shared/types/iconsTypes/enums'; +import useToggle from '../../../../ignitus-Shared/ignitus-Utilities/reactHooks/toogleHook'; import { moleculesEdges, atomsEdges, @@ -22,14 +23,10 @@ const KitSideNavigation = () => { }; const NavigationLayers = ({edges}: any) => { - const [isExpanded, toogleIsExpanded] = useState(false); + const [isExpanded, toogleIsExpanded] = useToggle(true); const navigation = edges.map(menuItem => ( - { - toogleIsExpanded(!isExpanded); - }} - > + {' '} {menuItem.node.title}{' '} From dce061ea792fd882fdc469ec89df594fd6ae0b1f Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 15:41:22 +0100 Subject: [PATCH 10/41] =?UTF-8?q?Side-Navigation=20UI=20Fixes=20=E2=98=98?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sideNavigation/Components/KitSideNavigation.tsx | 2 +- .../Components/sideNavigation/style.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx index 7195e1d2..aa761fd1 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx @@ -28,7 +28,7 @@ const NavigationLayers = ({edges}: any) => { {' '} - {menuItem.node.title}{' '} + {menuItem.node.title}{' '} diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts index b1e8d243..bfb77cd0 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts @@ -11,11 +11,11 @@ type ArrowProps = { export const NavigationContainer = styled.nav` width: 15rem; padding: 2rem; - background: black; + background: ${C.GreyLight}; `; -export const Heading = styled(Heading3)` - color: ${C.White}; +export const Heading = styled(Heading3)` + color: ${props => (props.isExpanded ? C.IgnitusBlue : C.Black)}; margin-bottom: 0; `; @@ -25,14 +25,14 @@ export const UnorderedList = styled.ul` `; export const ListItem = styled.li` - color: ${C.White}; + color: ${C.Black}; padding: 0.5rem; cursor: pointer; `; export const Arrow = styled(Icon)` height: 2rem; - fill: ${C.White}; + fill: ${props => (props.isExpanded ? C.IgnitusBlue : C.Black)}; transform: ${props => (props.isExpanded ? 'rotate(90deg)' : 'rotate(0deg)')}; transition: transform 200ms ease-in-out; `; From ac19d2f3536c9c527f4b28c15dc9c15abb0e9036 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 15:46:59 +0100 Subject: [PATCH 11/41] =?UTF-8?q?defined=20types=20for=20sideNavigation=20?= =?UTF-8?q?=F0=9F=91=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/sideNavigation/constants.ts | 4 +++- .../Components/sideNavigation/types.ts | 12 +++++++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts index a032cac1..19c49d7f 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts @@ -1,4 +1,6 @@ -export const atomsEdges = [ +import {Edges} from './types'; + +export const atomsEdges: Edges[] = [ { node: { title: 'Atoms', diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts index 8cec2e9c..30f69cdd 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts @@ -1 +1,11 @@ -export {}; \ No newline at end of file +export type Edges = { + node: { + title: string; + children: children[]; + }; +}; + +export type children = { + title: string; + route: string | null; +}; \ No newline at end of file From a2fab16588872f87a2699f46b2f2adefbd0a3875 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 19:33:33 +0100 Subject: [PATCH 12/41] =?UTF-8?q?Routes=20refactoring=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.js => DashboardRoutes/index.jsx} | 15 ++--- .../ignitus-DashboardRoutes/index.jsx | 23 ++++++++ .../index.jsx} | 8 +-- src/ignitus-Routes/publicRoutes/index.js | 58 ++++++++++--------- 4 files changed, 62 insertions(+), 42 deletions(-) rename src/ignitus-Routes/{protectedRoutes/index.js => DashboardRoutes/index.jsx} (78%) create mode 100644 src/ignitus-Routes/ignitus-DashboardRoutes/index.jsx rename src/ignitus-Routes/{privateRoutes/index.js => ignitus-PrivateRoutes/index.jsx} (74%) diff --git a/src/ignitus-Routes/protectedRoutes/index.js b/src/ignitus-Routes/DashboardRoutes/index.jsx similarity index 78% rename from src/ignitus-Routes/protectedRoutes/index.js rename to src/ignitus-Routes/DashboardRoutes/index.jsx index 7f2fc2e0..3ab4c630 100644 --- a/src/ignitus-Routes/protectedRoutes/index.js +++ b/src/ignitus-Routes/DashboardRoutes/index.jsx @@ -1,26 +1,23 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; - -import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; -import PrivateRoute from '../privateRoutes'; +import PrivateRoute from '../ignitus-PrivateRoutes'; import Dashboard from '../../ignitus-Dashboard/ignitus-StudentDashboard'; import dashBoardHeader from '../../ignitus-Dashboard/ignitus-DashboardHeader'; +import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; // eslint-disable-next-line import/prefer-default-export -export const ProtectedRoutes = () => ( -
+export const DashboardRoutes = () => ( + ( -
- -
+ )} /> -
+ ); diff --git a/src/ignitus-Routes/ignitus-DashboardRoutes/index.jsx b/src/ignitus-Routes/ignitus-DashboardRoutes/index.jsx new file mode 100644 index 00000000..3ab4c630 --- /dev/null +++ b/src/ignitus-Routes/ignitus-DashboardRoutes/index.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Switch, Route } from 'react-router-dom'; +import PrivateRoute from '../ignitus-PrivateRoutes'; +import Dashboard from '../../ignitus-Dashboard/ignitus-StudentDashboard'; +import dashBoardHeader from '../../ignitus-Dashboard/ignitus-DashboardHeader'; +import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; + +// eslint-disable-next-line import/prefer-default-export +export const DashboardRoutes = () => ( + + + + ( + + )} + /> + + + +); diff --git a/src/ignitus-Routes/privateRoutes/index.js b/src/ignitus-Routes/ignitus-PrivateRoutes/index.jsx similarity index 74% rename from src/ignitus-Routes/privateRoutes/index.js rename to src/ignitus-Routes/ignitus-PrivateRoutes/index.jsx index 9df6aa86..bf16c0c3 100644 --- a/src/ignitus-Routes/privateRoutes/index.js +++ b/src/ignitus-Routes/ignitus-PrivateRoutes/index.jsx @@ -1,8 +1,7 @@ +/* eslint-disable react/prop-types */ import React from 'react'; import { Redirect, Route } from 'react-router-dom'; -import PropTypes from 'prop-types'; - const PrivateRoute = ({ Component }) => ( ( } /> ); - -PrivateRoute.propTypes = { - Component: PropTypes.func.isRequired, -}; - export default PrivateRoute; diff --git a/src/ignitus-Routes/publicRoutes/index.js b/src/ignitus-Routes/publicRoutes/index.js index 7ec84f80..1f39b979 100644 --- a/src/ignitus-Routes/publicRoutes/index.js +++ b/src/ignitus-Routes/publicRoutes/index.js @@ -1,27 +1,31 @@ -import React from "react"; -import { Switch, Route } from "react-router-dom"; -import Navigation from "../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation"; -import Footer from "../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Footer"; +import React from 'react'; +import {Switch, Route} from 'react-router-dom'; +import Navigation from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation'; +import Footer from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Footer'; -import Contributors from "../../ignitus-HomePage/ignitus-Contributors"; -import GetStarted from "../../ignitus-HomePage/ignitus-GetStarted"; -import Introduction from "../../ignitus-HomePage/ignitus-Introduction"; -import Testimonial from "../../ignitus-HomePage/ignitus-Testimonial"; -import WhatWeProvide from "../../ignitus-HomePage/ignitus-WhatWeDo"; -import Partner from "../../ignitus-HomePage/ignitus-Partners"; +import Contributors from '../../ignitus-HomePage/ignitus-Contributors'; +import GetStarted from '../../ignitus-HomePage/ignitus-GetStarted'; +import Introduction from '../../ignitus-HomePage/ignitus-Introduction'; +import Testimonial from '../../ignitus-HomePage/ignitus-Testimonial'; +import WhatWeProvide from '../../ignitus-HomePage/ignitus-WhatWeDo'; +import Partner from '../../ignitus-HomePage/ignitus-Partners'; -import LoginProfessor from "../../ignitus-Authentication/ignitus-ProfessorLogin"; -import SignupProfessor from "../../ignitus-Authentication/ignitus-ProfessorSignUp"; -import LoginStudent from "../../ignitus-Authentication/ignitus-StudentLogin"; -import SignupStudent from "../../ignitus-Authentication/ignitus-StudentSignUp"; -import { CommonLoginUI, CommonSignUpUI } from "../../ignitus-Authentication/ignitus-CommonAuthentication/Components/commonLoginRegister"; +import LoginProfessor from '../../ignitus-Authentication/ignitus-ProfessorLogin'; +import SignupProfessor from '../../ignitus-Authentication/ignitus-ProfessorSignUp'; +import LoginStudent from '../../ignitus-Authentication/ignitus-StudentLogin'; +import SignupStudent from '../../ignitus-Authentication/ignitus-StudentSignUp'; +import { + CommonLoginUI, + CommonSignUpUI, +} from '../../ignitus-Authentication/ignitus-CommonAuthentication/Components/commonLoginRegister'; import loader from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/ignitusLoader.gif'; -import Loadable from "react-loadable"; +import Loadable from 'react-loadable'; -import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; -import JobConfirmation from "../../ignitus-Careers/ignitus-JobConfirmation"; -import { UIkit } from "../../ignitus-UserInterfaceKit/Components/userInterfaceKit"; +import {Notfound} from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; +import JobConfirmation from '../../ignitus-Careers/ignitus-JobConfirmation'; +import {UIkit} from '../../ignitus-UserInterfaceKit/Components/userInterfaceKit'; +import {Buttons} from '../../ignitus-UserInterfaceKit/Components/Buttons/Components'; // RouteBased CodeSplitting. @@ -34,11 +38,12 @@ const Loading = () => ( ); const AboutUs = Loadable({ - loader: () => import("../../ignitus-AboutPage/ignitus-About/Components/About"), - loading: Loading + loader: () => + import('../../ignitus-AboutPage/ignitus-About/Components/About'), + loading: Loading, }); -export const PublicRoutes = props => { +export const PublicRoutes = () => { return ( @@ -76,12 +81,13 @@ export const PublicRoutes = props => { /> - - + + + From 72294ad75aae5aa90ffb7e53cf029d3d50c2109a Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 20:01:05 +0100 Subject: [PATCH 13/41] =?UTF-8?q?Routes=20refactored=20=F0=9F=A7=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 9 ++++++--- .../ignitus-ProfessorLogin/Components/loadable.js | 2 +- .../index.js => ignitus-PublicRoutes/index.jsx} | 1 - 3 files changed, 7 insertions(+), 5 deletions(-) rename src/ignitus-Routes/{publicRoutes/index.js => ignitus-PublicRoutes/index.jsx} (98%) diff --git a/src/App.tsx b/src/App.tsx index c5c8865e..8262ffff 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,15 +1,18 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; import { withErrorBoundary } from './ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary'; -import { ProtectedRoutes } from './ignitus-Routes/protectedRoutes'; +import { DashboardRoutes } from './ignitus-Routes/ignitus-DashboardRoutes'; // eslint-disable-next-line import/named -import { PublicRoutes } from './ignitus-Routes/publicRoutes'; +import { PublicRoutes } from './ignitus-Routes/ignitus-PublicRoutes'; import './App.scss'; +import UserInterfaceKitRoutes from './ignitus-Routes/ignitus-UserInterfaceKitRoutes'; + const App = () => (
- + +
diff --git a/src/ignitus-Authentication/ignitus-ProfessorLogin/Components/loadable.js b/src/ignitus-Authentication/ignitus-ProfessorLogin/Components/loadable.js index 9f3b8c63..5d73e3c9 100644 --- a/src/ignitus-Authentication/ignitus-ProfessorLogin/Components/loadable.js +++ b/src/ignitus-Authentication/ignitus-ProfessorLogin/Components/loadable.js @@ -1,5 +1,5 @@ import React from 'react'; -import Loadable from 'react-loadable'; +import Loadable from '../../../ignitus-Routes/ignitus-PublicRoutes/node_modules/react-loadable'; import loader from '../../ignitus-Assets/Images/loader.gif'; // [@INFO] Loading component can put in global UI component diff --git a/src/ignitus-Routes/publicRoutes/index.js b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx similarity index 98% rename from src/ignitus-Routes/publicRoutes/index.js rename to src/ignitus-Routes/ignitus-PublicRoutes/index.jsx index 1f39b979..b2bb7d75 100644 --- a/src/ignitus-Routes/publicRoutes/index.js +++ b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx @@ -85,7 +85,6 @@ export const PublicRoutes = () => { path="/jobConfirmation" component={JobConfirmation.components.JobConfirmation} /> - From 698751d03eedba69455b15fb7ac227d62af0190f Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 20:13:56 +0100 Subject: [PATCH 14/41] =?UTF-8?q?Further=20routes=20migration=20=E2=9A=93?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ignitus-Routes/DashboardRoutes/index.jsx | 23 ---------- .../ignitus-PublicRoutes/index.jsx | 1 - .../ignitus-UserInterfaceKitRoutes/index.jsx | 33 +++++++++++++ .../ignitus-Buttons/Components/index.tsx | 46 ++++++++----------- 4 files changed, 53 insertions(+), 50 deletions(-) delete mode 100644 src/ignitus-Routes/DashboardRoutes/index.jsx create mode 100644 src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx diff --git a/src/ignitus-Routes/DashboardRoutes/index.jsx b/src/ignitus-Routes/DashboardRoutes/index.jsx deleted file mode 100644 index 3ab4c630..00000000 --- a/src/ignitus-Routes/DashboardRoutes/index.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { Switch, Route } from 'react-router-dom'; -import PrivateRoute from '../ignitus-PrivateRoutes'; -import Dashboard from '../../ignitus-Dashboard/ignitus-StudentDashboard'; -import dashBoardHeader from '../../ignitus-Dashboard/ignitus-DashboardHeader'; -import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; - -// eslint-disable-next-line import/prefer-default-export -export const DashboardRoutes = () => ( - - - - ( - - )} - /> - - - -); diff --git a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx index b2bb7d75..b6450cd4 100644 --- a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx @@ -85,7 +85,6 @@ export const PublicRoutes = () => { path="/jobConfirmation" component={JobConfirmation.components.JobConfirmation} /> - diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx new file mode 100644 index 00000000..1cd9ce33 --- /dev/null +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Switch, Route } from 'react-router-dom'; +import styled from '@emotion/styled'; +import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; +import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/Components/sideNavigation/Components'; +import { Buttons } from '../../ignitus-UserInterfaceKit/Components/Buttons/Components'; + + +const Container = styled.div` + display:flex; + flex-direction: row; +`; +// eslint-disable-next-line import/prefer-default-export +const UserInterfaceKitRoutes = () => ( + + + + ( + + )} + /> + + + +); + +export default UserInterfaceKitRoutes; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx index f119fb4a..93ab7b78 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx @@ -26,9 +26,9 @@ export const PrimaryButton = styled(Button)` background-color: ${C.IgnitusBlue}; &:hover, &:focus { - background-color: ${C.SecondaryColor}; - color: ${C.IgnitusBlue}; -} + background-color: ${C.SecondaryColor}; + color: ${C.IgnitusBlue}; + } `; export const SecondaryButton = styled(Button)` @@ -40,7 +40,6 @@ export const SecondaryButton = styled(Button)` export const WhiteButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: ${C.White}; - &:hover, `; export const GreyButton = styled(Button)` @@ -85,7 +84,6 @@ export const YellowButton = styled(Button)` border: none; `; - export const TextButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: inherit; @@ -97,7 +95,6 @@ export const TextButton = styled(Button)` } `; - export const TextButtonUnderline = styled(Button)` color: ${C.IgnitusBlue}; background-color: inherit; @@ -110,27 +107,26 @@ export const TextButtonUnderline = styled(Button)` } `; - export const StyledButtonBottomRight = styled(Button)` -color: ${C.White}; -background-color: ${C.IgnitusBlue}; -border-radius: 0px 30px; -&:hover, -&:focus { - background-color: ${C.SecondaryColor}; - color: ${C.IgnitusBlue}; -} + color: ${C.White}; + background-color: ${C.IgnitusBlue}; + border-radius: 0px 30px; + &:hover, + &:focus { + background-color: ${C.SecondaryColor}; + color: ${C.IgnitusBlue}; + } `; export const StyledButtonTopLeft = styled(Button)` -color: ${C.White}; -background-color: ${C.IgnitusBlue}; -border-radius: 30px 0px; -&:hover, -&:focus { - background-color: ${C.SecondaryColor}; - color: ${C.IgnitusBlue}; -} + color: ${C.White}; + background-color: ${C.IgnitusBlue}; + border-radius: 30px 0px; + &:hover, + &:focus { + background-color: ${C.SecondaryColor}; + color: ${C.IgnitusBlue}; + } `; export const RoundedPrimaryButton = styled(PrimaryButton)` @@ -141,12 +137,10 @@ export const MediumPrimaryButton = styled(PrimaryButton)` padding: 8px 20px; font-size: ${F.SM}; border-radius: 3px; -} `; export const SmallPrimaryButton = styled(PrimaryButton)` padding: 4px 15px; font-size: ${F.XS}; border-radius: 3px; -} -`; \ No newline at end of file +`; From 81c9b0ac4a67636cc5b2ee496150029b2c9799f5 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 20:14:33 +0100 Subject: [PATCH 15/41] =?UTF-8?q?Migration=20&=20creation=20=F0=9F=8E=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Buttons/Components/Buttons.tsx | 57 +++++++ .../Components/Buttons/Components/index.ts | 1 + .../Components/Buttons/style.ts | 150 ++++++++++++++++++ .../Components/Buttons/types.ts | 1 + .../Components/KitSideNavigation.tsx | 9 +- .../Components/sideNavigation/constants.ts | 2 +- .../Components/sideNavigation/style.ts | 20 ++- .../Components/userInterfaceKit/index.tsx | 43 ----- 8 files changed, 232 insertions(+), 51 deletions(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Buttons/Components/index.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Buttons/style.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Buttons/types.ts diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx b/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx new file mode 100644 index 00000000..cc4a3e41 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import {ButtonsContainer} from '../style'; +import { + Heading6, + Heading4, +} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +import * as Button from '../style'; + +const Buttons = () => ( + + Buttons + Primary Button + Secondary Button + Grey Button + Orange Button + White Button + Medium Sized Buttons + + {' '} + Medium Primary Button{' '} + + Small Sized Buttons + + {' '} + Small Primary Button{' '} + + Button States + Disabled State + Danger State + Yellow Button + Green Button + Text Button + Text Button + Text Button + Styled Buttons + + {' '} + Styled Button Bottom Right{' '} + + + {' '} + Styled Button Top Left{' '} + + Rounded Button + + {' '} + Rounded Primary Button{' '} + + Social Buttons + Button with Icons + Floating Action Button + Icon with text link + Icon Button + +); + +export default Buttons; diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Buttons/Components/index.ts new file mode 100644 index 00000000..e08f0782 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Buttons/Components/index.ts @@ -0,0 +1 @@ +export {default as Buttons} from './Buttons'; diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts b/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts new file mode 100644 index 00000000..2b6d18eb --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts @@ -0,0 +1,150 @@ +import styled from '@emotion/styled'; +import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; +import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; + +export const ButtonsContainer = styled.div` + padding: 3rem; +`; + +export const Button = styled.button` + padding: 16px 32px; + text-align: center; + text-decoration: none; + transition: all 0.3s ease; + display: inline-block; + cursor: pointer; + border-radius: 5px; + line-height: 1rem; + margin: 5px; + border: none; + font-size: ${F.MD}; + font-weight: ${F.Normal}; + &:hover, + &:focus { + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.24); + } +`; + +export const PrimaryButton = styled(Button)` + color: ${C.White}; + background-color: ${C.IgnitusBlue}; + &:hover, + &:focus { + background-color: ${C.SecondaryColor}; + color: ${C.IgnitusBlue}; + } +`; + +export const SecondaryButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: ${C.White}; + border: 2px solid ${C.IgnitusBlue}; +`; + +export const WhiteButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: ${C.White}; +`; + +export const GreyButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: ${C.GreyLight}; + border: none; + &:hover, + &:focus { + background-color: ${C.Grey2}; + color: ${C.IgnitusBlue}; + } +`; + +export const OrangeButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: ${C.SecondaryColor}; + border: none; +`; + +export const DisabledButton = styled(Button)` + color: ${C.GreySecondaryText}; + background-color: ${C.GreyLight}; + border: none; + cursor: default; +`; + +export const DangerButton = styled(Button)` + color: ${C.White}; + background-color: ${C.Red}; + border: none; +`; + +export const GreenButton = styled(Button)` + color: ${C.White}; + background-color: ${C.Green}; + border: none; +`; + +export const YellowButton = styled(Button)` + color: ${C.GreySecondaryText}; + background-color: ${C.Yellow}; + border: none; +`; + +export const TextButton = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: inherit; + border: none; + &:hover, + &:focus { + background-color: ${C.GreyLight}; + color: ${C.IgnitusBlue}; + } +`; + +export const TextButtonUnderline = styled(Button)` + color: ${C.IgnitusBlue}; + background-color: inherit; + border: none; + text-decoration: underline; + &:hover, + &:focus { + background-color: ${C.GreyLight}; + color: ${C.IgnitusBlue}; + } +`; + +export const StyledButtonBottomRight = styled(Button)` + color: ${C.White}; + background-color: ${C.IgnitusBlue}; + border-radius: 0px 30px; + &:hover, + &:focus { + background-color: ${C.SecondaryColor}; + color: ${C.IgnitusBlue}; + } +`; + +export const StyledButtonTopLeft = styled(Button)` + color: ${C.White}; + background-color: ${C.IgnitusBlue}; + border-radius: 30px 0px; + &:hover, + &:focus { + background-color: ${C.SecondaryColor}; + color: ${C.IgnitusBlue}; + } +`; + +export const RoundedPrimaryButton = styled(PrimaryButton)` + border-radius: 30px; +`; + +export const MediumPrimaryButton = styled(PrimaryButton)` + padding: 8px 20px; + font-size: ${F.SM}; + border-radius: 3px; +`; + +export const SmallPrimaryButton = styled(PrimaryButton)` + padding: 4px 15px; + font-size: ${F.XS}; + border-radius: 3px; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/types.ts b/src/ignitus-UserInterfaceKit/Components/Buttons/types.ts new file mode 100644 index 00000000..6638c4f4 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Buttons/types.ts @@ -0,0 +1 @@ +export{} \ No newline at end of file diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx index aa761fd1..d706fa5d 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import {Link} from 'react-router-dom'; import * as S from '../style'; import {AppIcon} from '../../../../ignitus-Shared/types/iconsTypes/enums'; import useToggle from '../../../../ignitus-Shared/ignitus-Utilities/reactHooks/toogleHook'; @@ -28,7 +29,7 @@ const NavigationLayers = ({edges}: any) => { {' '} - {menuItem.node.title}{' '} + {menuItem.node.title}{' '} @@ -42,8 +43,10 @@ const NavigationLayers = ({edges}: any) => { const UnorderedList = ({isExpanded, menuItem}) => ( - {menuItem.node.children.map(({title}) => ( - {title} + {menuItem.node.children.map(({title, route}) => ( + + {title} + ))} ); diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts index 19c49d7f..e2f9dfe4 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts @@ -39,7 +39,7 @@ export const atomsEdges: Edges[] = [ }, { title: 'Buttons', - route: null, + route: '/interface/buttons', }, { title: 'Toggles', diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts index bfb77cd0..0d2a2c0e 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts @@ -14,8 +14,8 @@ export const NavigationContainer = styled.nav` background: ${C.GreyLight}; `; -export const Heading = styled(Heading3)` - color: ${props => (props.isExpanded ? C.IgnitusBlue : C.Black)}; +export const Heading = styled(Heading3)` + color: ${C.IgnitusBlue}; margin-bottom: 0; `; @@ -25,14 +25,26 @@ export const UnorderedList = styled.ul` `; export const ListItem = styled.li` - color: ${C.Black}; padding: 0.5rem; cursor: pointer; + + a { + text-decoration: none; + color: ${C.GreyText}; + } + + &:hover { + background: ${C.IgnitusBlue}; + color: ${C.White}; + a { + color: ${C.White}; + } + } `; export const Arrow = styled(Icon)` height: 2rem; - fill: ${props => (props.isExpanded ? C.IgnitusBlue : C.Black)}; + fill: ${C.IgnitusBlue}; transform: ${props => (props.isExpanded ? 'rotate(90deg)' : 'rotate(0deg)')}; transition: transform 200ms ease-in-out; `; diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx index 6da4b8dc..a6c5a706 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx @@ -38,49 +38,6 @@ export const UIkit = () => ( Progress bar {/* https://miro.medium.com/max/2800/1*rPFTtW01pNiPF7nwuJER5Q.png */} - Buttons - Primary Button - Secondary Button - Grey Button - Orange Button - White Button - Medium Sized Buttons - - {' '} - Medium Primary Button{' '} - - Small Sized Buttons - - {' '} - Small Primary Button{' '} - - Button States - Disabled State - Danger State - Yellow Button - Green Button - Text Button - Text Button - Text Button - Styled Buttons - - {' '} - Styled Button Bottom Right{' '} - - - {' '} - Styled Button Top Left{' '} - - Rounded Button - - {' '} - Rounded Primary Button{' '} - - Social Buttons - Button with Icons - Floating Action Button - Icon with text link - Icon Button Text link Text Link Molecules From 2c79b63080f17e8ffb8cdfaab549b21b4d24f766 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 20:43:36 +0100 Subject: [PATCH 16/41] =?UTF-8?q?Generic=20buttons=20added=20=E2=98=98?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Buttons/Components/Buttons.tsx | 33 +++++------ .../Components/Buttons/style.ts | 57 ++++++++++++++----- .../Components/KitSideNavigation.tsx | 3 + 3 files changed, 62 insertions(+), 31 deletions(-) diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx b/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx index cc4a3e41..dddfc4e7 100644 --- a/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx @@ -1,37 +1,36 @@ import React from 'react'; import {ButtonsContainer} from '../style'; -import { - Heading6, - Heading4, -} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; + import * as Button from '../style'; +import {Heading2, Heading6} from '../../userInterfaceKit/styles'; const Buttons = () => ( - Buttons + Buttons Primary Button Secondary Button Grey Button Orange Button White Button - Medium Sized Buttons - - {' '} - Medium Primary Button{' '} - - Small Sized Buttons - - {' '} - Small Primary Button{' '} - +
+ Medium Size Buttons + Medium Primary Button + Secondary Button +
+ Small Size Buttons + Small Primary Button + Secondary Button +
Button States - Disabled State + Disabled State Danger State Yellow Button Green Button +
Text Button Text Button Text Button +
Styled Buttons {' '} @@ -41,11 +40,13 @@ const Buttons = () => ( {' '} Styled Button Top Left{' '} +
Rounded Button {' '} Rounded Primary Button{' '} +
Social Buttons Button with Icons Floating Action Button diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts b/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts index 2b6d18eb..1667647c 100644 --- a/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts @@ -2,6 +2,39 @@ import styled from '@emotion/styled'; import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; +const getPadding = (props: BtnSizeProps) => { + if (props.medium) { + return '8px 20px'; + } else if (props.small) { + return '4px 15px'; + } else { + return '16px 32px'; + } +}; + +const getFontSizes = (props: BtnSizeProps) => { + if (props.medium) { + return F.SM; + } else if (props.small) { + return F.XS; + } else { + return F.MD; + } +}; + +const getRadius = (props: BtnSizeProps) => { + if (props.medium || props.small) { + return '3px'; + } else { + return '5px'; + } +}; + +type BtnSizeProps = { + medium?: boolean; + small?: boolean; +}; + export const ButtonsContainer = styled.div` padding: 3rem; `; @@ -25,9 +58,12 @@ export const Button = styled.button` } `; -export const PrimaryButton = styled(Button)` +export const PrimaryButton = styled(Button)` color: ${C.White}; background-color: ${C.IgnitusBlue}; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; &:hover, &:focus { background-color: ${C.SecondaryColor}; @@ -35,10 +71,13 @@ export const PrimaryButton = styled(Button)` } `; -export const SecondaryButton = styled(Button)` +export const SecondaryButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: ${C.White}; border: 2px solid ${C.IgnitusBlue}; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; `; export const WhiteButton = styled(Button)` @@ -67,7 +106,7 @@ export const DisabledButton = styled(Button)` color: ${C.GreySecondaryText}; background-color: ${C.GreyLight}; border: none; - cursor: default; + cursor: not-allowed; `; export const DangerButton = styled(Button)` @@ -136,15 +175,3 @@ export const StyledButtonTopLeft = styled(Button)` export const RoundedPrimaryButton = styled(PrimaryButton)` border-radius: 30px; `; - -export const MediumPrimaryButton = styled(PrimaryButton)` - padding: 8px 20px; - font-size: ${F.SM}; - border-radius: 3px; -`; - -export const SmallPrimaryButton = styled(PrimaryButton)` - padding: 4px 15px; - font-size: ${F.XS}; - border-radius: 3px; -`; diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx index d706fa5d..068f02e2 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx @@ -11,6 +11,9 @@ import { organismsEdges, } from '../constants'; + + + const KitSideNavigation = () => { return ( From 38de9110e8be71a396a62aedc1be8c9027933228 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 20:54:23 +0100 Subject: [PATCH 17/41] =?UTF-8?q?Helpers=20added=20=E2=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HelperFunctions/emotionHelpers.ts | 34 ++++++++++ .../Components/Buttons/Components/Buttons.tsx | 6 ++ .../Components/Buttons/style.ts | 62 ++++++------------- 3 files changed, 58 insertions(+), 44 deletions(-) create mode 100644 src/ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers.ts diff --git a/src/ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers.ts b/src/ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers.ts new file mode 100644 index 00000000..4321b943 --- /dev/null +++ b/src/ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers.ts @@ -0,0 +1,34 @@ +import {SM, MD, XXS} from '../../ignitus-DesignSystem/ignitus-Atoms/fonts'; + +export const getPadding = (props: BtnSizeProps) => { + if (props.medium) { + return '8px 20px'; + } else if (props.small) { + return '4px 15px'; + } else { + return '16px 32px'; + } +}; + +export const getFontSizes = (props: BtnSizeProps) => { + if (props.medium) { + return SM; + } else if (props.small) { + return XXS; + } else { + return MD; + } +}; + +export const getRadius = (props: BtnSizeProps) => { + if (props.medium || props.small) { + return '3px'; + } else { + return '5px'; + } +}; + +export type BtnSizeProps = { + medium?: boolean; + small?: boolean; +}; diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx b/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx index dddfc4e7..104eb3a6 100644 --- a/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx @@ -16,10 +16,16 @@ const Buttons = () => ( Medium Size Buttons Medium Primary Button Secondary Button + Grey Button + Orange Button + White Button
Small Size Buttons Small Primary Button Secondary Button + Grey Button + Orange Button + White Button
Button States Disabled State diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts b/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts index 1667647c..bfc58d89 100644 --- a/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts @@ -1,39 +1,12 @@ import styled from '@emotion/styled'; import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; - -const getPadding = (props: BtnSizeProps) => { - if (props.medium) { - return '8px 20px'; - } else if (props.small) { - return '4px 15px'; - } else { - return '16px 32px'; - } -}; - -const getFontSizes = (props: BtnSizeProps) => { - if (props.medium) { - return F.SM; - } else if (props.small) { - return F.XS; - } else { - return F.MD; - } -}; - -const getRadius = (props: BtnSizeProps) => { - if (props.medium || props.small) { - return '3px'; - } else { - return '5px'; - } -}; - -type BtnSizeProps = { - medium?: boolean; - small?: boolean; -}; +import { + BtnSizeProps, + getRadius, + getFontSizes, + getPadding, +} from '../../../ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers'; export const ButtonsContainer = styled.div` padding: 3rem; @@ -80,15 +53,20 @@ export const SecondaryButton = styled(Button)` border-radius: ${props => getRadius(props)}; `; -export const WhiteButton = styled(Button)` +export const WhiteButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: ${C.White}; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; `; -export const GreyButton = styled(Button)` +export const GreyButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: ${C.GreyLight}; - border: none; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; &:hover, &:focus { background-color: ${C.Grey2}; @@ -96,41 +74,38 @@ export const GreyButton = styled(Button)` } `; -export const OrangeButton = styled(Button)` +export const OrangeButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: ${C.SecondaryColor}; - border: none; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; `; export const DisabledButton = styled(Button)` color: ${C.GreySecondaryText}; background-color: ${C.GreyLight}; - border: none; cursor: not-allowed; `; export const DangerButton = styled(Button)` color: ${C.White}; background-color: ${C.Red}; - border: none; `; export const GreenButton = styled(Button)` color: ${C.White}; background-color: ${C.Green}; - border: none; `; export const YellowButton = styled(Button)` color: ${C.GreySecondaryText}; background-color: ${C.Yellow}; - border: none; `; export const TextButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: inherit; - border: none; &:hover, &:focus { background-color: ${C.GreyLight}; @@ -141,7 +116,6 @@ export const TextButton = styled(Button)` export const TextButtonUnderline = styled(Button)` color: ${C.IgnitusBlue}; background-color: inherit; - border: none; text-decoration: underline; &:hover, &:focus { From d0adc424398a460a0c7f787c73398084e3c164ca Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 21:01:33 +0100 Subject: [PATCH 18/41] =?UTF-8?q?Migration=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ignitus-Routes/ignitus-PublicRoutes/index.jsx | 2 +- .../ignitus-UserInterfaceKitRoutes/index.jsx | 8 ++++++-- .../Components/{ => Atoms}/Buttons/Components/Buttons.tsx | 2 +- .../Components/{ => Atoms}/Buttons/Components/index.ts | 0 .../Components/{ => Atoms}/Buttons/style.ts | 6 +++--- .../Components/{ => Atoms}/Buttons/types.ts | 0 .../Components/KitSideNavigation.tsx | 3 --- .../Components/index.ts | 0 .../{sideNavigation => KitSideNavigation}/constants.ts | 2 +- .../{sideNavigation => KitSideNavigation}/style.ts | 0 .../{sideNavigation => KitSideNavigation}/types.ts | 0 .../Components/userInterfaceKit/index.tsx | 2 +- 12 files changed, 13 insertions(+), 12 deletions(-) rename src/ignitus-UserInterfaceKit/Components/{ => Atoms}/Buttons/Components/Buttons.tsx (97%) rename src/ignitus-UserInterfaceKit/Components/{ => Atoms}/Buttons/Components/index.ts (100%) rename src/ignitus-UserInterfaceKit/Components/{ => Atoms}/Buttons/style.ts (92%) rename src/ignitus-UserInterfaceKit/Components/{ => Atoms}/Buttons/types.ts (100%) rename src/ignitus-UserInterfaceKit/Components/{sideNavigation => KitSideNavigation}/Components/KitSideNavigation.tsx (99%) rename src/ignitus-UserInterfaceKit/Components/{sideNavigation => KitSideNavigation}/Components/index.ts (100%) rename src/ignitus-UserInterfaceKit/Components/{sideNavigation => KitSideNavigation}/constants.ts (98%) rename src/ignitus-UserInterfaceKit/Components/{sideNavigation => KitSideNavigation}/style.ts (100%) rename src/ignitus-UserInterfaceKit/Components/{sideNavigation => KitSideNavigation}/types.ts (100%) diff --git a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx index b6450cd4..4afd5288 100644 --- a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx @@ -25,7 +25,7 @@ import Loadable from 'react-loadable'; import {Notfound} from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; import JobConfirmation from '../../ignitus-Careers/ignitus-JobConfirmation'; import {UIkit} from '../../ignitus-UserInterfaceKit/Components/userInterfaceKit'; -import {Buttons} from '../../ignitus-UserInterfaceKit/Components/Buttons/Components'; +import {Buttons} from '../../ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components'; // RouteBased CodeSplitting. diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index 1cd9ce33..65afc641 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -2,8 +2,8 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; import styled from '@emotion/styled'; import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; -import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/Components/sideNavigation/Components'; -import { Buttons } from '../../ignitus-UserInterfaceKit/Components/Buttons/Components'; +import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/Components/KitSideNavigation/Components'; +import { Buttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components'; const Container = styled.div` @@ -26,6 +26,10 @@ const UserInterfaceKitRoutes = () => ( path="/interface/buttons" component={Buttons} /> + ); diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/Buttons.tsx similarity index 97% rename from src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx rename to src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/Buttons.tsx index 104eb3a6..872defe8 100644 --- a/src/ignitus-UserInterfaceKit/Components/Buttons/Components/Buttons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/Buttons.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {ButtonsContainer} from '../style'; import * as Button from '../style'; -import {Heading2, Heading6} from '../../userInterfaceKit/styles'; +import {Heading2, Heading6} from '../../../userInterfaceKit/styles'; const Buttons = () => ( diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Buttons/Components/index.ts rename to src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/style.ts similarity index 92% rename from src/ignitus-UserInterfaceKit/Components/Buttons/style.ts rename to src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/style.ts index bfc58d89..0c8de701 100644 --- a/src/ignitus-UserInterfaceKit/Components/Buttons/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/style.ts @@ -1,12 +1,12 @@ import styled from '@emotion/styled'; -import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; -import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; +import * as C from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; +import * as F from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; import { BtnSizeProps, getRadius, getFontSizes, getPadding, -} from '../../../ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers'; +} from '../../../../ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers'; export const ButtonsContainer = styled.div` padding: 3rem; diff --git a/src/ignitus-UserInterfaceKit/Components/Buttons/types.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/types.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Buttons/types.ts rename to src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/types.ts diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/KitSideNavigation.tsx similarity index 99% rename from src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx rename to src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/KitSideNavigation.tsx index 068f02e2..d706fa5d 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/KitSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/KitSideNavigation.tsx @@ -11,9 +11,6 @@ import { organismsEdges, } from '../constants'; - - - const KitSideNavigation = () => { return ( diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/index.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/sideNavigation/Components/index.ts rename to src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/index.ts diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts b/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/constants.ts similarity index 98% rename from src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts rename to src/ignitus-UserInterfaceKit/Components/KitSideNavigation/constants.ts index e2f9dfe4..106d22b9 100644 --- a/src/ignitus-UserInterfaceKit/Components/sideNavigation/constants.ts +++ b/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/constants.ts @@ -75,7 +75,7 @@ export const organismsEdges = [ children: [ { title: 'Navigation', - route: null, + route: '/interface/navigation', }, { title: 'Side Navigation', diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/style.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/sideNavigation/style.ts rename to src/ignitus-UserInterfaceKit/Components/KitSideNavigation/style.ts diff --git a/src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts b/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/types.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/sideNavigation/types.ts rename to src/ignitus-UserInterfaceKit/Components/KitSideNavigation/types.ts diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx index a6c5a706..209711b4 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx @@ -6,7 +6,7 @@ import UserSettingsSideNavigation from '../../../ignitus-Shared/ignitus-DesignSy import {Opportunity} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; import SideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components'; import MessageSideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components'; -import KitSideNavigation from '../sideNavigation/Components/KitSideNavigation'; +import KitSideNavigation from '../KitSideNavigation/Components/KitSideNavigation'; export const UIkit = () => ( From 832d1de6d0c82c049b79f18eed46bc99498f1554 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 21:10:09 +0100 Subject: [PATCH 19/41] =?UTF-8?q?Migration=20=E2=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Atoms/Buttons/Components/index.ts | 2 +- .../Buttons/Components/{Buttons.tsx => interfaceButtons.tsx} | 0 src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/types.ts | 2 +- .../Components/Organisms/Navigation/Components/index.ts | 1 + .../Organisms/Navigation/Components/interfaceNavigation.tsx | 0 .../Components/Organisms/Navigation/style.ts | 0 .../Components/Organisms/Navigation/types.ts | 1 + 7 files changed, 4 insertions(+), 2 deletions(-) rename src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/{Buttons.tsx => interfaceButtons.tsx} (100%) create mode 100644 src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/index.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/interfaceNavigation.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/style.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/types.ts diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts index e08f0782..3c9a9058 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts @@ -1 +1 @@ -export {default as Buttons} from './Buttons'; +export {default as Buttons} from './interfaceButtons'; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/Buttons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/interfaceButtons.tsx similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/Buttons.tsx rename to src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/interfaceButtons.tsx diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/types.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/types.ts index 6638c4f4..cb0ff5c3 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/types.ts +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/types.ts @@ -1 +1 @@ -export{} \ No newline at end of file +export {}; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/index.ts new file mode 100644 index 00000000..b35d4e9c --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/index.ts @@ -0,0 +1 @@ +export {default as interfaceNavigation} from './interfaceNavigation'; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/interfaceNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/interfaceNavigation.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/style.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/style.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/types.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/types.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/types.ts @@ -0,0 +1 @@ +export {}; From 93e84d4522086242296cc2996300c892fd2b16e8 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 21:35:34 +0100 Subject: [PATCH 20/41] =?UTF-8?q?Organised=20navigation=20in=20interface.?= =?UTF-8?q?=20=F0=9F=8E=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-UserInterfaceKitRoutes/index.jsx | 9 +++++---- .../Components/index.tsx | 2 +- .../ignitus-DashboardSideNavigation/style.ts | 1 + .../ignitus-MessageSideNavigation/style.ts | 1 + .../ignitus-UserSettingsSideNavigation/style.ts | 1 + .../Components/Atoms/Buttons/Components/index.ts | 2 +- .../Atoms/Buttons/Components/interfaceButtons.tsx | 4 ++-- .../InterfaceSideNavigation/Components/index.ts | 2 ++ .../Components/interfaceSideNavigation.tsx} | 4 ++-- .../constants.ts | 4 ++-- .../style.ts | 0 .../types.ts | 0 .../KitSideNavigation/Components/index.ts | 2 -- .../Navigation/Components/interfaceNavigation.tsx | 14 ++++++++++++++ .../Components/Organisms/Navigation/style.ts | 9 +++++++++ .../Components/userInterfaceKit/index.tsx | 2 +- 16 files changed, 42 insertions(+), 15 deletions(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/index.ts rename src/ignitus-UserInterfaceKit/Components/{KitSideNavigation/Components/KitSideNavigation.tsx => InterfaceSideNavigation/Components/interfaceSideNavigation.tsx} (95%) rename src/ignitus-UserInterfaceKit/Components/{KitSideNavigation => InterfaceSideNavigation}/constants.ts (100%) rename src/ignitus-UserInterfaceKit/Components/{KitSideNavigation => InterfaceSideNavigation}/style.ts (100%) rename src/ignitus-UserInterfaceKit/Components/{KitSideNavigation => InterfaceSideNavigation}/types.ts (100%) delete mode 100644 src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/index.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index 65afc641..94af1045 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -2,8 +2,9 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; import styled from '@emotion/styled'; import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; -import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/Components/KitSideNavigation/Components'; -import { Buttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components'; +import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components'; +import { interfaceButttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components'; +import { interfaceNavigation } from '../../ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components'; const Container = styled.div` @@ -24,11 +25,11 @@ const UserInterfaceKitRoutes = () => ( /> diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index.tsx index 599a75ad..44a3a02a 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index.tsx @@ -10,7 +10,7 @@ type props = { name: AppIcon; }; -export default function UserSettingsSideNavigation() { +export default function DashboardNavigation() { return ( diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts index 88168541..fb59c4d5 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/style.ts @@ -15,6 +15,7 @@ export const SettingsContainer = styled(flexibleColDiv)` border-radius: 16px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); width: 12rem; + height: 24rem; `; export const Layer = styled.div` diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts index c34b628e..c57a2335 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts @@ -14,6 +14,7 @@ export const MessageContainer = styled(flexibleColDiv)` border-radius: 16px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); width: 12rem; + height: 16rem; `; export const Layer = styled.div` diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts index 0f21c84e..90e9abee 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/style.ts @@ -14,6 +14,7 @@ export const SettingsContainer = styled(flexibleColDiv)` border-radius: 16px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); width: 12rem; + height: 22rem; `; export const Layer = styled.div` diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts index 3c9a9058..eeb74f9c 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts @@ -1 +1 @@ -export {default as Buttons} from './interfaceButtons'; +export {default as interfaceButttons} from './interfaceButtons'; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/interfaceButtons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/interfaceButtons.tsx index 872defe8..49b277c6 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/interfaceButtons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/interfaceButtons.tsx @@ -4,7 +4,7 @@ import {ButtonsContainer} from '../style'; import * as Button from '../style'; import {Heading2, Heading6} from '../../../userInterfaceKit/styles'; -const Buttons = () => ( +const interfaceButttons = () => ( Buttons Primary Button @@ -61,4 +61,4 @@ const Buttons = () => ( ); -export default Buttons; +export default interfaceButttons; diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/index.ts new file mode 100644 index 00000000..b23e3d64 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/index.ts @@ -0,0 +1,2 @@ + +export { default as KitSideNavigation } from './interfaceSideNavigation'; diff --git a/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/KitSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx similarity index 95% rename from src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/KitSideNavigation.tsx rename to src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx index d706fa5d..6aa245aa 100644 --- a/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/KitSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx @@ -11,7 +11,7 @@ import { organismsEdges, } from '../constants'; -const KitSideNavigation = () => { +const interfaceSideNavigation = () => { return ( @@ -51,4 +51,4 @@ const UnorderedList = ({isExpanded, menuItem}) => ( ); -export default KitSideNavigation; +export default interfaceSideNavigation; diff --git a/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/constants.ts b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/KitSideNavigation/constants.ts rename to src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts index 106d22b9..368e9875 100644 --- a/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/constants.ts +++ b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts @@ -75,11 +75,11 @@ export const organismsEdges = [ children: [ { title: 'Navigation', - route: '/interface/navigation', + route: null, }, { title: 'Side Navigation', - route: null, + route: '/interface/navigation', }, { title: 'Footer', diff --git a/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/KitSideNavigation/style.ts rename to src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts diff --git a/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/types.ts b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/types.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/KitSideNavigation/types.ts rename to src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/types.ts diff --git a/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/index.ts deleted file mode 100644 index 8ef02bc1..00000000 --- a/src/ignitus-UserInterfaceKit/Components/KitSideNavigation/Components/index.ts +++ /dev/null @@ -1,2 +0,0 @@ - -export { default as KitSideNavigation } from './KitSideNavigation'; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/interfaceNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/interfaceNavigation.tsx index e69de29b..158a27d2 100644 --- a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/interfaceNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/interfaceNavigation.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import UserSettingsSideNavigation from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components'; +import MessageSideNavigation from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components'; +import {NavigationContainer} from '../style'; +import DashboardNavigation from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index'; +const interfaceNavigation = () => ( + + + + + +); + +export default interfaceNavigation; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/style.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/style.ts index e69de29b..6a4c50f9 100644 --- a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/style.ts @@ -0,0 +1,9 @@ +import styled from '@emotion/styled'; + +export const NavigationContainer = styled.div` + padding: 3rem; + display: flex; + flex-direction: row; + justify-content: space-evenly; + flex: 1; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx index 209711b4..27e67e48 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx @@ -6,7 +6,7 @@ import UserSettingsSideNavigation from '../../../ignitus-Shared/ignitus-DesignSy import {Opportunity} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; import SideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components'; import MessageSideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components'; -import KitSideNavigation from '../KitSideNavigation/Components/KitSideNavigation'; +import KitSideNavigation from '../InterfaceSideNavigation/Components/interfaceSideNavigation'; export const UIkit = () => ( From c872d6cb28a6f9743a6f4f06677091193a36cec4 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 22:08:54 +0100 Subject: [PATCH 21/41] =?UTF-8?q?Icons=20organisation=20=E2=98=98=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-PublicRoutes/index.jsx | 2 +- .../ignitus-UserInterfaceKitRoutes/index.jsx | 7 ++++- .../Components/index.ts | 0 .../Components/interfaceButtons.tsx | 0 .../{Buttons => interfaceButtons}/style.ts | 0 .../{Buttons => interfaceButtons}/types.ts | 0 .../Atoms/interfaceIcons/Components/index.ts | 1 + .../Components/interfaceIcons.tsx | 29 +++++++++++++++++++ .../Components/Atoms/interfaceIcons/styles.ts | 13 +++++++++ .../Components/Atoms/interfaceIcons/types.ts | 1 + .../InterfaceSideNavigation/constants.ts | 2 +- 11 files changed, 52 insertions(+), 3 deletions(-) rename src/ignitus-UserInterfaceKit/Components/Atoms/{Buttons => interfaceButtons}/Components/index.ts (100%) rename src/ignitus-UserInterfaceKit/Components/Atoms/{Buttons => interfaceButtons}/Components/interfaceButtons.tsx (100%) rename src/ignitus-UserInterfaceKit/Components/Atoms/{Buttons => interfaceButtons}/style.ts (100%) rename src/ignitus-UserInterfaceKit/Components/Atoms/{Buttons => interfaceButtons}/types.ts (100%) create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/index.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/styles.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/types.ts diff --git a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx index 4afd5288..60e4663f 100644 --- a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx @@ -25,7 +25,7 @@ import Loadable from 'react-loadable'; import {Notfound} from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; import JobConfirmation from '../../ignitus-Careers/ignitus-JobConfirmation'; import {UIkit} from '../../ignitus-UserInterfaceKit/Components/userInterfaceKit'; -import {Buttons} from '../../ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components'; +import {Buttons} from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components'; // RouteBased CodeSplitting. diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index 94af1045..ec541633 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -3,8 +3,9 @@ import { Switch, Route } from 'react-router-dom'; import styled from '@emotion/styled'; import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components'; -import { interfaceButttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components'; +import { interfaceButttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components'; import { interfaceNavigation } from '../../ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components'; +import { interfaceIcons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components'; const Container = styled.div` @@ -31,6 +32,10 @@ const UserInterfaceKitRoutes = () => ( path="/interface/navigation" component={interfaceNavigation} /> + ); diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/index.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/index.ts rename to src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/index.ts diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/interfaceButtons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/Components/interfaceButtons.tsx rename to src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/style.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/style.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/style.ts rename to src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/style.ts diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/types.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/types.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Atoms/Buttons/types.ts rename to src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/types.ts diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/index.ts new file mode 100644 index 00000000..1a73c064 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/index.ts @@ -0,0 +1 @@ +export {default as interfaceIcons} from './interfaceIcons'; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx new file mode 100644 index 00000000..c408ed14 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import * as I from '../styles'; +import {Heading2} from '../../../userInterfaceKit/styles'; +import {AppIcon} from '../../../../../ignitus-Shared/types/iconsTypes/enums'; + +const interfaceIcons = () => ( + + Social Icons ☘️ + + + +
+ Dashboard Icons + + + + + + + +
+ General Icons + + + + +); + +export default interfaceIcons; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/styles.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/styles.ts new file mode 100644 index 00000000..f9a3f5ed --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/styles.ts @@ -0,0 +1,13 @@ +import styled from '@emotion/styled'; +import LinkedInIcon from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/linkedInIcon/linkedInIcon'; +import AngelListIcon from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/angelListIcon'; +import Icon from '../../../../ignitus-Shared/ignitus-Utilities/Components/icon'; + +export const IconsContainer = styled.div` + padding: 3rem; +`; + +export const StyledIcon = styled(Icon)` + height: 2rem; + margin: 1rem; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/types.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/types.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/types.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts index 368e9875..4b717eaf 100644 --- a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts +++ b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts @@ -11,7 +11,7 @@ export const atomsEdges: Edges[] = [ }, { title: 'Icons', - route: null, + route: '/interface/icons', }, { title: 'Typography', From 60f5639e89ba5c600a78644f4504bd41154a3ea7 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 22:32:25 +0100 Subject: [PATCH 22/41] =?UTF-8?q?Refactoring=20=E2=98=98=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-PublicRoutes/index.jsx | 12 ++-- .../ignitus-UserInterfaceKitRoutes/index.jsx | 2 +- .../Components/interfaceButtons.tsx | 1 + .../Components/interfaceIcons.tsx | 2 +- .../Components/interfaceSideNavigation.tsx | 16 ++--- .../InterfaceSideNavigation/constants.ts | 70 +++++++++++-------- .../InterfaceSideNavigation/style.ts | 6 +- .../Components/userInterfaceKit/index.tsx | 36 ++-------- .../Components/userInterfaceKit/styles.ts | 2 +- 9 files changed, 71 insertions(+), 76 deletions(-) diff --git a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx index 60e4663f..564d2014 100644 --- a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Switch, Route} from 'react-router-dom'; +import { Switch, Route } from 'react-router-dom'; import Navigation from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation'; import Footer from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Footer'; @@ -22,10 +22,10 @@ import { import loader from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Logos/ignitusLoader.gif'; import Loadable from 'react-loadable'; -import {Notfound} from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; +import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; import JobConfirmation from '../../ignitus-Careers/ignitus-JobConfirmation'; -import {UIkit} from '../../ignitus-UserInterfaceKit/Components/userInterfaceKit'; -import {Buttons} from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components'; +import { UIkit } from '../../ignitus-UserInterfaceKit/Components/userInterfaceKit'; +import { Buttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components'; // RouteBased CodeSplitting. @@ -85,6 +85,10 @@ export const PublicRoutes = () => { path="/jobConfirmation" component={JobConfirmation.components.JobConfirmation} /> + diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index ec541633..184aa257 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -29,7 +29,7 @@ const UserInterfaceKitRoutes = () => ( component={interfaceButttons} /> ( Buttons diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx index c408ed14..5b7ecb28 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx @@ -5,7 +5,7 @@ import {AppIcon} from '../../../../../ignitus-Shared/types/iconsTypes/enums'; const interfaceIcons = () => ( - Social Icons ☘️ + Social Icons 🎨 diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx index 6aa245aa..26c3706e 100644 --- a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx @@ -24,27 +24,27 @@ const interfaceSideNavigation = () => { }; const NavigationLayers = ({edges}: any) => { - const [isExpanded, toogleIsExpanded] = useToggle(true); + const [isexpanded, toogleisexpanded] = useToggle(true); const navigation = edges.map(menuItem => ( - - + + {' '} {menuItem.node.title}{' '} - + {menuItem.node.children ? ( - + ) : null} )); return navigation; }; -const UnorderedList = ({isExpanded, menuItem}) => ( - +const UnorderedList = ({isexpanded, menuItem}) => ( + {menuItem.node.children.map(({title, route}) => ( - + {title} ))} diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts index 4b717eaf..f01d7d6d 100644 --- a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts +++ b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts @@ -7,7 +7,7 @@ export const atomsEdges: Edges[] = [ children: [ { title: 'Colors', - route: null, + route: '/interface/colors', }, { title: 'Icons', @@ -15,27 +15,39 @@ export const atomsEdges: Edges[] = [ }, { title: 'Typography', - route: null, + route: '/interface/typography', }, { title: 'Input Fields', - route: null, + route: '/interface/inputFields', + }, + { + title: 'Checkboxes', + route: '/interface/checkboxes', + }, + { + title: 'Radio Buttons', + route: '/interface/radioButtons', + }, + { + title: 'Dropdowns', + route: '/interface/dropdowns', }, { title: 'Card', - route: null, + route: '/interface/cards', }, { - title: 'tags', - route: null, + title: 'Tags', + route: '/interface/tags', }, { title: 'Separator', - route: null, + route: '/interface/seperators', }, { title: 'Progress bar', - route: null, + route: '/interface/progressBars', }, { title: 'Buttons', @@ -43,7 +55,11 @@ export const atomsEdges: Edges[] = [ }, { title: 'Toggles', - route: null, + route: '/interface/toggles', + }, + { + title: 'Text Links', + route: '/interface/textLink', }, ], }, @@ -57,11 +73,11 @@ export const moleculesEdges = [ children: [ { title: 'Input with Buttons', - route: null, + route: '/interface/inputButtons', }, { title: 'Overlay', - route: null, + route: '/interface/overlay', }, ], }, @@ -75,27 +91,19 @@ export const organismsEdges = [ children: [ { title: 'Navigation', - route: null, + route: '/interface/checkboxes', }, { title: 'Side Navigation', - route: '/interface/navigation', + route: '/interface/sideNavigation', }, { title: 'Footer', - route: null, - }, - { - title: 'SideBars', - route: null, + route: '/interface/footer', }, { title: 'Card Layouts', - route: null, - }, - { - title: 'Forms', - route: null, + route: '/interface/cardLayout', }, ], }, @@ -109,19 +117,23 @@ export const templatesEdges = [ children: [ { title: 'Forms', - route: null, + route: '/interface/forms', }, { title: 'Filters', - route: null, + route: '/interface/filters', }, { title: 'Profile Side Section', - route: null, + route: '/interface/profileSideSection', }, { title: 'Authentication Forms', - route: null, + route: '/interface/authForms', + }, + { + title: 'Post Layouts', + route: '/interface/postLayout', }, ], }, @@ -135,11 +147,11 @@ export const layoutEdges = [ children: [ { title: 'Not Found', - route: null, + route: '/interface/notFound', }, { title: 'Under Construction', - route: null, + route: '/interface/underConstruction', }, ], }, diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts index 0d2a2c0e..d0584c44 100644 --- a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts @@ -5,7 +5,7 @@ import Icon from '../../../ignitus-Shared/ignitus-Utilities/Components/icon'; import {flexibleRowDiv} from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; type ArrowProps = { - isExpanded: boolean; + isexpanded: boolean; }; export const NavigationContainer = styled.nav` @@ -21,7 +21,7 @@ export const Heading = styled(Heading3)` export const UnorderedList = styled.ul` list-style: none; - display: ${props => (props.isExpanded ? 'block' : 'none')}; + display: ${props => (props.isexpanded ? 'block' : 'none')}; `; export const ListItem = styled.li` @@ -45,7 +45,7 @@ export const ListItem = styled.li` export const Arrow = styled(Icon)` height: 2rem; fill: ${C.IgnitusBlue}; - transform: ${props => (props.isExpanded ? 'rotate(90deg)' : 'rotate(0deg)')}; + transform: ${props => (props.isexpanded ? 'rotate(90deg)' : 'rotate(0deg)')}; transition: transform 200ms ease-in-out; `; diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx index 27e67e48..76f69999 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx @@ -16,9 +16,7 @@ export const UIkit = () => ( Ignitus UIKit Atoms - Colors - Icons - + Typography Heading1 Heading2 @@ -27,42 +25,22 @@ export const UIkit = () => ( Heading5 Heading6 Paragraph - Checkboxes - Radio buttons - Input Fields - Dropdowns - Tags + Card Card Separator - Progress bar - {/* https://miro.medium.com/max/2800/1*rPFTtW01pNiPF7nwuJER5Q.png */} + + Text link Text Link - Molecules - Input field with buttons - Overlay - Card with details + Organisms - Navigations - Footer - Sidebars - - - - - + Opportunity list - Forms - Filter with tags - - Templates - Profile side section - Forms - Posts Cards with different formats + ); diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts index 933aefa3..894d1da0 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts @@ -7,7 +7,7 @@ import LinkedInIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-A import AngelListIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/angelListIcon/angelListIcon'; export const UIKitContainer = styled.div` - display: none; + /* display: none; */ `; export const SideNavigationContainer = styled.div` `; From 92fe0060d0b7783b2aee6a24a5d696528aba52d6 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 22:56:35 +0100 Subject: [PATCH 23/41] Headings organised in design-kit. --- .../ignitus-UserInterfaceKitRoutes/index.jsx | 5 ++++ .../Components/interfaceButtons.tsx | 30 ++++++++++--------- .../Components/interfaceIcons.tsx | 8 ++--- .../interfaceTypography/Components/index.ts | 2 ++ .../Components/interfaceTypography.tsx | 27 +++++++++++++++++ .../Atoms/interfaceTypography/styles.ts | 5 ++++ .../Components/interfaceSideNavigation.tsx | 7 +++-- .../InterfaceSideNavigation/style.ts | 13 ++++---- .../Components/userInterfaceKit/index.tsx | 16 +++++----- .../Components/userInterfaceKit/styles.ts | 11 ++++--- 10 files changed, 81 insertions(+), 43 deletions(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/index.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/styles.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index 184aa257..ea32b983 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -6,6 +6,7 @@ import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/Components/Int import { interfaceButttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components'; import { interfaceNavigation } from '../../ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components'; import { interfaceIcons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components'; +import { interfaceTypography } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components'; const Container = styled.div` @@ -36,6 +37,10 @@ const UserInterfaceKitRoutes = () => ( path="/interface/icons" component={interfaceIcons} /> + ); diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx index ccfb6033..55a1765e 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx @@ -2,43 +2,45 @@ import React from 'react'; import {ButtonsContainer} from '../style'; import * as Button from '../style'; -import {Heading2, Heading6} from '../../../userInterfaceKit/styles'; +import {StyledHeading2, StyledHeading6} from '../../../userInterfaceKit/styles'; -{/* https://miro.medium.com/max/2800/1*rPFTtW01pNiPF7nwuJER5Q.png */} +{ + /* https://miro.medium.com/max/2800/1*rPFTtW01pNiPF7nwuJER5Q.png */ +} const interfaceButttons = () => ( - Buttons + Buttons Primary Button Secondary Button Grey Button Orange Button White Button
- Medium Size Buttons + Medium Size Buttons Medium Primary Button Secondary Button Grey Button Orange Button White Button
- Small Size Buttons + Small Size Buttons Small Primary Button Secondary Button Grey Button Orange Button White Button
- Button States + Button States Disabled State Danger State Yellow Button Green Button
- Text Button + Text Button Text Button Text Button
- Styled Buttons + Styled Buttons {' '} Styled Button Bottom Right{' '} @@ -48,17 +50,17 @@ const interfaceButttons = () => ( Styled Button Top Left{' '}
- Rounded Button + Rounded Button {' '} Rounded Primary Button{' '}
- Social Buttons - Button with Icons - Floating Action Button - Icon with text link - Icon Button + Social Buttons + Button with Icons + Floating Action Button + Icon with text link + Icon Button ); diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx index 5b7ecb28..a6742706 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx @@ -1,16 +1,16 @@ import React from 'react'; import * as I from '../styles'; -import {Heading2} from '../../../userInterfaceKit/styles'; +import {StyledHeading2} from '../../../userInterfaceKit/styles'; import {AppIcon} from '../../../../../ignitus-Shared/types/iconsTypes/enums'; const interfaceIcons = () => ( - Social Icons 🎨 + Social Icons 🎨
- Dashboard Icons + Dashboard Icons @@ -19,7 +19,7 @@ const interfaceIcons = () => (
- General Icons + General Icons diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/index.ts new file mode 100644 index 00000000..742afe8a --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/index.ts @@ -0,0 +1,2 @@ + +export { default as interfaceTypography } from './interfaceTypography'; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx new file mode 100644 index 00000000..03ac7831 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import * as T from '../styles'; +import {StyledHeading2} from '../../../userInterfaceKit/styles'; +import {TypographyContainer} from '../styles'; +import { + Heading1, + Heading2, + Heading3, + Heading4, + Heading5, + Heading6, +} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; + +const interfaceTypography = () => ( + + Typography ★ +
+ Heading 1 + Heading 2 + Heading 3 + Heading 4 + Heading 5 + Heading 6 + +); + +export default interfaceTypography; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/styles.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/styles.ts new file mode 100644 index 00000000..cc5a1aa4 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/styles.ts @@ -0,0 +1,5 @@ +import styled from '@emotion/styled'; + +export const TypographyContainer = styled.nav` + padding: 2rem; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx index 26c3706e..0b5bf083 100644 --- a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx @@ -44,9 +44,10 @@ const NavigationLayers = ({edges}: any) => { const UnorderedList = ({isexpanded, menuItem}) => ( {menuItem.node.children.map(({title, route}) => ( - - {title} - + + {' '} + {title} + ))} ); diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts index d0584c44..675dad77 100644 --- a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts @@ -22,23 +22,20 @@ export const Heading = styled(Heading3)` export const UnorderedList = styled.ul` list-style: none; display: ${props => (props.isexpanded ? 'block' : 'none')}; -`; - -export const ListItem = styled.li` - padding: 0.5rem; - cursor: pointer; a { text-decoration: none; color: ${C.GreyText}; } +`; + +export const ListItem = styled.li` + padding: 0.5rem; + cursor: pointer; &:hover { background: ${C.IgnitusBlue}; color: ${C.White}; - a { - color: ${C.White}; - } } `; diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx index 76f69999..ee84644c 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx @@ -14,10 +14,10 @@ export const UIkit = () => ( - Ignitus UIKit - Atoms + Ignitus UIKit + Atoms - Typography + Typography Heading1 Heading2 Heading3 @@ -26,19 +26,19 @@ export const UIkit = () => ( Heading6 Paragraph - Card + Card Card - Separator + Separator - Text link + Text link Text Link - Organisms + Organisms - Opportunity list + Opportunity list diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts index 894d1da0..ac75d0cb 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts @@ -9,8 +9,7 @@ import AngelListIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus- export const UIKitContainer = styled.div` /* display: none; */ `; -export const SideNavigationContainer = styled.div` -`; +export const SideNavigationContainer = styled.div``; export const Container = styled.div` display: flex; @@ -19,21 +18,21 @@ export const Container = styled.div` margin-top: 4rem; `; -export const Heading1 = styled(A.Heading1)` +export const StyledHeading1 = styled(A.Heading1)` text-align: center; `; -export const Heading2 = styled(A.Heading2)` +export const StyledHeading2 = styled(A.Heading2)` margin: 20px 0; font-weight: ${F.Medium}; `; -export const Heading4 = styled(A.Heading4)` +export const StyledHeading4 = styled(A.Heading4)` margin: 20px 0; color: ${C.GreyText}; `; -export const Heading6 = styled(A.Heading6)` +export const StyledHeading6 = styled(A.Heading6)` margin: 10px 0; color: ${C.GreyText}; `; From 68871862a8e822928245d0b7febf42f622d39bd0 Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 23:18:39 +0100 Subject: [PATCH 24/41] Cards organised in design-kit. --- .../ignitus-UserInterfaceKitRoutes/index.jsx | 5 +++++ .../Atoms/interfaceCards/Components/index.ts | 2 ++ .../Components/interfaceCards.tsx | 15 +++++++++++++ .../Components/Atoms/interfaceCards/styles.ts | 5 +++++ .../Components/Atoms/interfaceCards/types.ts | 1 + .../Components/interfaceTypography.tsx | 4 +++- .../Components/userInterfaceKit/index.tsx | 14 ------------ .../Components/userInterfaceKit/styles.ts | 22 ------------------- 8 files changed, 31 insertions(+), 37 deletions(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/index.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/styles.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/types.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index ea32b983..b42212c9 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -7,6 +7,7 @@ import { interfaceButttons } from '../../ignitus-UserInterfaceKit/Components/Ato import { interfaceNavigation } from '../../ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components'; import { interfaceIcons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components'; import { interfaceTypography } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components'; +import { interfaceCards } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components'; const Container = styled.div` @@ -41,6 +42,10 @@ const UserInterfaceKitRoutes = () => ( path="/interface/typography" component={interfaceTypography} /> + ); diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/index.ts new file mode 100644 index 00000000..49c448cb --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/index.ts @@ -0,0 +1,2 @@ + +export { default as interfaceCards } from './interfaceCards'; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx new file mode 100644 index 00000000..20669982 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import * as T from '../styles'; +import {StyledHeading2} from '../../../userInterfaceKit/styles'; +import {CardsContainer} from '../styles'; +import {Card} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; + +const interfaceCards = () => ( + + Cards +
+ Card + +); + +export default interfaceCards; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/styles.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/styles.ts new file mode 100644 index 00000000..9bd819c2 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/styles.ts @@ -0,0 +1,5 @@ +import styled from '@emotion/styled'; + +export const CardsContainer = styled.nav` + padding: 2rem; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/types.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/types.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/types.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx index 03ac7831..608adc20 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx @@ -9,18 +9,20 @@ import { Heading4, Heading5, Heading6, + Paragraph, } from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; const interfaceTypography = () => ( Typography ★ -
+
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 + Paragraph ); diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx index ee84644c..d05f3bc6 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx @@ -2,10 +2,7 @@ import React from 'react'; import * as A from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; import * as Button from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index'; import * as K from './styles'; -import UserSettingsSideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components'; import {Opportunity} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; -import SideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components'; -import MessageSideNavigation from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components'; import KitSideNavigation from '../InterfaceSideNavigation/Components/interfaceSideNavigation'; export const UIkit = () => ( @@ -17,17 +14,6 @@ export const UIkit = () => ( Ignitus UIKit Atoms - Typography - Heading1 - Heading2 - Heading3 - Heading4 - Heading5 - Heading6 - Paragraph - - Card - Card Separator diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts index ac75d0cb..1b98cc96 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts @@ -2,9 +2,6 @@ import styled from '@emotion/styled'; import * as A from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; -import TwitterIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/twitterIcon/twitterIcon'; -import LinkedInIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/linkedInIcon/linkedInIcon'; -import AngelListIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/angelListIcon/angelListIcon'; export const UIKitContainer = styled.div` /* display: none; */ @@ -37,25 +34,6 @@ export const StyledHeading6 = styled(A.Heading6)` color: ${C.GreyText}; `; -export const Card = styled(A.Card)` - width: 60%; -`; - -export const Twitter = styled(TwitterIcon)` - height: 3rem; - &:hover { - fill: red; - } -`; - -export const LinkedIn = styled(LinkedInIcon)` - height: 3rem; -`; - -export const AngelList = styled(AngelListIcon)` - height: 3rem; -`; - export const NavigationWrapper = styled.div` display: grid; grid-template-columns: 1fr 1fr 1fr; From a742777f34b7fa36b3d7a3170fd5e379ed288aad Mon Sep 17 00:00:00 2001 From: Rawat Date: Fri, 20 Mar 2020 23:28:10 +0100 Subject: [PATCH 25/41] =?UTF-8?q?Card=20Layout=20organised=20in=20design-k?= =?UTF-8?q?it.=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-UserInterfaceKitRoutes/index.jsx | 5 +++++ .../ignitus-OppurtunityList/styles.ts | 1 - .../interfaceCardLayout/Components/index.ts | 2 ++ .../Components/interfaceCardLayout.tsx | 14 ++++++++++++++ .../Organisms/interfaceCardLayout/style.ts | 5 +++++ .../Organisms/interfaceCardLayout/types.ts | 1 + 6 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/index.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/interfaceCardLayout.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/style.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/types.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index b42212c9..4b94b68b 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -8,6 +8,7 @@ import { interfaceNavigation } from '../../ignitus-UserInterfaceKit/Components/O import { interfaceIcons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components'; import { interfaceTypography } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components'; import { interfaceCards } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components'; +import { interfaceCardLayout } from '../../ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components'; const Container = styled.div` @@ -46,6 +47,10 @@ const UserInterfaceKitRoutes = () => ( path="/interface/cards" component={interfaceCards} /> + ); diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/styles.ts index 76ea674f..cb1ea7a9 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/styles.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/styles.ts @@ -12,7 +12,6 @@ import { Paragraph } from '../../shared'; export const OpportunityList = styled(flexibleColDiv)` padding: 2rem; - margin-top: 100px; `; export const OpportunityContainer = styled(flexibleRowDiv)` diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/index.ts new file mode 100644 index 00000000..8d62fe98 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/index.ts @@ -0,0 +1,2 @@ + +export { default as interfaceCardLayout } from './interfaceCardLayout'; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/interfaceCardLayout.tsx b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/interfaceCardLayout.tsx new file mode 100644 index 00000000..936109de --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/interfaceCardLayout.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import {StyledHeading2} from '../../../userInterfaceKit/styles'; +import {CardLayoutContainer} from '../style'; +import Opportunity from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; + +const interfaceCardLayout = () => ( + + Card Layout ★ +
+ + +); + +export default interfaceCardLayout; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/style.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/style.ts new file mode 100644 index 00000000..bc1bb11c --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/style.ts @@ -0,0 +1,5 @@ +import styled from '@emotion/styled'; + +export const CardLayoutContainer = styled.nav` + padding: 2rem; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/types.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/types.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/types.ts @@ -0,0 +1 @@ +export {}; From ac41c4ecbb91f677c721b69f3b51a7d4a7ce780a Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 13:49:21 +0100 Subject: [PATCH 26/41] =?UTF-8?q?NotFound=20interface=20added=20=E2=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-UserInterfaceKitRoutes/index.jsx | 5 +++++ .../interfaceNotFound/Components/index.ts | 2 ++ .../Components/interfaceNotFound.tsx | 14 ++++++++++++++ .../Layouts/interfaceNotFound/constants.ts | 1 + .../Layouts/interfaceNotFound/style.ts | 7 +++++++ .../Components/userInterfaceKit/index.tsx | 16 +--------------- 6 files changed, 30 insertions(+), 15 deletions(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/index.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/constants.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index 4b94b68b..6a990f36 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -9,6 +9,7 @@ import { interfaceIcons } from '../../ignitus-UserInterfaceKit/Components/Atoms/ import { interfaceTypography } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components'; import { interfaceCards } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components'; import { interfaceCardLayout } from '../../ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components'; +import { interfaceNotFound } from '../../ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components'; const Container = styled.div` @@ -51,6 +52,10 @@ const UserInterfaceKitRoutes = () => ( path="/interface/cardLayout" component={interfaceCardLayout} /> + ); diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/index.ts new file mode 100644 index 00000000..8a33649c --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/index.ts @@ -0,0 +1,2 @@ + +export { default as interfaceNotFound } from './interfaceNotFound'; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx new file mode 100644 index 00000000..5fcc058b --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import {StyledHeading2} from '../../../userInterfaceKit/styles'; +import {Notfound} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index'; +import { NotFoundContainer } from '../style'; + +const interfaceNotFound = () => ( + + Not Found ★ +
+ + +); + +export default interfaceNotFound; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/constants.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/constants.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/constants.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts new file mode 100644 index 00000000..2d8746aa --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; +import {flexibleColDiv} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; + +export const NotFoundContainer = styled(flexibleColDiv)` + padding: 2rem; + height: 25rem; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx index d05f3bc6..2eefc893 100644 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx +++ b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx @@ -7,26 +7,12 @@ import KitSideNavigation from '../InterfaceSideNavigation/Components/interfaceSi export const UIkit = () => ( - - - - Ignitus UIKit - Atoms - Separator - - + Text link Text Link - - - Organisms - - Opportunity list - - ); From bb126f503c397e8ed9cfe3647f78ce3cbbb7a95c Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 14:13:50 +0100 Subject: [PATCH 27/41] =?UTF-8?q?Refactoring=20=E2=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-PublicRoutes/index.jsx | 6 --- .../ignitus-UserInterfaceKitRoutes/index.jsx | 10 ++--- .../Components/interfaceButtons.tsx | 2 +- .../Components/interfaceCards.tsx | 2 +- .../Components/interfaceIcons.tsx | 2 +- .../Components/interfaceTypography.tsx | 2 +- .../Components/interfaceNotFound.tsx | 2 +- .../Components/interfaceCardLayout.tsx | 2 +- .../Components/index.ts | 0 .../Components/interfaceNavigation.tsx | 0 .../style.ts | 0 .../types.ts | 0 .../Components/userInterfaceKit/index.tsx | 18 --------- .../Components/userInterfaceKit/styles.ts | 40 ------------------- .../Components/index.ts | 0 .../Components/interfaceSideNavigation.tsx | 8 ++-- .../InterfaceSideNavigation/constants.ts | 0 .../InterfaceSideNavigation/style.ts | 8 ++-- .../InterfaceSideNavigation/types.ts | 0 src/ignitus-UserInterfaceKit/styles.ts | 28 +++++++++++++ 20 files changed, 46 insertions(+), 84 deletions(-) rename src/ignitus-UserInterfaceKit/Components/Organisms/{Navigation => interfaceNavigation}/Components/index.ts (100%) rename src/ignitus-UserInterfaceKit/Components/Organisms/{Navigation => interfaceNavigation}/Components/interfaceNavigation.tsx (100%) rename src/ignitus-UserInterfaceKit/Components/Organisms/{Navigation => interfaceNavigation}/style.ts (100%) rename src/ignitus-UserInterfaceKit/Components/Organisms/{Navigation => interfaceNavigation}/types.ts (100%) delete mode 100644 src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx delete mode 100644 src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts rename src/ignitus-UserInterfaceKit/{Components => }/InterfaceSideNavigation/Components/index.ts (100%) rename src/ignitus-UserInterfaceKit/{Components => }/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx (85%) rename src/ignitus-UserInterfaceKit/{Components => }/InterfaceSideNavigation/constants.ts (100%) rename src/ignitus-UserInterfaceKit/{Components => }/InterfaceSideNavigation/style.ts (74%) rename src/ignitus-UserInterfaceKit/{Components => }/InterfaceSideNavigation/types.ts (100%) create mode 100644 src/ignitus-UserInterfaceKit/styles.ts diff --git a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx index 564d2014..5c30e932 100644 --- a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx @@ -24,8 +24,6 @@ import Loadable from 'react-loadable'; import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; import JobConfirmation from '../../ignitus-Careers/ignitus-JobConfirmation'; -import { UIkit } from '../../ignitus-UserInterfaceKit/Components/userInterfaceKit'; -import { Buttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components'; // RouteBased CodeSplitting. @@ -85,10 +83,6 @@ export const PublicRoutes = () => { path="/jobConfirmation" component={JobConfirmation.components.JobConfirmation} /> - diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index 6a990f36..9c799ec2 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -2,14 +2,16 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; import styled from '@emotion/styled'; import { Notfound } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components'; -import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components'; +import { KitSideNavigation } from '../../ignitus-UserInterfaceKit/InterfaceSideNavigation/Components'; import { interfaceButttons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components'; -import { interfaceNavigation } from '../../ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components'; +import { interfaceNavigation } from '../../ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components'; import { interfaceIcons } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components'; import { interfaceTypography } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components'; import { interfaceCards } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components'; import { interfaceCardLayout } from '../../ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components'; import { interfaceNotFound } from '../../ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components'; +import { WebsiteUnderConstruction } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components'; +import { Separator } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; const Container = styled.div` @@ -52,10 +54,6 @@ const UserInterfaceKitRoutes = () => ( path="/interface/cardLayout" component={interfaceCardLayout} /> - ); diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx index 55a1765e..c36c3128 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {ButtonsContainer} from '../style'; import * as Button from '../style'; -import {StyledHeading2, StyledHeading6} from '../../../userInterfaceKit/styles'; +import {StyledHeading2, StyledHeading6} from '../../../../styles'; { /* https://miro.medium.com/max/2800/1*rPFTtW01pNiPF7nwuJER5Q.png */ diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx index 20669982..77b3c599 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx @@ -1,6 +1,6 @@ import React from 'react'; import * as T from '../styles'; -import {StyledHeading2} from '../../../userInterfaceKit/styles'; +import {StyledHeading2} from '../../../../styles'; import {CardsContainer} from '../styles'; import {Card} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx index a6742706..1b637ef3 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx @@ -1,6 +1,6 @@ import React from 'react'; import * as I from '../styles'; -import {StyledHeading2} from '../../../userInterfaceKit/styles'; +import {StyledHeading2} from '../../../../styles'; import {AppIcon} from '../../../../../ignitus-Shared/types/iconsTypes/enums'; const interfaceIcons = () => ( diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx index 608adc20..c4f335d4 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx @@ -1,6 +1,6 @@ import React from 'react'; import * as T from '../styles'; -import {StyledHeading2} from '../../../userInterfaceKit/styles'; +import {StyledHeading2} from '../../../../styles'; import {TypographyContainer} from '../styles'; import { Heading1, diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx index 5fcc058b..f3ab56be 100644 --- a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {StyledHeading2} from '../../../userInterfaceKit/styles'; +import {StyledHeading2} from '../../../../styles'; import {Notfound} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index'; import { NotFoundContainer } from '../style'; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/interfaceCardLayout.tsx b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/interfaceCardLayout.tsx index 936109de..bd1a6412 100644 --- a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/interfaceCardLayout.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components/interfaceCardLayout.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {StyledHeading2} from '../../../userInterfaceKit/styles'; +import {StyledHeading2} from '../../../../styles'; import {CardLayoutContainer} from '../style'; import Opportunity from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components/index.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/index.ts rename to src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components/index.ts diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/interfaceNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components/interfaceNavigation.tsx similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/Components/interfaceNavigation.tsx rename to src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components/interfaceNavigation.tsx diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/style.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/style.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/style.ts rename to src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/style.ts diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/types.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/types.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/Organisms/Navigation/types.ts rename to src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/types.ts diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx deleted file mode 100644 index 2eefc893..00000000 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import * as A from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; -import * as Button from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index'; -import * as K from './styles'; -import {Opportunity} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/Components/OppurtunityList'; -import KitSideNavigation from '../InterfaceSideNavigation/Components/interfaceSideNavigation'; - -export const UIkit = () => ( - - - Separator - - - Text link - Text Link - - -); diff --git a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts deleted file mode 100644 index 1b98cc96..00000000 --- a/src/ignitus-UserInterfaceKit/Components/userInterfaceKit/styles.ts +++ /dev/null @@ -1,40 +0,0 @@ -import styled from '@emotion/styled'; -import * as A from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; -import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; -import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; - -export const UIKitContainer = styled.div` - /* display: none; */ -`; -export const SideNavigationContainer = styled.div``; - -export const Container = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 4rem; -`; - -export const StyledHeading1 = styled(A.Heading1)` - text-align: center; -`; - -export const StyledHeading2 = styled(A.Heading2)` - margin: 20px 0; - font-weight: ${F.Medium}; -`; - -export const StyledHeading4 = styled(A.Heading4)` - margin: 20px 0; - color: ${C.GreyText}; -`; - -export const StyledHeading6 = styled(A.Heading6)` - margin: 10px 0; - color: ${C.GreyText}; -`; - -export const NavigationWrapper = styled.div` - display: grid; - grid-template-columns: 1fr 1fr 1fr; -`; diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/index.ts b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/Components/index.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/index.ts rename to src/ignitus-UserInterfaceKit/InterfaceSideNavigation/Components/index.ts diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx similarity index 85% rename from src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx rename to src/ignitus-UserInterfaceKit/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx index 0b5bf083..c9feed93 100644 --- a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {Link} from 'react-router-dom'; import * as S from '../style'; -import {AppIcon} from '../../../../ignitus-Shared/types/iconsTypes/enums'; -import useToggle from '../../../../ignitus-Shared/ignitus-Utilities/reactHooks/toogleHook'; +import {AppIcon} from '../../../ignitus-Shared/types/iconsTypes/enums'; +import useToggle from '../../../ignitus-Shared/ignitus-Utilities/reactHooks/toogleHook'; import { moleculesEdges, atomsEdges, @@ -44,9 +44,9 @@ const NavigationLayers = ({edges}: any) => { const UnorderedList = ({isexpanded, menuItem}) => ( {menuItem.node.children.map(({title, route}) => ( - + {' '} - {title} + {title} ))} diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/constants.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/constants.ts rename to src/ignitus-UserInterfaceKit/InterfaceSideNavigation/constants.ts diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts similarity index 74% rename from src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts rename to src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts index 675dad77..91ef42aa 100644 --- a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; -import {Heading3} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; -import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; -import Icon from '../../../ignitus-Shared/ignitus-Utilities/Components/icon'; -import {flexibleRowDiv} from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; +import {Heading3} from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +import * as C from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; +import Icon from '../../ignitus-Shared/ignitus-Utilities/Components/icon'; +import {flexibleRowDiv} from '../../ignitus-Shared/ignitus-DesignSystem/shared'; type ArrowProps = { isexpanded: boolean; diff --git a/src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/types.ts b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/types.ts similarity index 100% rename from src/ignitus-UserInterfaceKit/Components/InterfaceSideNavigation/types.ts rename to src/ignitus-UserInterfaceKit/InterfaceSideNavigation/types.ts diff --git a/src/ignitus-UserInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/styles.ts new file mode 100644 index 00000000..b4783b24 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/styles.ts @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; +import * as A from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +import {GreyText} from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; +import {Medium} from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; + +export const StyledHeading1 = styled(A.Heading1)` + text-align: center; +`; + +export const StyledHeading2 = styled(A.Heading2)` + margin: 20px 0; + font-weight: ${Medium}; +`; + +export const StyledHeading4 = styled(A.Heading4)` + margin: 20px 0; + color: ${GreyText}; +`; + +export const StyledHeading6 = styled(A.Heading6)` + margin: 10px 0; + color: ${GreyText}; +`; + +export const NavigationWrapper = styled.div` + display: grid; + grid-template-columns: 1fr 1fr 1fr; +`; From 63500b383ef05521bffa715cd8c4d7e07ce75932 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 14:15:44 +0100 Subject: [PATCH 28/41] =?UTF-8?q?DeepScan=20Fixes=20=E2=98=98=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Atoms/interfaceIcons/styles.ts | 2 -- .../interfaceTypography/Components/interfaceTypography.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/styles.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/styles.ts index f9a3f5ed..6e534dc1 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/styles.ts +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/styles.ts @@ -1,6 +1,4 @@ import styled from '@emotion/styled'; -import LinkedInIcon from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/linkedInIcon/linkedInIcon'; -import AngelListIcon from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/angelListIcon'; import Icon from '../../../../ignitus-Shared/ignitus-Utilities/Components/icon'; export const IconsContainer = styled.div` diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx index c4f335d4..388d3b8a 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import * as T from '../styles'; import {StyledHeading2} from '../../../../styles'; import {TypographyContainer} from '../styles'; import { From 78b9f00bc8c03c87dd8725c12763dd8104661845 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 14:18:05 +0100 Subject: [PATCH 29/41] =?UTF-8?q?DeepScan=20Fixes=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx | 6 ++++-- .../Atoms/interfaceCards/Components/interfaceCards.tsx | 1 - 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index 9c799ec2..ef9109c2 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -10,8 +10,6 @@ import { interfaceTypography } from '../../ignitus-UserInterfaceKit/Components/A import { interfaceCards } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components'; import { interfaceCardLayout } from '../../ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components'; import { interfaceNotFound } from '../../ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components'; -import { WebsiteUnderConstruction } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components'; -import { Separator } from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; const Container = styled.div` @@ -54,6 +52,10 @@ const UserInterfaceKitRoutes = () => ( path="/interface/cardLayout" component={interfaceCardLayout} /> + ); diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx index 77b3c599..8b001c53 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components/interfaceCards.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import * as T from '../styles'; import {StyledHeading2} from '../../../../styles'; import {CardsContainer} from '../styles'; import {Card} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; From a3efb059cbab99e807d2ebb552c08f9ba537de45 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 14:28:21 +0100 Subject: [PATCH 30/41] =?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.tsx => buttons.ts} | 56 +++---- .../ignitus-Layout/ignitus-NotFound/style.ts | 2 +- .../Components/interfaceButtons.tsx | 2 +- .../Atoms/interfaceButtons/style.ts | 146 ------------------ 4 files changed, 30 insertions(+), 176 deletions(-) rename src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/{ignitus-Buttons/Components/index.tsx => buttons.ts} (66%) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/buttons.ts similarity index 66% rename from src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx rename to src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/buttons.ts index 93ab7b78..32844b4a 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-Buttons/Components/index.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/buttons.ts @@ -1,6 +1,11 @@ import styled from '@emotion/styled'; -import * as C from '../../colors'; -import * as F from '../../fonts'; +import * as C from './colors'; +import * as F from './fonts'; +import { BtnSizeProps, getPadding, getFontSizes, getRadius } from '../../ignitus-Utilities/HelperFunctions/emotionHelpers'; + +export const ButtonsContainer = styled.div` + padding: 3rem; +`; export const Button = styled.button` padding: 16px 32px; @@ -21,9 +26,12 @@ export const Button = styled.button` } `; -export const PrimaryButton = styled(Button)` +export const PrimaryButton = styled(Button)` color: ${C.White}; background-color: ${C.IgnitusBlue}; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; &:hover, &:focus { background-color: ${C.SecondaryColor}; @@ -31,21 +39,29 @@ export const PrimaryButton = styled(Button)` } `; -export const SecondaryButton = styled(Button)` +export const SecondaryButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: ${C.White}; border: 2px solid ${C.IgnitusBlue}; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; `; -export const WhiteButton = styled(Button)` +export const WhiteButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: ${C.White}; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; `; -export const GreyButton = styled(Button)` +export const GreyButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: ${C.GreyLight}; - border: none; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; &:hover, &:focus { background-color: ${C.Grey2}; @@ -53,41 +69,38 @@ export const GreyButton = styled(Button)` } `; -export const OrangeButton = styled(Button)` +export const OrangeButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: ${C.SecondaryColor}; - border: none; + padding: ${props => getPadding(props)}; + font-size: ${props => getFontSizes(props)}; + border-radius: ${props => getRadius(props)}; `; export const DisabledButton = styled(Button)` color: ${C.GreySecondaryText}; background-color: ${C.GreyLight}; - border: none; - cursor: default; + cursor: not-allowed; `; export const DangerButton = styled(Button)` color: ${C.White}; background-color: ${C.Red}; - border: none; `; export const GreenButton = styled(Button)` color: ${C.White}; background-color: ${C.Green}; - border: none; `; export const YellowButton = styled(Button)` color: ${C.GreySecondaryText}; background-color: ${C.Yellow}; - border: none; `; export const TextButton = styled(Button)` color: ${C.IgnitusBlue}; background-color: inherit; - border: none; &:hover, &:focus { background-color: ${C.GreyLight}; @@ -98,7 +111,6 @@ export const TextButton = styled(Button)` export const TextButtonUnderline = styled(Button)` color: ${C.IgnitusBlue}; background-color: inherit; - border: none; text-decoration: underline; &:hover, &:focus { @@ -132,15 +144,3 @@ export const StyledButtonTopLeft = styled(Button)` export const RoundedPrimaryButton = styled(PrimaryButton)` border-radius: 30px; `; - -export const MediumPrimaryButton = styled(PrimaryButton)` - padding: 8px 20px; - font-size: ${F.SM}; - border-radius: 3px; -`; - -export const SmallPrimaryButton = styled(PrimaryButton)` - padding: 4px 15px; - font-size: ${F.XS}; - border-radius: 3px; -`; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts index a4fcbb75..cbc92475 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts @@ -3,7 +3,7 @@ import {keyframes} from '@emotion/core'; import * as C from '../../ignitus-Atoms/colors'; import {SM} from '../../ignitus-Atoms/fonts'; import {Paragraph} from '../../ignitus-Atoms/atoms'; -import {PrimaryButton} from '../../ignitus-Atoms/ignitus-Buttons/Components/index' +import {PrimaryButton} from '../../ignitus-Atoms/buttons'; export const eye = keyframes` 0% ,30% , 55%, 90% , 100% { diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx index c36c3128..fd1ee631 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/Components/interfaceButtons.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {ButtonsContainer} from '../style'; -import * as Button from '../style'; +import * as Button from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/buttons'; import {StyledHeading2, StyledHeading6} from '../../../../styles'; { diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/style.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/style.ts index 0c8de701..bb902f9d 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceButtons/style.ts @@ -1,151 +1,5 @@ import styled from '@emotion/styled'; -import * as C from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; -import * as F from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; -import { - BtnSizeProps, - getRadius, - getFontSizes, - getPadding, -} from '../../../../ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers'; export const ButtonsContainer = styled.div` padding: 3rem; `; - -export const Button = styled.button` - padding: 16px 32px; - text-align: center; - text-decoration: none; - transition: all 0.3s ease; - display: inline-block; - cursor: pointer; - border-radius: 5px; - line-height: 1rem; - margin: 5px; - border: none; - font-size: ${F.MD}; - font-weight: ${F.Normal}; - &:hover, - &:focus { - box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.24); - } -`; - -export const PrimaryButton = styled(Button)` - color: ${C.White}; - background-color: ${C.IgnitusBlue}; - padding: ${props => getPadding(props)}; - font-size: ${props => getFontSizes(props)}; - border-radius: ${props => getRadius(props)}; - &:hover, - &:focus { - background-color: ${C.SecondaryColor}; - color: ${C.IgnitusBlue}; - } -`; - -export const SecondaryButton = styled(Button)` - color: ${C.IgnitusBlue}; - background-color: ${C.White}; - border: 2px solid ${C.IgnitusBlue}; - padding: ${props => getPadding(props)}; - font-size: ${props => getFontSizes(props)}; - border-radius: ${props => getRadius(props)}; -`; - -export const WhiteButton = styled(Button)` - color: ${C.IgnitusBlue}; - background-color: ${C.White}; - padding: ${props => getPadding(props)}; - font-size: ${props => getFontSizes(props)}; - border-radius: ${props => getRadius(props)}; -`; - -export const GreyButton = styled(Button)` - color: ${C.IgnitusBlue}; - background-color: ${C.GreyLight}; - padding: ${props => getPadding(props)}; - font-size: ${props => getFontSizes(props)}; - border-radius: ${props => getRadius(props)}; - &:hover, - &:focus { - background-color: ${C.Grey2}; - color: ${C.IgnitusBlue}; - } -`; - -export const OrangeButton = styled(Button)` - color: ${C.IgnitusBlue}; - background-color: ${C.SecondaryColor}; - padding: ${props => getPadding(props)}; - font-size: ${props => getFontSizes(props)}; - border-radius: ${props => getRadius(props)}; -`; - -export const DisabledButton = styled(Button)` - color: ${C.GreySecondaryText}; - background-color: ${C.GreyLight}; - cursor: not-allowed; -`; - -export const DangerButton = styled(Button)` - color: ${C.White}; - background-color: ${C.Red}; -`; - -export const GreenButton = styled(Button)` - color: ${C.White}; - background-color: ${C.Green}; -`; - -export const YellowButton = styled(Button)` - color: ${C.GreySecondaryText}; - background-color: ${C.Yellow}; -`; - -export const TextButton = styled(Button)` - color: ${C.IgnitusBlue}; - background-color: inherit; - &:hover, - &:focus { - background-color: ${C.GreyLight}; - color: ${C.IgnitusBlue}; - } -`; - -export const TextButtonUnderline = styled(Button)` - color: ${C.IgnitusBlue}; - background-color: inherit; - text-decoration: underline; - &:hover, - &:focus { - background-color: ${C.GreyLight}; - color: ${C.IgnitusBlue}; - } -`; - -export const StyledButtonBottomRight = styled(Button)` - color: ${C.White}; - background-color: ${C.IgnitusBlue}; - border-radius: 0px 30px; - &:hover, - &:focus { - background-color: ${C.SecondaryColor}; - color: ${C.IgnitusBlue}; - } -`; - -export const StyledButtonTopLeft = styled(Button)` - color: ${C.White}; - background-color: ${C.IgnitusBlue}; - border-radius: 30px 0px; - &:hover, - &:focus { - background-color: ${C.SecondaryColor}; - color: ${C.IgnitusBlue}; - } -`; - -export const RoundedPrimaryButton = styled(PrimaryButton)` - border-radius: 30px; -`; From de2b73432a21ae4f92606cadede3c3f58965311d Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 14:41:03 +0100 Subject: [PATCH 31/41] =?UTF-8?q?Under=20Construction=20added=20to=20desig?= =?UTF-8?q?n-kit=20=E2=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-UserInterfaceKitRoutes/index.jsx | 5 +++++ .../Components/index.ts | 2 ++ .../Components/interfaceUnderConstruction.tsx | 15 +++++++++++++++ .../interfaceUnderConstruction/constants.ts | 1 + .../Layouts/interfaceUnderConstruction/style.ts | 7 +++++++ 5 files changed, 30 insertions(+) create mode 100644 src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/index.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/constants.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index ef9109c2..65269e33 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -10,6 +10,7 @@ import { interfaceTypography } from '../../ignitus-UserInterfaceKit/Components/A import { interfaceCards } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceCards/Components'; import { interfaceCardLayout } from '../../ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components'; import { interfaceNotFound } from '../../ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components'; +import { interfaceUnderConstruction } from '../../ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components'; const Container = styled.div` @@ -56,6 +57,10 @@ const UserInterfaceKitRoutes = () => ( path="/interface/notFound" component={interfaceNotFound} /> + ); diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/index.ts new file mode 100644 index 00000000..2652e17f --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/index.ts @@ -0,0 +1,2 @@ + +export { default as interfaceUnderConstruction } from './interfaceUnderConstruction'; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx new file mode 100644 index 00000000..136ffa16 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import {StyledHeading2} from '../../../../styles'; +import {Notfound} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index'; +import {UnderConstructionContainer} from '../style'; +import {WebsiteUnderConstruction} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components/index'; + +const interfaceUnderConstruction = () => ( + + UnderConstruction ★ +
+ + +); + +export default interfaceUnderConstruction; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/constants.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/constants.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/constants.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts new file mode 100644 index 00000000..7a51fb88 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; +import {flexibleColDiv} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; + +export const UnderConstructionContainer = styled(flexibleColDiv)` + padding: 2rem; + height: 25rem; +`; From 556b9f47a4d2051524613045d4525f365cb61168 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 15:07:21 +0100 Subject: [PATCH 32/41] =?UTF-8?q?Headings/Paragraphs=20migrated=20to=20typ?= =?UTF-8?q?ography.=20=E2=98=98=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-Atoms/atoms.ts | 43 ----------------- .../ignitus-Atoms/typography.ts | 46 +++++++++++++++++++ .../ignitus-Layout/ignitus-NotFound/style.ts | 2 +- .../Components/index.tsx | 2 +- .../ignitus-OppurtunityList/styles.ts | 2 +- .../Atoms/interfaceColors/Components/index.ts | 1 + .../Components/interfaceTypography.tsx | 2 +- .../InterfaceSideNavigation/style.ts | 2 +- src/ignitus-UserInterfaceKit/styles.ts | 2 +- 9 files changed, 53 insertions(+), 49 deletions(-) create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/index.ts diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts index cefbdf9d..012cc27f 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts @@ -5,49 +5,6 @@ import * as F from './fonts'; const breakpoints = [576, 768, 992, 1200]; const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`); -export const Heading1 = styled.h1` - font-weight: ${F.Medium}; - font-size: ${F.XXXL}; - color: ${C.IgnitusBlue}; -`; - -export const Heading2 = styled.h2` - font-weight: ${F.Normal}; - font-size: ${F.XXL}; - color: ${C.IgnitusBlue}; -`; - -export const Heading3 = styled.h3` - font-weight: ${F.Medium}; - font-size: ${F.XL}; - color: ${C.IgnitusBlue}; -`; - -export const Heading4 = styled.h4` - font-weight: ${F.Normal}; - font-size: ${F.LG}; - color: ${C.IgnitusBlue}; -`; - -export const Heading5 = styled.h5` - font-weight: ${F.Bold}; - font-size: ${F.MD}; - color: ${C.IgnitusBlue}; -`; - -export const Heading6 = styled.h6` - font-weight: ${F.Medium}; - font-size: ${F.SM}; - color: ${C.IgnitusBlue}; -`; - -export const Paragraph = styled.p` - font-size: ${F.SM}; - font-weight: ${F.Normal}; - color: ${C.GreyText}; - margin: 0; -`; - export const Separator = styled.hr` display: block; margin-top: 0.5rem; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography.ts new file mode 100644 index 00000000..aedda5eb --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography.ts @@ -0,0 +1,46 @@ +import styled from '@emotion/styled'; +import * as C from './colors'; +import * as F from './fonts'; + +export const Heading1 = styled.h1` + font-weight: ${F.Medium}; + font-size: ${F.XXXL}; + color: ${C.IgnitusBlue}; +`; + +export const Heading2 = styled.h2` + font-weight: ${F.Normal}; + font-size: ${F.XXL}; + color: ${C.IgnitusBlue}; +`; + +export const Heading3 = styled.h3` + font-weight: ${F.Medium}; + font-size: ${F.XL}; + color: ${C.IgnitusBlue}; +`; + +export const Heading4 = styled.h4` + font-weight: ${F.Normal}; + font-size: ${F.LG}; + color: ${C.IgnitusBlue}; +`; + +export const Heading5 = styled.h5` + font-weight: ${F.Bold}; + font-size: ${F.MD}; + color: ${C.IgnitusBlue}; +`; + +export const Heading6 = styled.h6` + font-weight: ${F.Medium}; + font-size: ${F.SM}; + color: ${C.IgnitusBlue}; +`; + +export const Paragraph = styled.p` + font-size: ${F.SM}; + font-weight: ${F.Normal}; + color: ${C.GreyText}; + margin: 0; +`; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts index cbc92475..1ee9bdf3 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/style.ts @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import {keyframes} from '@emotion/core'; import * as C from '../../ignitus-Atoms/colors'; import {SM} from '../../ignitus-Atoms/fonts'; -import {Paragraph} from '../../ignitus-Atoms/atoms'; +import {Paragraph} from '../../ignitus-Atoms/typography'; import {PrimaryButton} from '../../ignitus-Atoms/buttons'; export const eye = keyframes` diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components/index.tsx index aa54627b..b55386e5 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components/index.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components/index.tsx @@ -5,7 +5,7 @@ import underConstruction from '../../../ignitus-Assets/ignitus-Images/img-Png/un import { Heading3, Paragraph, -} from '../../../ignitus-Atoms/atoms'; +} from '../../../ignitus-Atoms/typography'; export const WebsiteUnderConstruction = () => ( diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/styles.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/styles.ts index cb1ea7a9..5bb7d3a7 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/styles.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-OppurtunityList/styles.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import * as T from '../../ignitus-Atoms/atoms'; +import * as T from '../../ignitus-Atoms/typography'; import * as C from '../../ignitus-Atoms/colors'; import { flexibleColDiv, diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/index.ts new file mode 100644 index 00000000..8cec2e9c --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/index.ts @@ -0,0 +1 @@ +export {}; \ No newline at end of file diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx index 388d3b8a..f69ae493 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceTypography/Components/interfaceTypography.tsx @@ -9,7 +9,7 @@ import { Heading5, Heading6, Paragraph, -} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography'; const interfaceTypography = () => ( diff --git a/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts index 91ef42aa..def33fd1 100644 --- a/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import {Heading3} from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +import {Heading3} from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography'; import * as C from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; import Icon from '../../ignitus-Shared/ignitus-Utilities/Components/icon'; import {flexibleRowDiv} from '../../ignitus-Shared/ignitus-DesignSystem/shared'; diff --git a/src/ignitus-UserInterfaceKit/styles.ts b/src/ignitus-UserInterfaceKit/styles.ts index b4783b24..a2e1a191 100644 --- a/src/ignitus-UserInterfaceKit/styles.ts +++ b/src/ignitus-UserInterfaceKit/styles.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import * as A from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; +import * as A from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography'; import {GreyText} from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; import {Medium} from '../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; From 7b00d7a2d96ccbed7d8ae614691d041177bb8825 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 15:12:44 +0100 Subject: [PATCH 33/41] =?UTF-8?q?Media=20Queries=20migrated=20to=20media.t?= =?UTF-8?q?s=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ignitus-AboutPage/ignitus-About/Styles/index.ts | 4 +--- src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts | 4 +--- src/ignitus-HomePage/ignitus-Contributors/Styles/index.ts | 4 +--- .../ignitus-WhatWeDo/Styles/{index.js => index.ts} | 4 +--- .../ignitus-DesignSystem/ignitus-Atoms/atoms.ts | 5 +---- .../ignitus-DesignSystem/ignitus-Atoms/media.ts | 4 ++++ src/ignitus-Shared/ignitus-DesignSystem/shared.ts | 4 +--- 7 files changed, 10 insertions(+), 19 deletions(-) rename src/ignitus-HomePage/ignitus-WhatWeDo/Styles/{index.js => index.ts} (90%) create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media.ts diff --git a/src/ignitus-AboutPage/ignitus-About/Styles/index.ts b/src/ignitus-AboutPage/ignitus-About/Styles/index.ts index 77b72ad8..4e2f270d 100644 --- a/src/ignitus-AboutPage/ignitus-About/Styles/index.ts +++ b/src/ignitus-AboutPage/ignitus-About/Styles/index.ts @@ -1,9 +1,7 @@ import styled from '@emotion/styled'; import * as T from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; - -const breakpoints: number[] = [576, 768, 992, 1200]; -const mq: string[] = breakpoints.map(bp => `@media (min-width: ${bp}px)`); +import { mq } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media'; export const AboutSection = styled.section` font-weight: ${F.Normal}; diff --git a/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts b/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts index adc6577b..f9487704 100644 --- a/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts +++ b/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts @@ -4,6 +4,7 @@ import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/c import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; import * as T from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; import Icon from "../../../ignitus-Shared/ignitus-Utilities/Components/icon"; +import { mq } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media'; type LinkWrapperProps = { toggle: boolean; @@ -12,9 +13,6 @@ type TeamItemTitleProps = { color: string; }; -const breakpoints = [576, 768, 992, 1200]; -const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`); - export const TeamItemTitle = styled.h6` margin-top: 1rem; font-weight: ${F.Normal}; diff --git a/src/ignitus-HomePage/ignitus-Contributors/Styles/index.ts b/src/ignitus-HomePage/ignitus-Contributors/Styles/index.ts index 812886aa..85682798 100644 --- a/src/ignitus-HomePage/ignitus-Contributors/Styles/index.ts +++ b/src/ignitus-HomePage/ignitus-Contributors/Styles/index.ts @@ -3,9 +3,7 @@ import styled from '@emotion/styled'; import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; import * as T from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; import HeartIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/heartIcon/heartIcon'; - -const breakpoints: number[] = [576, 768, 992, 1200]; -const mq: string[] = breakpoints.map(bp => `@media (min-width: ${bp}px)`); +import { mq } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media'; export const Icon = styled.span` i { color: ${C.Red};} diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/Styles/index.js b/src/ignitus-HomePage/ignitus-WhatWeDo/Styles/index.ts similarity index 90% rename from src/ignitus-HomePage/ignitus-WhatWeDo/Styles/index.js rename to src/ignitus-HomePage/ignitus-WhatWeDo/Styles/index.ts index 11a5c299..7821fe4e 100644 --- a/src/ignitus-HomePage/ignitus-WhatWeDo/Styles/index.js +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/Styles/index.ts @@ -2,9 +2,7 @@ import styled from '@emotion/styled'; import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts'; - -const breakpoints = [576, 768, 992, 1200]; -const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`); +import { mq } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media'; export const Icon = styled.span` i { color: ${C.IgnitusBlue};} diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts index 012cc27f..f481c63d 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts @@ -1,9 +1,6 @@ import styled from '@emotion/styled'; import * as C from './colors'; -import * as F from './fonts'; - -const breakpoints = [576, 768, 992, 1200]; -const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`); +import { mq } from './media'; export const Separator = styled.hr` display: block; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media.ts new file mode 100644 index 00000000..04926d98 --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media.ts @@ -0,0 +1,4 @@ +export const breakpoints: number[] = [576, 768, 992, 1200]; +export const mq: string[] = breakpoints.map( + bp => `@media (min-width: ${bp}px)`, +); diff --git a/src/ignitus-Shared/ignitus-DesignSystem/shared.ts b/src/ignitus-Shared/ignitus-DesignSystem/shared.ts index e1add586..5fbe0b63 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/shared.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/shared.ts @@ -1,9 +1,7 @@ import styled from '@emotion/styled'; import * as C from './ignitus-Atoms/colors'; import * as F from './ignitus-Atoms/fonts'; - -const breakpoints = [576, 768, 992, 1200]; -const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`); +import { mq } from './ignitus-Atoms/media'; export const Title = styled.h3` font-weight: ${F.Normal}; From 213695cc907bd543d14e919de0087dba38de5787 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 15:47:06 +0100 Subject: [PATCH 34/41] Types renaming & components migration to TS. --- .../ignitus-CoreTeam/Components/team.tsx | 4 ++-- src/ignitus-AboutPage/ignitus-CoreTeam/constants.ts | 4 ++-- src/ignitus-AboutPage/ignitus-CoreTeam/types.ts | 4 ++-- .../Components/{WhatWeProvide.jsx => WhatWeDo.tsx} | 4 ++-- .../ignitus-WhatWeDo/Components/index.js | 2 -- .../ignitus-WhatWeDo/Components/index.ts | 2 ++ .../ignitus-WhatWeDo/Containers/WhatWeDo.ts | 1 + .../ignitus-WhatWeDo/Containers/WhatWeProvide.js | 0 .../ignitus-WhatWeDo/actionTypes.js | 0 .../ignitus-WhatWeDo/actionTypes.ts | 1 + src/ignitus-HomePage/ignitus-WhatWeDo/actions.js | 0 src/ignitus-HomePage/ignitus-WhatWeDo/actions.ts | 1 + .../ignitus-WhatWeDo/{constants.js => constants.ts} | 13 +++++++++---- .../ignitus-WhatWeDo/{index.js => index.ts} | 0 src/ignitus-HomePage/ignitus-WhatWeDo/reducers.js | 0 src/ignitus-HomePage/ignitus-WhatWeDo/reducers.ts | 1 + src/ignitus-HomePage/ignitus-WhatWeDo/sagas.js | 0 src/ignitus-HomePage/ignitus-WhatWeDo/sagas.ts | 1 + src/ignitus-HomePage/ignitus-WhatWeDo/selectors.js | 0 src/ignitus-HomePage/ignitus-WhatWeDo/selectors.ts | 1 + src/ignitus-HomePage/ignitus-WhatWeDo/types.ts | 5 +++++ src/ignitus-Routes/ignitus-PublicRoutes/index.jsx | 4 ++-- .../InterfaceSideNavigation/types.ts | 4 ++-- 23 files changed, 34 insertions(+), 18 deletions(-) rename src/ignitus-HomePage/ignitus-WhatWeDo/Components/{WhatWeProvide.jsx => WhatWeDo.tsx} (92%) delete mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/Components/index.js create mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/Components/index.ts create mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/Containers/WhatWeDo.ts delete mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/Containers/WhatWeProvide.js delete mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/actionTypes.js create mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/actionTypes.ts delete mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/actions.js create mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/actions.ts rename src/ignitus-HomePage/ignitus-WhatWeDo/{constants.js => constants.ts} (64%) rename src/ignitus-HomePage/ignitus-WhatWeDo/{index.js => index.ts} (100%) delete mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/reducers.js create mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/reducers.ts delete mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/sagas.js create mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/sagas.ts delete mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/selectors.js create mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/selectors.ts create mode 100644 src/ignitus-HomePage/ignitus-WhatWeDo/types.ts diff --git a/src/ignitus-AboutPage/ignitus-CoreTeam/Components/team.tsx b/src/ignitus-AboutPage/ignitus-CoreTeam/Components/team.tsx index b3c27f2f..4b48a44e 100644 --- a/src/ignitus-AboutPage/ignitus-CoreTeam/Components/team.tsx +++ b/src/ignitus-AboutPage/ignitus-CoreTeam/Components/team.tsx @@ -6,7 +6,7 @@ import {Data} from '../constants'; import {withErrorBoundary} from '../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary'; import * as S from '../Styles'; import * as T from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; -import {coreTeam, TeamItemProps} from '../types'; +import {Team, TeamItemProps} from '../types'; import {AppIcon} from '../../../ignitus-Shared/types/iconsTypes/enums'; const PureCoreTeam = ({team}: any) => ( @@ -42,7 +42,7 @@ const TeamItem = ({ }; const CoreTeam = () => { - const team = Data.map((item: coreTeam) => { + const team = Data.map((item: Team) => { return ; }); return ; diff --git a/src/ignitus-AboutPage/ignitus-CoreTeam/constants.ts b/src/ignitus-AboutPage/ignitus-CoreTeam/constants.ts index f03cabaf..a0d7bee9 100644 --- a/src/ignitus-AboutPage/ignitus-CoreTeam/constants.ts +++ b/src/ignitus-AboutPage/ignitus-CoreTeam/constants.ts @@ -1,6 +1,6 @@ // eslint-disable-next-line import/prefer-default-export -import { coreTeam } from "./types"; -export const Data: coreTeam[] = [ +import { Team } from "./types"; +export const Data: Team[] = [ { title: 'Ayush Pareek', img: diff --git a/src/ignitus-AboutPage/ignitus-CoreTeam/types.ts b/src/ignitus-AboutPage/ignitus-CoreTeam/types.ts index 7bf82a75..af6b31a2 100644 --- a/src/ignitus-AboutPage/ignitus-CoreTeam/types.ts +++ b/src/ignitus-AboutPage/ignitus-CoreTeam/types.ts @@ -1,4 +1,4 @@ -export type coreTeam = { +export type Team = { title: string; img: string; description: string; @@ -8,5 +8,5 @@ export type coreTeam = { export type TeamItemProps = { key: string; - item: coreTeam; + item: Team; } \ No newline at end of file diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/Components/WhatWeProvide.jsx b/src/ignitus-HomePage/ignitus-WhatWeDo/Components/WhatWeDo.tsx similarity index 92% rename from src/ignitus-HomePage/ignitus-WhatWeDo/Components/WhatWeProvide.jsx rename to src/ignitus-HomePage/ignitus-WhatWeDo/Components/WhatWeDo.tsx index 1e63a2d9..acba0597 100644 --- a/src/ignitus-HomePage/ignitus-WhatWeDo/Components/WhatWeProvide.jsx +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/Components/WhatWeDo.tsx @@ -4,7 +4,7 @@ import * as T from '../../../ignitus-Shared/ignitus-DesignSystem/shared'; import { withErrorBoundary } from '../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary'; import { data } from '../constants'; -const WhatWeProvide = () => ( +const WhatWeDo = () => ( What we provide? @@ -32,4 +32,4 @@ const WhatWeProvide = () => ( ); -export default withErrorBoundary(WhatWeProvide); +export default withErrorBoundary(WhatWeDo); diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/Components/index.js b/src/ignitus-HomePage/ignitus-WhatWeDo/Components/index.js deleted file mode 100644 index db8e22be..00000000 --- a/src/ignitus-HomePage/ignitus-WhatWeDo/Components/index.js +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-disable import/prefer-default-export */ -export { default as WhatWeProvide } from './WhatWeProvide'; diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/Components/index.ts b/src/ignitus-HomePage/ignitus-WhatWeDo/Components/index.ts new file mode 100644 index 00000000..0a6af91a --- /dev/null +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/Components/index.ts @@ -0,0 +1,2 @@ +/* eslint-disable import/prefer-default-export */ +export { default as WhatWeDo } from './WhatWeDo'; diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/Containers/WhatWeDo.ts b/src/ignitus-HomePage/ignitus-WhatWeDo/Containers/WhatWeDo.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/Containers/WhatWeDo.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/Containers/WhatWeProvide.js b/src/ignitus-HomePage/ignitus-WhatWeDo/Containers/WhatWeProvide.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/actionTypes.js b/src/ignitus-HomePage/ignitus-WhatWeDo/actionTypes.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/actionTypes.ts b/src/ignitus-HomePage/ignitus-WhatWeDo/actionTypes.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/actionTypes.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/actions.js b/src/ignitus-HomePage/ignitus-WhatWeDo/actions.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/actions.ts b/src/ignitus-HomePage/ignitus-WhatWeDo/actions.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/actions.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/constants.js b/src/ignitus-HomePage/ignitus-WhatWeDo/constants.ts similarity index 64% rename from src/ignitus-HomePage/ignitus-WhatWeDo/constants.js rename to src/ignitus-HomePage/ignitus-WhatWeDo/constants.ts index 79cb1d74..15566514 100644 --- a/src/ignitus-HomePage/ignitus-WhatWeDo/constants.js +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/constants.ts @@ -1,19 +1,24 @@ +import {WhatWeDo} from './types'; + /* eslint-disable import/prefer-default-export */ -export const data = [ +export const data: WhatWeDo[] = [ { - src: 'https://storage.googleapis.com/ignitus_assets/ig-section/Section_internship.png', + src: + 'https://storage.googleapis.com/ignitus_assets/ig-section/Section_internship.png', title: 'Internships', description: "Top quality 'Ignitus-Exclusive' internships and freelance work with professors, researchers, companies and professionals from selected destinations.", }, { - src: 'https://storage.googleapis.com/ignitus_assets/ig-section/Section_courses.png', + src: + 'https://storage.googleapis.com/ignitus_assets/ig-section/Section_courses.png', title: 'Courses', description: 'Unique, well researched and goal-oriented courses designed to boost relevant skill acquisition with minimal effort and time.', }, { - src: 'https://storage.googleapis.com/ignitus_assets/ig-section/Section_community.png', + src: + 'https://storage.googleapis.com/ignitus_assets/ig-section/Section_community.png', title: 'Experts Community', description: 'Guidance from an unparalleled network of professors,experts and industry professionals supervising internal projects with selected students', diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/index.js b/src/ignitus-HomePage/ignitus-WhatWeDo/index.ts similarity index 100% rename from src/ignitus-HomePage/ignitus-WhatWeDo/index.js rename to src/ignitus-HomePage/ignitus-WhatWeDo/index.ts diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/reducers.js b/src/ignitus-HomePage/ignitus-WhatWeDo/reducers.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/reducers.ts b/src/ignitus-HomePage/ignitus-WhatWeDo/reducers.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/reducers.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/sagas.js b/src/ignitus-HomePage/ignitus-WhatWeDo/sagas.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/sagas.ts b/src/ignitus-HomePage/ignitus-WhatWeDo/sagas.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/sagas.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/selectors.js b/src/ignitus-HomePage/ignitus-WhatWeDo/selectors.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/selectors.ts b/src/ignitus-HomePage/ignitus-WhatWeDo/selectors.ts new file mode 100644 index 00000000..cb0ff5c3 --- /dev/null +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/selectors.ts @@ -0,0 +1 @@ +export {}; diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/types.ts b/src/ignitus-HomePage/ignitus-WhatWeDo/types.ts new file mode 100644 index 00000000..9063a5f2 --- /dev/null +++ b/src/ignitus-HomePage/ignitus-WhatWeDo/types.ts @@ -0,0 +1,5 @@ +export type WhatWeDo = { + src: string; + title: string; + description: string; +}; diff --git a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx index 5c30e932..c2adc036 100644 --- a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx @@ -7,7 +7,7 @@ import Contributors from '../../ignitus-HomePage/ignitus-Contributors'; import GetStarted from '../../ignitus-HomePage/ignitus-GetStarted'; import Introduction from '../../ignitus-HomePage/ignitus-Introduction'; import Testimonial from '../../ignitus-HomePage/ignitus-Testimonial'; -import WhatWeProvide from '../../ignitus-HomePage/ignitus-WhatWeDo'; +import WhatWeDo from '../../ignitus-HomePage/ignitus-WhatWeDo'; import Partner from '../../ignitus-HomePage/ignitus-Partners'; import LoginProfessor from '../../ignitus-Authentication/ignitus-ProfessorLogin'; @@ -52,7 +52,7 @@ export const PublicRoutes = () => { render={() => (
- + diff --git a/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/types.ts b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/types.ts index 30f69cdd..63da73d6 100644 --- a/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/types.ts +++ b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/types.ts @@ -1,11 +1,11 @@ export type Edges = { node: { title: string; - children: children[]; + children: Children[]; }; }; -export type children = { +export type Children = { title: string; route: string | null; }; \ No newline at end of file From f92923f778edbc38a8b22c831e8279a6b91384c3 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 16:18:19 +0100 Subject: [PATCH 35/41] =?UTF-8?q?Refactoring=20=E2=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-PublicRoutes/index.jsx | 3 +-- .../Components/interfaceNotFound.tsx | 12 +++++++----- .../Layouts/interfaceNotFound/style.ts | 7 ++++++- .../Components/interfaceUnderConstruction.tsx | 11 +++++++---- .../Layouts/interfaceUnderConstruction/style.ts | 8 ++++++-- .../Components/interfaceNavigation.tsx | 17 +++++++++++------ .../Organisms/interfaceNavigation/style.ts | 6 +++++- 7 files changed, 43 insertions(+), 21 deletions(-) diff --git a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx index c2adc036..a8631770 100644 --- a/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-PublicRoutes/index.jsx @@ -36,8 +36,7 @@ const Loading = () => ( ); const AboutUs = Loadable({ - loader: () => - import('../../ignitus-AboutPage/ignitus-About/Components/About'), + loader: () => import('../../ignitus-AboutPage/ignitus-About/Components/About'), loading: Loading, }); diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx index f3ab56be..23a59ec9 100644 --- a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components/interfaceNotFound.tsx @@ -1,14 +1,16 @@ import React from 'react'; import {StyledHeading2} from '../../../../styles'; import {Notfound} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index'; -import { NotFoundContainer } from '../style'; +import {NotFoundContainer, Container} from '../style'; const interfaceNotFound = () => ( - - Not Found ★ + + Not Found
- - + + + + ); export default interfaceNotFound; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts index 2d8746aa..1ec68a4f 100644 --- a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts @@ -1,7 +1,12 @@ import styled from '@emotion/styled'; import {flexibleColDiv} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; -export const NotFoundContainer = styled(flexibleColDiv)` +export const NotFoundContainer = styled.div` + display: flex; + flex-direction: column; +`; + +export const Container = styled.div` padding: 2rem; height: 25rem; `; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx index 136ffa16..ec2fb86a 100644 --- a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx @@ -1,15 +1,18 @@ import React from 'react'; import {StyledHeading2} from '../../../../styles'; import {Notfound} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index'; -import {UnderConstructionContainer} from '../style'; +import {UnderConstructionContainer, Container} from '../style'; import {WebsiteUnderConstruction} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components/index'; const interfaceUnderConstruction = () => ( - + UnderConstruction ★
- - + + + + + ); export default interfaceUnderConstruction; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts index 7a51fb88..b5a27e01 100644 --- a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts @@ -1,7 +1,11 @@ import styled from '@emotion/styled'; import {flexibleColDiv} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; -export const UnderConstructionContainer = styled(flexibleColDiv)` +export const UnderConstructionContainer = styled.div` + display: flex; + flex-direction: column; +`; + +export const Container = styled.div` padding: 2rem; - height: 25rem; `; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components/interfaceNavigation.tsx b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components/interfaceNavigation.tsx index 158a27d2..6c855b55 100644 --- a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components/interfaceNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/Components/interfaceNavigation.tsx @@ -1,14 +1,19 @@ import React from 'react'; import UserSettingsSideNavigation from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-UserSettingsSideNavigation/Components'; import MessageSideNavigation from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components'; -import {NavigationContainer} from '../style'; +import {NavigationContainer, Container} from '../style'; import DashboardNavigation from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-DashboardSideNavigation/Components/index'; +import {StyledHeading2} from '../../../../styles'; const interfaceNavigation = () => ( - - - - - + + Navigation +
+ + + + + + ); export default interfaceNavigation; diff --git a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/style.ts b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/style.ts index 6a4c50f9..6e883e17 100644 --- a/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Organisms/interfaceNavigation/style.ts @@ -1,7 +1,11 @@ import styled from '@emotion/styled'; +export const Container = styled.div` + padding: 2rem; + flex: 1; +`; + export const NavigationContainer = styled.div` - padding: 3rem; display: flex; flex-direction: row; justify-content: space-evenly; From fb28d5b4b17a84bf616af4b7343ff761f766e6c9 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 16:36:18 +0100 Subject: [PATCH 36/41] =?UTF-8?q?Ignitus=20full-logo=20added=20to=20list?= =?UTF-8?q?=20of=20svgs.=20=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitusFullLogo/ignitusFullLogo.tsx | 88 +++++++++++++++++++ .../ignitus-Icons/ignitusFullLogo/index.ts | 1 + .../ignitus-Utilities/Components/icon.tsx | 4 + src/ignitus-Shared/types/iconsTypes/enums.ts | 2 + .../Components/interfaceSideNavigation.tsx | 4 + .../InterfaceSideNavigation/style.ts | 7 ++ 6 files changed, 106 insertions(+) create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/ignitusFullLogo/ignitusFullLogo.tsx create mode 100644 src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/ignitusFullLogo/index.ts diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/ignitusFullLogo/ignitusFullLogo.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/ignitusFullLogo/ignitusFullLogo.tsx new file mode 100644 index 00000000..60ca6cf0 --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/ignitusFullLogo/ignitusFullLogo.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import {HTMLAttributes} from 'react'; +type Props = HTMLAttributes; + +const IgnitusFullLogo = ({title = 'KeyBoardArrowDown', ...rest}: Props) => { + console.log('dd', {...rest}); + return ( + + ); +}; + +export default IgnitusFullLogo; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/ignitusFullLogo/index.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/ignitusFullLogo/index.ts new file mode 100644 index 00000000..1d7cc206 --- /dev/null +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/ignitusFullLogo/index.ts @@ -0,0 +1 @@ +export { default } from './ignitusFullLogo'; diff --git a/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx b/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx index 00f27229..316d1b4a 100644 --- a/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx +++ b/src/ignitus-Shared/ignitus-Utilities/Components/icon.tsx @@ -13,6 +13,7 @@ import NetworkIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons import MentorsIcon from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/mentorsIcon/mentorsIcon'; import KeyBoardArrowDown from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowDown/keyBoardArrowDown'; import KeyBoardArrowRight from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/keyBoardArrowRight/KeyBoardArrowRight'; +import IgnitusFullLogo from '../../ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/ignitusFullLogo'; type Props = { name: AppIcon; @@ -58,6 +59,9 @@ const Icon = ({name, ...rest}: Props) => { case AppIcon.KeyBoardArrowRight: return ; + + case AppIcon.IgnitusFullLogo: + return ; } }; diff --git a/src/ignitus-Shared/types/iconsTypes/enums.ts b/src/ignitus-Shared/types/iconsTypes/enums.ts index 541aaab0..a093f13d 100644 --- a/src/ignitus-Shared/types/iconsTypes/enums.ts +++ b/src/ignitus-Shared/types/iconsTypes/enums.ts @@ -1,3 +1,4 @@ + export enum AppIcon { ApplyIcon = 'ApplyIcon', AngelListIcon = 'AngelListIcon', @@ -12,4 +13,5 @@ export enum AppIcon { MentorsIcon = 'MentorsIcon', KeyBoardArrowDown = 'KeyBoardArrowDown', KeyBoardArrowRight = 'KeyBoardArrowRight', + IgnitusFullLogo = 'IgnitusFullLogo', } diff --git a/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx index c9feed93..b2bdbbfb 100644 --- a/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx +++ b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/Components/interfaceSideNavigation.tsx @@ -14,6 +14,10 @@ import { const interfaceSideNavigation = () => { return ( + + + + diff --git a/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts index def33fd1..328b0121 100644 --- a/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts +++ b/src/ignitus-UserInterfaceKit/InterfaceSideNavigation/style.ts @@ -51,3 +51,10 @@ export const HeadingArrowContainer = styled(flexibleRowDiv)` justify-content: unset; cursor: pointer; `; + +export const StyledLogo = styled(Icon)` + height: 3rem; + path { + fill: ${C.IgnitusBlue}; + } +`; From fb9655394f3402d9e023b88b447737932604d301 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 17:39:53 +0100 Subject: [PATCH 37/41] =?UTF-8?q?Atoms=20&=20Colors=20separation=20?= =?UTF-8?q?=E2=98=98=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-DesignSystem/ignitus-Atoms/atoms.ts | 2 +- .../ignitus-DesignSystem/ignitus-Atoms/colors.ts | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts index f481c63d..d042862c 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts @@ -88,4 +88,4 @@ export const flexibleColDiv = styled.div` justify-content: center; `; -/* Shared between partners & contirbutors component. */ +/* Shared between partners & contributors component. */ diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors.ts index a9fe5f8b..635aa3fc 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors.ts @@ -1,16 +1,23 @@ -export const Black: string = '#000000'; -export const White: string = '#ffffff'; +// Primary colors export const IgnitusBlue: string = '#000066'; -export const GreyBackground: string = '#F7F7F7'; export const SecondaryColor: string = '#F9BF64'; +export const OtherBlue: string = '#7272F4'; + +//Grey shades export const GreyText: string = '#2D2D2D'; +export const GreyBackground: string = '#F7F7F7'; export const GreySecondaryText: string = '#4D4D4D'; export const GreyLight: string = '#E0E0E0'; export const Grey1: string = '#9C9C9C'; export const Grey2: string = '#C4C4C4'; + +// basic Colors +export const Black: string = '#000000'; +export const White: string = '#ffffff'; export const Red: string = '#dd3030'; export const Green: string = '#209653'; export const Yellow: string = '#ffd747'; -export const OtherBlue: string = '#7272F4'; + +// social platform colors export const TwitterIconColor: string = ' #1dcaff'; export const LinkedinIconColor: string = '#2867B2'; From c8a10e8d21bf1c12719885b9618a64224d82e3d7 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 17:40:35 +0100 Subject: [PATCH 38/41] =?UTF-8?q?Colors=20added=20to=20design-kit=20?= =?UTF-8?q?=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ignitus-UserInterfaceKitRoutes/index.jsx | 6 ++++ .../HelperFunctions/emotionHelpers.ts | 12 +++++++ .../Atoms/interfaceColors/Components/index.ts | 2 +- .../Components/interfaceColors.tsx | 31 +++++++++++++++++++ .../Atoms/interfaceColors/constants.ts | 27 ++++++++++++++++ .../Atoms/interfaceColors/styles.ts | 17 ++++++++++ .../Components/Atoms/interfaceColors/types.ts | 3 ++ 7 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/interfaceColors.tsx create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/constants.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/styles.ts create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/types.ts diff --git a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx index 65269e33..89400294 100644 --- a/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx +++ b/src/ignitus-Routes/ignitus-UserInterfaceKitRoutes/index.jsx @@ -11,6 +11,7 @@ import { interfaceCards } from '../../ignitus-UserInterfaceKit/Components/Atoms/ import { interfaceCardLayout } from '../../ignitus-UserInterfaceKit/Components/Organisms/interfaceCardLayout/Components'; import { interfaceNotFound } from '../../ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/Components'; import { interfaceUnderConstruction } from '../../ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components'; +import { interfaceColors } from '../../ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components'; const Container = styled.div` @@ -61,6 +62,11 @@ const UserInterfaceKitRoutes = () => ( path="/interface/underConstruction" component={interfaceUnderConstruction} /> + + ); diff --git a/src/ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers.ts b/src/ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers.ts index 4321b943..847bab8e 100644 --- a/src/ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers.ts +++ b/src/ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers.ts @@ -1,4 +1,11 @@ import {SM, MD, XXS} from '../../ignitus-DesignSystem/ignitus-Atoms/fonts'; +import { + GreyBackground, + White, + GreyLight, +} from '../../ignitus-DesignSystem/ignitus-Atoms/colors'; + +const hexArray = [GreyBackground, White, GreyLight]; export const getPadding = (props: BtnSizeProps) => { if (props.medium) { @@ -32,3 +39,8 @@ export type BtnSizeProps = { medium?: boolean; small?: boolean; }; + +export const hexDifferentiate = color => { + const result = hexArray.indexOf(color); + return result === -1 ? false : true; +}; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/index.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/index.ts index 8cec2e9c..53cd95ba 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/index.ts +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/index.ts @@ -1 +1 @@ -export {}; \ No newline at end of file +export {default as interfaceColors} from './interfaceColors'; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/interfaceColors.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/interfaceColors.tsx new file mode 100644 index 00000000..6d3f0019 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/Components/interfaceColors.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import * as C from '../styles'; +import {StyledHeading2} from '../../../../styles'; +import { + PrimaryColors, + GreyShades, + BasicColors, + SocialPlatformColors, +} from '../constants'; + +const interfaceColors = () => ( + + Primary Colors + +
+ Grey Shades + +
+ Basic Colors + +
+ Social Platforms Colors + +
+ +); + +const ColorsMapper = ({colors}) => + colors.map((color: string) => {color} ); + +export default interfaceColors; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/constants.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/constants.ts new file mode 100644 index 00000000..596b76db --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/constants.ts @@ -0,0 +1,27 @@ +import * as C from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; + +export const PrimaryColors: string[] = [ + C.IgnitusBlue, + C.SecondaryColor, + C.OtherBlue, +]; + +export const GreyShades: string[] = [ + C.GreyText, + C.GreyBackground, + C.GreySecondaryText, + C.GreyLight, + C.Grey1, + C.Grey2, +]; +export const BasicColors: string[] = [ + C.Black, + C.White, + C.Red, + C.Green, + C.Yellow, +]; +export const SocialPlatformColors: string[] = [ + C.TwitterIconColor, + C.LinkedinIconColor, +]; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/styles.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/styles.ts new file mode 100644 index 00000000..aac8edea --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/styles.ts @@ -0,0 +1,17 @@ +import styled from '@emotion/styled'; +import {color} from './types'; +import * as C from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors'; +import { hexDifferentiate } from '../../../../ignitus-Shared/ignitus-Utilities/HelperFunctions/emotionHelpers'; + +export const ColorsContainer = styled.div` + padding: 3rem; +`; + +export const Color = styled.div` + display: inline-block; + padding: 0.5rem; + width: 6rem; + margin: 0.5rem; + color: ${props => (hexDifferentiate(props.hex) ? C.Black : C.White)}; + background: ${props => props.hex}; +`; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/types.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/types.ts new file mode 100644 index 00000000..56796df9 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceColors/types.ts @@ -0,0 +1,3 @@ +export type color = { + hex: string; +}; From c1bfa431844e1fb82ee25d8a49ef3e5a32ee4fc6 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 17:41:22 +0100 Subject: [PATCH 39/41] =?UTF-8?q?Icons=20rendered=20using=20mapper=20?= =?UTF-8?q?=E2=9A=93=EF=B8=8F.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/interfaceIcons.tsx | 27 ++++++++++--------- .../Atoms/interfaceIcons/constants.ts | 24 +++++++++++++++++ .../Components/interfaceUnderConstruction.tsx | 2 -- 3 files changed, 38 insertions(+), 15 deletions(-) create mode 100644 src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/constants.ts diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx index 1b637ef3..98d57a9c 100644 --- a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/Components/interfaceIcons.tsx @@ -2,28 +2,29 @@ import React from 'react'; import * as I from '../styles'; import {StyledHeading2} from '../../../../styles'; import {AppIcon} from '../../../../../ignitus-Shared/types/iconsTypes/enums'; +import { + SocialIcons, + DashboardIcons, + GeneralIcons, + IgnitusLogos, +} from '../constants'; const interfaceIcons = () => ( Social Icons 🎨 - - - +
Dashboard Icons - - - - - - - +
General Icons - - - + +
+ Ignitus Logos + ); +const IconsMapper = ({icons}) => icons.map((icon: AppIcon) => ); + export default interfaceIcons; diff --git a/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/constants.ts b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/constants.ts new file mode 100644 index 00000000..611a9428 --- /dev/null +++ b/src/ignitus-UserInterfaceKit/Components/Atoms/interfaceIcons/constants.ts @@ -0,0 +1,24 @@ +import {AppIcon} from '../../../../ignitus-Shared/types/iconsTypes/enums'; +export const SocialIcons: AppIcon[] = [ + AppIcon.LinkedInIcon, + AppIcon.AngelListIcon, + AppIcon.TwitterIcon, +]; + +export const DashboardIcons: AppIcon[] = [ + AppIcon.PlusIcon, + AppIcon.ApplyIcon, + AppIcon.HeartIcon, + AppIcon.MessageIcon, + AppIcon.SaveIcon, + AppIcon.NetworkIcon, + AppIcon.MentorsIcon, +]; + +export const GeneralIcons: AppIcon[] = [ + AppIcon.KeyBoardArrowDown, + AppIcon.KeyBoardArrowRight, + AppIcon.Chevron, +]; + +export const IgnitusLogos: AppIcon[] = [AppIcon.IgnitusFullLogo]; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx index ec2fb86a..1b1d6b40 100644 --- a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/Components/interfaceUnderConstruction.tsx @@ -1,6 +1,5 @@ import React from 'react'; import {StyledHeading2} from '../../../../styles'; -import {Notfound} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-NotFound/Components/index'; import {UnderConstructionContainer, Container} from '../style'; import {WebsiteUnderConstruction} from '../../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Layout/ignitus-UnderContruction/Components/index'; @@ -8,7 +7,6 @@ const interfaceUnderConstruction = () => ( UnderConstruction ★
- From 777297b21b7be6d54f06ea4966b0d386496ffaa1 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 18:07:45 +0100 Subject: [PATCH 40/41] =?UTF-8?q?UI=20fixes=20notification=20added=20?= =?UTF-8?q?=F0=9F=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ignitus-Api/constants.ts | 21 ++++++++------- .../Components/index.tsx | 4 ++- .../ignitus-MessageSideNavigation/style.ts | 26 ++++++++++++++++--- 3 files changed, 36 insertions(+), 15 deletions(-) diff --git a/src/ignitus-Api/constants.ts b/src/ignitus-Api/constants.ts index 145146b8..097bc1e2 100644 --- a/src/ignitus-Api/constants.ts +++ b/src/ignitus-Api/constants.ts @@ -1,13 +1,14 @@ +export const BASE_URL: string = 'https://ignitusrestapi.herokuapp.com'; +export const TESTIMONIAL_URL: string = `${BASE_URL}/testimonials`; +export const STUDENT_SIGN_UP: string = `${BASE_URL}/register`; +export const STUDENT_SIGN_IN: string = `${BASE_URL}/login`; -export const BASE_URL = 'https://ignitusrestapi.herokuapp.com'; -export const TESTIMONIAL_URL = `${BASE_URL}/testimonials`; -export const STUDENT_SIGN_UP = `${BASE_URL}/register`; -export const STUDENT_SIGN_IN = `${BASE_URL}/login`; +export const FRONTEND_CONTRIBUTOR_API: string = + 'https://api.github.com/repos/Ignitus/Ignitus-Client-Side-Development/contributors?per_page=7'; -export const FRONTEND_CONTRIBUTOR_API = 'https://api.github.com/repos/Ignitus/Ignitus-Client-Side-Development/contributors?per_page=7'; +export const BACKEND_CONTRIBUTOR_API: string = + 'https://api.github.com/repos/Ignitus/Ignitus-rest-api/contributors?per_page=7'; -export const BACKEND_CONTRIBUTOR_API = 'https://api.github.com/repos/Ignitus/Ignitus-rest-api/contributors?per_page=7'; - -export const CONTRIBUTORS_STORE = 'contributors'; -export const TESTIMONIALS_STORE = 'testimonials'; -export const COND_HEADERS_STORE = 'cond-headers'; +export const CONTRIBUTORS_STORE: string = 'contributors'; +export const TESTIMONIALS_STORE: string = 'testimonials'; +export const COND_HEADERS_STORE: string = 'cond-headers'; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components/index.tsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components/index.tsx index 5eddda0f..6d3d97d0 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components/index.tsx +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/Components/index.tsx @@ -26,6 +26,8 @@ const Layer = ({ marginBottom = false, }: props) => ( - {text} + {text} ); + +const Notification = () => 4; diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts index c57a2335..a4984b37 100644 --- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts +++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-SideNavigation/ignitus-MessageSideNavigation/style.ts @@ -1,7 +1,12 @@ import styled from '@emotion/styled'; -import {White, IgnitusBlue, GreyLight} from '../../../ignitus-Atoms/colors'; +import { + White, + IgnitusBlue, + GreyLight, + Red, +} from '../../../ignitus-Atoms/colors'; import {flexibleColDiv} from '../../../ignitus-Atoms/atoms'; -import {MD, Normal} from '../../../ignitus-Atoms/fonts'; +import {XS, MD, Normal} from '../../../ignitus-Atoms/fonts'; type Props = { border: boolean; @@ -13,7 +18,7 @@ export const MessageContainer = styled(flexibleColDiv)` background: ${White}; border-radius: 16px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); - width: 12rem; + width: 14rem; height: 16rem; `; @@ -26,10 +31,23 @@ export const Layer = styled.div` padding: 1rem; margin-top: ${props => (props.marginTop ? '0.5rem' : 'none')}; margin-bottom: ${props => (props.marginBottom ? '0.5rem' : 'none')}; - text-align: center; width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; &:hover { background-color: ${IgnitusBlue}; color: ${White}; } `; + +export const Notification = styled(flexibleColDiv)` + border-radius: 100%; + padding: 0.2rem; + background: ${Red}; + width: 1.5rem; + height: 1.5rem; + font-size: ${XS}; + color: ${White} +`; From 2675a02079755943cf39c44f42e9fe40d584d092 Mon Sep 17 00:00:00 2001 From: Rawat Date: Sat, 21 Mar 2020 18:10:30 +0100 Subject: [PATCH 41/41] =?UTF-8?q?DeepScan=20Fixes=20=E2=98=98=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Layouts/interfaceNotFound/style.ts | 1 - .../Components/Layouts/interfaceUnderConstruction/style.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts index 1ec68a4f..ad5b4ce0 100644 --- a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceNotFound/style.ts @@ -1,5 +1,4 @@ import styled from '@emotion/styled'; -import {flexibleColDiv} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; export const NotFoundContainer = styled.div` display: flex; diff --git a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts index b5a27e01..3135ea01 100644 --- a/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts +++ b/src/ignitus-UserInterfaceKit/Components/Layouts/interfaceUnderConstruction/style.ts @@ -1,5 +1,4 @@ import styled from '@emotion/styled'; -import {flexibleColDiv} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms'; export const UnderConstructionContainer = styled.div` display: flex;