@bethinkpl/design-system 41.0.2 → 41.1.1

package/dist/lib/js/components/Image/Image.vue.d.ts

@@ -21,7 +21,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         MEDIUM: string;
         LARGE: string;
     }>;
-}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, {
+    onError(event: Event): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (event: Event) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     fit: {
         type: PropType<ImageFit>;
         default: string;
@@ -30,7 +34,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         required: true;
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    onError?: ((event: Event) => any) | undefined;
+}>, {
     fit: string;
 }, {}, {
     DsSkeleton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/lib/js/components/Pagination/Pagination.vue.d.ts

@@ -10,6 +10,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isCentered: {
         type: BooleanConstructor;
         default: boolean;
@@ -342,6 +346,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
     }>;
+    ICON_SIZES: Readonly<{
+        XXX_SMALL: string;
+        XX_SMALL: string;
+        X_SMALL: string;
+        SMALL: string;
+        MEDIUM: string;
+        LARGE: string;
+        X_LARGE: string;
+        XX_LARGE: string;
+    }>;
     FIRST_PAGE_NUMBER: number;
 }, {
     lastPage(): number;
@@ -364,6 +378,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isCentered: {
         type: BooleanConstructor;
         default: boolean;
@@ -380,6 +398,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>> & Readonly<{
     "onChange-page"?: ((...args: any[]) => any) | undefined;
 }>, {
+    isLoading: boolean;
     currentPage: number;
     forceCompact: boolean;
     isCentered: boolean;
@@ -1187,5 +1206,80 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
     });
     SelectList: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    DsIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        icon: {
+            type: ObjectConstructor;
+            required: true;
+            validator(icon: unknown): boolean;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+        rotation: {
+            type: (NumberConstructor | null)[];
+            default: null;
+        };
+        flippedVertical: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        flippedHorizontal: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        touchableDeprecated: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        spinning: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, {}, {}, {
+        sizeClassName(): string;
+        isFontawesomeIcon(): boolean;
+    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: ObjectConstructor;
+            required: true;
+            validator(icon: unknown): boolean;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+        rotation: {
+            type: (NumberConstructor | null)[];
+            default: null;
+        };
+        flippedVertical: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        flippedHorizontal: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        touchableDeprecated: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        spinning: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        rotation: number | null;
+        size: string;
+        flippedVertical: boolean;
+        flippedHorizontal: boolean;
+        touchableDeprecated: boolean;
+        spinning: boolean;
+    }, {}, {
+        FontAwesomeIcon: import('vue').DefineComponent<import('@fortawesome/vue-fontawesome').FontAwesomeIconProps>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/lib/js/components/Well/Well.consts.d.ts

@@ -3,6 +3,7 @@ import { Value } from '../../utils/type.utils';
 export declare const WELL_PADDINGS: {
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
+    readonly LARGE: "large";
 };
 export type WellPadding = Value<typeof WELL_PADDINGS>;
 export declare const WELL_COLORS: {

package/lib/js/components/Image/Image.vue

@@ -9,7 +9,7 @@
 			draggable="false"
 			loading="lazy"
 			:src="src"
-			@error="isLoading = false"
+			@error="onError"
 			@load="isLoading = false"
 		/>
 		<div v-if="isLoading" class="ds-image__loader">
@@ -73,6 +73,9 @@ export default defineComponent({
 			required: true,
 		},
 	},
+	emits: {
+		error: (event: Event) => event instanceof Event,
+	},
 	data() {
 		return {
 			isLoading: true,
@@ -80,5 +83,11 @@ export default defineComponent({
 			SKELETON_RADIUS_SIZES: Object.freeze(SKELETON_RADIUS_SIZES),
 		};
 	},
+	methods: {
+		onError(event: Event) {
+			this.isLoading = false;
+			this.$emit('error', event);
+		},
+	},
 });
 </script>

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

@@ -4,11 +4,16 @@ import { shallowMount } from '@vue/test-utils';
 import Pagination from './Pagination.vue';
 
 describe('Pagination', () => {
-	const createComponent = ({ currentPage = 1, itemsTotalAmount = 30 } = {}) => {
+	const createComponent = ({
+		currentPage = 1,
+		itemsTotalAmount = 30,
+		isLoading = false,
+	} = {}) => {
 		return shallowMount(Pagination, {
 			props: {
 				currentPage,
 				itemsTotalAmount,
+				isLoading,
 			} as any,
 			global: {
 				stubs: {
@@ -32,6 +37,18 @@ describe('Pagination', () => {
 		expect(component.exists()).toBe(true);
 	});
 
+	it('should not render the loading spinner by default', () => {
+		const component = createComponent({ itemsTotalAmount: 60 });
+
+		expect(component.find('.ds-pagination__loading').exists()).toBe(false);
+	});
+
+	it('should render the loading spinner when isLoading is true', () => {
+		const component = createComponent({ itemsTotalAmount: 60, isLoading: true });
+
+		expect(component.find('.ds-pagination__loading').exists()).toBe(true);
+	});
+
 	test.each([
 		{
 			props: {

package/lib/js/components/Pagination/Pagination.stories.ts

@@ -22,9 +22,9 @@ const StoryTemplate: StoryFn<typeof Pagination> = (args) => {
 			},
 		},
 		template: `
-			<Pagination v-bind=args @change-page="onChangePage">
-				<template #accessory>
-					<div v-if="args.accessory" v-html="args.accessory" />
+			<Pagination v-bind="args" @change-page="onChangePage">
+				<template v-if="args.accessory" #accessory>
+					<div  v-html="args.accessory" />
 				</template>
 			</Pagination>`,
 	};
@@ -35,6 +35,7 @@ export const Interactive = StoryTemplate.bind({});
 const argTypes = {
 	currentPage: { control: { type: 'number', min: 1 } },
 	forceCompact: { control: 'boolean' },
+	isLoading: { control: 'boolean' },
 	isCentered: { control: 'boolean' },
 	itemsPerPage: { control: { type: 'number', min: 1 } },
 	itemsTotalAmount: { control: { type: 'number', min: 1 } },
@@ -45,6 +46,7 @@ Interactive.argTypes = argTypes;
 Interactive.args = {
 	currentPage: 1,
 	forceCompact: false,
+	isLoading: false,
 	isCentered: false,
 	itemsPerPage: 30,
 	itemsTotalAmount: 600,

package/lib/js/components/Pagination/Pagination.vue

@@ -65,6 +65,10 @@
 						</dropdown>
 					</div>
 				</template>
+
+				<div v-if="isLoading" class="ds-pagination__loading">
+					<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.SMALL" spinning />
+				</div>
 			</div>
 
 			<div v-if="navigationItems.length > 1" class="ds-pagination__items -ds-compact">
@@ -109,10 +113,14 @@
 					"
 					@click="changePage(currentPage + 1)"
 				/>
+
+				<div v-if="isLoading" class="ds-pagination__loading">
+					<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.SMALL" spinning />
+				</div>
 			</div>
 		</div>
 
-		<div class="ds-pagination__accessorySlot">
+		<div v-if="$slots.accessory" class="ds-pagination__accessorySlot">
 			<slot name="accessory" />
 		</div>
 	</div>
@@ -138,6 +146,8 @@ $pagination-input-height: 32px;
 	align-items: stretch;
 	flex-direction: row;
 	flex-grow: 1;
+	// leaves room for the loading spinner so it doesn't overlap the accessory slot
+	gap: $space-20;
 
 	&__itemsWrapper {
 		align-content: center;
@@ -157,6 +167,7 @@ $pagination-input-height: 32px;
 		align-items: center;
 		flex-direction: row;
 		padding: 0;
+		position: relative;
 
 		&.-ds-default {
 			display: none;
@@ -260,6 +271,17 @@ $pagination-input-height: 32px;
 		min-height: 0;
 		padding: 0;
 	}
+
+	&__loading {
+		align-items: center;
+		color: $color-primary-icon;
+		display: flex;
+		left: 100%;
+		margin-left: $space-6;
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+	}
 }
 </style>
 
@@ -267,7 +289,8 @@ $pagination-input-height: 32px;
 import { PAGINATION_DEFAULT_ITEMS_PER_PAGE } from './Pagination.consts';
 import IconButton from '../Buttons/IconButton/IconButton.vue';
 import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES, ICON_BUTTON_STATES } from '../Buttons/IconButton';
-import { ICONS } from '../Icons/Icon';
+import DsIcon from '../Icons/Icon/Icon.vue';
+import { ICON_SIZES, ICONS } from '../Icons/Icon';
 
 import { DROPDOWN_PLACEMENTS, DROPDOWN_RADIUSES } from '../Dropdown/Dropdown.consts';
 import Dropdown from '../Dropdown/Dropdown.vue';
@@ -283,7 +306,7 @@ const FIRST_PAGE_NUMBER = 1;
 
 export default defineComponent({
 	name: 'Pagination',
-	components: { IconButton, Dropdown, SelectListItem, SelectList },
+	components: { IconButton, Dropdown, SelectListItem, SelectList, DsIcon },
 	props: {
 		currentPage: {
 			type: Number,
@@ -296,6 +319,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		isLoading: {
+			type: Boolean,
+			default: false,
+		},
 		isCentered: {
 			type: Boolean,
 			default: false,
@@ -328,6 +355,7 @@ export default defineComponent({
 			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
 			ICON_BUTTON_STATES: Object.freeze(ICON_BUTTON_STATES),
 			ICONS: Object.freeze(ICONS),
+			ICON_SIZES: Object.freeze(ICON_SIZES),
 			FIRST_PAGE_NUMBER,
 		};
 	},

package/lib/js/components/Well/Well.consts.ts

@@ -4,6 +4,7 @@ import { CONTAINER_RIBBON_COLORS, CONTAINER_RIBBON_SIZES } from '../ContainerRib
 export const WELL_PADDINGS = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
+	LARGE: 'large',
 } as const;
 
 export type WellPadding = Value<typeof WELL_PADDINGS>;

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

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import { ComponentMountingOptions, mount } from '@vue/test-utils';
 
 import Well from './Well.vue';
-import { WELL_RIBBON_POSITIONS } from './Well.consts';
+import { WELL_PADDINGS, WELL_RIBBON_POSITIONS } from './Well.consts';
 
 describe('Well', () => {
 	const createComponent = (options: ComponentMountingOptions<typeof Well> = {}) => {
@@ -24,6 +24,14 @@ describe('Well', () => {
 		expect(component.find('.ds-well__content').text()).toContain(content);
 	});
 
+	it.each(Object.values(WELL_PADDINGS))('should set the padding class for %s', (padding) => {
+		const component = createComponent({
+			props: { padding },
+		});
+
+		expect(component.find('.ds-well').classes()).toContain(`-ds-${padding}`);
+	});
+
 	it('should not set no-radius class by default', () => {
 		const component = createComponent();
 

package/lib/js/components/Well/Well.vue

@@ -4,6 +4,7 @@
 		:class="[
 			colorClass,
 			{
+				'-ds-large': WELL_PADDINGS.LARGE === padding,
 				'-ds-medium': WELL_PADDINGS.MEDIUM === padding,
 				'-ds-small': WELL_PADDINGS.SMALL === padding,
 				'-ds-noRadius': !hasRadius,
@@ -144,6 +145,16 @@
 		top: -10px;
 	}
 
+	&.-ds-large {
+		#{$root}__content {
+			padding: $space-12;
+		}
+
+		#{$root}__accessorySlot {
+			right: $space-12;
+		}
+	}
+
 	&.-ds-medium {
 		#{$root}__content {
 			padding: $space-8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "41.0.2",
+  "version": "41.1.1",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",