diff --git a/__tests__/icon.test.js b/__tests__/icon.test.js index 2c23196..2a0425f 100644 --- a/__tests__/icon.test.js +++ b/__tests__/icon.test.js @@ -3,11 +3,17 @@ import { VntIcon } from '@/components'; import { isInstalled } from './utils'; import { resolveIcon } from '@/components/icon/Icon.vue'; +import VntIconAdd from '@/components/icon/icons/Add.vue'; +import VntIconClose from '@/components/icon/icons/Close.vue'; import VntIconContact from '@/components/icon/icons/Contact.vue'; +import VntIconDelete from '@/components/icon/icons/Delete.vue'; import VntIconEdit from '@/components/icon/icons/Edit.vue'; +import VntIconFlag from '@/components/icon/icons/Flag.vue'; import VntIconGlobalNav from '@/components/icon/icons/GlobalNavigation.vue'; +import VntIconHome from '@/components/icon/icons/Home.vue'; import VntIconSettings from '@/components/icon/icons/Settings.vue'; import VntIconSave from '@/components/icon/icons/Save.vue'; +import VntIconTag from '@/components/icon/icons/Tag.vue'; describe('Icon', () => { let wrapper; @@ -42,12 +48,18 @@ describe('Icon', () => { }); test('uses correct component', () => { + expect(resolveIcon('add').name).toBe(VntIconAdd.name); + expect(resolveIcon('close').name).toBe(VntIconClose.name); expect(resolveIcon('contact').name).toBe(VntIconContact.name); + expect(resolveIcon('delete').name).toBe(VntIconDelete.name); expect(resolveIcon('edit').name).toBe(VntIconEdit.name); + expect(resolveIcon('flag').name).toBe(VntIconFlag.name); expect(resolveIcon('global-navigation').name).toBe(VntIconGlobalNav.name); expect(resolveIcon('global-nav').name).toBe(VntIconGlobalNav.name); + expect(resolveIcon('home').name).toBe(VntIconHome.name); expect(resolveIcon('save').name).toBe(VntIconSave.name); expect(resolveIcon('settings').name).toBe(VntIconSettings.name); + expect(resolveIcon('tag').name).toBe(VntIconTag.name); expect(resolveIcon('some-non-existing-icon')).toBeNull(); }); diff --git a/docs/components/icon.md b/docs/components/icon.md index 8dad707..b3c42a5 100644 --- a/docs/components/icon.md +++ b/docs/components/icon.md @@ -16,8 +16,14 @@ Currently supported glyphs: `name` | icon --- |:---: +add | +close | contact | +delete | edit | +flag | global-navigation | +home | save | settings | +tag | diff --git a/src/components/icon/Icon.vue b/src/components/icon/Icon.vue index 7b6e138..7a3fc15 100644 --- a/src/components/icon/Icon.vue +++ b/src/components/icon/Icon.vue @@ -1,23 +1,41 @@ + diff --git a/src/components/icon/icons/Close.vue b/src/components/icon/icons/Close.vue new file mode 100644 index 0000000..7cb6f8e --- /dev/null +++ b/src/components/icon/icons/Close.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/components/icon/icons/Delete.vue b/src/components/icon/icons/Delete.vue new file mode 100644 index 0000000..2320446 --- /dev/null +++ b/src/components/icon/icons/Delete.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/components/icon/icons/Flag.vue b/src/components/icon/icons/Flag.vue new file mode 100644 index 0000000..a0e2b35 --- /dev/null +++ b/src/components/icon/icons/Flag.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/components/icon/icons/Home.vue b/src/components/icon/icons/Home.vue new file mode 100644 index 0000000..06f9fee --- /dev/null +++ b/src/components/icon/icons/Home.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/components/icon/icons/Tag.vue b/src/components/icon/icons/Tag.vue new file mode 100644 index 0000000..b006993 --- /dev/null +++ b/src/components/icon/icons/Tag.vue @@ -0,0 +1,15 @@ + + + diff --git a/stories/components/icon.stories.js b/stories/components/icon.stories.js index 5d4f906..fa7c839 100644 --- a/stories/components/icon.stories.js +++ b/stories/components/icon.stories.js @@ -3,21 +3,46 @@ import { storiesOf } from '@storybook/vue'; /* eslint no-undef: 0, no-unused-vars: 0 */ storiesOf('Icon', module) + .add('add', () => ({ + render: (h) => ( + + ) + })) + .add('close', () => ({ + render: (h) => ( + + ) + })) .add('contact', () => ({ render: (h) => ( ) })) + .add('delete', () => ({ + render: (h) => ( + + ) + })) .add('edit', () => ({ render: (h) => ( ) })) + .add('flag', () => ({ + render: (h) => ( + + ) + })) .add('global-navigation', () => ({ render: (h) => ( ) })) + .add('home', () => ({ + render: (h) => ( + + ) + })) .add('save', () => ({ render: (h) => ( @@ -27,4 +52,9 @@ storiesOf('Icon', module) render: (h) => ( ) + })) + .add('tag', () => ({ + render: (h) => ( + + ) }));