@bethinkpl/design-system 26.16.0 → 27.0.0

package/lib/js/components/Cards/Card/Card.vue

@@ -1,12 +1,16 @@
 <template>
 	<div
-		:class="{
-			'ds-card': true,
-			[borderColorClass]: true,
-			[borderSizeClass]: true,
-			'-ds-top-border': hasTopBoarder,
-			'-ds-left-border': hasLeftBoarder,
-		}"
+		:class="[
+			'ds-card',
+			borderColorClass,
+			borderSizeClass,
+			{
+				'-ds-top-border': hasTopBoarder,
+				'-ds-left-border': hasLeftBoarder,
+				'-ds-paddingLarge': paddingSize === CARD_PADDING_SIZES.LARGE,
+				'-ds-flat': isFlat,
+			},
+		]"
 	>
 		<ds-loading-bar
 			v-if="hasLoadingBar"
@@ -30,7 +34,13 @@
 		<div v-if="$slots.content" class="ds-card__content">
 			<slot name="content" />
 		</div>
-		<slot name="footer" />
+		<div
+			v-if="$slots.footer"
+			class="ds-card__footer"
+			:class="{ '-ds-withPadding': footerHasPadding }"
+		>
+			<slot name="footer" />
+		</div>
 	</div>
 </template>
 
@@ -44,12 +54,15 @@
 .ds-card {
 	$root: &;
 
-	background-color: $color-default-background;
-	border-radius: $radius-m;
-	box-shadow: $shadow-s;
 	position: relative;
 	width: inherit;
 
+	&:not(.-ds-flat) {
+		background-color: $color-default-background;
+		border-radius: $radius-m;
+		box-shadow: $shadow-s;
+	}
+
 	&.-ds-top-border {
 		border-top: $border-l transparent solid;
 	}
@@ -59,32 +72,50 @@
 	}
 
 	&.-ds-border-size-small {
-		border-radius: $radius-xs;
 		border-top-width: $border-s;
 
+		#{$root}:not(.-ds-flat) & {
+			border-radius: $radius-xs;
+		}
+
 		#{$root}__loadingBar {
-			border-radius: $radius-xs $radius-xs 0 0;
 			top: -$border-s;
+
+			#{$root}:not(.-ds-flat) & {
+				border-radius: $radius-xs $radius-xs 0 0;
+			}
 		}
 	}
 
 	&.-ds-border-size-medium {
-		border-radius: $radius-s;
 		border-top-width: $border-m;
 
+		#{$root}:not(.-ds-flat) & {
+			border-radius: $radius-s;
+		}
+
 		#{$root}__loadingBar {
-			border-radius: $radius-s $radius-s 0 0;
 			top: -$border-m;
+
+			#{$root}:not(.-ds-flat) & {
+				border-radius: $radius-s $radius-s 0 0;
+			}
 		}
 	}
 
 	&.-ds-border-size-large {
-		border-radius: $radius-m;
 		border-top-width: $border-l;
 
+		#{$root}:not(.-ds-flat) & {
+			border-radius: $radius-m;
+		}
+
 		#{$root}__loadingBar {
-			border-radius: $radius-m $radius-m 0 0;
 			top: -$border-l;
+
+			#{$root}:not(.-ds-flat) & {
+				border-radius: $radius-m $radius-m 0 0;
+			}
 		}
 	}
 
@@ -121,23 +152,45 @@
 	&__header {
 		&.-ds-withPadding {
 			padding: $space-s;
+
+			#{$root}.-ds-paddingLarge & {
+				padding: $space-l $space-l $space-s;
+			}
 		}
 	}
 
 	&__headerDivider {
 		&.-ds-withHorizontalMargin {
 			margin: 0 $space-s;
+
+			#{$root}.-ds-paddingLarge & {
+				margin: 0 $space-l;
+			}
 		}
 	}
 
 	&__content {
 		padding: $space-s;
+
+		#{$root}.-ds-paddingLarge & {
+			padding: $space-s $space-l;
+		}
+	}
+
+	&__footer {
+		&.-ds-withPadding {
+			padding: 0 $space-s $space-s;
+
+			#{$root}.-ds-paddingLarge & {
+				padding: 0 $space-l $space-l;
+			}
+		}
 	}
 }
 </style>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 
 import DsDivider from '../../Divider/Divider.vue';
 import DsLoadingBar, { LOADING_BAR_COLORS, LoadingBarColors } from '../../LoadingBar';
