fix(react-typography): add prop validations

[Delivers #86938454]

src/pivotal-ui/javascripts/mixins/typography-mixin.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+
+var TypographyMixin = {
+  propTypes: {
+    allCaps: React.PropTypes.bool,
+    bold: React.PropTypes.oneOf(['low', 'default', 'high', 'max']),
+    color: React.PropTypes.string,
+    element: React.PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']),
+    size: React.PropTypes.oneOf(['title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'small']),
+  }
+};
+
+module.exports = TypographyMixin;

src/pivotal-ui/javascripts/typography.jsx

@@ -1,174 +1,182 @@
 'use strict';
 
 var React = require('react');
-var _ = require('lodash');
+
+var TypographyMixin = require('./mixins/typography-mixin');
 
 var Heading = React.createClass({
-  acceptedSizeClasses: ['title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'small'],
-  acceptedBoldClasses: ['low', 'default', 'high', 'max'],
+  mixins: [TypographyMixin],
+
   render: function render() {
+    var {className, size, bold, allCaps, color, element, children, ...other} = this.props;
     var classes = [];
 
-    if(this.props.className) {
-      classes.push(this.props.className);
+    if (className) {
+      classes.push(className);
     }
 
-    if (_.contains(this.acceptedSizeClasses, this.props.size)) {
-      classes.push(this.props.size);
+    if (size) {
+      classes.push(size);
     }
 
-    if (_.contains(this.acceptedBoldClasses, this.props.bold)) {
-      classes.push('em-' + this.props.bold);
+    if (bold) {
+      classes.push('em-' + bold);
     }
 
-    if (this.props.allCaps) {
+    if (allCaps) {
       classes.push('em-alt');
     }
 
-    if (this.props.color) {
-      classes.push(this.props.color);
+    if (color) {
+      classes.push(color);
     }
 
     var joinedClasses = classes.join(' ');
 
-    switch(this.props.element) {
+    switch(element) {
       case 'h1':
-        return (<h1 {...this.props} className={joinedClasses}>{this.props.children}</h1>);
+        return (<h1 {...other} className={joinedClasses}>{children}</h1>);
       case 'h2':
-        return (<h2 {...this.props} className={joinedClasses}>{this.props.children}</h2>);
+        return (<h2 {...other} className={joinedClasses}>{children}</h2>);
       case 'h3':
-        return (<h3 {...this.props} className={joinedClasses}>{this.props.children}</h3>);
+        return (<h3 {...other} className={joinedClasses}>{children}</h3>);
       case 'h4':
-        return (<h4 {...this.props} className={joinedClasses}>{this.props.children}</h4>);
+        return (<h4 {...other} className={joinedClasses}>{children}</h4>);
       case 'h5':
-        return (<h5 {...this.props} className={joinedClasses}>{this.props.children}</h5>);
+        return (<h5 {...other} className={joinedClasses}>{children}</h5>);
       case 'h6':
-        return (<h6 {...this.props} className={joinedClasses}>{this.props.children}</h6>);
+        return (<h6 {...other} className={joinedClasses}>{children}</h6>);
       default:
-        return (<p {...this.props} className={joinedClasses}> {this.props.children}</p>);
+        return (<p {...other} className={joinedClasses}> {children}</p>);
     }
   }
 });
 
-var createTypographyClass = function createTypographyClass(opts) {
-  return React.createClass({
-    getDefaultProps: function() {
-      return {
-        color: opts.color,
-        size: opts.size,
-        bold: opts.bold,
-        allCaps: opts.allCaps
-      };
-    },
-
-    render: function render() {
-      return (
-        <Heading element={opts.element} {...this.props}>{this.props.children}</Heading>
-      );
-    }
-  });
-};
-
-var DefaultH1 = createTypographyClass({
-  element: 'h1',
+var DefaultH1 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h1' />;
+  }
 });
 
-var DefaultH2 = createTypographyClass({
-  element: 'h2',
+var DefaultH2 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h2' />;
+  }
 });
 
-var DefaultH3 = createTypographyClass({
-  element: 'h3',
+var DefaultH3 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h3' />;
+  }
 });
 
-var DefaultH4 = createTypographyClass({
-  element: 'h4',
+var DefaultH4 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h4' />;
+  }
 });
 
-var DefaultH5 = createTypographyClass({
-  element: 'h5',
+var DefaultH5 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h5' />;
+  }
 });
 
-var DefaultH6 = createTypographyClass({
-  element: 'h6',
+var DefaultH6 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h6' />;
+  }
 });
 
-var AlternateH1 = createTypographyClass({
-  element: 'h1',
-  color: 'type-dark-1',
-  bold: 'max'
+var AlternateH1 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h1' color='type-dark-1' bold='max' />;
+  }
 });
 
-var AlternateH2 = createTypographyClass({
-  element: 'h2',
-  size: 'h4',
-  bold: 'high',
-  allCaps: true
+var AlternateH2 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h2' size='h4' bold='high' allCaps={true} />;
+  }
 });
 
-var AlternateH3 = createTypographyClass({
-  element: 'h3',
-  size: 'h4',
+var AlternateH3 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h3' size='h4' />;
+  }
 });
 
-var AlternateH4 = createTypographyClass({
-  element: 'h4',
-  size: 'h6',
-  bold: 'high',
-  allCaps: true
+var AlternateH4 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h4' size='h6' bold='high' allCaps={true} />;
+  }
 });
 
