npm - @bethinkpl/design-system - Versions diffs - 26.13.0 → 26.14.2 - Mend

@bethinkpl/design-system 26.13.0 → 26.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/docs/assets/{preview-bQNvU0Tw.js → preview-DQNre2-F.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-BtI7lPJt.js","./iframe-D0_R78Pi.js","./_commonjsHelpers-Chg3vePA.js","./index-vG0co4wr.js"])))=>i.map(i=>d[i]);
-import{_ as s}from"./iframe-D0_R78Pi.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-BtI7lPJt.js").then(r=>r.am),__vite__mapDeps([0,1,2,3]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-CXWz8i_c.js","./iframe-Bp0Qg1rC.js","./_commonjsHelpers-Chg3vePA.js","./index-vG0co4wr.js"])))=>i.map(i=>d[i]);
+import{_ as s}from"./iframe-Bp0Qg1rC.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-CXWz8i_c.js").then(r=>r.am),__vite__mapDeps([0,1,2,3]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};

package/docs/iframe.html CHANGED Viewed

@@ -510,7 +510,7 @@
 </script>
 <link rel="stylesheet" href="./preview.css">
-    <script type="module" crossorigin src="./assets/iframe-D0_R78Pi.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-Bp0Qg1rC.js"></script>
   </head>
   <body>

package/docs/project.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"generatedAt":~~1744098148018~~,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}
1	+ {"generatedAt":1747724156754,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}

package/lib/js/components/Avatar/Avatar.spec.ts CHANGED Viewed

@@ -214,4 +214,20 @@ describe('Avatar', () => {
 		expect(accessStatusElement.exists()).toBe(true);
 		expect(accessStatusElement.find('img').attributes('src')).toBe(teamMemberImageUrl);
 	});
+	it('should pass activityStatusTooltip to the tooltip component', () => {
+		const tooltipText = 'Active now';
+		const wrapper = mount(Avatar, {
+			props: {
+				size: AVATAR_SIZES.MEDIUM,
+				username: 'Dariusz Chrapek',
+				activityStatus: AVATAR_ACTIVITY_STATUSES.ACTIVE,
+				activityStatusTooltip: tooltipText,
+			},
+		});
+		const tooltip = wrapper.findComponent({ name: 'Tooltip' });
+		expect(tooltip.exists()).toBe(true);
+		expect(tooltip.props('text')).toBe(tooltipText);
+	});
 });

package/lib/js/components/Avatar/Avatar.stories.ts CHANGED Viewed

@@ -41,6 +41,9 @@ const meta: Meta<typeof Avatar> = {
 			},
 			options: [undefined, ...Object.values(AVATAR_ACTIVITY_STATUSES)],
 		},
+		activityStatusTooltip: {
+			control: 'text',
+		},
 	},
 };
 export default meta;
@@ -54,6 +57,7 @@ export const Interactive: Story = {
 		avatarUrl:
 			'https://wiecejnizlek.pl/wp-content/uploads/2021/08/Dariusz_Chrapek-uai-2996x2996-1-scaled.jpeg',
 		teamMemberImageUrl: 'https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg',
+		activityStatusTooltip: 'Active now',
 	},
 };

package/lib/js/components/Avatar/Avatar.vue CHANGED Viewed

@@ -20,11 +20,21 @@
 			<span v-else class="ds-avatar__initials">{{ initials }}</span>
 		</div>
 		<div v-if="activityStatus" class="ds-avatar__activityStatus">
-			<ds-badge
-				:color="activityStatusColor"
-				:elevation="BADGE_ELEVATIONS.X_SMALL"
-				:size="activityStatusSize"
-			/>
+			<ds-tooltip
+				:key="activityStatusTooltip"
+				class="ds-avatar__activityStatusTooltip"
+				:text="activityStatusTooltip"
+				:is-disabled="!activityStatusTooltip"
+				is-pointer-visible
+				:placement="TOOLTIP_PLACEMENTS.BOTTOM"
+				:is-hidden-on-mobile="false"
+			>
+				<ds-badge
+					:color="activityStatusColor"
+					:elevation="BADGE_ELEVATIONS.X_SMALL"
+					:size="activityStatusSize"
+				/>
+			</ds-tooltip>
 		</div>
 		<div v-if="accessStatus" class="ds-avatar__accessStatus">
 			<ds-badge
@@ -169,6 +179,11 @@
 			top: -3px;
 		}
 	}
