Skip to content

Commit e4ab151

Browse files
hentrymartinhentrymartin
authored
Merge pull request #489 from topcoder-platform/PROD-2142_breadcrums-implementation
PROD 2142 breadcrumbs in intake pages -> Dev
2 parents 4a8d81b + d8c9df8 commit e4ab151

File tree

23 files changed

+306
-130
lines changed

23 files changed

+306
-130
lines changed

‎src-ts/lib/breadcrumb/Breadcrumb.module.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,17 @@
1414

1515
ol {
1616
display: flex;
17+
&.hidden-mobile {
18+
@include ltemd {
19+
display: none;
20+
}
21+
}
22+
23+
&.show-mobile {
24+
@include gtemd {
25+
display: none;
26+
}
27+
}
1728

1829
> li {
1930
display: inline-flex;
@@ -26,6 +37,9 @@
2637
padding: $pad-md;
2738
color: $black-80;
2839
cursor: pointer;
40+
&.elipsis {
41+
color: $turq-160;
42+
}
2943
}
3044

3145
&:first-child a {

‎src-ts/lib/breadcrumb/Breadcrumb.tsx

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,43 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
1818
return createPortal((
1919
<div className={styles['breadcrumb-wrap']}>
2020
<nav className={styles.breadcrumb}>
21-
<ol>
21+
<ol className={styles['show-mobile']}>
22+
<>
23+
{
24+
props.items.length <= 2 && props.items.map((item, index) =>
25+
<BreadcrumbItem
26+
index={index + 1}
27+
item={item}
28+
key={index}
29+
/>
30+
)
31+
}
32+
33+
{
34+
props.items.length > 2 && (
35+
<>
36+
<BreadcrumbItem
37+
index={0}
38+
item={{
39+
isElipsis: true,
40+
name: '...',
41+
url: props.items[props.items.length - 2].url,
42+
}}
43+
/>
44+
<BreadcrumbItem
45+
index={1}
46+
item={{
47+
name: props.items[props.items.length - 1].name,
48+
url: props.items[props.items.length - 1].url,
49+
}}
50+
/>
51+
</>
52+
53+
)
54+
}
55+
</>
56+
</ol>
57+
<ol className={styles['hidden-mobile']}>
2258
{props.items.map((item, index) =>
2359
<BreadcrumbItem
2460
index={index + 1}

‎src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Link } from '@reach/router'
22
import { FC } from 'react'
33

4+
import styles from './../Breadcrumb.module.scss'
45
import { BreadcrumbItemModel } from './breadcrumb-item.model'
56

67
interface BreadcrumbItemProps {
@@ -11,7 +12,7 @@ interface BreadcrumbItemProps {
1112
const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) => {
1213
return (
1314
<li key={props.index}>
14-
<Link to={props.item.url}>
15+
<Link className={props.item.isElipsis && styles['elipsis']} to={props.item.url}>
1516
{props.item.name}
1617
</Link>
1718
</li>

‎src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export interface BreadcrumbItemModel {
2+
isElipsis?: boolean
23
name: string
34
url: string
45
}

‎src/actions/autoSave.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const triggerAutoSave = (isTriggered, isSaveLater) => ({
1212
type: ACTIONS.AUTO_SAVE.TRIGGER_AUTO_SAVE,
1313
payload: {
1414
isTriggered,
15-
isSaveLater
15+
isSaveLater,
1616
},
1717
});
1818

@@ -22,7 +22,7 @@ export const triggerCookieClear = () => ({
2222

2323
export const resetSaveLater = () => ({
2424
type: ACTIONS.AUTO_SAVE.RESET_IS_SAVE_LATER,
25-
payload: false
25+
payload: false,
2626
});
2727

2828
export const autoSaveCookieCleared = (isCookieCleared) => ({

‎src/components/Banners/FeaturedWorkTypeBanner/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const FeaturedWorkTypeBanner = ({ title, subTitle, workType }) => {
3333
FeaturedWorkTypeBanner.propTypes = {
3434
title: PT.string,
3535
subTitle: PT.string,
36-
workType: PT.string
36+
workType: PT.string,
3737
};
3838

3939
export default FeaturedWorkTypeBanner;

‎src/constants/index.js

Lines changed: 73 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@ export const ROUTES = {
3636
INTAKE_FORM: "/self-service/wizard",
3737
HOME_PAGE: "/self-service",
3838
DASHBOARD_PAGE: "/work/dashboard",
39+
WEBSITE_DESIGN: "/self-service/work/new/website-design/basic-info",
40+
WEBSITE_DESIGN_REVIEW: "/self-service/work/new/website-design/review",
41+
DATA_EXPLORATION: "/self-service/work/new/data-exploration/basic-info",
42+
DATA_EXPLORATION_REVIEW: "/self-service/work/new/data-exploration/review",
43+
PROBLEM_STATEMENT: "/self-service/work/new/data-advisory/basic-info",
44+
PROBLEM_STATEMENT_REVIEW: "/self-service/work/new/data-advisory/review",
45+
FIND_ME_DATA: "/self-service/work/new/find-me-data/basic-info",
46+
FIND_ME_DATA_REVIEW: "/self-service/work/new/find-me-data/review",
3947
};
4048

4149
/**
@@ -279,10 +287,10 @@ export const webWorkTypes = [
279287
<br />
280288
<div styleName="helpBanner">
281289
<PageP>
282-
You will receive up to five unique visual designs for the main page of
283-
your website, in an industry-standard format. Visual designs are the
284-
first step in creating a functional website. Topcoder can help you
285-
with launching your website once you have approved your design.
290+
You will receive up to five unique visual designs for the main page
291+
of your website, in an industry-standard format. Visual designs are
292+
the first step in creating a functional website. Topcoder can help
293+
you with launching your website once you have approved your design.
286294
</PageP>
287295
<div styleName="sampleImages">
288296
<a href={WebsiteDesignPdf1} target="_blank">
@@ -301,12 +309,26 @@ export const webWorkTypes = [
301309
<>
302310
<p>
303311
Topcoder design experts will take all of the information you provide
304-
below, and create visual designs for your website that fit your industry
305-
and match your desired look & feel. We've done this for hundreds of
306-
customers and will work with you to create your ideal design.
312+
below, and create visual designs for your website that fit your
313+
industry and match your desired look & feel. We've done this for
314+
hundreds of customers and will work with you to create your ideal
315+
design.
307316
</p>
308317
</>
309318
),
319+
breadcrumbs: {
320+
basic: [
321+
{ url: ROUTES.DASHBOARD_PAGE, name: "My work" },
322+
{ url: ROUTES.INTAKE_FORM, name: "Start work" },
323+
{ url: "#", name: "Website Design" },
324+
],
325+
review: [
326+
{ url: ROUTES.DASHBOARD_PAGE, name: "My work" },
327+
{ url: ROUTES.INTAKE_FORM, name: "Start work" },
328+
{ url: ROUTES.WEBSITE_DESIGN, name: "Website design" },
329+
{ url: "#", name: "Review & Payment" },
330+
],
331+
},
310332
},
311333
{
312334
type: WorkType.data,
@@ -351,6 +373,19 @@ export const webWorkTypes = [
351373
easy-to-understand format.
352374
</p>
353375
),
376+
breadcrumbs: {
377+
basic: [
378+
{ url: ROUTES.DASHBOARD_PAGE, name: "My work" },
379+
{ url: ROUTES.INTAKE_FORM, name: "Start work" },
380+
{ url: "#", name: "Data exploration" },
381+
],
382+
review: [
383+
{ url: ROUTES.DASHBOARD_PAGE, name: "My work" },
384+
{ url: ROUTES.INTAKE_FORM, name: "Start work" },
385+
{ url: ROUTES.DATA_EXPLORATION, name: "Data exploration" },
386+
{ url: "#", name: "Review & Payment" },
387+
],
388+
},
354389
},
355390
{
356391
type: WorkType.problem,
@@ -393,11 +428,27 @@ export const webWorkTypes = [
393428
aboutBannerTitle: "ABOUT PROBLEM STATEMENT & DATA ADVISORY",
394429
aboutBannerContent: (
395430
<p>
396-
Problem Statement &amp; Data Advisory is for those asking themselves: How
397-
can I apply data science to this idea or goal? How will I interpret
431+
Problem Statement &amp; Data Advisory is for those asking themselves:
432+
How can I apply data science to this idea or goal? How will I interpret
398433
solutions, and how will that help me take action? What data do I need?
399434
</p>
400435
),
436+
breadcrumbs: {
437+
basic: [
438+
{ url: ROUTES.DASHBOARD_PAGE, name: "My work" },
439+
{ url: ROUTES.INTAKE_FORM, name: "Start work" },
440+
{ url: "#", name: "Problem statement & data advisory" },
441+
],
442+
review: [
443+
{ url: ROUTES.DASHBOARD_PAGE, name: "My work" },
444+
{ url: ROUTES.INTAKE_FORM, name: "Start work" },
445+
{
446+
url: ROUTES.PROBLEM_STATEMENT,
447+
name: "Problem statement & data advisory",
448+
},
449+
{ url: "#", name: "Review & Payment" },
450+
],
451+
},
401452
},
402453
{
403454
type: WorkType.findData,
@@ -457,6 +508,19 @@ export const webWorkTypes = [
457508
</PageUl>
458509
</>
459510
),
511+
breadcrumbs: {
512+
basic: [
513+
{ url: ROUTES.DASHBOARD_PAGE, name: "My work" },
514+
{ url: ROUTES.INTAKE_FORM, name: "Start work" },
515+
{ url: "#", name: "Find me data" },
516+
],
517+
review: [
518+
{ url: ROUTES.DASHBOARD_PAGE, name: "My work" },
519+
{ url: ROUTES.INTAKE_FORM, name: "Start work" },
520+
{ url: ROUTES.FIND_ME_DATA, name: "Find me data" },
521+
{ url: "#", name: "Review & Payment" },
522+
],
523+
},
460524
},
461525
];
462526

‎src/constants/products/DataExploration/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,3 @@ export const PRIZES_PAYMENT_BREAKDOWN = [0.4, 0.3333, 0.1333];
4949
export const REVIEWER_PAYMENT_BREAKDOWN = [0.0667, 0.0667];
5050
export const DEFAULT_DURATION = 5;
5151
export const USING_PROMOTIONAL_PRICE = true;
52-

‎src/constants/products/WebsiteDesignLegacy/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export const BASE_PRODUCT_PRICE = 100;
22
export const STICKER_PRICE = 398;
33
export const PRIZES_PAYMENT_BREAKDOWN = [0.5, 0.2, 0.1];
44
export const REVIEWER_PAYMENT_BREAKDOWN = [0.1, 0.1];
5-
export const DEFAULT_DURATION = '4-6';
5+
export const DEFAULT_DURATION = "4-6";
66
export const PER_PAGE_COST = 99;
77

88
export const CHALLENGE_FIELD_VALUES = {

‎src/routes/LoginPrompt/index.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,9 @@ const LoginPrompt = ({
4343
};
4444

4545
const onBack = () => {
46-
navigate(previousPageUrl || "/self-service/work/new/website-design/page-details");
46+
navigate(
47+
previousPageUrl || "/self-service/work/new/website-design/page-details"
48+
);
4749
};
4850

4951
return (

0 commit comments

Comments
 (0)