Interface divider lol (#435)

* divider interface & updates to component

* fixes

* Remove subtitle in favor of relying on field not

As per figma

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

src/components/v-divider/readme.md

@@ -9,20 +9,26 @@ Divides content. Made to be used in `v-list` or `v-tabs` components.
 ```
 
 ## Props
-| Prop       | Description                                         | Default |
-|------------|-----------------------------------------------------|---------|
-| `vertical` | Render the divider vertically                       | `false` |
+
+| Prop          | Description                                           | Default |
+| ------------- | ----------------------------------------------------- | ------- |
+| `vertical`    | Render the divider vertically                         | `false` |
+| `inlineTitle` | Render the title inline with the divider, or under it | `true`  |
 
 ## Events
+
 n/a
 
 ## Slots
 
-| Slot      | Description                                                 | Data |
-|-----------|-------------------------------------------------------------|------|
-| _default_ | Label on the divider. This isn't rendered in vertical mode. |      |
+| Slot      | Description                                                              | Data |
+|-----------|--------------------------------------------------------------------------|------|
+| _default_ | Label on the divider. This isn't rendered in vertical mode.              |      |
+| `icon`    | Icon on the divider. Rendered in all modes, inline with title if present |      |
 
 ## CSS Variables
-| Variable            | Default                             |
-|---------------------|-------------------------------------|
-| `--v-divider-color` | `var(--foreground-subdued)` |
+
+| Variable                  | Default                     |
+| ------------------------- | --------------------------- |
+| `--v-divider-color`       | `var(--border-normal)`      |
+| `--v-divider-label-color` | `var(--foreground-subdued)` |

src/components/v-divider/v-divider.story.ts

@@ -39,14 +39,36 @@ export const withText = () =>
 			vertical: {
 				default: boolean('Vertical', false),
 			},
+			inlineTitle: {
+				default: boolean('Inline Title', true),
+			},
 		},
 		template: `
-			<v-divider :vertical="vertical">
+			<v-divider v-bind="{ vertical, inlineTitle }">
 				This is a divider.
 			</v-divider>
 		`,
 	});
 
+export const withColorIcon = () =>
+	defineComponent({
+		components: { VDivider, VIcon },
+		props: {
+			vertical: {
+				default: boolean('Vertical', false),
+			},
+			inlineTitle: {
+				default: boolean('Inline Title', true),
+			},
+		},
+		template: `
+			<v-divider v-bind="{ vertical, inlineTitle }" :style="{'--v-divider-color': 'var(--secondary-125)', '--v-divider-label-color':  'var(--secondary-125)'}">
+			<template #icon><v-icon name="box"></template>
+			This is a divider.
+			</v-divider>
+		`,
+	});
+
 export const inList = () =>
 	defineComponent({
 		components: {

src/components/v-divider/v-divider.vue

@@ -1,7 +1,10 @@
 <template>
-	<div class="v-divider" :class="{ vertical }">
-		<span v-if="!vertical && $slots.default"><slot /></span>
+	<div class="v-divider" :class="{ vertical, inlineTitle }">
 		<hr role="separator" :aria-orientation="vertical ? 'vertical' : 'horizontal'" />
+		<span v-if="$slots.icon || $slots.default" class="wrapper">
+			<slot name="icon" class="icon" />
+			<span v-if="!vertical && $slots.default" class="title"><slot /></span>
+		</span>
 	</div>
 </template>
 
@@ -14,6 +17,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		inlineTitle: {
+			type: Boolean,
+			default: true,
+		},
 	},
 });
 </script>
@@ -23,37 +30,58 @@ export default defineComponent({
 	--v-divider-color: var(--border-normal);
 	--v-divider-label-color: var(--foreground-subdued);
 
-	display: flex;
 	flex-basis: 0px;
 	flex-grow: 1;
 	flex-shrink: 1;
+	flex-wrap: wrap;
 	align-items: center;
 	overflow: visible;
 
 	hr {
 		flex-grow: 1;
+		order: 1;
 		max-width: 100%;
+		margin-bottom: 8px;
 		border: solid;
 		border-color: var(--v-divider-color);
 		border-width: 2px 0 0 0;
 	}
 
-	span {
+	span.wrapper {
 		margin-right: 16px;
 		color: var(--v-divider-label-color);
-		font-size: 16px;
+		font-weight: normal;
+		font-size: 24px;
+	}
+
+	&.inlineTitle {
+		display: flex;
+
+		span.wrapper {
+			order: 0;
+		}
+
+		hr {
+			margin: 0;
+		}
 	}
 
 	&.vertical {
 		display: inline-flex;
+		flex-direction: column;
 		align-self: stretch;
+		height: 100%;
 
 		hr {
 			width: 0px;
 			max-width: 0px;
-			height: inherit;
 			border-width: 0 2px 0 0;
 		}
+
+		span.wrapper {
+			order: 0;
+			margin: 0 0 8px;
+		}
 	}
 }
 </style>

src/interfaces/divider/divider.story.ts

@@ -1,8 +1,12 @@
-import { withKnobs, color } from '@storybook/addon-knobs';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import Vue from 'vue';
+import InterfaceDivider from './divider.vue';
+
 import markdown from './readme.md';
 import withPadding from '../../../.storybook/decorators/with-padding';
 import { defineComponent } from '@vue/composition-api';
-import VDivider from '@/components/v-divider';
+
+Vue.component('interface-divider', InterfaceDivider);
 
 export default {
 	title: 'Interfaces / Divider',
@@ -12,17 +16,24 @@ export default {
 	},
 };
 
-export const basic = () =>
+export const input = () =>
 	defineComponent({
-		components: {
-			VDivider,
-		},
 		props: {
 			color: {
-				default: color('Color', '#d6dfe2'),
+				default: text('Color', '', 'Options'),
+			},
+			icon: {
+				default: text('Icon', '', 'Options'),
+			},
+			title: {
+				default: text('Title', '', 'Options'),
 			},
 		},
 		template: `
-			<interface-divider :color="color" />
+		<div>
+			<interface-divider
+				v-bind="{ color, icon, title }"
+			/>
+		</div>
 		`,
 	});

src/interfaces/divider/divider.test.ts

@@ -0,0 +1,18 @@
+import VueCompositionAPI from '@vue/composition-api';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import InterfaceDivider from './divider.vue';
+
+import VDivider from '@/components/v-divider';
+
+const localVue = createLocalVue();
+localVue.use(VueCompositionAPI);
+localVue.component('v-divider', VDivider);
+
+describe('Interfaces / Numeric', () => {
+	it('Renders a v-input', () => {
+		const component = shallowMount(InterfaceDivider, {
+			localVue,
+		});
+		expect(component.find(VDivider).exists()).toBe(true);
+	});
+});

src/interfaces/divider/divider.vue

@@ -1,10 +1,14 @@
 <template>
 	<v-divider
-		full-width
+		:inline-title="false"
 		:style="{
 			'--v-divider-color': color,
+			'--v-divider-label-color': color,
 		}"
-	/>
+	>
+		<template v-if="icon" #icon><v-icon :name="icon" /></template>
+		{{ title }}
+	</v-divider>
 </template>
 
 <script lang="ts">
@@ -16,6 +20,14 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		icon: {
+			type: String,
+			default: null,
+		},
+		title: {
+			type: String,
+			default: null,
+		},
 	},
 });
 </script>

src/interfaces/divider/index.ts

@@ -1,5 +1,5 @@
-import InterfaceDivider from './divider.vue';
 import { defineInterface } from '@/interfaces/define';
+import InterfaceDivider from './divider.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'divider',
@@ -11,6 +11,18 @@ export default defineInterface(({ i18n }) => ({
 			field: 'color',
 			name: i18n.t('color'),
 			width: 'half',
+			interface: 'color',
+		},
+		{
+			field: 'icon',
+			name: i18n.t('icon'),
+			width: 'half',
+			interface: 'icon',
+		},
+		{
+			field: 'title',
+			name: i18n.t('title'),
+			width: 'half',
 			interface: 'text-input',
 		},
 	],

src/interfaces/divider/readme.md

@@ -1 +1,9 @@
 # Divider
+
+## Options
+
+| Prop       | Description                    | Default                |
+| ---------- | ------------------------------ | ---------------------- |
+| `color`    | Divider and title color        | `var(--border-normal)` |
+| `icon`     | Icon rendered before the title | `null`                 |
+| `title`    | Title for divider              | `null`                 |