From a16569f45dbf855da8d7aa04b44b89aedea79b89 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Wed, 19 Feb 2020 12:24:19 -0500
Subject: [PATCH] Add to prop support on v-button (#111)

---
 src/components/v-button/v-button.readme.md | 34 ++++++++++------------
 src/components/v-button/v-button.story.ts  | 11 +++++++
 src/components/v-button/v-button.test.ts   | 11 +++++++
 src/components/v-button/v-button.vue       | 23 +++++++++++----
 4 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/src/components/v-button/v-button.readme.md b/src/components/v-button/v-button.readme.md
index 0fa244a23e..5f6aac1071 100644
--- a/src/components/v-button/v-button.readme.md
+++ b/src/components/v-button/v-button.readme.md
@@ -46,37 +46,33 @@ The button has a loading state that can be enabled with the `loading` prop. By d
 The loading slot is rendered _on top_ of the content that was there before. Make sure that your loading content doesn't exceed the size of the default state content. This restriction is put in place to prevent jumps when going from and to the loading state.
 
 ## Props
-
-| Prop                     | Description                                                               | Default                                   |
-|--------------------------|---------------------------------------------------------------------------|-------------------------------------------|
-| `block`                  | Enable ull width (display block)                                          | `false`                                   |
-| `icon`                   | Remove padding / min-width. Meant to be used with just an icon as content | `false`                                   |
-| `outlined`               | No background                                                             | `false`                                   |
-| `rounded`                | Enable rounded corners                                                    | `false`                                   |
-| `type`                   | HTML `type` attribute                                                     | `button`                                  |
-| `disabled`               | Disabled state                                                            | `false`                                   |
-| `loading`                | Loading state                                                             | `false`                                   |
-| `size`                   | Size of the text in the button in px                                      | --                                        |
-| `x-small`                | Render extra small                                                        | `false`                                   |
-| `small`                  | Render small                                                              | `false`                                   |
-| `large`                  | Render large                                                              | `false`                                   |
-| `x-large`                | Render extra large                                                        | `false`                                   |
+| Prop       | Description                                                               | Default  |
+|------------|---------------------------------------------------------------------------|----------|
+| `block`    | Enable ull width (display block)                                          | `false`  |
+| `icon`     | Remove padding / min-width. Meant to be used with just an icon as content | `false`  |
+| `outlined` | No background                                                             | `false`  |
+| `rounded`  | Enable rounded corners                                                    | `false`  |
+| `type`     | HTML `type` attribute                                                     | `button` |
+| `disabled` | Disabled state                                                            | `false`  |
+| `loading`  | Loading state                                                             | `false`  |
+| `x-small`  | Render extra small                                                        | `false`  |
+| `small`    | Render small                                                              | `false`  |
+| `large`    | Render large                                                              | `false`  |
+| `x-large`  | Render extra large                                                        | `false`  |
+| `to`       | Render as vue router-link                                                 | `false`  |
 
 ## Slots
-
 | Slot      | Description                                  |
 |-----------|----------------------------------------------|
-| _default_ | Button content |
+| _default_ | Button content                               |
 | `loading` | Content that's rendered during loading state |
 
 ## Events
-
 | Event   | Description           | Value        |
 |---------|-----------------------|--------------|
 | `click` | User clicks on button | `MouseEvent` |
 
 ## CSS Variables
-
 | Variable                            | Default                                        |
 |-------------------------------------|------------------------------------------------|
 | `--v-button-width`                  | `auto`                                         |
diff --git a/src/components/v-button/v-button.story.ts b/src/components/v-button/v-button.story.ts
index d95a26cb7a..aae1400f40 100644
--- a/src/components/v-button/v-button.story.ts
+++ b/src/components/v-button/v-button.story.ts
@@ -12,9 +12,13 @@ import VButton from './v-button.vue';
 import VIcon from '../v-icon/';
 import markdown from './v-button.readme.md';
 import withPadding from '../../../.storybook/decorators/with-padding';
+import VueRouter from 'vue-router';
 
 Vue.component('v-button', VButton);
 Vue.component('v-icon', VIcon);
+Vue.use(VueRouter);
+
+const router = new VueRouter();
 
 export default {
 	title: 'Components / Button',
@@ -302,3 +306,10 @@ export const customLoading = () => ({
 		</template>
 	</v-button>`
 });
+
+export const asLink = () => ({
+	router: router,
+	template: `
+	<v-button to="/login">I'm a link</v-button>
+	`
+});
diff --git a/src/components/v-button/v-button.test.ts b/src/components/v-button/v-button.test.ts
index becc194bec..e0c96e626a 100644
--- a/src/components/v-button/v-button.test.ts
+++ b/src/components/v-button/v-button.test.ts
@@ -106,4 +106,15 @@ describe('Button', () => {
 		component.find('button').trigger('click');
 		expect(component.emitted()).toEqual({});
 	});
+
+	it('Renders as a router-link if the to prop is set', () => {
+		const component = mount(VButton, {
+			localVue,
+			propsData: {
+				to: '/login'
+			}
+		});
+
+		expect((component.vm as any).component).toBe('router-link');
+	});
 });
diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue
index f78bb5ad2b..a2c9ec6a40 100644
--- a/src/components/v-button/v-button.vue
+++ b/src/components/v-button/v-button.vue
@@ -1,9 +1,11 @@
 <template>
-	<button
+	<component
+		:is="component"
 		class="v-button"
 		:class="[sizeClass, { block, rounded, icon, outlined, loading }]"
 		:type="type"
 		:disabled="disabled"
+		:to="to"
 		@click="onClick"
 	>
 		<span class="content" :class="{ invisible: loading }"><slot /></span>
@@ -12,11 +14,12 @@
 				<v-progress-circular :x-small="xSmall" :small="small" indeterminate />
 			</slot>
 		</div>
-	</button>
+	</component>
 </template>
 
 <script lang="ts">
-import { createComponent, reactive, computed, Ref } from '@vue/composition-api';
+import { createComponent, reactive, computed, Ref, PropType } from '@vue/composition-api';
+import { Location } from 'vue-router';
 import parseCSSVar from '@/utils/parse-css-var';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
@@ -50,12 +53,18 @@ export default createComponent({
 			type: Boolean,
 			default: false
 		},
+		to: {
+			type: [String, Object] as PropType<string | Location>,
+			default: null
+		},
 		...sizeProps
 	},
 	setup(props, { emit }) {
 		const sizeClass = useSizeClass(props);
 
-		return { sizeClass, onClick };
+		const component = computed<string>(() => (props.to ? 'router-link' : 'button'));
+
+		return { sizeClass, onClick, component };
 
 		function onClick(event: MouseEvent) {
 			if (props.loading === true) return;
@@ -76,6 +85,9 @@ export default createComponent({
 	--v-button-font-size: 16px;
 
 	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	width: var(--v-button-width);
 	min-width: 78px;
 	height: var(--v-button-height);
@@ -83,6 +95,7 @@ export default createComponent({
 	color: var(--v-button-color);
 	font-weight: 500;
 	font-size: var(--v-button-font-size);
+	text-decoration: none;
 	background-color: var(--v-button-background-color);
 	border: var(--button-border-width) solid var(--v-button-background-color);
 	border-radius: var(--button-border-radius);
@@ -179,7 +192,7 @@ export default createComponent({
 
 	.content {
 		position: relative;
-		top: -1;
+		top: -1px;
 
 		&.invisible {
 			opacity: 0;