1 files changed, 89 insertions, 0 deletions
diff --git a/stories/react/Tiles.stories.js b/stories/react/Tiles.stories.js
new file mode 100644
index 0000000..04a6fb5
--- /dev/null
+++ b/stories/react/Tiles.stories.js
@@ -0,0 +1,89 @@
+import React from 'react';
+
+import Examples from './utils/Examples.js';
+import SVGIcon from '../../src/react/SVGIcon.js';
+import Button from '../../src/react/Button.js';
+
+import Tile from '../../src/react/Tile.js';
+import TileInfo from '../../src/react/TileInfo.js';
+import TileInfoLine from '../../src/react/TileInfoLine.js';
+import TileFooter from '../../src/react/TileFooter.js';
+import TileFooterCell from '../../src/react/TileFooterCell.js';
+
+import HTMLTileWithoutFooter from '../../components/tile/tile-without-footer.html';
+import HTMLVspTile from '../../components/tile/vsp-tile.html';
+import HTMLVlmTile from '../../components/tile/vlm-tile.html';
+import HTMLVendorTile from '../../components/tile/vendor-tile.html';
+import HTMLVfcTile from '../../components/tile/vfc-tile.html';
+
+let examples = {
+	'Without footer': {
+		jsx: <Tile headerText='header' headerColor='blue' iconName='vsp' iconColor='blue'>
+					<TileInfo>
+						<TileInfoLine type='supertitle'>Supertitle</TileInfoLine>
+						<TileInfoLine type='title'>Title</TileInfoLine>
+					</TileInfo>
+				</Tile>,
+		html: HTMLTileWithoutFooter
+	},
+	VFC: {
+		jsx: <Tile headerText='vfc' headerColor='purple' iconName='network'>
+					<TileInfo>
+						<TileInfoLine type='title'>Title</TileInfoLine>
+						<TileInfoLine type='subtitle'>V 1.0</TileInfoLine>
+					</TileInfo>
+					<TileFooter>
+						<TileFooterCell>Certified</TileFooterCell>
+					</TileFooter>
+				</Tile>,
+		html: HTMLVfcTile
+	},
+	VSP: {
+		jsx: <Tile headerText='vsp' headerColor='blue' iconName='vsp' iconColor='blue'>
+					<TileInfo>
+						<TileInfoLine type='supertitle'>VLM</TileInfoLine>
+						<TileInfoLine type='title'>VSP name</TileInfoLine>
+					</TileInfo>
+					<TileFooter>
+						<TileFooterCell>Draft</TileFooterCell>
+					</TileFooter>
+				</Tile>,
+		html: HTMLVspTile
+	},
+	VLM: {
+		jsx: <Tile headerText='vlm' headerColor='purple' iconName='vlm' iconColor='purple'>
+					<TileInfo>
+						<TileInfoLine type='title'>VLM name</TileInfoLine>
+					</TileInfo>
+					<TileFooter>
+						<TileFooterCell>Certified</TileFooterCell>
+						<TileFooterCell>
+							<SVGIcon name='versionControllerPermissions' label='Owner' labelPosition='left' />
+						</TileFooterCell>
+					</TileFooter>
+				</Tile>,
+		html: HTMLVlmTile
+	},
+	Vendor: {
+		jsx: <Tile iconName='vendor' iconColor='dark-gray'>
+					<TileInfo align='center'>
+						<TileInfoLine type='title'>Vendor name</TileInfoLine>
+						<TileInfoLine>
+							<Button btnType='primary' onClick={() => {}}>100 VSPs</Button>
+						</TileInfoLine>
+					</TileInfo>
+					<TileFooter align='center'>
+						<TileFooterCell>
+							<Button btnType='link' color='primary' iconName='plusThin' onClick={() => {}}>Create new VSP</Button>
+						</TileFooterCell>
+					</TileFooter>
+				</Tile>,
+		html: HTMLVendorTile
+	},
+};
+
+const Tiles = () => (
+	<Examples examples={examples} />
+);
+
+export default Tiles;