@bethinkpl/design-system 26.15.1 → 27.0.0

package/lib/js/components/Form/PasswordField/PasswordField.stories.ts

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import PasswordField from './PasswordField.vue';
+import HelpButton from '../../Buttons/HelpButton/HelpButton.vue';
+import Modal from '../../Modals/Modal';
+import { ICONS } from '../../Icons/Icon';
+import { args, argTypes } from '../FormField/FormField.stories.shared';
+import { FORM_FIELD_STATES } from '../FormField/FormField.consts';
+import { reactive, toRefs } from 'vue';
+
+const meta: Meta<typeof PasswordField> = {
+	title: 'Components/Form/PasswordField',
+	component: PasswordField,
+	render: (args) => ({
+		components: { PasswordField, HelpButton, Modal },
+		setup() {
+			const { help, labelAside, message, fieldStatus, ...restRefs } = toRefs(args);
+			const props = reactive({ ...restRefs });
+
+			return {
+				props,
+				labelAside,
+				fieldStatus,
+				message,
+				help,
+				FORM_FIELD_STATES,
+				ICONS,
+			};
+		},
+		data: () => ({
+			value: '',
+		}),
+		template: `<PasswordField v-bind="props" v-model="value">
+			<template v-if="help" #help>
+				<HelpButton :is-disabled="props.state === FORM_FIELD_STATES.DISABLED">
+					<template #modal="{onClose}">
+						<Modal @close-modal="onClose">Modal</Modal>
+					</template>
+				</HelpButton>
+			</template>
+			<template #labelAside v-if="labelAside">
+				<div v-html="labelAside" />
+			</template>
+			<template #fieldStatus v-if="fieldStatus">
+				<div v-html="fieldStatus" />
+			</template>
+			<template #message v-if="message">
+				<div v-if="message" v-html="message" />
+			</template>
+			<template #action v-if="action">
+				<div v-html="action" />
+			</template>
+		</PasswordField>`,
+	}),
+	argTypes: {
+		...argTypes,
+		suffixText: {
+			control: 'text',
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof PasswordField>;
+
+export const Interactive: Story = {
+	args: {
+		...args,
+		suffixText: '%',
+		inputProps: {
+			placeholder: 'Placeholder',
+		},
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=13576-21478&m=dev',
+		},
+	},
+};
+
+export const Error: Story = {
+	...Interactive,
+	args: {
+		...Interactive.args,
+		state: FORM_FIELD_STATES.ERROR,
+		messageText: 'Error message text',
+	},
+};

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

@@ -0,0 +1,55 @@
+<template>
+	<input-field
+		v-bind="$props"
+		v-model="value"
+		:input-props="inputProps"
+		:left-icon="ICONS.FA_UNLOCK_KEYHOLE"
+	>
+		<template #action>
+			<icon-button
+				:icon="eyeIcon"
+				:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
+				:size="ICON_BUTTON_SIZES.X_SMALL"
+				:touchable="false"
+				data-test-id="password-toggle"
+				@click="isPasswordVisible = !isPasswordVisible"
+			/>
+		</template>
+		<!-- begin: FormField slots -->
+		<template v-if="$slots.help" #help>
+			<slot name="help" />
+		</template>
+		<template v-if="$slots.labelAside" #labelAside>
+			<slot name="labelAside" />
+		</template>
+		<template v-if="$slots.message" #message="{ messageId }">
+			<slot name="message" :message-id="messageId" />
+		</template>
+		<template v-if="$slots.fieldStatus" #fieldStatus>
+			<slot name="fieldStatus" />
+		</template>
+		<!-- end: FormField slots -->
+	</input-field>
+</template>
+
+<script setup lang="ts">
+import InputField from '../InputField';
+import IconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
+import { ICONS } from '../../Icons/Icon';
+import { computed, ref, InputHTMLAttributes } from 'vue';
+import { InputFieldProps, InputFieldSlots } from '../InputField/InputField.types';
+
+const { inputProps: baseInputProps } = defineProps<Omit<InputFieldProps, 'leftIcon'>>();
+const value = defineModel<string>();
+defineSlots<Omit<InputFieldSlots, 'action'>>();
+
+const isPasswordVisible = ref(false);
+const inputProps = computed<InputHTMLAttributes>(() => ({
+	...baseInputProps,
+	type: isPasswordVisible.value ? 'text' : 'password',
+}));
+
+const eyeIcon = computed(() => {
+	return isPasswordVisible.value ? ICONS.FA_EYE_SLASH : ICONS.FA_EYE;
+});
+</script>

package/lib/js/components/Form/PasswordField/index.ts

@@ -0,0 +1,3 @@
+import PasswordField from './PasswordField.vue';
+
+export default PasswordField;

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',
 	},
 };

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue

