@bethinkpl/design-system 22.2.1 → 23.0.0

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

@@ -0,0 +1,291 @@
+<template>
+	<div
+		class="ds-datePickerBox"
+		:class="{
+			'-ds-disabled': state === DATE_PICKER_STATES.DISABLED,
+			'-ds-loading': state === DATE_PICKER_STATES.LOADING,
+			'-ds-interactive': isInteractive,
+			'-ds-warning': color === DATE_PICKER_COLORS.WARNING,
+			'-ds-neutral': color === DATE_PICKER_COLORS.NEUTRAL,
+			'-ds-isOpen': isOpen,
+		}"
+	>
+		<span v-if="eyebrowText" class="ds-datePickerBox__eyebrow">{{ eyebrowText }}</span>
+		<div class="ds-datePickerBox__dateWrapper">
+			<ds-icon
+				v-if="icon"
+				class="ds-datePickerBox__icon"
+				:class="{ '-ds-hiddenOnMobile': isIconHiddenOnMobile }"
+				:icon="icon"
+				:size="ICON_SIZES.XX_SMALL"
+			></ds-icon>
+			<span class="ds-datePickerBox__date">{{ text }}</span>
+		</div>
+
+		<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>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/media-queries';
+@import '../../../../styles/settings/borders';
+@import '../../../../styles/settings/radiuses';
+
+@mixin color-scheme(
+	$color-eyebrow,
+	$color-date,
+	$color-icon,
+	$color-icon-hovered,
+	$color-date-hovered,
+	$color-icon-disabled,
+	$color-eyebrow-disabled,
+	$color-date-disabled,
+	$self
+) {
+	&.-ds-interactive {
+		&:hover {
+			#{$self}__icon {
+				color: $color-icon-hovered;
+			}
+
+			#{$self}__date {
+				color: $color-date-hovered;
+			}
+		}
+	}
+
+	&.-ds-disabled {
+		#{$self}__eyebrow {
+			color: $color-eyebrow-disabled;
+		}
+
+		#{$self}__date {
+			color: $color-date-disabled;
+		}
+
+		#{$self}__icon {
+			color: $color-icon-disabled;
+		}
+	}
+
+	&.-ds-isOpen {
+		&:hover {
+			#{$self}__icon {
+				color: $color-icon;
+			}
+
+			#{$self}__date {
+				color: $color-date;
+			}
+		}
+	}
+	#{$self}__eyebrow {
+		color: $color-eyebrow;
+	}
+
+	#{$self}__date {
+		color: $color-date;
+	}
+
+	#{$self}__icon {
+		color: $color-icon;
+	}
+
+	#{$self}__loader {
+		color: $color-icon;
+	}
+}
+
+.ds-datePickerBox {
+	$self: &;
+
+	border: $border-xs solid transparent;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	min-height: 44px;
+	min-width: 76px;
+	padding: $space-2xs $space-xs;
+	pointer-events: none;
+	position: relative;
+
+	&.-ds-loading,
+	&.-ds-interactive {
+		background-color: $color-neutral-background-weak;
+		border-color: $color-neutral-border-weak;
+		border-radius: $radius-s;
+	}
+
+	&.-ds-disabled {
+		background-color: $color-neutral-background-weak-disabled;
+		pointer-events: none;
+	}
+
+	&.-ds-isOpen {
+		background-color: $color-neutral-background-medium;
+
+		&:hover {
+			background-color: $color-neutral-background-medium;
+		}
+	}
+
+	&__eyebrow {
+		@include info-xs-default-regular;
+	}
+
+	&__dateWrapper {
+		column-gap: $space-4xs;
+		display: inline-flex;
+
+		/* Prevent text select */
+		-webkit-user-select: none; /* Safari */
+		user-select: none;
+	}
+
+	&__date {
+		@include text-s-default-regular;
+	}
+
+	&__icon {
+		&.-ds-hiddenOnMobile {
+			display: none;
+
+			@media (#{breakpoint-s()}) {
+				display: flex;
+			}
+		}
+	}
+
+	&__loader {
+		background-color: inherit;
+		display: flex;
+		height: calc(100% - $border-s * 2);
+		justify-content: center;
+		left: $space-5xs;
+		position: absolute;
+		top: $space-5xs;
+		width: calc(100% - $border-s * 2);
+	}
+
+	&.-ds-loading,
+	&.-ds-neutral {
+		@include color-scheme(
+			$color-neutral-text-weak,
+			$color-neutral-text-heavy,
+			$color-neutral-icon,
+			$color-neutral-icon-hovered,
+			$color-neutral-text-heavy,
+			$color-neutral-icon-disabled,
+			$color-neutral-text-disabled,
+			$color-neutral-text-heavy-disabled,
+			$self
+		);
+	}
+
+	&:not(.-ds-loading) {
+		&.-ds-interactive {
+			cursor: pointer;
+			pointer-events: all;
+
+			&:hover:not(.-ds-isOpen) {
+				background-color: $color-neutral-background-weak-hovered;
+			}
+		}
+
+		&.-ds-warning {
+			@include color-scheme(
+				$color-warning-text,
+				$color-warning-text,
+				$color-warning-icon,
+				$color-warning-icon-hovered,
+				$color-warning-text-hovered,
+				$color-warning-icon-disabled,
+				$color-warning-text-disabled,
+				$color-warning-text-disabled,
+				$self
+			);
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import {
+	DATE_PICKER_COLORS,
+	DATE_PICKER_STATES,
+	DatePickerColors,
+	DatePickerStates,
+} from '../DatePicker/DatePicker.consts';
+import { PropType, toRaw } from 'vue';
+
+export default {
+	name: 'DatePickerBox',
+	components: {
+		DsIcon,
+	},
+	props: {
+		isInteractive: {
+			type: Boolean,
+			default: true,
+		},
+		placeholder: {
+			type: String,
+			default: 'Ustaw',
+		},
+		date: {
+			type: Date,
+			default: null,
+		},
+		icon: {
+			type: Object,
+			default: null,
+			validate: (icon) => icon === null || Object.values(ICONS).includes(toRaw(icon)),
+		},
+		isIconHiddenOnMobile: {
+			type: Boolean,
+			default: false,
+		},
+		state: {
+			type: (String as PropType<DatePickerStates>) || null,
+			default: DATE_PICKER_STATES.DEFAULT,
+		},
+		color: {
+			type: String as PropType<DatePickerColors>,
+			default: DATE_PICKER_COLORS.NEUTRAL,
+		},
+		eyebrowText: {
+			type: String,
+			default: '',
+		},
+		isOpen: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+			ICON_SIZES: Object.freeze(ICON_SIZES),
+			DATE_PICKER_STATES: Object.freeze(DATE_PICKER_STATES),
+			DATE_PICKER_COLORS: Object.freeze(DATE_PICKER_COLORS),
+		};
+	},
+	computed: {
+		text() {
+			if (this.date) {
+				return this.date.toLocaleDateString(undefined, {
+					month: 'short',
+					day: '2-digit',
+				});
+			}
+			return this.placeholder;
+		},
+	},
+};
+</script>

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

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

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.stories.ts

@@ -59,8 +59,8 @@ const argTypes = {
 		control: {
 			type: 'select',
 			options: Object.values(OVERLAY_HEADER_BORDER_COLORS),
-			defaultValue: OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST,
 		},
+		defaultValue: OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST,
 	},
 } as ArgTypes;
 

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue

@@ -30,6 +30,7 @@
 					<slot name="titleLeading" />
 				</div>
 				<div
+					v-if="title || shortTitle"
 					class="ds-overlayHeader__titleWrapper"
 					:title="title"
 					:class="{ '-ds-interactive': isTitleInteractive }"
@@ -100,6 +101,7 @@
 @import '../../../../styles/settings/spacings';
 @import '../../../../styles/settings/media-queries';
 @import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/shadows';
 @import '../../../../styles/settings/typography/tokens';
 @import '../../../../styles/mixins/flex-overflow-mask';
 
@@ -107,6 +109,7 @@
 	align-items: center;
 	background: $color-neutral-background;
 	border-bottom: 2px solid $color-neutral-border-ghost;
+	box-shadow: $shadow-s;
 	display: flex;
 	padding: $space-2xs $space-3xs $space-2xs 0;
 
@@ -162,14 +165,19 @@
 	&__main {
 		align-items: center;
 		display: flex;
+		gap: $space-2xs;
+		// title is required, but in some edge-cases we don't render it. We need to set min-height to avoid jumping
+		// Keep value in sync with &__title line-height
+		min-height: $typography-line-height-s;
 	}
 
 	&__titleLeading {
 		display: flex;
-		margin-right: $space-2xs;
 	}
 
 	&__titleWrapper {
+		overflow: hidden;
+
 		&.-ds-interactive {
 			cursor: pointer;
 		}
@@ -202,9 +210,8 @@
 		@include flexOverflowMask($color-neutral-background, 20px);
 
 		display: flex;
-		// flex-shrink: 2 gives some more space for title
-		flex-shrink: 2;
-		margin-left: $space-2xs;
+		// flex-shrink: 100000 is big enough, so the title will not shrink
+		flex-shrink: 100000;
 	}
 
 	&__titleTrailing {

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

@@ -4,6 +4,7 @@ import SlidersSearch from '../../../../images/icons/sliders-search.svg';
 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 { FONTAWESOME_ICONS } from '../../../icons/fontawesome';
 import { Value } from '../../../utils/type.utils';
@@ -46,6 +47,7 @@ const BETHINK_ICONS = {
 	COMMENTS_CHECK: CommentsCheck,
 	ANSWERS: Answers,
 	HIDE_ANSWERS: HideAnswers,
+	SIDEBAR_FLIP_SOLID: SidebarFlipSolid,
 } as const;
 
 export const ICONS = {

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

@@ -0,0 +1,6 @@
+export const IMAGE_FITS = {
+	CONTAIN: 'contain',
+	COVER: 'cover',
+};
+
+export type ImageFit = typeof IMAGE_FITS[keyof typeof IMAGE_FITS];

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

@@ -0,0 +1,36 @@
+import { Args, Meta, StoryFn } from '@storybook/vue3';
+import DsImage from './Image.vue';
+import { IMAGE_FITS } from './Image.consts';
+
+export default {
+	title: 'Components/Image',
+	component: DsImage,
+} as Meta<typeof DsImage>;
+
+const StoryTemplate: StoryFn<typeof DsImage> = (args) => ({
+	components: { DsImage },
+	setup() {
+		return { ...args };
+	},
+	template: `
+		<div style="height: 500px; width: 800px;">
+			<ds-image
+				:fit="fit"
+				:src="src"
+			/>
+		</div>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+Interactive.args = {
+	fit: IMAGE_FITS.COVER,
+	src: 'https://storage.googleapis.com/media-manager/lek/018f6291-3956-7342-8e6b-0ee901d48643/018f6291-3a56-7213-aef6-b5da7253839f.jpg',
+} as Args;
+
+Interactive.argTypes = {
+	fit: {
+		control: { type: 'select', options: Object.values(IMAGE_FITS) },
+		defaultValue: IMAGE_FITS.COVER,
+	},
+};

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

@@ -0,0 +1,94 @@
+<template>
+	<div class="ds-image">
+		<img
+			class="ds-image__image"
+			:class="{
+				'-ds-accelerate': accelerate,
+				'-ds-contain': fit === IMAGE_FITS.CONTAIN,
+				'-ds-cover': fit === IMAGE_FITS.COVER,
+			}"
+			draggable="false"
+			loading="lazy"
+			:src="src"
+			@error="isLoading = false"
+			@load="isLoading = false"
+		/>
+		<div v-if="isLoading" class="ds-image__loader">
+			<ds-skeleton :radius="SKELETON_RADIUS_SIZES.SMALL" />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.ds-image {
+	height: 100%;
+	position: relative;
+
+	&__image {
+		height: 100%;
+		user-select: none;
+		width: 100%;
+
+		&.-ds-accelerate {
+			transform: translate3d(0, 0, 0);
+		}
+
+		&.-ds-contain {
+			object-fit: contain;
+		}
+
+		&.-ds-cover {
+			object-fit: cover;
+		}
+	}
+
+	&__loader {
+		bottom: 0;
+		left: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { IMAGE_FITS, ImageFit } from './Image.consts';
+import { SKELETON_RADIUS_SIZES } from '../Skeleton/Skeleton.consts';
+import DsSkeleton from '../Skeleton/Skeleton.vue';
+
+export default defineComponent({
+	// <image> is "an ancient and poorly supported precursor to the <img> element"
+	// so there should be no conflicts. Also, we prefix all DS components with ds-
+	// https://developer.mozilla.org/en-US/docs/Web/HTML/Element#obsolete_and_deprecated_elements
+	// eslint-disable-next-line vue/no-reserved-component-names
+	name: 'Image',
+	components: {
+		DsSkeleton,
+	},
+	props: {
+		// Use when there are performance issues when other elements are overlayed
+		// on the image, e.g. a RichListItem border covers a part of the image
+		accelerate: {
+			type: Boolean,
+			default: false,
+		},
+		fit: {
+			type: String as PropType<ImageFit>,
+			default: IMAGE_FITS.COVER,
+		},
+		src: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			isLoading: true,
+			IMAGE_FITS: Object.freeze(IMAGE_FITS),
+			SKELETON_RADIUS_SIZES: Object.freeze(SKELETON_RADIUS_SIZES),
+		};
+	},
+});
+</script>

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

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