@bethinkpl/design-system 26.6.0 → 26.8.0

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/DatePickers/DateBox/DateBox.stories.ts

@@ -0,0 +1,99 @@
+import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
+import { ICONS } from '../../Icons/Icon';
+import { DATE_PICKER_COLORS, DATE_PICKER_STATES } from '../DatePicker';
+import { ComponentProps } from 'vue-component-type-helpers';
+import { useArgs } from '@storybook/preview-api';
+import DateBox from './index';
+
+type DateBoxProps = ComponentProps<typeof DateBox>;
+
+const meta: Meta<DateBoxProps> = {
+	title: 'Components/DatePickers/DateBox',
+	component: DateBox,
+	render: (args) => {
+		const [_, updateArgs] = useArgs();
+
+		return {
+			components: { DateBox },
+			setup() {
+				return args;
+			},
+			data() {
+				return {
+					ICONS: Object.freeze(ICONS),
+				};
+			},
+			computed: {
+				formattedStartDate() {
+					if (!this.startDate) {
+						return null;
+					}
+					return new Date(this.startDate);
+				},
+				formattedEndDate() {
+					if (!this.endDate) {
+						return null;
+					}
+					return new Date(this.endDate);
+				},
+			},
+			template: `
+				<div style="display: flex">
+					<date-box
+						:is-interactive="isInteractive"
+						:placeholder="placeholder"
+						:start-date="formattedStartDate"
+						:end-date="formattedEndDate"
+						:start-icon="startIcon ? ICONS[startIcon] : null"
+						:end-icon="endIcon ? ICONS[endIcon] : null"
+						:are-icons-hidden-on-mobile="areIconsHiddenOnMobile"
+						:error-message="errorMessage"
+						:state="state"
+						:color="color"
+						:is-open="isOpen"
+					/>
+				</div>`,
+		};
+	},
+	argTypes: {
+		startDate: { control: 'date' },
+		endDate: { control: 'date' },
+		startIcon: { control: 'select', options: [null, ...Object.keys(ICONS)] },
+		endIcon: { control: 'select', options: [null, ...Object.keys(ICONS)] },
+		state: {
+			control: 'select',
+			options: Object.values(DATE_PICKER_STATES),
+		},
+		color: {
+			control: 'select',
+			options: Object.values(DATE_PICKER_COLORS).filter(
+				(color) => color !== DATE_PICKER_COLORS.NEUTRAL,
+			),
+		},
+	} as ArgTypes,
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=8502-1209&t=mHbWSeRfkspainMZ-4',
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<DateBoxProps>;
+export const Interactive: Story = {
+	args: {
+		isInteractive: true,
+		color: DATE_PICKER_COLORS.NEUTRAL_WEAK,
+		placeholder: 'Ustaw',
+		startDate: null,
+		endDate: null,
+		startIcon: 'FA_CALENDAR_DAY',
+		endIcon: 'FA_CALENDAR_DAY',
+		areIconsHiddenOnMobile: false,
+		errorMessage: '',
+		state: DATE_PICKER_STATES.DEFAULT,
+		isOpen: false,
+	} as Args,
+};

package/lib/js/components/DatePickers/{DatePickerBox/DatePickerBox.vue → DateBox/DateBox.vue}

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ds-datePickerBox"
+		class="ds-dateBox"
 		:class="{
 			'-ds-disabled': state === DATE_PICKER_STATES.DISABLED,
 			'-ds-loading': state === DATE_PICKER_STATES.LOADING,
@@ -13,55 +13,57 @@
 		}"
 	>
 		<div
-			class="ds-datePickerBox__widthWrapper"
+			class="ds-dateBox__widthWrapper"
 			:class="{ '-ds-has-icon': startIcon, '-ds-iconHiddenOnMobile': areIconsHiddenOnMobile }"
 		>
