feat(MainSiteArticleHeader): added MainSiteArticleHeader component (#191

) * started article header component for main site * pass through props * single author byline and photos * date and formatting * completed basic outline
dailybruin · Jun 1, 2019 · 8a1b66e · 8a1b66e
1 parent ccd5943
commit 8a1b66e
Show file tree

Hide file tree

Showing 6 changed files with 381 additions and 0 deletions.
diff --git a/src/components/MainSiteArticleHeader/MainSiteByline.tsx b/src/components/MainSiteArticleHeader/MainSiteByline.tsx
@@ -0,0 +1,132 @@
+// support for multiple authors
+import * as React from 'react'
+import { css } from 'react-emotion'
+import { MainSiteArticleHeaderProps, BylineInfo } from './index'
+import dbLogo from './db-logo.png'
+import {
+  headlineFont,
+  boldFont,
+  dailyBruinBlue,
+  subInfoFontSize,
+  smallInfoFontSize,
+  darkGray,
+} from '../../globals/mainsiteGlobalStyles'
+
+export default function MainSiteByline(props: MainSiteArticleHeaderProps) {
+  const rawDate = new Date(props.date)
+  const renderedDate = rawDate.toLocaleDateString('default', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+  // first check if there's only one author with a profile photo
+  if (props.bylineInfo.length === 1) {
+    const photoURL = props.bylineInfo[0].authorPhotoURL
+      ? props.bylineInfo[0].authorPhotoURL
+      : dbLogo
+    return (
+      <div
+        className={css`
+          img {
+            height: 50px;
+            width: 50px;
+            border-radius: 25px;
+          }
+
+          display: flex;
+          font-family: ${headlineFont};
+          font-weight: ${boldFont};
+          margin-top: 15px;
+        `}
+      >
+        <img src={photoURL} />
+        <div
+          className={css`
+            display: inline;
+            margin-top: auto;
+            margin-bottom: auto;
+            margin-left: 10px;
+          `}
+        >
+          <div
+            className={css`
+              font-size: ${subInfoFontSize};
+              line-height: normal;
+            `}
+          >
+            By{' '}
+            <a
+              href={props.bylineInfo[0].authorProfileURL}
+              className={css`
+                text-decoration: none;
+                color: ${dailyBruinBlue};
+
+                :hover {
+                  opacity: 0.75;
+                }
+              `}
+            >
+              {props.bylineInfo[0].authorName}
+            </a>
+          </div>
+          <div
+            className={css`
+              font-size: ${smallInfoFontSize};
+              line-height: normal;
+              color: ${darkGray};
+            `}
+          >
+            {renderedDate}
+          </div>
+        </div>
+      </div>
+    )
+  } else {
+    const renderedByline = props.bylineInfo.map(
+      (element: BylineInfo, index: number) => {
+        let delimiter = index ? ', ' : ''
+        if (index === props.bylineInfo.length - 1) {
+          delimiter = ' and '
+        }
+        return (
+          <span key={index}>
+            {delimiter}
+            <a
+              href={element.authorProfileURL}
+              className={css`
+                text-decoration: none;
+                color: ${dailyBruinBlue};
+
+                :hover {
+                  opacity: 0.75;
+                }
+              `}
+            >
+              {element.authorName}
+            </a>
+          </span>
+        )
+      }
+    )
+    return (
+      <div
+        className={css`
+          font-family: ${headlineFont};
+          font-weight: ${boldFont};
+          margin-top: 10px;
+        `}
+      >
+        By {renderedByline}
+        <div
+          className={css`
+            font-size: ${smallInfoFontSize};
+            line-height: normal;
+            color: ${darkGray};
+          `}
+        >
+          {renderedDate}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/components/MainSiteArticleHeader/MainSiteHeadline.tsx b/src/components/MainSiteArticleHeader/MainSiteHeadline.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+import { MainSiteArticleHeaderProps } from './index'
+
+import {
+  headlineFont,
+  headlineFontSize,
+  boldFont,
+  topBarFont,
+  dailyBruinBlue,
+  smallInfoFontSize,
+} from '../../globals/mainsiteGlobalStyles'
+
+export default function MainSiteHeadline(props: MainSiteArticleHeaderProps) {
+  return (
+    <div>
+      <div
+        className={css`
+          font-family: ${topBarFont};
+          color: ${dailyBruinBlue};
+          font-weight: ${boldFont};
+          text-transform: uppercase;
+          font-size: ${smallInfoFontSize};
+        `}
+      >
+        <a
+          className={css`
+            text-decoration: none;
+            color: inherit;
+
+            :hover {
+              opacity: 0.75;
+            }
+          `}
+          href={props.categoryURL}
+        >
+          {props.articleCategory}
+        </a>
+      </div>
+      <div
+        className={css`
+          line-height: normal;
+          font-family: ${headlineFont};
+          font-size: ${headlineFontSize};
+          font-weight: ${boldFont};
+        `}
+      >
+        {props.headlineText}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/MainSiteArticleHeader/db-logo.png b/src/components/MainSiteArticleHeader/db-logo.png
diff --git a/src/components/MainSiteArticleHeader/index.mdx b/src/components/MainSiteArticleHeader/index.mdx
@@ -0,0 +1,72 @@
+---
+name: Main Site Article Header
+route: /main-site-article-header
+---
+
+import { Playground, Props } from 'docz'
+import MainSiteArticleHeader from '.'
+import { css } from 'react-emotion'
+
+# Main Site Article Header
+
+This header goes at the top of all main site articles. Below you'll find a diagram that relates enum to the appearance of the layout.
+
+TODO: add that image
+
+<Props of={MainSiteArticleHeader} />
+
+## One author
+
+<Playground>
+        <MainSiteArticleHeader
+            headlineText='Newly opened Baja California Tacos brings Ensenada-inspired cuisine to Westwood'
+            articleCategory='Main site development'
+            categoryURL='https://dailybruin.com/news'
+            date='2019-05-15T02:29:44'
+            featuredPhotoURL='https://dailybruin.com/images/2018/06/web.sp_.kellihayes.KH_.1-640x426.jpg'
+            featuredPhotoCaption='Anna Tsai, a first-year physics student, designed "The Garden of Eden" for the 18th Fashion and Student Trends runway show, which took place Thursday night in Pauley Pavilion.'
+            featuredPhotoCredit={{
+                imageCredit: 'Joe Bruin',
+                imagePosition: 'Daily Bruin senior staff',
+                imageCreditProfileURL: 'https://dailybruin.com'
+            }}
+            bylineInfo={[
+                {
+                    authorName: 'Joe Bruin',
+                    authorProfileURL: 'https://google.com',
+                    authorPhotoURL: 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png'
+                },
+            ]}
+        />
+</Playground>
+
+
+## Multiple authors
+
+<Playground>
+        <MainSiteArticleHeader
+            headlineText='Newly opened Baja California Tacos brings Ensenada-inspired cuisine to Westwood'
+            articleCategory='Main site development'
+            categoryURL='https://dailybruin.com/news'
+            date='2019-05-15T02:29:44'
+            featuredPhotoURL='https://dailybruin.com/images/2018/06/web.sp_.kellihayes.KH_.1-640x426.jpg'
+            featuredPhotoCaption='Anna Tsai, a first-year physics student, designed "The Garden of Eden" for the 18th Fashion and Student Trends runway show, which took place Thursday night in Pauley Pavilion.'
+            featuredPhotoCredit={{
+                imageCredit: 'Joe Bruin',
+                imagePosition: 'Daily Bruin senior staff',
+                imageCreditProfileURL: 'https://dailybruin.com'
+            }}
+            bylineInfo={[
+                {
+                    authorName: 'Joe Bruin',
+                    authorProfileURL: 'https://google.com',
+                    authorPhotoURL: 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png'
+                },
+                {
+                    authorName: 'Joe Bruin',
+                    authorProfileURL: 'https://google.com',
+                    authorPhotoURL: 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png'
+                },
+            ]}
+        />
+</Playground>
diff --git a/src/components/MainSiteArticleHeader/index.tsx b/src/components/MainSiteArticleHeader/index.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+import MainSiteByline from './MainSiteByline'
+import MainSiteHeadline from './MainSiteHeadline'
+
+import {
+  bodyFont,
+  dailyBruinBlue,
+  smallInfoFontSize,
+} from '../../globals/mainsiteGlobalStyles'
+
+export enum MainSiteArticleHeaderLayoutType {
+  Standard,
+  VerticalPhoto,
+  WidePhoto,
+  ExtraWidePhoto,
+}
+
+export interface BylineInfo {
+  /** Author that contributed to the article */
+  authorName: string
+  /** Link to their profile image URL - optional */
+  authorPhotoURL?: string
+  /** URL to their profile page on the main site */
+  authorProfileURL: string
+}
+
+export interface CreditInfo {
+  /** staff name */
+  imageCredit: string
+  /** staff position */
+  imagePosition: string
+  /** profile link */
+  imageCreditProfileURL: string
+}
+
+export interface MainSiteArticleHeaderProps {
+  /** text of the headline */
+  headlineText: string
+  /** category that the headline is in */
+  articleCategory: string
+  /** URL of the category page that the article is in  */
+  categoryURL: string
+  /** URL of the main photo that should be displayed */
+  featuredPhotoURL?: string
+  /** caption for the featured photo */
+  featuredPhotoCaption?: string
+  /** credit info for the photo */
+  featuredPhotoCredit?: CreditInfo
+  /** info that should be displayed in the byline box */
+  bylineInfo: BylineInfo[]
+  /** date that the article was published */
+  date: string
+}
+
+class MainSiteArticleHeader extends React.Component<
+  MainSiteArticleHeaderProps
+> {
+  public render() {
+    let featuredPhoto
+    // check to see if there's a featured photo for this story
+    if (this.props.featuredPhotoURL) {
+      featuredPhoto = (
+        <div
+          className={css`
+            margin-top: 15px;
+            width: 100%;
+          `}
+        >
+          <img
+            className={css`
+              margin-left: auto;
+              margin-right: auto;
+              width: 100%;
+              max-width: 100%;
+            `}
+            src={this.props.featuredPhotoURL}
+          />
+          <div
+            className={css`
+              font-size: ${smallInfoFontSize};
+              font-family: ${bodyFont};
+              line-height: normal;
+              text-decoration: none;
+            `}
+          >
+            {this.props.featuredPhotoCaption}{' '}
+            <a
+              href={this.props.featuredPhotoCredit.imageCreditProfileURL}
+              className={css`
+                text-decoration: none;
+                color: ${dailyBruinBlue};
+
+                :hover {
+                  opacity: 0.75;
+                }
+              `}
+            >
+              ({this.props.featuredPhotoCredit.imageCredit}/
+              {this.props.featuredPhotoCredit.imagePosition})
+            </a>
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div
+        className={css`
+          max-width: 650px;
+        `}
+      >
+        <MainSiteHeadline {...this.props} />
+        {featuredPhoto}
+        <MainSiteByline {...this.props} />
+      </div>
+    )
+  }
+}
+
+export default MainSiteArticleHeader
diff --git a/src/globals/mainsiteGlobalStyles.tsx b/src/globals/mainsiteGlobalStyles.tsx
@@ -22,6 +22,8 @@ export const gray = 'rgb(197, 197, 197)'
 export const lightGray = 'rgb(242, 242, 242)'
 export const black = '#000'
 export const white = '#fff'
+export const darkGray = 'rgb(100, 100, 100)'
+export const dailyBruinBlue = '#0080C6'
 export const headlineFont = 'Arimo'
 export const storyListFont = 'Lora'
 export const bodyFont = 'PT Serif'
@@ -30,6 +32,9 @@ export const boldFont = 700
 export const topBarFont = 'Source Sans Pro'
 export const cardInnerPadding = '11px 14px 15px'
 export const cardShadow = '0px 2px 4px 0px rgba(0,0,0,0.2)'
+export const headlineFontSize = '2em'
+export const subInfoFontSize = '1em'
+export const smallInfoFontSize = '0.8em'
 
 /** CSS breakpoints */
 export const mediaMobileBreakpoint = '@media (max-width: 600px)'