@bethinkpl/design-system 26.6.0 → 26.7.1

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

@@ -0,0 +1,178 @@
+<template>
+	<div
+		class="ds-avatar"
+		:class="{
+			'-ds-xx-small': size === AVATAR_SIZES.XX_SMALL,
+			'-ds-x-small': size === AVATAR_SIZES.X_SMALL,
+			'-ds-small': size === AVATAR_SIZES.SMALL,
+			'-ds-medium': size === AVATAR_SIZES.MEDIUM,
+			'-ds-large': size === AVATAR_SIZES.LARGE,
+			'-ds-x-large': size === AVATAR_SIZES.X_LARGE,
+		}"
+	>
+		<div
+			class="ds-avatar__content"
+			:style="{
+				backgroundColor: initialBackgroundColor,
+			}"
+		>
+			<img v-if="!!avatarUrl" :src="avatarUrl" :alt="username" class="ds-avatar__image" />
+			<span v-else class="ds-avatar__initials">{{ initials }}</span>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../lib/styles/settings/radiuses';
+@import '../../../../lib/styles/settings/colors/tokens';
+@import '../../../../lib/styles/settings/typography/tokens';
+
+.ds-avatar {
+	$root: &;
+
+	display: flex;
+
+	&.-ds-xx-small {
+		height: 24px;
+		width: 24px;
+
+		& #{$root}__content {
+			@include info-s-default-regular;
+		}
+	}
+
+	&.-ds-x-small {
+		height: 32px;
+		width: 32px;
+
+		& #{$root}__content {
+			@include heading-s-default-regular;
+		}
+	}
+
+	&.-ds-small {
+		height: 40px;
+		width: 40px;
+
+		& #{$root}__content {
+			@include heading-m-default-regular;
+		}
+	}
+
+	&.-ds-medium {
+		height: 64px;
+		width: 64px;
+
+		& #{$root}__content {
+			@include displayHeading-xs-default-regular;
+		}
+	}
+
+	&.-ds-large {
+		height: 88px;
+		width: 88px;
+
+		& #{$root}__content {
+			@include displayHeading-m-default-regular;
+		}
+	}
+
+	&.-ds-x-large {
+		height: 140px;
+		width: 140px;
+
+		& #{$root}__content {
+			@include displayHeading-m-default-regular;
+		}
+	}
+
+	&.-ds-xx-small,
+	&.-ds-x-small,
+	&.-ds-small,
+	&.-ds-medium {
+		& #{$root}__content {
+			border-radius: $radius-s;
+		}
+	}
+
+	&.-ds-large,
+	&.-ds-x-large {
+		& #{$root}__content {
+			border-radius: $radius-m;
+		}
+	}
+
+	&__content {
+		align-items: center;
+		color: $color-inverted-text;
+		display: flex;
+		flex: 1;
+		justify-content: center;
+		overflow: hidden;
+		user-select: none;
+	}
+
+	&__image {
+		display: block;
+		height: 100%;
+		width: 100%;
+	}
+}
+</style>
+
+<script setup lang="ts">
+import { AVATAR_SIZES, AvatarSize } from './Avatar.consts';
+import { computed } from 'vue';
+
+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(' ');
+
+	if (first && second) {
+		return `${first[0]}${second[0]}`.toUpperCase();
+	}
+
+	return first.substring(0, 2).toUpperCase();
+}
+
+const initialBackgroundColor = computed(() => {
+	if (props.avatarUrl) {
+		return;
+	}
+
+	const colorIndex = (props.username.charCodeAt(0) - 65) % 16;
+
+	return initialsBackgrounds[colorIndex];
+});
+const initials = computed(() => getInitials(props.username));
+</script>

package/lib/js/components/Avatar/index.ts

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

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

@@ -5,6 +5,7 @@ import CommentsCheck from '../../../../images/icons/comments-check.svg';
 import Answers from '../../../../images/icons/icon-answers.svg';
 import HideAnswers from '../../../../images/icons/icon-hide-answers.svg';
 import SidebarFlipSolid from '../../../../images/icons/sidebar-flip-solid.svg';
