fix(CatalogTileView): Support tiles without categories. (patternfly#977)

redallen · Nov 29, 2018 · 134af90 · 134af90
1 parent 9790a10
commit 134af90
Show file tree

Hide file tree

Showing 9 changed files with 816 additions and 17 deletions.
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less b/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less
@@ -81,6 +81,7 @@
     flex: 1;
     margin-top: 15px;
     overflow: hidden;
+    position: relative;
 
     &::after {
       background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
@@ -95,6 +96,11 @@
   }
 }
 
+.catalog-tile-view-pf-no-categories {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .catalog-tile-view-pf-category {
   margin: 10px 0 15px;
 }
@@ -121,6 +127,5 @@
 .catalog-tile-view-pf-category-body {
   display: flex;
   flex-wrap: wrap;
-  overflow: hidden;
   margin-top: 10px;
 }
diff --git a/...ternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss b/...ternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss
@@ -96,6 +96,11 @@
   }
 }
 
+.catalog-tile-view-pf-no-categories {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .catalog-tile-view-pf-category {
   margin: 10px 0 15px;
 }

diff --git a/...atternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.js b/...atternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.js
@@ -4,8 +4,12 @@ import classNames from 'classnames';
 
 import CatalogTileViewCategory from './CatalogTileViewCategory';
 
-const CatalogTileView = ({ children, className, ...props }) => {
-  const classes = classNames('catalog-tile-view-pf', className);
+const CatalogTileView = ({ children, className, useCategories, ...props }) => {
+  const classes = classNames(
+    'catalog-tile-view-pf',
+    { 'catalog-tile-view-pf-no-categories': !useCategories },
+    className
+  );
 
   return (
     <div className={classes} {...props}>
@@ -18,11 +22,14 @@ CatalogTileView.propTypes = {
   /** Children */
   children: PropTypes.node,
   /** Additional css classes */
-  className: PropTypes.string
+  className: PropTypes.string,
+  /** Flag to use categories in the view */
+  useCategories: PropTypes.bool
 };
 
 CatalogTileView.defaultProps = {
   children: null,
+  useCategories: true,
   className: ''
 };
 

diff --git a/...y-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.stories.js b/...y-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.stories.js
@@ -7,6 +7,10 @@ import { boolean, withKnobs } from '@storybook/addon-knobs';
 
 import { name } from '../../../package.json';
 import { MockCatalogTileViewExample, MockCatalogTileViewExampleSource } from './__mocks__/mockCatalogTileViewExample';
+import {
+  MockCatalogTileViewNoCategoriesExample,
+  MockCatalogTileViewNoCategoriesExampleSource
+} from './__mocks__/mockCatalogTileViewNoCategoriesExample';
 
 import { CatalogTileView, CatalogTileViewCategory } from './index';
 import { CatalogTile, CatalogTileBadge } from '../CatalogTile';
@@ -41,3 +45,25 @@ stories.add(
     return <MockCatalogTileViewExample emptyState={emptyState} />;
   })
 );
+
+const noCategoryStories = storiesOf(`${storybookPackageName(name)}/Catalog Components/Catalog Tile View`, module);
+
+noCategoryStories.addDecorator(
+  defaultTemplate({
+    title: 'Catalog Tile View'
+  })
+);
+noCategoryStories.add(
+  'CatalogTileView w/o Categories',
+  withInfo({
+    source: false,
+    propTables: [CatalogTileView, CatalogTile, CatalogTileBadge],
+    propTablesExclude: [MockCatalogTileViewNoCategoriesExample],
+    text: (
+      <div>
+        <h1>Story Source</h1>
+        <pre>{MockCatalogTileViewNoCategoriesExampleSource}</pre>
+      </div>
+    )
+  })(() => <MockCatalogTileViewNoCategoriesExample />)
+);
diff --git a/...nfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.test.js b/...nfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.test.js
@@ -8,7 +8,7 @@ import { CatalogTile, CatalogTileBadge } from '../CatalogTile/index';
 const pfBrand = '<PatternFly Brand Image here>';
 const github = '<GitHub Brand Image here>';
 
-test('CatalogTile renders properly', () => {
+test('CatalogTileView renders properly', () => {
   const component = mount(
     <CatalogTileView id="test-catalog-tile-view">
       <CatalogTileViewCategory id="category-1" title="Category 1" totalItems={4} viewAll={false}>
@@ -99,7 +99,60 @@ test('CatalogTile renders properly', () => {
   component.unmount();
 });
 
-test('CatalogTile renders no tiles state properly', () => {
+test('CatalogTileView renders no categories properly', () => {
+  const component = mount(
+    <CatalogTileView id="test-catalog-tile-view" useCategories={false}>
+      <CatalogTile
+        featured
+        iconImg={pfBrand}
+        badges={[<CatalogTile.Badge type="fa" name="cog" title="Certified" id="certified" />]}
+        title="Patternfly"
+        vendor={
+          <span>
+            PatternFly is a <a href="redhat.com">Red Hat</a> sponsored project.
+          </span>
+        }
+        description="A community of designers and developers collaborating to build a UI framework for enterprise web applications."
+      />
+      <CatalogTile
+        iconImg={github}
+        badges={[
+          <CatalogTileBadge type="fa" name="cog" title="Certified" id="certified" />,
+          <CatalogTileBadge type="pf" name="ok" title="USDA Approved" id="approved" />
+        ]}
+        title="GitHub Desktop"
+        vendor="provided by GitHub"
+        description="Simple collaboration from your desktop."
+      />
+      <CatalogTile
+        featured
+        iconImg={pfBrand}
+        badges={[<CatalogTile.Badge type="fa" name="cog" title="Certified" id="certified" />]}
+        title="Patternfly"
+        vendor={
+          <span>
+            PatternFly is a <a href="redhat.com">Red Hat</a> sponsored project.
+          </span>
+        }
+        description="A community of designers and developers collaborating to build a UI framework for enterprise web applications."
+      />
+      <CatalogTile
+        iconImg={github}
+        badges={[
+          <CatalogTileBadge type="fa" name="cog" title="Certified" id="certified" />,
+          <CatalogTileBadge type="pf" name="ok" title="USDA Approved" id="approved" />
+        ]}
+        title="GitHub Desktop"
+        vendor="provided by GitHub"
+        description="Simple collaboration from your desktop."
+      />
+    </CatalogTileView>
+  );
+  expect(component.render()).toMatchSnapshot();
+  component.unmount();
+});
+
+test('CatalogTileView renders no tiles state properly', () => {
   const component = mount(
     <CatalogTileView id="test-catalog-tile-view">
       <CatalogTileViewCategory id="category-1" title="Category 1" totalItems={0}>
@@ -113,7 +166,7 @@ test('CatalogTile renders no tiles state properly', () => {
   component.unmount();
 });
 
-test('CatalogTile renders wrapped tiles properly', () => {
+test('CatalogTileView renders wrapped tiles properly', () => {
   const component = mount(
     <CatalogTileView id="test-catalog-tile-view">
       <CatalogTileViewCategory id="category-1" title="Category 1" totalItems={4} viewAll={false}>

diff --git a/...y-react-extensions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewExample.js b/...y-react-extensions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewExample.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Breadcrumb, EmptyState, Icon } from 'patternfly-react';
-import { mockItems } from './mockItems';
+import { mockCategories } from './mockItems';
 
 import { CatalogTile } from '../../CatalogTile';
 import { CatalogTileView } from '../index';
@@ -85,7 +85,7 @@ class MockCatalogTileViewExample extends React.Component {
   render() {
     const { showAll } = this.state;
 
-    const activeCategory = showAll ? mockItems.find(category => category.id === showAll) : null;
+    const activeCategory = showAll ? mockCategories.find(category => category.id === showAll) : null;
 
     return (
       <div>
@@ -98,7 +98,7 @@ class MockCatalogTileViewExample extends React.Component {
         <CatalogTileView>
           {activeCategory
             ? this.renderCategory(activeCategory)
-            : mockItems.map(category => this.renderCategory(category))}
+            : mockCategories.map(category => this.renderCategory(category))}
         </CatalogTileView>
       </div>
     );
@@ -117,7 +117,7 @@ export const MockCatalogTileViewExampleSource = `
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Breadcrumb, EmptyState, Icon } from 'patternfly-react';
-import { mockItems } from './mockItems';
+import { mockCategories } from './mockCategories';
 
 import { CatalogTile } from '../../CatalogTile';
 import { CatalogTileView } from '../index';
@@ -201,7 +201,7 @@ class MockCatalogTileViewExample extends React.Component {
   render() {
     const { showAll } = this.state;
 
-    const activeCategory = showAll ? mockItems.find(category => category.id === showAll) : null;
+    const activeCategory = showAll ? mockCategories.find(category => category.id === showAll) : null;
 
     return (
       <div>
@@ -214,7 +214,7 @@ class MockCatalogTileViewExample extends React.Component {
         <CatalogTileView>
           {activeCategory
             ? this.renderCategory(activeCategory)
-            : mockItems.map(category => this.renderCategory(category))}
+            : mockCategories.map(category => this.renderCategory(category))}
         </CatalogTileView>
       </div>
     );

diff --git a/...nsions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewNoCategoriesExample.js b/...nsions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewNoCategoriesExample.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Icon } from 'patternfly-react';
+import { mockItems } from './mockItems';
+
+import { CatalogTile } from '../../CatalogTile';
+import { CatalogTileView } from '../index';
+
+const MockCatalogTileViewNoCategoriesExample = () => {
+  const getBadges = item => {
+    const badges = [];
+
+    if (item.certified) {
+      badges.push(
+        <CatalogTile.Badge key="certified" id="certified" title="Certified">
+          <Icon type="fa" name="cog" />
+        </CatalogTile.Badge>
+      );
+    }
+
+    if (item.approved) {
+      badges.push(
+        <CatalogTile.Badge key="certified" title="USDA Approved" id="approved">
+          <Icon type="pf" name="ok" />
+        </CatalogTile.Badge>
+      );
+    }
+
+    return badges;
+  };
+
+  return (
+    <CatalogTileView useCategories={false}>
+      {mockItems.map((item, index) => (
+        <CatalogTile
+          id={item.id}
+          key={`tile-${index}`}
+          title={item.title}
+          featured={item.featured}
+          iconImg={item.image}
+          vendor={item.vendor}
+          description={item.description}
+          badges={getBadges(item)}
+        />
+      ))}
+    </CatalogTileView>
+  );
+};
+
+export { MockCatalogTileViewNoCategoriesExample };
+
+export const MockCatalogTileViewNoCategoriesExampleSource = `
+import React from 'react';
+import { Icon } from 'patternfly-react';
+import { mockItems } from './mockItems';
+
+import { CatalogTile } from '../../CatalogTile';
+import { CatalogTileView } from '../index';
+
+const MockCatalogTileViewNoCategoriesExample = () => {
+  const getBadges = item => {
+    const badges = [];
+
+    if (item.certified) {
+      badges.push(
+        <CatalogTile.Badge key="certified" id="certified" title="Certified">
+          <Icon type="fa" name="cog" />
+        </CatalogTile.Badge>
+      );
+    }
+
+    if (item.approved) {
+      badges.push(
+        <CatalogTile.Badge key="certified" title="USDA Approved" id="approved">
+          <Icon type="pf" name="ok" />
+        </CatalogTile.Badge>
+      );
+    }
+
+    return badges;
+  };
+
+  return (
+    <CatalogTileView useCategories={false}>
+      {mockItems.map((item, index) => (
+        <CatalogTile
+          id={item.id}
+          key={\`tile-\${index}\`}
+          title={item.title}
+          featured={item.featured}
+          iconImg={item.image}
+          vendor={item.vendor}
+          description={item.description}
+          badges={getBadges(item)}
+        />
+      ))}
+    </CatalogTileView>
+  );
+};
+
+export { MockCatalogTileViewNoCategoriesExample };
+`;