+	&__activityStatusTooltip {
+		align-items: center;
+		display: flex;
+	}
 }
 </style>
@@ -184,6 +199,7 @@ import {
 import DsBadge, { BADGE_ELEVATIONS, BADGE_SIZES, BADGE_COLORS } from '../Badge';
 import { computed } from 'vue';
 import { ICONS } from '../Icons/Icon';
+import DsTooltip, { TOOLTIP_PLACEMENTS } from '../Tooltip';
 const {
 	size = AVATAR_SIZES.X_SMALL,
@@ -192,6 +208,7 @@ const {
 	activityStatus,
 	accessStatus,
 	teamMemberImageUrl,
+	activityStatusTooltip,
 } = defineProps<{
 	username: string;
 	avatarUrl?: string;
@@ -199,6 +216,7 @@ const {
 	activityStatus?: AvatarActivityStatus;
 	accessStatus?: AvatarAccessStatus;
 	teamMemberImageUrl?: string;
+	activityStatusTooltip?: string;
 }>();
 const { initials, initialBackgroundColor } = useInitials();

package/lib/js/components/DatePickers/DatePicker/DatePicker.composables.ts CHANGED Viewed

@@ -20,6 +20,7 @@ export interface DatePickerComposablesProps {
 interface InitFlatpickrPrams {
 	props: DatePickerComposablesProps;
 	onChange: (dates: Array<Date>) => void;
+	onClose: () => void;
 	defaultDates: Date | Array<Date>;
 	mode: 'single' | 'range';
 }
@@ -31,6 +32,8 @@ interface InitFlatpickr {
 		dateRangePickerRef: HTMLElement,
 		updatePositionBasedOnScrollableSelector: string,
 	) => Promise<DatePickerInstance | undefined>;
+	destroyDatePicker: () => void;
+	updateDatePicker: () => void;
 	isOpen: Ref<boolean>;
 	toggle: () => void;
 }
@@ -38,6 +41,7 @@ interface InitFlatpickr {
 export function initFlatpickr({
 	props,
 	onChange,
+	onClose,
 	defaultDates,
 	mode = 'single',
 }: InitFlatpickrPrams): InitFlatpickr {
@@ -82,6 +86,10 @@ export function initFlatpickr({
 			onClose: [
 				() => {
 					isOpen.value = false;
+					// setTimeout is needed to ensure that the date picker is closed before the onClose callback is called
+					setTimeout(() => {
+						onClose();
+					});
 				},
 			],
 			onOpen: [
@@ -113,9 +121,13 @@ export function initFlatpickr({
 		return datePicker;
 	};
-	onUnmounted(() => {
+	const destroyDatePicker = () => {
 		datePicker?.destroy();
 		datePicker = null;
+	};
+	onUnmounted(() => {
+		destroyDatePicker();
 	});
 	watch(
@@ -142,26 +154,32 @@ export function initFlatpickr({
 	watch(
 		[() => props.date, () => props.startDate, () => props.endDate],
 		() => {
-			if (props.date) {
-				updateDatePickerDates(props.date);
-			} else if (props.startDate && props.endDate) {
-				updateDatePickerDates([props.startDate, props.endDate]);
-			} else if (props.startDate && !props.endDate) {
-				updateDatePickerDates(props.startDate);
-			} else if (!props.startDate && props.endDate) {
-				updateDatePickerDates(props.endDate);
-			} else {
-				datePicker?.clear(false);
-			}
+			updateDatePicker();
 		},
 		{
 			flush: 'post', // Ensure updates happen after DOM changes
 		},
 	);
+	const updateDatePicker = () => {
+		if (props.date) {
+			updateDatePickerDates(props.date);
+		} else if (props.startDate && props.endDate) {
+			updateDatePickerDates([props.startDate, props.endDate]);
+		} else if (props.startDate && !props.endDate) {
+			updateDatePickerDates(props.startDate);
+		} else if (!props.startDate && props.endDate) {
+			updateDatePickerDates(props.endDate);
+		} else {
+			datePicker?.clear(false);
+		}
+	};
 	return {
 		datePicker,
 		createDatePicker,
+		destroyDatePicker,
+		updateDatePicker,
 		isOpen,
 		toggle: () => {
 			datePicker?.toggle();

package/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts CHANGED Viewed

@@ -1,14 +1,14 @@
-import DatePicker from './DatePicker.vue';
+import { useArgs } from '@storybook/preview-api';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { ICONS } from '../../Icons/Icon';
+import DsSwitch from '../../Switch';
 import {
 	DATE_PICKER_CALENDAR_POSITIONS,
 	DATE_PICKER_COLORS,
 	DATE_PICKER_STATES,
 	DATE_PICKER_TRIGGER_TYPES,
 } from './DatePicker.consts';
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
-import { ICONS } from '../../Icons/Icon';
-import DsSwitch from '../../Switch';
-import { useArgs } from '@storybook/preview-api';
+import DatePicker from './DatePicker.vue';
 export default {
 	title: 'Components/DatePickers/DatePicker',

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue CHANGED Viewed

@@ -32,7 +32,7 @@
 				:eyebrow-text="eyebrowText"
 				:additional-text-max-width="TILE_ADDITIONAL_TEXT_MAX_WIDTHS.MEDIUM"
 				has-border
-				@click="toggle"
+				@click.stop.prevent="toggle"
 			/>
 		</template>
 		<date-box
@@ -45,7 +45,7 @@
 			:state="state"
 			:color="color"
 			:is-open="isOpen"
-			@click="toggle"
+			@click.stop.prevent="toggle"
 		/>
 		<span v-if="showErrorMessage" class="ds-datePicker__errorMessage">
@@ -138,12 +138,25 @@
 </style>
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
+import { defineComponent, PropType, Ref, ref, toRaw } from 'vue';
+import { Instance as DatePickerInstance } from 'flatpickr/dist/types/instance';
-import DsTile, { TILE_ADDITIONAL_TEXT_MAX_WIDTHS, TILE_BORDER_COLORS } from '../../Tile';
 import { IconItem, ICONS } from '../../Icons/Icon';
+import DsTile, {
+	TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
+	TILE_BORDER_COLORS,
+	TileColors,
+	TileStates,
+} from '../../Tile';
 import DateBox from '../DateBox';
+import {
+	localFullDateWithShortMonthName,
+	localWeekdayName,
+} from '../../../../../tools/importers/helpers/dates';
+import { capitalizeFirstLetter } from '../../../../../tools/importers/helpers/modifiers';
+import { DatePickerComposablesProps, initFlatpickr } from './DatePicker.composables';
 import {
 	DATE_PICKER_CALENDAR_POSITIONS,
 	DATE_PICKER_COLORS,
@@ -154,12 +167,6 @@ import {
 	DatePickerStates,
 	DatePickerTriggerTypes,
 } from './DatePicker.consts';
-import { capitalizeFirstLetter } from '../../../../../tools/importers/helpers/modifiers';
-import { DatePickerComposablesProps, initFlatpickr } from './DatePicker.composables';
-import {
-	localFullDateWithShortMonthName,
-	localWeekdayName,
-} from '../../../../../tools/importers/helpers/dates';
 export default defineComponent({
 	name: 'DatePicker',
@@ -255,6 +262,7 @@ export default defineComponent({
 		},
 		{ emit },
 	) {
+		const flatpickrInstance = ref<DatePickerInstance | null>(null);
 		const flatpickrInputRef = ref<HTMLInputElement>() as Ref<HTMLInputElement>;
 		const datePickerRef = ref<HTMLDivElement>() as Ref<HTMLDivElement>;
@@ -262,31 +270,32 @@ export default defineComponent({
 			emit('update:date', event[0]);
 		};
+		const onClose = () => {
+			destroyDatePicker();
+			flatpickrInstance.value = null;
+		};
 		const {
 			isOpen,
 			toggle: toggleDatePicker,
 			createDatePicker,
+			destroyDatePicker,
+			updateDatePicker,
 		} = initFlatpickr({
 			props,
 			onChange,
+			onClose,
 			defaultDates: props.date ?? new Date(),
 			mode: 'single',
 		});
-		watch([() => props.isInteractive, () => props.state], async () => {
-			if (props.isInteractive && props.state === DATE_PICKER_STATES.DEFAULT) {
-				await createDatePicker(
-					flatpickrInputRef.value,
-					datePickerRef.value,
-					props.updatePositionBasedOnScrollableSelector,
-				);
-			}
-		});
 		return {
+			flatpickrInstance,
 			flatpickrInputRef,
 			datePickerRef,
 			isOpen,
 			toggleDatePicker,
+			updateDatePicker,
 			createDatePicker,
 			DATE_PICKER_CALENDAR_POSITIONS: Object.freeze(DATE_PICKER_CALENDAR_POSITIONS),
 			DATE_PICKER_COLORS: Object.freeze(DATE_PICKER_COLORS),
@@ -340,18 +349,21 @@ export default defineComponent({
 			return this.helpMessage !== null;
 		},
 	},
-	async mounted() {
-		if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
-			await this.createDatePicker(
+	methods: {
+		async bindFlatpickrInstance() {
+			this.flatpickrInstance = await this.createDatePicker(
 				this.flatpickrInputRef,
 				this.datePickerRef,
 				this.updatePositionBasedOnScrollableSelector,
 			);
-		}
-	},
-	methods: {
-		toggle() {
+			this.updateDatePicker();
+		},
+		async toggle() {
 			if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
+				if (!this.flatpickrInstance) {
+					await this.bindFlatpickrInstance();
+				}
 				this.toggleDatePicker();
 			}
 		},

package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.stories.ts CHANGED Viewed

@@ -1,13 +1,13 @@
-import DateRangePicker from './DateRangePicker.vue';
+import { useArgs } from '@storybook/preview-api';
 import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
+import { ComponentProps } from 'vue-component-type-helpers';
 import { ICONS } from '../../Icons/Icon';
 import {
 	DATE_PICKER_CALENDAR_POSITIONS,
 	DATE_PICKER_COLORS,
 	DATE_PICKER_STATES,
 } from '../DatePicker';
-import { ComponentProps } from 'vue-component-type-helpers';
-import { useArgs } from '@storybook/preview-api';
+import DateRangePicker from './DateRangePicker.vue';
 type DateRangePickerProps = ComponentProps<typeof DateRangePicker>;

package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue CHANGED Viewed

@@ -11,7 +11,7 @@
 			:state="state"
 			:color="color"
 			:is-open="isOpen"
-			@click="toggle"
+			@click.stop.prevent="toggle"
 		/>
 		<span v-if="errorMessage" class="ds-dateRangePicker__errorMessage">
@@ -48,9 +48,10 @@
 </style>
 <script lang="ts">
-import DateBox from '../DateBox';
+import { Instance as DatePickerInstance } from 'flatpickr/dist/types/instance';
+import { defineComponent, PropType, Ref, ref, toRaw } from 'vue';
 import { IconItem, ICONS } from '../../Icons/Icon';
-import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
+import DateBox from '../DateBox';
 import {
 	DATE_PICKER_CALENDAR_POSITIONS,
 	DATE_PICKER_COLORS,
@@ -146,6 +147,7 @@ export default defineComponent({
 		},
 		{ emit },
 	) {
+		const flatpickrInstance = ref<DatePickerInstance | null>(null);
 		const dateRangePickerRef = ref() as Ref<HTMLDivElement>;
 		const flatpickrInputRef = ref() as Ref<HTMLInputElement>;
@@ -156,55 +158,55 @@ export default defineComponent({
 			emit('update:date', { startDate: event[0], endDate: event[1] });
 		};
+		const onClose = () => {
+			destroyDatePicker();
+			flatpickrInstance.value = null;
+		};
 		const {
 			isOpen,
 			toggle: toggleDatePicker,
 			createDatePicker,
+			destroyDatePicker,
+			updateDatePicker,
 		} = initFlatpickr({
 			props,
 			onChange,
+			onClose,
 			defaultDates: [props.startDate, props.endDate],
 			mode: 'range',
 		});
-		watch(
-			[() => props.isInteractive, () => props.state],
-			async () => {
-				if (props.isInteractive && props.state === DATE_PICKER_STATES.DEFAULT) {
-					await createDatePicker(
-						flatpickrInputRef.value,
-						dateRangePickerRef.value,
-						props.updatePositionBasedOnScrollableSelector,
-					);
-				}
-			},
-			{ flush: 'post' },
-		);
 		return {
 			dateRangePickerRef,
 			flatpickrInputRef,
 			isOpen,
 			toggleDatePicker,
 			createDatePicker,
+			destroyDatePicker,
+			updateDatePicker,
 			DATE_PICKER_CALENDAR_POSITIONS: Object.freeze(DATE_PICKER_CALENDAR_POSITIONS),
 			DATE_PICKER_COLORS: Object.freeze(DATE_PICKER_COLORS),
 			DATE_PICKER_STATES: Object.freeze(DATE_PICKER_STATES),
 			DATE_PICKER_TRIGGER_TYPES: Object.freeze(DATE_PICKER_TRIGGER_TYPES),
 		};
 	},
-	async mounted() {
-		if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
-			await this.createDatePicker(
+	methods: {
+		async bindFlatpickrInstance() {
+			this.flatpickrInstance = await this.createDatePicker(
 				this.flatpickrInputRef,
 				this.dateRangePickerRef,
 				this.updatePositionBasedOnScrollableSelector,
 			);
-		}
-	},
-	methods: {
-		toggle() {
+			this.updateDatePicker();
+		},
+		async toggle() {
 			if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
+				if (!this.flatpickrInstance) {
+					await this.bindFlatpickrInstance();
+				}
 				this.toggleDatePicker();
 			}
 		},

package/lib/js/components/RichList/RichListItem/RichListItem.vue CHANGED Viewed

@@ -81,6 +81,7 @@
 @import '../../../../styles/settings/media-queries';
 @import '../../../../styles/settings/radiuses';
 @import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/borders';
 @import '../../../../styles/settings/shadows';
 @import '../../../../styles/settings/icons';
 @import './border-colors';
@@ -127,7 +128,7 @@ $rich-list-item-media-horizontal-height: 80px;
 		align-items: center;
 		flex-direction: initial;
 		justify-content: initial;
-		padding: 0 $space-4xs;
+		padding: 0 $space-4xs 0 calc($space-4xs - $border-xs);
 		#{$root}__container {
 			align-self: initial;
@@ -297,27 +298,29 @@ $rich-list-item-media-horizontal-height: 80px;
 		cursor: pointer;
 		pointer-events: initial;
-		&.-ds-flat {
-			&:hover {
-				opacity: 1;
-				.-ds-dimmable {
+		@media #{breakpoint-s()} {
+			&.-ds-flat {
+				&:hover {
 					opacity: 1;
+					.-ds-dimmable {
+						opacity: 1;
+					}
 				}
 			}
-		}
-		&:not(.-ds-dimmed):hover {
-			&.-ds-default {
-				@each $color, $value in $rich-list-item-background-colors {
-					&.-ds-background-#{$color} {
-						background-color: map-get($value, 'hover');
+			&:not(.-ds-dimmed):hover {
+				&.-ds-default {
+					@each $color, $value in $rich-list-item-background-colors {
+						&.-ds-background-#{$color} {
+							background-color: map-get($value, 'hover');
+						}
 					}
 				}
-			}
-			&.-ds-flat {
-				background: $color-neutral-background-ghost-hovered;
+				&.-ds-flat {
+					background: $color-neutral-background-ghost-hovered;
+				}
 			}
 		}
@@ -474,8 +477,9 @@ $rich-list-item-media-horizontal-height: 80px;
 </style>
 <script lang="ts">
-import DsCheckbox from '../../../components/Form/Checkbox/Checkbox.vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 import DsDivider from '../../../components/Divider';
+import DsCheckbox from '../../../components/Form/Checkbox/Checkbox.vue';
 import DsIcon, {
 	ICON_COLORS,
 	ICON_SIZES,
@@ -483,7 +487,6 @@ import DsIcon, {
 	IconItem,
 	ICONS,
 } from '../../../components/Icons/Icon';
-import { defineComponent, PropType, toRaw } from 'vue';
 import {
 	RICH_LIST_ITEM_BACKGROUND_COLOR,
 	RICH_LIST_ITEM_BORDER_COLOR,

package/package.json CHANGED Viewed

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

package/docs/assets/Avatar-U_7Z6nZ2.js DELETED Viewed

@@ -1 +0,0 @@

- import{d as G,q as i,c as u,a as b,j as k,u as e,s as p,k as I,g as v,n as h,o}from"./vue.esm-bundler-DmkhfO_9.js";import{c as M,B as C,b as l,a as s}from"./Badge-DSmH78WU.js";import{I as d}from"./Icon-BPz80dqH.js";import{_ as O}from"./_plugin-vue_export-helper-DlAUqK2U.js";const a={XX_SMALL:"xx-small",X_SMALL:"x-small",SMALL:"small",MEDIUM:"medium",LARGE:"large",X_LARGE:"x-large"},_={ACTIVE:"active",INACTIVE:"inactive"},c={ACTIVE:"active",INACTIVE:"inactive",AWAITING:"awaiting",BLOCKED:"blocked",TEAM_MEMBER:"team-member"},q=["src","alt"],w={key:1,class:"ds-avatar__initials"},K={key:0,class:"ds-avatar__activityStatus"},F={key:1,class:"ds-avatar__accessStatus"},f=G({__name:"Avatar",props:{username:{},avatarUrl:{},size:{default:()=>a.X_SMALL},activityStatus:{},accessStatus:{},teamMemberImageUrl:{}},setup(r){const{initials:g,initialBackgroundColor:y}=V(),{accessStatusColor:T,accessStatusIcon:U,accessStatusSize:z,accessStatusImage:R}=B(),{activityStatusColor:X,activityStatusSize:N}=D();function V(){const t=["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#f39c12","#d35400","#c0392b"];function n(A){const[m,E]=A.split(/\s+/);return m&&E?`${m[0]}${E[0]}`.toUpperCase():m.substring(0,2).toUpperCase()}const S=i(()=>{if(r.avatarUrl)return;const A=(r.username.charCodeAt(0)-65)%16;return t[A]});return{initials:i(()=>n(r.username)),initialBackgroundColor:S}}function B(){const t=i(()=>{switch(r.accessStatus){case c.ACTIVE:return l.SUCCESS;case c.INACTIVE:case c.AWAITING:return l.NEUTRAL;case c.BLOCKED:return l.DANGER;default:return}}),n=i(()=>{switch(r.accessStatus){case c.ACTIVE:return d.FA_UNLOCK_KEYHOLE;case c.BLOCKED:case c.INACTIVE:return d.FA_LOCK_KEYHOLE;case c.AWAITING:return d.FA_HOURGLASS_START;default:return}}),S=i(()=>{switch(r.size){case a.XX_SMALL:return s.SMALL;case a.X_SMALL:return s.SMALL;case a.SMALL:return s.SMALL;case a.MEDIUM:return s.MEDIUM;case a.LARGE:return s.MEDIUM;case a.X_LARGE:default:return s.X_LARGE}}),L=i(()=>{if(r.accessStatus===c.TEAM_MEMBER)return r.teamMemberImageUrl});return{accessStatusColor:t,accessStatusIcon:n,accessStatusSize:S,accessStatusImage:L}}function D(){const t=i(()=>{switch(r.activityStatus){case _.ACTIVE:return l.SUCCESS;default:case _.INACTIVE:return l.NEUTRAL}}),n=i(()=>{switch(r.size){case a.XX_SMALL:return s.X_SMALL;case a.X_SMALL:return s.SMALL;case a.SMALL:return s.SMALL;case a.MEDIUM:return s.MEDIUM;case a.LARGE:return s.MEDIUM;case a.X_LARGE:default:return s.MEDIUM}});return{activityStatusColor:t,activityStatusSize:n}}return(t,n)=>(o(),u("div",{class:h(["ds-avatar",{"-ds-xx-small":t.size===e(a).XX_SMALL,"-ds-x-small":t.size===e(a).X_SMALL,"-ds-small":t.size===e(a).SMALL,"-ds-medium":t.size===e(a).MEDIUM,"-ds-large":t.size===e(a).LARGE,"-ds-x-large":t.size===e(a).X_LARGE}])},[b("div",{class:"ds-avatar__content",style:p({backgroundColor:e(y)})},[t.avatarUrl?(o(),u("img",{key:0,src:t.avatarUrl,alt:t.username,class:"ds-avatar__image"},null,8,q)):(o(),u("span",w,k(e(g)),1))],4),t.activityStatus?(o(),u("div",K,[I(e(C),{color:e(X),elevation:e(M).X_SMALL,size:e(N)},null,8,["color","elevation","size"])])):v("",!0),t.accessStatus?(o(),u("div",F,[I(e(C),{color:e(T),elevation:e(M).SMALL,icon:e(U),size:e(z),"image-url":e(R)},null,8,["color","elevation","icon","size","image-url"])])):v("",!0)],2))}}),x=O(f,[["__scopeId","data-v-e662d6a3"]]);f.__docgenInfo={exportName:"default",displayName:"Avatar",description:"",tags:{},props:[{name:"username",required:!0,type:{name:"string"}},{name:"avatarUrl",required:!1,type:{name:"string"}},{name:"size",required:!1,type:{name:"AvatarSize"}},{name:"activityStatus",required:!1,type:{name:"AvatarActivityStatus"}},{name:"accessStatus",required:!1,type:{name:"AvatarAccessStatus"}},{name:"teamMemberImageUrl",required:!1,type:{name:"string"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Avatar/Avatar.vue"]};export{x as A,a,c as b,_ as c};

package/docs/assets/Avatar.stories-CVysqINz.js DELETED Viewed

@@ -1,37 +0,0 @@
-import{A as o,a as r,b as k,c as m}from"./Avatar-U_7Z6nZ2.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./Badge-DSmH78WU.js";import"./Icon-BPz80dqH.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const v={title:"Components/Avatar",component:o,render:s=>({components:{Avatar:o},setup(){return{args:s}},template:'<Avatar v-bind="args" />'}),argTypes:{size:{control:"select",options:Object.values(r)},accessStatus:{control:{type:"select",labels:{undefined:"None (undefined)"}},options:[void 0,...Object.values(k)]},activityStatus:{control:{type:"select",labels:{undefined:"None (undefined)"}},options:[void 0,...Object.values(m)]}}},e={args:{size:r.X_SMALL,username:"Dariusz Chrapek",avatarUrl:"https://wiecejnizlek.pl/wp-content/uploads/2021/08/Dariusz_Chrapek-uai-2996x2996-1-scaled.jpeg",teamMemberImageUrl:"https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg"}};e.parameters={design:{type:"figma",url:"https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=12364-12175&t=UpUoIm9oCAaH4dEp-4"}};const a={render:s=>({components:{Avatar:o},setup(){return{args:s,names:["Arkadiusz Kowalski","Bartosz Nowak","Cezary Kowalczyk","Dariusz Chrapek","Edward Nowak","Feliks Kowalski","Grzegorz Nowak","Henryk Kowalczyk","Ireneusz Nowak","Jacek Kowalski","Kamil Nowak","Leszek Kowalczyk","Marek Nowak","Norbert Kowalski","Oskar Nowak","Piotr Kowalczyk"]}},template:'<div style="display: flex; gap: 12px;  flex-wrap: wrap;"><div v-for="name in names"><Avatar v-bind="args" :username="name" /></div></div>'}),argTypes:{size:{control:"select",options:Object.values(r)},username:{control:!1},avatarUrl:{control:!1}},args:{size:r.X_SMALL,teamMemberImageUrl:"https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg"}};var t,l,i;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{
-  args: {
-    size: AVATAR_SIZES.X_SMALL,
-    username: 'Dariusz Chrapek',
-    avatarUrl: 'https://wiecejnizlek.pl/wp-content/uploads/2021/08/Dariusz_Chrapek-uai-2996x2996-1-scaled.jpeg',
-    teamMemberImageUrl: 'https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg'
-  }
-}`,...(i=(l=e.parameters)==null?void 0:l.docs)==null?void 0:i.source}}};var n,p,c;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
-  render: (args: AvatarProps) => ({
-    components: {
-      Avatar
-    },
-    setup() {
-      return {
-        args,
-        names: ['Arkadiusz Kowalski', 'Bartosz Nowak', 'Cezary Kowalczyk', 'Dariusz Chrapek', 'Edward Nowak', 'Feliks Kowalski', 'Grzegorz Nowak', 'Henryk Kowalczyk', 'Ireneusz Nowak', 'Jacek Kowalski', 'Kamil Nowak', 'Leszek Kowalczyk', 'Marek Nowak', 'Norbert Kowalski', 'Oskar Nowak', 'Piotr Kowalczyk']
-      };
-    },
-    template: \`<div style="display: flex; gap: 12px;  flex-wrap: wrap;"><div v-for="name in names"><Avatar v-bind="args" :username="name" /></div></div>\`
-  }),
-  argTypes: {
-    size: {
-      control: 'select',
-      options: Object.values(AVATAR_SIZES)
-    },
-    username: {
-      control: false
-    },
-    avatarUrl: {
-      control: false
-    }
-  },
-  args: {
-    size: AVATAR_SIZES.X_SMALL,
-    teamMemberImageUrl: 'https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg'
-  }
-}`,...(c=(p=a.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};const A=["Interactive","Colors"];export{a as Colors,e as Interactive,A as __namedExportsOrder,v as default};