diff --git a/src/Tile/ProductTile.js b/src/Tile/ProductTile.js deleted file mode 100644 index 523b97139..000000000 --- a/src/Tile/ProductTile.js +++ /dev/null @@ -1,38 +0,0 @@ -import classnames from 'classnames'; -import ProductTileContent from './_ProductTileContent'; -import ProductTileMedia from './_ProductTileMedia'; -import PropTypes from 'prop-types'; -import React from 'react'; - -const ProductTile = props => { - const { disabled, children, className, ...rest } = props; - - const tileProductClasses = classnames( - 'fd-product-tile', - { - 'is-disabled': disabled - }, - className - ); - - return ( -
- {children} -
- ); -}; - -ProductTile.displayName = 'ProductTile'; - -ProductTile.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - disabled: PropTypes.bool -}; - -ProductTile.Content = ProductTileContent; -ProductTile.Media = ProductTileMedia; - -export default ProductTile; diff --git a/src/Tile/ProductTile.test.js b/src/Tile/ProductTile.test.js deleted file mode 100644 index 81c3358ec..000000000 --- a/src/Tile/ProductTile.test.js +++ /dev/null @@ -1,47 +0,0 @@ -import { mount } from 'enzyme'; -import ProductTile from './ProductTile'; -import React from 'react'; -import renderer from 'react-test-renderer'; - -describe('', () => { - const productMediaTile = ( - - - -

Tile Description

- - - ); - - const disabledProductMediaTile = ( - - - -

Tile Description

- - - ); - - test('create ProductTile component', () => { - let component = renderer.create(productMediaTile); - let tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - - // disabled simple tile - component = renderer.create(disabledProductMediaTile); - tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - describe('Prop spreading', () => { - test('should allow props to be spread to the ProductTile component', () => { - const element = mount(); - - expect( - element.getDOMNode().attributes['data-sample'].value - ).toBe('Sample'); - }); - }); -}); diff --git a/src/Tile/ProductTileContent.test.js b/src/Tile/ProductTileContent.test.js deleted file mode 100644 index 9f0c738e1..000000000 --- a/src/Tile/ProductTileContent.test.js +++ /dev/null @@ -1,38 +0,0 @@ -import { mount } from 'enzyme'; -import ProductTile from './ProductTile'; -import React from 'react'; -import renderer from 'react-test-renderer'; - -describe('', () => { - const productTileContent = ( - -

Tile Description

- - ); - - test('create ProductTile.Content component', () => { - let component = renderer.create(productTileContent); - let tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - - }); - - describe('Prop spreading', () => { - - test('should allow props to be spread to the ProductTileContent component', () => { - const element = mount(); - - expect( - element.getDOMNode().attributes['data-sample'].value - ).toBe('Sample'); - }); - - test('should allow props to be spread to the ProductTileContent component\'s heading element', () => { - const element = mount(); - - expect( - element.find('.fd-product-tile__title').getDOMNode().attributes['data-sample'].value - ).toBe('Sample'); - }); - }); -}); diff --git a/src/Tile/ProductTileMedia.test.js b/src/Tile/ProductTileMedia.test.js deleted file mode 100644 index a8d5b4bdb..000000000 --- a/src/Tile/ProductTileMedia.test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { mount } from 'enzyme'; -import ProductTile from './ProductTile'; -import React from 'react'; -import renderer from 'react-test-renderer'; - -describe('', () => { - const productTileMedia = ( - - ); - - test('create ProductTile.Media component', () => { - let component = renderer.create(productTileMedia); - let tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - describe('Prop spreading', () => { - test('should allow props to be spread to the ProductTileMedia component', () => { - const element = mount(); - - expect( - element.getDOMNode().attributes['data-sample'].value - ).toBe('Sample'); - }); - }); -}); diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js index 6379bf021..e6822988f 100644 --- a/src/Tile/Tile.Component.js +++ b/src/Tile/Tile.Component.js @@ -1,7 +1,7 @@ import path from 'path'; import React from 'react'; -import { Button, Identifier, Image, Menu, Popover, ProductTile, Tile, TileGrid } from '../'; -import { ComponentPage, Example, Playground, Separator } from '../_playground'; +import { Button, Identifier, Image, Menu, Popover, Tile, TileGrid } from '../'; +import { ComponentPage, Example } from '../_playground'; export const TileComponent = () => { return ( @@ -30,7 +30,7 @@ export const TileComponent = () => {
- + @@ -40,7 +40,7 @@ export const TileComponent = () => {
- + @@ -75,24 +75,38 @@ export const TileComponent = () => { -
- - - -

Tile Description

- - - -
+ title='Media with Actions Tile'> + + + + + + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + control={
+ + + +

Tile Description

+ + {

Tile Description

 - + @@ -137,33 +151,6 @@ export const TileComponent = () => { - - - - - - -

Tile Description

- - - - ); }; diff --git a/src/Tile/Tile.js b/src/Tile/Tile.js index 1f0beb721..ac85a04a4 100644 --- a/src/Tile/Tile.js +++ b/src/Tile/Tile.js @@ -13,14 +13,17 @@ const Tile = props => { columnSpan, colorAccent, backgroundColor, + backgroundImage, children, className, + productTile, ...rest } = props; const tileClasses = classnames( - 'fd-tile', { + 'fd-tile': !productTile, + 'fd-product-tile': productTile, 'is-disabled': disabled, [`fd-has-grid-row-span-${rowSpan}`]: !!rowSpan, [`fd-has-grid-column-span-${columnSpan}`]: !!columnSpan, @@ -34,7 +37,20 @@ const Tile = props => {
- {children} + {productTile && +
+ } + {React.Children.toArray(children).map(child => { + const isAction = child.type && child.type.displayName === 'Tile.Actions'; + + if (isAction) { + return child; + } + + return React.cloneElement(child, { + productTile: productTile + }); + })}
); }; @@ -43,17 +59,21 @@ Tile.displayName = 'Tile'; Tile.propTypes = { backgroundColor: PropTypes.number, + backgroundImage: PropTypes.string, className: PropTypes.string, colorAccent: PropTypes.number, columnSpan: CustomPropTypes.range(1, 6), disabled: PropTypes.bool, + productTile: PropTypes.bool, rowSpan: PropTypes.number }; Tile.propDescriptions = { backgroundColor: 'Sets a background color class.', + backgroundImage: 'URL of the background image for product tile.', colorAccent: 'Sets a background color accent class. Options include numbers from 1 to 9.', columnSpan: 'Number of columns the tile covers.', + productTile: 'Set to **true** to mark component as a product tile.', rowSpan: 'Number of rows the tile covers.' }; diff --git a/src/Tile/Tile.test.js b/src/Tile/Tile.test.js index 052a79892..4e55cd217 100644 --- a/src/Tile/Tile.test.js +++ b/src/Tile/Tile.test.js @@ -26,7 +26,7 @@ describe('', () => { ); const mediaTile = ( - + @@ -58,7 +58,7 @@ describe('', () => { ); const mediaTileNoClass = ( - + @@ -89,6 +89,27 @@ describe('', () => { ); + const productTile = ( + + + +

Tile Description

+ + + ); + + const disabledProductTile = ( + + + +

Tile Description

+ + + ); + test('create tile component', () => { // simple tile let component = renderer.create(simpleTile); @@ -119,6 +140,16 @@ describe('', () => { component = renderer.create(actionTileNoClass); tree = component.toJSON(); expect(tree).toMatchSnapshot(); + + // product tile + component = renderer.create(productTile); + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + + // disabled product tile + component = renderer.create(disabledProductTile); + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); }); describe('Prop spreading', () => { @@ -130,4 +161,16 @@ describe('', () => { ).toBe('Sample'); }); }); + + test('classnames are correct on product tile', () => { + const wrapper = mount( + + + ); + + expect(wrapper.find('.fd-product-tile').length).toEqual(1); + expect(wrapper.find('.fd-product-tile__content').length).toEqual(1); + expect(wrapper.find('.fd-tile').length).toEqual(0); + expect(wrapper.find('.fd-tile__content').length).toEqual(0); + }); }); diff --git a/src/Tile/TileMedia.test.js b/src/Tile/TileMedia.test.js index c21b7b492..742ba5e85 100644 --- a/src/Tile/TileMedia.test.js +++ b/src/Tile/TileMedia.test.js @@ -19,7 +19,6 @@ describe('', () => { }); describe('Prop spreading', () => { - test('should allow props to be spread to the TileMedia component', () => { const element = mount(); diff --git a/src/Tile/_ProductTileContent.js b/src/Tile/_ProductTileContent.js deleted file mode 100644 index c6f632e5e..000000000 --- a/src/Tile/_ProductTileContent.js +++ /dev/null @@ -1,37 +0,0 @@ -import classnames from 'classnames'; -import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes'; -import PropTypes from 'prop-types'; -import React from 'react'; - -const ProductTileContent = props => { - const { title, children, className, headingLevel, titleProps, ...rest } = props; - - const tileProductContentClasses = classnames( - 'fd-product-tile__content', - className - ); - - const HeadingTag = `h${headingLevel}`; - - return ( -
- {title} - {children} -
- ); -}; - -ProductTileContent.displayName = 'ProductTile.Content'; - -ProductTileContent.propTypes = { - className: PropTypes.string, - headingLevel: CustomPropTypes.range(2, 6), - title: PropTypes.string, - titleProps: PropTypes.object -}; - -ProductTileContent.defaultProps = { - headingLevel: 3 -}; - -export default ProductTileContent; diff --git a/src/Tile/_ProductTileMedia.js b/src/Tile/_ProductTileMedia.js deleted file mode 100644 index 63b8a131e..000000000 --- a/src/Tile/_ProductTileMedia.js +++ /dev/null @@ -1,32 +0,0 @@ -import classnames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; - -const ProductTileMedia = props => { - const { image, className, ...rest } = props; - - const tileProductMediaClasses = classnames( - 'fd-product-tile__media', - className - ); - - return ( -
- ); -}; - -ProductTileMedia.displayName = 'ProductTile.Media'; - -ProductTileMedia.propTypes = { - image: PropTypes.string.isRequired, - className: PropTypes.string -}; - -ProductTileMedia.propDescriptions = { - image: 'URL of the image.' -}; - -export default ProductTileMedia; diff --git a/src/Tile/_TileContent.js b/src/Tile/_TileContent.js index 771cfa9e5..2dd509fd7 100644 --- a/src/Tile/_TileContent.js +++ b/src/Tile/_TileContent.js @@ -4,10 +4,21 @@ import PropTypes from 'prop-types'; import React from 'react'; const TileContent = props => { - const { title, children, className, headingLevel, titleProps, ...rest } = props; + const { title, children, className, headingLevel, titleProps, productTile, ...rest } = props; const tileContentClasses = classnames( - 'fd-tile__content', + { + 'fd-tile__content': !productTile, + 'fd-product-tile__content': productTile + }, + className + ); + + const tileContentHeadingClass = classnames( + { + 'fd-tile__title': !productTile, + 'fd-product-tile__title': productTile + }, className ); @@ -15,7 +26,7 @@ const TileContent = props => { return (
- {title} + {title} {children}
); diff --git a/src/Tile/_TileMedia.js b/src/Tile/_TileMedia.js index 974a58c1f..b89fa0d3c 100644 --- a/src/Tile/_TileMedia.js +++ b/src/Tile/_TileMedia.js @@ -3,14 +3,15 @@ import PropTypes from 'prop-types'; import React from 'react'; const TileMedia = props => { - const { children, className, ...rest } = props; + const { children, className, productTile, ...rest } = props; const tileMediaClasses = classnames( 'fd-tile__media', className ); - return
{children}
; + return ( +
{children}
); }; TileMedia.displayName = 'Tile.Media'; diff --git a/src/Tile/__snapshots__/ProductTile.test.js.snap b/src/Tile/__snapshots__/ProductTile.test.js.snap deleted file mode 100644 index 099c43367..000000000 --- a/src/Tile/__snapshots__/ProductTile.test.js.snap +++ /dev/null @@ -1,56 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` create ProductTile component 1`] = ` -
-
-
-

- Tile Title -

-

- Tile Description -

-
-
-`; - -exports[` create ProductTile component 2`] = ` -
-
-
-

- Tile Title -

-

- Tile Description -

-
-
-`; diff --git a/src/Tile/__snapshots__/ProductTileContent.test.js.snap b/src/Tile/__snapshots__/ProductTileContent.test.js.snap deleted file mode 100644 index 2fd19c6be..000000000 --- a/src/Tile/__snapshots__/ProductTileContent.test.js.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` create ProductTile.Content component 1`] = ` -
-

- Tile Title -

-

- Tile Description -

-
-`; diff --git a/src/Tile/__snapshots__/ProductTileMedia.test.js.snap b/src/Tile/__snapshots__/ProductTileMedia.test.js.snap deleted file mode 100644 index cec4c75e6..000000000 --- a/src/Tile/__snapshots__/ProductTileMedia.test.js.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` create ProductTile.Media component 1`] = ` -
-`; diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap index fbd0818d7..1ebd7ecc2 100644 --- a/src/Tile/__snapshots__/Tile.test.js.snap +++ b/src/Tile/__snapshots__/Tile.test.js.snap @@ -8,7 +8,7 @@ exports[` create tile component 1`] = ` className="fd-tile__content red" >

Tile Title

@@ -41,7 +41,6 @@ exports[` create tile component 2`] = ` exports[` create tile component 3`] = `
create tile component 4`] = ` exports[` create tile component 5`] = `
create tile component 6`] = `
`; + +exports[` create tile component 7`] = ` +
+
+
+
+

+ Tile Title +

+

+ Tile Description +

+
+
+`; + +exports[` create tile component 8`] = ` +
+
+
+
+

+ Tile Title +

+

+ Tile Description +

+
+
+`; diff --git a/src/Tile/__snapshots__/TileContent.test.js.snap b/src/Tile/__snapshots__/TileContent.test.js.snap index e58d97776..579a45993 100644 --- a/src/Tile/__snapshots__/TileContent.test.js.snap +++ b/src/Tile/__snapshots__/TileContent.test.js.snap @@ -5,7 +5,7 @@ exports[` create Tile.Content component 1`] = ` className="fd-tile__content red" >

Tile Title

diff --git a/src/_playground/documentation/Playground/Playground.js b/src/_playground/documentation/Playground/Playground.js index 64b9676f8..00adc95be 100644 --- a/src/_playground/documentation/Playground/Playground.js +++ b/src/_playground/documentation/Playground/Playground.js @@ -9,7 +9,6 @@ import { ListGroup } from '../../../'; import PropTypes from 'prop-types'; import { Badge, Label, Status } from '../../../'; import { FormGroup, FormItem, FormLabel, InputGroup } from '../../../'; -import { ProductTile, Tile } from '../../../'; import React, { Component } from 'react'; class Playground extends Component { @@ -490,70 +489,6 @@ class Playground extends Component { ); break; - case 'tile': - if (this.state.component === '' || this.state.component === 'simple') { - componentToGenerate = ( - - -

- {this.retrieveValue( - 'children', - this.state.childs.children.props.children.props.children, - this.state.currentValues - )} -

- - - - - - ); - } else if (this.state.component === 'media') { - componentToGenerate = ( - - - - - - - - - - ); - } else if (this.state.component === 'product') { - componentToGenerate = ( - - - - -

- {this.retrieveValue( - 'children', - this.state.childs.children.props.children.props.children, - this.state.currentValues - )} -

- - - - ); - } - break; default: break; diff --git a/src/index.js b/src/index.js index 2f38441b0..56d39991c 100644 --- a/src/index.js +++ b/src/index.js @@ -37,7 +37,6 @@ export { default as Pagination } from './Pagination/Pagination'; export { default as Panel } from './Panel/Panel'; export { default as PanelGrid } from './Panel/PanelGrid'; export { default as Popover } from './Popover/Popover'; -export { default as ProductTile } from './Tile/ProductTile'; export { default as SearchInput } from './SearchInput/SearchInput'; export { default as SideNav } from './SideNavigation/SideNav'; export { default as Tab } from './Tabs/Tab';