Merge pull request #783 from carloslancha/issue-782-creation-menu-man…

…agement-toolbar

SF | Fixes #782

packages/clay-dataset-display/src/ClayDatasetDisplay.js

@@ -305,26 +305,16 @@ ClayDatasetDisplay.STATE = {
 	 * @memberof ClayDatasetDisplay
 	 * @type {?(object|string|bool|undefined)}
 	 */
-	creationMenu: Config.oneOfType([
-		Config.bool().value(false),
-		Config.string(),
-		Config.shapeOf({
-			caption: Config.string(),
-			helpText: Config.string(),
-			primaryItems: creationMenuItemsValidator,
-			secondaryItems: creationMenuItemsValidator,
-		}),
-		Config.shapeOf({
-			caption: Config.string(),
-			helpText: Config.string(),
-			maxPrimaryItems: Config.number(),
-			maxSecondaryItems: Config.number(),
-			maxTotalItems: Config.number(),
-			primaryItems: creationMenuItemsValidator,
-			secondaryItems: creationMenuItemsValidator,
-			viewMoreURL: Config.string(),
-		}),
-	]),
+	creationMenu: Config.shapeOf({
+		caption: Config.string(),
+		helpText: Config.string(),
+		maxPrimaryItems: Config.number(),
+		maxSecondaryItems: Config.number(),
+		maxTotalItems: Config.number(),
+		primaryItems: creationMenuItemsValidator,
+		secondaryItems: creationMenuItemsValidator,
+		viewMoreURL: Config.string(),
+	}),
 
 	/**
 	 * CSS classes to be applied to the element.
@@ -407,6 +397,16 @@ ClayDatasetDisplay.STATE = {
 	 */
 	selectedView: Config.number(),
 
+	/**
+	 * Flag to indicate if management toolbar creation menu button should be
+	 * shown or not.
+	 * @default true
+	 * @instance
+	 * @memberof ClayDatasetDisplay
+	 * @type {?bool}
+	 */
+	showCreationMenu: Config.bool().value(true),
+
 	/**
 	 * Flag to indicate if the `Done` button in management toolbar filter dropdown
 	 * should be shown or not.

packages/clay-dataset-display/src/ClayDatasetDisplay.soy

@@ -27,7 +27,7 @@
 		separator: bool,
 		type: string
 	]>}
-	{@param? creationMenu: bool|string|[
+	{@param? creationMenu: [
 		caption: string,
 		helpText: string,
 		maxPrimaryItems: int,
@@ -73,6 +73,7 @@
 	{@param? searchInputName: string}
 	{@param? selectable: bool}
 	{@param? selectedView: int}
+	{@param? showCreationMenu: bool}
 	{@param? showFiltersDoneButton: bool}
 	{@param? sortingOrder: string}
 	{@param? title: string}
@@ -122,6 +123,7 @@
 				{param searchInputName: $searchInputName /}
 				{param selectable: $selectable /}
 				{param selectedItems: $_selectedItems ? length($_selectedItems) : 0 /}
+				{param showCreationMenu: $showCreationMenu ?: true /}
 				{param showFiltersDoneButton: $showFiltersDoneButton ?: true /}
 				{param sortingOrder: $sortingOrder /}
 				{param spritemap: $spritemap /}

packages/clay-dataset-display/src/__tests__/ClayDatasetDisplay.js

@@ -568,7 +568,7 @@ describe('ClayDatasetDisplay', function() {
 	it('should render a ClayDatasetDisplay and emit an event on management toolbar creation menu button click', () => {
 		jest.useFakeTimers();
 
-		defaultConfig.creationMenu = true;
+		defaultConfig.creationMenu = undefined;
 
 		component = new ClayDatasetDisplay(defaultConfig);
 

packages/clay-isomorphic/fixtures/expected/ClayManagementToolbar.creationMenu

@@ -1 +1 @@
-<a aria-label="add"class="btn btn-primary nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus"focusable="false"><title>plus</title><use xlink:href="spritemap.svg#plus" /></svg></a>
+<button class="btn nav-btn nav-btn-monospaced btn-primary"aria-label="plus"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus"focusable="false"><title>plus</title><use xlink:href="spritemap.svg#plus" /></svg></button>

packages/clay-isomorphic/fixtures/expected/ClayManagementToolbar.default

@@ -1 +1 @@
-<nav class="management-bar management-bar-light navbar navbar-expand-md"><div class="container"><ul class="navbar-nav"><li class="dropdown nav-item"><div class="dropdown"><button aria-expanded="false"aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link btn-unstyled"data-onclick="toggle"type="button"><span class="navbar-breakpoint-down-d-none">Filter and Order<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom"focusable="false"><title>caret-bottom</title><use xlink:href="spritemap.svg#caret-bottom" /></svg></span><span class="navbar-breakpoint-d-none"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-filter"focusable="false"><title>filter</title><use xlink:href="spritemap.svg#filter" /></svg></span></button><div class="dropdown-menu" ref="menu"><ul class="list-unstyled"><li data-onclick="null"><a class=" dropdown-item disabled"href="#zSoyz">label</a></li></ul></div></div></li><li class="nav-item"><button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled"aria-label="order-arrow"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow"focusable="false"><title>order-arrow</title><use xlink:href="spritemap.svg#order-arrow" /></svg></button></li></ul><ul class="navbar-nav"><li class="dropdown nav-item"><div class="dropdown"><button aria-expanded="false"aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled"data-onclick="toggle"type="button"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-icon"focusable="false"><title>icon</title><use xlink:href="spritemap.svg#icon" /></svg></button><div class="dropdown-menu dropdown-menu-indicator-start" ref="menu"><ul class="list-unstyled"><li data-onclick="null"><a class=" dropdown-item active"><div class="dropdown-item-indicator"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-icon"focusable="false"><title>icon</title><use xlink:href="spritemap.svg#icon" /></svg></div>label</a></li></ul></div></div></li><li class="nav-item"><a aria-label="add"class="btn btn-primary nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none"href="#zSoyz"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus"focusable="false"><title>plus</title><use xlink:href="spritemap.svg#plus" /></svg></a></li></ul></div></nav>
+<nav class="management-bar management-bar-light navbar navbar-expand-md"><div class="container"><ul class="navbar-nav"><li class="dropdown nav-item"><div class="dropdown"><button aria-expanded="false"aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link btn-unstyled"data-onclick="toggle"type="button"><span class="navbar-breakpoint-down-d-none">Filter and Order<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom"focusable="false"><title>caret-bottom</title><use xlink:href="spritemap.svg#caret-bottom" /></svg></span><span class="navbar-breakpoint-d-none"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-filter"focusable="false"><title>filter</title><use xlink:href="spritemap.svg#filter" /></svg></span></button><div class="dropdown-menu" ref="menu"><ul class="list-unstyled"><li data-onclick="null"><a class=" dropdown-item disabled"href="#zSoyz">label</a></li></ul></div></div></li><li class="nav-item"><button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled"aria-label="order-arrow"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow"focusable="false"><title>order-arrow</title><use xlink:href="spritemap.svg#order-arrow" /></svg></button></li></ul><ul class="navbar-nav"><li class="dropdown nav-item"><div class="dropdown"><button aria-expanded="false"aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled"data-onclick="toggle"type="button"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-icon"focusable="false"><title>icon</title><use xlink:href="spritemap.svg#icon" /></svg></button><div class="dropdown-menu dropdown-menu-indicator-start" ref="menu"><ul class="list-unstyled"><li data-onclick="null"><a class=" dropdown-item active"><div class="dropdown-item-indicator"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-icon"focusable="false"><title>icon</title><use xlink:href="spritemap.svg#icon" /></svg></div>label</a></li></ul></div></div></li></ul></div></nav>

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

@@ -59,6 +59,13 @@ <h4>With links as viewTypes</h4>
 		</div>
 	</div>
 
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With only one Creation Menu item</h4>
+			<div id="one-creation-menu-item-block"></div>
+		</div>
+	</div>
+
 	<div class="row row-spacing">
 		<div class="col">
 			<h4>With Only Search</h4>
@@ -428,6 +435,28 @@ <h4>With search results bar with active state</h4>
 		},
 		'#link-view-types-block');
 
+		//Only one Creation Menu Item
+		new metal.ClayManagementToolbar({
+			creationMenu: {
+				primaryItems: [
+					{
+						href: '#primary1',
+						label: 'Primary 1',
+					}
+				],
+				viewMoreURL: '#viewMore',
+			},
+			filterItems: filterItems,
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			selectable: true,
+			showInfoButton: true,
+			sortingOrder: 'asc',
+			spritemap: spritemap,
+			viewTypes: linkViewTypes,
+		},
+		'#one-creation-menu-item-block');
+
 		//With Only Search
 		new metal.ClayManagementToolbar({
 			searchFormName: 'mySearchName',
@@ -447,7 +476,7 @@ <h4>With search results bar with active state</h4>
 
 		//Without Search
 		new metal.ClayManagementToolbar({
-			creationMenu: '#creationPageURL',
+			creationMenu: true,
 			filterItems: filterItems,
 			showSearch: false,
 			selectable: true,

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

@@ -59,6 +59,13 @@ <h4>With links as viewTypes</h4>
 		</div>
 	</div>
 
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With only one Creation Menu item</h4>
+			<div id="one-creation-menu-item-block"></div>
+		</div>
+	</div>
+
 	<div class="row row-spacing">
 		<div class="col">
 			<h4>With Only Search</h4>
@@ -244,7 +251,6 @@ <h4>With search results bar with active state</h4>
 
 		//Default State
 		new metal.ClayManagementToolbar({
-			creationMenu: true,
 			filterItems: filterItems,
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',
@@ -501,10 +507,33 @@ <h4>With search results bar with active state</h4>
 		},
 		'#link-view-types-block');
 
+		//Only one Creation Menu Item
+		new metal.ClayManagementToolbar({
+			creationMenu: {
+				primaryItems: [
+					{
+						href: '#primary1',
+						label: 'Primary 1',
+					}
+				],
+				viewMoreURL: '#viewMore',
+			},
+			filterItems: filterItems,
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			selectable: true,
+			showInfoButton: true,
+			sortingOrder: 'asc',
+			spritemap: spritemap,
+			viewTypes: linkViewTypes,
+		},
+		'#one-creation-menu-item-block');
+
 		//With Only Search
 		new metal.ClayManagementToolbar({
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',
+			showCreationMenu: false,
 			spritemap: spritemap,
 		},
 		'#only-search-block');
@@ -514,13 +543,13 @@ <h4>With search results bar with active state</h4>
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',
 			showAdvancedSearch: true,
+			showCreationMenu: false,
 			spritemap: spritemap,
 		},
 		'#advanced-search-block');
 
 		//Without Search
 		new metal.ClayManagementToolbar({
-			creationMenu: '#creationPageURL',
 			filterItems: filterItems,
 			showSearch: false,
 			selectable: true,
@@ -532,7 +561,6 @@ <h4>With search results bar with active state</h4>
 
 		//With search results bar
 		new metal.ClayManagementToolbar({
-			creationMenu: true,
 			events: {
 				'clearButtonClicked': handleClearButton
 			},
@@ -557,7 +585,6 @@ <h4>With search results bar with active state</h4>
 		new metal.ClayManagementToolbar({
 			actionItems: actionItems,
 			clearResultsURL: '#clear',
-			creationMenu: true,
 			filterItems: filterItems,
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',

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

@@ -244,20 +244,16 @@ ClayManagementToolbar.STATE = {
 	 * @memberof ClayManagementToolbar
 	 * @type {?(object|string|bool|undefined)}
 	 */
-	creationMenu: Config.oneOfType([
-		Config.bool().value(false),
-		Config.string(),
-		Config.shapeOf({
-			caption: Config.string(),
-			helpText: Config.string(),
-			maxPrimaryItems: Config.number(),
-			maxSecondaryItems: Config.number(),
-			maxTotalItems: Config.number(),
-			primaryItems: creationMenuItemsValidator,
-			secondaryItems: creationMenuItemsValidator,
-			viewMoreURL: Config.string(),
-		}),
-	]),
+	creationMenu: Config.shapeOf({
+		caption: Config.string(),
+		helpText: Config.string(),
+		maxPrimaryItems: Config.number(),
+		maxSecondaryItems: Config.number(),
+		maxTotalItems: Config.number(),
+		primaryItems: creationMenuItemsValidator,
+		secondaryItems: creationMenuItemsValidator,
+		viewMoreURL: Config.string(),
+	}),
 
 	/**
 	 * Flag to indicate if the managment toolbar is disabled or not.
@@ -359,6 +355,15 @@ ClayManagementToolbar.STATE = {
 	 */
 	showAdvancedSearch: Config.bool().value(false),
 
+	/**
+	 * Flag to indicate if creation menu button should be shown or not.
+	 * @default true
+	 * @instance
+	 * @memberof ClayManagementToolbar
+	 * @type {?bool}
+	 */
+	showCreationMenu: Config.bool().value(true),
+
 	/**
 	 * Flag to indicate if the `Done` button in filter dropdown should be shown or
 	 * not.