+import Change from '../../../../images/icons/change.svg';
 
 import { FONTAWESOME_ICONS } from '../../../icons/fontawesome';
 import { Value } from '../../../utils/type.utils';
@@ -41,13 +42,14 @@ export const ICON_SIZES = {
 export type IconSize = Value<typeof ICON_SIZES>;
 
 const BETHINK_ICONS = {
-	HEAD_WITH_QUESTION_MARK: HeadWithQuestionMark,
-	RIBBON: Ribbon,
-	SLIDERS_SEARCH: SlidersSearch,
-	COMMENTS_CHECK: CommentsCheck,
 	ANSWERS: Answers,
+	CHANGE: Change,
+	COMMENTS_CHECK: CommentsCheck,
+	HEAD_WITH_QUESTION_MARK: HeadWithQuestionMark,
 	HIDE_ANSWERS: HideAnswers,
+	RIBBON: Ribbon,
 	SIDEBAR_FLIP_SOLID: SidebarFlipSolid,
+	SLIDERS_SEARCH: SlidersSearch,
 } as const;
 
 export const ICONS = {

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

@@ -13,7 +13,7 @@
 			<div class="ds-modal__scrollableWrapper">
 				<img v-if="headerImage" class="ds-modal__image" :src="headerImage" alt="" />
 				<div class="ds-modal__content" :class="{ '-ds-centered': contentCentered }">
-					<div class="ds-modal__header">
+					<div v-if="headerTitle" class="ds-modal__header">
 						<feature-icon
 							v-if="headerFeatureIcon"
 							class="ds-modal__headerFeatureIcon"
@@ -347,7 +347,7 @@ export default defineComponent({
 		},
 		headerTitle: {
 			type: String,
-			required: true,
+			default: null,
 		},
 		headerSubtitle: {
 			type: String,

package/lib/js/icons/fontawesome.ts

@@ -201,6 +201,7 @@ import { faChevronRight as falChevronRight } from '@fortawesome/pro-light-svg-ic
 import { faSpinnerThird as fadSpinnerThird } from '@fortawesome/pro-duotone-svg-icons/faSpinnerThird';
 
 import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
+import { faUserGear } from '@fortawesome/pro-regular-svg-icons/faUserGear';
 
 export const FONTAWESOME_ICONS = {
 	FA_ADDRESS_CARD: faAddressCard,
@@ -394,6 +395,7 @@ export const FONTAWESOME_ICONS = {
 	FA_UNLOCK_KEYHOLE: faUnlockKeyhole,
 	FA_UPLOAD: faUpload,
 	FA_USER: faUser,
+	FA_USER_GEAR: faUserGear,
 	FA_USER_DOCTOR_SOLID: fasUserDoctor,
 	FA_VIDEO_SOLID: fasVideo,
 	FA_VOLUME_HIGH_SOLID: fasVolumeHigh,

package/lib/js/index.ts

@@ -1,3 +1,5 @@
+export { default as Avatar } from './components/Avatar';
+export * from './components/Avatar/Avatar.consts';
 export { default as BadgeScore } from './components/BadgeScore';
 export { default as DsBadgeScore } from './components/BadgeScore';
 export * from './components/BadgeScore/BadgeScore.consts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.6.0",
+  "version": "26.7.1",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -80,7 +80,7 @@
     "stylelint-order": "6.0.3",
     "ts-jest": "29.0.5",
     "ts-node": "^10.9.1",
-    "typescript": "4.6.4",
+    "typescript": "5.7.3",
     "vite": "^5.4.9",
     "vite-plugin-checker": "^0.7.0",
     "vite-plugin-css-injected-by-js": "^3.5.1",
@@ -91,6 +91,7 @@
   },
   "dependencies": {
     "@primevue/themes": "4.0.0-rc.3",
-    "primevue": "4.0.0-rc.3"
+    "primevue": "4.0.0-rc.3",
+    "vue-component-type-helpers": "^2.2.2"
   }
 }