From 62182fcbd79f51dd00671a16b5104276dec35e01 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 24 May 2019 13:44:38 -0700 Subject: [PATCH 01/25] product tile and content complete --- src/Tile/ProductTile.js | 27 ++------------------------ src/Tile/Tile.js | 10 +++++++++- src/Tile/_ProductTileContent.js | 34 +++++---------------------------- src/Tile/_TileContent.js | 9 ++++++--- 4 files changed, 22 insertions(+), 58 deletions(-) diff --git a/src/Tile/ProductTile.js b/src/Tile/ProductTile.js index 523b97139..084b1dadf 100644 --- a/src/Tile/ProductTile.js +++ b/src/Tile/ProductTile.js @@ -1,37 +1,14 @@ -import classnames from 'classnames'; import ProductTileContent from './_ProductTileContent'; import ProductTileMedia from './_ProductTileMedia'; -import PropTypes from 'prop-types'; import React from 'react'; +import Tile from './Tile'; const ProductTile = props => { - const { disabled, children, className, ...rest } = props; - - const tileProductClasses = classnames( - 'fd-product-tile', - { - 'is-disabled': disabled - }, - className - ); - - return ( -
- {children} -
- ); + return (); }; ProductTile.displayName = 'ProductTile'; -ProductTile.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - disabled: PropTypes.bool -}; - ProductTile.Content = ProductTileContent; ProductTile.Media = ProductTileMedia; diff --git a/src/Tile/Tile.js b/src/Tile/Tile.js index 1f0beb721..857c333a2 100644 --- a/src/Tile/Tile.js +++ b/src/Tile/Tile.js @@ -15,12 +15,14 @@ const Tile = props => { backgroundColor, 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, @@ -47,13 +49,19 @@ Tile.propTypes = { colorAccent: PropTypes.number, columnSpan: CustomPropTypes.range(1, 6), disabled: PropTypes.bool, + productTile: PropTypes.bool, rowSpan: PropTypes.number }; +Tile.defaultProps = { + productTile: false +}; + Tile.propDescriptions = { backgroundColor: 'Sets a background color class.', colorAccent: 'Sets a background color accent class. Options include numbers from 1 to 9.', columnSpan: 'Number of columns the tile covers.', + productTile: '_INTERNAL USE ONLY._', rowSpan: 'Number of rows the tile covers.' }; diff --git a/src/Tile/_ProductTileContent.js b/src/Tile/_ProductTileContent.js index c6f632e5e..04b2b0a08 100644 --- a/src/Tile/_ProductTileContent.js +++ b/src/Tile/_ProductTileContent.js @@ -1,37 +1,13 @@ -import classnames from 'classnames'; -import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes'; -import PropTypes from 'prop-types'; import React from 'react'; +import TileContent from './_TileContent'; +/*eslint-disable*/ +// need to be able to have product Tile to be passed through this without having to name it 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} -
- ); + console.log(props); + return (); }; 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/_TileContent.js b/src/Tile/_TileContent.js index 771cfa9e5..0120392f4 100644 --- a/src/Tile/_TileContent.js +++ b/src/Tile/_TileContent.js @@ -4,10 +4,13 @@ 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 ); @@ -15,7 +18,7 @@ const TileContent = props => { return (
- {title} + {title} {children}
); From bf5eff99baa0c3162de00c56964e48b322741e91 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 24 May 2019 14:51:22 -0700 Subject: [PATCH 02/25] media tile complete --- src/Tile/_ProductTileMedia.js | 17 ++++------------- src/Tile/_TileMedia.js | 9 ++++++--- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/Tile/_ProductTileMedia.js b/src/Tile/_ProductTileMedia.js index 63b8a131e..8461234de 100644 --- a/src/Tile/_ProductTileMedia.js +++ b/src/Tile/_ProductTileMedia.js @@ -1,19 +1,11 @@ -import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; +import TileMedia from './_TileMedia'; const ProductTileMedia = props => { - const { image, className, ...rest } = props; - - const tileProductMediaClasses = classnames( - 'fd-product-tile__media', - className - ); - + const { image } = props; return ( -
); }; @@ -21,8 +13,7 @@ const ProductTileMedia = props => { ProductTileMedia.displayName = 'ProductTile.Media'; ProductTileMedia.propTypes = { - image: PropTypes.string.isRequired, - className: PropTypes.string + image: PropTypes.string.isRequired }; ProductTileMedia.propDescriptions = { diff --git a/src/Tile/_TileMedia.js b/src/Tile/_TileMedia.js index 974a58c1f..1e9bb97d8 100644 --- a/src/Tile/_TileMedia.js +++ b/src/Tile/_TileMedia.js @@ -3,14 +3,17 @@ 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', + { + 'fd-tile__media': !productTile, + 'fd-product-tile__media': productTile + }, className ); - return
{children}
; + return (
{children}
); }; TileMedia.displayName = 'Tile.Media'; From 9e0bf80bec88e1b087c87143bcbd737167527bb5 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 24 May 2019 15:11:11 -0700 Subject: [PATCH 03/25] updated snapshots --- src/Tile/_ProductTileContent.js | 3 --- src/Tile/_ProductTileMedia.js | 1 + src/Tile/__snapshots__/ProductTile.test.js.snap | 2 ++ src/Tile/__snapshots__/ProductTileMedia.test.js.snap | 1 + 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Tile/_ProductTileContent.js b/src/Tile/_ProductTileContent.js index 04b2b0a08..36dd178c1 100644 --- a/src/Tile/_ProductTileContent.js +++ b/src/Tile/_ProductTileContent.js @@ -1,10 +1,7 @@ import React from 'react'; import TileContent from './_TileContent'; -/*eslint-disable*/ -// need to be able to have product Tile to be passed through this without having to name it const ProductTileContent = props => { - console.log(props); return (); }; diff --git a/src/Tile/_ProductTileMedia.js b/src/Tile/_ProductTileMedia.js index 8461234de..76f338c65 100644 --- a/src/Tile/_ProductTileMedia.js +++ b/src/Tile/_ProductTileMedia.js @@ -4,6 +4,7 @@ import TileMedia from './_TileMedia'; const ProductTileMedia = props => { const { image } = props; + return ( diff --git a/src/Tile/__snapshots__/ProductTile.test.js.snap b/src/Tile/__snapshots__/ProductTile.test.js.snap index 099c43367..6573670a3 100644 --- a/src/Tile/__snapshots__/ProductTile.test.js.snap +++ b/src/Tile/__snapshots__/ProductTile.test.js.snap @@ -7,6 +7,7 @@ exports[` create ProductTile component 1`] = ` >
create ProductTile component 2`] = ` >
create ProductTile.Media component 1`] = `
Date: Fri, 24 May 2019 15:43:56 -0700 Subject: [PATCH 04/25] added title prop to product tile content --- src/Tile/_ProductTileContent.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Tile/_ProductTileContent.js b/src/Tile/_ProductTileContent.js index 36dd178c1..4d756e3f0 100644 --- a/src/Tile/_ProductTileContent.js +++ b/src/Tile/_ProductTileContent.js @@ -2,7 +2,10 @@ import React from 'react'; import TileContent from './_TileContent'; const ProductTileContent = props => { - return (); + const { title } = props; + + return (); }; ProductTileContent.displayName = 'ProductTile.Content'; From 3221d62fe92506624cd3251d413a63338105793d Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 24 May 2019 17:37:14 -0700 Subject: [PATCH 05/25] added tests to check for className --- src/Tile/ProductTile.test.js | 7 +++++++ src/Tile/ProductTileContent.test.js | 7 +++++++ src/Tile/ProductTileMedia.test.js | 8 ++++++++ 3 files changed, 22 insertions(+) diff --git a/src/Tile/ProductTile.test.js b/src/Tile/ProductTile.test.js index 81c3358ec..0f0d08aff 100644 --- a/src/Tile/ProductTile.test.js +++ b/src/Tile/ProductTile.test.js @@ -35,6 +35,13 @@ describe('', () => { expect(tree).toMatchSnapshot(); }); + test('className is correct', () => { + const wrapper = mount(); + + expect(wrapper.find('.fd-product-tile').length).toEqual(1); + expect(wrapper.find('.fd-tile').length).toEqual(0); + }); + describe('Prop spreading', () => { test('should allow props to be spread to the ProductTile component', () => { const element = mount(); diff --git a/src/Tile/ProductTileContent.test.js b/src/Tile/ProductTileContent.test.js index 9f0c738e1..3a843e98a 100644 --- a/src/Tile/ProductTileContent.test.js +++ b/src/Tile/ProductTileContent.test.js @@ -17,6 +17,13 @@ describe('', () => { }); + test('className is correct', () => { + const wrapper = mount(); + + expect(wrapper.find('.fd-product-tile__content').length).toEqual(1); + expect(wrapper.find('.fd-tile__content').length).toEqual(0); + }); + describe('Prop spreading', () => { test('should allow props to be spread to the ProductTileContent component', () => { diff --git a/src/Tile/ProductTileMedia.test.js b/src/Tile/ProductTileMedia.test.js index a8d5b4bdb..9a8249805 100644 --- a/src/Tile/ProductTileMedia.test.js +++ b/src/Tile/ProductTileMedia.test.js @@ -14,6 +14,14 @@ describe('', () => { expect(tree).toMatchSnapshot(); }); + test('className is correct', () => { + const wrapper = mount(); + + expect(wrapper.find('.fd-product-tile__media').length).toEqual(1); + expect(wrapper.find('.fd-tile__media').length).toEqual(0); + + }); + describe('Prop spreading', () => { test('should allow props to be spread to the ProductTileMedia component', () => { const element = mount(); From 204e24f0075b92934eb574830097a68bd6fd8778 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Tue, 28 May 2019 09:52:18 -0700 Subject: [PATCH 06/25] added title prop to productTileContent tests --- src/Tile/ProductTileContent.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Tile/ProductTileContent.test.js b/src/Tile/ProductTileContent.test.js index 3a843e98a..752ec4494 100644 --- a/src/Tile/ProductTileContent.test.js +++ b/src/Tile/ProductTileContent.test.js @@ -18,7 +18,7 @@ describe('', () => { }); test('className is correct', () => { - const wrapper = mount(); + const wrapper = mount(); expect(wrapper.find('.fd-product-tile__content').length).toEqual(1); expect(wrapper.find('.fd-tile__content').length).toEqual(0); @@ -27,7 +27,7 @@ describe('', () => { describe('Prop spreading', () => { test('should allow props to be spread to the ProductTileContent component', () => { - const element = mount(); + const element = mount(); expect( element.getDOMNode().attributes['data-sample'].value @@ -35,7 +35,7 @@ describe('', () => { }); test('should allow props to be spread to the ProductTileContent component\'s heading element', () => { - const element = mount(); + const element = mount(); expect( element.find('.fd-product-tile__title').getDOMNode().attributes['data-sample'].value From 029390a405d035160f9b56151298585792735277 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Wed, 29 May 2019 09:17:59 -0700 Subject: [PATCH 07/25] remove title specific prop from product tile content --- src/Tile/_ProductTileContent.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Tile/_ProductTileContent.js b/src/Tile/_ProductTileContent.js index 4d756e3f0..36dd178c1 100644 --- a/src/Tile/_ProductTileContent.js +++ b/src/Tile/_ProductTileContent.js @@ -2,10 +2,7 @@ import React from 'react'; import TileContent from './_TileContent'; const ProductTileContent = props => { - const { title } = props; - - return (); + return (); }; ProductTileContent.displayName = 'ProductTile.Content'; From d6ffac6cde32b32f33be9a865978c8c2f17ddd95 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Wed, 29 May 2019 09:57:17 -0700 Subject: [PATCH 08/25] edited image for product tile on docs site --- src/Tile/Tile.Component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js index 6379bf021..f4d55c542 100644 --- a/src/Tile/Tile.Component.js +++ b/src/Tile/Tile.Component.js @@ -78,7 +78,7 @@ export const TileComponent = () => { title='Product Tile'>
- +

Tile Description

 @@ -87,7 +87,7 @@ export const TileComponent = () => {
- +

Tile Description

 From 346ed81c7f396b7aeacb817532998d0db1647bed Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Wed, 29 May 2019 20:41:07 -0700 Subject: [PATCH 09/25] removed default props for productTile boolean --- src/Tile/Tile.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Tile/Tile.js b/src/Tile/Tile.js index 857c333a2..01a4b7167 100644 --- a/src/Tile/Tile.js +++ b/src/Tile/Tile.js @@ -53,10 +53,6 @@ Tile.propTypes = { rowSpan: PropTypes.number }; -Tile.defaultProps = { - productTile: false -}; - Tile.propDescriptions = { backgroundColor: 'Sets a background color class.', colorAccent: 'Sets a background color accent class. Options include numbers from 1 to 9.', From ba69c20f26688538e2194c9a1b0643f04f445f3d Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Thu, 30 May 2019 20:13:27 -0700 Subject: [PATCH 10/25] product tile component examples only consume tile --- src/Tile/Tile.Component.js | 22 +++++++++++----------- src/Tile/_TileMedia.js | 6 ++++-- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js index f4d55c542..59de46ac5 100644 --- a/src/Tile/Tile.Component.js +++ b/src/Tile/Tile.Component.js @@ -1,6 +1,6 @@ import path from 'path'; import React from 'react'; -import { Button, Identifier, Image, Menu, Popover, ProductTile, Tile, TileGrid } from '../'; +import { Button, Identifier, Image, Menu, Popover, Tile, TileGrid } from '../'; import { ComponentPage, Example, Playground, Separator } from '../_playground'; export const TileComponent = () => { @@ -77,21 +77,21 @@ export const TileComponent = () => {
- - - + + +

Tile Description

- - + +
- - - + + +

Tile Description

- - + +
diff --git a/src/Tile/_TileMedia.js b/src/Tile/_TileMedia.js index 1e9bb97d8..91b4732dd 100644 --- a/src/Tile/_TileMedia.js +++ b/src/Tile/_TileMedia.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; const TileMedia = props => { - const { children, className, productTile, ...rest } = props; + const { children, className, productTile, backgroundImage, ...rest } = props; const tileMediaClasses = classnames( { @@ -13,12 +13,14 @@ const TileMedia = props => { className ); - return (
{children}
); + return (
{children}
); }; TileMedia.displayName = 'Tile.Media'; TileMedia.propTypes = { + backgroundImage: PropTypes.string, children: PropTypes.node, className: PropTypes.string }; From 310253cedd167f4eeba63a28bac2beb903a3b15b Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Thu, 30 May 2019 20:58:59 -0700 Subject: [PATCH 11/25] passed productTile prop by cloning children --- src/Tile/Tile.Component.js | 8 ++++---- src/Tile/Tile.js | 6 +++++- src/Tile/_TileMedia.js | 8 +++++--- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js index 59de46ac5..3121e24e4 100644 --- a/src/Tile/Tile.Component.js +++ b/src/Tile/Tile.Component.js @@ -78,8 +78,8 @@ export const TileComponent = () => { title='Product Tile'>
- - + +

Tile Description

 @@ -87,8 +87,8 @@ export const TileComponent = () => {
- - + +

Tile Description

 diff --git a/src/Tile/Tile.js b/src/Tile/Tile.js index 01a4b7167..da4421910 100644 --- a/src/Tile/Tile.js +++ b/src/Tile/Tile.js @@ -36,7 +36,11 @@ const Tile = props => {
- {children} + {React.Children.toArray(children).map(child => { + return React.cloneElement(child, { + productTile: productTile + }); + })}
); }; diff --git a/src/Tile/_TileMedia.js b/src/Tile/_TileMedia.js index 91b4732dd..16ecc1fc7 100644 --- a/src/Tile/_TileMedia.js +++ b/src/Tile/_TileMedia.js @@ -1,7 +1,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; - +/*eslint-disable*/ const TileMedia = props => { const { children, className, productTile, backgroundImage, ...rest } = props; @@ -12,9 +12,11 @@ const TileMedia = props => { }, className ); + console.log(productTile); - return (
{children}
); + return ( +
{children}
); }; TileMedia.displayName = 'Tile.Media'; From 040ab924524250052164813d3a0293867eb72fb6 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Thu, 30 May 2019 21:08:49 -0700 Subject: [PATCH 12/25] added description for background image on media tile --- src/Tile/_TileMedia.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Tile/_TileMedia.js b/src/Tile/_TileMedia.js index 16ecc1fc7..5d78dc708 100644 --- a/src/Tile/_TileMedia.js +++ b/src/Tile/_TileMedia.js @@ -27,4 +27,8 @@ TileMedia.propTypes = { className: PropTypes.string }; +TileMedia.propDescriptions = { + backgroundImage: 'URL of the background image for product tile.' +}; + export default TileMedia; From 4de6ab097c3b5e820ae7ca91bbdbf94b40ad12dd Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 31 May 2019 08:06:28 -0700 Subject: [PATCH 13/25] added conditional to clone to account for tile actions --- src/Tile/Tile.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/Tile/Tile.js b/src/Tile/Tile.js index da4421910..002559317 100644 --- a/src/Tile/Tile.js +++ b/src/Tile/Tile.js @@ -37,9 +37,13 @@ const Tile = props => { {...rest} className={tileClasses}> {React.Children.toArray(children).map(child => { - return React.cloneElement(child, { - productTile: productTile - }); + if (child.type !== TileActions) { + return React.cloneElement(child, { + productTile: productTile + }); + } else { + return child; + } })}
); From 68fa459ba728e00b6964f4169d8851730d2a717c Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 31 May 2019 08:24:21 -0700 Subject: [PATCH 14/25] updated tile tests and deleted productTile.test --- src/Tile/ProductTile.test.js | 54 -------------------- src/Tile/Tile.test.js | 37 ++++++++++++++ src/Tile/__snapshots__/Tile.test.js.snap | 65 ++++++++++++++++++++++++ 3 files changed, 102 insertions(+), 54 deletions(-) delete mode 100644 src/Tile/ProductTile.test.js diff --git a/src/Tile/ProductTile.test.js b/src/Tile/ProductTile.test.js deleted file mode 100644 index 0f0d08aff..000000000 --- a/src/Tile/ProductTile.test.js +++ /dev/null @@ -1,54 +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(); - }); - - test('className is correct', () => { - const wrapper = mount(); - - expect(wrapper.find('.fd-product-tile').length).toEqual(1); - expect(wrapper.find('.fd-tile').length).toEqual(0); - }); - - 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/Tile.test.js b/src/Tile/Tile.test.js index 052a79892..510fe3c3c 100644 --- a/src/Tile/Tile.test.js +++ b/src/Tile/Tile.test.js @@ -89,6 +89,26 @@ describe('', () => { ); + const productTile = ( + + + +

Tile Description

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

Tile Description

+ + + ); + test('create tile component', () => { // simple tile let component = renderer.create(simpleTile); @@ -119,6 +139,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 +160,11 @@ describe('', () => { ).toBe('Sample'); }); }); + + test('className is correct', () => { + const wrapper = mount(); + + expect(wrapper.find('.fd-product-tile').length).toEqual(1); + expect(wrapper.find('.fd-tile').length).toEqual(0); + }); }); diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap index fbd0818d7..5dd23a54c 100644 --- a/src/Tile/__snapshots__/Tile.test.js.snap +++ b/src/Tile/__snapshots__/Tile.test.js.snap @@ -45,6 +45,11 @@ exports[` create tile component 3`] = ` >
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 +

+
+
+`; From 4045b435e34017e04604193d380dc5df5b0cff87 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 31 May 2019 08:39:54 -0700 Subject: [PATCH 15/25] product tile media tests complete with old file deleted --- src/Tile/ProductTileMedia.test.js | 34 ----------- src/Tile/Tile.test.js | 10 +++- src/Tile/TileMedia.test.js | 9 ++- .../__snapshots__/ProductTile.test.js.snap | 58 ------------------- .../ProductTileMedia.test.js.snap | 13 ----- src/Tile/__snapshots__/TileMedia.test.js.snap | 16 +++++ 6 files changed, 33 insertions(+), 107 deletions(-) delete mode 100644 src/Tile/ProductTileMedia.test.js delete mode 100644 src/Tile/__snapshots__/ProductTile.test.js.snap delete mode 100644 src/Tile/__snapshots__/ProductTileMedia.test.js.snap diff --git a/src/Tile/ProductTileMedia.test.js b/src/Tile/ProductTileMedia.test.js deleted file mode 100644 index 9a8249805..000000000 --- a/src/Tile/ProductTileMedia.test.js +++ /dev/null @@ -1,34 +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(); - }); - - test('className is correct', () => { - const wrapper = mount(); - - expect(wrapper.find('.fd-product-tile__media').length).toEqual(1); - expect(wrapper.find('.fd-tile__media').length).toEqual(0); - - }); - - 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.test.js b/src/Tile/Tile.test.js index 510fe3c3c..ff226c6a1 100644 --- a/src/Tile/Tile.test.js +++ b/src/Tile/Tile.test.js @@ -162,9 +162,17 @@ describe('', () => { }); test('className is correct', () => { - const wrapper = mount(); + const wrapper = mount( + + + + ); expect(wrapper.find('.fd-product-tile').length).toEqual(1); + expect(wrapper.find('.fd-product-tile__media').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__media').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..cdc018ea1 100644 --- a/src/Tile/TileMedia.test.js +++ b/src/Tile/TileMedia.test.js @@ -12,14 +12,21 @@ describe('', () => { ); + const productTileMedia = ( + + ); + test('create tile media component', () => { let component = renderer.create(tileMedia); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); + + component = renderer.create(productTileMedia); + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); }); describe('Prop spreading', () => { - test('should allow props to be spread to the TileMedia component', () => { const element = mount(); diff --git a/src/Tile/__snapshots__/ProductTile.test.js.snap b/src/Tile/__snapshots__/ProductTile.test.js.snap deleted file mode 100644 index 6573670a3..000000000 --- a/src/Tile/__snapshots__/ProductTile.test.js.snap +++ /dev/null @@ -1,58 +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__/ProductTileMedia.test.js.snap b/src/Tile/__snapshots__/ProductTileMedia.test.js.snap deleted file mode 100644 index 28e7efc74..000000000 --- a/src/Tile/__snapshots__/ProductTileMedia.test.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` create ProductTile.Media component 1`] = ` -
-`; diff --git a/src/Tile/__snapshots__/TileMedia.test.js.snap b/src/Tile/__snapshots__/TileMedia.test.js.snap index e512e920c..fac53fba7 100644 --- a/src/Tile/__snapshots__/TileMedia.test.js.snap +++ b/src/Tile/__snapshots__/TileMedia.test.js.snap @@ -3,6 +3,11 @@ exports[` create tile media component 1`] = `
create tile media component 1`] = ` />
`; + +exports[` create tile media component 2`] = ` +
+`; From 0a3e22548a8b9c7317e7f56dff2bad51071c78dc Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 31 May 2019 08:42:18 -0700 Subject: [PATCH 16/25] deleted product tile content tests --- src/Tile/ProductTileContent.test.js | 45 ----------------------------- 1 file changed, 45 deletions(-) delete mode 100644 src/Tile/ProductTileContent.test.js diff --git a/src/Tile/ProductTileContent.test.js b/src/Tile/ProductTileContent.test.js deleted file mode 100644 index 752ec4494..000000000 --- a/src/Tile/ProductTileContent.test.js +++ /dev/null @@ -1,45 +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(); - - }); - - test('className is correct', () => { - const wrapper = mount(); - - expect(wrapper.find('.fd-product-tile__content').length).toEqual(1); - expect(wrapper.find('.fd-tile__content').length).toEqual(0); - }); - - 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'); - }); - }); -}); From 91af473ef2b986dffe593d6972a50aa8303d7dbd Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 31 May 2019 08:44:43 -0700 Subject: [PATCH 17/25] product tile snapshot deleted --- .../ProductTileContent.test.js.snap | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 src/Tile/__snapshots__/ProductTileContent.test.js.snap 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 -

-
-`; From 2818cd88537864be4802712597e9ce61a9419e26 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 31 May 2019 09:02:32 -0700 Subject: [PATCH 18/25] deleted eslint disable --- src/Tile/_TileMedia.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Tile/_TileMedia.js b/src/Tile/_TileMedia.js index 5d78dc708..8ba52a1c4 100644 --- a/src/Tile/_TileMedia.js +++ b/src/Tile/_TileMedia.js @@ -1,7 +1,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; -/*eslint-disable*/ + const TileMedia = props => { const { children, className, productTile, backgroundImage, ...rest } = props; @@ -12,7 +12,6 @@ const TileMedia = props => { }, className ); - console.log(productTile); return (
Date: Fri, 31 May 2019 09:37:46 -0700 Subject: [PATCH 19/25] deleted unneeded files and references to product tile --- src/Tile/ProductTile.js | 15 -- src/Tile/Tile.js | 2 +- src/Tile/_ProductTileContent.js | 10 - src/Tile/_ProductTileMedia.js | 24 -- src/Tile/__snapshots__/Tile.test.js.snap | 236 ------------------ .../__snapshots__/TileActions.test.js.snap | 26 -- .../__snapshots__/TileContent.test.js.snap | 16 -- src/Tile/__snapshots__/TileGrid.test.js.snap | 47 ---- src/Tile/__snapshots__/TileMedia.test.js.snap | 28 --- .../documentation/Playground/Playground.js | 12 +- src/index.js | 1 - 11 files changed, 7 insertions(+), 410 deletions(-) delete mode 100644 src/Tile/ProductTile.js delete mode 100644 src/Tile/_ProductTileContent.js delete mode 100644 src/Tile/_ProductTileMedia.js delete mode 100644 src/Tile/__snapshots__/Tile.test.js.snap delete mode 100644 src/Tile/__snapshots__/TileActions.test.js.snap delete mode 100644 src/Tile/__snapshots__/TileContent.test.js.snap delete mode 100644 src/Tile/__snapshots__/TileGrid.test.js.snap delete mode 100644 src/Tile/__snapshots__/TileMedia.test.js.snap diff --git a/src/Tile/ProductTile.js b/src/Tile/ProductTile.js deleted file mode 100644 index 084b1dadf..000000000 --- a/src/Tile/ProductTile.js +++ /dev/null @@ -1,15 +0,0 @@ -import ProductTileContent from './_ProductTileContent'; -import ProductTileMedia from './_ProductTileMedia'; -import React from 'react'; -import Tile from './Tile'; - -const ProductTile = props => { - return (); -}; - -ProductTile.displayName = 'ProductTile'; - -ProductTile.Content = ProductTileContent; -ProductTile.Media = ProductTileMedia; - -export default ProductTile; diff --git a/src/Tile/Tile.js b/src/Tile/Tile.js index 002559317..9911fc149 100644 --- a/src/Tile/Tile.js +++ b/src/Tile/Tile.js @@ -65,7 +65,7 @@ Tile.propDescriptions = { backgroundColor: 'Sets a background color class.', colorAccent: 'Sets a background color accent class. Options include numbers from 1 to 9.', columnSpan: 'Number of columns the tile covers.', - productTile: '_INTERNAL USE ONLY._', + productTile: 'Set to **true** to mark component as a product tile.', rowSpan: 'Number of rows the tile covers.' }; diff --git a/src/Tile/_ProductTileContent.js b/src/Tile/_ProductTileContent.js deleted file mode 100644 index 36dd178c1..000000000 --- a/src/Tile/_ProductTileContent.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import TileContent from './_TileContent'; - -const ProductTileContent = props => { - return (); -}; - -ProductTileContent.displayName = 'ProductTile.Content'; - -export default ProductTileContent; diff --git a/src/Tile/_ProductTileMedia.js b/src/Tile/_ProductTileMedia.js deleted file mode 100644 index 76f338c65..000000000 --- a/src/Tile/_ProductTileMedia.js +++ /dev/null @@ -1,24 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import TileMedia from './_TileMedia'; - -const ProductTileMedia = props => { - const { image } = props; - - return ( - - ); -}; - -ProductTileMedia.displayName = 'ProductTile.Media'; - -ProductTileMedia.propTypes = { - image: PropTypes.string.isRequired -}; - -ProductTileMedia.propDescriptions = { - image: 'URL of the image.' -}; - -export default ProductTileMedia; diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap deleted file mode 100644 index 5dd23a54c..000000000 --- a/src/Tile/__snapshots__/Tile.test.js.snap +++ /dev/null @@ -1,236 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` create tile component 1`] = ` -
-
-

- Tile Title -

-

- Tile Description -

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

- Tile Title -

-

- Tile Description -

-
-
-`; - -exports[` create tile component 3`] = ` -
-
- -
-
-

- Tile Title -

-

- Tile Description -

-
-
-`; - -exports[` create tile component 4`] = ` -
-
-

- Tile Title -

-
-
-
-
-
-
-
-
-
-
-`; - -exports[` create tile component 5`] = ` -
-
- -
-
-

- Tile Title -

-

- Tile Description -

-
-
-`; - -exports[` create tile component 6`] = ` -
-
-

- Tile Title -

-
-
-
-
-
-
-
-
-
-
-`; - -exports[` create tile component 7`] = ` -
-
-
-

- Tile Title -

-

- Tile Description -

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

- Tile Title -

-

- Tile Description -

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

- Tile Title -

-

- Tile Description -

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

- Tile Title -

-

- Tile Description -

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

- Tile Title -

-

- Tile Description -

-
-
-
-`; diff --git a/src/Tile/__snapshots__/TileMedia.test.js.snap b/src/Tile/__snapshots__/TileMedia.test.js.snap deleted file mode 100644 index fac53fba7..000000000 --- a/src/Tile/__snapshots__/TileMedia.test.js.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` create tile media component 1`] = ` -
- -
-`; - -exports[` create tile media component 2`] = ` -
-`; diff --git a/src/_playground/documentation/Playground/Playground.js b/src/_playground/documentation/Playground/Playground.js index 64b9676f8..4b494cdac 100644 --- a/src/_playground/documentation/Playground/Playground.js +++ b/src/_playground/documentation/Playground/Playground.js @@ -7,9 +7,9 @@ import { Identifier } from '../../../'; import { Image } from '../../../'; import { ListGroup } from '../../../'; import PropTypes from 'prop-types'; +import { Tile } from '../../../'; import { Badge, Label, Status } from '../../../'; import { FormGroup, FormItem, FormLabel, InputGroup } from '../../../'; -import { ProductTile, Tile } from '../../../'; import React, { Component } from 'react'; class Playground extends Component { @@ -533,9 +533,9 @@ class Playground extends Component { } else if (this.state.component === 'product') { componentToGenerate = ( - - - + + - - + + ); } 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'; From c79604ffbe2529d62a0defa11f0c0bfe9d4153f2 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Fri, 31 May 2019 11:21:47 -0700 Subject: [PATCH 20/25] media with actions example added and tileContent heading class updated --- src/Tile/Tile.Component.js | 26 ++ src/Tile/_TileContent.js | 10 +- src/Tile/__snapshots__/Tile.test.js.snap | 236 ++++++++++++++++++ .../__snapshots__/TileActions.test.js.snap | 26 ++ .../__snapshots__/TileContent.test.js.snap | 16 ++ src/Tile/__snapshots__/TileGrid.test.js.snap | 47 ++++ src/Tile/__snapshots__/TileMedia.test.js.snap | 28 +++ 7 files changed, 388 insertions(+), 1 deletion(-) create mode 100644 src/Tile/__snapshots__/Tile.test.js.snap create mode 100644 src/Tile/__snapshots__/TileActions.test.js.snap create mode 100644 src/Tile/__snapshots__/TileContent.test.js.snap create mode 100644 src/Tile/__snapshots__/TileGrid.test.js.snap create mode 100644 src/Tile/__snapshots__/TileMedia.test.js.snap diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js index 3121e24e4..9e616489b 100644 --- a/src/Tile/Tile.Component.js +++ b/src/Tile/Tile.Component.js @@ -74,6 +74,32 @@ export const TileComponent = () => { + + + + + + + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + control={
+
+
+
+
+`; + +exports[` create tile component 5`] = ` +
+
+ +
+
+

+ Tile Title +

+

+ Tile Description +

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

+ Tile Title +

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

+ Tile Title +

+

+ Tile Description +

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

+ Tile Title +

+

+ Tile Description +

+
+
+`; diff --git a/src/Tile/__snapshots__/TileActions.test.js.snap b/src/Tile/__snapshots__/TileActions.test.js.snap new file mode 100644 index 000000000..6b3240eb8 --- /dev/null +++ b/src/Tile/__snapshots__/TileActions.test.js.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` create Tile.Actions component 1`] = ` +
+
+
+
+
+
+
+
+`; diff --git a/src/Tile/__snapshots__/TileContent.test.js.snap b/src/Tile/__snapshots__/TileContent.test.js.snap new file mode 100644 index 000000000..579a45993 --- /dev/null +++ b/src/Tile/__snapshots__/TileContent.test.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` create Tile.Content component 1`] = ` +
+

+ Tile Title +

+

+ Tile Description +

+
+`; diff --git a/src/Tile/__snapshots__/TileGrid.test.js.snap b/src/Tile/__snapshots__/TileGrid.test.js.snap new file mode 100644 index 000000000..d8a4ab04a --- /dev/null +++ b/src/Tile/__snapshots__/TileGrid.test.js.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` create tileGrid component 1`] = ` +
+
+
+

+ Tile Title +

+

+ Tile Description +

+
+
+
+`; + +exports[` create tileGrid component 2`] = ` +
+
+
+

+ Tile Title +

+

+ Tile Description +

+
+
+
+`; diff --git a/src/Tile/__snapshots__/TileMedia.test.js.snap b/src/Tile/__snapshots__/TileMedia.test.js.snap new file mode 100644 index 000000000..fac53fba7 --- /dev/null +++ b/src/Tile/__snapshots__/TileMedia.test.js.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` create tile media component 1`] = ` +
+ +
+`; + +exports[` create tile media component 2`] = ` +
+`; From a5199f43a8a5cbf0e8a594bed5dd02067d513cd2 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Mon, 3 Jun 2019 09:28:44 -0700 Subject: [PATCH 21/25] updated example page with photo and no breaks --- src/Tile/Tile.Component.js | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js index 9e616489b..60519c3f2 100644 --- a/src/Tile/Tile.Component.js +++ b/src/Tile/Tile.Component.js @@ -102,23 +102,22 @@ export const TileComponent = () => { -
- - - -

Tile Description

- - - -
+ + + +

Tile Description

+ + + - - - -

Tile Description

- - -
+ + + + +

Tile Description

+ + Date: Mon, 3 Jun 2019 09:34:07 -0700 Subject: [PATCH 22/25] updated tests with dummy url and took away isButton --- src/Tile/Tile.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Tile/Tile.test.js b/src/Tile/Tile.test.js index ff226c6a1..c7413b76e 100644 --- a/src/Tile/Tile.test.js +++ b/src/Tile/Tile.test.js @@ -90,9 +90,9 @@ describe('', () => { ); const productTile = ( - - +

Tile Description

 @@ -101,7 +101,7 @@ describe('', () => { const disabledProductTile = ( -

Tile Description

From eae649bfcb4c2e3ea4ffb14934d6bb1b9c97ca71 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Mon, 3 Jun 2019 10:41:47 -0700 Subject: [PATCH 23/25] background image on tile --- src/Tile/Tile.Component.js | 8 ++++---- src/Tile/Tile.js | 18 +++++++++++++----- src/Tile/_TileMedia.js | 15 +++------------ 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js index 60519c3f2..5343f1fdd 100644 --- a/src/Tile/Tile.Component.js +++ b/src/Tile/Tile.Component.js @@ -102,8 +102,8 @@ export const TileComponent = () => { - - +

Tile Description

 @@ -112,8 +112,8 @@ export const TileComponent = () => { - - +

Tile Description

 diff --git a/src/Tile/Tile.js b/src/Tile/Tile.js index 9911fc149..ac85a04a4 100644 --- a/src/Tile/Tile.js +++ b/src/Tile/Tile.js @@ -13,6 +13,7 @@ const Tile = props => { columnSpan, colorAccent, backgroundColor, + backgroundImage, children, className, productTile, @@ -36,14 +37,19 @@ const Tile = props => {
+ {productTile && +
+ } {React.Children.toArray(children).map(child => { - if (child.type !== TileActions) { - return React.cloneElement(child, { - productTile: productTile - }); - } else { + const isAction = child.type && child.type.displayName === 'Tile.Actions'; + + if (isAction) { return child; } + + return React.cloneElement(child, { + productTile: productTile + }); })}
); @@ -53,6 +59,7 @@ Tile.displayName = 'Tile'; Tile.propTypes = { backgroundColor: PropTypes.number, + backgroundImage: PropTypes.string, className: PropTypes.string, colorAccent: PropTypes.number, columnSpan: CustomPropTypes.range(1, 6), @@ -63,6 +70,7 @@ Tile.propTypes = { 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.', diff --git a/src/Tile/_TileMedia.js b/src/Tile/_TileMedia.js index 8ba52a1c4..b89fa0d3c 100644 --- a/src/Tile/_TileMedia.js +++ b/src/Tile/_TileMedia.js @@ -3,31 +3,22 @@ import PropTypes from 'prop-types'; import React from 'react'; const TileMedia = props => { - const { children, className, productTile, backgroundImage, ...rest } = props; + const { children, className, productTile, ...rest } = props; const tileMediaClasses = classnames( - { - 'fd-tile__media': !productTile, - 'fd-product-tile__media': productTile - }, + 'fd-tile__media', className ); return ( -
{children}
); +
{children}
); }; TileMedia.displayName = 'Tile.Media'; TileMedia.propTypes = { - backgroundImage: PropTypes.string, children: PropTypes.node, className: PropTypes.string }; -TileMedia.propDescriptions = { - backgroundImage: 'URL of the background image for product tile.' -}; - export default TileMedia; From 1a33e6f16ec4bd77a9a37964993fa66a0c1d85a7 Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Mon, 3 Jun 2019 11:01:04 -0700 Subject: [PATCH 24/25] deleted tile playground and fixed tests to background image change --- src/Tile/Tile.Component.js | 29 +-------- src/Tile/Tile.test.js | 18 +++-- src/Tile/TileMedia.test.js | 8 --- src/Tile/__snapshots__/Tile.test.js.snap | 25 +++---- src/Tile/__snapshots__/TileMedia.test.js.snap | 16 ----- .../documentation/Playground/Playground.js | 65 ------------------- 6 files changed, 18 insertions(+), 143 deletions(-) diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js index 5343f1fdd..e30b3a87e 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, Tile, TileGrid } from '../'; -import { ComponentPage, Example, Playground, Separator } from '../_playground'; +import { ComponentPage, Example } from '../_playground'; export const TileComponent = () => { return ( @@ -162,33 +162,6 @@ export const TileComponent = () => { - - - - - - -

Tile Description

- - - - ); }; diff --git a/src/Tile/Tile.test.js b/src/Tile/Tile.test.js index c7413b76e..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 = ( - + @@ -90,9 +90,9 @@ describe('', () => { ); const productTile = ( - - +

Tile Description

 @@ -100,8 +100,9 @@ describe('', () => { ); const disabledProductTile = ( - - +

Tile Description

@@ -161,18 +162,15 @@ describe('', () => { }); }); - test('className is correct', () => { + 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__media').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__media').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 cdc018ea1..742ba5e85 100644 --- a/src/Tile/TileMedia.test.js +++ b/src/Tile/TileMedia.test.js @@ -12,18 +12,10 @@ describe('', () => { ); - const productTileMedia = ( - - ); - test('create tile media component', () => { let component = renderer.create(tileMedia); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); - - component = renderer.create(productTileMedia); - tree = component.toJSON(); - expect(tree).toMatchSnapshot(); }); describe('Prop spreading', () => { diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap index a6e0073f7..1ebd7ecc2 100644 --- a/src/Tile/__snapshots__/Tile.test.js.snap +++ b/src/Tile/__snapshots__/Tile.test.js.snap @@ -41,15 +41,9 @@ 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`] = `
+
@@ -213,13 +203,16 @@ exports[` create tile component 8`] = ` className="fd-product-tile is-disabled" >
+
diff --git a/src/Tile/__snapshots__/TileMedia.test.js.snap b/src/Tile/__snapshots__/TileMedia.test.js.snap index fac53fba7..e512e920c 100644 --- a/src/Tile/__snapshots__/TileMedia.test.js.snap +++ b/src/Tile/__snapshots__/TileMedia.test.js.snap @@ -3,11 +3,6 @@ exports[` create tile media component 1`] = `
create tile media component 1`] = ` />
`; - -exports[` create tile media component 2`] = ` -
-`; diff --git a/src/_playground/documentation/Playground/Playground.js b/src/_playground/documentation/Playground/Playground.js index 4b494cdac..00adc95be 100644 --- a/src/_playground/documentation/Playground/Playground.js +++ b/src/_playground/documentation/Playground/Playground.js @@ -7,7 +7,6 @@ import { Identifier } from '../../../'; import { Image } from '../../../'; import { ListGroup } from '../../../'; import PropTypes from 'prop-types'; -import { Tile } from '../../../'; import { Badge, Label, Status } from '../../../'; import { FormGroup, FormItem, FormLabel, InputGroup } from '../../../'; import React, { Component } from 'react'; @@ -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; From da92e7611a8e23a2702ea78a57ff7db78f3d8c9e Mon Sep 17 00:00:00 2001 From: "hannah.van.seeters" Date: Tue, 4 Jun 2019 09:52:56 -0700 Subject: [PATCH 25/25] took out disbled example and role=button --- src/Tile/Tile.Component.js | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js index e30b3a87e..e6822988f 100644 --- a/src/Tile/Tile.Component.js +++ b/src/Tile/Tile.Component.js @@ -30,7 +30,7 @@ export const TileComponent = () => {
- + @@ -40,7 +40,7 @@ export const TileComponent = () => {
- + @@ -102,24 +102,13 @@ export const TileComponent = () => { - +

Tile Description

 - - - -

Tile Description

- - - - @@ -143,7 +132,7 @@ export const TileComponent = () => {

Tile Description

 - +