@@ -145,79 +198,66 @@ import {
 	CARD_BORDER_COLORS,
 	CARD_BORDER_POSITIONS,
 	CARD_BORDER_SIZES,
+	CARD_PADDING_SIZES,
 	CardBorderColors,
 	CardBorderPositions,
 	CardBorderSizes,
+	CardPaddingSize,
 } from './Card.consts';
 
-export default defineComponent({
-	name: 'Card',
-	components: { DsDivider, DsLoadingBar },
-	props: {
-		headerHasPadding: {
-			type: Boolean,
-			default: false,
-		},
-		dividerUnderHeader: {
-			type: Boolean,
-			default: false,
-		},
-		hasBorder: {
-			type: Boolean,
-			default: false,
-		},
-		borderPosition: {
-			type: String as PropType<CardBorderPositions>,
-			default: CARD_BORDER_POSITIONS.TOP,
-		},
-		borderSize: {
-			type: String as PropType<CardBorderSizes>,
-			default: CARD_BORDER_SIZES.LARGE,
-		},
-		borderColor: {
-			type: String as PropType<CardBorderColors>,
-			default: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
-		},
-		hasLoadingBar: {
-			type: Boolean,
-			default: false,
-		},
-		loadingBarColor: {
-			type: String as PropType<LoadingBarColors>,
-			default: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
-		},
-		loadingBarTime: {
-			type: String,
-			default: '0',
-		},
-	},
-
-	computed: {
-		hasLeftBoarder() {
-			return (
-				this.hasBorder &&
-				this.borderPosition === CARD_BORDER_POSITIONS.LEFT &&
-				!this.hasLoadingBar
-			);
-		},
-		hasTopBoarder() {
-			return (
-				(this.hasBorder && this.borderPosition === CARD_BORDER_POSITIONS.TOP) ||
-				this.hasLoadingBar
-			);
-		},
-		borderColorClass() {
-			if (this.hasLoadingBar) {
-				return '-ds-border-color-transparent';
-			}
-			return `-ds-border-color-${this.borderColor}`;
-		},
-		borderSizeClass() {
-			if (!this.hasBorder && !this.hasLoadingBar) {
-				return '';
-			}
-			return `-ds-border-size-${this.borderSize}`;
-		},
-	},
+const {
+	headerHasPadding = false,
+	footerHasPadding = false,
+	paddingSize = CARD_PADDING_SIZES.SMALL,
+	dividerUnderHeader = false,
+	hasBorder = false,
+	borderPosition = CARD_BORDER_POSITIONS.TOP,
+	borderSize = CARD_BORDER_SIZES.LARGE,
+	borderColor = CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+	hasLoadingBar = false,
+	loadingBarColor = LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+	loadingBarTime = '0',
+	isFlat = false,
+} = defineProps<{
+	headerHasPadding?: boolean;
+	footerHasPadding?: boolean;
+	paddingSize?: CardPaddingSize;
+	dividerUnderHeader?: boolean;
+	hasBorder?: boolean;
+	borderPosition?: CardBorderPositions;
+	borderSize?: CardBorderSizes;
+	borderColor?: CardBorderColors;
+	hasLoadingBar?: boolean;
+	loadingBarColor?: LoadingBarColors;
+	loadingBarTime?: string;
+	isFlat?: boolean;
+}>();
+
+defineSlots<{
+	header?: () => any;
+	content?: () => any;
+	footer?: () => any;
+}>();
+
+const hasLeftBoarder = computed(() => {
+	return hasBorder && borderPosition === CARD_BORDER_POSITIONS.LEFT && !hasLoadingBar;
+});
+
+const hasTopBoarder = computed(() => {
+	return (hasBorder && borderPosition === CARD_BORDER_POSITIONS.TOP) || hasLoadingBar;
+});
+
+const borderColorClass = computed(() => {
+	if (hasLoadingBar) {
+		return '-ds-border-color-transparent';
+	}
+	return `-ds-border-color-${borderColor}`;
+});
+
+const borderSizeClass = computed(() => {
+	if (!hasBorder && !hasLoadingBar) {
+		return null;
+	}
+	return `-ds-border-size-${borderSize}`;
 });
 </script>

package/lib/js/components/Cards/Card/index.ts

@@ -1,3 +1,4 @@
 import Card from './Card.vue';
 
+export * from './Card.consts';
 export default Card;

package/lib/js/components/Form/InputField/InputField.spec.ts

@@ -2,9 +2,11 @@ import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import InputField from './InputField.vue';
 import Icon, { ICONS } from '../../Icons/Icon';
-import { h } from 'vue';
+import { ComputedRef, h, Ref } from 'vue';
 import { FORM_FIELD_STATES } from '../FormField';
 import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
+import { FormMeta, useForm } from 'vee-validate';
+import { waitForExpectShort } from '../../../tests/helpers';
 
 const fieldId = 'form-field-v-0';
 const messageId = `${fieldId}-message`;
@@ -132,4 +134,141 @@ describe('InputField', () => {
 		const input = wrapper.find('input');
 		expect(input.attributes('disabled')).toBeDefined();
 	});
+
+	describe('with vee-validate', () => {
+		const fieldName = 'siema';
+		const initialValue = 'siemanko!';
+		function setupWithForm(props?: ComponentProps<typeof InputField>) {
+			let controlledValuesRef: Ref<{ siema: string }> | undefined;
+			let errorsRef: ComputedRef<Partial<Record<'siema', string | undefined>>> | undefined;
+			let metaRef: Ref<FormMeta<{ siema: string }>> | undefined;
+
+			const FormComponent = {
+				template: `
+				<form>
+					<InputField
+						v-bind="props"
+						:name="name"
+					/>
+				</form>
+			`,
+				components: { InputField },
+				setup() {
+					const { controlledValues, errors, meta } = useForm({
+						initialValues: {
+							[fieldName]: initialValue,
+						},
+						validationSchema: {
+							siema: (val: string) => (val.length < 5 ? 'Too short' : true),
+						},
+					});
+
+					controlledValuesRef = controlledValues;
+					errorsRef = errors;
+					metaRef = meta;
+
+					return {
+						name: fieldName,
+						props,
+					};
+				},
+			};
+
+			return {
+				wrapper: mount(FormComponent),
+				controlledValuesRef,
+				errorsRef,
+				metaRef,
+			};
+		}
+
+		it('should bind input value with vee-validate form values', async () => {
+			const { wrapper, controlledValuesRef } = setupWithForm();
+
+			const input = wrapper.find('input');
+
+			expect(input.element.value).toBe(initialValue);
+			expect(controlledValuesRef?.value[fieldName]).toBe(initialValue);
+
+			const newValue = 'no cześć!';
+			await input.setValue(newValue);
+
+			expect(input.element.value).toBe(newValue);
+			expect(controlledValuesRef?.value[fieldName]).toBe(newValue);
+		});
+
+		it('should call onBlur and mark form as touched on blur', async () => {
+			const onBlur = vi.fn();
+			const { wrapper, metaRef } = setupWithForm({
+				inputProps: {
+					onBlur,
+				},
+			});
+			expect(metaRef?.value.touched).toBe(false);
+
+			const input = wrapper.find('input');
+			await input.trigger('blur');
+
+			expect(onBlur).toHaveBeenCalled();
+			expect(metaRef?.value.touched).toBe(true);
+		});
+
+		it('should call onInput and show error message', async () => {
+			const onInput = vi.fn();
+			const { wrapper, errorsRef } = setupWithForm({
+				inputProps: {
+					onInput,
+				},
+			});
+
+			const input = wrapper.find('input');
+			await input.setValue('test');
+
+			expect(onInput).toHaveBeenCalled();
+
+			await input.trigger('blur');
+
+			await waitForExpectShort(() => {
+				expect(errorsRef?.value?.siema).toBeDefined();
+			});
+
+			expect(wrapper.find('.ds-inputField').classes()).toContain('-ds-error');
+			expect(wrapper.find(`#${messageId}`).text()).toBe('Too short');
+
+			await input.setValue('valid value');
+
+			await waitForExpectShort(() => {
+				expect(errorsRef?.value?.siema).toBeUndefined();
+			});
+		});
+
+		it('should throw an error if used outside of a form context', () => {
+			expect(() => {
+				setup({
+					props: {
+						name: 'siema',
+					},
+				});
+			}).toThrowError();
+		});
+
+		it('overrides state and message on vee-validate form error', async () => {
+			const { wrapper, errorsRef } = setupWithForm({
+				state: FORM_FIELD_STATES.SUCCESS,
+				messageText: 'Success message',
+			});
+
+			const input = wrapper.find('input');
+			await input.setValue('test');
+
+			await input.trigger('blur');
+
+			await waitForExpectShort(() => {
+				expect(errorsRef?.value?.siema).toBeDefined();
+			});
+
+			expect(wrapper.find(`#${messageId}`).classes()).toContain('-ds-success');
+			expect(wrapper.find(`#${messageId}`).text()).toBe('Success message');
+		});
+	});
 });

