Add demos | Fixes liferay#572

matuzalemsteles · Feb 21, 2018 · 64ffbca · 64ffbca
1 parent 0428d48
commit 64ffbca
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/packages/clay-management-toolbar/demos/a11y.html b/packages/clay-management-toolbar/demos/a11y.html
@@ -66,6 +66,13 @@ <h4>With search results bar</h4>
 		</div>
 	</div>
 
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With search results bar with active state</h4>
+			<div id="search-results-bar-active-state"></div>
+		</div>
+	</div>
+
 	<script type="text/javascript">
 		const actionItems = [
 			{
@@ -206,6 +213,23 @@ <h4>With search results bar</h4>
 			viewTypes: viewTypes,
 		},
 		'#search-results-bar');
+
+		//With search results bar with active state
+		new metal.ClayManagementToolbar({
+			actionItems: actionItems,
+			creationMenu: true,
+			filterItems: filterItems,
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			searchValue: 'red',
+			selectable: true,
+			selectedItems: 2,
+			sortingOrder: 'asc',
+			spritemap: spritemap,
+			totalItems: 6,
+			viewTypes: viewTypes,
+		},
+		'#search-results-bar-active-state');
 	</script>
 </body>
 </html>
diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html
@@ -66,6 +66,13 @@ <h4>With search results bar</h4>
 		</div>
 	</div>
 
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With search results bar with active state</h4>
+			<div id="search-results-bar-active-state"></div>
+		</div>
+	</div>
+
 	<script type="text/javascript">
 		const actionItems = [
 			{
@@ -268,6 +275,9 @@ <h4>With search results bar</h4>
 		//With search results bar
 		new metal.ClayManagementToolbar({
 			creationMenu: true,
+			events: {
+				'clearButtonClicked': handleClearButton
+			},
 			filterItems: filterItems,
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',
@@ -277,16 +287,30 @@ <h4>With search results bar</h4>
 			spritemap: spritemap,
 			totalItems: 6,
 			viewTypes: viewTypes,
-			events: {
-				'clearButtonClicked': handleClearButton
-			},
 		},
 		'#search-results-bar');
 
 		function handleClearButton(event) {
 			this.searchValue = null;
 			this.totalItems = null;
 		}
+
+		//With search results bar with active state
+		new metal.ClayManagementToolbar({
+			actionItems: actionItems,
+			creationMenu: true,
+			filterItems: filterItems,
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			searchValue: 'red',
+			selectable: true,
+			selectedItems: 2,
+			sortingOrder: 'asc',
+			spritemap: spritemap,
+			totalItems: 6,
+			viewTypes: viewTypes,
+		},
+		'#search-results-bar-active-state');
 	</script>
 </body>
 </html>