Skip to content

Commit 609b41f

Browse files
luizrrodriguesluizrrodrigues
authored
Merge pull request #5621 from topcoder-platform/new-tabs-theme
New tabs theme
2 parents 0fa9673 + 9328e76 commit 609b41f

File tree

5 files changed

+207
-4
lines changed

5 files changed

+207
-4
lines changed

‎.circleci/config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -364,7 +364,7 @@ workflows:
364364
filters:
365365
branches:
366366
only:
367-
- free
367+
- new-tabs-theme
368368
# This is stage env for production QA releases
369369
- "build-prod-staging":
370370
context : org-global

‎src/shared/components/Contentful/Tabs/Tabs.jsx

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import underlineTheme from './themes/underline.scss';
2626
import underlineDarkTheme from './themes/underline-dark.scss';
2727
import verticalTheme from './themes/vertical.scss';
2828
import pillsTheme from './themes/pills.scss';
29+
import underlineBoxTheme from './themes/underline-box.scss';
2930

3031
export const TAB_THEMES = {
3132
Default: defaultTheme,
@@ -36,13 +37,15 @@ export const TAB_THEMES = {
3637
'Underline dark': underlineDarkTheme,
3738
Vertical: verticalTheme,
3839
Pills: pillsTheme,
40+
'Underline box': underlineBoxTheme,
3941
};
4042

4143
export default class TabsItemsLoader extends Component {
4244
constructor(props) {
4345
super(props);
4446
this.state = {
4547
tabIndex: props.selected || 0,
48+
mobileTabsShow: false,
4649
};
4750

4851
this.updatePageUrl.bind(this);
@@ -83,8 +86,9 @@ export default class TabsItemsLoader extends Component {
8386
environment,
8487
theme,
8588
tabId,
89+
themeName,
8690
} = this.props;
87-
const { tabIndex } = this.state;
91+
const { tabIndex, mobileTabsShow } = this.state;
8892

8993
return (
9094
<ContentfulLoader
@@ -97,11 +101,39 @@ export default class TabsItemsLoader extends Component {
97101
className={theme.container}
98102
selectedIndex={tabIndex}
99103
selectedTabClassName={theme.selected}
100-
onSelect={tIndx => this.setState({ tabIndex: tIndx })}
104+
onSelect={tIndx => this.setState({ tabIndex: tIndx, mobileTabsShow: false })}
101105
forceRenderTabPanel
102106
>
103107
<div className={theme.tabListWrap}>
104-
<TabList className={theme.tablist}>
108+
{
109+
themeName === 'Underline box' ? (
110+
<button type="button" className={theme.tabListMobileTrigger} onClick={() => this.setState({ mobileTabsShow: !mobileTabsShow })}>
111+
<MarkdownRenderer
112+
markdown={_.toArray(data.entries.items)[tabIndex].fields.tab}
113+
/>
114+
<svg className={mobileTabsShow ? theme.tabListMobileTriggerSVGOpen : theme.tabListMobileTriggerSVG} width="16px" height="10px" viewBox="0 0 16 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
115+
<defs>
116+
<polygon id="path-1" points="7.7 9.2 0 1.5 1.4 0 7.7 6.3 14 0 15.4 1.5" />
117+
</defs>
118+
<g id="Mobile" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
119+
<g id="01" transform="translate(-228.000000, -315.000000)">
120+
<g id="Group-6" transform="translate(16.000000, 289.000000)">
121+
<g id="Group-4" transform="translate(126.000000, 21.000000)">
122+
<g id="icons/arrow/minimal-down" transform="translate(86.300000, 5.400000)">
123+
<mask id="mask-2" fill="white">
124+
<use xlinkHref="#path-1" />
125+
</mask>
126+
<use id="icon-color" fill="#2A2A2A" xlinkHref="#path-1" />
127+
</g>
128+
</g>
129+
</g>
130+
</g>
131+
</g>
132+
</svg>
133+
</button>
134+
) : null
135+
}
136+
<TabList className={[theme.tablist, mobileTabsShow ? theme.visible : null]}>
105137
{
106138
_.map(data.entries.items, tabItem => (
107139
<Tab
@@ -208,4 +240,5 @@ TabsItemsLoader.propTypes = {
208240
selected: PT.number,
209241
theme: PT.shape().isRequired,
210242
tabId: PT.string.isRequired,
243+
themeName: PT.string.isRequired,
211244
};

‎src/shared/components/Contentful/Tabs/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ function ContentfulTabs(props) {
3535
selected={fields.selected}
3636
theme={TAB_THEMES[fields.theme || 'Default']}
3737
tabId={fields.urlQueryName || id}
38+
themeName={fields.theme}
3839
/>
3940
);
4041
}}

‎src/shared/components/Contentful/Tabs/themes/underline-box.scss

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
@import "~styles/mixins";
2+
3+
$container-background-gray: #ebebeb;
4+
$text-color-black: #262628;
5+
$text-color-gray: #888894;
6+
$text-color-pannel: #4a4a4a;
7+
8+
.container {
9+
margin: auto;
10+
11+
@include xs-to-sm {
12+
margin-top: 65px;
13+
}
14+
}
15+
16+
.tabListWrap {
17+
display: flex;
18+
justify-content: center;
19+
position: relative;
20+
21+
.tablist {
22+
@include roboto-regular;
23+
24+
display: flex;
25+
flex-direction: row;
26+
justify-content: center;
27+
list-style-type: none;
28+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
29+
margin: auto;
30+
min-height: 60px;
31+
border-radius: 30px;
32+
align-items: center;
33+
background-color: white;
34+
padding: 0 25px;
35+
border: 1px solid #e4e4e4;
36+
37+
@include xs-to-sm {
38+
white-space: nowrap;
39+
flex-direction: column;
40+
padding: 28px 15px 0;
41+
align-items: flex-start;
42+
border-radius: 8px;
43+
min-width: 85vw;
44+
overflow: visible;
45+
position: absolute;
46+
z-index: 999;
47+
display: none; // by default
48+
49+
&.visible {
50+
display: flex;
51+
}
52+
}
53+
}
54+
55+
.tabListMobileTrigger {
56+
display: none;
57+
justify-content: center;
58+
align-items: center;
59+
background-color: white;
60+
position: absolute;
61+
top: -65px;
62+
width: 85vw;
63+
left: calc(50% - 42.5vw);
64+
outline: none;
65+
border: navajowhite;
66+
min-height: 60px;
67+
font-family: Barlow, sans-serif;
68+
font-size: 16px;
69+
font-weight: 600;
70+
text-transform: uppercase;
71+
border-radius: 30px;
72+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
73+
color: #2a2a2a;
74+
75+
@media (max-width: 768px) {
76+
display: flex;
77+
}
78+
79+
.tabListMobileTriggerSVG,
80+
.tabListMobileTriggerSVGOpen {
81+
margin-left: 9px;
82+
}
83+
84+
.tabListMobileTriggerSVGOpen {
85+
transform: scaleY(-1);
86+
}
87+
}
88+
}
89+
90+
.tab {
91+
text-align: center;
92+
margin: 0 25px;
93+
color: #555;
94+
font-family: Barlow, sans-serif;
95+
font-size: 16px;
96+
font-weight: 600;
97+
line-height: 20px;
98+
padding-bottom: 5px;
99+
cursor: pointer;
100+
margin-bottom: -5px;
101+
position: relative;
102+
103+
@include xs-to-sm {
104+
margin: 0;
105+
margin-bottom: 23px;
106+
padding: 0;
107+
padding-left: 5px;
108+
109+
&::after {
110+
display: none;
111+
}
112+
113+
&:hover,
114+
&.selected {
115+
border-left: 3px solid #43d7b0;
116+
margin-left: -3px;
117+
}
118+
}
119+
120+
&:hover,
121+
&.selected {
122+
color: #2a2a2a;
123+
124+
&::after {
125+
content: '';
126+
border-radius: 1000vw;
127+
background: #43d7b0;
128+
height: 3px;
129+
width: 15px;
130+
position: absolute;
131+
bottom: 0;
132+
left: calc(50% - 7px);
133+
border-left: 1px solid #fff;
134+
border-right: 1px solid #fff;
135+
136+
@include xs-to-sm {
137+
width: calc(100% - 36px);
138+
bottom: -5px;
139+
}
140+
}
141+
}
142+
143+
p {
144+
small {
145+
color: #888894;
146+
font-size: 13px;
147+
font-weight: 400;
148+
line-height: 25px;
149+
text-align: left;
150+
}
151+
152+
strong {
153+
font-weight: bold;
154+
}
155+
}
156+
}
157+
158+
.tabpannel {
159+
display: none;
160+
}
161+
162+
.selectedTabPanel {
163+
display: block;
164+
165+
@include xs-to-sm {
166+
padding: 0 15px;
167+
}
168+
}

‎src/shared/components/Gigs/GigApply/style.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,7 @@
313313
margin-left: 20px;
314314
}
315315
}
316+
316317
.gig-list-btn {
317318
margin-right: 12px;
318319
}

0 commit comments

Comments
 (0)