Add "info button" to ClayManagementToolbar | Fixes #481

packages/clay-management-toolbar/demos/a11y.html

@@ -126,6 +126,7 @@ <h4>Without Search</h4>
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',
 			selectable: true,
+			showInfoButton: true,
 			sortingOrder: 'asc',
 			spritemap: spritemap,
 			viewTypes: viewTypes,
@@ -137,6 +138,7 @@ <h4>Without Search</h4>
 			actionItems: actionItems,
 			selectable: true,
 			selectedItems: 5,
+			showInfoButton: true,
 			spritemap: spritemap,
 			totalItems: 10,
 		},
@@ -160,6 +162,7 @@ <h4>Without Search</h4>
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',
 			selectable: true,
+			showInfoButton: true,
 			sortingOrder: 'asc',
 			spritemap: spritemap,
 			totalItems: 0,

packages/clay-management-toolbar/demos/index.html

@@ -199,6 +199,7 @@ <h4>Without Search</h4>
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',
 			selectable: true,
+			showInfoButton: true,
 			sortingOrder: 'asc',
 			spritemap: spritemap,
 			viewTypes: viewTypes,
@@ -210,6 +211,7 @@ <h4>Without Search</h4>
 			actionItems: actionItems,
 			selectable: true,
 			selectedItems: 5,
+			showInfoButton: true,
 			spritemap: spritemap,
 			totalItems: 10,
 		},
@@ -233,6 +235,7 @@ <h4>Without Search</h4>
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',
 			selectable: true,
+			showInfoButton: true,
 			sortingOrder: 'asc',
 			spritemap: spritemap,
 			totalItems: 0,

packages/clay-management-toolbar/src/ClayManagementToolbar.js

@@ -83,6 +83,15 @@ class ClayManagementToolbar extends Component {
 		this.emit('filterDoneClicked', event);
 	}
 
+	/**
+	 * Continues the propagation of the Info button clicked event
+	 * @param {!Event} event
+	 * @private
+	 */
+	_handleInfoButtonClicked(event) {
+		this.emit('infoButtonClicked', event);
+	}
+
 	/**
 	 * Shows the search in mobile devices
 	 * @private
@@ -285,6 +294,15 @@ ClayManagementToolbar.STATE = {
 	 */
 	selectedItems: Config.number(),
 
