@kiva/kv-components 3.107.0 → 3.107.2

package/dist/components/stories/KvRadio.stories.js

@@ -0,0 +1,140 @@
+import KvRadio from '../KvRadio.vue';
+
+export default {
+	title: 'Forms/KvRadio',
+	component: KvRadio,
+	args: {
+		checked: false,
+		disabled: false,
+	},
+};
+
+const Template = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvRadio,
+	},
+	data: () => ({
+		radioExampleModel: 'three',
+	}),
+	template: `
+		<div>
+			<fieldset>
+				<legend class="tw-text-h4 tw-mb-2">Choose a Radio</legend>
+				<div class="tw-flex tw-flex-col tw-gap-2 tw-mb-2">
+					<kv-radio
+						:disabled="disabled"
+						value="one"
+						v-model="radioExampleModel"
+						@change="onChange"
+						@focus="onFocus"
+					>
+						One radio button
+					</kv-radio>
+					<kv-radio
+						:disabled="disabled"
+						value="two"
+						v-model="radioExampleModel"
+						@change="onChange"
+						@focus="onFocus"
+					>
+						Two radio button
+					</kv-radio>
+					<kv-radio
+						:disabled="disabled"
+						value="three"
+						v-model="radioExampleModel"
+						@change="onChange"
+						@focus="onFocus"
+					>
+						Three radio button
+					</kv-radio>
+					<kv-radio
+						:disabled="disabled"
+						value="four"
+						v-model="radioExampleModel"
+						@change="onChange"
+						@focus="onFocus"
+					>
+						Four is long lorem ipsum nulla duis velit occaecat consectetur pariatur enim eu nostrud. <a href="https://placeholder.com">Irure et cupidatat</a> veniam sit enim proident exercitation ut Lorem do. Commodo ad veniam commodo est amet pariatur.
+					</kv-radio>
+				</div>
+			</fieldset>
+			<p>Selected: {{radioExampleModel}}</p>
+		</div>`,
+	methods: {
+		onChange(val) {
+			console.log(val);
+		},
+		onFocus(e) {
+			console.log(e);
+		},
+	},
+});
+
+export const Default = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	disabled: true,
+};
+
+export const WithoutVModel = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvRadio,
+	},
+	data: () => ({
+		radioExampleModel: 'three',
+	}),
+	template: `
+		<div>
+			<fieldset>
+				<legend class="tw-text-h4 tw-mb-2">Choose a Radio</legend>
+				<div class="tw-flex tw-flex-col tw-gap-2 tw-mb-2">
+					<kv-radio
+						:disabled="disabled"
+						value="one"
+						name="my_group"
+						:checked="radioExampleModel === 'one'"
+						@change="(val) => radioExampleModel = val"
+					>
+						One radio button
+					</kv-radio>
+					<kv-radio
+						:disabled="true"
+						value="two"
+						name="my_group"
+						:checked="radioExampleModel === 'two'"
+						@change="(val) => radioExampleModel = val"
+					>
+						Two radio button
+					</kv-radio>
+					<kv-radio
+						:disabled="disabled"
+						value="three"
+						name="my_group"
+						:checked="radioExampleModel === 'three'"
+						@change="(val) => radioExampleModel = val"
+					>
+						Three radio button
+					</kv-radio>
+					<kv-radio
+						:disabled="disabled"
+						value="four"
+						name="my_group"
+						:checked="radioExampleModel === 'four'"
+						@change="(val) => radioExampleModel = val"
+					>
+						Four is long lorem ipsum nulla duis velit occaecat consectetur pariatur enim eu nostrud. <a href="https://placeholder.com">Irure et cupidatat</a> veniam sit enim proident exercitation ut Lorem do. Commodo ad veniam commodo est amet pariatur.
+					</kv-radio>
+				</div>
+			</fieldset>
+			<p>Selected: {{radioExampleModel}}</p>
+		</div>
+	`,
+});

package/dist/components/stories/KvSelect.stories.js

