change typography class names (#4)

Author: RJ Spiker

plugins/typography/README.md

@@ -20,9 +20,9 @@ Here is some more stuff...
 ```jsx
 <h1 className='g-type-display-2'>Uses</h1>
 
-<p>Here are some uses...</p>
+<p className='g-type-long-body'>Here are some uses...</p>
 
-<h2 className='g-type-section-1'>Another title</h2>
+<h2 className='g-type-display-3'>Another title</h2>
 
-<p>Here is some more stuff...</p>
+<p className='g-type-long-body'>Here is some more stuff...</p>
 ```

plugins/typography/index.js

@@ -12,20 +12,20 @@ module.exports = function typographyPlugin() {
         props.className = 'g-type-display-2'
       }
       if (node.depth === 2) {
-        data.id = 'g-type-section-1'
-        props.className = 'g-type-section-1'
+        data.id = 'g-type-display-3'
+        props.className = 'g-type-display-3'
       }
       if (node.depth === 3) {
-        data.id = 'g-type-section-2'
-        props.className = 'g-type-section-2'
+        data.id = 'g-type-display-4'
+        props.className = 'g-type-display-4'
       }
       if (node.depth === 4) {
-        data.id = 'g-type-section-3'
-        props.className = 'g-type-section-3'
+        data.id = 'g-type-display-5'
+        props.className = 'g-type-display-5'
       }
       if (node.depth === 5) {
-        data.id = 'g-type-section-4'
-        props.className = 'g-type-section-4'
+        data.id = 'g-type-display-6'
+        props.className = 'g-type-display-6'
       }
       if (node.depth === 6) {
         data.id = 'g-type-label'
@@ -38,8 +38,8 @@ module.exports = function typographyPlugin() {
       node.children.map(li => {
         const data = li.data || (li.data = {})
         const props = data.hProperties || (data.hProperties = {})
-        data.id = 'g-type-body'
-        props.className = 'g-type-body'
+        data.id = 'g-type-long-body'
+        props.className = 'g-type-long-body'
       })
     })
   }

plugins/typography/index.test.js

@@ -28,7 +28,7 @@ describe('type-styles', () => {
       /<h6 {\.\.\.{\n\s+"className": "g-type-label"\n\s+}}>{`Heading Six`}<\/h6>/
     )
     expect(output).toMatch(
-      /<li parentName="ul" {\.\.\.{\n\s+"className": "g-type-body"\n\s+}}>{`foo`}<\/li>/
+      /<li parentName="ul" {\.\.\.{\n\s+"className": "g-type-long-body"\n\s+}}>{`foo`}<\/li>/
     )
   })
 })