"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]>
x-team · Sep 16, 2020 · 08022eb · 08022eb
1 parent 1cf812e
commit 08022eb
Show file tree

Hide file tree

Showing 22 changed files with 405 additions and 32 deletions.
diff --git a/lib/CustomSelector.js b/lib/CustomSelector.js
diff --git a/lib/SkillsSelector.js b/lib/SkillsSelector.js
diff --git a/lib/Timeframe.js b/lib/Timeframe.js
diff --git a/lib/Timeframe.js.map b/lib/Timeframe.js.map
diff --git a/lib/all.js b/lib/all.js
diff --git a/lib/all.js.map b/lib/all.js.map
diff --git a/lib/fonts.js b/lib/fonts.js
diff --git a/lib/fonts.js.map b/lib/fonts.js.map
diff --git a/lib/registration.js b/lib/registration.js
diff --git a/lib/registration.js.map b/lib/registration.js.map
diff --git a/src/components/ui/ApplicantScreen.js b/src/components/ui/ApplicantScreen.js
@@ -83,7 +83,8 @@ type Props = {
   appLink?: React$StatelessFunctionalComponent<*>,
   profileLink?: React$StatelessFunctionalComponent<*>,
   logout?: () => void,
-  avatarUrl?: string
+  avatarUrl?: string,
+  avatarName?: string
 }
 
 const ApplicantScreen = ({
@@ -95,7 +96,8 @@ const ApplicantScreen = ({
   appLink,
   profileLink,
   logout,
-  avatarUrl
+  avatarUrl,
+  avatarName
 }: Props) => {
   const getWrapperClass = () => (wrapper && cx[wrapper]) || cx.content
   return (
@@ -107,6 +109,7 @@ const ApplicantScreen = ({
           profileLink={profileLink}
           logout={logout}
           avatarUrl={avatarUrl}
+          avatarName={avatarName}
         />
       </div>
       {notification && (

diff --git a/src/components/ui/ArticleCard.js b/src/components/ui/ArticleCard.js
@@ -0,0 +1,130 @@
+// @flow
+
+import React from 'react'
+import cmz from 'cmz'
+
+import theme from '../../styles/theme'
+
+const cx = {
+  card: cmz(`
+    border: 1px solid ${theme.lineSilver2}
+    display: flex
+    flex-direction: column
+    max-width: 340px
+    align-items: stretch
+  `),
+
+  poster: cmz(`
+    width: 100%
+  `),
+
+  content: cmz(`
+    & {
+      padding: 24px
+      display: flex
+      flex: 1
+      flex-direction: column
+    }
+
+    & *:last-child {
+      margin: 0
+    }
+  `),
+
+  category: cmz(`
+    font-family: Open Sans
+    font-weight: bold
+    font-size: 12px
+    line-height: 16px
+    color: ${theme.typoGrayed}
+    margin: 0 0 24px
+    text-transform: uppercase
+  `),
+
+  title: cmz(`
+    & {
+      font-family: Open Sans
+      font-weight: bold
+      font-size: 18px
+      line-height: 25px
+      color: ${theme.typoHeading}
+      margin: 0 0 12px
+      text-transform: uppercase
+    }
+
+    & a,
+    & a:hover {
+      color: ${theme.typoHeading}
+      text-decoration: none
+    }
+  `),
+
+  excerpt: cmz(`
+    font-family: Source Sans Pro
+    font-weight: normal
+    font-size: 15px
+    line-height: 150%
+    color: ${theme.typoGrayed}
+    margin: 0
+    flex: 1
+    margin: 0 0 24px
+    display: block
+  `),
+
+  url: cmz(`
+    & {
+      font-family: Source Sans Pro
+      font-weight: 600
+      font-size: 16px
+      line-height: 150%
+      color: ${theme.typoAnchor}
+      text-decoration: none
+    }
+
+    &:hover {
+      color: ${theme.typoAnchorHover}
+    }
+  `)
+}
+
+type Props = {
+  poster?: string,
+  category?: string,
+  title?: string,
+  excerpt?: string,
+  url?: string
+}
+
+const ArticleCard = ({
+  poster,
+  category,
+  title,
+  excerpt,
+  url
+}: Props) => poster || category || title || excerpt || url ? (
+  <section className={cx.card}>
+    {poster && (
+      <img src={poster} className={cx.poster} />
+    )}
+    {(category || title || excerpt || url) && (
+      <div className={cx.content}>
+        {category && (
+          <div className={cx.category}>{category}</div>
+        )}
+        {title && (
+          <h1 className={cx.title}>
+            {url ? <a href={url}>{title}</a> : title}
+          </h1>
+        )}
+        {excerpt && (
+          <p className={cx.excerpt}>{excerpt}</p>
+        )}
+        {url && (
+          <a href={url} className={cx.url}>Learn more &gt;</a>
+        )}
+      </div>
+    )}
+  </section>
+) : null
+
+export default ArticleCard
diff --git a/src/components/ui/ArticleCard.stories.js b/src/components/ui/ArticleCard.stories.js
@@ -0,0 +1,62 @@
+// @flow
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import ArticleCard from './ArticleCard'
+
+storiesOf('UI Components|ArticleCard', module)
+  .add('basic usage', () => (
+    <ArticleCard
+      poster='https://picsum.photos/341/191'
+      category='X-OUTPOST'
+      title='X-OUTPOST: AUSTRIA (SKIING)'
+      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.'
+      url='https://x-team.com/blog'
+    />
+  ))
+
+storiesOf('UI Components|ArticleCard/Debug', module)
+  .add('missing poster', () => (
+    <ArticleCard
+      category='X-OUTPOST'
+      title='X-OUTPOST: AUSTRIA (SKIING)'
+      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.'
+      url='https://x-team.com/blog'
+    />
+  ))
+  .add('missing category', () => (
+    <ArticleCard
+      poster='https://picsum.photos/341/191'
+      title='X-OUTPOST: AUSTRIA (SKIING)'
+      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.'
+      url='https://x-team.com/blog'
+    />
+  ))
+  .add('missing title', () => (
+    <ArticleCard
+      poster='https://picsum.photos/341/191'
+      category='X-OUTPOST'
+      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.'
+      url='https://x-team.com/blog'
+    />
+  ))
+  .add('missing excerpt', () => (
+    <ArticleCard
+      poster='https://picsum.photos/341/191'
+      category='X-OUTPOST'
+      title='X-OUTPOST: AUSTRIA (SKIING)'
+      url='https://x-team.com/blog'
+    />
+  ))
+  .add('missing url', () => (
+    <ArticleCard
+      poster='https://picsum.photos/341/191'
+      category='X-OUTPOST'
+      title='X-OUTPOST: AUSTRIA (SKIING)'
+      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.'
+    />
+  ))
+  .add('missing props', () => (
+    <ArticleCard />
+  ))
diff --git a/src/components/ui/ArticleCardSection.js b/src/components/ui/ArticleCardSection.js
@@ -0,0 +1,91 @@
+// @flow
+/* global React$Node */
+
+import React from 'react'
+import cmz from 'cmz'
+
+import theme, { breakpoints } from '../../styles/theme'
+
+const cx = {
+  section: cmz(`
+    display: block
+  `),
+
+  cards: cmz(`
+    & {
+      display: flex
+      flex-direction: column
+      align-items: center
+    }
+
+    & > * {
+      margin: 0 0 24px 0
+    }
+
+    & > *:last-child {
+      margin: 0
+    }
+
+    @media screen and (min-width: ${breakpoints.sm}) {
+      & {
+        flex-direction: row
+        align-items: normal
+      }
+
+      & > * {
+        margin: 0 12px 0 0
+        width: calc(100% / 3 - (12px * 2 / 3))
+      }
+
+      & > *:last-child {
+        margin: 0
+      }
+    }
+
+    @media screen and (min-width: ${breakpoints.sm}) {
+      & {
+        flex-direction: row
+      }
+
+      & > * {
+        margin: 0 38px 0 0
+        width: calc(100% / 3 - (38px * 2 / 3))
+        max-width: 341px
+      }
+
+      & > *:last-child {
+        margin: 0
+      }
+    }
+  `),
+
+  title: cmz(`
+    font-family: Open Sans
+    font-weight: 800
+    font-size: 37px
+    line-height: 50px
+    color: ${theme.typoHeading}
+    text-transform: uppercase
+    margin: 0 0 64px
+  `)
+}
+
+type Props = {
+  title?: string,
+  children?: React$Node
+}
+
+const ArticleCardSection = ({ title, children }: Props) => title || children ? (
+  <section className={cx.section}>
+    {title && (
+      <h1 className={cx.title}>{title}</h1>
+    )}
+    {children && (
+      <div className={cx.cards}>
+        {children}
+      </div>
+    )}
+  </section>
+) : null
+
+export default ArticleCardSection
diff --git a/src/components/ui/ArticleCardSection.stories.js b/src/components/ui/ArticleCardSection.stories.js
@@ -0,0 +1,43 @@
+// @flow
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import ArticleCardSection from './ArticleCardSection'
+import ArticleCard from './ArticleCard'
+
+export const ArticleCardSectionSample = () => (
+  <ArticleCardSection title='Keep Moving Forward'>
+    <ArticleCard
+      poster='https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2019/08/X-Teamer.jpg'
+      category='Community'
+      title='X-Team: The Most Energizing Community for Developers'
+      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."
+      url='https://x-team.com/blog/most-energizing-community-developers/'
+    />
+    <ArticleCard
+      poster='https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2020/06/Vibrant-Community--1-.png'
+      category='Company'
+      title='Applicants FAQ'
+      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."
+      url='https://x-team.com/blog/applicants-faq/'
+    />
+    <ArticleCard
+      poster='https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2020/07/GitHub-Profile.jpg'
+      category='Growth'
+      title='How to Stand Out With Your GitHub Profile'
+      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."
+      url='https://x-team.com/blog/stand-out-with-a-github-profile/'
+    />
+  </ArticleCardSection>
+)
+
+storiesOf('UI Components|ArticleCardSection', module)
+  .add('basic usage', () => (
+    <ArticleCardSectionSample />
+  ))
+
+storiesOf('UI Components|ArticleCardSection/Debug', module)
+  .add('missing props', () => (
+    <ArticleCardSection />
+  ))
diff --git a/src/components/ui/HeaderBar.js b/src/components/ui/HeaderBar.js
@@ -29,7 +29,8 @@ type Props = {
   appLink?: React$StatelessFunctionalComponent<*>,
   profileLink?: React$StatelessFunctionalComponent<*>,
   logout?: () => void,
-  avatarUrl?: string
+  avatarUrl?: string,
+  avatarName?: string,
 }
 
 type State = {
@@ -248,6 +249,8 @@ const cx = {
 
     & * {
       margin-bottom: 32px
+      text-align: left
+      width: 100%
     }
 
     & *:last-child {
@@ -327,7 +330,7 @@ class HeaderBar extends PureComponent<Props, State> {
   }
 
   render () {
-    const { links, avatarUrl } = this.props
+    const { links, avatarUrl, avatarName } = this.props
     const { expanded } = this.state
     return (
       <div className={[cx.wrapper, expanded ? cx.expandedWrapper : ''].join(' ')}>
@@ -354,7 +357,7 @@ class HeaderBar extends PureComponent<Props, State> {
 
               <div className={cx.profile}>
                 <Dropdown
-                  label={<ProfileAvatar src={avatarUrl} />}
+                  label={<ProfileAvatar src={avatarUrl} name={avatarName} />}
                   targetXOrigin='right'
                   padded
                 >