Merge cbccea5 into bd39ab0

packages/clay-card-grid/demos/index.html

@@ -24,10 +24,7 @@ <h1 class="page-title">
 		ClayCardGrid
 	</h1>
 
-	<div id="container1"></div>
-	<div id="container2"></div>
-	<div id="container3"></div>
-	<div id="container4"></div>
+	<div id="container"></div>
 
 	<script type="text/javascript">
 		let spritemap = '../../../node_modules/clay/build/images/icons/icons.svg';
@@ -48,146 +45,231 @@ <h1 class="page-title">
 			},
 		];
 
-		new metal.ClayCardGrid({
-			items: [
-				{
-					title: 'Folder 1',
-					type: 'folder',
-				},
-				{
-					title: 'Folder 2',
-					type: 'folder',
-				},
-				{
-					title: 'Folder 3',
-					type: 'folder',
-				},
-				{
-					title: 'Folder 4',
-					type: 'folder',
-				},
-				{
-					title: 'Folder 5',
-					type: 'folder',
-				},
-				{
-					title: 'Folder 6',
-					type: 'folder',
-				},
-			],
-			selectable: true,
-			spritemap: spritemap,
-			title: 'Folders',
-		}, '#container1');
-
-		new metal.ClayCardGrid({
-			items: [
-				{
-					title: 'File Item 1',
-					type: 'file',
-				},
-				{
-					title: 'File Item 2',
-					type: 'file',
-				},
-				{
-					title: 'File Item 3',
-					type: 'file',
-				},
-				{
-					title: 'File Item 4',
-					type: 'file',
-				},
-				{
-					title: 'File Item 5',
-					type: 'file',
-				},
-				{
-					title: 'File Item 6',
-					type: 'file',
-				},
-			],
-			selectable: true,
-			spritemap: spritemap,
-			title: 'File Items',
-		}, '#container2');
-
-		new metal.ClayCardGrid({
-			items: [
-				{
-					initials: 'CL',
-					title: 'User Item 1',
-					type: 'user',
-				},
-				{
-					initials: 'MC',
-					title: 'User Item 2',
-					type: 'user',
-				},
-				{
-					initials: 'CM',
-					title: 'User Item 3',
-					type: 'user',
-				},
-				{
-					initials: 'JC',
-					title: 'User Item 4',
-					type: 'user',
-				},
-				{
-					initials: 'ED',
-					title: 'User Item 5',
-					type: 'user',
-				},
-				{
-					initials: 'MA',
-					title: 'User Item 6',
-					type: 'user',
-				},
-			],
-			selectable: true,
-			spritemap: spritemap,
-			title: 'User Items',
-		}, '#container3');
+		let items = [
+			{
+				items: [
+					{
+						downloadHref: '#sabers',
+						title: 'Sabers',
+						type: 'folder',
+					},
+					{
+						downloadHref: '#scripts',
+						title: 'Scripts',
+						type: 'folder',
+					},
+				],
+				label: 'Folders',
+			},
+			{
+				items: [
+					{
+						director: 'George Lucas',
+						downloadHref: '#',
+						image: './swepisode1.jpg',
+						rating: 10,
+						releaseDate: 'May 19th 1999',
+						status: ['Error', 'Pending'],
+						title: 'Episode I: The Phantom Menace',
+						type: 'MOV',
+					},
+					{
+						director: 'George Lucas',
+						downloadHref: '#',
+						rating: 50,
+						releaseDate: 'May 12th 2002',
+						status: ['Watched'],
+						title: 'Episode II: Attack of the Clones',
+						type: 'MOV',
+					},
+					{
+						director: 'George Lucas',
+						downloadHref: '#',
+						image: './swepisode3.jpg',
+						rating: 60,
+						releaseDate: 'May 12th 2005',
+						status: ['Watched'],
+						title: 'Episode III: Revenge of the Sith',
+						type: 'MOV',
+					},
+					{
+						director: 'George Lucas',
+						downloadHref: '#',
+						image: './swepisode4.jpg',
+						rating: 90,
+						releaseDate: 'May 25th 1977',
+						status: ['Watched'],
+						title: 'Episode IV: A New Hope',
+						type: 'MOV',
+					},
+					{
+						director: 'Irvin Kershner',
+						downloadHref: '#',
+						image: './swepisode5.jpg',
+						rating: 100,
+						releaseDate: 'May 21th 1980',
+						status: ['Watched'],
+						title: 'Episode V: The Empire Strikes Back',
+						type: 'MOV',
+					},
+					{
+						director: 'Richard Marquand',
+						downloadHref: '#',
+						image: './swepisode6.jpg',
+						rating: 90,
+						releaseDate: 'May 25th 1983',
+						status: ['Watched'],
+						title: 'Episode VI: Return of the Jedi',
+						type: 'MOV',
+					},
+					{
+						director: 'J. J. Abrams',
+						downloadHref: '#',
+						image: './swepisode7.jpg',
+						rating: 70,
+						releaseDate: 'December 14th 2015',
+						status: ['Watched'],
+						title: 'Episode VII: The Force Awakens',
+						type: 'MOV',
+					},
+					{
+						director: 'Rian Johnson',
+						downloadHref: '#',
+						image: './swepisode8.jpg',
+						rating: 0,
+						releaseDate: 'December 9th 2017',
+						status: ['Pending'],
+						title: 'Episode VIII: The Last Jedi',
+						type: 'MOV',
+					},
+				],
+				label: 'Saga',
+			},
+			{
+				items: [
+					{
+						director: 'Gareth Edwards',
+						downloadHref: '#',
+						image: './swrogueone.jpg',
+						rating: 70,
+						releaseDate: 'December 10th 2016',
+						status: ['Watched'],
+						title: 'Rogue One: A Star Wars Story',
+						type: 'MKV',
+					},
+					{
+						director: 'Ron Howard',
+						downloadHref: '#',
+						image: './swsolo.jpg',
+						rating: 0,
+						releaseDate: 'May 25th 2018',
+						status: ['Pending'],
+						title: 'Solo: A Star Wars Story',
+						type: 'MKV',
+					},
+				],
+				label: 'Expanded Universe'
+			},
+			{
+				items: [
+					{
+						character: 'Darth Vader',
+						initials: 'DV',
+						side: 'dark',
+						type: 'character',
+					},
+					{
+						character: 'Emperor Palpatine',
+						initials: 'EP',
+						side: 'dark',
+						type: 'character',
+					},
+					{
+						character: 'Han Solo',
+						initials: 'HS',
+						side: 'light',
+						type: 'character',
+					},
+					{
+						character: 'Kylo Ren',
+						initials: 'KR',
+						side: 'dark',
+						type: 'character',
+					},
+					{
+						character: 'Leia Organa',
+						initials: 'LO',
+						side: 'light',
+						type: 'character',
+					},
+					{
+						character: 'Luke Skywalker',
+						initials: 'LS',
+						side: 'light',
+						type: 'character',
+					},
+					{
+						character: 'Yoda',
+						initials: 'Y',
+						side: 'light',
+						type: 'character',
+					},
+				],
+				label: 'Characters',
+			}
+		];
+
+		items.forEach(item => {
+			item.items.forEach(nestedItem => {
+				nestedItem.actionItems = actionItems;
+			});
+		});
 
