refactor(display-heading): Cleaned up css now that Responsive compone…

…nt is used
telus · Nov 17, 2017 · 35e8d72 · 35e8d72
1 parent c49cd74
commit 35e8d72
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 44 deletions.
diff --git a/src/components/Typography/DisplayHeading/DisplayHeading.jsx b/src/components/Typography/DisplayHeading/DisplayHeading.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import safeRest from '../../../utils/safeRest'
+import joinClassNames from '../../../utils/joinClassNames'
 
 import Responsive from '../../Responsive/Responsive'
 import DisplayHeadingSup from './DisplayHeadingSup/DisplayHeadingSup'
@@ -9,30 +10,23 @@ import DisplayHeadingSub from './DisplayHeadingSub/DisplayHeadingSub'
 import styles from './DisplayHeading.modules.scss'
 
 const getClassName = (invert, desktop) => {
-  if (invert && desktop) {
-    return styles.invertedDesktop
-  } else if (!invert && desktop) {
-    return styles.defaultDesktop
-  } else if (invert && !desktop) {
-    return styles.inverted
-  }
-  return styles.default
+  return joinClassNames(
+    styles.heading,
+    desktop ? styles.headingSizeDesktop : styles.headingSize,
+    invert ? styles.inverted : styles.default
+  )
 }
 
 /**
  * Large page titles. Renders an HTML `<h1>` element.
  */
 const DisplayHeading = ({ invert, children, ...rest }) => (
   <Responsive minWidth="md">
-    {matches => {
-      const desktop = !!matches
-
-      return (
-        <h1 {...safeRest(rest)} className={getClassName(invert, desktop)}>
-          {children}
-        </h1>
-      )
-    }}
+    {desktop => (
+      <h1 {...safeRest(rest)} className={getClassName(invert, desktop)}>
+        {children}
+      </h1>
+    )}
   </Responsive>
 )
 

diff --git a/src/components/Typography/DisplayHeading/DisplayHeading.modules.scss b/src/components/Typography/DisplayHeading/DisplayHeading.modules.scss
@@ -11,55 +11,42 @@
   composes: baseSupSubScripts from '../Text/Text.modules.scss';
 }
 
-.displayHeading {
+.heading {
   composes: noSpacing from '../../Spacing.modules.scss';
 
   @include helvetica-neue-thin-35;
+}
 
+.headingSize {
   font-size: 2.75rem;
   line-height: 1.14; // 48px
 
-  .sup,
-  .sub {
-    font-size: 1.25rem;
-  }
-
   .sup {
+    font-size: 1.25rem;
     top: -1.2em;
   }
 
   .sub {
+    font-size: 1.25rem;
     bottom: -0.5em;
   }
 }
 
-.inverted {
-  composes: displayHeading;
-  color: $color-white;
-}
-
-.default {
-  composes: displayHeading;
-  color: $color-secondary;
-}
-
-.desktop {
+.headingSizeDesktop {
   font-size: 4.5rem;
   line-height: 1.11; // 80px
   letter-spacing: 0.2px;
-}
 
-.invertedDesktop {
-  composes: inverted;
-  composes: desktop;
+  .sup {
+    font-size: 1.25rem;
+    top: -2.2em;
+  }
 }
 
-.defaultDesktop {
-  composes: default;
-  composes: desktop;
+.inverted {
+  color: $color-white;
 }
 
-.invertedDesktop .sup,
-.defaultDesktop .sup {
-  top: -2.2em;
+.default {
+  color: $color-secondary;
 }