@kiva/kv-components 4.8.5 → 5.0.0

package/vue/stories/KvRadio.stories.js

@@ -1,140 +0,0 @@
-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/vue/stories/KvSelect.stories.js

@@ -1,125 +0,0 @@
-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/vue/stories/KvSideSheet.stories.js

@@ -1,68 +0,0 @@
-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,
-	},
-	setup() {
-		return { args };
-	},
-	template: `
-		<div>
-			<kv-button @click="openModal($event)">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"
-				:animation-source-element="animationSourceElement"
-			>
-				<div>
-					Some content
-					<img src="https://www-kiva-org.freetls.fastly.net/img/w600h450/9673d0722a7675b9b8d11f90849d9b44.jpg" />
-				</div>
-			</kv-side-sheet>
-		</div>`,
-	data() {
-		return {
-			isVisible: args.visible,
-			expandEffect: args.expandEffect,
-			animationSourceElement: null,
-		};
-	},
-	methods: {
-		kvTrackMock(
-			category,
-			action,
-			label,
-			property,
-			value,
-		) {
-			console.log(category, action, label, property, value);
-		},
-		openModal(event) {
-			if (this.expandEffect) {
-				this.animationSourceElement = event.currentTarget;
-			}
-			this.isVisible = true;
-		},
-	},
-});
-
-export const Default = Template.bind({});
-
-export const ExpandEffect = Template.bind({});
-ExpandEffect.args = {
-	expandEffect: true,
-};

package/vue/stories/KvSwitch.stories.js

@@ -1,66 +0,0 @@
-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/vue/stories/KvTabs.stories.js

@@ -1,106 +0,0 @@
-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/vue/stories/KvTextInput.stories.js

@@ -1,194 +0,0 @@
-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>`,
-});