feat(heading): Reset padding and margin on all headings

telus · Aug 29, 2017 · e3aa79d · e3aa79d
1 parent ae7529b
commit e3aa79d
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 14 deletions.
diff --git a/src/components/Spacing.modules.scss b/src/components/Spacing.modules.scss
@@ -0,0 +1,4 @@
+.noSpacing {
+  padding: 0;
+  margin: 0;
+}
diff --git a/src/components/Typography/Heading/Heading.jsx b/src/components/Typography/Heading/Heading.jsx
@@ -29,7 +29,7 @@ Heading.propTypes = {
   ]).isRequired,
   display: PropTypes.bool,
   invert: PropTypes.bool,
-  children: PropTypes.string.isRequired
+  children: PropTypes.node.isRequired
 }
 Heading.defaultProps = {
   size: 'h1',

diff --git a/src/components/Typography/Heading/Heading.modules.scss b/src/components/Typography/Heading/Heading.modules.scss
@@ -3,12 +3,16 @@
 @import '../../../scss/settings/typography';
 @import '../../../scss/utility/responsive';
 
-.heading-large {
+.largeHeading {
+  composes: noSpacing from '../../Spacing.modules.scss';
+
   color: $color-secondary;
   font-weight: 400;
 }
 
-.heading-small {
+.smallHeading {
+  composes: noSpacing from '../../Spacing.modules.scss';
+
   color: $color-shark;
   letter-spacing: -.6px;
   font-weight: 700;
@@ -19,6 +23,8 @@
 }
 
 .displayHeading {
+  composes: noSpacing from '../../Spacing.modules.scss';
+
   color: $color-secondary;
   font-size: rem(44px);
   line-height: 1.14; // 48px
@@ -32,7 +38,7 @@
 }
 
 .h1 {
-  composes: heading-large;
+  composes: largeHeading;
 
   font-size: 1.75rem;
   line-height: 1.29; // 36px
@@ -47,7 +53,7 @@
 }
 
 .h2 {
-  composes: heading-large;
+  composes: largeHeading;
 
   font-size: 1.5rem;
   line-height: 1.33; // 30px
@@ -61,14 +67,14 @@
 }
 
 .h3 {
-  composes: heading-small;
+  composes: smallHeading;
 
   font-size: 1.25rem;
   line-height: 1.4; // 28px
 }
 
 .h4 {
-  composes: heading-small;
+  composes: smallHeading;
 
   font-size: 1rem;
   line-height: 1.25; // 20px

diff --git a/src/components/Typography/Heading/__tests__/Heading.spec.jsx b/src/components/Typography/Heading/__tests__/Heading.spec.jsx
@@ -14,7 +14,7 @@ describe('Heading', () => {
     expect(heading).toHaveText('Go home')
   })
 
-  it('renders a heading in six sizes', () => {
+  it('renders a heading in four sizes', () => {
     let heading = doShallow({ size: 'h1' })
     expect(heading).toHaveTagName('h1')
 

diff --git a/src/components/Typography/Paragraph/Paragraph.jsx b/src/components/Typography/Paragraph/Paragraph.jsx
@@ -4,14 +4,15 @@ import classnames from 'classnames'
 
 import safeRest from '../../../safeRest'
 
+import spacingStyles from '../../Spacing.modules.scss'
 import styles from './Paragraph.modules.scss'
 import textStyles from '../Text/Text.modules.scss'
 
 const Paragraph = ({ bold, size, align, invert, children, ...rest }, context) => {
   const paragraphColor = invert ? textStyles.colorInverted : textStyles.color
 
   const classes = classnames(
-    styles.noSpacing,
+    spacingStyles.noSpacing,
     context.inheritColor ? styles.inheritColor : paragraphColor,
     textStyles[size],
     bold ? textStyles.boldFont : textStyles[`${size}Font`],

diff --git a/src/components/Typography/Paragraph/Paragraph.modules.scss b/src/components/Typography/Paragraph/Paragraph.modules.scss
@@ -1,8 +1,3 @@
-.noSpacing {
-  padding: 0;
-  margin: 0;
-}
-
 .inheritColor {
   color: inherit;
 }