♻️ Rename Heading size to level

gilbarbara · Jan 15, 2019 · d175691 · d175691
1 parent 47fc846
commit d175691
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 22 deletions.
diff --git a/src/Heading.jsx b/src/Heading.jsx
@@ -2,18 +2,22 @@ import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
 import { getTheme, isDefined, px, spacer } from './utils/helpers';
-import { baseStyles, headingPropTypes } from './utils/system';
+import { baseStyles } from './utils/system';
 
 import Box, { basePropTypes } from './Box';
 
 const Heading = styled(Box)(props => {
-  const { fontFamily, fontSize, fontWeight, lineHeight, gutterBottom, mb, mt } = props;
+  const { as, fontFamily, fontSize, fontWeight, level, lineHeight, gutterBottom, mb, mt } = props;
   const headingWeight = getTheme(props, 'headingWeight');
-  const headingSize = getTheme(props, 'headingSizes', { key: ['size', 'as'], base: 'h1' });
   const marginTop = gutterBottom ? spacer(3) : 0;
+  let headingSize = getTheme(props, 'headingSizes')[as];
+
+  if (level) {
+    headingSize = getTheme(props, 'headingSizes')[`h${level}`];
+  }
 
   return css`
-    font-size: ${px(fontSize || headingSize)};
+    font-size: ${fontSize || px(headingSize)};
     font-family: ${fontFamily || 'inherit'};
     font-weight: ${fontWeight || headingWeight};
     line-height: ${lineHeight || baseStyles.lineHeight};
@@ -29,11 +33,10 @@ const Heading = styled(Box)(props => {
 Heading.displayName = 'Heading';
 
 Heading.propTypes = {
-  as: headingPropTypes,
+  as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
   children: PropTypes.node.isRequired,
   gutterBottom: PropTypes.bool,
-  /** element size */
-  size: headingPropTypes,
+  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
   ...basePropTypes,
 };
 

diff --git a/src/utils/system.js b/src/utils/system.js
@@ -59,7 +59,6 @@ export const inputTextTypes = [
 ];
 
 export const buttonPropTypes = PropTypes.oneOf(['button', 'submit', 'reset']);
-export const headingPropTypes = PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
 export const sizesPropTypes = PropTypes.oneOf(['sm', 'md', 'lg']);
 export const sizesAllPropTypes = PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']);
 export const textAlignPropTypes = PropTypes.oneOf(['left', 'center', 'right', 'justify']);

diff --git a/stories/Heading.stories.js b/stories/Heading.stories.js
@@ -14,7 +14,7 @@ storiesOf('Heading', module)
     <Example>
       <Heading
         as={select('As', ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], 'h1')}
-        size={select('Size', ['', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'])}
+        level={select('Level', ['', 1, 2, 3, 4, 5, 6])}
         mb={4}
       >
         {text('Children', 'My Super Awesome Title')}
@@ -36,23 +36,23 @@ storiesOf('Heading', module)
   .add('with size', () => (
     <Example>
       <div>
-        <Heading as="h1" size="h6">
-          Heading 1 with h6 size
+        <Heading as="h1" level={6}>
+          Heading 1 with level 6
         </Heading>
-        <Heading as="h2" size="h5">
-          Heading 2 with h5 size
+        <Heading as="h2" level={5}>
+          Heading 2 with level 5
         </Heading>
-        <Heading as="h3" size="h4">
-          Heading 3 with h4 size
+        <Heading as="h3" level={4}>
+          Heading 3 with level 4
         </Heading>
-        <Heading as="h4" size="h3">
-          Heading 4 with h3 size
+        <Heading as="h4" level={3}>
+          Heading 4 with level 3
         </Heading>
-        <Heading as="h5" size="h2">
-          Heading 5 with h2 size
+        <Heading as="h5" level={2}>
+          Heading 5 with level 2
         </Heading>
-        <Heading as="h6" size="h1">
-          Heading 6 with h1 size
+        <Heading as="h6" level={1}>
+          Heading 6 with level 1
         </Heading>
       </div>
     </Example>

diff --git a/test/__snapshots__/index.spec.js.snap b/test/__snapshots__/index.spec.js.snap
@@ -1456,6 +1456,7 @@ Object {
       "height": [Function],
       "justifyContent": [Function],
       "left": [Function],
+      "level": [Function],
       "lineHeight": [Function],
       "m": [Function],
       "maxHeight": [Function],
@@ -1479,7 +1480,6 @@ Object {
       "py": [Function],
       "ratio": [Function],
       "right": [Function],
-      "size": [Function],
       "textAlign": [Function],
       "textTransform": [Function],
       "top": [Function],