@@ -0,0 +1,125 @@
+import KvSelect from '../KvSelect.vue';
+
+export default {
+	title: 'Forms/KvSelect',
+	component: KvSelect,
+};
+
+const Template = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvSelect,
+	},
+	data: () => ({
+		exampleModel: 'example2',
+	}),
+	template: `
+		<div>
+			<label
+				for="example-id"
+				class="tw-text-h4 tw-block"
+			>
+				Choose an example
+			</label>
+			<kv-select
+				id="example-id"
+				:disabled="disabled"
+				@change="onChange"
+				v-model="exampleModel"
+				class="tw-mt-2"
+			>
+					<option value="example1">Example one</option>
+					<option value="example2">Example two</option>
+					<option value="example3">Example three</option>
+			</kv-select>
+		</div>`,
+	methods: {
+		onChange(e) {
+			console.log(e);
+		},
+	},
+});
+
+export const Default = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	disabled: true,
+};
+
+export const LabelHidden = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvSelect,
+	},
+	data: () => ({
+		exampleModel: 'example1',
+	}),
+	template: `
+		<div>
+			<label
+				for="example-id"
+				class="tw-text-h4 tw-block tw-sr-only"
+			>
+				Choose an example
+			</label>
+
+			<kv-select
+				id="example-id"
+				:disabled="disabled"
+				@change="onChange"
+				v-model="exampleModel"
+			>
+				<option value="example1">Example one</option>
+				<option value="example2">Example two</option>
+				<option value="example3">Example three</option>
+			</kv-select>
+		</div>`,
+	methods: {
+		onChange(e) {
+			console.log(e);
+		},
+	},
+});
+
+export const WidthSet = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvSelect,
+	},
+	data: () => ({
+		exampleModel: 'example1',
+	}),
+	template: `
+		<div class="w-full">
+			<label
+				for="example-id"
+				class="tw-text-h4 tw-block"
+			>
+				Choose an example
+			</label>
+
+			<kv-select
+				id="example-id"
+				:disabled="disabled"
+				@change="onChange"
+				v-model="exampleModel"
+				class="tw-mt-2 tw-w-full"
+			>
+				<option value="example1">Example one</option>
+				<option value="example2">Example two</option>
+				<option value="example3">Example three</option>
+			</kv-select>
+		</div>`,
+	methods: {
+		onChange(e) {
+			console.log(e);
+		},
+	},
+});

package/dist/components/stories/KvSideSheet.stories.js

@@ -0,0 +1,50 @@
+import KvSideSheet from '../KvSideSheet.vue';
+import KvButton from '../KvButton.vue';
+
+export default {
+	title: 'KvSideSheet',
+	component: KvSideSheet,
+};
+
+const Template = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvSideSheet,
+		KvButton,
+	},
+	template: `
+		<div>
+			<kv-button @click="isVisible = true">Show Side Sheet</kv-button>
+			<kv-side-sheet
+				:visible="isVisible"
+				:kv-track-function="kvTrackMock"
+				track-event-category="new-loan-card"
+				:show-go-to-link="true"
+				@side-sheet-closed="isVisible = false"
+			>
+				<div>
+					Some content
+				</div>
+			</kv-side-sheet>
+		</div>`,
+	data() {
+		return {
+			isVisible: args.visible,
+		};
+	},
+	methods: {
+		kvTrackMock(
+			category,
+			action,
+			label,
+			property,
+			value,
+		) {
+			console.log(category, action, label, property, value);
+		},
+	},
+});
+
+export const Default = Template.bind({});

package/dist/components/stories/KvSwitch.stories.js

@@ -0,0 +1,66 @@
+import KvSwitch from '../KvSwitch.vue';
+
+export default {
+	title: 'Forms/KvSwitch',
+	component: KvSwitch,
+	args: {
+		checked: false,
+		disabled: false,
+	},
+};
+
+const Template = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvSwitch,
+	},
+	data: () => ({
+		switchExampleModel: false,
+	}),
+	template: `
+		<div>
+			<kv-switch
+				:disabled="disabled"
+				v-model="switchExampleModel"
+				@change="onChange"
+			>
+				Switch is switched: {{switchExampleModel}}
+			</kv-switch>
+		</div>`,
+	methods: {
+		onChange(e) {
+			console.log(e);
+		},
+	},
+});
+
+export const Default = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	disabled: true,
+};
+
+export const WithoutVModel = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvSwitch,
+	},
+	data: () => ({
+		switchExampleModel: false,
+	}),
+	template: `
+		<div>
+			<kv-switch
+				:modelValue="switchExampleModel"
+				@update:modelValue="(val) => switchExampleModel = val"
+				:disabled="disabled"
+			>
+				Switch is switched: {{switchExampleModel}}
+			</kv-switch>
+		</div>`,
+});

