Skip to content

Commit 1cf812e

Browse files
bernardodiascbernardodiasc
authored
"Version-6.8.0" release (#570)
* Change 'Update your profile' CTAs to point to experience form (#569) * Change 'Update your profile' CTAs to point to experience form * Update profile CTAs to pointo to experience form * Add new componetn ProfileAvatar and update HeaderBar to consume it (#568)
1 parent f18a4a2 commit 1cf812e

24 files changed

+10053
-14543
lines changed

‎lib/CustomSelector.js

+4-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/CustomSelector.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/SkillsSelector.js

+6-12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/SkillsSelector.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/Timeframe.js

+4-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/Timeframe.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/all.js

+13-33
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/all.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/fonts.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/fonts.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/registration.js

+2-13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/registration.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

+9,745-14,370
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ui/ApplicantScreen.js

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// @flow
2-
/* global React$Node */
3-
/* global React$StatelessFunctionalComponent */
2+
/* global React$Node React$StatelessFunctionalComponent */
43

54
import React from 'react'
65
import PropTypes from 'prop-types'
@@ -81,7 +80,10 @@ type Props = {
8180
wrapper?: 'narrower' | 'wider',
8281
notification?: React$Node,
8382
menuLinks?: Array<Link>,
84-
appLink?: React$StatelessFunctionalComponent<*>
83+
appLink?: React$StatelessFunctionalComponent<*>,
84+
profileLink?: React$StatelessFunctionalComponent<*>,
85+
logout?: () => void,
86+
avatarUrl?: string
8587
}
8688

8789
const ApplicantScreen = ({
@@ -90,7 +92,10 @@ const ApplicantScreen = ({
9092
noWrapper = false,
9193
notification,
9294
menuLinks,
93-
appLink
95+
appLink,
96+
profileLink,
97+
logout,
98+
avatarUrl
9499
}: Props) => {
95100
const getWrapperClass = () => (wrapper && cx[wrapper]) || cx.content
96101
return (
@@ -99,6 +104,9 @@ const ApplicantScreen = ({
99104
<HeaderBar
100105
links={menuLinks}
101106
appLink={appLink}
107+
profileLink={profileLink}
108+
logout={logout}
109+
avatarUrl={avatarUrl}
102110
/>
103111
</div>
104112
{notification && (

‎src/components/ui/ApplicantScreen.stories.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import faker from 'faker'
66
import { object } from '@storybook/addon-knobs'
77

88
import ApplicantScreen from './ApplicantScreen'
9-
import { HeaderLink, headerBarLinks } from './HeaderBar.stories'
9+
import { HeaderLink, headerBarLinks, ProfileLink } from './HeaderBar.stories'
1010

1111
const Body = ({ children }) => (
1212
<div style={{ height: '100vh' }}>
@@ -40,7 +40,12 @@ storiesOf('Screens and Layouts|ApplicantScreen/States', module)
4040
))
4141
.add('with menu links', () => (
4242
<Body>
43-
<ApplicantScreen menuLinks={object('Link', headerBarLinks)} appLink={HeaderLink}>
43+
<ApplicantScreen
44+
menuLinks={object('Link', headerBarLinks)}
45+
appLink={HeaderLink}
46+
profileLink={ProfileLink}
47+
logout={() => console.log('logout')}
48+
>
4449
{faker.lorem.paragraphs(50)}
4550
</ApplicantScreen>
4651
</Body>
@@ -50,6 +55,8 @@ storiesOf('Screens and Layouts|ApplicantScreen/States', module)
5055
<ApplicantScreen
5156
menuLinks={object('Link', headerBarLinks)}
5257
appLink={HeaderLink}
58+
profileLink={ProfileLink}
59+
logout={() => console.log('logout')}
5360
notification={
5461
<span>You've successfully applied for this position. <b>We will reach out soon via email to talk about next steps.</b></span>
5562
}

‎src/components/ui/EmptyState.stories.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,7 @@ storiesOf('UI Components|EmptyState', module)
88
.add('basic usage', () => (
99
<EmptyState heading='No jobs at the moment...'>
1010
<span>
11-
Please check the Jobs Board later. In the meantime make sure your <a
12-
href='https://www.linkedin.com/'
13-
target='_blank'
14-
rel='noopener noreferrer'
15-
>profile is up-to-date</a>.
11+
Please check the Jobs Board later. In the meantime make sure your <a href='/experience'>profile is up-to-date</a>.
1612
</span>
1713
</EmptyState>
1814
))

‎src/components/ui/HeaderBar.js

+90-37
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
// @flow
22
/* global React$StatelessFunctionalComponent */
33

4-
import React, { PureComponent } from 'react'
4+
import React, { PureComponent, Fragment } from 'react'
55
import ClickOutside from 'react-click-outside'
66

7-
import GenericTooltip from './GenericTooltip'
87
import SvgIcon from './SvgIcon'
8+
import Dropdown from './Dropdown'
9+
import ProfileAvatar from './ProfileAvatar'
910

1011
import { size } from '../../utils/helpers'
1112
import theme, { breakpoints } from '../../styles/theme'
@@ -25,7 +26,10 @@ type Link = {
2526

2627
type Props = {
2728
links?: Array<Link>,
28-
appLink?: React$StatelessFunctionalComponent<*>
29+
appLink?: React$StatelessFunctionalComponent<*>,
30+
profileLink?: React$StatelessFunctionalComponent<*>,
31+
logout?: () => void,
32+
avatarUrl?: string
2933
}
3034

3135
type State = {
@@ -182,24 +186,15 @@ const cx = {
182186
}
183187
`),
184188

185-
profile: cmz(`
186-
& {
187-
white-space: nowrap
188-
text-decoration: none
189-
text-transform: uppercase
190-
cursor: pointer
191-
color: ${theme.typoAnchor}
192-
}
193-
194-
&:hover {
195-
color: ${theme.typoAnchorHover}
196-
}
197-
`),
198-
199189
link: cmz(`
200190
& {
201191
list-style: none
202192
margin: 0 0 32px
193+
line-height: 1
194+
}
195+
196+
&:last-of-type {
197+
margin-bottom: 0
203198
}
204199
205200
@media screen and (min-width: ${breakpoints.sm}) {
@@ -225,6 +220,47 @@ const cx = {
225220

226221
active: cmz(`
227222
text-decoration: underline
223+
`),
224+
225+
profile: cmz(`
226+
& {
227+
display: none
228+
}
229+
230+
@media screen and (min-width: ${breakpoints.sm}) {
231+
& {
232+
display: block
233+
}
234+
}
235+
`),
236+
237+
profileMenu: cmz(`
238+
& {
239+
font-size: 13px
240+
font-weight: 600
241+
padding: 24px 0
242+
margin: 0
243+
background: #FFFFFF
244+
border: 1px solid rgba(0, 0, 0, 0.15)
245+
box-sizing: border-box
246+
box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.15)
247+
}
248+
249+
& * {
250+
margin-bottom: 32px
251+
}
252+
253+
& *:last-child {
254+
margin-bottom: 0
255+
}
256+
`),
257+
258+
profileLink: cmz(`
259+
@media screen and (min-width: ${breakpoints.sm}) {
260+
& {
261+
display: none
262+
}
263+
}
228264
`)
229265
}
230266

@@ -266,8 +302,32 @@ class HeaderBar extends PureComponent<Props, State> {
266302
this.setState({ expanded: false })
267303
}
268304

305+
renderProfileMenuItems = (hideOnDesktop?: boolean) => {
306+
const { logout, profileLink: ProfileLink } = this.props
307+
const linkClassName = [cx.link, hideOnDesktop ? cx.profileLink : ''].join(' ')
308+
return (
309+
<Fragment>
310+
{ProfileLink && (
311+
<li className={linkClassName}>
312+
<ProfileLink className={cx.anchor}>Update your profile</ProfileLink>
313+
</li>
314+
)}
315+
{logout && (
316+
<li className={linkClassName}>
317+
<span
318+
onClick={logout}
319+
className={cx.anchor}
320+
>
321+
Logout
322+
</span>
323+
</li>
324+
)}
325+
</Fragment>
326+
)
327+
}
328+
269329
render () {
270-
const { links } = this.props
330+
const { links, avatarUrl } = this.props
271331
const { expanded } = this.state
272332
return (
273333
<div className={[cx.wrapper, expanded ? cx.expandedWrapper : ''].join(' ')}>
@@ -289,27 +349,20 @@ class HeaderBar extends PureComponent<Props, State> {
289349
<nav className={[cx.nav, expanded ? cx.expandedNav : ''].join(' ')} data-testid='xpui-headerBar-nav'>
290350
<ul className={cx.menu}>
291351
{this.renderLinks()}
352+
{this.renderProfileMenuItems(true)}
292353
</ul>
293-
<GenericTooltip
294-
message={
295-
<span>
296-
We currently heavily rely on LinkedIn
297-
<br />
298-
Profiles to match candidates with
299-
<br />
300-
potential roles.
301-
</span>
302-
}
303-
>
304-
<a
305-
className={cx.profile}
306-
href='https://www.linkedin.com/'
307-
target='_blank'
308-
rel='noopener noreferrer'
354+
355+
<div className={cx.profile}>
356+
<Dropdown
357+
label={<ProfileAvatar src={avatarUrl} />}
358+
targetXOrigin='right'
359+
padded
309360
>
310-
Update your profile
311-
</a>
312-
</GenericTooltip>
361+
<ul className={cx.profileMenu}>
362+
{this.renderProfileMenuItems()}
363+
</ul>
364+
</Dropdown>
365+
</div>
313366
</nav>
314367
</ClickOutside>
315368
) : (

‎src/components/ui/HeaderBar.stories.js

+8
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ export const HeaderLink = ({ children, ...props }: { children: React$Node }) =>
2323
</a>
2424
)
2525

26+
export const ProfileLink = ({ children, ...props }: { children: React$Node }) => (
27+
<a onClick={action('This should be react-router/gasby Link')} {...props}>
28+
{children}
29+
</a>
30+
)
31+
2632
export const headerBarLinks = [
2733
{
2834
label: 'Browse Jobs',
@@ -55,6 +61,8 @@ storiesOf('UI Components|HeaderBar/Use Cases', module)
5561
<HeaderBar
5662
links={object('Link', headerBarLinks)}
5763
appLink={HeaderLink}
64+
profileLink={ProfileLink}
65+
logout={() => console.log('logout')}
5866
/>
5967
</Body>
6068
))

‎src/components/ui/JobsPageLayout.stories.js

+33-11
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions'
66

77
import JobsPageLayout from './JobsPageLayout'
88
import ApplicantScreen from './ApplicantScreen'
9-
import { HeaderLink, headerBarLinks } from './HeaderBar.stories'
9+
import { HeaderLink, headerBarLinks, ProfileLink } from './HeaderBar.stories'
1010
import JobsGrid from './JobsGrid'
1111
import { jobCards } from './JobsGrid.stories'
1212
import JobsPageBreadcrumbs from './JobsPageBreadcrumbs'
@@ -53,12 +53,8 @@ const JobsPageProTipCard = () => (
5353
<ProTipCard heading='How to Stand Out'>
5454
<span>
5555
To be selected for an interview among thousands of applicants,{' '}
56-
<a
57-
href='https://www.linkedin.com/'
58-
target='_blank'
59-
rel='noopener noreferrer'
60-
>
61-
ensure your LinkedIn profile is up-to-date
56+
<a href='/experience'>
57+
ensure your profile is up-to-date
6258
</a>
6359
. It should clearly show your years of experience working on large scale
6460
projects relevant to the job you’re applying for. Remember to showcase the
@@ -70,7 +66,13 @@ const JobsPageProTipCard = () => (
7066
storiesOf('Screens and Layouts|JobsPageLayout', module)
7167
.add('basic usage', () => (
7268
<Body>
73-
<ApplicantScreen noWrapper menuLinks={headerBarLinks} appLink={HeaderLink}>
69+
<ApplicantScreen
70+
noWrapper
71+
menuLinks={headerBarLinks}
72+
appLink={HeaderLink}
73+
profileLink={ProfileLink}
74+
logout={() => console.log('logout')}
75+
>
7476
<JobsPageLayout
7577
hero={
7678
<WelcomeHero
@@ -92,7 +94,13 @@ storiesOf('Screens and Layouts|JobsPageLayout', module)
9294
storiesOf('Screens and Layouts|JobsPageLayout/Use Cases', module)
9395
.add('job details page', () => (
9496
<Body>
95-
<ApplicantScreen noWrapper menuLinks={headerBarLinks} appLink={HeaderLink}>
97+
<ApplicantScreen
98+
noWrapper
99+
menuLinks={headerBarLinks}
100+
appLink={HeaderLink}
101+
profileLink={ProfileLink}
102+
logout={() => console.log('logout')}
103+
>
96104
<JobsPageLayout
97105
heading={
98106
<JobsPageBreadcrumbs
@@ -119,7 +127,13 @@ storiesOf('Screens and Layouts|JobsPageLayout/Use Cases', module)
119127
))
120128
.add('my applications page', () => (
121129
<Body>
122-
<ApplicantScreen noWrapper menuLinks={headerBarLinks} appLink={HeaderLink}>
130+
<ApplicantScreen
131+
noWrapper
132+
menuLinks={headerBarLinks}
133+
appLink={HeaderLink}
134+
profileLink={ProfileLink}
135+
logout={() => console.log('logout')}
136+
>
123137
<JobsPageLayout
124138
heading='Pending applications'
125139
content={
@@ -144,6 +158,8 @@ storiesOf('Screens and Layouts|JobsPageLayout/Debug', module)
144158
noWrapper
145159
menuLinks={headerBarLinks}
146160
appLink={HeaderLink}
161+
profileLink={ProfileLink}
162+
logout={() => console.log('logout')}
147163
notification={
148164
<span>You've successfully applied for this position. <b>We will reach out soon via email to talk about next steps.</b></span>
149165
}
@@ -178,7 +194,13 @@ storiesOf('Screens and Layouts|JobsPageLayout/Debug', module)
178194
))
179195
.add('short content to see footer at the applicant screen\'s bottom', () => (
180196
<Body>
181-
<ApplicantScreen noWrapper menuLinks={headerBarLinks} appLink={HeaderLink}>
197+
<ApplicantScreen
198+
noWrapper
199+
menuLinks={headerBarLinks}
200+
appLink={HeaderLink}
201+
profileLink={ProfileLink}
202+
logout={() => console.log('logout')}
203+
>
182204
<JobsPageLayout
183205
heading={
184206
<JobsPageBreadcrumbs

‎src/components/ui/ProTipCard.stories.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,8 @@ storiesOf('UI Components|ProTipCard', module)
1111
<ProTipCard heading='How to Stand Out'>
1212
<span>
1313
To be selected for an interview among thousands of applicants,{' '}
14-
<a
15-
href='https://www.linkedin.com/'
16-
target='_blank'
17-
rel='noopener noreferrer'
18-
>
19-
ensure your LinkedIn profile is up-to-date
14+
<a href='/experience'>
15+
ensure your profile is up-to-date
2016
</a>
2117
. It should clearly show your years of experience working on large scale
2218
projects relevant to the job you’re applying for. Remember to showcase the

0 commit comments

Comments
 (0)