@bethinkpl/design-system 26.10.2 → 26.11.0

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

@@ -19,6 +19,22 @@
 			<img v-if="!!avatarUrl" :src="avatarUrl" :alt="username" class="ds-avatar__image" />
 			<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"
+			/>
+		</div>
+		<div v-if="accessStatus" class="ds-avatar__accessStatus">
+			<ds-badge
+				:color="accessStatusColor"
+				:elevation="BADGE_ELEVATIONS.SMALL"
+				:icon="accessStatusIcon"
+				:size="accessStatusSize"
+				:image-url="accessStatusImage"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -31,6 +47,7 @@
 	$root: &;
 
 	display: flex;
+	position: relative;
 
 	&.-ds-xx-small {
 		height: 24px;
@@ -117,62 +134,209 @@
 		height: 100%;
 		width: 100%;
 	}
+
+	&__accessStatus {
+		@at-root {
+			.ds-avatar.-ds-xx-small & {
+				bottom: -2px;
+				right: -2px;
+			}
+
+			.ds-avatar.-ds-large & {
+				bottom: 1px;
+				right: 1px;
+			}
+		}
+
+		bottom: 0;
+		display: flex;
+		position: absolute;
+		right: 0;
+	}
+
+	&__activityStatus {
+		display: flex;
+		left: -4px;
+		position: absolute;
+		top: -4px;
+
+		.ds-avatar.-ds-xx-small &,
+		.ds-avatar.-ds-x-small &,
+		.ds-avatar.-ds-small & {
+			left: -3px;
+			top: -3px;
+		}
+	}
 }
 </style>
 
 <script setup lang="ts">
-import { AVATAR_SIZES, AvatarSize } from './Avatar.consts';
+import {
+	AVATAR_ACCESS_STATUSES,
+	AVATAR_ACTIVITY_STATUSES,
+	AVATAR_SIZES,
+	AvatarAccessStatus,
+	AvatarActivityStatus,
+	AvatarSize,
+} from './Avatar.consts';
+import DsBadge, { BADGE_ELEVATIONS, BADGE_SIZES, BADGE_COLORS } from '../Badge';
 import { computed } from 'vue';
