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/components/v-checkbox/readme.md

@@ -86,13 +86,17 @@ If you can't, you should listen to the `update:indeterminate` event and respond
 ```
 
 ## Props
-| Prop            | Description                                                              | Default |
-|-----------------|--------------------------------------------------------------------------|---------|
-| `value`         | Value for checkbox. Similar to value attr on checkbox type input in HTML | `--`    |
-| `inputValue`    | Value that's used with `v-model`. Either boolean or array of values      | `false` |
-| `label`         | Label for the checkbox                                                   | `--`    |
-| `disabled`      | Disable the checkbox                                                     | `false` |
-| `indeterminate` | Show the indeterminate state                                             | `false` |
+| Prop                 | Description                                                              | Default                   |
+|----------------------|--------------------------------------------------------------------------|---------------------------|
+| `value`              | Value for checkbox. Similar to value attr on checkbox type input in HTML | `--`                      |
+| `inputValue`         | Value that's used with `v-model`. Either boolean or array of values      | `false`                   |
+| `label`              | Label for the checkbox                                                   | `--`                      |
+| `disabled`           | Disable the checkbox                                                     | `false`                   |
+| `indeterminate`      | Show the indeterminate state                                             | `false`                   |
+| `icon-on`            | What icon to use for the on state                                        | `check_box`               |
+| `icon-off`           | What icon to use for the off state                                       | `check_box_outline_blank` |
+| `icon-indeterminate` | What icon to use for the indeterminate state                             | `indeterminate_check_box` |
+| `block`              | Show as styled block. Matches input size                                 | `block`                   |
 
 ## Slots
 | Slot      | Description                                                                                    |

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

@@ -1,9 +1,10 @@
-import { withKnobs, color } from '@storybook/addon-knobs';
+import { withKnobs, color, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VCheckbox from '../v-checkbox';
 import markdown from './readme.md';
 import withPadding from '../../../.storybook/decorators/with-padding';
+import { defineComponent, ref } from '@vue/composition-api';
 
 Vue.component('v-checkbox', VCheckbox);
 
@@ -87,9 +88,9 @@ export const colors = () => ({
 	},
 	template: `
 	<div>
-		<v-checkbox v-model="options" value="red" @change="onChange" :style="{'--v-checkbox-color': 'var(--red)'}" label="Red" />
-		<v-checkbox v-model="options" value="blue" @change="onChange" :style="{'--v-checkbox-color': 'var(--blue)'}" label="Blue" />
-		<v-checkbox v-model="options" value="yellow" @change="onChange" :style="{'--v-checkbox-color': 'var(--amber)'}" label="Yellow" />
+		<v-checkbox v-model="options" value="red" @change="onChange" :style="{'--v-checkbox-color': 'var(--danger)'}" label="Danger" />
+		<v-checkbox v-model="options" value="blue" @change="onChange" :style="{'--v-checkbox-color': 'var(--primary)'}" label="Primary" />
+		<v-checkbox v-model="options" value="yellow" @change="onChange" :style="{'--v-checkbox-color': 'var(--secondary)'}" label="Secondary" />
 		<v-checkbox v-model="options" value="custom" @change="onChange" :style="{'--v-checkbox-color': customColor}" label="Custom..." />
 	</div>
 	`,
@@ -136,3 +137,53 @@ export const slots = () => ({
 	</div>
 	`,
 });
+
+export const customIcons = () =>
+	defineComponent({
+		props: {
+			iconOn: {
+				default: text('Icon (On)', 'check'),
+			},
+			iconOff: {
+				default: text('Icon (Off)', 'close'),
+			},
+			iconIndeterminate: {
+				default: text('Icon (Indeterminate)', 'more_horiz'),
+			},
+		},
+		setup() {
+			const checked = ref(false);
+			const indeterminate = ref(false);
+			return { checked, indeterminate };
+		},
+		template: `
+			<div>
+				<v-checkbox
+					v-model="checked"
+					:indeterminate.sync="indeterminate"
+					:icon-on="iconOn"
+					:icon-off="iconOff"
+					:icon-indeterminate="iconIndeterminate"
+					label="Checkbox"
+				/>
+				<v-checkbox style="margin-top: 32px;" v-model="indeterminate" label="Indeterminate" />
+			</div>
+		`,
+	});
+
+export const blockStyle = () =>
+	defineComponent({
+		setup() {
+			const checked = ref(false);
+			const indeterminate = ref(false);
+			return { checked, indeterminate };
+		},
+		template: `
+			<v-checkbox
+				style="max-width: 300px;"
+				v-model="checked"
+				label="Checkbox"
+				block
+			/>
+		`,
+	});

src/components/v-checkbox/v-checkbox.vue

@@ -6,7 +6,7 @@
 		role="checkbox"
 		:aria-pressed="isChecked ? 'true' : 'false'"
 		:disabled="disabled"
-		:class="{ checked: isChecked, indeterminate }"
+		:class="{ checked: isChecked, indeterminate, block }"
 	>
 		<div class="prepend" v-if="$scopedSlots.prepend"><slot name="prepend" /></div>
 		<v-icon class="checkbox" :name="icon" />
@@ -46,6 +46,22 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		iconOn: {
+			type: String,
+			default: 'check_box',
+		},
+		iconOff: {
+			type: String,
+			default: 'check_box_outline_blank',
+		},
+		iconIndeterminate: {
+			type: String,
+			default: 'indeterminate_check_box',
+		},
+		block: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const isChecked = computed<boolean>(() => {
@@ -57,8 +73,8 @@ export default defineComponent({
 		});
 
 		const icon = computed<string>(() => {
-			if (props.indeterminate === true) return 'indeterminate_check_box';
-			return isChecked.value ? 'check_box' : 'check_box_outline_blank';
+			if (props.indeterminate === true) return props.iconIndeterminate;
+			return isChecked.value ? props.iconOn : props.iconOff;
 		});
 
 		return { isChecked, toggleInput, icon };
@@ -90,8 +106,9 @@ export default defineComponent({
 @import '@/styles/mixins/no-wrap';
 
 .v-checkbox {
-	--v-checkbox-color: var(--foreground-normal);
+	--v-checkbox-color: var(--primary);
 
+	position: relative;
 	display: flex;
 	align-items: center;
 	font-size: 0;
@@ -129,10 +146,45 @@ export default defineComponent({
 		}
 	}
 
+	&.block {
+		position: relative;
+		width: 100%;
+		height: var(--input-height);
+		padding: 10px; // 14 - 4 (border)
+		background-color: var(--page-background);
+		border: 2px solid var(--background-subdued);
+		border-radius: var(--border-radius);
+
+		&::before {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: -1;
+			width: 100%;
+			height: 100%;
+			background-color: var(--background-subdued);
+			border-radius: var(--border-radius);
+			content: '';
+		}
+	}
+
 	&:not(:disabled):not(.indeterminate).checked {
 		.checkbox {
 			--v-icon-color: var(--v-checkbox-color);
 		}
+
+		&.block {
+			border-color: var(--v-checkbox-color);
+
+			.label {
+				color: var(--v-checkbox-color);
+			}
+
+			&::before {
+				background-color: var(--v-checkbox-color);
+				opacity: 0.1;
+			}
+		}
 	}
 
 	.prepend,