feat: Add Article and Image components (#56)

* Add some things

* Add case/switch

* Add test

* Image component

* Add Image doc

* ci(travis): add a missing colon

* refactor(Article): Fix some syntax

* export ImageProps

* Add usage details

* ../Image

* Update snapshot

.editorconfig

@@ -5,7 +5,6 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

README.md

@@ -12,6 +12,20 @@
 
 Lux is a design system for the Daily Bruin, written in [TypeScript](https://www.typescriptlang.org) and [React](https://reactjs.org).
 
+## Usage
+
+To use Lux, simply install it with your favorite package manager, e.g.:
+
+```
+yarn add @dailybruin/lux
+```
+
+Import components with the following syntax:
+
+```javascript
+import { Article } from '@dailybruin/lux'
+```
+
 ## Development
 
 To start a dev server for the docs:

package.json

@@ -40,15 +40,21 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,json,css,md}": [
-      "prettier --write",
-      "git add"
-    ],
-    "*.{ts,tsx}": [
-      "tslint"
-    ],
-    "*": [
-      "eclint check"
+    "linters": {
+      "*.{js,jsx,ts,tsx,json,css,md}": [
+        "prettier --write",
+        "git add"
+      ],
+      "*.{ts,tsx}": [
+        "tslint"
+      ],
+      "*": [
+        "eclint check"
+      ]
+    },
+    "ignore": [
+      "**/dist/*",
+      "*.test.*"
     ]
   },
   "scripts": {

src/components/Article/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Article Matches its snapshot 1`] = `
+<article>
+  <p>
+    <strong>
+      Lorem
+    </strong>
+     
+    <a
+      href="https://dailybruin.com"
+    >
+      ipsum
+    </a>
+     dolor sit amet, consectetur adipiscing elit. Cras porttitor metus in pellentesque bibendum. Fusce rutrum sollicitudin finibus. Proin pellentesque leo enim, sed ultrices diam laoreet ut. Vivamus ut consequat nulla. Aenean sodales enim ut sapien rhoncus, in rhoncus metus mattis. Phasellus sed turpis tristique, tristique augue quis, lobortis est. Proin consectetur volutpat lacus, vitae luctus orci eleifend ac. Aliquam porttitor aliquet purus. Fusce condimentum eu sapien ut malesuada. Sed at nibh purus. Quisque et cursus nisl. Donec sed tincidunt ex.
+  </p>
+  <figure>
+    <img
+      src="https://dailybruin.com/images/2018/10/web.sp_.mwp_.nbk_.ADX_-640x461.jpg"
+    />
+    <figcaption>
+      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.
+       (
+      Amy Dixon/Photo Editor
+      )
+    </figcaption>
+  </figure>
+</article>
+`;

src/components/Article/index.mdx

@@ -0,0 +1,31 @@
+---
+name: Article
+route: /article
+---
+
+import { Playground, PropsTable } from 'docz'
+import Article from '.'
+
+# Article
+
+An article's text and multimedia.
+
+Note that `Article` expects an array of `Content`, which
+
+<PropsTable of={Article} />
+
+<Playground>
+  <Article content={[
+  {
+    type: 'text',
+    value:
+      '<strong>Lorem</strong> <a href="https://dailybruin.com">ipsum</a> dolor sit amet, consectetur adipiscing elit. Cras porttitor metus in pellentesque bibendum. Fusce rutrum sollicitudin finibus. Proin pellentesque leo enim, sed ultrices diam laoreet ut. Vivamus ut consequat nulla. Aenean sodales enim ut sapien rhoncus, in rhoncus metus mattis. Phasellus sed turpis tristique, tristique augue quis, lobortis est. Proin consectetur volutpat lacus, vitae luctus orci eleifend ac. Aliquam porttitor aliquet purus. Fusce condimentum eu sapien ut malesuada. Sed at nibh purus. Quisque et cursus nisl. Donec sed tincidunt ex.',
+  },
+  {
+    type: "image",
+    url: "https://dailybruin.com/images/2018/10/web.sp_.mwp_.nbk_.ADX_-640x461.jpg",
+    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"
+  }
+]} />
+</Playground>

src/components/Article/index.test.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { render, cleanup } from 'react-testing-library'
+import Article from '.'
+
+const content = [
+  {
+    type: 'text',
+    value:
+      '<strong>Lorem</strong> <a href="https://dailybruin.com">ipsum</a> dolor sit amet, consectetur adipiscing elit. Cras porttitor metus in pellentesque bibendum. Fusce rutrum sollicitudin finibus. Proin pellentesque leo enim, sed ultrices diam laoreet ut. Vivamus ut consequat nulla. Aenean sodales enim ut sapien rhoncus, in rhoncus metus mattis. Phasellus sed turpis tristique, tristique augue quis, lobortis est. Proin consectetur volutpat lacus, vitae luctus orci eleifend ac. Aliquam porttitor aliquet purus. Fusce condimentum eu sapien ut malesuada. Sed at nibh purus. Quisque et cursus nisl. Donec sed tincidunt ex.',
+  },
+  {
+    type: "image",
+    url: "https://dailybruin.com/images/2018/10/web.sp_.mwp_.nbk_.ADX_-640x461.jpg",
+    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"
+  }
+]
+
+describe('Article', () => {
+  afterEach(cleanup)
+
+  it('Matches its snapshot', () => {
+    const { container } = render(<Article content={content} />)
+    expect(container.firstChild).toMatchSnapshot()
+  })
+})

src/components/Article/index.tsx

@@ -1,26 +1,51 @@
-import * as React from 'react';
-import { css } from 'react-emotion';
+import * as React from 'react'
+import Image, { ImageProps } from '../Image'
 
 enum ContentType {
-  Text,
-  Photo,
+  Text = 'text',
+  Image = 'image',
 }
 
-interface Content {
-  type: Content;
-  content: string;
+interface Text {
+  value: string
 }
 
 /**
  * Article properties.
  */
 interface ArticleProps {
   /** The paragraphs of content for the story. */
-  content: Array<Content>;
-  dropcap: boolean;
+  content: any[]
+  dropcap: boolean
 }
 
 /** A footer to go at the bottom of every page. */
-export default function Footer(props: ArticleProps) {
-  return <article>{}</article>;
+export default class Article extends React.Component<ArticleProps> {
+  public static defaultProps = { dropcap: false }
+
+  public render() {
+    const renderedContent = this.props.content.map(
+      (content: any, i: number) => {
+        switch (content.type) {
+          case ContentType.Text:
+            const text = content as Text
+            return (
+              <p
+                key={i}
+                dangerouslySetInnerHTML={{
+                  __html: text.value,
+                }}
+              />
+            )
+          case ContentType.Image:
+            const image = content as ImageProps
+            return <Image {...image} />
+          default:
+            break
+        }
+      }
+    )
+
+    return <article>{renderedContent}</article>
+  }
 }

src/components/Image/index.mdx

@@ -0,0 +1,20 @@
+---
+name: Image
+route: /image
+---
+
+import { Playground, PropsTable } from 'docz'
+import Image from '.'
+
+# Image
+
+An image with a caption.
+
+<PropsTable of={Image} />
+
+<Playground>
+  <Image url="http://dailybruin.com/images/2018/10/web.sp_.mwp_.nbk_.ADX_-640x461.jpg"
+  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." />
+</Playground>

src/components/Image/index.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+export interface ImageProps {
+  url: string
+  caption: string
+  credit: string
+  alt: string
+}
+
+export default function Image(props: ImageProps) {
+  return (
+    <figure>
+      <img src={props.url} alt={props.alt} />
+      <figcaption>
+        {props.caption} ({props.credit})
+      </figcaption>
+    </figure>
+  )
+}

src/index.mdx

@@ -19,4 +19,12 @@ In 1947, UC Berkeley provost Monroe E. Deutsch, [wrote the following](https://ww
 
 The goal of Lux is to make this eternal vigilance easily accessible to all by compliing web best practices and commonly used news page components into an easy to use library.
 
-Check out some of the components on the sidebar!
+To use Lux, simply install it with your favorite package manager, e.g.:
+```
+yarn add @dailybruin/lux
+```
+
+Check out some of the components on the sidebar! To import a component, use the following syntax:
+```javascript
+import {Article} from '@dailybruin/lux'
+```