@@ -4,12 +4,14 @@
 		:class="{
 			'-ds-doubleBackground': doubleBackground,
 			'-ds-danger': color === FEATURE_ICON_COLOR.DANGER,
+			'-ds-fail': color === FEATURE_ICON_COLOR.FAIL,
 			'-ds-info': color === FEATURE_ICON_COLOR.INFO,
 			'-ds-neutral': color === FEATURE_ICON_COLOR.NEUTRAL,
 			'-ds-neutralWeak': color === FEATURE_ICON_COLOR.NEUTRAL_WEAK,
 			'-ds-primary': color === FEATURE_ICON_COLOR.PRIMARY,
 			'-ds-success': color === FEATURE_ICON_COLOR.SUCCESS,
 			'-ds-warning': color === FEATURE_ICON_COLOR.WARNING,
+			'-ds-xSmall': size === FEATURE_ICON_SIZES.X_SMALL,
 			'-ds-small': size === FEATURE_ICON_SIZES.SMALL,
 			'-ds-medium': size === FEATURE_ICON_SIZES.MEDIUM,
 			'-ds-large': size === FEATURE_ICON_SIZES.LARGE,
@@ -51,6 +53,11 @@ $feature-icon-colors: (
 		'border': $color-danger-background,
 		'icon': $color-danger-icon,
 	),
