playbook_ui 13.13.0.pre.alpha.play10221678 → 13.13.0.pre.alpha.play10821726

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 930c0e3d2587afad1b9ea3d50a4a80e37c9c2772ef0a9b12eb6499831bbbcbb5
-  data.tar.gz: 9d8fe14193b9826133a1b47709975b5165aa54b44437feae9aa5eaa244879cfe
+  metadata.gz: d6eb8ecd8cee3df0a5531a329ecc8bcd69c6ea6a1393e1f45e68be600726cc2b
+  data.tar.gz: 4cb659c7bcfe3a979791575e132c32e18e3c7b353e97d861f3b970fbd5739fc1
 SHA512:
-  metadata.gz: cd5afb9fe7f8b9b3fcf226049a50ce83df67baddceb0bd22ccbbea5d8db2ec661390be9f7b5e9229da84fcddd4dba909167728b849a9d91215343577b8f9a16e
-  data.tar.gz: 271d69aee52700ec882a56a7f48fe02b6cac9b2d83a3ea3e0c465b75a6dfc501356c0ee080a3f6fb2a178f1697ee05e38c6737c393a0ea73f414037902a9addf
+  metadata.gz: c6b0b7281b0b56f5a06ea06af7fa570895b9287719cd30578d5540c046d2c89bcf02630c7d5ce9b9506da4a8e7bfce070f81fdb3a4ddc21e9bb4c50d0cee0144
+  data.tar.gz: a6e72187e1e687e6b5e1430706058d7e26b3032f5abfd98cefe9fba8cda94fd3e54f06761d94fb6c4cdb8181c5d845bee88e2da3cdaeb22bfb7c6d1c066a7b48

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -12,7 +12,7 @@ export type AvatarProps = {
   className?: string,
   data?: {[key: string]: string},
   dark?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -32,7 +32,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     className,
     data = {},
     htmlOptions = {},
-    name = null,
+    name = undefined,
     id = '',
     imageAlt = '',
     imageUrl,
@@ -40,8 +40,8 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     status = null,
     dark = false,
   } = props
-  const dataProps: {[key: string]: any} = buildDataProps(data)
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_avatar_kit', `size_${size}`),
@@ -50,7 +50,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
   )
 
   const initials = name && firstTwoInitials(name)