package/dist/components/stories/KvTabs.stories.js

@@ -0,0 +1,106 @@
+import KvTabs from '../KvTabs.vue';
+import KvTab from '../KvTab.vue';
+import KvTabPanel from '../KvTabPanel.vue';
+
+export default {
+	title: 'KvTabs',
+	component: KvTabs,
+	args: {
+		vertical: true,
+	},
+};
+
+export const DefaultTemplate = () => ({
+	components: { KvTabs, KvTab, KvTabPanel },
+	template: `
+		<kv-tabs @tab-changed="handleTabChanged">
+			<template #tabNav>
+				<kv-tab forPanel="demo-1-first">First</kv-tab>
+				<kv-tab forPanel="demo-1-second">Second</kv-tab>
+				<kv-tab forPanel="demo-1-third">Third</kv-tab>
+				<kv-tab forPanel="demo-1-forth">Forth is longer</kv-tab>
+			</template>
+			<template #tabPanels>
+				<kv-tab-panel id="demo-1-first"><p>First Panel</p></kv-tab-panel>
+				<kv-tab-panel id="demo-1-second"><p>Second Panel has <br>longer<br>content</p></kv-tab-panel>
+				<kv-tab-panel id="demo-1-third"><p>Third Panel</p></kv-tab-panel>
+				<kv-tab-panel id="demo-1-forth"><p>Forth Panel</p></kv-tab-panel>
+			</template>
+		</kv-tabs>
+	`,
+	methods: {
+		handleTabChanged(index) {
+			console.log(index);
+		},
+	},
+});
+
+export const InitialTabSelection = () => ({
+	components: { KvTabs, KvTab, KvTabPanel },
+	template: `
+		<kv-tabs @tab-changed="handleTabChanged">
+			<template #tabNav>
+				<kv-tab forPanel="demo-2-first">First tab name</kv-tab>
+				<kv-tab forPanel="demo-2-second" :selected="true">Second is initially selected</kv-tab>
+				<kv-tab forPanel="demo-2-third">Third tab name</kv-tab>
+				<kv-tab forPanel="demo-2-forth">Forth tab name is quite long</kv-tab>
+			</template>
+			<template #tabPanels>
+				<kv-tab-panel id="demo-2-first"><p>First Panel</p></kv-tab-panel>
+				<kv-tab-panel id="demo-2-second"><p>Second Panel has <br>longer<br>content</p></kv-tab-panel>
+				<kv-tab-panel id="demo-2-third"><p>Third Panel</p></kv-tab-panel>
+				<kv-tab-panel id="demo-2-forth"><p>Forth Panel</p></kv-tab-panel>
+			</template>
+		</kv-tabs>
+	`,
+	methods: {
+		handleTabChanged(index) {
+			console.log(index);
+		},
+	},
+});
+
+export const VerticalOrientation = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvTabs, KvTab, KvTabPanel },
+	template: `
+		<kv-tabs @tab-changed="handleTabChanged" :vertical="vertical">
+			<template #tabNav>
+				<kv-tab :vertical="vertical" forPanel="demo-1-first">First</kv-tab>
+				<kv-tab :vertical="vertical" forPanel="demo-1-second">Second</kv-tab>
+				<kv-tab :vertical="vertical" forPanel="demo-1-third">Third</kv-tab>
+				<kv-tab :vertical="vertical" forPanel="demo-1-forth">Forth is longer</kv-tab>
+			</template>
+			<template #tabPanels>
+				<kv-tab-panel id="demo-1-first"><p>First Panel</p></kv-tab-panel>
+				<kv-tab-panel id="demo-1-second"><p>Second Panel has <br>longer<br>content</p></kv-tab-panel>
+				<kv-tab-panel id="demo-1-third"><p>Third Panel</p></kv-tab-panel>
+				<kv-tab-panel id="demo-1-forth"><p>Forth Panel</p></kv-tab-panel>
+			</template>
+		</kv-tabs>
+	`,
+	methods: {
+		handleTabChanged(index) {
+			console.log(index);
+		},
+	},
+});
+
+export const MultipleOnAPage = () => ({
+	components: { KvTabs, KvTab, KvTabPanel },
+	template: `
+		<div>
+			<div class="tw-mb-8">
+				${DefaultTemplate().template}
+			</div>
+			<div class="tw-mb-8">
+				${InitialTabSelection().template}
+			</div>
+		</div>
+	`,
+	methods: {
+		handleTabChanged(index) {
+			console.log(index);
+		},
+	},
+});

