Interface toggle (#459)

* Add icon prop overrides to checkbox

* Fix color example in storybook

* Add block style mode to checkbox base componet

* Add toggle interface

src/interfaces/index.ts

@@ -3,6 +3,7 @@ import InterfaceTextarea from './textarea/';
 import InterfaceDivider from './divider/';
 import InterfaceNumeric from './numeric/';
 import InterfaceSlider from './slider/';
+import InterfaceToggle from './toggle/';
 
 export const interfaces = [
 	InterfaceTextInput,
@@ -10,6 +11,7 @@ export const interfaces = [
 	InterfaceNumeric,
 	InterfaceSlider,
 	InterfaceDivider,
+	InterfaceToggle,
 ];
 
 export default interfaces;

src/interfaces/toggle/index.ts

@@ -0,0 +1,38 @@
+import InterfaceToggle from './toggle.vue';
+import { defineInterface } from '@/interfaces/define';
+
+export default defineInterface(({ i18n }) => ({
+	id: 'toggle',
+	name: i18n.t('toggle'),
+	icon: 'check_box',
+	component: InterfaceToggle,
+	options: [
+		{
+			field: 'iconOff',
+			name: i18n.t('icon_off'),
+			width: 'half',
+			interface: 'icon',
+			default_value: 'check_box_outline_blank',
+		},
+		{
+			field: 'iconOn',
+			name: i18n.t('icon_on'),
+			width: 'half',
+			interface: 'icon',
+			default_value: 'check_box',
+		},
+		{
+			field: 'label',
+			name: i18n.t('label'),
+			width: 'half',
+			interface: 'text-input',
+		},
+		{
+			field: 'color',
+			name: i18n.t('color'),
+			width: 'half',
+			interface: 'color',
+			default_value: 'var(--primary)',
+		},
+	],
+}));

src/interfaces/toggle/readme.md

@@ -0,0 +1,12 @@
+# Toggle
+
+Simple single styled checkbox
+
+## Options
+
+| Option     | Description                                        | Default                   |
+|------------|----------------------------------------------------|---------------------------|
+| `color`    | What color to use for the on state of the checkbox | `var(--primary)`          |
+| `label`    | What label to show next to the checkbox            | `null`                    |
+| `icon-on`  | What icon to show when the checkbox is checked     | `check_box`               |
+| `icon-off` | What icon to show when the checkbox is unchecked   | `check_box_outline_blank` |

src/interfaces/toggle/toggle.story.ts

@@ -0,0 +1,48 @@
+import { withKnobs, text, color } from '@storybook/addon-knobs';
+import readme from './readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { defineComponent, ref } from '@vue/composition-api';
+import RawValue from '../../../.storybook/raw-value.vue';
+
+export default {
+	title: 'Interfaces / Toggle',
+	decorators: [withKnobs, withPadding],
+	parameters: {
+		notes: readme,
+	},
+};
+
+export const basic = () =>
+	defineComponent({
+		components: { RawValue },
+		props: {
+			iconOn: {
+				default: text('Icon (On)', 'check_box'),
+			},
+			iconOff: {
+				default: text('Icon (Off)', 'check_box_outline_blank'),
+			},
+			label: {
+				default: text('Label', 'This is the label'),
+			},
+			color: {
+				default: color('Color', '#2f80ed'),
+			},
+		},
+		setup() {
+			const value = ref(false);
+			return { value };
+		},
+		template: `
+		<div>
+			<interface-toggle
+				v-model="value"
+				:icon-on="iconOn"
+				:icon-off="iconOff"
+				:color="color"
+				:label="label"
+			/>
+			<raw-value>{{ value }}</raw-value>
+		</div>
+		`,
+	});

src/interfaces/toggle/toggle.test.ts

@@ -0,0 +1,20 @@
+import InterfaceToggle from './toggle.vue';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueCompositionAPI from '@vue/composition-api';
+import VCheckbox from '@/components/v-checkbox';
+import VIcon from '@/components/v-icon';
+
+const localVue = createLocalVue();
+localVue.use(VueCompositionAPI);
+localVue.component('v-checkbox', VCheckbox);
+localVue.component('v-icon', VIcon);
+
+describe('Interfaces / Toggle', () => {
+	it('Renders a v-checkbox', () => {
+		const component = shallowMount(InterfaceToggle, {
+			localVue,
+		});
+
+		expect(component.find(VCheckbox).exists()).toBe(true);
+	});
+});

src/interfaces/toggle/toggle.vue

@@ -0,0 +1,42 @@
+<template>
+	<v-checkbox
+		block
+		:icon-on="iconOn"
+		:icon-off="iconOff"
+		:label="label"
+		:input-value="value"
+		@change="$listeners.input"
+		:style="{
+			'--v-checkbox-color': color,
+		}"
+	/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Boolean,
+			default: null,
+		},
+		label: {
+			type: String,
+			default: null,
+		},
+		iconOn: {
+			type: String,
+			default: 'check_box',
+		},
+		iconOff: {
+			type: String,
+			default: 'check_box_outline_blank',
+		},
+		color: {
+			type: String,
+			default: 'var(--primary)',
+		},
+	},
+});
+</script>