feat(ClassifiedsCard) (#203)

dailybruin · Aug 27, 2019 · e4d3deb · e4d3deb
1 parent 7737c5a
commit e4d3deb
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 9 deletions.
diff --git a/src/components/ClassifiedsCard/index.mdx b/src/components/ClassifiedsCard/index.mdx
@@ -0,0 +1,53 @@
+---
+name: Classifieds Card
+route: /classifieds-card
+---
+
+import { Playground, Props } from 'docz'
+import ClassifiedsCard from '.'
+
+# Classifieds Card
+
+A proper card layout for classifieds
+
+<Props of={ClassifiedsCard} />
+
+<Playground>
+  <ClassifiedsCard
+    header="Featured Classifieds"
+    classifieds={[
+      {
+        category: { name: 'Room for Rent', url: './#' },
+        content: {
+          name:
+            'Female preferred to rent private furnished room with shared bath. $925 includes utilities and internet , full kitchen and laundry privileges. 1 dog and 2 cats in house. Non smoking. Julia 310-874-5908',
+          url: './#',
+        },
+      },
+      {
+        category: { name: 'Apartments for Rent', url: './#' },
+        content: {
+          name:
+            'Westwood 3bed + 3bath 1,712sqft Condo for lease. Laundry in-unit + 2 car gated parking space. Private rooftop terrace. $4900/M. Call Mike at 310-666-5458 for showing. Available now!',
+          url: './#',
+        },
+      },
+      {
+        category: { name: 'Apartments for Rent', url: './#' },
+        content: {
+          name:
+            '2 bedroom 2 1/2 bath Condo. Aproximately 2000 sq ft. $3999/month or fully furnished for $4485/month. Comfortable for 4-5 students 310-430-1626',
+          url: './#',
+        },
+      },
+      {
+        category: { name: 'Computer/Internet', url: './#' },
+        content: {
+          name:
+            'GRAD STUDENT WANTED: I’m putting together a Kickstarter crowdfunding campaign and looking for a sharp grad student to promote it, primarily social media. Please send experience, pay rate and contact info to – [email protected]',
+          url: './#',
+        },
+      },
+    ]}
+  />
+</Playground>
diff --git a/src/components/ClassifiedsCard/index.tsx b/src/components/ClassifiedsCard/index.tsx
@@ -0,0 +1,145 @@
+import * as React from 'react'
+import { render } from 'react-dom'
+
+import { css } from 'react-emotion'
+
+import {
+  headlineFont,
+  storyListFont,
+  cardShadow,
+  regularFont,
+  bodyFont,
+} from '../../globals/mainsiteGlobalStyles'
+
+interface Link {
+  name: string
+  url: string
+}
+
+interface ClassifiedProps {
+  category: Link
+  content: Link
+}
+
+interface ClassifiedsCardProps {
+  header: string
+  classifieds: Classified[]
+  link: Link
+}
+
+function Classified(props) {
+  return (
+    <div
+      className={css`
+        font-family: Source Sans Pro;
+        font-size: 12px;
+        line-height: 15px;
+        padding: 6px 0;
+        border-bottom: 1px solid #474747;
+      `}
+    >
+      <a
+        href={props.category.url}
+        className={css`
+          font-weight: 700;
+          color: #0080c6;
+          text-transform: uppercase;
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        `}
+      >
+        {props.category.name}
+      </a>
+      <br />
+      <a
+        href={props.content.url}
+        className={css`
+          color: #000000;
+          text-decoration: none;
+        `}
+      >
+        {props.content.name}
+      </a>
+    </div>
+  )
+}
+
+export default class ClassifiedsCard extends React.Component<
+  ClassifiedsCardProps
+> {
+  public static defaultProps = {
+    header: 'Featured Classifieds',
+    link: { name: 'More Classifieds »', url: './#' },
+  }
+  constructor(props) {
+    super(props)
+  }
+
+  public render() {
+    const renderedClassifieds = []
+    if (this.props.classifieds != null) {
+      for (const i of this.props.classifieds) {
+        renderedClassifieds.push(
+          <Classified category={i.category} content={i.content} />
+        )
+      }
+    }
+
+    return (
+      <div
+        className={css`
+          box-shadow: ${cardShadow};
+        `}
+      >
+        <div
+          className={css`
+            background-color: #000000;
+            height: 24px;
+            padding: 0 6px;
+
+            font-family: Source Sans Pro;
+            font-style: normal;
+            font-weight: 900;
+            font-size: 18px;
+            line-height: 24px;
+            text-transform: uppercase;
+
+            color: #ffffff;
+          `}
+        >
+          {this.props.header}
+        </div>
+        <div
+          className={css`
+            padding: 0 12px;
+          `}
+        >
+          {renderedClassifieds}
+        </div>
+        <div style={{ textAlign: 'right', padding: '12px 12px 6px' }}>
+          <a
+            href={this.props.link.url}
+            className={css`
+              font-family: Source Sans Pro;
+              font-size: 12px;
+              line-height: 15px;
+              font-weight: bold;
+              color: #0080c6;
+              text-transform: uppercase;
+              text-decoration: none;
+
+              &:hover {
+                text-decoration: underline;
+              }
+            `}
+          >
+            {this.props.link.name}
+          </a>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/components/SectionHeader/index.mdx b/src/components/SectionHeader/index.mdx
@@ -18,14 +18,14 @@ Note that `SectionHeader` expects an array of `Link` objects which include `name
   <SectionHeader
     name={'NEWS'}
     sectionList={[
-      { name: 'NEWS', link: '' },
-      { name: 'SPORTS', link: '' },
-      { name: 'ARTS', link: '' },
-      { name: 'OPINION', link: '' },
-      { name: 'PHOTO', link: '' },
-      { name: 'VIDEO', link: '' },
-      { name: 'ILLUSTRATIONS', link: '' },
-      { name: 'GRAPHICS', link: '' },
+      { name: 'NEWS', url: '' },
+      { name: 'SPORTS', url: '' },
+      { name: 'ARTS', url: '' },
+      { name: 'OPINION', url: '' },
+      { name: 'PHOTO', url: '' },
+      { name: 'VIDEO', url: '' },
+      { name: 'ILLUSTRATIONS', url: '' },
+      { name: 'GRAPHICS', url: '' },
     ]}
   />
 </Playground>
diff --git a/src/components/StoryList/index.tsx b/src/components/StoryList/index.tsx
@@ -54,7 +54,6 @@ class StoryList extends React.Component<StoryListProps> {
           box-shadow: ${MainSiteStyles.cardShadow};
           justify-content: center;
           margin: auto;
-          max-width: 292px;
         `}
       >
         <TopBar