+import { ICONS } from '../Icons/Icon';
+
+const {
+	size = AVATAR_SIZES.X_SMALL,
+	username,
+	avatarUrl,
+	activityStatus,
+	accessStatus,
+	teamMemberImageUrl,
+} = defineProps<{
+	username: string;
+	avatarUrl?: string;
+	size?: AvatarSize;
+	activityStatus?: AvatarActivityStatus;
+	accessStatus?: AvatarAccessStatus;
+	teamMemberImageUrl?: string;
+}>();
+
+const { initials, initialBackgroundColor } = useInitials();
+const { accessStatusColor, accessStatusIcon, accessStatusSize, accessStatusImage } =
+	useAccessStatus();
+const { activityStatusColor, activityStatusSize } = useActivityStatus();
+function useInitials() {
+	const initialsBackgrounds = [
+		'#1abc9c',
+		'#2ecc71',
+		'#3498db',
+		'#9b59b6',
+		'#34495e',
+		'#16a085',
+		'#27ae60',
+		'#2980b9',
+		'#8e44ad',
+		'#2c3e50',
+		'#f1c40f',
+		'#e67e22',
+		'#e74c3c',
+		'#f39c12',
+		'#d35400',
+		'#c0392b',
+	];
 
-const props = withDefaults(
-	defineProps<{
-		username: string;
-		avatarUrl?: string;
-		size?: AvatarSize;
-	}>(),
-	{
-		size: AVATAR_SIZES.X_SMALL,
-		avatarUrl: undefined,
-	},
-);
-
-const initialsBackgrounds = [
-	'#1abc9c',
-	'#2ecc71',
-	'#3498db',
-	'#9b59b6',
-	'#34495e',
-	'#16a085',
-	'#27ae60',
-	'#2980b9',
-	'#8e44ad',
-	'#2c3e50',
-	'#f1c40f',
-	'#e67e22',
-	'#e74c3c',
-	'#f39c12',
-	'#d35400',
-	'#c0392b',
-];
-
-function getInitials(username: string) {
-	const [first, second] = username.split(/\s+/);
-
-	if (first && second) {
-		return `${first[0]}${second[0]}`.toUpperCase();
+	function getInitials(username: string) {
+		const [first, second] = username.split(/\s+/);
+
+		if (first && second) {
+			return `${first[0]}${second[0]}`.toUpperCase();
+		}
+
+		return first.substring(0, 2).toUpperCase();
 	}
 
-	return first.substring(0, 2).toUpperCase();
+	const initialBackgroundColor = computed(() => {
+		if (avatarUrl) {
+			return;
+		}
+
+		const colorIndex = (username.charCodeAt(0) - 65) % 16;
+
+		return initialsBackgrounds[colorIndex];
+	});
+
+	const initials = computed(() => getInitials(username));
+
+	return { initials, initialBackgroundColor };
 }
 
-const initialBackgroundColor = computed(() => {
-	if (props.avatarUrl) {
-		return;
-	}
+function useAccessStatus() {
+	const accessStatusColor = computed(() => {
+		switch (accessStatus) {
+			case AVATAR_ACCESS_STATUSES.ACTIVE:
+				return BADGE_COLORS.SUCCESS;
+			case AVATAR_ACCESS_STATUSES.INACTIVE:
+			case AVATAR_ACCESS_STATUSES.AWAITING:
+				return BADGE_COLORS.NEUTRAL;
+			case AVATAR_ACCESS_STATUSES.BLOCKED:
+				return BADGE_COLORS.DANGER;
+			default:
+				return undefined;
+		}
+	});
 
-	const colorIndex = (props.username.charCodeAt(0) - 65) % 16;
+	const accessStatusIcon = computed(() => {
+		switch (accessStatus) {
+			case AVATAR_ACCESS_STATUSES.ACTIVE:
+				return ICONS.FA_UNLOCK_KEYHOLE;
+			case AVATAR_ACCESS_STATUSES.BLOCKED:
+			case AVATAR_ACCESS_STATUSES.INACTIVE:
+				return ICONS.FA_LOCK_KEYHOLE;
+			case AVATAR_ACCESS_STATUSES.AWAITING:
+				return ICONS.FA_HOURGLASS_START;
+			default:
+				return undefined;
+		}
+	});
 
-	return initialsBackgrounds[colorIndex];
-});
-const initials = computed(() => getInitials(props.username));
+	const accessStatusSize = computed(() => {
+		// Casting to AvatarSize to work around an IDE issue (PhpStorm incorrectly flags some case branches as unreachable)
+		switch (size as AvatarSize) {
+			case AVATAR_SIZES.XX_SMALL:
+				return BADGE_SIZES.SMALL;
+			case AVATAR_SIZES.X_SMALL:
+				return BADGE_SIZES.SMALL;
+			case AVATAR_SIZES.SMALL:
+				return BADGE_SIZES.SMALL;
+			case AVATAR_SIZES.MEDIUM:
+				return BADGE_SIZES.MEDIUM;
+			case AVATAR_SIZES.LARGE:
+				return BADGE_SIZES.MEDIUM;
+			case AVATAR_SIZES.X_LARGE:
+			default:
+				return BADGE_SIZES.X_LARGE;
+		}
+	});
+
+	const accessStatusImage = computed(() => {
+		if (accessStatus !== AVATAR_ACCESS_STATUSES.TEAM_MEMBER) {
+			return undefined;
+		}
+
+		return teamMemberImageUrl;
+	});
+
+	return { accessStatusColor, accessStatusIcon, accessStatusSize, accessStatusImage };
+}
+
+function useActivityStatus() {
+	const activityStatusColor = computed(() => {
+		switch (activityStatus) {
+			case AVATAR_ACTIVITY_STATUSES.ACTIVE:
+				return BADGE_COLORS.SUCCESS;
+			default:
+			case AVATAR_ACTIVITY_STATUSES.INACTIVE:
+				return BADGE_COLORS.NEUTRAL;
+		}
+	});
+
+	const activityStatusSize = computed(() => {
+		// Casting to AvatarSize to work around an IDE issue (PhpStorm incorrectly flags some case branches as unreachable)
+		switch (size as AvatarSize) {
+			case AVATAR_SIZES.XX_SMALL:
+				return BADGE_SIZES.X_SMALL;
+			case AVATAR_SIZES.X_SMALL:
+				return BADGE_SIZES.SMALL;
+			case AVATAR_SIZES.SMALL:
+				return BADGE_SIZES.SMALL;
+			case AVATAR_SIZES.MEDIUM:
+				return BADGE_SIZES.MEDIUM;
+			case AVATAR_SIZES.LARGE:
+				return BADGE_SIZES.MEDIUM;
+			case AVATAR_SIZES.X_LARGE:
+			default:
+				return BADGE_SIZES.MEDIUM;
+		}
+	});
+
+	return { activityStatusColor, activityStatusSize };
+}
 </script>

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

@@ -0,0 +1,29 @@
+import { Value } from '../../utils/type.utils';
+
+export const BADGE_SIZES = {
+	X_SMALL: 'x-small',
+	SMALL: 'small',
+	MEDIUM: 'medium',
+	LARGE: 'large',
+	X_LARGE: 'x-large',
+} as const;
+
+export type BadgeSize = Value<typeof BADGE_SIZES>;
+
+export const BADGE_COLORS = {
+	PRIMARY: 'primary',
+	SUCCESS: 'success',
+	DANGER: 'danger',
+	FAIL: 'fail',
+	NEUTRAL: 'neutral',
+} as const;
+
+export type BadgeColor = Value<typeof BADGE_COLORS>;
+
+export const BADGE_ELEVATIONS = {
+	NONE: 'none',
+	X_SMALL: 'x-small',
+	SMALL: 'small',
+} as const;
+
+export type BadgeElevation = Value<typeof BADGE_ELEVATIONS>;

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

@@ -0,0 +1,168 @@
+import { mount } from '@vue/test-utils';
+import Badge from './Badge.vue';
+import { BADGE_COLORS, BADGE_ELEVATIONS, BADGE_SIZES } from './Badge.consts';
+import { ICONS } from '../Icons/Icon';
+
+describe('Badge', () => {
+	it('should render with label', () => {
+		const wrapper = mount(Badge, {
+			props: {
+				label: '1',
+			},
+		});
+
+		expect(wrapper.find('.ds-badge__content').text()).toBe('1');
+	});
+
+	it('should render with icon', () => {
+		const wrapper = mount(Badge, {
+			props: {
+				icon: ICONS.FA_BELL,
+			},
+		});
+
+		expect(wrapper.find('.ds-icon .fa-bell').exists()).toBe(true);
+	});
+
+	it('does not render label if icon is present', () => {
+		const wrapper = mount(Badge, {
+			props: {
+				label: '1',
+				icon: ICONS.FA_BELL,
+			},
+		});
+
+		expect(wrapper.find('.ds-badge__content').exists()).toBe(false);
+	});
+
+	it('should render image', () => {
+		const imageUrl = 'https://via.placeholder.com/150';
+		const wrapper = mount(Badge, {
+			props: {
+				imageUrl,
+			},
+		});
+
+		expect(wrapper.find('.ds-badge__image').exists()).toBe(true);
+		expect(wrapper.find('.ds-badge__image').attributes('src')).toBe(imageUrl);
+	});
+
+	it('should not render icon if image is present', () => {
+		const wrapper = mount(Badge, {
+			props: {
+				icon: ICONS.FA_BELL,
+				imageUrl: 'https://via.placeholder.com/150',
+			},
+		});
+
+		expect(wrapper.find('.ds-badge__image').exists()).toBe(true);
+		expect(wrapper.find('.ds-icon').exists()).toBe(false);
+	});
+
+	it('should not render label if image is present', () => {
+		const wrapper = mount(Badge, {
+			props: {
+				label: '1',
+				imageUrl: 'https://via.placeholder.com/150',
+			},
+		});
+
+		expect(wrapper.find('.ds-badge__image').exists()).toBe(true);
+		expect(wrapper.find('.ds-badge__content').exists()).toBe(false);
+	});
+
+	it.each([
+		{
+			size: BADGE_SIZES.X_LARGE,
+			color: undefined,
+			expectedClassName: '-ds-x-large',
+		},
+		{
+			size: BADGE_SIZES.LARGE,
+			color: undefined,
+			expectedClassName: '-ds-large',
+		},
+		{
+			size: BADGE_SIZES.MEDIUM,
+			color: undefined,
+			expectedClassName: '-ds-medium',
+		},
+		{
+			size: BADGE_SIZES.SMALL,
+			color: undefined,
+			expectedClassName: '-ds-small',
+		},
+		{
+			size: BADGE_SIZES.X_SMALL,
+			color: undefined,
+			expectedClassName: '-ds-x-small',
+		},
+		{
+			size: undefined,
+			color: BADGE_COLORS.PRIMARY,
+			expectedClassName: '-ds-color-primary',
+		},
+		{
+			size: undefined,
+			color: BADGE_COLORS.SUCCESS,
+			expectedClassName: '-ds-color-success',
+		},
+		{
+			size: undefined,
+			color: BADGE_COLORS.DANGER,
+			expectedClassName: '-ds-color-danger',
+		},
+		{
+			size: undefined,
+			color: BADGE_COLORS.FAIL,
+			expectedClassName: '-ds-color-fail',
+		},
+		{
+			size: undefined,
+			color: BADGE_COLORS.NEUTRAL,
+			expectedClassName: '-ds-color-neutral',
+		},
+	])(
+		'should have valid class names for size: $size, color: $color',
+		({ size, color, expectedClassName }) => {
+			const wrapper = mount(Badge, {
+				props: {
+					size,
+					color,
+				},
+			});
+
+			expect(wrapper.find('.ds-badge').classes()).toContain(expectedClassName);
+		},
+	);
+
+	it('should have -ds-no-elevation class when elevation is none', () => {
+		const wrapper = mount(Badge, {
+			props: {
+				elevation: BADGE_ELEVATIONS.NONE,
+			},
+		});
+
+		expect(wrapper.find('.ds-badge__elevation').classes()).toContain('-ds-no-elevation');
+	});
+
+	it('should have -ds-elevation-s class when elevation is small', () => {
+		const wrapper = mount(Badge, {
+			props: {
+				elevation: BADGE_ELEVATIONS.SMALL,
+			},
+		});
+
+		expect(wrapper.find('.ds-badge__elevation').classes()).toContain('-ds-elevation-s');
+	});
+
+	it('should not have elevation modifier class when elevation is x-small', () => {
+		const wrapper = mount(Badge, {
+			props: {
+				elevation: BADGE_ELEVATIONS.X_SMALL,
+			},
+		});
+
+		expect(wrapper.find('.ds-badge__elevation').classes()).toEqual(['ds-badge__elevation']);
+	});
+});

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

@@ -0,0 +1,99 @@
+import { ComponentProps } from 'vue-component-type-helpers';
+import { Meta, StoryObj } from '@storybook/vue3';
+
+import Badge from './Badge.vue';
+import { BADGE_COLORS, BADGE_ELEVATIONS, BADGE_SIZES } from './Badge.consts';
+import { IconKey, ICONS } from '../Icons/Icon';
+import DsBanner, { BANNER_COLORS } from '../Banner';
+
+type BadgeProps = ComponentProps<typeof Badge>;
+
+function wrapWithContainer(template: string): string {
+	// line-height: 0; is to remove extra space below the badge (as it's an inline element)
+	return `<div style="display: inline-flex; background: #ccc; padding: 16px; line-height: 0; margin-bottom: 16px;">${template}</div>
+<ds-banner :color="BANNER_COLORS.WARNING" title="Taka kombinacja jest niezgodna z design systemem!" v-if="invalidUsage" />
+`;
+}
+
+const meta: Meta<typeof Badge> = {
+	title: 'Components/Badges/Badge',
+	component: Badge,
+	render: (args: BadgeProps) => ({
+		components: { Badge, DsBanner },
+		setup() {
+			return {
+				BANNER_COLORS,
+			};
+		},
+		computed: {
+			invalidUsage() {
+				const invalidSizeWithLabel =
+					(args.size === BADGE_SIZES.X_SMALL || args.size === BADGE_SIZES.SMALL) &&
+					args.label;
+
+				const invalidSizeWithIconOrImage =
+					args.size === BADGE_SIZES.X_SMALL && (args.icon || args.imageUrl);
+
+				return invalidSizeWithLabel || invalidSizeWithIconOrImage;
+			},
+			props() {
+				return {
+					...args,
+					icon: ICONS[args.icon as IconKey],
+				};
+			},
+		},
+		// line-height: 0; is to remove extra space below the badge (as it's an inline element)
+		template: wrapWithContainer('<Badge v-bind="props" />'),
+	}),
+	argTypes: {
+		color: {
+			control: 'select',
+			options: Object.values(BADGE_COLORS),
+		},
+		size: {
+			control: 'select',
+			options: Object.values(BADGE_SIZES),
+		},
+		icon: {
+			control: 'select',
+			options: [null, ...Object.keys(ICONS)],
+		},
+		elevation: {
+			control: 'select',
+			options: Object.values(BADGE_ELEVATIONS),
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Interactive: Story = {
+	args: {
+		color: BADGE_COLORS.PRIMARY,
+		size: BADGE_SIZES.SMALL,
+		label: '',
+		icon: undefined,
+		imageUrl: '',
+		elevation: BADGE_ELEVATIONS.X_SMALL,
+	},
+};
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=12364-10601&m=dev',
+	},
+};
+
+export const InteractiveWithImage: Story = {
+	args: {
+		color: BADGE_COLORS.PRIMARY,
+		size: BADGE_SIZES.SMALL,
+		label: '',
+		icon: undefined,
+		imageUrl: 'https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg',
+		elevation: BADGE_ELEVATIONS.X_SMALL,
+	},
+};