feat: Add custom css to lux components (#112)

* add style prop to components

* code review changes

* missed some code-review type lines

* removed semi from article

* document custom styling prop

src/components/Article/index.mdx

@@ -5,6 +5,7 @@ route: /article
 
 import { Playground, PropsTable } from 'docz'
 import Article from '.'
+import { css } from 'react-emotion'
 
 # Article
 
@@ -16,6 +17,7 @@ Note that `Article` expects an array of `Content`, which
 
 <Playground>
   <Article
+    style={css`color: red;`}
     dropcap={true}
     content={[
       {

src/components/Article/index.tsx

@@ -23,6 +23,8 @@ interface ArticleProps {
   /** The paragraphs of content for the story. */
   content: Content[]
   dropcap: boolean
+  /** custom css for the article component */
+  style?: string
 }
 
 /** A footer to go at the bottom of every page. */
@@ -70,6 +72,7 @@ export default class Article extends React.Component<ArticleProps> {
                 }
               `
             : ''};
+          ${this.props.style};
         `}
       >
         {renderedContent}

src/components/ArticleGrid/index.mdx

@@ -5,6 +5,7 @@ route: /article-grid
 
 import { Playground, PropsTable } from 'docz'
 import ArticleGrid from '.'
+import { css } from 'react-emotion'
 
 # ArticleGrid
 
@@ -13,5 +14,8 @@ A grid of articles for displaying on grid layout flatpages.
 <PropsTable of={ArticleGrid} />
 
 <Playground>
-  <ArticleGrid heading="News" articles={[]} />
+  <ArticleGrid style={css`
+    color: blue;
+  `}
+  heading="News" articles={[]} />
 </Playground>

src/components/ArticleGrid/index.tsx

@@ -11,6 +11,7 @@ interface ArticleGridProps {
   articles: ArticleCardData[]
   maxColumns: number
   minColumns: number
+  style?: string
 }
 
 export default class ArticleGrid extends React.Component<ArticleGridProps> {
@@ -47,6 +48,7 @@ export default class ArticleGrid extends React.Component<ArticleGridProps> {
         id={!!this.props.heading ? slugify(this.props.heading) : undefined}
         className={css`
           margin-top: 20px;
+          ${this.props.style};
         `}
       >
         {!!this.props.heading && (

src/components/Byline/index.mdx

@@ -5,6 +5,7 @@ route: /byline
 
 import { Playground, PropsTable } from 'docz'
 import Byline from '.'
+import { css } from 'react-emotion'
 
 # Byline
 
@@ -13,6 +14,9 @@ Every story needs an author and a byline.
 <PropsTable of={Byline} />
 
 <Playground>
-  <Byline authors="Tanner Walters" />
+  <Byline style={css`
+    font-weight: bold
+    `}
+  authors="Tanner Walters" />
   <Byline authors={["Tanner Walters", "Mackenzie Possee", "Jacob Preal"]} />
 </Playground>

src/components/Byline/index.tsx

@@ -8,6 +8,8 @@ import toSentence from '../../utils/toSentence'
 interface BylineProps {
   /** The authors of the story. */
   authors: string | string[]
+  /** Custom css for the byline */
+  style?: string
 }
 
 /** The byline of the story. */
@@ -21,6 +23,7 @@ export default function Byline(props: BylineProps) {
     <div
       className={css`
         padding-top: 5px;
+        ${props.style};
       `}
     >
       By {authorString}

src/components/CoverPhoto/index.mdx

@@ -5,6 +5,7 @@ route: /cover-photo
 
 import { Playground, PropsTable } from 'docz'
 import CoverPhoto from '.'
+import { css } from 'react-emotion'
 
 # Cover Photo
 
@@ -13,7 +14,7 @@ A cover photo.
 <PropsTable of={CoverPhoto} />
 
 <Playground>
-  <CoverPhoto headline="Gene Block starts meme factory" authors="Tanner Walters" imageURL="https://features.dailybruin.com/2017/close-to-home/img/web.enterprise.anonymous.DLee.jpg"
+  <CoverPhoto style={css`border-radius: 10em;`} headline="Gene Block starts meme factory" authors="Tanner Walters" imageURL="https://features.dailybruin.com/2017/close-to-home/img/web.enterprise.anonymous.DLee.jpg"
   xPosition="center"
   yPosition="center"
    />

src/components/CoverPhoto/index.tsx

@@ -22,6 +22,7 @@ interface CoverPhotoProps {
   xPosition: XPosition
   yPosition: YPosition
   darken?: number
+  style?: string
 }
 
 export default class CoverPhoto extends React.Component<CoverPhotoProps> {
@@ -52,6 +53,7 @@ export default class CoverPhoto extends React.Component<CoverPhotoProps> {
         display: grid;
         align-items: ${this.props.yPosition};
         justify-content: ${this.props.xPosition};
+        ${this.props.style}
       `}
       >
         <div

src/components/Footer/index.mdx

@@ -5,6 +5,7 @@ route: /footer
 
 import { Playground, PropsTable } from 'docz'
 import Footer from '.'
+import { css } from 'react-emotion'
 
 # Footer
 
@@ -14,6 +15,10 @@ Every web page needs a footer.
 
 <Playground>
   <Footer
+    style={css`
+              background-color: #0B5FFF;
+              color: #FFF;
+              `}
     githubLink={'https://dailybruin.com/'}
     developers={['Nathan Smith', 'Michael Zhang', 'Dustin Newman']}
   />

src/components/Footer/index.tsx

@@ -25,17 +25,19 @@ interface FooterProps {
   copyrightYear: number
   /** What type of project this footer is being used in. */
   footerType: ComponentType
+  /** Custom css for the footer component */
+  style?: string
 }
 
 /** A footer to go at the bottom of every page. */
 class Footer extends React.Component<FooterProps> {
   static defaultProps = {
     license: License.Copyright,
-    footerType: ComponentType.Default
+    footerType: ComponentType.Default,
   }
 
   render() {
-    if(this.props.footerType === ComponentType.Default) {
+    if (this.props.footerType === ComponentType.Default) {
       return (
         <footer
           className={css`
@@ -50,6 +52,7 @@ class Footer extends React.Component<FooterProps> {
             @media (max-width: 600px) {
               font-size: 0.8rem;
             }
+            ${this.props.style};
           `}
         >
           <div>
@@ -66,7 +69,9 @@ class Footer extends React.Component<FooterProps> {
               >
                 Site code available on{' '}
                 <a
-                  href={`https://github.com/dailybruin/${this.props.githubName}`}
+                  href={`https://github.com/dailybruin/${
+                    this.props.githubName
+                  }`}
                 >
                   GitHub
                 </a>
@@ -85,11 +90,9 @@ class Footer extends React.Component<FooterProps> {
           </div>
         </footer>
       )
-    } else /** this.props.footerType === ComponentType.MainSite */{
+    } /** this.props.footerType === ComponentType.MainSite */ else {
       /** This should be updated if more typeEnums are added */
-      return(
-        <MainSiteFooter/>
-      )
+      return <MainSiteFooter />
     }
   }
 }

src/components/Headline/index.mdx

@@ -5,6 +5,7 @@ route: /headline
 
 import { Playground, PropsTable } from 'docz'
 import Headline from '.'
+import { css } from 'react-emotion'
 
 # Headline
 
@@ -13,5 +14,5 @@ Every story needs a headline.
 <PropsTable of={Headline} />
 
 <Playground>
-  <Headline text="Gene Block Starts Meme Factory"/>
+  <Headline style={css`color: #0B5FFF;`} text="Gene Block Starts Meme Factory"/>
 </Playground>

src/components/Headline/index.tsx

@@ -7,9 +7,11 @@ import { css } from 'react-emotion'
 interface HeadlineProps {
   /** The headline of the story. */
   text: string
+  /** Custom css for the headline component */
+  style?: string
 }
 
 /** The story's headline. */
 export default function Headline(props: HeadlineProps) {
-  return <h1>{props.text}</h1>
+  return <h1 className={props.style}>{props.text}</h1>
 }

src/components/Image/index.mdx

@@ -5,6 +5,7 @@ route: /image
 
 import { Playground, PropsTable } from 'docz'
 import Image from '.'
+import { css } from 'react-emotion'
 
 # Image
 
@@ -18,5 +19,8 @@ An image with a caption.
     caption="Freshman attacker Ashworth Molthen has registered 21 goals on the season, finding the back of the net in 13 of the 16 games so far this year for UCLA men’s water polo. UCLA is one of two teams remaining in the MPSF conference that remains undefeated."
     credit="Amy Dixon/Photo editor"
     alt="Ashworth Molthen playing water polo."
+    style={css`
+          color: red;
+          `}
   />
 </Playground>

src/components/Image/index.tsx

@@ -6,15 +6,16 @@ export interface ImageProps {
   caption: string
   credit: string
   alt: string
+  /** Custom css for the image component */
+  style?: string
 }
 
 export default function Image(props: ImageProps) {
   if (!props.alt) {
     throw new Error('Image requires a meaningful `alt` value.')
   }
-
   return (
-    <figure>
+    <figure className={props.style}>
       <img
         className={css`
           width: 100%;