+	'fail': (
+		'background': $color-fail-background-medium,
+		'border': $color-fail-background,
+		'icon': $color-fail-icon,
+	),
 	'warning': (
 		'background': $color-warning-background-medium,
 		'border': $color-warning-background,
@@ -100,6 +107,11 @@ $feature-icon-padding-large: 10px;
 	display: inline-flex;
 	padding: $space-3xs;
 
+	&.-ds-xSmall {
+		border-width: $space-5xs;
+		padding: $space-5xs;
+	}
+
 	&.-ds-small {
 		border-width: $space-4xs;
 		padding: $space-4xs;
@@ -117,63 +129,37 @@ $feature-icon-padding-large: 10px;
 }
 </style>
 
-<script lang="ts">
-import WnlIcon, { ICON_SIZES, ICONS } from '../Icon';
-import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from './FeatureIcon.consts';
-import { defineComponent, toRaw } from 'vue';
-
-export default defineComponent({
-	name: 'FeatureIcon',
-	components: {
-		WnlIcon,
-	},
-	props: {
-		icon: {
-			type: Object,
-			default: null,
-			validator(icon) {
-				return Object.values(ICONS).includes(toRaw(icon));
-			},
-		},
-		size: {
-			type: String,
-			default: FEATURE_ICON_SIZES.MEDIUM,
-			validator: (value: string) => Object.values(FEATURE_ICON_SIZES).includes(value),
-		},
-		color: {
-			type: String,
-			required: true,
-			validator(color: string) {
-				return Object.values(FEATURE_ICON_COLOR).includes(color);
-			},
-		},
-		doubleBackground: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			FEATURE_ICON_COLOR: Object.freeze(FEATURE_ICON_COLOR),
-			FEATURE_ICON_SIZES: Object.freeze(FEATURE_ICON_SIZES),
-		};
-	},
-	computed: {
-		iconSize(): string {
-			if (this.size === FEATURE_ICON_SIZES.SMALL) {
-				return ICON_SIZES.X_SMALL;
-			}
-
-			if (this.size === FEATURE_ICON_SIZES.LARGE) {
-				return ICON_SIZES.LARGE;
-			}
-
-			if (this.size === FEATURE_ICON_SIZES.X_LARGE) {
-				return ICON_SIZES.X_LARGE;
-			}
-
-			return ICON_SIZES.MEDIUM;
-		},
-	},
+<script lang="ts" setup>
+import WnlIcon, { ICON_SIZES, IconItem, IconSize } from '../Icon';
+import {
+	FEATURE_ICON_COLOR,
+	FEATURE_ICON_SIZES,
+	FeatureIconColor,
+	FeatureIconSize,
+} from './FeatureIcon.consts';
+import { computed } from 'vue';
+
+const {
+	icon,
+	size = FEATURE_ICON_SIZES.MEDIUM,
+	color,
+	doubleBackground = false,
+} = defineProps<{
+	icon: IconItem;
+	size?: FeatureIconSize;
+	color: FeatureIconColor;
+	doubleBackground?: boolean;
+}>();
+
+const iconSizeMap: Record<FeatureIconSize, IconSize> = {
+	[FEATURE_ICON_SIZES.X_SMALL]: ICON_SIZES.XX_SMALL,
+	[FEATURE_ICON_SIZES.SMALL]: ICON_SIZES.X_SMALL,
+	[FEATURE_ICON_SIZES.MEDIUM]: ICON_SIZES.MEDIUM,
+	[FEATURE_ICON_SIZES.LARGE]: ICON_SIZES.LARGE,
+	[FEATURE_ICON_SIZES.X_LARGE]: ICON_SIZES.X_LARGE,
+};
+
+const iconSize = computed(() => {
+	return iconSizeMap[size];
 });
 </script>

package/lib/js/components/Modals/Modal/Modal.consts.ts

@@ -1,9 +1,15 @@
+import { Value } from '../../../utils/type.utils';
+
 export const MODAL_SIZES = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
-};
+} as const;
+
+export type ModalSize = Value<typeof MODAL_SIZES>;
 
 export const MODAL_HEADER_TITLE_SIZES = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
-};
+} as const;
+
+export type ModalHeaderTitleSize = Value<typeof MODAL_HEADER_TITLE_SIZES>;

package/lib/js/components/Modals/Modal/Modal.vue

@@ -10,6 +10,7 @@
 						:size="ICON_SIZES.SMALL"
 						:elevation="BUTTON_ELEVATIONS.X_SMALL"
 						:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
+						data-test-selector="ds-modal__closeButton"
 						@click.stop="$emit('close-modal')"
 					/>
 				</div>
@@ -329,9 +330,14 @@ $image-height-small: 140px;
 
 <script lang="ts">
 import FeatureIcon from '../../Icons/FeatureIcon/FeatureIcon.vue';
-import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from './Modal.consts';
+import {
+	MODAL_HEADER_TITLE_SIZES,
+	MODAL_SIZES,
+	ModalHeaderTitleSize,
+	ModalSize,
+} from './Modal.consts';
 import { ICON_SIZES, ICONS } from '../../Icons/Icon';
