Merge 474ac46 into 5b81762

src/components/Heading/Heading.js → src/components/Heading/Heading.tsx

@@ -1,15 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import bem from '../../utils/bem';
 import styles from './Heading.scss';
 import { HEADING_SIZES } from '../../constants';
 
+interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Heading text */
+    children: React.ReactElement;
+    /** Heading size (h1, h2, ...) */
+    level?: typeof HEADING_SIZES[number];
+    /** Heading text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+
 const { block } = bem('Heading', styles);
 
-const Heading = props => {
+const Heading: React.FC<Props> = props => {
     const { align, children, level, ...rest } = props;
     const HtmlNodeType = level;
 
+    if (!HtmlNodeType) {
+        return null;
+    }
+
     return (
         <HtmlNodeType {...rest} {...block(props)}>
             {children}
@@ -19,15 +31,6 @@ const Heading = props => {
 
 Heading.displayName = 'Heading';
 
-Heading.propTypes = {
-    /** Heading text alignment */
-    align: PropTypes.oneOf(['left', 'center', 'right']),
-    /** Heading text */
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    /** Heading size (h1, h2, ...) */
-    level: PropTypes.oneOf(HEADING_SIZES),
-};
-
 Heading.defaultProps = {
     align: 'left',
     level: 'h1',

src/components/LoadingSpinner/LoadingSpinner.js → src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -1,14 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import bem from '../../utils/bem';
 import { Text } from '../Text';
 import styles from './LoadingSpinner.scss';
-import { CONTEXTS } from '../../constants';
+import { Context } from '../../constants';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    /** Center the spinner relative to parent element or viewport */
+    centerIn?: 'parent' | 'viewport';
+    /** Loading text */
+    children?: React.ReactNode;
+    /** The spinner context (e.g. brand, primary, bad, good etc. - defaults to brand) */
+    context?: Context;
+    /** Hides the spinner when true */
+    hidden?: boolean;
+    /** Custom spinner size (will affect both width and height) */
+    size?: number;
+}
 
 const { block, elem } = bem('LoadingSpinner', styles);
 
-const LoadingSpinner = props => {
+const LoadingSpinner: React.FC<Props> = props => {
     const { centerIn, children, context, hidden, size, ...rest } = props;
+
     return (
         <div {...rest} {...block(props)} role="status" aria-busy={!hidden} aria-hidden={hidden}>
             <svg
@@ -44,25 +57,9 @@ const LoadingSpinner = props => {
 
 LoadingSpinner.displayName = 'LoadingSpinner';
 
-LoadingSpinner.propTypes = {
-    /** Center the spinner relative to parent element or viewport */
-    centerIn: PropTypes.oneOf(['parent', 'viewport']),
-    /** Loading text */
-    children: PropTypes.node,
-    /** The spinner context (e.g. brand, primary, bad, good etc. - defaults to brand) */
-    context: PropTypes.oneOf(CONTEXTS),
-    /** Hides the spinner when true */
-    hidden: PropTypes.bool,
-    /** Custom spinner size (will affect both width and height) */
-    size: PropTypes.number,
-};
-
 LoadingSpinner.defaultProps = {
-    centerIn: null,
-    children: null,
     context: 'brand',
     hidden: false,
-    size: null,
 };
 
 export default LoadingSpinner;

src/components/LoadingSpinner/__tests__/__snapshots__/LoadingSpinner.spec.js.snap

@@ -4,7 +4,7 @@ exports[`<LoadingSpinner> that renders a circular loading spinner should add cla
 <div
   aria-busy={false}
   aria-hidden={true}
-  className="LoadingSpinner LoadingSpinner--centerIn_viewport LoadingSpinner--hidden"
+  className="LoadingSpinner LoadingSpinner--hidden LoadingSpinner--centerIn_viewport"
   role="status"
 >
   <svg

src/components/LocationAutocomplete/__tests__/__snapshots__/LocationAutocompleteWithGoogleLoader.spec.js.snap

@@ -20,15 +20,13 @@ exports[`<LocationAutocompleteWithGoogleLoader/> that loads google api and rende
         centerIn="parent"
         context="brand"
         hidden={false}
-        size={null}
       />
     }
   >
     <LoadingSpinner
       centerIn="parent"
       context="brand"
       hidden={false}
-      size={null}
     >
       <div
         aria-busy={true}

src/components/LocationSelector/LocationSelectorDialogWithGoogleLoader/__tests__/__snapshots__/LocationSelectorDialogWithGoogleLoader.spec.js.snap

@@ -38,15 +38,13 @@ exports[`<LocationSelectorDialogWithGoogleLoader/> that loads google api and ren
         centerIn="parent"
         context="brand"
         hidden={false}
-        size={null}
       />
     }
   >
     <LoadingSpinner
       centerIn="parent"
       context="brand"
       hidden={false}
-      size={null}
     >
       <div
         aria-busy={true}

src/components/LocationSelector/__tests__/__snapshots__/LocationSelector.spec.js.snap

@@ -355,15 +355,13 @@ exports[`LocationSelector component should render LocationSelector properly when
                         centerIn="parent"
                         context="brand"
                         hidden={false}
-                        size={null}
                       />
                     }
                   >
                     <LoadingSpinner
                       centerIn="parent"
                       context="brand"
                       hidden={false}
-                      size={null}
                     >
                       <div
                         aria-busy={true}

src/components/Map/__tests__/__snapshots__/MapWithGoogleLoader.spec.js.snap

@@ -12,15 +12,13 @@ exports[`<MapWithGoogleLoader/> that loads google api and renders a Map should r
         centerIn="parent"
         context="brand"
         hidden={false}
-        size={null}
       />
     }
   >
     <LoadingSpinner
       centerIn="parent"
       context="brand"
       hidden={false}
-      size={null}
     >
       <div
         aria-busy={true}

src/components/Text/Text.js → src/components/Text/Text.tsx

@@ -1,12 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import bem from '../../utils/bem';
 import styles from './Text.scss';
-import { SIZES, CONTEXTS } from '../../constants';
+import { Size, Context } from '../../constants';
+
+interface Props extends React.HTMLAttributes<HTMLElement> {
+    /** Text content */
+    children: React.ReactElement;
+    /** Text should be rendered inline */
+    inline?: boolean;
+    /** The context of the text, effecting its color (e.g. brand, primary, bad, good etc. 'muted' added as special context here) */
+    context?: Context | 'muted' | 'default';
+    /** Custom text sizes */
+    size?: Size;
+}
 
 const { block } = bem('Text', styles);
 
-const Text = props => {
+const Text: React.FC<Props> = props => {
     const { children, context, inline, size, ...rest } = props;
     const HtmlNodeType = inline ? 'span' : 'p';
 
@@ -19,17 +29,6 @@ const Text = props => {
 
 Text.displayName = 'Text';
 
-Text.propTypes = {
-    /** Text content */
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    /** Text should be rendered inline */
-    inline: PropTypes.bool,
-    /** The context of the text, effecting its color (e.g. brand, primary, bad, good etc. 'muted' added as special context here) */
-    context: PropTypes.oneOf([...CONTEXTS, 'muted', 'default']),
-    /** Custom text sizes */
-    size: PropTypes.oneOf(SIZES),
-};
-
 Text.defaultProps = {
     inline: false,
     context: 'default',