Add Typeface tag and Google Font support to themes.

README.markdown

@@ -43,6 +43,7 @@ ReactJS based Presentation Library
     - [S (Base)](#s-base)
     - [Table, TableRow, TableHeaderItem and TableItem (Base)](#table-tablerow-tableheaderitem-and-tableitem-base)
     - [Text (Base)](#text-base)
+    - [Typeface](#typeface)
   - [Base Props](#base-props)
 - [Third Party Extensions](#third-party)
 
@@ -87,7 +88,7 @@ To present:
 
 - Run `npm start`
 - Open two browser windows on two different screens
-- On your screen visit [http://localhost:3000/](http://localhost:3000/). You will be redirected to a URL containing the slide id. 
+- On your screen visit [http://localhost:3000/](http://localhost:3000/). You will be redirected to a URL containing the slide id.
 - Add `presenter&` immediately after the questionmark, e.g.: [http://localhost:3000/#/?presenter&_k=wbyhif](http://localhost:3000/#/?presenter&_k=wbyhif)
 - On the presentation screen visit [http://localhost:3000/](http://localhost:3000/)
 - Give an amazingly stylish presentation
@@ -194,13 +195,15 @@ You will want to edit `index.html` to include any web fonts or additional CSS th
 <a name="createthemecolors-fonts"></a>
 #### createTheme(colors, fonts)
 
-Spectacle's functional theme system allows you to pass in color and font variables that you can use on your elements. See the example below:
+Spectacle's functional theme system allows you to pass in color and font variables that you can use on your elements. The fonts configuration object can take a string for a system font or an object that specifies it‘s a Google Font. If you use a Google Font you can provide a styles array for loading different weights and variations. Google Font tags will be automatically created. See the example below:
 
 ```jsx
 const theme = createTheme({
-  primary: "red"
+  primary: "red",
+  secondary: "blue"
 }, {
-  primary: "Helvetica"
+  primary: "Helvetica",
+  secondary: { name: "Droid Serif", googleFont: true, styles: [ "400", "700i" ] }
 });
 ```
 
@@ -446,6 +449,30 @@ Every component above that has `(Base)` after it has been extended from a common
 | bgImage | React.PropTypes.string | Set `backgroundImage` value|
 | bgDarken | React.PropTypes.number | Float value from 0.0 to 1.0 specifying how much to darken the bgImage image|
 
+<a name="typeface"></a>
+#### Typeface
+
+The `Typeface` tag is used to apply a specific font to text content. It can either use a font that exists on the system or load a font from the Google Fonts library. `Typeface` requires either `font` or `googleFont` to be defined.
+
+| Name | PropType | Description |
+| ---- | -------- | ----------- |
+| font | React.PropTypes.string | Use a font from the local system |
+| googleFont | React.PropTypes.string | Use a font from the Google Fonts library |
+| weight | React.PropTypes.number | Numeric weight value for the font. Default: `400`. |
+| italic | React.PropTypes.boolean | Use an italics variant of the font if it exists. Default: `false`. |
+
+```jsx
+<Typeface googleFont="Roboto Slab" weight={600}>
+  <Text>This text is using bold Roboto Slab from Google Fonts.</Text>
+</Typeface>
+```
+
+```jsx
+<Typeface font="SF Text" weight={400} italic={true}>
+  <Text>This text is using the San Francisco Text font from the system.</Text>
+</Typeface>
+```
+
 <a name="third-party"></a>
 ## Third Party Extensions
 

package.json

@@ -24,6 +24,7 @@
     "react-addons-transition-group": "^15.3.2",
     "react-history": "^0.15.1",
     "react-redux": "^4.0.0",
+    "react-typography": "^0.15.0",
     "redux": "^3.0.4",
     "redux-actions": "^0.12.0",
     "tween-functions": "1.1.0",
@@ -38,7 +39,7 @@
     "babel-cli": "^6.16.0",
     "babel-core": "^6.18.0",
     "babel-eslint": "^7.0.0",
-    "babel-jest": "^16.0.0",
+    "babel-jest": "^17.0.2",
     "babel-loader": "^6.2.5",
     "babel-plugin-react-transform": "^2.0.0-beta1",
     "babel-plugin-transform-decorators-legacy": "^1.2.0",
@@ -61,12 +62,12 @@
     "eslint-plugin-react": "^6.4.1",
     "express": "^4.13.3",
     "file-loader": "^0.9.0",
-    "jest": "^16.0.2",
+    "jest": "^17.0.2",
     "node-libs-browser": "^0.5.3",
     "raw-loader": "^0.5.1",
-    "react": "^15.3.2",
-    "react-addons-test-utils": "^15.3.2",
-    "react-dom": "^15.3.2",
+    "react": "^15.4.0",
+    "react-addons-test-utils": "^15.4.0",
+    "react-dom": "^15.4.0",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.2.0",
@@ -77,8 +78,5 @@
     "webpack": "^2.1.0-beta.25",
     "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.13.0"
-  },
-  "jest": {
-    "clearMocks": true
   }
 }

src/components/__snapshots__/deck.test.js.snap

@@ -18,6 +18,11 @@ exports[`<Deck /> should render correctly. 1`] = `
         "slide": 0,
       }
     }
+    style={
+      Object {
+        "globalStyleSet": Array [],
+      }
+    }
     transition={
       Array [
         "zoom",
@@ -86,12 +91,10 @@ exports[`<Deck /> should render correctly. 1`] = `
               "width": "100%",
             }
           }>
-          <div
-            data-radium={true}
+          <MockSlide
             dispatch={[Function]}
             export={false}
             hash={0}
-            id={1}
             lastSlide={0}
             print={false}
             slideIndex={0}
@@ -101,21 +104,19 @@ exports[`<Deck /> should render correctly. 1`] = `
                 "slide",
               ]
             }
-            transitionDuration={500} />
+            transitionDuration={500}>
+            <div>
+              Slide Content
+            </div>
+          </MockSlide>
         </div>
       </ReactTransitionGroup>
       <Progress
         currentSlide={0}
         items={
           Array [
-            <div
-              id={1}>
-              Slide 1
-          </div>,
-            <div
-              id={2}>
-              Slide 2
-          </div>,
+            <MockSlide />,
+            <MockSlide />,
           ]
         }
         type="pacman">
@@ -227,6 +228,11 @@ exports[`<Deck /> should render the export configuration when specified. 1`] = `
         "slide": 0,
       }
     }
+    style={
+      Object {
+        "globalStyleSet": Array [],
+      }
+    }
     transitionDuration={500}>
     <div
       className="spectacle-deck"
@@ -257,14 +263,8 @@ exports[`<Deck /> should render the export configuration when specified. 1`] = `
         }
         slides={
           Array [
-            <div
-              id={1}>
-              Slide 1
-          </div>,
-            <div
-              id={2}>
-              Slide 2
-          </div>,
+            <MockSlide />,
+            <MockSlide />,
           ]
         }>
         <div
@@ -276,24 +276,26 @@ exports[`<Deck /> should render the export configuration when specified. 1`] = `
               "width": "100%",
             }
           }>
-          <div
+          <MockSlide
             export={true}
-            id={1}
             print={false}
             slideIndex={0}
             transition={Array []}
             transitionDuration={0}>
-            Slide 1
-          </div>
-          <div
+            <div>
+              Slide Content
+            </div>
+          </MockSlide>
+          <MockSlide
             export={true}
-            id={2}
             print={false}
             slideIndex={1}
             transition={Array []}
             transitionDuration={0}>
-            Slide 2
-          </div>
+            <div>
+              Slide Content
+            </div>
+          </MockSlide>
         </div>
       </Export>
       <Style
@@ -335,6 +337,11 @@ exports[`<Deck /> should render the overview configuration when specified. 1`] =
         "slide": 0,
       }
     }
