From c5b55c8bcb5d7a1c513c51235d3b556e0fa94ccc Mon Sep 17 00:00:00 2001
From: Daniel Lautzenheiser <lautzd@gmail.com>
Date: Wed, 31 Mar 2021 09:38:36 -0400
Subject: [PATCH] Let action change between button and link

---
 src/header/index.tsx                  | 24 ++++++++++++++++--------
 src/header/tests/unit/Header.spec.tsx |  6 ++++++
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/header/index.tsx b/src/header/index.tsx
index 7d0b8b50b..d10c89b6a 100644
--- a/src/header/index.tsx
+++ b/src/header/index.tsx
@@ -2,23 +2,31 @@ import { RenderResult } from '@dojo/framework/core/interfaces';
 import { create, tsx } from '@dojo/framework/core/vdom';
 import { LinkProperties } from '@dojo/framework/routing/interfaces';
 import Link from '@dojo/framework/routing/Link';
+import ActionButton, { ActionButtonProperties } from '../action-button';
 import theme from '../middleware/theme';
 import * as css from '../theme/default/header.m.css';
 
-export interface ActionProperties extends LinkProperties {}
+export type ActionProperties = LinkProperties | ActionButtonProperties;
 
 const actionFactory = create({ theme }).properties<ActionProperties>();
 
+function IsLink(properties: ActionProperties): properties is LinkProperties {
+	return Boolean(properties && properties.hasOwnProperty('to'));
+}
+
 export const Action = actionFactory(({ properties, children, middleware: { theme } }) => {
 	const themedCss = theme.classes(css);
+	const props = properties();
 
-	const action = (
-		<Link {...properties()} classes={[theme.variant(), themedCss.action]}>
-			{children()}
-		</Link>
-	);
-
-	return action;
+	if (IsLink(props)) {
+		return (
+			<Link {...props} classes={[theme.variant(), themedCss.action]}>
+				{children()}
+			</Link>
+		);
+	} else {
+		return <ActionButton {...props}>{children()}</ActionButton>;
+	}
 });
 
 export interface HeaderProperties {
diff --git a/src/header/tests/unit/Header.spec.tsx b/src/header/tests/unit/Header.spec.tsx
index ddc2da6a2..eae9beb1e 100644
--- a/src/header/tests/unit/Header.spec.tsx
+++ b/src/header/tests/unit/Header.spec.tsx
@@ -4,6 +4,7 @@ import Link from '@dojo/framework/routing/Link';
 import assertionTemplate from '@dojo/framework/testing/harness/assertionTemplate';
 import harness from '@dojo/framework/testing/harness/harness';
 import Header, { Action } from '../..';
+import ActionButton from '../../../action-button';
 import * as classes from '../../../theme/default/header.m.css';
 
 const baseTemplate = assertionTemplate(() => (
@@ -118,6 +119,11 @@ describe('HeaderToolbar', () => {
 		);
 	});
 
+	it('renders action as button', () => {
+		const h = harness(() => <Action name="testButton">test</Action>);
+		h.expect(assertionTemplate(() => <ActionButton name="testButton">test</ActionButton>));
+	});
+
 	it('Renders a sticky header', () => {
 		const h = harness(() => (
 			<Header sticky>