-			<div class="ds-datePickerBox__dateWrapper">
-				<span v-if="startDateEyebrowText" class="ds-datePickerBox__eyebrow">{{
+			<div v-if="state === DATE_PICKER_STATES.LOADING" class="ds-dateBox__loader">
+				<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.X_SMALL" spinning />
+			</div>
+			<div class="ds-dateBox__dateWrapper">
+				<span v-if="startDateEyebrowText" class="ds-dateBox__eyebrow">{{
 					startDateEyebrowText
 				}}</span>
-				<div class="ds-datePickerBox__date">
+				<div class="ds-dateBox__date">
 					<ds-icon
 						v-if="startIcon"
-						class="ds-datePickerBox__icon"
+						class="ds-dateBox__icon"
 						:class="{ '-ds-hiddenOnMobile': areIconsHiddenOnMobile }"
 						:icon="startIcon"
 						:size="ICON_SIZES.XX_SMALL"
 					></ds-icon>
-					<span class="ds-datePickerBox__dateText">{{ startDateText }}</span>
+					<span class="ds-dateBox__dateText">{{ startDateText }}</span>
 				</div>
 			</div>
 		</div>
-		<template v-if="startDate && endDate">
-			<span class="ds-datePickerBox__separator">–</span>
+		<template v-if="startDate && endDateIfDifferentThanStartDate">
+			<span class="ds-dateBox__separator">–</span>
 			<div
-				class="ds-datePickerBox__widthWrapper -ds-justify-to-end"
+				class="ds-dateBox__widthWrapper -ds-justify-to-end"
 				:class="{
 					'-ds-has-icon': endIcon,
 					'-ds-iconHiddenOnMobile': areIconsHiddenOnMobile,
 				}"
 			>
-				<div class="ds-datePickerBox__dateWrapper">
-					<span v-if="endDateEyebrowText" class="ds-datePickerBox__eyebrow">{{
+				<div v-if="state === DATE_PICKER_STATES.LOADING" class="ds-dateBox__loader">
+					<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.X_SMALL" spinning />
+				</div>
+				<div class="ds-dateBox__dateWrapper">
+					<span v-if="endDateEyebrowText" class="ds-dateBox__eyebrow">{{
 						endDateEyebrowText
 					}}</span>
-					<div class="ds-datePickerBox__date">
+					<div class="ds-dateBox__date">
 						<ds-icon
 							v-if="endIcon"
-							class="ds-datePickerBox__icon"
+							class="ds-dateBox__icon"
 							:class="{ '-ds-hiddenOnMobile': areIconsHiddenOnMobile }"
 							:icon="endIcon"
 							:size="ICON_SIZES.XX_SMALL"
 						></ds-icon>
-						<span class="ds-datePickerBox__dateText">{{ endDateText }}</span>
+						<span class="ds-dateBox__dateText">{{ endDateText }}</span>
 					</div>
 				</div>
 			</div>
 		</template>
-
-		<div v-if="state === DATE_PICKER_STATES.LOADING" class="ds-datePickerBox__loader">
-			<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.X_SMALL" spinning />
-		</div>
 	</div>
 </template>
 
@@ -142,6 +144,7 @@
 	}
 
 	#{$self}__loader {
+		background-color: $color-background;
 		color: $color-icon;
 	}
 
@@ -156,7 +159,7 @@
 	}
 }
 
