feat(Typography): Remove React Typography component

changed default color to $dark-2 it was pretty useless [#114786149] BREAKING CHANGE: React Typography is gone change react components to regular old html elements Signed-off-by: Elena Sharma <esharma@pivotal.io>
pivotal-cf · Mar 12, 2016 · f891a7b · f891a7b
1 parent 6598843
commit f891a7b
Show file tree

Hide file tree

Showing 17 changed files with 27 additions and 454 deletions.
diff --git a/README.md b/README.md
@@ -103,7 +103,6 @@ Seem overwhelming? It's time to talk with a front-end dev on the Pivotal team on
    For example, to create a button:
 
    ```
-   npm install --save pui-react-typography
    npm install --save pui-react-buttons
    ```
 
@@ -135,7 +134,6 @@ Seem overwhelming? It's time to talk with a front-end dev on the Pivotal team on
    Javascript:
    ```jsx
    var React = require('react');
-   var DefaultH1 = require('pui-react-typography').DefaultH1;
    var DefaultButton = require('pui-react-buttons').DefaultButton;
 
    var MyTestPage = React.createClass({
@@ -151,7 +149,7 @@ Seem overwhelming? It's time to talk with a front-end dev on the Pivotal team on
        return (
          <div className="container">
        <DefaultButton onClick={this.showMessage}>Show Message</DefaultButton>
-       { this.state.showMessage ? <DefaultH1>Hello world!</DefaultH1> : null }
+       { this.state.showMessage ? <h1>Hello world!</h1> : null }
      </div>
        );
      }

diff --git a/library/spec/pivotal-ui-react/typography/typography_spec.js b/library/spec/pivotal-ui-react/typography/typography_spec.js
diff --git a/library/src/pivotal-ui-react/modals/modals.js b/library/src/pivotal-ui-react/modals/modals.js
@@ -1,7 +1,7 @@
 var React = require('react');
-var {DefaultH4} = require('pui-react-typography');
 import {mergeProps} from 'pui-react-helpers';
 import 'pui-css-modals';
+import 'pui-css-typography';
 
 const BsModal = require('react-bootstrap/lib/Modal');
 const BsModalHeader = require('react-bootstrap/lib/ModalHeader');
@@ -24,7 +24,7 @@ class BaseModal extends React.Component {
     return (
       <BsModal show={show} onHide={onHide} {...mergeProps(modalProps, {className: 'modal-basic'})}>
         <BsModalHeader className="modal-header" closeButton>
-          <DefaultH4 className="modal-title" id="modalTitle">{title}</DefaultH4>
+          <h4 className="modal-title" id="modalTitle">{title}</h4>
         </BsModalHeader>
         {children}
       </BsModal>

diff --git a/library/src/pivotal-ui-react/modals/package.json b/library/src/pivotal-ui-react/modals/package.json
@@ -4,7 +4,7 @@
   "homepage": "http://styleguide.pivotal.io/",
   "dependencies": {
     "pui-css-modals": "^3.4.2",
-    "pui-react-typography": "^3.4.2",
+    "pui-css-typography": "^3.4.2",
     "pui-react-helpers": "^3.4.2",
     "react-bootstrap": "0.28.3"
   }

diff --git a/library/src/pivotal-ui-react/typography/package.json b/library/src/pivotal-ui-react/typography/package.json
diff --git a/library/src/pivotal-ui-react/typography/typography.js b/library/src/pivotal-ui-react/typography/typography.js
diff --git a/library/src/pivotal-ui/components/mixins.scss b/library/src/pivotal-ui/components/mixins.scss
@@ -110,7 +110,6 @@
   //pui
   margin-top: $whitespace-xl;
   margin-bottom: $whitespace-l;
-  font-weight: $font-weight-h1;
 
   @media all and (max-width: $screen-sm) {
     & {

diff --git a/library/src/pivotal-ui/components/pui-variables.scss b/library/src/pivotal-ui/components/pui-variables.scss
@@ -302,7 +302,7 @@ $headings-font-weight:    400 !default;
 $former-headings-line-height: 1.5;
 $headings-line-height:    1.286 !default;
 $headings-padding:        1em * ($former-headings-line-height - $headings-line-height) / 2;
-$headings-color:          null;
+$headings-color:          $dark-2;
 
 //TODO: create a mixin that will determine multiplers based on px-size
 $font-size-h1:            31px;

diff --git a/library/src/pivotal-ui/components/typography/typography.scss b/library/src/pivotal-ui/components/typography/typography.scss
@@ -29,6 +29,7 @@
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
+  color: $headings-color;
   padding-top: $headings-padding;
   padding-bottom: $headings-padding;
 }
@@ -55,62 +56,30 @@ h4, .h4, h5, .h5, h6, .h6 {
   }
 }
 
-// We handle font-weight here, bootstrap handles font-size and color
+//If you add new h1 styles, make sure to update the h1 mixin
 
-h1 {
-  //If you add new h1 styles, make sure to update the h1 mixin
-  font-weight: $font-weight-h1;
+h1, .h1 {
+  font-size: $font-size-h1;
 }
 
-h2 {
-  font-weight: $font-weight-h2;
+h2, .h2 {
+  font-size: $font-size-h2;
 }
 
-h3 {
-  font-weight: $font-weight-h3;
+h3, .h3 {
+  font-size: $font-size-h3;
 }
 
-h4 {
-  font-weight: $font-weight-h4;
+h4, .h4 {
+  font-size: $font-size-h4;
 }
 
-h5 {
-  font-weight: $font-weight-h5;
+h5, .h5 {
+  font-size: $font-size-h5;
 }
 
-h6 {
-  font-weight: $font-weight-h6;
-}
-
-
-.h1 {
-  font-size: $font-size-h1 !important;
-  font-weight: $font-weight-h1 !important;
-}
-
-.h2 {
-  font-size: $font-size-h2 !important;
-  font-weight: $font-weight-h2 !important;
-}
-
-.h3 {
-  font-size: $font-size-h3 !important;
-  font-weight: $font-weight-h3 !important;
-}
-
-.h4 {
-  font-size: $font-size-h4 !important;
-  font-weight: $font-weight-h4 !important;
-}
-
-.h5 {
-  font-size: $font-size-h5 !important;
-  font-weight: $font-weight-h5 !important;
-}
-
-.h6 {
-  font-size: $font-size-h6 !important;
-  font-weight: $font-weight-h6 !important;
+h6, .h6 {
+  font-size: $font-size-h6;
 }
 
 small, .type-sm {