Make font sizes responsive (#235)

* Add responsive font sizes for Text

* Use knobs for Heading, SubHeading and Text

* Update snapshots

* Add responsive styles for Text and Heading

* Change responsiveMap name to mobileSizeMap

Author: connor-baer

src/components/Blockquote/__snapshots__/Blockquote.spec.js.snap

@@ -11,6 +11,13 @@ exports[`Blockquote should render with default styles 1`] = `
   border-left: 2px solid #3388FF;
 }
 
+@media (min-width:480px) {
+  .circuit-1 {
+    font-size: 13px;
+    line-height: 20px;
+  }
+}
+
 <blockquote
   className="circuit-0 circuit-1 circuit-2"
 >
@@ -26,15 +33,22 @@ exports[`Blockquote should render with giga styles 1`] = `
 .circuit-1 {
   font-weight: 400;
   margin-bottom: 16px;
-  font-size: 18px;
-  line-height: 28px;
+  font-size: 15px;
+  line-height: 24px;
   font-style: italic;
   padding-left: 12px;
   border-left: 2px solid #3388FF;
   padding-left: 16px;
   border-left: 3px solid #3388FF;
 }
 
+@media (min-width:480px) {
+  .circuit-1 {
+    font-size: 18px;
+    line-height: 28px;
+  }
+}
+
 <blockquote
   className="circuit-0 circuit-1 circuit-2"
 >
@@ -57,6 +71,13 @@ exports[`Blockquote should render with mega styles 1`] = `
   border-left: 2px solid #3388FF;
 }
 
+@media (min-width:480px) {
+  .circuit-1 {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+
 <blockquote
   className="circuit-0 circuit-1 circuit-2"
 >

src/components/Button/components/PlainButton/__snapshots__/PlainButton.spec.js.snap

@@ -4,8 +4,8 @@ exports[`PlainButton should have giga link styles 1`] = `
 .circuit-0 {
   font-weight: 400;
   margin-bottom: 16px;
-  font-size: 18px;
-  line-height: 28px;
+  font-size: 15px;
+  line-height: 24px;
   margin-bottom: 0;
   box-shadow: none;
   border: none;
@@ -17,6 +17,13 @@ exports[`PlainButton should have giga link styles 1`] = `
   outline: none;
 }
 
+@media (min-width:480px) {
+  .circuit-0 {
+    font-size: 18px;
+    line-height: 28px;
+  }
+}
+
 .circuit-0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -53,6 +60,13 @@ exports[`PlainButton should have kilo link styles 1`] = `
   outline: none;
 }
 
+@media (min-width:480px) {
+  .circuit-0 {
+    font-size: 13px;
+    line-height: 20px;
+  }
+}
+
 .circuit-0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -89,6 +103,13 @@ exports[`PlainButton should have mega link styles 1`] = `
   outline: none;
 }
 
+@media (min-width:480px) {
+  .circuit-0 {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+
 .circuit-0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -126,6 +147,13 @@ exports[`PlainButton should have primary styles 1`] = `
   color: #3388FF;
 }
 
