allow for SVG imports in react-core for TSX examples

Author: Jeff Puzzo

packages/react-core/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

packages/react-core/src/components/Banner/examples/BannerBasic.tsx

@@ -1,16 +1,12 @@
 import React from 'react';
-import { Banner } from '@patternfly/react-core';
+import { Banner, Flex } from '@patternfly/react-core';
 
 export const BannerBasic: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Flex direction={{ default: 'column' }}>
     <Banner>Default banner</Banner>
-    <br />
     <Banner variant="info">Info banner</Banner>
-    <br />
     <Banner variant="danger">Danger banner</Banner>
-    <br />
     <Banner variant="success">Success banner</Banner>
-    <br />
     <Banner variant="warning">Warning banner</Banner>
-  </React.Fragment>
+  </Flex>
 );

packages/react-core/src/components/Brand/examples/Brand.md

@@ -5,6 +5,8 @@ cssPrefix: null
 propComponents: ['Brand']
 ---
 
+import pfLogo from './pfLogo.svg';
+
 ## Examples
 
 ### Basic

packages/react-core/src/components/Brand/examples/BrandBasic.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
 import { Brand } from '@patternfly/react-core';
+import pfLogo from './pfLogo.svg';
 
-export const BrandBasic: React.FunctionComponent = () => <Brand src="./pfLogo.svg" alt="Patternfly Logo" />;
+export const BrandBasic: React.FunctionComponent = () => <Brand src={pfLogo} alt="Patternfly Logo" />;

packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
-const dropdownItems = [
+const dropdownItems: JSX.Element[] = [
   <DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
     Edit
   </DropdownItem>,
@@ -22,13 +22,13 @@ const dropdownItems = [
 ];
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const badgeToggleRef = React.useRef<HTMLButtonElement>();
 
-  const onToggle = React.useCallback(isOpen => setIsOpen(isOpen), []);
+  const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []);
 
   const onSelect = React.useCallback(() => {
-    setIsOpen(prevIsOpen => !prevIsOpen);
+    setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
     badgeToggleRef.current.focus();
   }, []);