feat(Gallery): Convert gallery to typescript

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import Gallery from './Gallery';
+import * as React from 'react';
+import { Gallery } from './Gallery';
 import { GutterSize } from '../../styles/gutters';
 import { shallow } from 'enzyme';
 

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/layouts/Gallery/gallery';
+
+export interface GalleryProps extends React.HTMLProps<HTMLDivElement> {
+  /** content rendered inside the Gallery layout */
+  children?: React.ReactNode; 
+  /** additional classes added to the Gallery layout */
+  className?: string; 
+  /** Adds space between children. */
+  gutter?: 'sm' | 'md' | 'lg'; 
+}
+export const Gallery: React.FunctionComponent<GalleryProps> = ({
+  children = null,
+  className = '',
+  gutter = null, 
+  ...props
+}: GalleryProps) => (
+  <div
+    className={css(styles.gallery, gutter && styles.modifiers.gutter, className)}
+    {...props}
+  >
+    {children}
+  </div>
+);

packages/patternfly-4/react-core/src/layouts/Gallery/GalleryItem.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface GalleryItemProps extends React.HTMLProps<HTMLDivElement> {
+  /** content rendered inside the Gallery Item */
+  children?: React.ReactNode; 
+}
+
+export const GalleryItem: React.FunctionComponent<GalleryItemProps> = ({
+  children = null, 
+  ...props
+}: GalleryItemProps) => (
+  <div {...props}>{children}</div>
+); 

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

@@ -3,6 +3,7 @@ title: 'Gallery'
 cssPrefix: 'pf-l-gallery'
 section: 'layouts'
 propComponents: ['Gallery', 'GalleryItem']
+typescript: true
 ---
 
 import { Gallery, GalleryItem } from '@patternfly/react-core';

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

@@ -0,0 +1,2 @@
+export * from './Gallery';
+export * from './GalleryItem';

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

@@ -0,0 +1,14 @@
+describe('Gallery Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#gallery-demo-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/gallery-demo-nav-link');
+  });
+  it('Verify gallery item', () => {
+    cy.get('.pf-c-page__main-section').find('div').first().should('have.class', 'pf-l-gallery');
+  })
+
+  it('Verify gutters', () => {
+    cy.get('.pf-l-gallery').should('have.class', 'pf-m-gutter');
+  });
+}); 

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

@@ -110,6 +110,11 @@ export const Demos: DemoInterface[] = [
     name: 'Form Select Demo',
     componentType: Examples.FormSelectDemo
   },
+  {
+    id: 'gallery-demo', 
+    name: 'Gallery Demo', 
+    componentType: Examples.GalleryDemo
+  },
   {
     id: 'input-group-demo', 
     name: 'Input Group Demo', 

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+
+export class GalleryDemo extends React.Component {
+  render() {
+    return (
+      <Gallery gutter="md">
+        <GalleryItem>Gallery Item</GalleryItem>
+        <GalleryItem>Gallery Item</GalleryItem>
+        <GalleryItem>Gallery Item</GalleryItem>
+        <GalleryItem>Gallery Item</GalleryItem>
+        <GalleryItem>Gallery Item</GalleryItem>
+        <GalleryItem>Gallery Item</GalleryItem>
+      </Gallery>
+    )
+  }
+}

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

@@ -17,9 +17,10 @@ export * from './ClipboardCopyDemo/ClipboardCopyDemo';
 export * from './ContextSelectorDemo/ContextSelectorDemo';
 export * from './DataListDemo/DataListDemo';
 export * from './EmptyStateDemo/EmptyStateDemo';
-export * from './FormDemo/FormDemo';
-export * from './FormSelectDemo/FormSelectDemo';
-export * from './InputGroupDemo/InputGroupDemo';
+export * from './FormDemo/FormDemo'; 
+export * from './FormSelectDemo/FormSelectDemo'; 
+export * from './GalleryDemo/GalleryDemo'; 
+export * from './InputGroupDemo/InputGroupDemo'; 
 export * from './LabelDemo/LabelDemo';
 export * from './ListDemo/ListDemo';
 export * from './LoginPageDemo/LoginPageDemo';