+    style={
+      Object {
+        "globalStyleSet": Array [],
+      }
+    }
     transitionDuration={500}>
     <div
       className="spectacle-deck"
@@ -366,14 +373,8 @@ exports[`<Deck /> should render the overview configuration when specified. 1`] =
         slide={0}
         slides={
           Array [
-            <div
-              id={1}>
-              Slide 1
-          </div>,
-            <div
-              id={2}>
-              Slide 2
-          </div>,
+            <MockSlide />,
+            <MockSlide />,
           ]
         }>
         <div
@@ -401,16 +402,17 @@ exports[`<Deck /> should render the overview configuration when specified. 1`] =
                 "width": NaN,
               }
             }>
-            <div
+            <MockSlide
               appearOff={true}
               export={false}
-              id={1}
               print={false}
               slideIndex={0}
               transition={Array []}
               transitionDuration={0}>
-              Slide 1
-            </div>
+              <div>
+                Slide Content
+              </div>
+            </MockSlide>
           </div>
           <div
             data-radium={true}
@@ -427,16 +429,17 @@ exports[`<Deck /> should render the overview configuration when specified. 1`] =
                 "width": NaN,
               }
             }>
-            <div
+            <MockSlide
               appearOff={true}
               export={false}
-              id={2}
               print={false}
               slideIndex={1}
               transition={Array []}
               transitionDuration={0}>
