Skip to content

Commit 08022eb

Browse files
bernardodiascJesse Bangs
bernardodiasc
and
Jesse Bangs
authored
"Version-6.9.0" release (#573)
* Left-align menu items and display applicant initials (#572) * Left-align menu items and display applicant initials Left-align menu items within the HeaderBar Add an `avatarName` property to the ProfileAvatar properties which can be used to generate applicant initials in place of the old placeholder icon. Also add this to containing properties. * Fix flow error in ProfileAvatar * Create ArticleCard component (#571) Co-authored-by: Jesse Bangs <[email protected]>
1 parent 1cf812e commit 08022eb

22 files changed

+405
-32
lines changed

‎lib/CustomSelector.js

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

‎lib/SkillsSelector.js

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

‎lib/Timeframe.js

+2-2
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

+8-8
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-2
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.

‎src/components/ui/ApplicantScreen.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ type Props = {
8383
appLink?: React$StatelessFunctionalComponent<*>,
8484
profileLink?: React$StatelessFunctionalComponent<*>,
8585
logout?: () => void,
86-
avatarUrl?: string
86+
avatarUrl?: string,
87+
avatarName?: string
8788
}
8889

8990
const ApplicantScreen = ({
@@ -95,7 +96,8 @@ const ApplicantScreen = ({
9596
appLink,
9697
profileLink,
9798
logout,
98-
avatarUrl
99+
avatarUrl,
100+
avatarName
99101
}: Props) => {
100102
const getWrapperClass = () => (wrapper && cx[wrapper]) || cx.content
101103
return (
@@ -107,6 +109,7 @@ const ApplicantScreen = ({
107109
profileLink={profileLink}
108110
logout={logout}
109111
avatarUrl={avatarUrl}
112+
avatarName={avatarName}
110113
/>
111114
</div>
112115
{notification && (

‎src/components/ui/ArticleCard.js

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
// @flow
2+
3+
import React from 'react'
4+
import cmz from 'cmz'
5+
6+
import theme from '../../styles/theme'
7+
8+
const cx = {
9+
card: cmz(`
10+
border: 1px solid ${theme.lineSilver2}
11+
display: flex
12+
flex-direction: column
13+
max-width: 340px
14+
align-items: stretch
15+
`),
16+
17+
poster: cmz(`
18+
width: 100%
19+
`),
20+
21+
content: cmz(`
22+
& {
23+
padding: 24px
24+
display: flex
25+
flex: 1
26+
flex-direction: column
27+
}
28+
29+
& *:last-child {
30+
margin: 0
31+
}
32+
`),
33+
34+
category: cmz(`
35+
font-family: Open Sans
36+
font-weight: bold
37+
font-size: 12px
38+
line-height: 16px
39+
color: ${theme.typoGrayed}
40+
margin: 0 0 24px
41+
text-transform: uppercase
42+
`),
43+
44+
title: cmz(`
45+
& {
46+
font-family: Open Sans
47+
font-weight: bold
48+
font-size: 18px
49+
line-height: 25px
50+
color: ${theme.typoHeading}
51+
margin: 0 0 12px
52+
text-transform: uppercase
53+
}
54+
55+
& a,
56+
& a:hover {
57+
color: ${theme.typoHeading}
58+
text-decoration: none
59+
}
60+
`),
61+
62+
excerpt: cmz(`
63+
font-family: Source Sans Pro
64+
font-weight: normal
65+
font-size: 15px
66+
line-height: 150%
67+
color: ${theme.typoGrayed}
68+
margin: 0
69+
flex: 1
70+
margin: 0 0 24px
71+
display: block
72+
`),
73+
74+
url: cmz(`
75+
& {
76+
font-family: Source Sans Pro
77+
font-weight: 600
78+
font-size: 16px
79+
line-height: 150%
80+
color: ${theme.typoAnchor}
81+
text-decoration: none
82+
}
83+
84+
&:hover {
85+
color: ${theme.typoAnchorHover}
86+
}
87+
`)
88+
}
89+
90+
type Props = {
91+
poster?: string,
92+
category?: string,
93+
title?: string,
94+
excerpt?: string,
95+
url?: string
96+
}
97+
98+
const ArticleCard = ({
99+
poster,
100+
category,
101+
title,
102+
excerpt,
103+
url
104+
}: Props) => poster || category || title || excerpt || url ? (
105+
<section className={cx.card}>
106+
{poster && (
107+
<img src={poster} className={cx.poster} />
108+
)}
109+
{(category || title || excerpt || url) && (
110+
<div className={cx.content}>
111+
{category && (
112+
<div className={cx.category}>{category}</div>
113+
)}
114+
{title && (
115+
<h1 className={cx.title}>
116+
{url ? <a href={url}>{title}</a> : title}
117+
</h1>
118+
)}
119+
{excerpt && (
120+
<p className={cx.excerpt}>{excerpt}</p>
121+
)}
122+
{url && (
123+
<a href={url} className={cx.url}>Learn more &gt;</a>
124+
)}
125+
</div>
126+
)}
127+
</section>
128+
) : null
129+
130+
export default ArticleCard

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

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// @flow
2+
3+
import React from 'react'
4+
import { storiesOf } from '@storybook/react'
5+
6+
import ArticleCard from './ArticleCard'
7+
8+
storiesOf('UI Components|ArticleCard', module)
9+
.add('basic usage', () => (
10+
<ArticleCard
11+
poster='https://picsum.photos/341/191'
12+
category='X-OUTPOST'
13+
title='X-OUTPOST: AUSTRIA (SKIING)'
14+
excerpt='This December, X-Teamers spent eight days skiing in Austria, in perfect weather conditions. Read on to find out why Solden is a great skiing destination.'
15+
url='https://x-team.com/blog'
16+
/>
17+
))
18+
19+
storiesOf('UI Components|ArticleCard/Debug', module)
20+
.add('missing poster', () => (
21+
<ArticleCard
22+
category='X-OUTPOST'
23+
title='X-OUTPOST: AUSTRIA (SKIING)'
24+
excerpt='This December, X-Teamers spent eight days skiing in Austria, in perfect weather conditions. Read on to find out why Solden is a great skiing destination.'
25+
url='https://x-team.com/blog'
26+
/>
27+
))
28+
.add('missing category', () => (
29+
<ArticleCard
30+
poster='https://picsum.photos/341/191'
31+
title='X-OUTPOST: AUSTRIA (SKIING)'
32+
excerpt='This December, X-Teamers spent eight days skiing in Austria, in perfect weather conditions. Read on to find out why Solden is a great skiing destination.'
33+
url='https://x-team.com/blog'
34+
/>
35+
))
36+
.add('missing title', () => (
37+
<ArticleCard
38+
poster='https://picsum.photos/341/191'
39+
category='X-OUTPOST'
40+
excerpt='This December, X-Teamers spent eight days skiing in Austria, in perfect weather conditions. Read on to find out why Solden is a great skiing destination.'
41+
url='https://x-team.com/blog'
42+
/>
43+
))
44+
.add('missing excerpt', () => (
45+
<ArticleCard
46+
poster='https://picsum.photos/341/191'
47+
category='X-OUTPOST'
48+
title='X-OUTPOST: AUSTRIA (SKIING)'
49+
url='https://x-team.com/blog'
50+
/>
51+
))
52+
.add('missing url', () => (
53+
<ArticleCard
54+
poster='https://picsum.photos/341/191'
55+
category='X-OUTPOST'
56+
title='X-OUTPOST: AUSTRIA (SKIING)'
57+
excerpt='This December, X-Teamers spent eight days skiing in Austria, in perfect weather conditions. Read on to find out why Solden is a great skiing destination.'
58+
/>
59+
))
60+
.add('missing props', () => (
61+
<ArticleCard />
62+
))

‎src/components/ui/ArticleCardSection.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// @flow
2+
/* global React$Node */
3+
4+
import React from 'react'
5+
import cmz from 'cmz'
6+
7+
import theme, { breakpoints } from '../../styles/theme'
8+
9+
const cx = {
10+
section: cmz(`
11+
display: block
12+
`),
13+
14+
cards: cmz(`
15+
& {
16+
display: flex
17+
flex-direction: column
18+
align-items: center
19+
}
20+
21+
& > * {
22+
margin: 0 0 24px 0
23+
}
24+
25+
& > *:last-child {
26+
margin: 0
27+
}
28+
29+
@media screen and (min-width: ${breakpoints.sm}) {
30+
& {
31+
flex-direction: row
32+
align-items: normal
33+
}
34+
35+
& > * {
36+
margin: 0 12px 0 0
37+
width: calc(100% / 3 - (12px * 2 / 3))
38+
}
39+
40+
& > *:last-child {
41+
margin: 0
42+
}
43+
}
44+
45+
@media screen and (min-width: ${breakpoints.sm}) {
46+
& {
47+
flex-direction: row
48+
}
49+
50+
& > * {
51+
margin: 0 38px 0 0
52+
width: calc(100% / 3 - (38px * 2 / 3))
53+
max-width: 341px
54+
}
55+
56+
& > *:last-child {
57+
margin: 0
58+
}
59+
}
60+
`),
61+
62+
title: cmz(`
63+
font-family: Open Sans
64+
font-weight: 800
65+
font-size: 37px
66+
line-height: 50px
67+
color: ${theme.typoHeading}
68+
text-transform: uppercase
69+
margin: 0 0 64px
70+
`)
71+
}
72+
73+
type Props = {
74+
title?: string,
75+
children?: React$Node
76+
}
77+
78+
const ArticleCardSection = ({ title, children }: Props) => title || children ? (
79+
<section className={cx.section}>
80+
{title && (
81+
<h1 className={cx.title}>{title}</h1>
82+
)}
83+
{children && (
84+
<div className={cx.cards}>
85+
{children}
86+
</div>
87+
)}
88+
</section>
89+
) : null
90+
91+
export default ArticleCardSection

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// @flow
2+
3+
import React from 'react'
4+
import { storiesOf } from '@storybook/react'
5+
6+
import ArticleCardSection from './ArticleCardSection'
7+
import ArticleCard from './ArticleCard'
8+
9+
export const ArticleCardSectionSample = () => (
10+
<ArticleCardSection title='Keep Moving Forward'>
11+
<ArticleCard
12+
poster='https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2019/08/X-Teamer.jpg'
13+
category='Community'
14+
title='X-Team: The Most Energizing Community for Developers'
15+
excerpt="You've heard of X-Team, but you don't quite know what it is. Maybe you've noticed many developers seem eager to join X-Team (💘) but you don't quite understand why. Maybe you've seen some video on YouTube that shows a pretty epic adventure but you don't know what to make of it."
16+
url='https://x-team.com/blog/most-energizing-community-developers/'
17+
/>
18+
<ArticleCard
19+
poster='https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2020/06/Vibrant-Community--1-.png'
20+
category='Company'
21+
title='Applicants FAQ'
22+
excerpt="What happens when I pass your vetting? Once that happens, you'll be put on a shortlist of candidates, which consists of developers who’ve come from all our recruiting channels. You can think of it as a Top 5 or Top 10 of candidates for a given role."
23+
url='https://x-team.com/blog/applicants-faq/'
24+
/>
25+
<ArticleCard
26+
poster='https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2020/07/GitHub-Profile.jpg'
27+
category='Growth'
28+
title='How to Stand Out With Your GitHub Profile'
29+
excerpt="GitHub recently released a new feature that is still quite hidden, but that can really help you stand out when you're searching for work as a developer. You can now create a README file that features front and center on your GitHub profile. Your personal documentation, if you will."
30+
url='https://x-team.com/blog/stand-out-with-a-github-profile/'
31+
/>
32+
</ArticleCardSection>
33+
)
34+
35+
storiesOf('UI Components|ArticleCardSection', module)
36+
.add('basic usage', () => (
37+
<ArticleCardSectionSample />
38+
))
39+
40+
storiesOf('UI Components|ArticleCardSection/Debug', module)
41+
.add('missing props', () => (
42+
<ArticleCardSection />
43+
))

‎src/components/ui/HeaderBar.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ type Props = {
2929
appLink?: React$StatelessFunctionalComponent<*>,
3030
profileLink?: React$StatelessFunctionalComponent<*>,
3131
logout?: () => void,
32-
avatarUrl?: string
32+
avatarUrl?: string,
33+
avatarName?: string,
3334
}
3435

3536
type State = {
@@ -248,6 +249,8 @@ const cx = {
248249
249250
& * {
250251
margin-bottom: 32px
252+
text-align: left
253+
width: 100%
251254
}
252255
253256
& *:last-child {
@@ -327,7 +330,7 @@ class HeaderBar extends PureComponent<Props, State> {
327330
}
328331

329332
render () {
330-
const { links, avatarUrl } = this.props
333+
const { links, avatarUrl, avatarName } = this.props
331334
const { expanded } = this.state
332335
return (
333336
<div className={[cx.wrapper, expanded ? cx.expandedWrapper : ''].join(' ')}>
@@ -354,7 +357,7 @@ class HeaderBar extends PureComponent<Props, State> {
354357

355358
<div className={cx.profile}>
356359
<Dropdown
357-
label={<ProfileAvatar src={avatarUrl} />}
360+
label={<ProfileAvatar src={avatarUrl} name={avatarName} />}
358361
targetXOrigin='right'
359362
padded
360363
>

0 commit comments

Comments
 (0)