feat(brand): Converted brand component to typescript (#1918)

* git mv files

* convert js to tsx

* Fix linting error

packages/patternfly-4/react-core/src/components/Brand/Brand.md

@@ -1,6 +1,7 @@
 ---
 title: 'Brand'
 cssPrefix: null
+typescript: true
 ---
 ## Simple brand
 

packages/patternfly-4/react-core/src/components/Brand/Brand.test.js → packages/patternfly-4/react-core/src/components/Brand/Brand.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import { shallow } from 'enzyme';
-import Brand from './Brand';
+import { Brand } from './Brand';
 
 test('simple brand', () => {
   const view = shallow(<Brand alt="brand" />);

packages/patternfly-4/react-core/src/components/Brand/Brand.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+
+export interface BrandProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+  /** Additional classes added to the Brand. */
+  className?: string; 
+  /** Attribute that specifies the URL of the image for the Brand. */
+  src?: string;
+  /** Attribute that specifies the alt text of the image for the Brand. */
+  alt: string;
+}
+
+export const Brand: React.FunctionComponent<BrandProps> = ({
+  className = '', 
+  src = '', 
+  alt,
+  ...props
+}) => (
+  /** the brand component currently contains no styling the 'pf-c-brand' string will be used for the className */
+  <img {...props} className={css('pf-c-brand', className)} src={src} alt={alt} />
+);

packages/patternfly-4/react-core/src/components/Brand/index.ts

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

packages/patternfly-4/react-core/src/components/LoginPage/__snapshots__/LoginPage.test.js.snap

@@ -29,9 +29,8 @@ exports[`check loginpage example against snapshot 1`] = `
         className=""
         headerBrand={
           <React.Fragment>
-            <Brand
+            <Unknown
               alt="Pf-logo"
-              className=""
               src="Brand src"
             />
           </React.Fragment>

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

@@ -0,0 +1,15 @@
+describe('Brand Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#brand-demo-nav-item-link').click(); 
+    cy.url().should('eq', 'http://localhost:3000/brand-demo-nav-link');
+  }); 
+
+  it('Verify has src', () => {
+    cy.get('img').should('have.attr', 'src')
+  });
+
+  it('Verify default alt', () => {
+    cy.get('img').should('have.attr', 'alt', 'Patternfly Logo')
+  }); 
+})

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

@@ -21,8 +21,13 @@ export const Demos: DemoInterface[] = [
     componentType: Examples.AvatarDemo
   },
   {
-    id: 'label-demo',
-    name: 'Label Demo',
+    id: 'brand-demo', 
+    name: 'Brand Demo', 
+    componentType: Examples.BrandDemo
+  },
+  {
+    id: 'label-demo', 
+    name: 'Label Demo', 
     componentType: Examples.LabelDemo
   },
   {

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Brand } from '@patternfly/react-core';
+import pfLogo from './images/pfLogo.svg';
+
+export class BrandDemo extends React.Component {
+  render() {
+    return (
+      <Brand src={pfLogo} alt="Patternfly Logo" />
+    );
+  }
+}
+
+

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

@@ -1,6 +1,7 @@
 export * from './AlertDemo/AlertDemo';
 export * from './AvatarDemo/AvatarDemo';
-export * from './LabelDemo/LabelDemo';
+export * from './BrandDemo/BrandDemo'; 
+export * from './LabelDemo/LabelDemo'; 
 export * from './NavDemo/NavDemo';
 export * from './PopoverDemo/PopoverDemo'
 export * from './TabsDemo/TabsDemo';