Merge pull request #9 from svelte-toolbox/change-location

Change the location on click
radical-ui · Jun 22, 2019 · 646c10f · 646c10f
2 parents b960124 + 8325a97
commit 646c10f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 26 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -51,8 +51,8 @@
 		</span>
 	</UIButton>
 	<br />
-	<UIButton href="bar">
-		Should go to
+	<UIButton href="bar" disabled={true}>
+		Should not go to
 		<span>
 			<i>host</i>
 			/bar

diff --git a/src/components/button/AWrapper.svelte b/src/components/button/AWrapper.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let href;
+	export let disabled;
+</script>
+
+{#if href && !disabled}
+	<a {href}>
+		<slot />
+	</a>
+{:else}
+	<slot />
+{/if}
diff --git a/src/components/button/Component.svelte b/src/components/button/Component.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
 	import Ripple from '../ripple/Ripple.svelte';
+	import AWrapper from './AWrapper.svelte';
 
 	export let raised = false;
 	export let primary = false;
@@ -15,6 +16,7 @@
 	export let uppercase = true;
 	export let rippleColor = `var(--buttons-ripple-color)`;
 	export let primaryRippleColor = `var(--primary-buttons-ripple-color)`;
+	export let href = null;
 
 	let element;
 	let hovering = false;
@@ -62,28 +64,30 @@
 	}
 </style>
 
-<button
-	on:click={click}
-	on:mouseover={(e) => {
-		hovering = true;
-		hover();
-	}}
-	on:mouseout={(e) => (hovering = false)}
-	class:raised
-	class:block
-	class:uppercase
-	class:button-disabled={disabled}
-	{disabled}
-	style="{primary ? `background: ${hovering ? primaryHoverColor : color}; color: ${textColor}` : `color: ${color}; background: ${hovering ? hoverColor : 'rgba(0, 0, 0, 0)'}`};
-	transition: opacity {transition}ms, background {transition}ms">
+<AWrapper {href} {disabled}>
+	<button
+		on:click={click}
+		on:mouseover={(e) => {
+			hovering = true;
+			hover();
+		}}
+		on:mouseout={(e) => (hovering = false)}
+		class:raised
+		class:block
+		class:uppercase
+		class:button-disabled={disabled}
+		{disabled}
+		style="{primary ? `background: ${hovering ? primaryHoverColor : color}; color: ${textColor}` : `color: ${color}; background: ${hovering ? hoverColor : 'rgba(0, 0, 0, 0)'}`};
+		transition: opacity {transition}ms, background {transition}ms">
 
-	<Ripple
-		disabled={!ripple || disabled}
-		block={true}
-		time={600}
-		color={primary ? primaryRippleColor : rippleColor}>
-		<div style="padding: 0 12px;">
-			<slot>Some text</slot>
-		</div>
-	</Ripple>
-</button>
+		<Ripple
+			disabled={!ripple || disabled}
+			block={true}
+			time={600}
+			color={primary ? primaryRippleColor : rippleColor}>
+			<div style="padding: 0 12px;">
+				<slot>Some text</slot>
+			</div>
+		</Ripple>
+	</button>
+</AWrapper>