package/lib/js/components/Form/InputField/InputField.types.ts

@@ -6,6 +6,7 @@ export interface InputFieldProps extends FormFieldProps {
 	inputProps?: InputHTMLAttributes;
 	leftIcon?: IconItem | null;
 	suffixText?: string;
+	name?: string;
 }
 
 export interface InputFieldSlots extends Omit<FormFieldSlots, 'field'> {

package/lib/js/components/Form/InputField/InputField.vue

@@ -98,7 +98,7 @@
 	}
 
 	&__input {
-		@include formLabel-m-default-regular;
+		@include formText-s-default-regular;
 
 		background: transparent;
 		// hacky solution to override default browser styles for autofill
@@ -121,7 +121,7 @@
 	}
 
 	&__suffixText {
-		@include formLabel-m-default-regular;
+		@include formText-s-default-regular;
 
 		color: $color-neutral-text;
 	}
@@ -130,22 +130,46 @@
 
 <script lang="ts" setup>
 import { computed, InputHTMLAttributes } from 'vue';
-import FormField, { FORM_FIELD_STATES } from '../FormField';
+import FormField, { FORM_FIELD_STATES, FormFieldProps } from '../FormField';
 import Icon, { ICON_SIZES } from '../../Icons/Icon';
 import { extractFormFieldProps } from '../FormField/FormField.utils';
 import { InputFieldProps, InputFieldSlots } from './InputField.types';
