summaryrefslogtreecommitdiffstats
path: root/stories/react/Tiles.stories.js
blob: 04a6fb5fc0b748ec99b4567369c7fd00771aa19e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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;