Skip to content

Commit 95c5ee8

Browse files
asadath1395asadath1395
committed
PROD-2708 #comment Improve readability of the bug hunt package
1 parent 733ab4a commit 95c5ee8

File tree

12 files changed

+288
-63
lines changed

12 files changed

+288
-63
lines changed

‎src-ts/lib/button/Button.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export interface ButtonProps {
1616
readonly elementType?: keyof JSX.IntrinsicElements
1717
readonly hidden?: boolean
1818
readonly icon?: FC<SVGProps<SVGSVGElement>>
19+
readonly id?: string
1920
readonly label?: string
2021
readonly name?: string
2122
readonly onClick?: (event?: any) => void
@@ -79,6 +80,8 @@ const Button: FC<ButtonProps> = (props: ButtonProps) => {
7980
tabIndex={props.tabIndex}
8081
title={props.title}
8182
type={props.type || 'button'}
83+
id={props.id}
84+
value={props.id}
8285
>
8386
{content}
8487
</button>

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

Lines changed: 120 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,36 @@
1616
.card {
1717
flex: 1 1 0;
1818
margin-right: $space-xl;
19-
border: solid 1px $black-80;
2019
border-radius: $space-xs;
21-
padding: $space-lg;
22-
cursor: pointer;
20+
padding: $space-lg 0;
21+
background-color: $black-5;
22+
position: relative;
2323

24-
&.selected {
25-
background-color: $turq-160;
26-
border: 1px solid $turq-160;
24+
.popular-card {
25+
display: flex;
26+
flex-direction: row;
27+
justify-content: center;
28+
align-items: center;
29+
padding: $space-sm;
30+
31+
width: 100%;
32+
height: $space-xxxxl;
33+
background: $tc-grad19;
34+
border-radius: $space-sm $space-sm 0px 0px;
2735
color: $tc-white;
28-
svg {
29-
path {
30-
color: $tc-white;
31-
}
32-
}
36+
position: absolute;
37+
left: 0;
38+
top: -$space-xxl;
39+
}
40+
41+
&.mobile-popular {
42+
margin-top: $space-xxxl;
3343
}
3444

3545
@include ltemd {
3646
margin-right: 0;
3747
margin-bottom: $space-lg;
48+
padding-top: $space-xxl;
3849
&:last-child {
3950
margin-bottom: 0;
4051
}
@@ -45,22 +56,119 @@
4556

4657
.card-header {
4758
text-align: center;
59+
display: flex;
60+
flex-direction: column;
61+
align-items: center;
62+
63+
h3 {
64+
margin: $space-lg;
65+
font-weight: 500;
66+
font-size: $space-mx;
67+
line-height: $space-mx;
68+
margin-top: $space-xxl;
69+
}
70+
71+
&.feature {
72+
visibility: hidden;
73+
74+
h3 {
75+
margin: $space-lg;
76+
margin-top: $space-xxl;
77+
font-size: $space-xxxxl;
78+
}
79+
}
80+
81+
&.mobile {
82+
h3 {
83+
font-size: $space-xxxxl;
84+
line-height: $space-xxxxl;
85+
margin-top: $space-md;
86+
margin-bottom: $space-xxl;
87+
}
88+
}
89+
}
90+
91+
.card-header-features {
92+
visibility: hidden;
93+
94+
h3 {
95+
margin: $space-lg;
96+
}
4897
}
4998

5099
.card-section {
51100
margin: $space-lg 0;
52101

102+
.row {
103+
height: auto;
104+
}
105+
106+
.row-divider {
107+
height: $border-xs;
108+
border-bottom: $border solid $black-10;
109+
width: auto;
110+
margin: 0;
111+
}
112+
53113
.card-row {
54114
display: flex;
115+
padding: $space-md;
116+
align-items: center;
117+
min-height: calc($space-lg + $space-mx);
118+
position: relative;
55119

56120
.card-row-col {
57121
align-content: center;
58122
align-items: center;
59-
width: 50%;
60123
flex-wrap: wrap;
61124
flex-grow: 1;
125+
126+
&.mobile {
127+
display: flex;
128+
justify-content: flex-start;
129+
}
130+
131+
&.info-col {
132+
display: flex;
133+
}
134+
135+
svg {
136+
display: inline;
137+
margin-left: $space-xs;
138+
}
139+
140+
&.center {
141+
text-align: center;
142+
}
143+
144+
.label {
145+
@include ltemd {
146+
font-size: 10px;
147+
}
148+
}
62149
}
63150
}
151+
&.mobile {
152+
.feature-name {
153+
width: 100%;
154+
}
155+
.center {
156+
width: 40%;
157+
}
158+
}
159+
&.feature {
160+
margin: calc($space-lg - 0.2px) 0;
161+
}
162+
}
163+
164+
&.feature {
165+
background-color: $tc-white;
166+
margin-right: 0;
167+
168+
.row-divider {
169+
width: 100%;
170+
margin-left: 6%;
171+
}
64172
}
65173
}
66174

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

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

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

78
import styles from './FormCardSet.module.scss'
@@ -11,6 +12,7 @@ interface FormCardSetProps extends FormInputModel {
1112
}
1213

1314
const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value }: FormCardSetProps) => {
15+
const isMobile: boolean = useCheckIsMobile()
1416

1517
const iconFromName: (icon: string) => JSX.Element = (icon: string) => {
1618
if (!icon) {
@@ -24,42 +26,113 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
2426

2527
return (
2628
<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+
2770
{
2871
cards?.map((card, index: number) => {
2972
const formattedPrice: string | undefined = textFormatMoneyLocaleString(card.price)
3073
const selected: boolean = value === card.id
3174

3275
return (
33-
<label key={`card-${index}`}className={cn(styles['card'], selected && styles['selected'])}>
34-
<input checked={value === card.id} type='radio' name={name} id={card.id} value={card.id} onChange={onChange} />
35-
<div className={styles['card-header']}>
76+
<div key={`card-${index}`}className={cn(styles['card'], selected && styles['selected'], isMobile && card.mostPopular && styles['mobile-popular'])}>
77+
78+
{ card.mostPopular && <div className={styles['popular-card']}>MOST POPULAR</div>}
79+
<div className={cn(styles['card-header'], isMobile && styles['mobile'])}>
3680
<div className='body-medium-bold'>{card.title}</div>
3781
<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+
/>
3896
</div>
39-
<hr />
4097
{card.sections.map((section, sectionIndex: number) => (
41-
<div key={`section-${sectionIndex}`} className={styles['card-section']}>
98+
<div key={`section-${sectionIndex}`} className={cn(styles['card-section'], { [styles.mobile]: isMobile })}>
4299
{section.rows.map((row, rowIndex: number) => (
100+
<div className={styles['row']}>
101+
<div className={styles['row-divider']}></div>
43102
<div key={`row-${rowIndex}`} className={styles['card-row']}>
44-
<span className={styles['card-row-col']}>
45-
<>
103+
{isMobile && (
104+
<span className={cn(styles['card-row-col'], styles['mobile'], styles['feature-name'])}>
46105
{row.icon && iconFromName(row.icon)}
47106
{row.label ?
48-
<span className='overline'>{row.label}</span> :
107+
<span className={cn('overline', styles.label)}>{row.label}</span> :
108+
<span className='body-main'>{row.text}</span>
109+
}
110+
{row.infoIcon && (
111+
<HelpIcon
112+
inverted
113+
arrowColor='#000000'
114+
backgroundColor='#000000'
115+
type='Info'
116+
>
117+
{row.tooltipText}
118+
</HelpIcon>
119+
)}
120+
</span>
121+
)}
122+
{row.label && (
123+
<span className={cn(styles['card-row-col'], styles['center'])}>
124+
{ row.valueIcon ?
125+
<IconOutline.CheckIcon width={18} height={16} /> :
49126
<span className='body-main'>{row.text}</span>
50127
}
51-
</>
52-
</span>
53-
{row.label ? (
54-
<span className={styles['card-row-col']}>
55-
<span className='body-main'>{row.text}</span>
56128
</span>
57-
) : <></>}
129+
)}
58130
</div>
131+
</div>
59132
))}
60133
</div>
61134
))}
62-
</label>
135+
</div>
63136
)
64137
})
65138
}

‎src-ts/lib/form/form-groups/form-group-item/FormGroupItem.module.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,14 @@
5151
&.full-width-container {
5252
display: inline;
5353

54+
.group-item-instructions {
55+
margin-top: $space-xxl;
56+
margin-bottom: $space-mxx;
57+
}
58+
5459
}
5560

5661
.full-width-items {
57-
margin-top: $space-xl;
62+
margin-top: $space-xxxl;
5863
}
5964
}

‎src-ts/lib/form/form-input.model.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ export interface FormRadioButtonOption {
1010

1111
export interface FormCard {
1212
id: string,
13+
mostPopular?: boolean
1314
price: number,
1415
sections: Array<{
15-
rows: Array<{ icon?: string, label?: string, text?: string }>
16+
rows: Array<{ icon?: string, infoIcon?: boolean, label?: string, text?: string, tooltipText?: string, valueIcon?: string, }>
1617
}>,
17-
title: string
18+
title: string,
1819
}
1920

2021
export type InputValue = string | boolean | FileList | undefined

0 commit comments

Comments
 (0)