+import { useInputFieldWithinForm } from './useInputFieldWithinForm';
 
-const { inputProps, leftIcon, suffixText, ...rest } = defineProps<InputFieldProps>();
+const { inputProps, leftIcon, suffixText, name, ...rest } = defineProps<InputFieldProps>();
 defineSlots<InputFieldSlots>();
-const value = defineModel<string>();
+const modelValue = defineModel<string>();
 
-// this is needed to avoid passing modelValue to FormField as prop
-const formFieldProps = computed(() => extractFormFieldProps(rest));
+const {
+	value,
+	errors,
+	onInput: onFormFieldInput,
+	onBlur: onFormFieldBlur,
+} = useInputFieldWithinForm(() => name, modelValue);
+
+const formFieldProps = computed<FormFieldProps>(() => {
+	// this is needed to avoid passing modelValue to FormField as prop
+	const extractedProps = extractFormFieldProps(rest);
+
+	return {
+		...extractedProps,
+		messageText: extractedProps.messageText ?? errors.value[0],
+		state: extractedProps.state ?? (errors.value[0] ? FORM_FIELD_STATES.ERROR : undefined),
+	};
+});
 
 const finalInputProps = computed<InputHTMLAttributes>(() => {
 	return {
 		disabled: formFieldProps.value.state === FORM_FIELD_STATES.DISABLED,
 		...inputProps,
+		onInput: (event: Event) => {
+			onFormFieldInput();
+			inputProps?.onInput?.(event);
+		},
+		onBlur: (event: FocusEvent) => {
+			onFormFieldBlur(event);
+			inputProps?.onBlur?.(event);
+		},
 	};
 });
 </script>

