Update demos | Fixes liferay#572

matuzalemsteles · Feb 20, 2018 · 96280e6 · 96280e6
1 parent 9712d9e
commit 96280e6
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 8 deletions.
diff --git a/packages/clay-management-toolbar/demos/a11y.html b/packages/clay-management-toolbar/demos/a11y.html
@@ -59,10 +59,12 @@ <h4>Without Search</h4>
 		</div>
 	</div>
 
-	<div id="container0"></div>
-	<div id="container1"></div>
-	<div id="container2"></div>
-	<div id="container3"></div>
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With search results bar</h4>
+			<div id="search-results-bar"></div>
+		</div>
+	</div>
 
 	<script type="text/javascript">
 		const actionItems = [
@@ -189,6 +191,21 @@ <h4>Without Search</h4>
 			viewTypes: viewTypes,
 		},
 		'#without-search-block');
+
+		//With search results bar
+		new metal.ClayManagementToolbar({
+			creationMenu: true,
+			filterItems: filterItems,
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			searchValue: 'red',
+			selectable: true,
+			sortingOrder: 'asc',
+			spritemap: spritemap,
+			totalItems: 6,
+			viewTypes: viewTypes,
+		},
+		'#search-results-bar');
 	</script>
 </body>
 </html>
diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html
@@ -59,10 +59,12 @@ <h4>Without Search</h4>
 		</div>
 	</div>
 
-	<div id="container0"></div>
-	<div id="container1"></div>
-	<div id="container2"></div>
-	<div id="container3"></div>
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With search results bar</h4>
+			<div id="search-results-bar"></div>
+		</div>
+	</div>
 
 	<script type="text/javascript">
 		const actionItems = [
@@ -262,6 +264,29 @@ <h4>Without Search</h4>
 			viewTypes: viewTypes,
 		},
 		'#without-search-block');
+
+		//With search results bar
+		new metal.ClayManagementToolbar({
+			creationMenu: true,
+			filterItems: filterItems,
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			searchValue: 'red',
+			selectable: true,
+			sortingOrder: 'asc',
+			spritemap: spritemap,
+			totalItems: 6,
+			viewTypes: viewTypes,
+			events: {
+				'clearButtonClicked': handleClearButton
+			},
+		},
+		'#search-results-bar');
+
+		function handleClearButton(event) {
+			this.searchValue = null;
+			this.totalItems = null;
+		}
 	</script>
 </body>
 </html>