Skip to content

Commit 9efc58f

Browse files
asadath1395asadath1395
committed
Fix PR review comments
1 parent 95c5ee8 commit 9efc58f

File tree

12 files changed

+145
-121
lines changed

12 files changed

+145
-121
lines changed

‎src-ts/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,4 @@ export {
2323
} from './lib'
2424
export * from './tools'
2525
export * from './utils'
26+
export * from './lib/svgs'

‎src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,10 +165,18 @@
165165
background-color: $tc-white;
166166
margin-right: 0;
167167

168+
.card-row-col:nth-child(2) {
169+
display: none;
170+
}
171+
168172
.row-divider {
169173
width: 100%;
170174
margin-left: 6%;
171175
}
176+
177+
&.mobile {
178+
display: none;
179+
}
172180
}
173181
}
174182

‎src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx‎

Lines changed: 28 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import cn from 'classnames'
22
import React, { FocusEvent, SVGProps } from 'react'
33

4-
import { ReactComponent as CheckIcon } from '../../../../../src/assets/images/icon-check-thin.svg'
5-
import { Button, HelpIcon, IconOutline, textFormatMoneyLocaleString, useCheckIsMobile } from '../../../../lib'
6-
import { FormInputModel } from '../../form-input.model'
4+
import { Button, HelpIcon, IconOutline, textFormatMoneyLocaleString, useCheckIsMobile, IconCheck } from '../../../../lib'
5+
import { FormCard, FormInputModel } from '../../form-input.model'
76

87
import styles from './FormCardSet.module.scss'
98

@@ -24,83 +23,43 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
2423
return <IconComponent className={styles['card-row-icon']} />
2524
}
2625

