Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Commit fd0c708

Browse files
konstantinosG-derivKonstantinos-Gk
authored and
habib-deriv
committed
refactor: stepperview component (#4108)
Co-authored-by: Konstantinos-Gk <[email protected]>
1 parent 8a85597 commit fd0c708

File tree

6 files changed

+159
-1
lines changed

6 files changed

+159
-1
lines changed

‎gatsby-browser.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { getClientInformation, getDomain, getLanguage, addScript } from 'common/
99
import { pushwoosh_app_code } from 'common/constants'
1010
import './static/css/ibm-plex-sans-var.css'
1111
import './static/css/noto-sans-arabic.css'
12+
import './static/css/ubuntu.css'
1213

1314
const is_browser = typeof window !== 'undefined'
1415

‎src/components/elements/common-header-section.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ type CommonHeaderSectionProps = {
1111
title_font_size?: string
1212
subtitle_font_size?: string
1313
color?: string
14+
line_height?: string
1415
text_color?: string
1516
font_weight?: string
1617
font_style?: string
@@ -30,6 +31,7 @@ const CommonHeaderSection = ({
3031
margin,
3132
bgcolor,
3233
color,
34+
line_height,
3335
title_text_color,
3436
subtitle_text_color,
3537
title_font_size,
@@ -56,8 +58,8 @@ const CommonHeaderSection = ({
5658
fontSize: title_font_size,
5759
fontFamily: 'Ubuntu',
5860
fontWeight: 'bold',
59-
margin: margin,
6061
textAlign: align_title,
62+
lineHeight: line_height,
6163
}}
6264
>
6365
<Localize translate_text={title} />
@@ -70,6 +72,7 @@ const CommonHeaderSection = ({
7072
fontWeight: 'normal',
7173
margin: margin,
7274
textAlign: align_subtitle,
75+
lineHeight: line_height,
7376
}}
7477
>
7578
<Localize translate_text={subtitle} />

‎src/components/elements/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { Text, LinkText, Header, BaseElement, SpanLinkText } from './typography'
2020
import LocalizedLinkText from './localized-link-text'
2121
import LiveChatLinkText from './livechat-link-text'
2222
import Timeline from './timeline'
23+
import StepperView from './stepper-view'
2324
import { Ul, Li } from './lists'
2425
import { Carousel, CarouselProps } from './carousel'
2526
import VideoPlayer from './video-player'
@@ -59,6 +60,7 @@ export {
5960
Tabs,
6061
Text,
6162
Timeline,
63+
StepperView,
6264
Ul,
6365
VideoPlayer,
6466
Modal,

‎src/components/elements/stepper-view.tsx

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React, { ReactNode } from 'react'
2+
import styled, { css } from 'styled-components'
3+
import { useIsRtl } from 'components/hooks/use-isrtl'
4+
import CommonHeaderSection from 'components/elements/common-header-section'
5+
import { TString } from 'types/generics'
6+
7+
const Checkmark = styled.span<{ is_rtl: boolean }>`
8+
display: inline-block;
9+
width: 22px;
10+
height: 22px;
11+
${({ is_rtl }) => {
12+
return is_rtl
13+
? css`
14+
transform: rotate(45deg) scaleX(-1);
15+
`
16+
: css`
17+
transform: rotate(45deg) scaleX(1);
18+
`
19+
}}
20+
21+
&::before {
22+
content: '';
23+
position: absolute;
24+
width: 2px;
25+
height: 9px;
26+
background-color: ${(props) => (props.color ? props.color : 'var(--color-white)')};
27+
left: 11px;
28+
top: 6px;
29+
}
30+
&::after {
31+
content: '';
32+
position: absolute;
33+
width: 4px;
34+
height: 2px;
35+
background-color: ${(props) => (props.color ? props.color : 'var(--color-white)')};
36+
left: 8px;
37+
top: 13px;
38+
}
39+
`
40+
41+
const ContentWrapper = styled.div`
42+
margin-top: 0;
43+
margin-left: 6rem;
44+
`
45+
const OvalWrapper = styled.div`
46+
width: 24px;
47+
height: 24px;
48+
line-height: 2.75rem;
49+
background-color: ${(props) => (props.color ? props.color : 'var(--color-red)')};
50+
border-radius: 50%;
51+
text-align: center;
52+
margin-right: 0.8rem;
53+
position: absolute;
54+
padding-left: 1px;
55+
left: -13px;
56+
`
57+
58+
const FlexWrapper = styled.div<StepperViewTickProps>`
59+
display: flex;
60+
border-left: ${(props) => (props.is_border ? 'var(--color-red) dashed 1px' : 'unset')};
61+
position: relative;
62+
padding-bottom: ${(props) => (props.pb ? props.pb : '4rem')};
63+
`
64+
const Oval = () => {
65+
const is_rtl = useIsRtl()
66+
67+
return (
68+
<OvalWrapper>
69+
<Checkmark is_rtl={is_rtl} />
70+
</OvalWrapper>
71+
)
72+
}
73+
74+
type StepperViewTickProps = {
75+
pb?: string
76+
pl?: string
77+
is_border?: boolean
78+
color?: string
79+
}
80+
81+
type StepperViewProps = {
82+
first_step_title?: TString
83+
first_step_subtitle?: TString
84+
second_step_title?: TString
85+
second_step_subtitle?: TString
86+
third_step_title?: TString
87+
third_step_subtitle?: TString
88+
fourth_step_title?: TString
89+
fourth_step_subtitle?: TString
90+
} & Pick<StepperViewTickProps, 'pb' | 'pl'>
91+
92+
interface Item {
93+
title?: TString
94+
subtitle?: TString
95+
}
96+
97+
const handleLastBorder = (index, items) => {
98+
if (index !== items.length - 1) {
99+
return true
100+
}
101+
return false
102+
}
103+
104+
const StepperView = ({
105+
pb,
106+
first_step_title,
107+
first_step_subtitle,
108+
second_step_title,
109+
second_step_subtitle,
110+
third_step_title,
111+
third_step_subtitle,
112+
}: StepperViewProps) => {
113+
const items: Item[] = [
114+
{
115+
title: first_step_title,
116+
subtitle: first_step_subtitle,
117+
},
118+
{
119+
title: second_step_title,
120+
subtitle: second_step_subtitle,
121+
},
122+
{
123+
title: third_step_title,
124+
subtitle: third_step_subtitle,
125+
},
126+
]
127+
return (
128+
<>
129+
{items.map((item, index) => (
130+
<div key={item.title}>
131+
<FlexWrapper is_border={handleLastBorder(index, items)} pb={pb}>
132+
<ContentWrapper>
133+
<Oval></Oval>
134+
<CommonHeaderSection
135+
title={item.title}
136+
subtitle={item.subtitle}
137+
title_font_size="2.4rem"
138+
subtitle_font_size="1.6rem"
139+
margin="1.2rem 0 0 0"
140+
line_height="1.5"
141+
/>
142+
</ContentWrapper>
143+
</FlexWrapper>
144+
</div>
145+
))}
146+
</>
147+
)
148+
}
149+
150+
export default StepperView

‎src/components/elements/timeline.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { ReactNode } from 'react'
22
import styled, { css } from 'styled-components'
33
import { useIsRtl } from 'components/hooks/use-isrtl'
44

5+
// TO-DO (DERIV-REBRANDING) Replace this component with StepperView.
6+
57
const Checkmark = styled.span<{ is_rtl: boolean }>`
68
display: inline-block;
79
width: 22px;

‎static/fonts/Ubuntu-Regular.ttf

293 KB
Binary file not shown.

0 commit comments

Comments
 (0)