Button and IconButton add types --no-verify

Author: clairep94

client/common/Button.tsx

@@ -1,24 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-
+import { Link, LinkProps } from 'react-router-dom';
 import { remSize, prop } from '../theme';
 
 const kinds = {
   primary: 'primary',
-  secondary: 'secondary'
-};
+  secondary:'secondary'
+// eslint-disable-next-line prettier/prettier
+} as const;
+
+type Kind = keyof typeof kinds
 
 const displays = {
   block: 'block',
   inline: 'inline'
-};
+} as const;
+
+type Display = keyof typeof displays
+
+type StyledButtonProps = {
+  kind: Kind,
+  display: Display
+}
 
 // The '&&&' will increase the specificity of the
 // component's CSS so that it overrides the more
 // general global styles
-const StyledButton = styled.button`
+const StyledButton = styled.button<StyledButtonProps>`
   &&& {
     font-weight: bold;
     display: ${({ display }) =>
@@ -108,22 +117,76 @@ const StyledInlineButton = styled.button`
   }
 `;
 
+const buttonTypes = {
+  button: 'button',
+  submit: 'submit'
+} as const;
+
+type ButtonType = keyof typeof buttonTypes
+export type ButtonProps = {
+  /**
+   * The visible part of the button, telling the user what
+   * the action is
+   */
+  children?: React.ReactNode,
+  /**
+    If the button can be activated or not
+  */
+  disabled?: boolean,
+  /**
+   * The display type of the button—inline or block
+   */
+  display?: Display,
+  /**
+   * SVG icon to place after child content
+   */
+  iconAfter?: React.ReactNode,
+  /**
+   * SVG icon to place before child content
+   */
+  iconBefore?: React.ReactNode,
+  /**
+   * If the button content is only an SVG icon
+   */
+  iconOnly?: boolean,
+  /**
+   * The kind of button - determines how it appears visually
+   */
+  kind?: Kind,
+  /**
+   * Specifying an href will use an <a> to link to the URL
+   */
+  href?: string | null,
+  /**
+   * An ARIA Label used for accessibility
+   */
+  'aria-label'?: string | null,
+  /**
+   * Specifying a to URL will use a react-router Link
+   */
+  to?: string | null,
+  /**
+   * If using a button, then type is defines the type of button
+   */
+  type?: ButtonType,
+}
+
 /**
  * A Button performs an primary action
  */
 const Button = ({
-  children,
-  display,
-  href,
-  kind,
-  iconBefore,
-  iconAfter,
-  iconOnly,
-  'aria-label': ariaLabel,
-  to,
-  type,
+  children = null,
+  display = displays.block,
+  href = null,
+  kind = kinds.primary,
+  iconBefore = null,
+  iconAfter = null,
+  iconOnly = false,
+  'aria-label': ariaLabel = null,
+  to = null,
+  type = buttonTypes.button,
   ...props
-}) => {
+}: ButtonProps) => {
   const hasChildren = React.Children.count(children) > 0;
   const content = (
     <>
@@ -132,11 +195,7 @@ const Button = ({
       {iconAfter}
     </>
   );
-  let StyledComponent = StyledButton;
-
-  if (iconOnly) {
-    StyledComponent = StyledInlineButton;
-  }
+  const StyledComponent: React.ElementType<any> = iconOnly ? StyledInlineButton : StyledButton;
 
   if (href) {
     return (
@@ -181,69 +240,7 @@ const Button = ({
   );
 };
 
-Button.defaultProps = {
-  children: null,
-  disabled: false,
-  display: displays.block,
-  iconAfter: null,
-  iconBefore: null,
-  iconOnly: false,
-  kind: kinds.primary,
-  href: null,
-  'aria-label': null,
-  to: null,
-  type: 'button'
-};
-
 Button.kinds = kinds;
 Button.displays = displays;
 
-Button.propTypes = {
-  /**
-   * The visible part of the button, telling the user what
-   * the action is
-   */
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  /**
-    If the button can be activated or not
-  */
-  disabled: PropTypes.bool,
-  /**
-   * The display type of the button—inline or block
-   */
-  display: PropTypes.oneOf(Object.values(displays)),
-  /**
-   * SVG icon to place after child content
-   */
-  iconAfter: PropTypes.element,
-  /**
-   * SVG icon to place before child content
-   */
-  iconBefore: PropTypes.element,
-  /**
-   * If the button content is only an SVG icon
-   */
-  iconOnly: PropTypes.bool,
-  /**
-   * The kind of button - determines how it appears visually
-   */
-  kind: PropTypes.oneOf(Object.values(kinds)),
-  /**
-   * Specifying an href will use an <a> to link to the URL
-   */
-  href: PropTypes.string,
-  /**
-   * An ARIA Label used for accessibility
-   */
-  'aria-label': PropTypes.string,
-  /**
-   * Specifying a to URL will use a react-router Link
-   */
-  to: PropTypes.string,
-  /**
-   * If using a button, then type is defines the type of button
-   */
-  type: PropTypes.oneOf(['button', 'submit'])
-};
-
 export default Button;

client/common/IconButton.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 import styled from 'styled-components';
-import Button from './Button';
+import Button, { ButtonProps } from './Button';
 import { remSize } from '../theme';
 
 const ButtonWrapper = styled(Button)`
@@ -16,7 +16,7 @@ export type IconProps = {
 };
 
 export type IconButtonProps = Omit<
-  React.ComponentProps<typeof Button>,
+  ButtonProps,
   'iconBefore' | 'iconOnly' | 'display' | 'focusable'
 > & {
   icon?: ComponentType<IconProps> | null