Skip to content

Commit 8f08542

Browse files
author
Maria Mattlin
committed
PROD-2011 #comment Completed creating a new component to display the work Details and adding styling to match Figma design. #time 7h
1 parent 6cfed33 commit 8f08542

File tree

5 files changed

+100
-196
lines changed

5 files changed

+100
-196
lines changed

‎src-ts/tools/work/work-detail-details/WorkDetailDetails.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ interface WorkDetailDetailsProps {
1212
const WorkDetailDetails: FC<WorkDetailDetailsProps> = (props: WorkDetailDetailsProps) => {
1313
return (
1414
<div className={styles['wrap']}>
15-
{/* <div className={styles['details-content']}>
16-
{props.children}
17-
</div> */}
1815
<WorkDetailDetailsPane formData={props.formData} />
1916
<WorkDetailDetailsSidebar />
2017
</div>

‎src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.module.scss

Lines changed: 10 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,25 @@
11
@import '../../../../lib/styles';
22

3-
.header {
4-
display: flex;
5-
justify-content: space-between;
6-
cursor: pointer;
7-
margin-bottom: 0;
8-
9-
.icon {
10-
svg {
11-
transform: scale(1.5);
12-
margin-top: 22px;
13-
}
14-
15-
&.open {
16-
svg {
17-
margin-top: 0 !important;
18-
}
19-
20-
transform: rotate(-180deg);
21-
}
22-
}
23-
24-
.stepLabel {
25-
font-size: 16px;
26-
font-weight: 600;
27-
line-height: 20px;
28-
text-transform: uppercase;
29-
margin-top: 14px;
30-
31-
.link {
32-
color: $link-blue-dark;
33-
cursor: pointer;
34-
margin-left: 10px;
35-
margin-top: 4px;
36-
text-transform: none;
37-
38-
&:hover {
39-
text-decoration: underline;
40-
}
41-
}
42-
}
43-
}
44-
45-
.projectTitle {
46-
font-weight: 600;
47-
margin-top: 18px;
48-
font-size: 16px;
49-
line-height: 20px;
3+
.paneContent {
4+
flex-grow: 2;
505
}
516

527
.detail {
53-
margin-top: 16px;
8+
margin-bottom: $pad-xxl;
549
white-space: pre-wrap;
10+
@include font-black-100;
5511

56-
.itemWrapper {
12+
.header {
13+
@include font-barlow;
5714
display: flex;
58-
59-
.item {
60-
text-transform: capitalize;
61-
@include font-roboto;
62-
font-weight: 700;
63-
font-size: 16px;
64-
line-height: 26px;
65-
}
15+
padding-bottom: $pad-sm;
6616
}
6717

68-
.key {
69-
@include font-roboto;
70-
font-size: 16px;
71-
line-height: 26px;
18+
.content {
19+
@extend .body-main;
7220

7321
.detail {
74-
padding-left: 20px;
22+
padding-left: $pad-xl;
7523
}
7624
}
77-
}
78-
79-
.paneContent {
80-
flex-grow: 2;
8125
}

‎src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx

Lines changed: 89 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,115 @@
11
import _ from 'lodash'
2-
import { FC, useState } from 'react'
3-
4-
import PageDivider from '../../../../../src/components/PageDivider'
2+
import { FC } from 'react'
53

64
import styles from './WorkDetailDetailsPane.module.scss'
75

86
interface WorkDetailDetailsPaneProps {
97
formData: any
108
}
119

12-
const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = (props: WorkDetailDetailsPaneProps) => {
13-
const [steps, setSteps] = useState([
14-
{
15-
id: 0,
16-
isOpen: true,
17-
label: 'Review Your Project Details',
18-
value: 'basicInfo',
19-
},
20-
{ id: 1, label: 'Website Purpose', value: 'websitePurpose', isOpen: true },
21-
{ id: 2, label: 'Page Details', value: 'pageDetails', isOpen: true },
22-
{ id: 3, label: 'Branding', value: 'branding', isOpen: true },
23-
])
24-
25-
const renderPageDetails = (step: any) => {
26-
const items = props.formData[step.value] || {}
27-
const pages = items?.pages || []
10+
const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({ formData }: WorkDetailDetailsPaneProps) => {
11+
const sections: Array<string> = ['basicInfo', 'websitePurpose', 'pageDetails', 'branding']
2812

29-
return pages.map((page: any, index: number) => {
30-
return (
31-
<div>
32-
{page?.pageName && (
33-
<div className={styles['detail']}>
34-
<div className={styles['itemWrapper']}>
35-
<p className={styles['item']}>Page {index + 1} Name</p>
36-
</div>
37-
<p className={styles['key']}>{page?.pageName}</p>
38-
</div>
39-
)}
40-
{page?.pageDetails && (
41-
<div className={styles['detail']}>
42-
<div className={styles['itemWrapper']}>
43-
<p className={styles['item']}>Page {index + 1} Requirements</p>
44-
</div>
45-
<p className={styles['key']}>{page?.pageDetails}</p>
46-
</div>
47-
)}
48-
</div>
49-
)
50-
})
51-
}
13+
return (
14+
<div className={styles['paneContent']}>
15+
{sections
16+
.filter((section) => {
17+
if (section === 'pageDetails') {
18+
return _.get(formData[section], 'pages[0].pageDetails') !== ''
19+
}
20+
return !!formData[section]
21+
})
22+
.map((section) => {
23+
return (
24+
<>
25+
{section === 'pageDetails'
26+
? renderPageDetails(formData, section)
27+
: renderDetails(formData, section)
28+
}
29+
</>
30+
)
31+
})}
32+
</div>
33+
)
34+
}
5235

53-
const renderDetails = (step: any) => {
54-
let items = props.formData[step.value] || {}
55-
if (props.formData?.workType?.selectedWorkType === 'Find Me Data') {
56-
items = _.omit(items, ['projectTitle', 'assetsUrl', 'goals'])
57-
} else {
58-
items = _.omit(items, [
59-
'findMeProjectTitle',
60-
'analysis',
61-
'primaryDataChallenge',
62-
'primaryDataChallengeOther',
63-
'sampleData',
64-
])
65-
}
66-
return Object.keys(items).map((key) => {
67-
if (_.isArray(items[key])) {
68-
return _.map(items[key], (item, i) => (
69-
<div className={styles['detail']} key={i}>
70-
<div className={styles['itemWrapper']}>
71-
<p className={styles['item']}>
72-
{key} {i + 1}
73-
</p>
74-
</div>
75-
<p className={styles['key']}>
76-
{Object.keys(item).map((subKey) =>
77-
renderOption(item[subKey], subKey)
78-
)}
79-
</p>
80-
</div>
81-
))
82-
}
83-
return renderOption(items[key])
84-
})
85-
}
36+
function renderPageDetails(formData: any, section: string): Array<JSX.Element> {
37+
const items: { pages: [] } = formData[section] || {}
38+
const pages: [] = items?.pages || []
8639

87-
const renderOption = (option: any, title = '') => {
88-
console.log('renderOption', option.title)
40+
return pages.map((page: { pageDetails?: string, pageName?: string }, index: number) => {
8941
return (
9042
<div>
91-
{option.option && (
43+
{page?.pageName && (
44+
<div className={styles['detail']}>
45+
<h4 className={styles['header']}>Page {index + 1} Name</h4>
46+
<p className={styles['content']}>{page?.pageName}</p>
47+
</div>
48+
)}
49+
{page?.pageDetails && (
9250
<div className={styles['detail']}>
93-
<div className={styles['itemWrapper']}>
94-
<p className={styles['item']}>{option.title || title}</p>
95-
</div>
96-
<p className={styles['key']}>{formatOption(option.option)}</p>
51+
<h4 className={styles['header']}>Page {index + 1} Requirements</h4>
52+
<p className={styles['content']}>{page?.pageDetails}</p>
9753
</div>
9854
)}
9955
</div>
10056
)
101-
}
57+
})
58+
}
10259

103-
const formatOption = (option: any): any => {
104-
if (_.isArray(option)) {
105-
return option.join(', ')
106-
}
107-
if (_.isObject(option)) {
108-
return formatOption(_.get(option, 'option', option))
109-
}
110-
return option
60+
function renderDetails(formData: any, section: string): Array<JSX.Element | Array<JSX.Element>> {
61+
let items: any = formData[section] || {}
62+
if (formData?.workType?.selectedWorkType === 'Find Me Data') {
63+
items = _.omit(items, ['projectTitle', 'assetsUrl', 'goals'])
64+
} else {
65+
items = _.omit(items, [
66+
'findMeProjectTitle',
67+
'analysis',
68+
'primaryDataChallenge',
69+
'primaryDataChallengeOther',
70+
'sampleData',
71+
])
11172
}
73+
return Object.keys(items).map((key) => {
74+
if (_.isArray(items[key])) {
75+
return _.map(items[key], (item, i) => (
76+
<div className={styles['detail']} key={i}>
77+
<h4 className={styles['header']}>
78+
{key} {i + 1}
79+
</h4>
80+
<p className={styles['content']}>
81+
{Object.keys(item).map((subKey) =>
82+
renderOption(item[subKey], subKey)
83+
)}
84+
</p>
85+
</div>
86+
))
87+
}
88+
return renderOption(items[key])
89+
})
90+
}
11291

92+
function renderOption(option: any, title: string = ''): JSX.Element {
11393
return (
114-
<div className={styles['paneContent']}>
115-
{steps
116-
.filter((s) => {
117-
if (s.value === 'pageDetails') {
118-
return _.get(props.formData[s.value], 'pages[0].pageDetails') !== ''
119-
}
120-
return !!props.formData[s.value]
121-
})
122-
.map((step) => {
123-
return (
124-
<>
125-
<div
126-
className={styles['header']}
127-
>
128-
<p className={styles['stepLabel']}>
129-
{step.label}
130-
</p>
131-
</div>
132-
{step.value === 'pageDetails'
133-
? renderPageDetails(step)
134-
: renderDetails(step)
135-
}
136-
137-
<PageDivider styleName={''} />
138-
</>
139-
)
140-
})}
141-
</div>
94+
<>
95+
{option.option && (
96+
<div className={styles['detail']}>
97+
<h4 className={styles['header']}>{option.title || title}</h4>
98+
<p className={styles['content']}>{formatOption(option.option)}</p>
99+
</div>
100+
)}
101+
</>
142102
)
143103
}
144104

105+
function formatOption(option: Array<string> | {}): string {
106+
if (_.isArray(option)) {
107+
return option.join(', ')
108+
}
109+
if (_.isObject(option)) {
110+
return formatOption(_.get(option, 'option', option))
111+
}
112+
return option
113+
}
114+
145115
export default WorkDetailDetailsPane

‎src-ts/tools/work/work-detail-details/work-detail-details-pane/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default as WorkDetailDetailsPane } from './WorkDetailDetailsPane'
1+
export { default as WorkDetailDetailsPane } from './WorkDetailDetailsPane'

‎src/routes/WorkItems/index.jsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -242,13 +242,6 @@ const WorkItem = ({
242242

243243
{selectedTab === 'details' && (
244244
<div>
245-
{/* <WorkDetailDetails>
246-
<ReviewTable
247-
formData={_.get(details, "intake-form.form", {})}
248-
enableEdit={false}
249-
enableStepsToggle={false}
250-
/>
251-
</WorkDetailDetails> */}
252245
<WorkDetailDetails formData={_.get(details, "intake-form.form", {})} />
253246
</div>
254247
)}

0 commit comments

Comments
 (0)