type functional components as function components

Author: redallen

packages/react-core/src/components/AlertGroup/AlertGroupInline.tsx

@@ -3,7 +3,12 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AlertGroup/alert-group';
 import { AlertGroupProps } from './AlertGroup';
 
-export const AlertGroupInline = ({ className, children, isToast, ...rest }: AlertGroupProps) => (
+export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
+  className,
+  children,
+  isToast,
+  ...rest
+}: AlertGroupProps) => (
   <ul className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')} {...rest}>
     {React.Children.toArray(children).map((Alert: React.ReactNode, index: number) => (
       <li key={index}>{Alert}</li>

packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx

@@ -39,7 +39,12 @@ export interface BackgroundImageProps extends Omit<React.HTMLProps<HTMLDivElemen
 
 let filterCounter = 0;
 
-export const BackgroundImage = ({ className, src, filter = defaultFilter, ...props }: BackgroundImageProps) => {
+export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
+  className,
+  src,
+  filter = defaultFilter,
+  ...props
+}: BackgroundImageProps) => {
   const getUrlValue = (size: keyof BackgroundImageSrcMap) => {
     if (typeof src === 'string') {
       return `url(${src})`;

packages/react-core/src/components/Page/PageHeader.tsx

@@ -37,7 +37,7 @@ export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
   'aria-label'?: string;
 }
 
-export const PageHeader = ({
+export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   className = '',
   logo = null as React.ReactNode,
   logoProps = null as object,

packages/react-core/src/components/Page/PageSection.tsx

@@ -29,7 +29,7 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   noPadding?: boolean;
 }
 
-export const PageSection = ({
+export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   className = '',
   children,
   variant = 'default',

packages/react-core/src/components/Pagination/ToggleTemplate.tsx

@@ -11,7 +11,7 @@ export interface ToggleTemplateProps {
   itemsTitle?: string;
 }
 
-export const ToggleTemplate = ({
+export const ToggleTemplate: React.FunctionComponent<ToggleTemplateProps> = ({
   firstIndex = 0,
   lastIndex = 0,
   itemCount = 0,

packages/react-core/src/components/Tooltip/TooltipArrow.tsx

@@ -7,6 +7,7 @@ export interface TooltipArrowProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
 }
 
-export const TooltipArrow = ({ className, ...props }: TooltipArrowProps) => (
-  <div className={css(styles.tooltipArrow, className)} {...props} />
-);
+export const TooltipArrow: React.FunctionComponent<TooltipArrowProps> = ({
+  className,
+  ...props
+}: TooltipArrowProps) => <div className={css(styles.tooltipArrow, className)} {...props} />;

packages/react-core/src/components/Tooltip/TooltipContent.tsx

@@ -11,7 +11,12 @@ export interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
   isLeftAligned?: boolean;
 }
 
-export const TooltipContent = ({ className, children, isLeftAligned, ...props }: TooltipContentProps) => (
+export const TooltipContent: React.FunctionComponent<TooltipContentProps> = ({
+  className,
+  children,
+  isLeftAligned,
+  ...props
+}: TooltipContentProps) => (
   <div className={css(styles.tooltipContent, isLeftAligned && styles.modifiers.textAlignLeft, className)} {...props}>
     {children}
   </div>