-.ds-datePickerBox {
+.ds-dateBox {
 	$self: &;
 
 	align-items: center;
@@ -168,7 +171,6 @@
 	min-width: 76px;
 	padding: $space-2xs $space-xs;
 	pointer-events: none;
-	position: relative;
 
 	&__dateWrapper {
 		display: flex;
@@ -184,6 +186,7 @@
 	&__widthWrapper {
 		display: inline-flex;
 		min-width: 46px;
+		position: relative;
 
 		&.-ds-has-icon {
 			min-width: 52px;
@@ -252,14 +255,11 @@
 	}
 
 	&__loader {
-		background-color: inherit;
 		display: flex;
-		height: calc(100% - $border-s * 2);
+		height: 100%;
 		justify-content: center;
-		left: $space-5xs;
 		position: absolute;
-		top: $space-5xs;
-		width: calc(100% - $border-s * 2);
+		width: 100%;
 	}
 
 	&.-ds-loading,
@@ -351,10 +351,14 @@ import {
 	DatePickerStates,
 } from '../DatePicker/DatePicker.consts';
 import { defineComponent, PropType, toRaw } from 'vue';
-import { localMonthDayWithShortMonthDay } from '../../../../../tools/importers/helpers/dates';
+import {
+	localMonthDayWithShortMonthDay,
+	localWeekdayName,
+} from '../../../../../tools/importers/helpers/dates';
+import { capitalizeFirstLetter } from '../../../../../tools/importers/helpers/modifiers';
 
 export default defineComponent({
-	name: 'DatePickerBox',
+	name: 'DateBox',
 	components: {
 		DsIcon,
 	},
@@ -397,14 +401,6 @@ export default defineComponent({
 			type: String as PropType<DatePickerColors>,
 			default: DATE_PICKER_COLORS.NEUTRAL_WEAK,
 		},
-		startDateEyebrowText: {
-			type: String,
-			default: '',
-		},
-		endDateEyebrowText: {
-			type: String,
-			default: '',
-		},
 		isOpen: {
 			type: Boolean,
 			default: false,
@@ -425,8 +421,27 @@ export default defineComponent({
 			}
 			return this.placeholder;
 		},
+		endDateIfDifferentThanStartDate() {
+			return this.startDate &&
+				this.endDate &&
+				this.startDate.toDateString() !== this.endDate.toDateString()
+				? this.endDate
+				: null;
+		},
 		endDateText() {
-			return localMonthDayWithShortMonthDay(this.endDate);
+			return localMonthDayWithShortMonthDay(this.endDateIfDifferentThanStartDate);
+		},
+		startDateEyebrowText() {
+			if (!this.startDate) {
+				return '';
+			}
+			return capitalizeFirstLetter(localWeekdayName(this.startDate));
+		},
+		endDateEyebrowText() {
+			if (!this.endDateIfDifferentThanStartDate) {
+				return '';
+			}
+			return capitalizeFirstLetter(localWeekdayName(this.endDateIfDifferentThanStartDate));
 		},
 	},
 });

package/lib/js/components/DatePickers/DateBox/index.ts

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

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

@@ -35,7 +35,7 @@
 				@click="toggle"
 			/>
 		</template>
-		<date-picker-box
+		<date-box
 			v-else
 			:is-interactive="isInteractive"
 			:placeholder="placeholder"
@@ -44,7 +44,6 @@
 			:are-icons-hidden-on-mobile="isIconHiddenOnMobile"
 			:state="state"
 			:color="color"
-			:start-date-eyebrow-text="eyebrowText"
 			:is-open="isOpen"
 			@click="toggle"
 		/>
@@ -143,7 +142,7 @@ import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
 
 import DsTile, { TILE_ADDITIONAL_TEXT_MAX_WIDTHS, TILE_BORDER_COLORS } from '../../Tile';
 import { IconItem, ICONS } from '../../Icons/Icon';
-import DatePickerBox from '../DatePickerBox';
+import DateBox from '../DateBox';
 
 import {
 	DATE_PICKER_CALENDAR_POSITIONS,
@@ -166,7 +165,7 @@ export default defineComponent({
 	name: 'DatePicker',
 	components: {
 		DsTile,
-		DatePickerBox,
+		DateBox,
 	},
 	props: {
 		triggerType: {

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

@@ -1,17 +1,15 @@
 <template>
 	<div ref="dateRangePickerRef" class="ds-dateRangePicker">
-		<date-picker-box
+		<date-box
 			:is-interactive="isInteractive"
 			:placeholder="placeholder"
 			:start-date="startDate"
-			:end-date="endDateIfDifferentThanStartDate"
+			:end-date="endDate"
 			:start-icon="startIcon"
 			:end-icon="endIcon"
 			:are-icons-hidden-on-mobile="areIconsHiddenOnMobile"
 			:state="state"
 			:color="color"
-			:start-date-eyebrow-text="eyebrowText"
-			:end-date-eyebrow-text="endDateEyebrowText"
 			:is-open="isOpen"
 			@click="toggle"
 		/>
@@ -50,7 +48,7 @@
 </style>
 
 <script lang="ts">
-import DatePickerBox from '../DatePickerBox/DatePickerBox.vue';
+import DateBox from '../DateBox';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
 import {
@@ -69,7 +67,7 @@ import { localWeekdayName } from '../../../../../tools/importers/helpers/dates';
 export default defineComponent({
 	name: 'DateRangePicker',
 	components: {
-		DatePickerBox,
+		DateBox,
 	},
 	props: {
 		isInteractive: {
@@ -197,31 +195,6 @@ export default defineComponent({
 			DATE_PICKER_TRIGGER_TYPES: Object.freeze(DATE_PICKER_TRIGGER_TYPES),
 		};
 	},
-	computed: {
-		endDateEyebrowText() {
-			if (!this.endDate || this.state === DATE_PICKER_STATES.LOADING) {
-				return '';
-			}
-
-			return capitalizeFirstLetter(localWeekdayName(this.endDate));
-		},
-
-		endDateIfDifferentThanStartDate() {
-			return this.startDate &&
-				this.endDate &&
-				this.startDate.getTime() !== this.endDate.getTime()
-				? this.endDate
-				: null;
-		},
-
-		eyebrowText() {
-			if (!this.startDate || this.state === DATE_PICKER_STATES.LOADING) {
-				return '';
-			}
-
-			return capitalizeFirstLetter(localWeekdayName(this.startDate));
-		},
-	},
 	async mounted() {
 		if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
 			await this.createDatePicker(

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';
@@ -14,6 +16,7 @@ export { default as Card } 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';
 export { default as DatePicker } from './components/DatePickers/DatePicker';
 export { default as DsDatePicker } from './components/DatePickers/DatePicker';
 export { default as DsDateRangePicker } from './components/DatePickers/DateRangePicker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.6.0",
+  "version": "26.8.0",
   "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"
   }
 }