From e50000a05abaa9110d318948344b986a78f200fc Mon Sep 17 00:00:00 2001 From: Rijk van Zanten Date: Thu, 2 Apr 2020 20:48:01 -0400 Subject: [PATCH] Add v-info component (#296) * Add v-info component * Add test placeholder * Add readme --- src/components/register.ts | 2 + src/components/v-info/index.ts | 4 ++ src/components/v-info/readme.md | 30 ++++++++++ src/components/v-info/v-info.story.ts | 28 +++++++++ src/components/v-info/v-info.test.ts | 15 +++++ src/components/v-info/v-info.vue | 83 +++++++++++++++++++++++++++ 6 files changed, 162 insertions(+) create mode 100644 src/components/v-info/index.ts create mode 100644 src/components/v-info/readme.md create mode 100644 src/components/v-info/v-info.story.ts create mode 100644 src/components/v-info/v-info.test.ts create mode 100644 src/components/v-info/v-info.vue diff --git a/src/components/register.ts b/src/components/register.ts index e21b0ed714..722060aac7 100644 --- a/src/components/register.ts +++ b/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); diff --git a/src/components/v-info/index.ts b/src/components/v-info/index.ts new file mode 100644 index 0000000000..2e90d38579 --- /dev/null +++ b/src/components/v-info/index.ts @@ -0,0 +1,4 @@ +import VInfo from './v-info.vue'; + +export { VInfo }; +export default VInfo; diff --git a/src/components/v-info/readme.md b/src/components/v-info/readme.md new file mode 100644 index 0000000000..fb3ca525af --- /dev/null +++ b/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 + + We couldn't find the user you're looking for. + +``` + +## 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 `

` tag. | | +| `append` | After the main body copy. Can be used to inject buttons etc. | | + +## CSS Variables +n/a diff --git a/src/components/v-info/v-info.story.ts b/src/components/v-info/v-info.story.ts new file mode 100644 index 0000000000..f2f3abcadf --- /dev/null +++ b/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: ` + + 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. + + + `, + }); diff --git a/src/components/v-info/v-info.test.ts b/src/components/v-info/v-info.test.ts new file mode 100644 index 0000000000..ff12aa43f3 --- /dev/null +++ b/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); + }); +}); diff --git a/src/components/v-info/v-info.vue b/src/components/v-info/v-info.vue new file mode 100644 index 0000000000..2223ea52c2 --- /dev/null +++ b/src/components/v-info/v-info.vue @@ -0,0 +1,83 @@ + + + + +