+@media (min-width:480px) {
+  .circuit-0 {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+
 .circuit-0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -166,6 +194,13 @@ exports[`PlainButton should render with default styles 1`] = `
   outline: none;
 }
 
+@media (min-width:480px) {
+  .circuit-0 {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+
 .circuit-0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -202,6 +237,13 @@ exports[`PlainButton should render with href 1`] = `
   outline: none;
 }
 
+@media (min-width:480px) {
+  .circuit-0 {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+
 .circuit-0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;

src/components/Heading/Heading.js

@@ -8,17 +8,33 @@ import { sizes } from '../../styles/constants';
 
 const { KILO, MEGA, GIGA, TERA, PETA, EXA, ZETTA } = sizes;
 
+const mobileSizeMap = {
+  [KILO]: KILO,
+  [MEGA]: MEGA,
+  [GIGA]: MEGA,
+  [TERA]: GIGA,
+  [PETA]: TERA,
+  [EXA]: PETA,
+  [ZETTA]: PETA
+};
+
 const baseStyles = ({ theme }) => css`
   label: heading;
   font-weight: ${theme.fontWeight.bold};
   margin-bottom: ${theme.spacings.giga};
 `;
 
-const sizeStyles = ({ theme, size }) => css`
-  label: heading--${size};
-  font-size: ${theme.typography.headings[size].fontSize};
-  line-height: ${theme.typography.headings[size].lineHeight};
-`;
+const sizeStyles = ({ theme, size }) =>
+  css`
+    label: heading--${size};
+    font-size: ${theme.typography.headings[mobileSizeMap[size]].fontSize};
+    line-height: ${theme.typography.headings[mobileSizeMap[size]].lineHeight};
+
+    ${theme.mq.kilo`
+      font-size: ${theme.typography.headings[size].fontSize};
+      line-height: ${theme.typography.headings[size].lineHeight};
+    `};
+  `;
 
 const noMarginStyles = ({ noMargin }) =>
   noMargin &&
@@ -34,8 +50,7 @@ const HeadingElement = styled(HtmlElement)`
 `;
 
 /**
- * A heading flexible heading component capable of rendering using
- * different HTML tags.
+ * A flexible heading component capable of rendering using any HTML heading tag.
  */
 const Heading = props => (
   <HeadingElement {...props} blacklist={{ size: true, noMargin: true }} />

src/components/Heading/Heading.story.js

@@ -1,66 +1,35 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
+import { select, boolean, text } from '@storybook/addon-knobs/react';
+
 import { GROUPS } from '../../../.storybook/hierarchySeparators';
 
 import withTests from '../../util/withTests';
 import Heading from '.';
 
+const elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const sizes = [
+  Heading.ZETTA,
+  Heading.EXA,
+  Heading.PETA,
+  Heading.TERA,
+  Heading.GIGA,
+  Heading.MEGA,
+  Heading.KILO
+];
+
 storiesOf(`${GROUPS.TYPOGRAPHY}|Heading`, module)
   .addDecorator(withTests('Heading'))
   .add(
-    'Zetta Heading with h1',
-    withInfo()(() => (
-      <Heading element="h1" size={Heading.ZETTA}>
-        This is a zetta heading with an h1 element
-      </Heading>
-    ))
-  )
-  .add(
-    'Exa Heading with h2',
-    withInfo()(() => (
-      <Heading element="h2" size={Heading.EXA}>
-        This is an exa heading with an h2 element
-      </Heading>
-    ))
-  )
-  .add(
-    'Peta Heading with h3',
-    withInfo()(() => (
-      <Heading element="h3" size={Heading.PETA}>
-        This is a peta heading with an h3 element
-      </Heading>
-    ))
-  )
-  .add(
-    'Tera Heading with h4',
-    withInfo()(() => (
-      <Heading element="h4" size={Heading.TERA}>
-        This is a tera heading with an h4 element
-      </Heading>
-    ))
-  )
-  .add(
-    'Giga Heading with h5',
-    withInfo()(() => (
-      <Heading element="h5" size={Heading.GIGA}>
-        This is a giga heading with an h5 element
-      </Heading>
-    ))
-  )
-  .add(
-    'Mega Heading with h6',
-    withInfo()(() => (
-      <Heading element="h6" size={Heading.MEGA}>
-        This is a mega heading with an h6 element
-      </Heading>
-    ))
-  )
-  .add(
-    'Kilo Heading with h6',
+    'Heading',
     withInfo()(() => (
-      <Heading element="h6" size={Heading.KILO}>
-        This is a kilo heading with an h6 element
+      <Heading
+        element={select('Element', elements, elements[0])}
+        size={select('Size', sizes, sizes[0])}
+        noMargin={boolean('No margin', false)}
+      >
+        {text('Text', 'This is a heading')}
       </Heading>
     ))
   );