Merge pull request #642 from carloslancha/issue-641-href-to-viewtypes

ViewType object accepts href | Fixes #641
liferay · Feb 27, 2018 · 4ab75fd · 4ab75fd
2 parents cc5b093 + 533c078
commit 4ab75fd
Show file tree

Hide file tree

Showing 12 changed files with 234 additions and 9 deletions.
diff --git a/packages/clay-dataset-display/demos/a11y.html b/packages/clay-dataset-display/demos/a11y.html
@@ -269,6 +269,7 @@ <h1 class="page-title">
 			views: [
 				{
 					contentRenderer: 'cards',
+					href: '#cards',
 					icon: 'cards2',
 					label: 'Cards',
 					schema: {

diff --git a/packages/clay-dataset-display/demos/index.html b/packages/clay-dataset-display/demos/index.html
@@ -269,6 +269,7 @@ <h1 class="page-title">
 			views: [
 				{
 					contentRenderer: 'cards',
+					href: '#cards',
 					icon: 'cards2',
 					label: 'Cards',
 					schema: {

diff --git a/packages/clay-dataset-display/src/ClayDatasetDisplay.js b/packages/clay-dataset-display/src/ClayDatasetDisplay.js
@@ -434,6 +434,7 @@ ClayDatasetDisplay.STATE = {
 		Config.shapeOf({
 			active: Config.bool().value(false),
 			disabled: Config.bool().value(false),
+			href: Config.string(),
 			icon: Config.string().required(),
 			id: Config.string().required(),
 			label: Config.string().required(),

diff --git a/packages/clay-dataset-display/src/ClayDatasetDisplay.soy b/packages/clay-dataset-display/src/ClayDatasetDisplay.soy
@@ -64,6 +64,7 @@
 		active: bool,
 		contentRenderer: string,
 		disabled: bool,
+		href: string,
 		icon: string,
 		label: string,
 		schema: ?

diff --git a/packages/clay-dataset-display/src/__tests__/ClayDatasetDisplay.js b/packages/clay-dataset-display/src/__tests__/ClayDatasetDisplay.js
@@ -251,6 +251,7 @@ let defaultConfig = {
 	views: [
 		{
 			contentRenderer: 'cards',
+			href: '#cards',
 			icon: 'cards2',
 			label: 'Cards',
 			schema: {

diff --git a/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap b/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap
@@ -649,7 +649,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
 <div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
   <ul class="list-unstyled">
     <li>
-      <a class=" dropdown-item">
+      <a class=" dropdown-item" href="#cards">
         <div class="dropdown-item-indicator">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
@@ -1338,7 +1338,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
 <div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
   <ul class="list-unstyled">
     <li>
-      <a class=" dropdown-item">
+      <a class=" dropdown-item" href="#cards">
         <div class="dropdown-item-indicator">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
@@ -2027,7 +2027,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
 <div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
   <ul class="list-unstyled">
     <li>
-      <a class=" dropdown-item">
+      <a class=" dropdown-item" href="#cards">
         <div class="dropdown-item-indicator">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
@@ -2561,7 +2561,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
 <div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
   <ul class="list-unstyled">
     <li>
-      <a class=" dropdown-item">
+      <a class=" dropdown-item" href="#cards">
         <div class="dropdown-item-indicator">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
@@ -3441,7 +3441,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
 <div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
   <ul class="list-unstyled">
     <li>
-      <a class=" dropdown-item">
+      <a class=" dropdown-item" href="#cards">
         <div class="dropdown-item-indicator">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
@@ -4438,7 +4438,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
 <div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
   <ul class="list-unstyled">
     <li>
-      <a class=" dropdown-item">
+      <a class=" dropdown-item" href="#cards">
         <div class="dropdown-item-indicator">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
@@ -5281,7 +5281,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
 <div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
   <ul class="list-unstyled">
     <li>
-      <a class=" dropdown-item">
+      <a class=" dropdown-item" href="#cards">
         <div class="dropdown-item-indicator">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
@@ -5634,7 +5634,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
 <div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
   <ul class="list-unstyled">
     <li>
-      <a class=" dropdown-item">
+      <a class=" dropdown-item" href="#cards">
         <div class="dropdown-item-indicator">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
@@ -6973,7 +6973,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
 <div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
   <ul class="list-unstyled">
     <li>
-      <a class=" dropdown-item">
+      <a class=" dropdown-item" href="#cards">
         <div class="dropdown-item-indicator">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>

diff --git a/packages/clay-management-toolbar/demos/a11y.html b/packages/clay-management-toolbar/demos/a11y.html
@@ -45,6 +45,13 @@ <h4>Disabled State</h4>
 		</div>
 	</div>
 
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With links as viewTypes</h4>
+			<div id="link-view-types-block"></div>
+		</div>
+	</div>
+
 	<div class="row row-spacing">
 		<div class="col">
 			<h4>With Only Search</h4>
@@ -133,6 +140,26 @@ <h4>With search results bar with active state</h4>
 			},
 		];
 
+		const linkViewTypes= [
+			{
+				active: true,
+				href: '#list',
+				icon: 'list',
+				label: 'List',
+			},
+			{
+				disabled: true,
+				href: '#table',
+				icon: 'table',
+				label: 'Table',
+			},
+			{
+				href: '#card',
+				icon: 'cards2',
+				label: 'Card',
+			},
+		];
+
 		const spritemap = '../../../node_modules/clay/lib/images/icons/icons.svg';
 
 		//Default State
@@ -186,6 +213,31 @@ <h4>With search results bar with active state</h4>
 		},
 		'#disabled-block');
 
+		//Link View Types
+		new metal.ClayManagementToolbar({
+			creationMenu: {
+				items: [
+					{
+						href: '#1',
+						label: 'Add Content 1',
+					},
+					{
+						href: '#2',
+						label: 'Add Content 2',
+					}
+				]
+			},
+			filterItems: filterItems,
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			selectable: true,
+			showInfoButton: true,
+			sortingOrder: 'asc',
+			spritemap: spritemap,
+			viewTypes: linkViewTypes,
+		},
+		'#link-view-types-block');
+
 		//With Only Search
 		new metal.ClayManagementToolbar({
 			searchFormName: 'mySearchName',

diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html
@@ -45,6 +45,13 @@ <h4>Disabled State</h4>
 		</div>
 	</div>
 
+	<div class="row row-spacing">
+		<div class="col">
+			<h4>With links as viewTypes</h4>
+			<div id="link-view-types-block"></div>
+		</div>
+	</div>
+
 	<div class="row row-spacing">
 		<div class="col">
 			<h4>With Only Search</h4>
@@ -206,6 +213,26 @@ <h4>With search results bar with active state</h4>
 			},
 		];
 
+		const linkViewTypes= [
+			{
+				active: true,
+				href: '#list',
+				icon: 'list',
+				label: 'List',
+			},
+			{
+				disabled: true,
+				href: '#table',
+				icon: 'table',
+				label: 'Table',
+			},
+			{
+				href: '#card',
+				icon: 'cards2',
+				label: 'Card',
+			},
+		];
+
 		const spritemap = '../../../node_modules/clay/lib/images/icons/icons.svg';
 
 		//Default State
@@ -259,6 +286,31 @@ <h4>With search results bar with active state</h4>
 		},
 		'#disabled-block');
 
+		//Link View Types
+		new metal.ClayManagementToolbar({
+			creationMenu: {
+				items: [
+					{
+						href: '#1',
+						label: 'Add Content 1',
+					},
+					{
+						href: '#2',
+						label: 'Add Content 2',
+					}
+				]
+			},
+			filterItems: filterItems,
+			searchFormName: 'mySearchName',
+			searchInputName: 'mySearchInputName',
+			selectable: true,
+			showInfoButton: true,
+			sortingOrder: 'asc',
+			spritemap: spritemap,
+			viewTypes: linkViewTypes,
+		},
+		'#link-view-types-block');
+
 		//With Only Search
 		new metal.ClayManagementToolbar({
 			searchFormName: 'mySearchName',

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/ClayManagementToolbar.js
@@ -378,6 +378,7 @@ ClayManagementToolbar.STATE = {
 		Config.shapeOf({
 			active: Config.bool().value(false),
 			disabled: Config.bool().value(false),
+			href: Config.string(),
 			icon: Config.string().required(),
 			label: Config.string().required(),
 		})

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy
@@ -69,6 +69,7 @@
 	{@param? viewTypes: list<[
 		active: bool,
 		disabled: bool,
+		href: string,
 		icon: string,
 		label: string
 	]>}
@@ -348,6 +349,7 @@
 	{@param? viewTypes: list<[
 		active: bool,
 		disabled: bool,
+		href: string,
 		icon: string,
 		label: string
 	]>}

diff --git a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js
@@ -227,6 +227,33 @@ describe('ClayManagementToolbar', function() {
 		expect(managementToolbar).toMatchSnapshot();
 	});
 
+	it('should render a management toolbar with links as view types', () => {
+		managementToolbar = new ClayManagementToolbar({
+			spritemap: spritemap,
+			viewTypes: [
+				{
+					active: true,
+					href: '#list',
+					icon: 'list',
+					label: 'List',
+				},
+				{
+					disabled: true,
+					href: '#table',
+					icon: 'table',
+					label: 'Table',
+				},
+				{
+					href: '#cards',
+					icon: 'cards2',
+					label: 'Card',
+				},
+			],
+		});
+
+		expect(managementToolbar).toMatchSnapshot();
+	});
+
 	it('should render a managment toolbar with plus button', () => {
 		managementToolbar = new ClayManagementToolbar({
 			spritemap: spritemap,