26+
const getButton: (card: FormCard, selected: boolean) => JSX.Element = (card, selected) => (
27+
<Button
28+
onClick={(evt) => {
29+
onChange(evt)
30+
}}
31+
label={selected ? 'Selected' : 'Choose package'}
32+
buttonStyle={selected ? 'primary' : 'secondary'}
33+
type={selected ? 'button' : 'submit'}
34+
size='sm'
35+
icon={selected ? IconCheck : undefined}
36+
id={card.id}
37+
name={name}
38+
className={selected ? 'flex-row' : ''}
39+
/>
40+
)
41+
2742
return (
2843
<div className={styles['form-card-set']}>
29-
{
30-
!isMobile &&
31-
<div className={cn(styles['card'], styles['feature'])}>
32-
<div className={cn(styles['card-header'], styles['feature'])}>
33-
<div className='body-medium-bold'>hidden text</div>
34-
<h3>hidden text</h3>
35-
<Button
36-
label={'Hidden button'}
37-
size='sm'
38-
/>
39-
</div>
40-
{cards && (cards[0] || []).sections.map((section, sectionIndex: number) => (
41-
<div key={`section-${sectionIndex}`} className={cn(styles['card-section'], styles['feature'])}>
42-
{section.rows.map((row, rowIndex: number) => (
43-
<>
44-
<div className={styles['row-divider']}></div>
45-
<div key={`row-${rowIndex}`} className={styles['card-row']}>
46-
{row.icon && iconFromName(row.icon)}
47-
{row.label && (
48-
<div className={cn(styles['card-row-col'], { [styles['info-col']]: row.infoIcon })}>
49-
<span className='overline'>{row.label}</span>
50-
{row.infoIcon && (
51-
<HelpIcon
52-
inverted
53-
arrowColor='#000000'
54-
backgroundColor='#000000'
55-
type='Info'
56-
>
57-
{row.tooltipText}
58-
</HelpIcon>
59-
)}
60-
</div>
61-
)}
62-
</div>
63-
</>
64-
))}
65-
</div>
66-
))}
67-
</div>
68-
}
69-
7044
{
7145
cards?.map((card, index: number) => {
7246
const formattedPrice: string | undefined = textFormatMoneyLocaleString(card.price)
7347
const selected: boolean = value === card.id
74-
7548
return (
76-
<div key={`card-${index}`}className={cn(styles['card'], selected && styles['selected'], isMobile && card.mostPopular && styles['mobile-popular'])}>
77-
49+
<div key={`card-${index}`}className={cn(styles['card'], selected && styles['selected'], isMobile && card.mostPopular && styles['mobile-popular'], { [styles.feature]: index === 0, [styles.mobile]: isMobile })}>
7850
{ card.mostPopular && <div className={styles['popular-card']}>MOST POPULAR</div>}
79-
<div className={cn(styles['card-header'], isMobile && styles['mobile'])}>
51+
<div className={cn(styles['card-header'], isMobile && styles['mobile'], { [styles.feature]: index === 0 })}>
8052
<div className='body-medium-bold'>{card.title}</div>
8153
<h3>{formattedPrice}</h3>
82-
<Button
83-
onClick={(evt) => {
84-
onChange(evt)
85-
}}
86-
label={selected ? 'Selected' : 'Choose package'}
87-
buttonStyle={selected ? 'primary' : 'secondary'}
88-
type={selected ? 'button' : 'submit'}
89-
size='sm'
90-
icon={selected ? CheckIcon : undefined}
91-
id={card.id}
92-
name={name}
93-
value={card.id}
94-
className={selected ? 'flex-row' : ''}
95-
/>
54+
{getButton(card, selected)}
9655
</div>
9756
{card.sections.map((section, sectionIndex: number) => (
98-
<div key={`section-${sectionIndex}`} className={cn(styles['card-section'], { [styles.mobile]: isMobile })}>
57+
<div key={`section-${sectionIndex}`} className={cn(styles['card-section'], { [styles.mobile]: isMobile, [styles.feature]: index === 0})}>
9958
{section.rows.map((row, rowIndex: number) => (
10059
<div className={styles['row']}>
10160
<div className={styles['row-divider']}></div>
10261
<div key={`row-${rowIndex}`} className={styles['card-row']}>
103-
{isMobile && (
62+
{ ((isMobile) || (index === 0)) && (
10463
<span className={cn(styles['card-row-col'], styles['mobile'], styles['feature-name'])}>
10564
{row.icon && iconFromName(row.icon)}
10665
{row.label ?
@@ -109,17 +68,17 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
10968
}
11069
{row.infoIcon && (
11170
<HelpIcon
112-
inverted
113-
arrowColor='#000000'
114-
backgroundColor='#000000'
115-
type='Info'
71+
inverted
72+
arrowColor='#000000'
73+
backgroundColor='#000000'
74+
type='Info'
11675
>
11776
{row.tooltipText}
11877
</HelpIcon>
11978
)}
12079
</span>
12180
)}
122-
{row.label && (
81+
{(
12382
<span className={cn(styles['card-row-col'], styles['center'])}>
12483
{ row.valueIcon ?
12584
<IconOutline.CheckIcon width={18} height={16} /> :

‎src-ts/lib/help-icon/HelpIcon.module.scss‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@
1212
display: flex;
1313
padding: $space-sm;
1414
background-color: $black-5;
15-
color: #000000;
15+
color: $tc-black;
1616
border-radius: $space-sm;
1717
opacity: 1 !important;
1818
box-shadow: 0 1px 5px $tips-shadow;
1919
text-transform: none;
2020
max-width: 50%;
2121

2222
&.inverted {
23-
background-color: #000000;
23+
background-color: $tc-black;
2424
color: $black-5;
2525
}
2626
}
@@ -31,8 +31,7 @@
3131
outline: none;
3232

3333
@include ltemd {
34-
width: 20px;
35-
height: 20px;
34+
@include icon-xl;
3635
}
3736
}
3837
}

‎src-ts/lib/help-icon/HelpIcon.tsx‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,63 +3,63 @@ import { FC, ReactNode, RefObject, SVGProps, useRef } from 'react'
33
import ReactTooltip from 'react-tooltip'
44
import { v4 as uuidv4 } from 'uuid'
55

6-
import { IconOutline, IconSolid } from '../'
6+
import { IconOutline, IconSolid } from '../svgs'
77

88
import styles from './HelpIcon.module.scss'
99

1010
type InfoType = 'Help' | 'Info'
1111
interface InfoIcon {
12-
[type: string]: FC<SVGProps<SVGSVGElement>>
12+
[type: string]: FC<SVGProps<SVGSVGElement>>
1313
}
1414
const IconMap: InfoIcon = {
15-
Help: IconOutline.QuestionMarkCircleIcon,
16-
Info: IconSolid.InformationCircleIcon,
15+
Help: IconOutline.QuestionMarkCircleIcon,
16+
Info: IconSolid.InformationCircleIcon,
1717
}
1818
export interface HelpIconProps {
19-
arrowColor?: string
20-
backgroundColor?: string
21-
children: ReactNode
22-
className?: string
23-
inverted?: boolean
24-
textColor?: string
25-
type?: InfoType
19+
arrowColor?: string
20+
backgroundColor?: string
21+
children: ReactNode
22+
className?: string
23+
inverted?: boolean
24+
textColor?: string
25+
type?: InfoType
2626
}
2727

2828
const HelpIcon: FC<HelpIconProps> = ({
29-
children,
30-
className,
31-
inverted,
32-
arrowColor = '#f4f4f4',
33-
backgroundColor = '#f4f4f4',
34-
textColor = '#00000',
35-
type = 'Help',
29+
children,
30+
className,
31+
inverted,
32+
arrowColor = '#f4f4f4',
33+
backgroundColor = '#f4f4f4',
34+
textColor = '#00000',
35+
type = 'Help',
3636
}: HelpIconProps) => {
37-
const tooltipId: RefObject<string> = useRef<string>(uuidv4())
37+
const tooltipId: RefObject<string> = useRef<string>(uuidv4())
3838

39-
const Icon: FC<SVGProps<SVGSVGElement>> = IconMap[type]
40-
return (
41-
<div className={classNames(styles['help-icon-wrapper'], className)}>
42-
<Icon
43-
width={16}
44-
height={16}
45-
data-tip
46-
data-for={tooltipId.current}
47-
className={styles['help-icon']}
48-
/>
49-
<ReactTooltip
50-
arrowColor={arrowColor}
51-
backgroundColor={backgroundColor}
52-
textColor={textColor}
53-
className={classNames(styles['tooltip'], { [styles.inverted]: inverted })}
54-
id={tooltipId.current}
55-
aria-haspopup='true'
56-
place='bottom'
57-
effect='solid'
58-
>
59-
{children}
60-
</ReactTooltip>
61-
</div>
62-
)
39+
const Icon: FC<SVGProps<SVGSVGElement>> = IconMap[type]
40+
return (
41+
<div className={classNames(styles['help-icon-wrapper'], className)}>
42+
<Icon
43+
width={16}
44+
height={16}
45+
data-tip
46+
data-for={tooltipId.current}
47+
className={styles['help-icon']}
48+
/>
49+
<ReactTooltip
50+
arrowColor={arrowColor}
51+
backgroundColor={backgroundColor}
52+
textColor={textColor}
53+
className={classNames(styles['tooltip'], { [styles.inverted]: inverted })}
54+
id={tooltipId.current}
55+
aria-haspopup='true'
56+
place='bottom'
57+
effect='solid'
58+
>
59+
{children}
60+
</ReactTooltip>
61+
</div>
62+
)
6363
}
6464

6565
export default HelpIcon

‎src-ts/lib/svgs/icon-check-thin.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src-ts/lib/svgs/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { ReactComponent as GitlabIcon } from './gitlab.svg'
88
import { ReactComponent as ArrowIcon } from './icon-arrow.svg'
99
import { ReactComponent as BackArrowIcon } from './icon-back-arrow.svg'
1010
import { ReactComponent as LogoIcon } from './logo.svg'
11+
import { ReactComponent as SaveForLaterIcon } from './save-for-later-icon.svg'
1112
import { ReactComponent as SocialIconFacebook } from './social-fb-icon.svg'
1213
import { ReactComponent as SocialIconInstagram } from './social-insta-icon.svg'
1314
import { ReactComponent as SocialIconLinkedIn } from './social-linkedin-icon.svg'
@@ -17,6 +18,7 @@ import { ReactComponent as SocialShareTwitter } from './social-share-twitter.svg
1718
import { ReactComponent as SocialIconTwitter } from './social-tw-icon.svg'
1819
import { ReactComponent as SocialIconYoutube } from './social-yt-icon.svg'
1920
import { ReactComponent as TooltipArrowIcon } from './tooltip-arrow.svg'
21+
import { ReactComponent as IconCheck } from './icon-check-thin.svg'
2022

2123
export {
2224
ActiveTabTipIcon,
@@ -35,6 +37,8 @@ export {
3537
SocialShareLinkedIn,
3638
TooltipArrowIcon,
3739
GitlabIcon,
38-
GithubIcon
40+
GithubIcon,
41+
SaveForLaterIcon,
42+
IconCheck
3943
}
4044
export * from './icon-wrapper'

‎src-ts/lib/svgs/save-for-later-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react'
22
import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
33

4-
import { ReactComponent as SaveForLaterIcon } from '../../../../../../src/assets/images/save-for-later-icon.svg'
54
import {
65
Form,
76
FormAction,
@@ -16,6 +15,7 @@ import {
1615
ProfileContextData,
1716
useCheckIsMobile
1817
} from '../../../../../lib'
18+
import { SaveForLaterIcon } from '../../../../../lib/svgs'
1919
import {
2020
Challenge,
2121
ChallengeMetadata,
@@ -206,7 +206,7 @@ const BugHuntIntakeForm: React.FC = () => {
206206
* @param index the index of the button
207207
* @returns true or false depending on whether its SAVE FOR LATER
208208
*/
209-
const shouldDisableButton: (isPrimaryGroup: boolean, index: number) => boolean = (isPrimaryGroup, index) => {
209+
function shouldDisableButton(isPrimaryGroup: boolean, index: number): boolean {
210210
// SAVE FOR LATER belongs to primary group and its index is 0, we are interested only for that particular case
211211
// else return false which means not disabled from this function
212212
if (isPrimaryGroup && index === 0) {

0 commit comments

Comments
 (0)