Skip to content

Commit f217289

Browse files
guganabuguganabu
authored
Merge pull request #33 from testsigmahq/WEB-321
WEB-321 - Creating new index page for tutorials
2 parents f462004 + dfcb145 commit f217289

9 files changed

Lines changed: 480 additions & 6 deletions

File tree

‎src/components/LeftNav.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ class ListItem extends React.Component {
121121
return (
122122
<ul
123123
key={`${name}-${uuidv4()}`}
124-
className={` ${(this.state.expandedPanels?.indexOf(name) !== -1) ? 'active' : 'inactive'} ${isRoot ? ' root' : ''} `}
124+
className={` ${(this.state.expandedPanels?.indexOf(name) === 0) ? 'active' : 'inactive'} ${isRoot ? ' root' : ''} `}
125125
>
126126
<li className={`parent${this.inUrl(`/${name}/`) ? ' currentUrl text_green' : ''}`} onClick={this.toggleActive} identifier={name}>
127127
<svg onClick={(e)=>{this.toggleActive(e); this.toggleExpansion(name)}} identifier={name} className={`inline float_left relative folder-icon parent_caret${(this.state.expandedPanels?.indexOf(name) !== -1) ? ' active_parent_caret' : ''}`} xmlns="http://www.w3.org/2000/svg" fill="none" height="24"
@@ -184,6 +184,7 @@ const LeftNav = () => {
184184
return (
185185
<>
186186
<div className="leftNav bg-gray-50 px-14 pt-5">
187+
<Link to={"/tutorials/"} className="homepage_btn">Testsigma Tutorials</Link>
187188
<ListItem data={data.leftNavLinks.value} isRoot />
188189
</div>
189190
</>

‎src/components/LeftNav.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,12 @@
293293
.float_left{
294294
float:left;
295295
}
296+
.homepage_btn{
297+
font-weight: 600;
298+
&:hover{
299+
color: $Mountain_Meadow;
300+
}
301+
}
296302

297303
//.currentUrl{
298304
// margin-left: -15px!important;

‎src/components/_variables.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ $warning-yellow: #FFB400;
2222

2323
$footer-color: #32ABCB;
2424

25+
$light-grey: #DDDDDD;
26+
$black_haze: #F2F3F3;
27+
$Mountain_Meadow: #1AA874;
28+
$dark_blue: #183247;
29+
$nile_blue: #183E46;
30+
$jade_green: #03A973;
31+
2532
// 2021 Refresh variables
2633

2734
// ORANGE
@@ -74,4 +81,8 @@ $yellow_05: #FFFEF9;
7481

7582
// Fonts
7683
$degular: "degular_displaysemibold";
77-
$ibm: 'IBM Plex Mono', SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
84+
$ibm: 'IBM Plex Mono', SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
85+
86+
// Screen Size
87+
$screen_425: 425px;
88+
$screen_768: 768px;

‎src/components/navcards.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from "react";
2+
import * as url from "url";
3+
4+
import "./navcards.scss"
5+
6+
const data = [
7+
{
8+
id: 1,
9+
title: "Getting Started",
10+
description: "Learn how to create and execute tests for a sample application using Testsigma.",
11+
path: "/tutorials/getting-started/automate-web-applications/",
12+
},
13+
{
14+
id: 2,
15+
title: "Test Cases",
16+
description: "Create test cases for Web apps and Mobile apps.",
17+
path: "/tutorials/test-cases/web-apps/build-tests-using-recorder/",
18+
},
19+
{
20+
id: 3,
21+
title: "REST API",
22+
description: "Learn about JSONPath and Contract Testing in Testsigma using REST APIs. ",
23+
path: "/tutorials/rest-api-testing/json-schema-validation/",
24+
},
25+
{
26+
id: 4,
27+
title: "Test Plans",
28+
description: "Create Test Plans and perform cross-platform end-to-end testing with Testsigma.",
29+
path: "/tutorials/test-plans/using-local-devices/",
30+
},
31+
{
32+
id: 5,
33+
title: "Testsigma Agent",
34+
description: "Setup Testsigma Agent to run tests in local devices.",
35+
path: "/tutorials/agent/how-to-setup-agents-to-run-tests-on-local-mobile-devices/",
36+
},
37+
{
38+
id: 6,
39+
title: "Advanced",
40+
description: "Enable two factor SMS and Email based authentication via OTPs.",
41+
path: "/tutorials/advanced/sms-based-two-factor-authentication-2fa/",
42+
},
43+
{
44+
id: 7,
45+
title: "Addons",
46+
description: "Learn how to create addons for different scenarios.",
47+
path: "/tutorials/addons/how-create-addons-actions/",
48+
},
49+
];
50+
51+
const Card = ({ title, description, path }) => {
52+
return (
53+
<a href={path} className="card md:w-5/12 p-7 cursor-pointer justify-between flex mr-2 mb-2 w-full ">
54+
<div className="w-fit">
55+
<span className="card_heading">{title}</span><br/>
56+
<span className="card_desc">{description}</span>
57+
</div>
58+
<div className="w-fit content-center grid">
59+
<a className="block p-4 right-arrow">
60+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" viewBox="0 0 15 13" fill="none">
61+
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.246093 6.98633C0.246093 6.75904 0.334979 6.54106 0.493195 6.38035C0.651411 6.21963 0.865998 6.12934 1.08975 6.12934L11.8643 6.12934L8.24169 2.45115C8.16325 2.37147 8.10103 2.27688 8.05857 2.17277C8.01612 2.06866 7.99427 1.95708 7.99427 1.8444C7.99427 1.73172 8.01612 1.62013 8.05857 1.51603C8.10103 1.41192 8.16325 1.31733 8.24169 1.23765C8.32013 1.15797 8.41325 1.09477 8.51573 1.05164C8.61822 1.00852 8.72806 0.986329 8.83899 0.986329C8.94992 0.986329 9.05977 1.00852 9.16226 1.05164C9.26474 1.09477 9.35786 1.15797 9.4363 1.23765L14.4982 6.37958C14.5768 6.45919 14.6391 6.55376 14.6817 6.65787C14.7242 6.76199 14.7461 6.8736 14.7461 6.98633C14.7461 7.09905 14.7242 7.21067 14.6817 7.31478C14.6391 7.4189 14.5768 7.51347 14.4982 7.59308L9.4363 12.735C9.35786 12.8147 9.26474 12.8779 9.16226 12.921C9.05977 12.9641 8.94993 12.9863 8.83899 12.9863C8.72806 12.9863 8.61822 12.9641 8.51573 12.921C8.41325 12.8779 8.32013 12.8147 8.24169 12.735C8.08327 12.5741 7.99427 12.3558 7.99427 12.1283C7.99427 12.0156 8.01612 11.904 8.05857 11.7999C8.10103 11.6958 8.16325 11.6012 8.24169 11.5215L11.8643 7.84332L1.08975 7.84332C0.865998 7.84332 0.651411 7.75303 0.493195 7.59231C0.334979 7.43159 0.246093 7.21362 0.246093 6.98633Z" fill="#000000"/>
62+
</svg>
63+
</a>
64+
</div>
65+
</a>
66+
);
67+
};
68+
69+
const CardList = () => {
70+
return (
71+
<div className="w-full flex flex-wrap">
72+
{data.map((item) => (
73+
<Card key={item.id} title={item.title} description={item.description} path={item.path}/>
74+
))}
75+
</div>
76+
);
77+
};
78+
79+
export default CardList;

‎src/components/navcards.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import '_variables.scss';
2+
3+
.card{
4+
width: 48%;
5+
border: .1rem solid $light-grey;
6+
border-radius: 2px;
7+
@media (max-width: $screen_425) {
8+
width: 100%;
9+
}
10+
&:hover{
11+
background: $black_haze;
12+
.right-arrow {
13+
background-color: $white;
14+
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.12);
15+
svg{
16+
path{
17+
fill: $Mountain_Meadow;
18+
}
19+
}
20+
}
21+
}
22+
.right-arrow{
23+
border-radius: 50%;
24+
}
25+
.card_heading{
26+
font-weight: 600;
27+
font-size: 18px;
28+
line-height: 45px;
29+
color: $dark_blue;
30+
margin-bottom: 0;
31+
}
32+
.card_desc{
33+
font-weight: 400;
34+
font-size: 15px;
35+
color: $dark_blue;
36+
margin-top: 0;
37+
margin-bottom: 0;
38+
}
39+
}

0 commit comments

Comments
 (0)