-var AlternateH5 = createTypographyClass({
-  element: 'h5',
-  size: 'h6',
-  bold: 'high'
+var AlternateH5 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h5' size='h6' bold='high' />;
+  }
 });
 
-var AlternateH6 = createTypographyClass({
-  element: 'h6',
+var AlternateH6 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h6' />;
+  }
 });
 
 
-var MarketingH1 = createTypographyClass({
-  element: 'h1',
-  color: 'type-dark-1',
-  size: 'title',
-  bold: 'high'
+var MarketingH1 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h1' size='title' bold='high' color='type-dark-1' />;
+  }
 });
 
-var MarketingH2 = createTypographyClass({
-  element: 'h2',
-  color: 'type-dark-1',
-  size: 'h1',
-  bold: 'high'
+var MarketingH2 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h2' size='h1' bold='high' color='type-dark-1' />;
+  }
 });
 
-var MarketingH3 = createTypographyClass({
-  element: 'h3',
-  color: 'type-dark-1',
-  size: 'h2',
-  bold: 'high'
+var MarketingH3 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h3' size='h2' bold='high' color='type-dark-1' />;
+  }
 });
 
-var MarketingH4 = createTypographyClass({
-  element: 'h4',
-  color: 'type-dark-1',
-  size: 'h3',
-  bold: 'high'
+var MarketingH4 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h4' size='h3' bold='high' color='type-dark-1' />;
+  }
 });
 
-var MarketingH5 = createTypographyClass({
-  element: 'h5',
-  color: 'type-dark-1',
-  size: 'h4',
-  bold: 'high'
+var MarketingH5 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h5' size='h4' bold='high' color='type-dark-1' />;
+  }
 });
 
-var MarketingH6 = createTypographyClass({
-  element: 'h6',
-  color: 'type-dark-1',
-  size: 'h5',
-  bold: 'high'
+var MarketingH6 = React.createClass({
+  mixins: [TypographyMixin],
+  render: function() {
+    return <Heading {...this.props} element='h6' size='h5' bold='high' color='type-dark-1' />;
+  }
 });
 
 module.exports = {
@@ -190,6 +198,5 @@ module.exports = {
   MarketingH4: MarketingH4,
   MarketingH5: MarketingH5,
   MarketingH6: MarketingH6,
-  Heading: Heading,
-  createTypographyClass: createTypographyClass
+  Heading: Heading
 };