+	/**
+	 * Flag to indicate if the Info button should be shown or not.
+	 * @instance
+	 * @memberof ClayManagementToolbar
+	 * @type {?bool}
+	 * @default false
+	 */
+	showInfoButton: Config.bool().value(false),
+
 	/**
 	 * Flag to indicate if search should be shown or not.
 	 * @instance

packages/clay-management-toolbar/src/ClayManagementToolbar.soy

@@ -10,6 +10,7 @@
 	{@param? _handleCreationButtonClicked: any}
 	{@param? _handleDeselectAllClicked: any}
 	{@param? _handleFilterDoneButtonClick: any}
+	{@param? _handleInfoButtonClicked: any}
 	{@param? _handleOpenMobileSearchClick: any}
 	{@param? _handleSearchSearchClick: any}
 	{@param? _handleSelectAllClicked: any}
@@ -58,6 +59,7 @@
 	{@param? searchInputName: string}
 	{@param? selectable: bool}
 	{@param? selectedItems: number}
+	{@param? showInfoButton: bool}
 	{@param? showSearch: bool}
 	{@param? sortingOrder: string}
 	{@param? totalItems: number}
@@ -74,11 +76,13 @@
 		{call .active}
 			{param _handleActionClicked: $_handleActionClicked /}
 			{param _handleDeselectAllClicked: $_handleDeselectAllClicked /}
+			{param _handleInfoButtonClicked: $_handleInfoButtonClicked /}
 			{param _handleSelectAllClicked: $_handleSelectAllClicked /}
 			{param _handleSelectPageCheckboxChanged: $_handleSelectPageCheckboxChanged /}
 			{param actionItems: $actionItems /}
 			{param elementClasses: $elementClasses /}
 			{param selectedItems: $selectedItems /}
+			{param showInfoButton: $showInfoButton /}
 			{param spritemap: $spritemap /}
 			{param totalItems: $totalItems /}
 		{/call}
@@ -87,6 +91,7 @@
 			{param _handleCloseMobileSearchClick: $_handleCloseMobileSearchClick /}
 			{param _handleCreationButtonClicked: $_handleCreationButtonClicked /}
 			{param _handleFilterDoneButtonClick: $_handleFilterDoneButtonClick /}
+			{param _handleInfoButtonClicked: $_handleInfoButtonClicked /}
 			{param _handleOpenMobileSearchClick: $_handleOpenMobileSearchClick /}
 			{param _handleSearchSearchClick: $_handleSearchSearchClick /}
 			{param _handleSelectPageCheckboxChanged: $_handleSelectPageCheckboxChanged /}
@@ -104,6 +109,7 @@
 			{param searchFormName: $searchFormName /}
 			{param searchInputName: $searchInputName /}
 			{param selectable: $selectable /}
+			{param showInfoButton: $showInfoButton /}
 			{param showSearch: $showSearch != false /}
 			{param sortingOrder: $sortingOrder /}
 			{param spritemap: $spritemap /}
@@ -119,6 +125,7 @@
 	{@param spritemap: string}
 	{@param? _handleActionClicked: any}
 	{@param? _handleDeselectAllClicked: any}
+	{@param? _handleInfoButtonClicked: any}
 	{@param? _handleSelectAllClicked: any}
 	{@param? _handleSelectPageCheckboxChanged: any}
 	{@param? actionItems: list<[
@@ -133,6 +140,7 @@
 	{@param? elementClasses: string}
 	{@param? id: string}
 	{@param? selectedItems: number}
+	{@param? showInfoButton: bool}
 	{@param? totalItems: number}
 
 	{let $navAttributes kind="attributes"}
@@ -187,29 +195,44 @@
 				</li>
 			</ul>
 
-			{if $actionItems}
+			{if $actionItems or $showInfoButton}
 				<ul class="navbar-nav">
-					{foreach $item in $actionItems}
-						{if $item.quickAction and $item.icon and $spritemap}
-							<li class="nav-item navbar-breakpoint-down-d-none" data-onclick="{$_handleActionClicked}">
-								{call ClayButton.render}
-									{param elementClasses: 'quick-action-item' /}
-									{param icon: $item.icon /}
-									{param ref: 'quickAction' + index($item) /}
-									{param spritemap: $spritemap /}
-									{param style: 'unstyled' /}
-								{/call}
-							</li>
-						{/if}
-					{/foreach}
+					{if $showInfoButton}
+						<li class="nav-item">
+							{call ClayButton.render}
+								{param elementClasses: 'nav-link nav-link-monospaced' /}
+								{param events: ['click': $_handleInfoButtonClicked] /}
+								{param icon: 'info-circle-open' /}
+								{param ref: 'infoButton' /}
+								{param spritemap: $spritemap /}
+								{param style: 'unstyled' /}
+							{/call}
+						</li>
+					{/if}
 
-					<li class="nav-item">
-						{call ClayActionsDropdown.render}
-							{param events: ['itemClicked': $_handleActionClicked] /}
-							{param items: $actionItems /}
-							{param spritemap: $spritemap /}
-						{/call}
-					</li>
+					{if $actionItems}
+						{foreach $item in $actionItems}
+							{if $item.quickAction and $item.icon and $spritemap}
+								<li class="nav-item navbar-breakpoint-down-d-none" data-onclick="{$_handleActionClicked}">
+									{call ClayButton.render}
+										{param elementClasses: 'quick-action-item' /}
+										{param icon: $item.icon /}
+										{param ref: 'quickAction' + index($item) /}
+										{param spritemap: $spritemap /}
+										{param style: 'unstyled' /}
+									{/call}
+								</li>
+							{/if}
+						{/foreach}
+
+						<li class="nav-item">
+							{call ClayActionsDropdown.render}
+								{param events: ['itemClicked': $_handleActionClicked] /}
+								{param items: $actionItems /}
+								{param spritemap: $spritemap /}
+							{/call}
+						</li>
+					{/if}
 				</ul>
 			{/if}
 		</div>
@@ -224,6 +247,7 @@
 	{@param? _handleCloseMobileSearchClick: any}
 	{@param? _handleCreationButtonClicked: any}
 	{@param? _handleFilterDoneButtonClick: any}
+	{@param? _handleInfoButtonClicked: any}
 	{@param? _handleOpenMobileSearchClick: any}
 	{@param? _handleSearchSearchClick: any}
 	{@param? _handleSelectPageCheckboxChanged: any}
@@ -262,6 +286,7 @@
 	{@param? searchFormName: string}
 	{@param? searchInputName: string}
 	{@param? selectable: bool}
+	{@param? showInfoButton: bool}
 	{@param? showSearch: bool}
 	{@param? sortingOrder: string}
 	{@param? viewTypes: list<[
@@ -388,6 +413,20 @@
 					</li>
 				{/if}
 
+				{if $showInfoButton}
+					<li class="nav-item">
+						{call ClayButton.render}
+							{param disabled: $disabled /}
+							{param elementClasses: 'nav-link nav-link-monospaced' /}
+							{param events: ['click': $_handleInfoButtonClicked] /}
+							{param icon: 'info-circle-open' /}
+							{param ref: 'infoButton' /}
+							{param spritemap: $spritemap /}
+							{param style: 'unstyled' /}
+						{/call}
+					</li>
+				{/if}
+
 				{if $viewTypes}
 					<li class="dropdown nav-item">
 						{call ClayDropdown.render}

packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js

@@ -301,6 +301,7 @@ describe('ClayManagementToolbar', function() {
 			],
 			selectable: true,
 			sortingOrder: 'asc',
+			showInfoButton: true,
 			spritemap: spritemap,
 			totalItems: 0,
 			viewTypes: [
@@ -369,6 +370,27 @@ describe('ClayManagementToolbar', function() {
 		expect(managementToolbar).toMatchSnapshot();
 	});
 
+	it('should render a management toolbar with info button', () => {
+		managementToolbar = new ClayManagementToolbar({
+			spritemap: spritemap,
+			showInfoButton: true,
+		});
+
+		expect(managementToolbar).toMatchSnapshot();
+	});
+
+	it('should render a management toolbar with info button in active state', () => {
+		managementToolbar = new ClayManagementToolbar({
+			selectable: true,
+			selectedItems: 1,
+			showInfoButton: true,
+			spritemap: spritemap,
+			totalItems: 10,
+		});
+
+		expect(managementToolbar).toMatchSnapshot();
+	});
+
 	it('should render a selectable management toolbar and emit an event on checkbox click', () => {
 		managementToolbar = new ClayManagementToolbar({
 			selectable: true,
@@ -585,4 +607,41 @@ describe('ClayManagementToolbar', function() {
 		expect(spy).toHaveBeenCalled();
 		expect(spy).toHaveBeenCalledWith('actionClicked', expect.any(Object));
 	});
+
+	it('should render a management toolbar with info button and emit an event on infoButton click', () => {
+		managementToolbar = new ClayManagementToolbar({
+			spritemap: spritemap,
+			showInfoButton: true,
+		});
+
+		const spy = jest.spyOn(managementToolbar, 'emit');
+
+		managementToolbar.refs.infoButton.element.click();
+
+		expect(spy).toHaveBeenCalled();
+		expect(spy).toHaveBeenCalledWith(
+			'infoButtonClicked',
+			expect.any(Object)
+		);
+	});
+
+	it('should render a management toolbar with info button in active state and emit an event on infoButton click', () => {
+		managementToolbar = new ClayManagementToolbar({
+			selectable: true,
+			selectedItems: 1,
+			showInfoButton: true,
+			spritemap: spritemap,
+			totalItems: 10,
+		});
+
+		const spy = jest.spyOn(managementToolbar, 'emit');
+
+		managementToolbar.refs.infoButton.element.click();
+
+		expect(spy).toHaveBeenCalled();
+		expect(spy).toHaveBeenCalledWith(
+			'infoButtonClicked',
+			expect.any(Object)
+		);
+	});
 });