From 7a43e6518b94e4e2aa08b3b89c6f4868e4e16624 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 27 Mar 2020 12:12:51 -0400
Subject: [PATCH] Add divider component (#252)

---
 src/components/v-divider/index.ts           |  4 +
 src/components/v-divider/readme.md          | 26 +++++++
 src/components/v-divider/v-divider.story.ts | 84 +++++++++++++++++++++
 src/components/v-divider/v-divider.test.ts  | 14 ++++
 src/components/v-divider/v-divider.vue      | 61 +++++++++++++++
 5 files changed, 189 insertions(+)
 create mode 100644 src/components/v-divider/index.ts
 create mode 100644 src/components/v-divider/readme.md
 create mode 100644 src/components/v-divider/v-divider.story.ts
 create mode 100644 src/components/v-divider/v-divider.test.ts
 create mode 100644 src/components/v-divider/v-divider.vue

diff --git a/src/components/v-divider/index.ts b/src/components/v-divider/index.ts
new file mode 100644
index 0000000000..b462504cae
--- /dev/null
+++ b/src/components/v-divider/index.ts
@@ -0,0 +1,4 @@
+import VDivider from './v-divider.vue';
+
+export { VDivider };
+export default VDivider;
diff --git a/src/components/v-divider/readme.md b/src/components/v-divider/readme.md
new file mode 100644
index 0000000000..3463574495
--- /dev/null
+++ b/src/components/v-divider/readme.md
@@ -0,0 +1,26 @@
+# Divider
+
+Divides content. Made to be used in `v-list` or `v-tabs` components.
+
+## Usage
+
+```html
+<v-divider />
+```
+
+## Props
+| Prop       | Description                                         | Default |
+|------------|-----------------------------------------------------|---------|
+| `vertical` | Render the divider vertically                       | `false` |
+| `inset`    | Insets the divider to align with the (list) content | `false` |
+
+## Events
+n/a
+
+## Slots
+n/a
+
+## CSS Variables
+| Variable            | Default                             |
+|---------------------|-------------------------------------|
+| `--v-divider-color` | `var(--foreground-color-tertiary)` |
diff --git a/src/components/v-divider/v-divider.story.ts b/src/components/v-divider/v-divider.story.ts
new file mode 100644
index 0000000000..cc5642cd66
--- /dev/null
+++ b/src/components/v-divider/v-divider.story.ts
@@ -0,0 +1,84 @@
+import VDivider from './v-divider.vue';
+import readme from './readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { defineComponent } from '@vue/composition-api';
+import VList, {
+	VListItem,
+	VListItemContent,
+	VListItemTitle,
+	VListItemIcon,
+} from '@/components/v-list';
+import VIcon from '@/components/v-icon/';
+
+export default {
+	title: 'Components / Divider',
+	parameters: {
+		notes: readme,
+	},
+	decorators: [withPadding, withKnobs],
+};
+
+export const basic = () =>
+	defineComponent({
+		components: { VDivider },
+		props: {
+			vertical: {
+				default: boolean('Vertical', false),
+			},
+			inset: {
+				default: boolean('Inset', false),
+			},
+		},
+		template: `
+			<v-divider :vertical="vertical" :inset="inset" />
+		`,
+	});
+
+export const inList = () =>
+	defineComponent({
+		components: {
+			VDivider,
+			VList,
+			VListItem,
+			VListItemContent,
+			VListItemIcon,
+			VListItemTitle,
+			VIcon,
+		},
+		props: {
+			inset: {
+				default: boolean('Inset', false),
+			},
+		},
+		template: `
+			<v-sheet style="max-width: 200px">
+				<v-list>
+					<v-list-item v-for="n in 3" @click="() => {}">
+						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
+						<v-list-item-content>
+							<v-list-item-title>Item {{ n }}</v-list-item-title>
+						</v-list-item-content>
+					</v-list-item>
+
+					<v-divider :inset="inset" style="margin-top: 8px; margin-bottom: 8px;" />
+
+					<v-list-item v-for="n in 1" @click="() => {}">
+						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
+						<v-list-item-content>
+							<v-list-item-title>Item {{ n + 3 }}</v-list-item-title>
+						</v-list-item-content>
+					</v-list-item>
+
+					<v-divider :inset="inset" style="margin-top: 8px; margin-bottom: 8px;" />
+
+					<v-list-item v-for="n in 3" @click="() => {}">
+						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
+						<v-list-item-content>
+							<v-list-item-title>Item {{ n + 4 }}</v-list-item-title>
+						</v-list-item-content>
+					</v-list-item>
+				</v-list>
+			</v-sheet>
+		`,
+	});
diff --git a/src/components/v-divider/v-divider.test.ts b/src/components/v-divider/v-divider.test.ts
new file mode 100644
index 0000000000..90b3e67b08
--- /dev/null
+++ b/src/components/v-divider/v-divider.test.ts
@@ -0,0 +1,14 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueCompositionAPI from '@vue/composition-api';
+
+import VDivider from './v-divider.vue';
+
+const localVue = createLocalVue();
+localVue.use(VueCompositionAPI);
+
+describe('Components / Divider', () => {
+	it('Renders', () => {
+		const component = shallowMount(VDivider, { localVue });
+		expect(component.isVueInstance()).toBe(true);
+	});
+});
diff --git a/src/components/v-divider/v-divider.vue b/src/components/v-divider/v-divider.vue
new file mode 100644
index 0000000000..bfd9b98ab5
--- /dev/null
+++ b/src/components/v-divider/v-divider.vue
@@ -0,0 +1,61 @@
+<template>
+	<hr
+		class="v-divider"
+		role="separator"
+		:class="{ vertical, inset }"
+		:aria-orientation="vertical ? 'vertical' : 'horizontal'"
+	/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		inset: {
+			type: Boolean,
+			default: false,
+		},
+		vertical: {
+			type: Boolean,
+			default: false,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.v-divider {
+	--v-divider-color: var(--foreground-color-tertiary);
+
+	display: block;
+	flex-basis: 0px;
+	flex-grow: 1;
+	flex-shrink: 1;
+	max-width: 100%;
+	overflow: visible;
+	border: solid;
+	border-color: var(--v-divider-color);
+	border-width: 2px 0 0 0;
+
+	&.inset:not(.vertical) {
+		max-width: calc(100% - 52px);
+		margin-left: 52px;
+	}
+
+	&.vertical {
+		display: inline-flex;
+		align-self: stretch;
+		width: 0px;
+		max-width: 0px;
+		height: inherit;
+		border-width: 0 2px 0 0;
+
+		&.inset {
+			min-height: 0;
+			max-height: calc(100% - 16px);
+			margin-top: 8px;
+		}
+	}
+}
+</style>