Add v-info component (#296)

* Add v-info component

* Add test placeholder

* Add readme

src/components/register.ts

@@ -13,6 +13,7 @@ import VForm from './v-form';
 import VHover from './v-hover/';
 import VModal from './v-modal/';
 import VIcon from './v-icon/';
+import VInfo from './v-info/';
 import VInput from './v-input/';
 import VItemGroup, { VItem } from './v-item-group';
 import VList, {
@@ -54,6 +55,7 @@ Vue.component('v-form', VForm);
 Vue.component('v-hover', VHover);
 Vue.component('v-modal', VModal);
 Vue.component('v-icon', VIcon);
+Vue.component('v-info', VInfo);
 Vue.component('v-input', VInput);
 Vue.component('v-item-group', VItemGroup);
 Vue.component('v-item', VItem);

src/components/v-info/index.ts

@@ -0,0 +1,4 @@
+import VInfo from './v-info.vue';
+
+export { VInfo };
+export default VInfo;

src/components/v-info/readme.md

@@ -0,0 +1,30 @@
+# Info
+
+Renders a stylized informational placard. It's similar in `v-notice` in it's use case.
+
+## Usage
+
+```html
+<v-info icon="person" title="User Not Found" type="warning">
+	We couldn't find the user you're looking for.
+</v-info>
+```
+
+## Props
+| Prop     | Description                                   | Default |
+|----------|-----------------------------------------------|---------|
+| `title`* | Title for the info section                    |         |
+| `icon`   | What icon to render above the title           | `box`   |
+| `type`   | One of `info`, `success`, `warning`, `danger` | `info`  |
+
+## Events
+n/a
+
+## Slots
+| Slot      | Description                                                  | Data |
+|-----------|--------------------------------------------------------------|------|
+| _default_ | Default content area. Is rendered within a styled `<p>` tag. |      |
+| `append`  | After the main body copy. Can be used to inject buttons etc. |      |
+
+## CSS Variables
+n/a

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

@@ -0,0 +1,28 @@
+import withPadding from '../../../.storybook/decorators/with-padding';
+import readme from './readme.md';
+import { defineComponent } from '@vue/composition-api';
+import { withKnobs, select } from '@storybook/addon-knobs';
+
+export default {
+	title: 'Components / Info',
+	decorators: [withPadding, withKnobs],
+	parameters: { notes: readme },
+};
+
+export const basic = () =>
+	defineComponent({
+		props: {
+			type: {
+				default: select('Type', ['info', 'success', 'warning', 'danger'], 'info'),
+			},
+		},
+		template: `
+			<v-info :type="type" title="No Collections" icon="box">
+				It looks like you don’t have any Collections yet.
+				Fortunately, it’s very easy to create one — click the button below to get started.
+				<template #append>
+					<v-button>Create Collection</v-button>
+				</template>
+			</v-info>
+		`,
+	});

src/components/v-info/v-info.test.ts

@@ -0,0 +1,15 @@
+import VInfo from './v-info.vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueCompositionAPI from '@vue/composition-api';
+import VIcon from '@/components/v-icon';
+
+const localVue = createLocalVue();
+localVue.use(VueCompositionAPI);
+localVue.component('v-icon', VIcon);
+
+describe('Components / Info', () => {
+	it('Renders', () => {
+		const component = shallowMount(VInfo, { localVue, propsData: { title: 'test' } });
+		expect(component.isVueInstance()).toBe(true);
+	});
+});

src/components/v-info/v-info.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="v-info" :class="type">
+		<div class="icon">
+			<v-icon large :name="icon" />
+		</div>
+		<h2 class="title type-title">{{ title }}</h2>
+		<p class="content"><slot /></p>
+		<slot name="append" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		icon: {
+			type: String,
+			default: 'box',
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+		type: {
+			type: String as PropType<'info' | 'success' | 'warning' | 'danger'>,
+			default: 'info',
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.v-info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+}
+
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 120px;
+	height: 120px;
+	margin-bottom: 20px;
+	border-radius: 50%;
+}
+
+.info .icon {
+	color: var(--primary);
+	background-color: var(--primary-alt);
+}
+
+.success .icon {
+	color: var(--success);
+	background-color: var(--success-alt);
+}
+
+.warning .icon {
+	color: var(--warning);
+	background-color: var(--warning-alt);
+}
+
+.danger .icon {
+	color: var(--danger);
+	background-color: var(--danger-alt);
+}
+
+.title {
+	margin-bottom: 12px;
+}
+
+.content {
+	max-width: 340px;
+	color: var(--foreground-subdued);
+
+	&:not(:last-child) {
+		margin-bottom: 32px;
+	}
+}
+</style>