package/dist/components/stories/KvTextInput.stories.js

@@ -0,0 +1,194 @@
+import { mdiMagnify } from '@mdi/js';
+import { nanoid } from 'nanoid';
+import KvTextInput from '../KvTextInput.vue';
+
+export default {
+	title: 'Forms/KvTextInput',
+	component: KvTextInput,
+};
+
+const DefaultTemplate = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvTextInput,
+	},
+	data: () => ({
+		textInputModel: '1640 Riverside Drive',
+		uuid: `kvt-${nanoid(10)}`,
+	}),
+	template: `
+		<div>
+			<label
+				:for="uuid"
+				class="tw-text-h4 tw-block tw-pb-1"
+			>
+				Street Address
+			</label>
+			<kv-text-input
+				:id="uuid"
+				:disabled="disabled"
+				:placeholder="placeholder"
+				:valid="valid"
+				:icon="icon"
+				:canClear="canClear"
+				v-model="textInputModel"
+				@input="onInput"
+				style="width: 25rem;"
+			/>
+		</div>`,
+	methods: {
+		onInput(e) {
+			console.log(e);
+		},
+	},
+});
+
+export const Default = DefaultTemplate.bind({});
+
+export const WithoutVModelTemplate = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvTextInput,
+	},
+	data: () => ({
+		textInputModel: '1640 Riverside Drive',
+	}),
+	template: `
+		<div>
+			<label
+				for="without-v-model-id"
+				class="tw-text-h4 tw-block tw-pb-1"
+			>
+				Street Address
+			</label>
+			<kv-text-input
+				id="without-v-model-id"
+				@input="(val) => textInputModel = val"
+				:modelValue="textInputModel"
+				style="width: 25rem;"
+			/>
+		</div>`,
+});
+
+export const Invalid = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvTextInput,
+	},
+	data: () => ({
+		textInputModel: '',
+	}),
+	template: `
+		<div>
+			<label
+				for="text-input-error-id"
+				class="tw-text-h4 tw-block tw-pb-1"
+			>
+				Street Address
+			</label>
+			<kv-text-input
+				id="text-input-error-id"
+				:valid="false"
+				style="width: 25rem;"
+			>
+				<template #error>Something went wrong. Learn more at this <a href="https://www.example.com">link</a></template>
+			</kv-text-input>
+		</div>`,
+	methods: {
+		onInput(e) {
+			console.log(e);
+		},
+	},
+});
+
+export const LabelHidden = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvTextInput,
+	},
+	template: `
+		<div>
+			<label
+				for="hidden-label-example"
+				class="tw-sr-only"
+			>
+				Street Address
+			</label>
+			<kv-text-input
+				id="hidden-label-example"
+				style="width: 25rem;"
+			/>
+		</div>`,
+});
+
+export const WidthSet = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvTextInput,
+	},
+	data: () => ({
+		textInputModel: '1640 Riverside Drive',
+	}),
+	template: `
+		<div class="w-full">
+			<label
+				for="width-set-id"
+				class="tw-text-h4 tw-block tw-pb-1"
+			>
+				Street Address
+			</label>
+			<kv-text-input
+				id="width-set-id"
+				v-model="textInputModel"
+				class="tw-w-full"
+			/>
+		</div>`,
+});
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = {
+	disabled: true,
+};
+
+export const Icon = DefaultTemplate.bind({});
+Icon.args = {
+	icon: mdiMagnify,
+};
+
+export const canClear = DefaultTemplate.bind({});
+canClear.args = {
+	canClear: true,
+};
+
+export const PlaceholderText = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvTextInput,
+	},
+	template: `
+		<div>
+			<label
+				for="placeholder-example"
+				class="tw-text-h4 tw-block tw-pb-1"
+			>
+				Telephone Number
+			</label>
+			<kv-text-input
+				id="placeholder-example"
+				placeholder="(555) 555-5555"
+				style="width: 25rem;"
+			/>
+		</div>`,
+});