-
 		new metal.ClayCardGrid({
-			items: [
-				{
-					fileType: 'JPG',
-					imageSrc: './image1.jpg',
-					title: 'Image Item 1',
-				},
-				{
-					fileType: 'JPG',
-					imageSrc: './image1.jpg',
-					title: 'Image Item 2',
-				},
-				{
-					fileType: 'JPG',
-					imageSrc: './image1.jpg',
-					title: 'Image Item 3',
-				},
-				{
-					fileType: 'JPG',
-					imageSrc: './image1.jpg',
-					title: 'Image Item 4',
-				},
-				{
-					fileType: 'JPG',
-					imageSrc: './image1.jpg',
-					title: 'Image Item 5',
-				},
+			items: items,
+			schema: [
 				{
-					fileType: 'JPG',
-					imageSrc: './image1.jpg',
-					title: 'Image Item 6',
+					contentRendererMap: {
+						'character': 'user',
+						'folder': 'horizontal',
+						'MKV': 'file',
+					},
+					fieldsMap: {
+						contentRenderer: 'type',
+						description: 'director',
+						fileType: 'type',
+						href: 'downloadHref',
+						icon: 'type',
+						imageAlt: 'title',
+						imageSrc: 'image',
+						initials: 'initials',
+						labels: 'status',
+						title: 'title',
+						userColor: 'side',
+						username: 'character',
+					},
+					fileTypeStylesMap: {
+						'MOV': 'danger',
+					},
+					iconsMap: {
+						'folder': 'folder',
+						'MOV': 'video',
+						'MKV': 'video',
+					},
+					labelStylesMap: {
+						'Watched': 'success',
+						'Pending': 'warning',
+						'*': 'info',
+					},
+					userColorsMap: {
+						'light': 'primary',
+						'dark': 'danger',
+					}
 				},
 			],
 			selectable: true,
 			spritemap: spritemap,
-			title: 'Image Items',
-		}, '#container4');
+		}, '#container');
 	</script>
 </body>
 </html>