Make icon display useful

app/src/displays/icon/icon.story.ts

@@ -1,24 +0,0 @@
-import { defineComponent } from '@vue/composition-api';
-import { withKnobs, text } from '@storybook/addon-knobs';
-import readme from './readme.md';
-import withPadding from '../../../.storybook/decorators/with-padding';
-
-export default {
-	title: 'Displays / Icon',
-	parameters: {
-		notes: readme,
-	},
-	decorators: [withKnobs, withPadding],
-};
-
-export const basic = () =>
-	defineComponent({
-		props: {
-			iconName: {
-				default: text('Icon Name', 'subject'),
-			},
-		},
-		template: `
-			<display-icon :icon-name="iconName" />
-		`,
-	});

app/src/displays/icon/icon.test.ts

@@ -1,18 +0,0 @@
-import DisplayIcon from './icon.vue';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VIcon from '@/components/v-icon';
-import VueCompositionAPI from '@vue/composition-api';
-
-const localVue = createLocalVue();
-localVue.use(VueCompositionAPI);
-localVue.component('v-icon', VIcon);
-
-describe('Displays / Icon', () => {
-	it('Renders the icon component', () => {
-		const component = shallowMount(DisplayIcon, {
-			localVue,
-		});
-
-		expect(component.find(VIcon).exists()).toBe(true);
-	});
-});

app/src/displays/icon/icon.vue

@@ -1,5 +1,5 @@
 <template functional>
-	<v-icon small :name="props.iconName" />
+	<v-icon small :name="props.value" />
 </template>
 
 <script lang="ts">
@@ -7,9 +7,9 @@ import { defineComponent } from '@vue/composition-api';
 
 export default defineComponent({
 	props: {
-		iconName: {
+		value: {
 			type: String,
-			default: 'subject',
+			default: null,
 		},
 	},
 });

app/src/displays/icon/index.ts

@@ -4,17 +4,20 @@ import { types } from '@/types';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'icon',
-	name: i18n.t('displays.icon.icon'),
+	name: i18n.t('icon'),
 	icon: 'thumb_up',
 	handler: DisplayIcon,
 	options: [
 		{
-			field: 'icon',
-			name: i18n.t('icon'),
-			type: 'string',
+			field: 'outline',
+			name: i18n.t('outline'),
+			type: 'boolean',
 			meta: {
-				interface: 'icon',
+				interface: 'toggle',
 				width: 'half',
+				options: {
+					label: i18n.t('use_outline_variant'),
+				},
 			},
 		},
 	],

app/src/displays/icon/readme.md

@@ -1,26 +0,0 @@
-# Icon Display (Component)
-
-Renders an icon, that's it. It doesn't care about the value that's saved.
-
-This can be useful for long pieces of content, or binary, where it isn't relevant to see any part of
-the value.
-
-## Usage
-
-```html
-<display-icon icon-name="subject" />
-```
-
-## Props
-| Prop        | Description                | Default   |
-|-------------|----------------------------|-----------|
-| `icon-name` | Name of the icon to render | `subject` |
-
-## Events
-n/a
-
-## Slots
-n/a
-
-## CSS Variables
-n/a

app/src/lang/en-US/index.json

@@ -649,6 +649,9 @@
 	"tags": "Tags",
 	"format_text": "Format Text",
 
+	"outline": "Outline",
+	"use_outline_variant": "Use the outline variant",
+
 	"bold": "Bold",
 	"subdued": "Subdued",