-import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from '../../Icons/FeatureIcon';
+import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES, FeatureIconColor } from '../../Icons/FeatureIcon';
 import WnlButton, {
 	BUTTON_COLORS,
 	BUTTON_ELEVATIONS,
@@ -349,7 +355,7 @@ export default defineComponent({
 		size: {
 			type: String,
 			default: MODAL_SIZES.MEDIUM,
-			validator: (value: string) => Object.values(MODAL_SIZES).includes(value),
+			validator: (value: ModalSize) => Object.values(MODAL_SIZES).includes(value),
 		},
 		danger: {
 			type: Boolean,
@@ -358,7 +364,8 @@ export default defineComponent({
 		headerTitleSize: {
 			type: String,
 			default: MODAL_HEADER_TITLE_SIZES.MEDIUM,
-			validator: (value: string) => Object.values(MODAL_HEADER_TITLE_SIZES).includes(value),
+			validator: (value: ModalHeaderTitleSize) =>
+				Object.values(MODAL_HEADER_TITLE_SIZES).includes(value),
 		},
 		headerTitle: {
 			type: String,
@@ -378,7 +385,7 @@ export default defineComponent({
 		headerFeatureIconColor: {
 			type: String,
 			default: FEATURE_ICON_COLOR.NEUTRAL,
-			validator(color: string) {
+			validator(color: FeatureIconColor) {
 				return Object.values(FEATURE_ICON_COLOR).includes(color);
 			},
 		},

package/lib/js/components/Modals/ModalDialog/ModalDialog.vue

@@ -31,7 +31,7 @@
 import DsModal from '../Modal/Modal.vue';
 import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from '../Modal';
 import { ICONS } from '../../Icons/Icon';
-import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
+import { FEATURE_ICON_COLOR, FeatureIconColor } from '../../Icons/FeatureIcon';
 import { defineComponent, toRaw } from 'vue';
 import { BUTTON_STATES, ButtonState } from '../../Buttons/Button';
 
@@ -61,7 +61,7 @@ export default defineComponent({
 		headerFeatureIconColor: {
 			type: String,
 			default: FEATURE_ICON_COLOR.NEUTRAL,
-			validator(color: string) {
+			validator(color: FeatureIconColor) {
 				return Object.values(FEATURE_ICON_COLOR).includes(color);
 			},
 		},

package/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.stories.ts

@@ -47,7 +47,6 @@ const StoryTemplate: StoryFn<typeof SelectListItemToggle> = (args) => {
 					() =>
 						updateArgs({
 							isLoading: false,
-							// @ts-ignore
 							isOn: !this.isOn,
 						}),
 					1000,

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue

@@ -34,36 +34,33 @@
 							'-ds-oneContainer': containers === SURVEY_QUESTION_CONTAINERS.ONE,
 						}"
 					>
-						<template
+						<div
 							v-for="(option, index) in scaleOptions"
 							:key="`ds-surveyQuestionScale-${index}`"
+							class="ds-surveyQuestionScale__toggle"
+							:class="{
+								'-ds-hideOnDesktop':
+									option.standalone &&
+									containers === SURVEY_QUESTION_CONTAINERS.TWO,
+							}"
 						>
-							<div
-								class="ds-surveyQuestionScale__toggle"
-								:class="{
-									'-ds-hideOnDesktop':
-										option.standalone &&
-										containers === SURVEY_QUESTION_CONTAINERS.TWO,
-								}"
-							>
-								<survey-toggle
-									:meaning="option.meaning"
-									:content-text="option.content"
-									:label="option.label"
-									:status="
-										selectedValue === option.value
-											? SURVEY_TOGGLE_STATUSES.SELECTED
-											: SURVEY_TOGGLE_STATUSES.DEFAULT
-									"
-									:state="
-										state === SURVEY_QUESTION_STATES.DISABLED
-											? SURVEY_TOGGLE_STATES.DISABLED
-											: SURVEY_TOGGLE_STATES.DEFAULT
-									"
-									@click="onToggleClick(option.value)"
-								/>
-							</div>
-						</template>
+							<survey-toggle
+								:meaning="option.meaning"
+								:content-text="option.content"
+								:label="option.label"
+								:status="
+									selectedValue === option.value
+										? SURVEY_TOGGLE_STATUSES.SELECTED
+										: SURVEY_TOGGLE_STATUSES.DEFAULT
+								"
+								:state="
+									state === SURVEY_QUESTION_STATES.DISABLED
+										? SURVEY_TOGGLE_STATES.DISABLED
+										: SURVEY_TOGGLE_STATES.DEFAULT
+								"
+								@click="onToggleClick(option.value)"
+							/>
+						</div>
 					</div>
 
 					<div
@@ -73,29 +70,28 @@
 						"
 						class="ds-surveyQuestionScale__container -ds-justifyEnd -ds-hideOnMobile"
 					>
-						<template
+						<div
 							v-for="(option, index) in standaloneOptions"
 							:key="`ds-surveyQuestionScale-standalone-${index}`"
+							class="ds-surveyQuestionScale__toggle"
 						>
-							<div class="ds-surveyQuestionScale__toggle">
-								<survey-toggle
-									:meaning="option.meaning"
-									:content-text="option.content"
-									:label="option.label"
-									:status="
-										selectedValue === option.value
-											? SURVEY_TOGGLE_STATUSES.SELECTED
-											: SURVEY_TOGGLE_STATUSES.DEFAULT
-									"
-									:state="
-										state === SURVEY_QUESTION_STATES.DISABLED
-											? SURVEY_TOGGLE_STATES.DISABLED
-											: SURVEY_TOGGLE_STATES.DEFAULT
-									"
-									@click="onToggleClick(option.value)"
-								/>
-							</div>
-						</template>
+							<survey-toggle
+								:meaning="option.meaning"
+								:content-text="option.content"
+								:label="option.label"
+								:status="
+									selectedValue === option.value
+										? SURVEY_TOGGLE_STATUSES.SELECTED
+										: SURVEY_TOGGLE_STATUSES.DEFAULT
+								"
+								:state="
+									state === SURVEY_QUESTION_STATES.DISABLED
+										? SURVEY_TOGGLE_STATES.DISABLED
+										: SURVEY_TOGGLE_STATES.DEFAULT
+								"
+								@click="onToggleClick(option.value)"
+							/>
+						</div>
 					</div>
 				</div>
 

package/lib/js/components/TabItem/TabItem.spec.ts

@@ -7,7 +7,6 @@ import { TAB_ITEM_SIZES } from './TabItem.consts';
 
 describe('TabItem', () => {
 	const createComponent = ({ isSelected = false } = {}) => {
-		//@ts-ignore
 		return shallowMount(TabItem, {
 			props: {
 				icon: ICONS.FA_CALENDAR_DAYS,

package/lib/js/components/Toast/Toast.vue

@@ -101,8 +101,6 @@ import {
 import { defineComponent, PropType, toRaw } from 'vue';
 import { ICONS } from '../Icons/Icon';
 
-const TOAST_OFFSET = 24;
-
 function calculateBoundariesOffset(boundariesElement: HTMLElement) {
 	const borderLeftWidth = window.getComputedStyle(boundariesElement).borderLeftWidth;
 	const borderRightWidth = window.getComputedStyle(boundariesElement).borderRightWidth;

package/lib/js/icons/fontawesome.ts

@@ -69,6 +69,7 @@ import { faDna as fasDna } from '@fortawesome/pro-solid-svg-icons/faDna';
 import { faEarthAmericas } from '@fortawesome/pro-regular-svg-icons/faEarthAmericas';
 import { faEllipsis } from '@fortawesome/pro-regular-svg-icons/faEllipsis';
 import { faEllipsisVertical } from '@fortawesome/pro-regular-svg-icons/faEllipsisVertical';
+import { faEnvelope } from '@fortawesome/pro-regular-svg-icons/faEnvelope';
 import { faEye } from '@fortawesome/pro-regular-svg-icons/faEye';
 import { faEyeSlash } from '@fortawesome/pro-regular-svg-icons/faEyeSlash';
 import { faFaceFrown } from '@fortawesome/pro-regular-svg-icons/faFaceFrown';
@@ -310,6 +311,7 @@ export const FONTAWESOME_ICONS = {
 	FA_EARTH_AMERICAS: faEarthAmericas,
 	FA_ELLIPSIS: faEllipsis,
 	FA_ELLIPSIS_VERTICAL: faEllipsisVertical,
+	FA_ENVELOPE: faEnvelope,
 	FA_EXCLAMATION_SOLID: fasExclamation,
 	FA_EYE: faEye,
 	FA_EYE_SLASH: faEyeSlash,

package/lib/js/index.ts

@@ -15,7 +15,8 @@ export { default as ToggleButton } from './components/Toggles/ToggleButton';
 export { default as DsToggleButton } from './components/Toggles/ToggleButton';
 export * from './components/Toggles/ToggleButton/ToggleButton.consts';
 export { default as Card } from './components/Cards/Card/';
-export { default as DsCard } from './components/Cards/Card/';
+export * from './components/Cards/Card';
+export { default as DsCard } from './components/Cards/Card';
 export { default as CardExpandable } from './components/Cards/CardExpandable/';
 export { default as DsCardExpandable } from './components/Cards/CardExpandable/';
 export { default as DsDateBox } from './components/DatePickers/DateBox';
@@ -29,12 +30,18 @@ export * from './components/Divider/Divider.consts';
 export { default as FeatureIcon } from './components/Icons/FeatureIcon';
 export { default as DsFeatureIcon } from './components/Icons/FeatureIcon';
 export * from './components/Icons/FeatureIcon/FeatureIcon.consts';
+export { default as DsFormField } from './components/Form/FormField';
+export * from './components/Form/FormField';
+export { default as DsFormFieldMessage } from './components/Form/FormField/FormFieldMessage';
+export * from './components/Form/FormField/FormFieldMessage';
+export { default as DsHelpButton } from './components/Buttons/HelpButton';
 export { default as Icon } from './components/Icons/Icon';
 export { default as DsIcon } from './components/Icons/Icon';
 export * from './components/Icons/Icon/Icon.consts';
 export { default as IconButton } from './components/Buttons/IconButton';
 export { default as DsIconButton } from './components/Buttons/IconButton';
 export * from './components/Buttons/IconButton/IconButton.consts';
+export { default as DsInputField } from './components/Form/InputField';
 export { default as Modal } from './components/Modal';
 export { default as DsModal } from './components/Modals/Modal';
 export * from './components/Modals/Modal/Modal.consts';
@@ -42,6 +49,7 @@ export { default as DsModalDialog } from './components/Modals/ModalDialog';
 export { default as NumberInCircle } from './components/NumberInCircle';
 export { default as DsNumberInCircle } from './components/NumberInCircle';
 export * from './components/NumberInCircle/NumberInCircle.consts';
+export { default as DsPasswordField } from './components/Form/PasswordField';
 export { default as TabItem } from './components/TabItem';
 export { default as DsTabItem } from './components/TabItem';
 export * from './components/TabItem/TabItem.consts';
@@ -177,3 +185,5 @@ export {
 } from './icons/fontawesome';
 
 export type { IconDefinition } from './icons/fontawesome';
+
+export * from 'vee-validate';

package/lib/js/styles/Borders/BorderSizes.stories.ts

@@ -1,4 +1,4 @@
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'foundations/Borders',

package/lib/js/styles/ItemsList.vue

@@ -6,7 +6,7 @@
 					<h2 class="itemsList__title">{{ itemsList.title }}</h2>
 					<ol class="itemsList__categories">
 						<li
-							v-for="(items, itemCategory) in itemsList.list"
+							v-for="(_items, itemCategory) in itemsList.list"
 							:key="itemCategory"
 							class="itemsListItem__category"
 						>

package/lib/js/tests/helpers.ts

@@ -0,0 +1,5 @@
+import waitForExpect from 'wait-for-expect';
+
+export const waitForExpectShort = (fn: () => void | Promise<void>) => {
+	return waitForExpect(fn, 500, 5);
+};