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;
|