-              Slide 2
-            </div>
+              <div>
+                Slide Content
+              </div>
+            </MockSlide>
           </div>
         </div>
       </Overview>

src/components/__snapshots__/typeface.test.js.snap

@@ -0,0 +1,63 @@
+exports[`<Typeface /> should render the children when using a Google font. 1`] = `
+<Typeface
+  googleFont="Roboto Slab"
+  italic={true}
+  weight={700}>
+  <div>
+    <GoogleFont
+      typography={
+        Object {
+          "options": Object {
+            "googleFonts": Array [
+              Object {
+                "name": "Roboto Slab",
+                "styles": Array [
+                  "700i",
+                ],
+              },
+            ],
+          },
+          "title": "Roboto Slab",
+        }
+      }>
+      <link
+        href="//fonts.googleapis.com/css?family=Roboto+Slab:700i"
+        rel="stylesheet"
+        type="text/css" />
+    </GoogleFont>
+    <MockComponent>
+      <div
+        style={
+          Object {
+            "fontFamily": "Roboto Slab",
+            "fontStyle": "italic",
+            "fontWeight": 700,
+          }
+        }>
+        Hello!
+      </div>
+    </MockComponent>
+  </div>
+</Typeface>
+`;
+
+exports[`<Typeface /> should render the children when using a system font. 1`] = `
+<Typeface
+  font="SF UI Text"
+  weight={400}>
+  <div>
+    <MockComponent>
+      <div
+        style={
+          Object {
+            "fontFamily": "SF UI Text",
+            "fontStyle": "normal",
+            "fontWeight": 400,
+          }
+        }>
+        Hello!
+      </div>
+    </MockComponent>
+  </div>
+</Typeface>
+`;

src/components/block-quote.js

@@ -5,8 +5,9 @@ import Radium from "radium";
 @Radium
 export default class BlockQuote extends Component {
   render() {
+    const typefaceStyle = this.context.typeface || {};
     return (
-      <blockquote className={this.props.className} style={[this.context.styles.components.blockquote, getStyles.call(this), this.props.style]}>
+      <blockquote className={this.props.className} style={[this.context.styles.components.blockquote, getStyles.call(this), this.props.style, typefaceStyle]}>
         {this.props.children}
       </blockquote>
     );
@@ -21,5 +22,6 @@ BlockQuote.propTypes = {
 
 BlockQuote.contextTypes = {
   styles: PropTypes.object,
-  store: PropTypes.object
+  store: PropTypes.object,
+  typeface: PropTypes.object
 };