diff --git a/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less b/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less index 7537bf31415..2f25ea6ce9d 100644 --- 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/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss index 3fdfdd5ec3f..da2933dbd26 100644 --- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss +++ b/packages/patternfly-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/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.js index 654577e2ed1..5f574fc1cb6 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.js +++ b/packages/patternfly-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 (
@@ -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/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.stories.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.stories.js index 074123b873c..f69510e762f 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.stories.js +++ b/packages/patternfly-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 ; }) ); + +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: ( +
+

Story Source

+ 
{MockCatalogTileViewNoCategoriesExampleSource}
+
+ ) + })(() => ) +); diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.test.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.test.js index 2d986e6fc00..800f8a2a35f 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.test.js +++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.test.js @@ -8,7 +8,7 @@ import { CatalogTile, CatalogTileBadge } from '../CatalogTile/index'; const pfBrand = ''; const github = ''; -test('CatalogTile renders properly', () => { +test('CatalogTileView renders properly', () => { const component = mount( @@ -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( + + ]} + title="Patternfly" + vendor={ + + PatternFly is a Red Hat sponsored project. + + } + description="A community of designers and developers collaborating to build a UI framework for enterprise web applications." + /> + , + + ]} + title="GitHub Desktop" + vendor="provided by GitHub" + description="Simple collaboration from your desktop." + /> + ]} + title="Patternfly" + vendor={ + + PatternFly is a Red Hat sponsored project. + + } + description="A community of designers and developers collaborating to build a UI framework for enterprise web applications." + /> + , + + ]} + title="GitHub Desktop" + vendor="provided by GitHub" + description="Simple collaboration from your desktop." + /> + + ); + expect(component.render()).toMatchSnapshot(); + component.unmount(); +}); + +test('CatalogTileView renders no tiles state properly', () => { const component = mount( @@ -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( diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewExample.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewExample.js index c2097741b57..bfae10ba65f 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewExample.js +++ b/packages/patternfly-3/patternfly-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 (
@@ -98,7 +98,7 @@ class MockCatalogTileViewExample extends React.Component { {activeCategory ? this.renderCategory(activeCategory) - : mockItems.map(category => this.renderCategory(category))} + : mockCategories.map(category => this.renderCategory(category))}
); @@ -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 (
@@ -214,7 +214,7 @@ class MockCatalogTileViewExample extends React.Component { {activeCategory ? this.renderCategory(activeCategory) - : mockItems.map(category => this.renderCategory(category))} + : mockCategories.map(category => this.renderCategory(category))}
); diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewNoCategoriesExample.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewNoCategoriesExample.js new file mode 100644 index 00000000000..4ba72fffdc4 --- /dev/null +++ b/packages/patternfly-3/patternfly-react-extensions/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( + + + + ); + } + + if (item.approved) { + badges.push( + + + + ); + } + + return badges; + }; + + return ( + + {mockItems.map((item, index) => ( + + ))} + + ); +}; + +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( + + + + ); + } + + if (item.approved) { + badges.push( + + + + ); + } + + return badges; + }; + + return ( + + {mockItems.map((item, index) => ( + + ))} + + ); +}; + +export { MockCatalogTileViewNoCategoriesExample }; +`; diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js index 8be0598825c..d59ae930c79 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js +++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js @@ -9,7 +9,7 @@ import skype from 'patternfly/dist/img/skype-logo.svg'; import ngnix from '../../CatalogTile/__images__/nginx.png'; import openshift from '../../CatalogTile/__images__/OpenShift.svg'; -export const mockItems = [ +export const mockCategories = [ { category: 'Social Media', id: 'social-media', @@ -374,3 +374,351 @@ export const mockItems = [ ] } ]; + +export const mockItems = [ + { + id: 'Facebook', + title: 'Facebook', + image: facebook, + vendor: provided by Facebook, Inc., + description: + 'Facebook is an American online social media and social networking service company based in Menlo Park, California.', + featured: true, + certified: true, + approved: false + }, + { + title: 'LinkedIn', + image: linkedin, + vendor: 'provided by LinkedIn', + description: + 'A simple, fun & creative way to capture, edit & share photos, videos & messages with friends & family.', + featured: false, + certified: true, + approved: false + }, + { + title: 'Instagram', + image: instagram, + vendor: 'provided by Facebook, Inc', + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: false, + certified: true, + approved: true + }, + { + title: 'Twitter', + image: twitter, + vendor: 'provided by Twitter, Inc.', + description: + 'From breaking news and entertainment to sports and politics, get the full story with all the live commentary.', + featured: false, + certified: true, + approved: false + }, + { + id: 'Skype', + title: 'Skype', + image: skype, + vendor: 'provided by Skype', + description: + 'Stay in touch! Free online calls, messaging, affordable international calling to mobiles or landlines ' + + 'and Skype for Business for effective collaboration.', + featured: true, + certified: true, + approved: true + }, + { + id: 'PatternFly-long-description', + title: 'PatternFly-React', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'This is a very long description that should fade the last visible line to indicate truncation. ' + + 'The default is the last visible line but can be overridden to truncate to a max number of characters ' + + 'if need be. You can also provide a custom truncation function ' + + 'to truncate the description how you see fit. It will be passed the description and max length.', + featured: true, + certified: true, + approved: true + }, + { + title: 'JBoss BPM Suite 6.4 intelligent process server + A-MQ + MySQL (Ephemeral with https)', + image: openshift, + vendor: 'provided by Red Hat, Inc', + description: + 'Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, ' + + 'volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. ' + + 'Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ' + + 'ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet.', + featured: false, + certified: true, + approved: false + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + }, + { + title: 'Nginx', + image: ngnix, + vendor: 'provided by Nginx', + description: 'The open source web server that powers 400 million websites.', + featured: false, + certified: true, + approved: false + }, + { + title: 'PatternFly', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: true, + certified: true, + approved: true + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + }, + { + title: 'Nginx', + image: ngnix, + vendor: 'provided by Nginx', + description: 'The open source web server that powers 400 million websites.', + featured: false, + certified: true, + approved: false + }, + { + title: 'PatternFly', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: true, + certified: true, + approved: true + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + }, + { + title: 'Nginx', + image: ngnix, + vendor: 'provided by Nginx', + description: 'The open source web server that powers 400 million websites.', + featured: false, + certified: true, + approved: false + }, + { + title: 'PatternFly', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: true, + certified: true, + approved: true + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + }, + { + title: 'Nginx', + image: ngnix, + vendor: 'provided by Nginx', + description: 'The open source web server that powers 400 million websites.', + featured: false, + certified: true, + approved: false + }, + { + title: 'PatternFly', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: true, + certified: true, + approved: true + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + }, + { + title: 'Nginx', + image: ngnix, + vendor: 'provided by Nginx', + description: 'The open source web server that powers 400 million websites.', + featured: false, + certified: true, + approved: false + }, + { + title: 'PatternFly', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: true, + certified: true, + approved: true + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + }, + { + title: 'PatternFly', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: true, + certified: true, + approved: true + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + }, + { + title: 'PatternFly', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: true, + certified: true, + approved: true + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + }, + { + title: 'PatternFly', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: true, + certified: true, + approved: true + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + }, + { + title: 'PatternFly', + image: pfBrand, + vendor: ( + + provided by Red Hat + + ), + description: + 'A community of designers and developers collaborating to build a UI framework for enterprise web applications.', + featured: true, + certified: true, + approved: true + }, + { + title: 'GitHub Desktop', + image: github, + vendor: 'provided by GitHub', + description: 'Simple collaboration from your desktop.', + featured: false, + certified: true, + approved: false + } +]; diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__snapshots__/CatalogTileView.test.js.snap b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__snapshots__/CatalogTileView.test.js.snap index 9f2d601c09b..44bfc857723 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__snapshots__/CatalogTileView.test.js.snap +++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__snapshots__/CatalogTileView.test.js.snap @@ -1,6 +1,260 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CatalogTile renders no tiles state properly 1`] = ` +exports[`CatalogTileView renders no categories properly 1`] = ` +
+
+
+ +
+ + + + Certified + + + +
+
+
+
+ Patternfly +
+
+ + PatternFly is a + + Red Hat + + sponsored project. + +
+
+ + A community of designers and developers collaborating to build a UI framework for enterprise web applications. + +
+
+
+
+
+ +
+ + + + Certified + + + + + + + USDA Approved + + + +
+
+
+
+ GitHub Desktop +
+
+ provided by GitHub +
+
+ + Simple collaboration from your desktop. + +
+
+
+
+
+ +
+ + + + Certified + + + +
+
+
+
+ Patternfly +
+
+ + PatternFly is a + + Red Hat + + sponsored project. + +
+
+ + A community of designers and developers collaborating to build a UI framework for enterprise web applications. + +
+
+
+
+
+ +
+ + + + Certified + + + + + + + USDA Approved + + + +
+
+
+
+ GitHub Desktop +
+
+ provided by GitHub +
+
+ + Simple collaboration from your desktop. + +
+
+
+
+`; + +exports[`CatalogTileView renders no tiles state properly 1`] = `
`; -exports[`CatalogTile renders properly 1`] = ` +exports[`CatalogTileView renders properly 1`] = `
`; -exports[`CatalogTile renders wrapped tiles properly 1`] = ` +exports[`CatalogTileView renders wrapped tiles properly 1`] = `