Rename IconText prop spacing to gap (#42)

src/components/button/__tests__/__snapshots__/button.test.js.snap

@@ -83,8 +83,8 @@ exports[`Link with outline and icon text, extra padding renders as expected 1`]
   onClick={[MockFunction]}
 >
   <IconText
+    gap="small"
     iconBefore="bug"
-    spacing="small"
   >
     Go do things
   </IconText>

src/components/icon-text/__tests__/__snapshots__/icon-text.test.js.snap

@@ -76,7 +76,7 @@ exports[`icons on both sides, including a non-string one renders as expected 1`]
 </span>
 `;
 
-exports[`large spacing renders as expected 1`] = `
+exports[`large gap renders as expected 1`] = `
 <span
   className="flex-parent flex-parent--center-cross"
 >

src/components/icon-text/__tests__/icon-text-test-cases.js

@@ -23,12 +23,12 @@ testCases.iconAfter = {
 };
 
 testCases.largeSpacing = {
-  description: 'large spacing',
+  description: 'large gap',
   component: IconText,
   props: {
     children: 'Done',
     iconBefore: 'check',
-    spacing: 'large'
+    gap: 'large'
   }
 };
 

src/components/icon-text/icon-text.js

@@ -17,7 +17,7 @@ class IconText extends React.Component {
 
   render() {
     const { props } = this;
-    const spacer = props.spacing === 'small' ? '3' : '6';
+    const spacer = props.gap === 'small' ? '3' : '6';
 
     const before = !props.iconBefore ? null : (
       <span className={`flex-child mr${spacer}`}>
@@ -49,9 +49,9 @@ IconText.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * The spacing size: `"small"` or `"large"`.
+   * The size of the gap between the text and the icon: `"small"` or `"large"`.
    */
-  spacing: PropTypes.oneOf(['small', 'large']),
+  gap: PropTypes.oneOf(['small', 'large']),
   /**
    * An icon to place before the text. If the value is a string, it should name an
    * Assembly icon. If you bring your own SVG or want finer-grained control over
@@ -65,7 +65,7 @@ IconText.propTypes = {
 };
 
 IconText.defaultProps = {
-  spacing: 'small'
+  gap: 'small'
 };
 
 export default IconText;