package/lib/js/components/Form/InputField/useInputFieldWithinForm.ts

@@ -0,0 +1,54 @@
+import { computed, inject, MaybeRefOrGetter, ref, Ref, toValue } from 'vue';
+import { FormContextKey, useField } from 'vee-validate';
+
+export function useInputFieldWithinForm(
+	name: MaybeRefOrGetter<string | undefined>,
+	modelValue: Ref<string | undefined>,
+) {
+	const form = inject(FormContextKey, null);
+	const nameValue = toValue(name);
+
+	// this computed property was created only for type safety so we can use it with `useField`
+	const nameString = computed(() => {
+		const value = toValue(name);
+
+		if (value === undefined) {
+			throw new Error('fieldName is required');
+		}
+
+		return value;
+	});
+
+	if (nameValue && !form) {
+		throw new Error(
+			`InputField with name "${nameValue}" must be used within a component that provides a FormContext, e.g. by using useForm()`,
+		);
+	}
+
+	const field = nameValue
+		? useField(nameString, undefined, {
+				validateOnValueUpdate: false,
+		  })
+		: null;
+
+	const value = field ? field.value : modelValue;
+	const blurred = ref(false);
+
+	const onBlur = (event: Event) => {
+		field?.handleBlur(event, true);
+		blurred.value = true;
+	};
+
+	const onInput = () => {
+		if (blurred.value) {
+			field?.validate();
+		}
+	};
+
+	return {
+		onBlur,
+		onInput,
+		value,
+		errors: field?.errors ?? ref<Array<string>>([]),
+	};
+}

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.consts.ts

@@ -1,9 +1,14 @@
+import { Value } from '../../../utils/type.utils';
+
 export const FEATURE_ICON_SIZES = {
+	X_SMALL: 'xSmall',
 	SMALL: 'small',
 	MEDIUM: 'medium',
 	LARGE: 'large',
 	X_LARGE: 'xLarge',
-};
+} as const;
+
+export type FeatureIconSize = Value<typeof FEATURE_ICON_SIZES>;
 
 export const FEATURE_ICON_COLOR = {
 	DANGER: 'danger',
@@ -13,4 +18,7 @@ export const FEATURE_ICON_COLOR = {
 	PRIMARY: 'primary',
 	SUCCESS: 'success',
 	WARNING: 'warning',
-};
+	FAIL: 'fail',
+} as const;
+
+export type FeatureIconColor = Value<typeof FEATURE_ICON_COLOR>;

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.spec.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FeatureIcon from './FeatureIcon.vue';
+import { FEATURE_ICON_COLOR } from './FeatureIcon.consts';
+import Icon, { ICONS } from '../Icon';
+
+describe('FeatureIcon', () => {
+	it('should render', () => {
+		const wrapper = mount(FeatureIcon, {
+			props: {
+				color: FEATURE_ICON_COLOR.PRIMARY,
+				icon: ICONS.FA_TAG,
+			},
+		});
+
+		expect(wrapper.findComponent<typeof Icon>('.ds-icon').props().icon).toEqual(ICONS.FA_TAG);
+	});
+});

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.stories.ts

@@ -56,6 +56,6 @@ Interactive.args = args;
 Interactive.parameters = {
 	design: {
 		type: 'figma',
-		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1552%3A34963',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=5604-96259',
 	},
 };