-  dataProps['data-initials'] = initials
+  dataProps['data-initials'] = (initials as string)
 
   const [error, setError] = useState(false)
   const handleError = () => setError(true)

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -19,8 +19,8 @@ type AvatarActionButtonProps = {
   linkAriaLabel?: string,
   className?: string,
   dark?: boolean,
-  data?: Object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -31,7 +31,7 @@ type AvatarActionButtonProps = {
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
 }
 
-const AvatarActionButton = (props: AvatarActionButtonProps) => {
+const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
   const {
     action = 'add',
     aria = {},

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -23,7 +23,7 @@ type BackgroundProps = {
   className?: string,
   customColor?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
@@ -63,7 +63,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
   return prop?.default || undefined;
 };
 
-const Background = (props: BackgroundProps) => {
+const Background = (props: BackgroundProps): React.ReactElement => {
   const {
     alt = '',
     aria = {},
@@ -144,13 +144,13 @@ const Background = (props: BackgroundProps) => {
   
   return (
     <Tag
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      alt={alt}
-      className={classes}
-      id={id}
-      style={backgroundStyle}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        alt={alt}
+        className={classes}
+        id={id}
+        style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -19,7 +19,7 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
@@ -27,7 +27,7 @@ type BadgeProps = {
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
 } & GlobalProps
-const Badge = (props: BadgeProps) => {
+const Badge = (props: BadgeProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -19,9 +19,9 @@ type BarGraphProps = {
   yAxisMax: number;
   chartData: { name: string; data: number[] }[];
   className?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
-  id: any;
-  pointStart: number | any;
+  id: string;
+  pointStart: number;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   subTitle?: string;
   title: string;
   type?: string;

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -15,7 +15,7 @@ type BodyProps = {
   data?: {[key: string]: string},
   highlightedText?: string[],
   highlighting?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
@@ -43,8 +43,8 @@ const Body = (props: BodyProps): React.ReactElement => {
     variant = null,
   } = props
 
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
-  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
   const isTruncated = truncate ? `truncate_${truncate}` : ''
   const classes = classnames(
@@ -52,8 +52,7 @@ const Body = (props: BodyProps): React.ReactElement => {
     globalProps(props),
     className
   )
-  const Tag: React.ReactElement | any = `${tag}`
-
+  const Tag: keyof JSX.IntrinsicElements = `${tag}`
 
   return (
     <Tag

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx

@@ -13,15 +13,14 @@ import {
 type BreadCrumbItemProps = {
   aria?: {[key: string]: string},
   className?: string,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   component?: "a" | "span",
   [x:string]: any;
 }
 
-
-const BreadCrumbItem = (props: BreadCrumbItemProps) => {
+const BreadCrumbItem = (props: BreadCrumbItemProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx

@@ -12,13 +12,13 @@ import {
 type BreadCrumbsProps = {
   aria?: {[key: string]: string},
   className?: string,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
   children?: React.ReactChild[] | React.ReactNode,
 }
-const BreadCrumbs = (props: BreadCrumbsProps) => {
+const BreadCrumbs = (props: BreadCrumbsProps): React.ReactElement => {
   const {
     aria = { label: 'Breadcrumb Navigation' },
     className,

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -21,7 +21,7 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   highlight?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -66,7 +66,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
   return className
 }
 
-const Button = (props: ButtonPropTypes) => {
+const Button = (props: ButtonPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,
@@ -150,16 +150,16 @@ const Button = (props: ButtonPropTypes) => {
     if (link) {
       return (
         <a
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={css}
-          href={link}
-          id={id}
-          rel={target !== "child" ? "noreferrer" : null}
-          role="link"
-          tabIndex={tabIndex}
-          target={getTargetAttribute()}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={css}
+            href={link}
+            id={id}
+            rel={target !== "child" ? "noreferrer" : null}
+            role="link"
+            tabIndex={tabIndex}
+            target={getTargetAttribute()}
         >
           {ifLoading()}
         </a>
@@ -167,24 +167,27 @@ const Button = (props: ButtonPropTypes) => {
     } else if (variant === "reaction") {
       return (
         <button
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={css}
-          disabled={disabled}
-          form={form}
-          id={id}
-          onClick={onClick}
-          role="button"
-          tabIndex={tabIndex}
-          type={htmlType}
-          value={value}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={css}
+            disabled={disabled}
+            form={form}
+            id={id}
+            onClick={onClick}
+            role="button"
+            tabIndex={tabIndex}
+            type={htmlType}
+            value={value}
         >
           {icon && isValidEmoji(icon) && (
             <Flex align='center'>
               <Icon icon={icon} />
               {count && (
-                <Caption paddingLeft="xxs" size="xs">
+                <Caption 
+                    paddingLeft="xxs"
+                    size="xs"
+                >
                   {count}
                 </Caption>
               )}
@@ -203,18 +206,18 @@ const Button = (props: ButtonPropTypes) => {
     } else {
       return (
         <button
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={css}
-          disabled={disabled}
-          form={form}
-          id={id}
-          onClick={onClick}
-          role="button"
-          tabIndex={tabIndex}
-          type={htmlType}
-          value={value}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={css}
+            disabled={disabled}
+            form={form}
+            id={id}
+            onClick={onClick}
+            role="button"
+            tabIndex={tabIndex}
+            type={htmlType}
+            value={value}
         >
           {ifLoading()}
         </button>

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx

@@ -12,8 +12,8 @@ type ButtonToolbarProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   connected?: boolean,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   onClick?: React.MouseEventHandler<HTMLSpanElement>,
   orientation?: "horizontal" | "vertical",
@@ -21,7 +21,7 @@ type ButtonToolbarProps = {
  variant?: "primary" | "secondary",
 }
 
-const ButtonToolbar  = (props: ButtonToolbarProps) => {
+const ButtonToolbar  = (props: ButtonToolbarProps): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -9,7 +9,7 @@ type CaptionProps = {
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -16,7 +16,7 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   highlight?: {
     position?: "side" | "top",
     color?: string,
@@ -69,7 +69,7 @@ const Body = (props: CardBodyProps) => {
   )
 }
 
-const Card = (props: CardPropTypes) => {
+const Card = (props: CardPropTypes): React.ReactElement => {
   const {
     aria = {},
     background = 'none',

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -57,7 +57,7 @@ const CardBackground = (props) => {
           background="product_1_background"
           marginBottom="sm"
           {...props}
-        >
+      >
         <Body
             dark
             text="Product 1 Background"
@@ -69,11 +69,12 @@ const CardBackground = (props) => {
       <Card 
           background="product_7_highlight" 
           marginBottom="sm"
-          {...props} >
+          {...props}
+      >
         <Body 
             dark
-            text="Product 7 Highlight"  
-          />
+            text="Product 7 Highlight"
+        />
       </Card>
 
       

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -13,7 +13,7 @@ type CheckboxProps = {
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   indeterminate?: boolean,
   name?: string,
@@ -23,7 +23,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = (props: CheckboxProps): JSX.Element => {
+const Checkbox = (props: CheckboxProps): React.ReactElement => {
   const {
     aria = {},
     checked = false,
@@ -73,7 +73,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
-      />)
+    />)
   }
 
   return (

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -18,12 +18,12 @@ type CircleChartProps = {
   children?: Node;
   className?: string;
   colors?: string[];
-  dark?: Boolean;
-  data?: Object;
+  dark?: boolean;
+  data?: {[key: string]: string},
   dataLabelHtml?: string;
   dataLabels?: boolean;
   height?: string;
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   innerSize?: "sm" | "md" | "lg" | "none";
   legend?: boolean;
@@ -180,29 +180,29 @@ const CircleChart = ({
       {children ? (
         <div id={`wrapper-circle-chart-${id}`}>
           <HighchartsReact
-            containerProps={{
+              containerProps={{
               className: classnames("pb_circle_chart", globalProps(props)),
               id: id,
               ...ariaProps,
               ...dataProps,
               ...htmlProps,
             }}
-            highcharts={Highcharts}
-            options={options}
+              highcharts={Highcharts}
+              options={options}
           />
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
         <HighchartsReact
-          containerProps={{
+            containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
             id: id,
             ...ariaProps,
             ...dataProps,
             ...htmlProps,
           }}
-          highcharts={Highcharts}
-          options={options}
+            highcharts={Highcharts}
+            options={options}
         />
       )}
     </>

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -13,7 +13,7 @@ type CircleIconButtonProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   icon: string,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -12,22 +12,20 @@ import { IconSizes } from "../pb_icon/_icon"
 
 
 type CollapsibleProps = {
-  children?: JSX.Element | [] | any,
+  children?: React.ReactElement | [] | any,
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
-  data?: object,
+  data?: {[key: string]: string},
   icon?: string | string[],
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-
-
 const Collapsible = ({
   aria = {},
   className,
@@ -42,14 +40,14 @@ const Collapsible = ({
   onClick,
   id,
   ...props
-}: CollapsibleProps) => {
+}: CollapsibleProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
+  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
 
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')

data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts

@@ -1,4 +1,4 @@
-export const showElement = (elem:any) => {
+export const showElement = (elem: HTMLElement) => {
   elem.style.display = 'block';
   const height = elem.scrollHeight + 'px'; // Get its height
   elem.style.height = height; // Update the max-height
@@ -11,7 +11,7 @@ export const showElement = (elem:any) => {
   }, 300);
 };
 
-export const hideElement = (elem:any) => {
+export const hideElement = (elem: HTMLElement) => {
   elem.style.height = elem.scrollHeight + 'px';
 
   window.setTimeout(() => {

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps) => {
+}: CollapsibleContentProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)
@@ -33,9 +33,10 @@ const CollapsibleContent = ({
   }, [context.collapsed]);
 
   return (
-    <div ref={contentRef}
-      data-collapsible-content="true" 
-      className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
+    <div className={classnames(contentCSS, contentSpacing, "toggle-content", className)}
+        data-collapsible-content="true" 
+        ref={contentRef}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -56,7 +56,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     return icon
   }
 
-  const handleIconClick = (e:any) => {
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
     if (onIconClick) {
     e.stopPropagation();
     onIconClick()
@@ -67,21 +67,25 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     <>
       {collapsed ? (
         <div
-          className="icon_wrapper"
-          key={icon ? showIcon(icon)[0] : "chevron-down"}
-          style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
         >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
+          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
         </div>
       ) : (
         <div
-          className="icon_wrapper"
-          key={icon ? showIcon(icon)[1] : "chevron-up"}
-          style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
         >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
+          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
         </div>
       )}
     </>
@@ -118,9 +122,9 @@ const CollapsibleMain = ({
           <FlexItem>
             <ToggleIcon
                 collapsed={collapsed as () => void}
+                icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}
                 iconSize={iconSize as IconSizes}
-                icon={icon as string[] | string}
                 onIconClick={onIconClick}
             />
             </FlexItem>

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -50,12 +50,12 @@ type ContactProps = {
   contactDetail?: string,
   contactType?: string,
   contactValue: string,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-const Contact = (props: ContactProps) => {
+const Contact = (props: ContactProps): React.ReactElement => {
   const {
     aria = {},
     className,