From 64ccd18e14403b3a3526fa4ef9f1afe0af3e2177 Mon Sep 17 00:00:00 2001
From: Nicole Sullivan <nsullivan@pivotal.io>
Date: Thu, 11 Dec 2014 11:30:40 -0500
Subject: [PATCH] feat(react): Introduce React typography components

* Add Heading generator and three type systems which
wrap it (Default, Alternate, Marketing)
* Add JSX support in the style guide
* Point hologram to a fork for jsx support

[Finishes #84033714]

Signed-off-by: Paul Meskers <pmeskers@pivotal.io>
---
 Gemfile                                       |   2 +-
 Gemfile.lock                                  |  10 +-
 hologram/doc_assets/_header.html              |   1 +
 src/pivotal-ui/components/typography.scss     | 103 +++++++++
 .../javascripts/pivotal-ui-react.js           |  11 +
 src/pivotal-ui/javascripts/typography.jsx     | 153 ++++++++++++++
 test/spec/javascripts/typography_spec.js      | 196 ++++++++++++++++++
 7 files changed, 470 insertions(+), 6 deletions(-)
 create mode 100644 src/pivotal-ui/javascripts/typography.jsx
 create mode 100644 test/spec/javascripts/typography_spec.js
diff --git a/Gemfile b/Gemfile
index 743e82846..f10364b08 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
-gem 'hologram', git: 'https://github.com/gpleiss/hologram.git', branch: 'develop'
+gem 'hologram', git: 'https://github.com/pmeskers/hologram.git', branch: 'jsx-templates'
 gem 'haml'
 gem 'sass'
 gem 'compass', '~> 1.0.1'
diff --git a/Gemfile.lock b/Gemfile.lock
index be70f44fa..4b079fc8c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 GIT
-  remote: https://github.com/gpleiss/hologram.git
-  revision: 64b3baf29654476425947967d982e070b2199061
-  branch: develop
+  remote: https://github.com/pmeskers/hologram.git
+  revision: 9de4273497a5ea61f0c335969ab661cd0fa2f54e
+  branch: jsx-templates
   specs:
     hologram (1.2.0)
       redcarpet (>= 2.2, < 4.0)
@@ -52,8 +52,8 @@ GEM
     rb-fsevent (0.9.4)
     rb-inotify (0.9.5)
       ffi (>= 0.5.0)
-    redcarpet (3.2.0)
-    rouge (1.7.2)
+    redcarpet (3.2.1)
+    rouge (1.7.4)
     rspec (2.99.0)
       rspec-core (~> 2.99.0)
       rspec-expectations (~> 2.99.0)
diff --git a/hologram/doc_assets/_header.html b/hologram/doc_assets/_header.html
index b310cd0e1..c1755a013 100644
--- a/hologram/doc_assets/_header.html
+++ b/hologram/doc_assets/_header.html
@@ -11,6 +11,7 @@
     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
     <script src="pivotal-ui-react.js"></script>
     <script src="styleguide/styleguide.js"></script>
+    <script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
   </head>
   <body>
     <nav class="styleguide-header">
diff --git a/src/pivotal-ui/components/typography.scss b/src/pivotal-ui/components/typography.scss
index 0c48ef779..e21fd4d7f 100644
--- a/src/pivotal-ui/components/typography.scss
+++ b/src/pivotal-ui/components/typography.scss
@@ -449,3 +449,106 @@ a:hover.type-inverse {
   color: $error-color !important;
 }
 
+/*doc
+---
+title: React Typography
+name: type_react
+category: Beta
+---
+We have three type systems. Which one you choose depends on your product.
+
+* Marketing sites should use the largest styles, for example `<MarketingH1>A Top Level Heading</MarketingH1>`
+* Most sites will use our default headings, for example `<DefaultH1>A Top Level Heading</DefaultH1>`
+* Rarely, sites will need a smaller type scale, for example `<AlternateH1>A Top Level Heading</AlternateH1>`
+
+*/
+
+/*doc
+---
+title: Alternate Typography
+name: type_react_alt
+parent: type_react
+---
+
+
+```html_example_table
+<div id="alternate-typography-h1-example"></div>
+<div id="alternate-typography-h2-example"></div>
+<div id="alternate-typography-h3-example"></div>
+```
+
+```jsx_example
+React.render(
+  <AlternateH1>h1 31px</AlternateH1>,
+  document.getElementById('alternate-typography-h1-example')
+);
+
+React.render(
+  <AlternateH2>h2 18px</AlternateH2>,
+  document.getElementById('alternate-typography-h2-example')
+);
+
+React.render(
+  <AlternateH3>h3 18px</AlternateH3>,
+  document.getElementById('alternate-typography-h3-example')
+);
+```
+
+*/
+
+/*doc
+---
+title: Default Typography
+name: type_react_default
+parent: type_react
+---
+
+```html_example_table
+<div id="default-typography-h1-example"></div>
+<div id="default-typography-h2-example"></div>
+<div id="default-typography-h3-example"></div>
+```
+
+```jsx_example
+React.render(
+  <DefaultH1>h1 31px</DefaultH1>,
+  document.getElementById('default-typography-h1-example')
+);
+
+React.render(
+  <DefaultH2>h2 18px</DefaultH2>,
+  document.getElementById('default-typography-h2-example')
+);
+
+React.render(
+  <DefaultH3>h3 18px</DefaultH3>,
+  document.getElementById('default-typography-h3-example')
+);
+```
+
+*/
+
+/*doc
+---
+title: Custom Headings
+name: type_react_custom
+parent: type_react
+---
+
+Usually, you want to use the provided headings. If your mock doesn't exactly match, you should try the normal headings,
+and see if it still looks ok. If it doesn't (this should be rare!) you can use our custom type generator.
+
+You may want to wrap this in a custom reusable React component rather than calling it directly.
+
+```html_example_table
+<div id="typography-h1-example"></div>
+```
+
+```jsx_example
+React.render(
+  <Heading element="h1" bold="high" color="type-dark-1">This is an h1 on most apps</Heading>,
+  document.getElementById('typography-h1-example')
+);
+```
+
+*/
diff --git a/src/pivotal-ui/javascripts/pivotal-ui-react.js b/src/pivotal-ui/javascripts/pivotal-ui-react.js
index 25ab3f87b..8a519735b 100644
--- a/src/pivotal-ui/javascripts/pivotal-ui-react.js
+++ b/src/pivotal-ui/javascripts/pivotal-ui-react.js
@@ -8,3 +8,14 @@ require('./back-to-top')();
 
 global.React = require('react');
 global.TableSortable = global.React.createFactory(require('./table-sortable.jsx'));
+
+global.Heading = require('./typography.jsx').Heading;
+
+global.AlternateH1 = require('./typography.jsx').AlternateH1;
+global.AlternateH2 = require('./typography.jsx').AlternateH2;
+global.AlternateH3 = require('./typography.jsx').AlternateH3;
+
+global.DefaultH1 = require('./typography.jsx').DefaultH1;
+global.DefaultH2 = require('./typography.jsx').DefaultH2;
+global.DefaultH3 = require('./typography.jsx').DefaultH3;
+
diff --git a/src/pivotal-ui/javascripts/typography.jsx b/src/pivotal-ui/javascripts/typography.jsx
new file mode 100644
index 000000000..712b537c3
--- /dev/null
+++ b/src/pivotal-ui/javascripts/typography.jsx
@@ -0,0 +1,153 @@
+'use strict';
+
+var React = require('react');
+var _ = require('lodash');
+
+
+var Heading = React.createClass({
+  acceptedSizeClasses: ['title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'small'],
+  acceptedBoldClasses: ['low', 'default', 'high', 'max'],
+  render: function render() {
+    var classes = [];
+
+    if(this.props.className) {
+      classes.push(this.props.className);
+    }
+
+    if (_.contains(this.acceptedSizeClasses, this.props.size)) {
+      classes.push(this.props.size);
+    }
+
+    if (_.contains(this.acceptedBoldClasses, this.props.bold)) {
+      classes.push("em-" + this.props.bold);
+    }
+
+    if (this.props.allcaps) {
+      classes.push("em-alt");
+    }
+
+    if (this.props.color) {
+      classes.push(this.props.color);
+    }
+
+    var joinedClasses = classes.join(' ');
+
+    switch(this.props.element) {
+      case "h1":
+        return (<h1 {...this.props} className={joinedClasses}>{this.props.children}</h1>);
+      case "h2":
+        return (<h2 {...this.props} className={joinedClasses}>{this.props.children}</h2>);
+      case "h3":
+        return (<h3 {...this.props} className={joinedClasses}>{this.props.children}</h3>);
+      case "h4":
+        return (<h4 {...this.props} className={joinedClasses}>{this.props.children}</h4>);
+      case "h5":
+        return (<h5 {...this.props} className={joinedClasses}>{this.props.children}</h5>);
+      case "h6":
+        return (<h6 {...this.props} className={joinedClasses}>{this.props.children}</h6>);
+      default:
+        return (<p {...this.props} className={joinedClasses}> {this.props.children}</p>);
+    }
+  }
+});
+
+var AlternateH1 = React.createClass({
+  getDefaultProps: function () {
+    return {
+      bold: 'high',
+      color: 'type-dark-1'
+    }
+  },
+
+  render: function render() {
+    return (
+      <Heading element="h1" {...this.props}>{this.props.children}</Heading>
+     );
+  }
+});
+
+var AlternateH2 = React.createClass({
+  getDefaultProps: function () {
+    return {
+      bold: 'high',
+      size: 'h4',
+      allcaps: true
+    }
+  },
+
+  render: function render() {
+    return (
+      <Heading element="h2"  {...this.props}>{this.props.children}</Heading>
+      );
+  }
+});
+
+var AlternateH3 = React.createClass({
+  getDefaultProps: function () {
+    return {
+      bold: 'high',
+      size: 'h4'
+    }
+  },
+
+  render: function render() {
+    return (
+      <Heading element="h3" {...this.props}>{this.props.children}</Heading>
+      );
+  }
+});
+
+var DefaultH1 = React.createClass({
+  getDefaultProps: function () {
+    return {
+      bold: 'high'
+    }
+  },
+
+  render: function render() {
+    return (
+      <Heading element="h1" {...this.props}>{this.props.children}</Heading>
+      );
+  }
+});
+
+var DefaultH2 = React.createClass({
+  getDefaultProps: function () {
+    return {
+      color: 'type-dark-1',
+      bold: 'high'
+    }
+  },
+
+  render: function render() {
+    return (
+      <Heading element="h2" {...this.props}>{this.props.children}</Heading>
+      );
+  }
+});
+
+var DefaultH3 = React.createClass({
+  getDefaultProps: function () {
+    return {
+      color: 'type-dark-1',
+      size: 'h4',
+      bold: 'high'
+    }
+  },
+
+  render: function render() {
+    return (
+      <Heading element="h3" {...this.props}>{this.props.children}</Heading>
+    );
+  }
+});
+
+module.exports = {
+  AlternateH1: AlternateH1,
+  AlternateH2: AlternateH2,
+  AlternateH3: AlternateH3,
+  DefaultH1: DefaultH1,
+  DefaultH2: DefaultH2,
+  DefaultH3: DefaultH3,
+  Heading: Heading
+};
diff --git a/test/spec/javascripts/typography_spec.js b/test/spec/javascripts/typography_spec.js
new file mode 100644
index 000000000..cf01ce768
--- /dev/null
+++ b/test/spec/javascripts/typography_spec.js
@@ -0,0 +1,196 @@
+'use strict';
+
+var $ = require('jquery');
+var React = require('react/addons');
+var TestUtils = React.addons.TestUtils;
+
+var Heading = React.createFactory(require('../../../src/pivotal-ui/javascripts/typography.jsx').Heading);
+
+describe('Heading', function() {
+  beforeEach(function() {
+    this.node = $('<div id="container"></div>').appendTo('body').get(0);
+  });
+
+  afterEach(function() {
+    React.unmountComponentAtNode(this.node);
+  });
+
+  describe("when the Heading has no properties passed in", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "foo",
+        children: "Heading text here"
+      }),
+      this.node
+      );
+    });
+
+    it("creates a p tag", function() {
+      expect($('#container p')).toContainText("Heading text here");
+    });
+
+    it("sets no additional classes", function() {
+      expect($('#container p').prop('className')).toEqual("");
+    });
+  });
+
+  describe("when the Heading has a specified h1 - h6 element", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "h1",
+        children: "Heading text here"
+      }),
+      this.node
+      );
+    });
+
+    it("creates an element of the specified heading", function() {
+      expect($('#container h1')).toContainText("Heading text here");
+    });
+  });
+
+  describe("when the Heading has a className provided", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "h1",
+        allcaps: true,
+        className: "myClass",
+        children: "Heading text here"
+      }),
+      this.node
+      );
+    });
+
+    it("creates an element with the className AND default classes", function() {
+      expect($('#container h1')).toHaveClass('myClass');
+      expect($('#container h1')).toHaveClass('em-alt');
+    });
+  });
+
+  describe("when the Heading has valid size provided", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "h1",
+        size: 'small'
+      }),
+      this.node
+      );
+    });
+
+    it("creates an element with the size class set", function() {
+      expect($('#container h1')).toHaveClass('small');
+    });
+  });
+
+  describe("when the Heading has invalid size provided", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "h1",
+        size: "fop"
+      }),
+      this.node
+      );
+    });
+
+    it("creates an element with the size class set", function() {
+      expect($('#container h1')).not.toHaveClass('fop');
+    });
+  });
+
+
+  describe("when the Heading has allcaps set", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "h2",
+        allcaps: true,
+        children: "Heading text here"
+      }),
+      this.node
+      );
+    });
+
+    it("creates an element with the em-alt class", function() {
+      expect($('#container h2')).toHaveClass('em-alt');
+    });
+  });
+
+  describe("when the Heading has a valid bold set", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "h2",
+        bold: "high",
+        children: "Heading text here"
+      }),
+      this.node
+      );
+    });
+
+    it("creates an element with the em-{bold} class", function() {
+      expect($('#container h2')).toHaveClass('em-high');
+    });
+  });
+
+  describe("when the Heading has an invalid bold set", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "h2",
+        bold: "superbold",
+        children: "Heading text here"
+      }),
+      this.node
+      );
+    });
+
+    it("creates an element without the em-{bold} class", function() {
+      expect($('#container h2')).not.toHaveClass('em-superbold');
+    });
+  });
+
+  describe("when the Heading has color set", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "h2",
+        color: "purple",
+        children: "Heading text here"
+      }),
+      this.node
+      );
+    });
+
+    it("creates an element with the color class", function() {
+      expect($('#container h2')).toHaveClass('purple');
+    });
+  });
+
+  describe("when Heading has many properties set", function() {
+    beforeEach(function() {
+      React.render(
+        Heading({
+        element: "h2",
+        size: "h4",
+        color: "purple",
+        bold: "max",
+        allcaps: true,
+        children: "Heading text here"
+      }),
+      this.node
+      );
+    });
+
+    it("creates an element all the necessary classes", function() {
+      expect($('#container h2')).toHaveClass('purple');
+      expect($('#container h2')).toHaveClass('em-alt');
+      expect($('#container h2')).toHaveClass('em-max');
+      expect($('#container h2')).toHaveClass('h4');
+    });
+  });
+});
