feat(Bullseye): Convert bullseye to typescript

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx

@@ -6,7 +6,7 @@ import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
 import { Backdrop } from '../Backdrop/Backdrop';
-import Bullseye from '../../layouts/Bullseye/Bullseye';
+import { Bullseye } from '../../layouts/Bullseye/Bullseye';
 
 export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the About Modal Box Content.  */

packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap

@@ -2,10 +2,7 @@
 
 exports[`About Modal Container Test isOpen 1`] = `
 <Component>
-  <Bullseye
-    className=""
-    component="div"
-  >
+  <Component>
     <Component
       aria-describedby="ariaDescribedById"
       aria-labelledby="ariaLablledbyId"
@@ -34,7 +31,7 @@ exports[`About Modal Container Test isOpen 1`] = `
         backgroundImageSrc="backgroundImageSrc..."
       />
     </Component>
-  </Bullseye>
+  </Component>
 </Component>
 `;
 

packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap

@@ -16,10 +16,7 @@ exports[`Wizard should match snapshot 1`] = `
       tag="div"
     >
       <Unknown>
-        <Bullseye
-          className=""
-          component="div"
-        >
+        <Unknown>
           <Context.Provider
             value={
               Object {
@@ -135,7 +132,7 @@ exports[`Wizard should match snapshot 1`] = `
               </Unknown>
             </div>
           </Context.Provider>
-        </Bullseye>
+        </Unknown>
       </Unknown>
     </FocusTrap>,
     "containerInfo": <div>

packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.test.js → packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import Bullseye from './Bullseye';
+import * as React from 'react';
+import { Bullseye } from './Bullseye';
 import { shallow } from 'enzyme';
 
 test('renders with PatternFly Core styles', () => {
@@ -25,7 +25,7 @@ test('allows passing in a string as the component', () => {
 });
 
 test('allows passing in a React Component as the component', () => {
-  const Component = () => null;
+  const Component = () => null as any;
   const view = shallow(<Bullseye component={Component} />);
   expect(view.type()).toBe(Component);
 });

packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
+
+export interface BullseyeProps extends React.HTMLProps<HTMLDivElement> {
+   /** content rendered inside the Bullseye layout */
+   children?: React.ReactNode;
+   /** additional classes added to the Bullseye layout */
+   className?: string; 
+   /** Sets the base component to render. defaults to div */
+   component?: React.ReactNode; 
+}
+
+export const Bullseye: React.FunctionComponent<BullseyeProps> =  ({
+  children = null, 
+  className = '', 
+  component = 'div', 
+  ...props
+}: BullseyeProps) => {
+  const Component = component as any; 
+  return (
+  <Component className={css(styles.bullseye, className)} {...props}>
+    {children}
+  </Component>
+)};

packages/patternfly-4/react-core/src/layouts/Bullseye/examples/Bullseye.md

@@ -3,6 +3,7 @@ title: 'Bullseye'
 cssPrefix: 'pf-l-bullseye'
 section: 'layouts'
 propComponents: ['Bullseye']
+typescript: true 
 ---
 
 import { Bullseye } from '@patternfly/react-core';
@@ -16,4 +17,4 @@ import { Bullseye } from '@patternfly/react-core';
 <Bullseye>
   <div>Bullseye ◎ layout</div>
 </Bullseye>
-```
+```

packages/patternfly-4/react-core/src/layouts/Bullseye/index.ts

@@ -0,0 +1 @@
+export * from './Bullseye';

packages/patternfly-4/react-integration/cypress/integration/bullseye.spec.ts

@@ -0,0 +1,15 @@
+describe('Bullseye Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#bullseye-demo-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/bullseye-demo-nav-link') 
+  });
+
+  it('Verify bullseye', () => {
+    cy.get('.pf-l-bullseye').contains('Bullseye ◎ layout')
+  }); 
+
+  it('Verify component prop', () => {
+    cy.get('.pf-c-page__main-section').find('span');
+  }); 
+}); 

packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts

@@ -90,6 +90,11 @@ export const Demos: DemoInterface[] = [
     name: 'Breadcrumb Demo',
     componentType: Examples.BreadcrumbDemo
   },
+  {
+    id: 'bullseye-demo', 
+    name: 'Bullseye Demo', 
+    componentType: Examples.BullseyeDemo
+  },
   {
     id: 'button-demo',
     name: 'Button Demo',

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/BullseyeDemo/BullseyeDemo.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Bullseye } from '@patternfly/react-core';
+
+export class BullseyeDemo extends React.Component {
+  render() {
+    return (
+      <Bullseye component="span">
+        <div>Bullseye ◎ layout</div>
+      </Bullseye>
+    )
+  }
+}

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts

@@ -13,10 +13,11 @@ export * from './BarChartDemo/PurpleBarGroupedDemo'
 export * from './BarChartDemo/ColorBarZoomDemo'
 export * from './BarChartDemo/SimpleBarDemo'
 export * from './BrandDemo/BrandDemo';
-export * from './BreadcrumbDemo/BreadcrumbDemo'; 
-export * from './ButtonDemo/ButtonDemo'; 
-export * from './CardDemo/CardDemo'; 
-export * from './CheckboxDemo/CheckboxDemo'; 
+export * from './BreadcrumbDemo/BreadcrumbDemo';
+export * from './BullseyeDemo/BullseyeDemo'; 
+export * from './ButtonDemo/ButtonDemo';
+export * from './CardDemo/CardDemo';
+export * from './CheckboxDemo/CheckboxDemo';
 export * from './ChipGroupDemo/ChipGroupDemo';
 export * from './ContextSelectorDemo/ContextSelectorDemo';
 export * from './ClipboardCopyDemo/ClipboardCopyDemo';