feat(ArticleCard): add main site article card component (#160)

* ArticleCard Update * Article Card Update
dailybruin · Feb 13, 2019 · 5f58cd9 · 5f58cd9
1 parent 227848d
commit 5f58cd9
Show file tree

Hide file tree

Showing 8 changed files with 34,348 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ArticleCard/Long.tsx b/src/components/ArticleCard/Long.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+import {
+  headlineFont,
+  storyListFont,
+  cardShadow,
+  regularFont,
+  bodyFont,
+} from '../../globals/mainsiteGlobalStyles'
+
+interface LongProps {
+  imageurl: string
+  photographer: string
+  title: string
+  content: string
+}
+
+export default function Tall(props: LongProps) {
+  return (
+    <div
+      className={css`
+        display: grid;
+        grid-template-areas: 'left right';
+        grid-template-rows: auto;
+        grid-template-columns: 330px 250px;
+        grid-gap: 15px;
+        height: auto;
+        width: 594px;
+        box-shadow: ${cardShadow};
+      `}
+    >
+      <div
+        className={css`
+          grid-area: left;
+        `}
+      >
+        <img
+          className={css`
+            width: 307px;
+            height: calc(100% - 24px);
+            padding: 12px 0px 12px 12px;
+            margin-bottom: -27px;
+          `}
+          src={props.imageurl}
+        />
+        <h3
+          className={css`
+            font-size: 7px;
+            padding-right: 12px;
+            text-align: right;
+            margin-bottom: 0;
+            font-family: ${headlineFont}, serif;
+          `}
+        >
+          {props.photographer}
+        </h3>
+      </div>
+
+      <div
+        className={css`
+          grid-area: right;
+        `}
+      >
+        <h2
+          className={css`
+            color: #1a9ae0;
+            padding-top: 8px;
+            font-size: 0.7em;
+            font-weight: 800;
+            margin-top: 0;
+            margin-bottom: -20px;
+            font-family: ; //
+          `}
+        >
+          NEWS
+        </h2>
+        <h1
+          className={css`
+            margin-bottom: -7px;
+            color: black;
+            line-height: normal;
+            font-size: 24px;
+            font-family: ${headlineFont}, serif;
+          `}
+        >
+          {props.title}
+        </h1>
+        <p
+          className={css`
+            font-family: ${bodyFont}, serif;
+            font-size: 11px;
+            color: black;
+            line-height: normal;
+            padding-right: 14px;
+            font-weight: ${regularFont};
+          `}
+        >
+          {props.content}
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ArticleCard/Tall.tsx b/src/components/ArticleCard/Tall.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+import {
+  headlineFont,
+  storyListFont,
+  cardShadow,
+  regularFont,
+  bodyFont,
+} from '../../globals/mainsiteGlobalStyles'
+
+interface TallProps {
+  imageurl: string
+  photographer: string
+  title: string
+  content: string
+}
+
+export default function Tall(props: TallProps) {
+  return (
+    <div
+      className={css`
+        height: auto;
+        width: 291px;
+        box-shadow: ${cardShadow};
+      `}
+    >
+      <img
+        className={css`
+          width: 267px;
+          height: 209px;
+          padding: 13px 12px 0px 12px;
+          margin-bottom: -15px;
+        `}
+        src={props.imageurl}
+      />
+      <h3
+        className={css`
+          font-size: 7px;
+          padding-right: 10.6px;
+          text-align: right;
+          font-family: ${headlineFont}, serif;
+        `}
+      >
+        {props.photographer}
+      </h3>
+      <h2
+        className={css`
+          color: #1a9ae0;
+          font-size: 0.7em;
+          padding-left: 12px;
+          font-weight: 800;
+          margin-bottom: -20px;
+        `}
+      >
+        NEWS
+      </h2>
+      <h1
+        className={css`
+          margin-bottom: -7px;
+          padding-left: 12px;
+          padding-right: 8px;
+          color: black;
+          line-height: normal;
+          font-size: 24px;
+          font-family: ${headlineFont}, serif;
+        `}
+      >
+        {props.title}
+      </h1>
+      <p
+        className={css`
+          font-family: ${bodyFont}, serif;
+          font-size: 11px;
+          padding: 0px 12px 12px 12px;
+          line-height: normal;
+          font-weight: ${regularFont};
+        `}
+      >
+        {props.content}
+      </p>
+    </div>
+  )
+}
diff --git a/src/components/ArticleCard/XL.tsx b/src/components/ArticleCard/XL.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react'
+import { css } from 'react-emotion'
+import {
+  headlineFont,
+  storyListFont,
+  cardShadow,
+  regularFont,
+  bodyFont,
+} from '../../globals/mainsiteGlobalStyles'
+
+interface XLProps {
+  imageurl: string
+  editor: string
+  title: string
+  content: string
+}
+
+export default function Tall(props: XLProps) {
+  return (
+    <div
+      className={css`
+        display: grid;
+        grid-template-areas: 'left middle right';
+        grid-template-rows: auto;
+        grid-template-columns: 250px 310px 307px;
+        grid-gap: 15px;
+        height: auto;
+        min-height: 247px;
+        width: 897px;
+        box-shadow: ${cardShadow};
+      `}
+    >
+      <div
+        className={css`
+          grid-area: left;
+          padding-left: 17px;
+        `}
+      >
+        <h2
+          className={css`
+            color: #1a9ae0;
+            padding-top: 11px;
+            font-size: 0.7em;
+            font-weight: 800;
+            margin-top: 0;
+            margin-bottom: -20px;
+          `}
+        >
+          NEWS
+        </h2>
+        <h1
+          className={css`
+            margin-bottom: -7px;
+            color: black;
+            line-height: normal;
+            font-size: 24px;
+            font-family: ${headlineFont}, serif;
+          `}
+        >
+          {props.title}
+        </h1>
+        <h3
+          className={css`
+            font-size: 11px;
+            color: black;
+            font-family: ${headlineFont}, serif;
+            font-weight: normal;
+          `}
+        >
+          <strong>By {props.editor} </strong> |<em> Daily Bruin staff</em>
+        </h3>
+      </div>
+      <div
+        className={css`
+          grid-area: middle;
+        `}
+      >
+        <p
+          className={css`
+            font-family: ${bodyFont}, serif;
+            font-size: 11px;
+            padding: 28px 95px 12px 0px;
+            margin-top: 0;
+            line-height: normal;
+            font-weight: ${regularFont};
+          `}
+        >
+          {props.content}
+        </p>
+      </div>
+      <div
+        className={css`
+          grid-area: right;
+        `}
+      >
+        <img
+          className={css`
+            width: 307px;
+            height: 100%;
+            padding: 0;
+          `}
+          src={props.imageurl}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ArticleCard/index.mdx b/src/components/ArticleCard/index.mdx
@@ -0,0 +1,41 @@
+---
+name: ArticleCard
+route: /article-card
+---
+
+import { Playground, PropsTable } from 'docz'
+import ArticleCard from '.'
+
+# ArticleCard
+
+A proper card layout for newspaper content
+
+<PropsTable of={ArticleCard} />
+
+<Playground>
+  <ArticleCard
+    type = 'tall'
+    imageurl = 'http://dailybruin.com/images/2018/12/web.sp_.mwp_.ncaa_.ADX_6-640x420.jpg'
+    title = 'Skirball fire burns down Rieber Terrace, Rendezvous untouched'
+    content = 'During the past few weeks, Mark Zuckerberg, among other tech moguls, has been under intense scrutiny from Congress for the role social media played during the 2016 presidential election.'
+    photographer = 'Amy Dixon/Assistant photo editor'
+  />
+
+  <ArticleCard
+    type = 'long'
+    imageurl = 'http://dailybruin.com/images/2018/12/web.sp_.mwp_.ncaa_.ADX_6-640x420.jpg'
+    title = 'Joe Bruin implicated in Russian hacking case'
+    content = 'During the past few weeks, Mark Zuckerberg, among other tech moguls, has been under intense scrutiny from Congress for the role social media played during the 2016 presidential election.'
+    photographer = 'Amy Dixon/Assistant photo editor'
+  />
+
+  <ArticleCard
+    type = 'longest'
+    imageurl = 'http://dailybruin.com/images/2018/12/web.sp_.mwp_.ncaa_.ADX_6-640x420.jpg'
+    title = 'Vote to subdivide WWNC, create new Westwood council receives majority'
+    content = 'The undergraduate student government juidicial board has decided to review a petition filed by the election board chair against the Undergraduate Students Association Council. Jack Price, the USAC election board chair, filed a petition claiming the council violated Article III Section B.2 of the USAC constitution, which states that all elected USAC officers shall be installed'
+    photographer = 'Amy Dixon/Assistant photo editor'
+    editor = 'Andrew Chang'
+  />
+
+</Playground>
diff --git a/src/components/ArticleCard/index.tsx b/src/components/ArticleCard/index.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import Tall from './Tall'
+import Long from './Long'
+import XL from './XL'
+
+enum ContentType {
+  Tall = 'tall',
+  Long = 'long',
+  XL = 'longest',
+}
+
+interface ArticleCardProps {
+  type: string
+  title: string
+  content: string
+  imageurl: string
+  photographer: string
+  editor: string
+}
+
+export default class ArticleCard extends React.Component<ArticleCardProps> {
+  public static defaultProps = {
+    imageurl: 'http://dailybruin.com/images/2017/03/db-logo.png',
+  }
+
+  public render() {
+    switch (this.props.type) {
+      case ContentType.Tall:
+        return (
+          <div>
+            <Tall {...this.props} />
+          </div>
+        )
+      case ContentType.Long:
+        return (
+          <div>
+            <Long {...this.props} />
+          </div>
+        )
+      case ContentType.XL:
+        return (
+          <div>
+            <XL {...this.props} />
+          </div>
+        )
+    }
+  }
+}