@bethinkpl/design-system 22.3.0 → 23.0.1

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1721980686635,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1722343378818,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/lib/images/icons/sidebar-flip-solid.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    <path d="M53 17C53 15.375 51.625 14 50 14H44C42.25 14 41 15.375 41 17C41 18.75 42.25 20 44 20H50C51.625 20 53 18.75 53 17Z" />
+    <path d="M50 26H44C42.25 26 41 27.375 41 29C41 30.75 42.25 32 44 32H50C51.625 32 53 30.75 53 29C53 27.375 51.625 26 50 26Z" />
+    <path d="M50 38C51.625 38 53 39.375 53 41C53 42.75 51.625 44 50 44H44C42.25 44 41 42.75 41 41C41 39.375 42.25 38 44 38H50Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4C3.58172 4 0 7.58172 0 12V52C0 56.4183 3.58172 60 8 60H56C60.5 60 64 56.5 64 52V12C64 7.625 60.5 4 56 4H8ZM36 10V54H56C57.125 54 58 53.125 58 52V12C58 11 57.125 10 56 10H36Z" />
+</svg>

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;

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts

@@ -10,6 +10,7 @@ import {
 	RICH_LIST_ITEM_TYPE,
 } from '../RichListItem';
 import { ICON_COLORS, ICONS } from '../../Icons/Icon';
+import { DsImage } from '../../../index';
 
 export default {
 	title: 'Components/RichList/BasicRichListItem',
@@ -22,7 +23,108 @@ export default {
 	],
 } as Meta<typeof BasicRichListItem>;
 
-const StoryTemplate: StoryFn<typeof BasicRichListItem> = (args, { updateArgs }) => ({
+const expandStory = (story: StoryFn<typeof BasicRichListItem>, args = {}) => {
+	story.argTypes = {
+		type: {
+			options: Object.values(RICH_LIST_ITEM_TYPE),
+			control: { type: 'select' },
+		},
+		size: {
+			options: Object.values(RICH_LIST_ITEM_SIZE),
+			control: { type: 'select' },
+		},
+		state: {
+			options: Object.values(RICH_LIST_ITEM_STATE),
+			control: { type: 'select' },
+		},
+		iconColor: {
+			options: [null, ...Object.values(ICON_COLORS)],
+			control: { type: 'select' },
+		},
+		borderColor: {
+			options: [null, ...Object.values(RICH_LIST_ITEM_BORDER_COLOR)],
+			control: { type: 'select' },
+		},
+		icon: {
+			options: [null, ...Object.keys(ICONS)],
+			control: { type: 'select' },
+		},
+		iconColorHex: {
+			control: { type: 'text' },
+		},
+		borderColorHex: {
+			control: { type: 'text' },
+		},
+		text: {
+			control: { type: 'text' },
+		},
+		eyebrow: {
+			control: { type: 'text' },
+		},
+		meta: {
+			control: { type: 'text' },
+		},
+		actions: {
+			control: { type: 'text' },
+		},
+		draggableIconClassName: {
+			control: { type: 'text' },
+		},
+		backgroundColor: {
+			options: [null, ...Object.values(RICH_LIST_ITEM_BACKGROUND_COLOR)],
+			control: { type: 'select' },
+		},
+		elevation: {
+			options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
+			control: { type: 'select' },
+		},
+	} as ArgTypes;
+
+	story.args = {
+		size: RICH_LIST_ITEM_SIZE.MEDIUM,
+		type: RICH_LIST_ITEM_TYPE.DEFAULT,
+		backgroundColor: RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,
+		elevation: null,
+		isDimmed: false,
+		isDraggable: true,
+		hasDraggableHandler: true,
+		icon: null,
+		iconColor: null,
+		iconColorHex: '',
+		hasActionsSlotDivider: true,
+		isSelectable: true,
+		isSelected: true,
+		borderColor: null,
+		borderColorHex: '',
+		state: RICH_LIST_ITEM_STATE.DEFAULT,
+		isInteractive: true,
+		draggableIconClassName: 'draggableIconClassName-1',
+
+		eyebrow: 'Eyebrow Uppercase',
+		text: 'Długa nazwa gdy się nie mieści Praesentium dicta sit. Molestiae unde voluptatem eaque labore.',
+		isEyebrowUppercase: false,
+
+		meta: 'Meta Slot',
+		actions: 'ACS',
+
+		...args,
+	} as Args;
+
+	story.parameters = {
+		actions: {
+			handles: ['icon-click', 'click', 'update:is-selected'],
+		},
+		layout: 'fullscreen',
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=8673-2345&mode=design&t=QeEz8TmzxDbrGYK3-4',
+		},
+	};
+
+	return story;
+};
+
+const InteractiveStoryTemplate: StoryFn<typeof BasicRichListItem> = (args, { updateArgs }) => ({
 	components: { BasicRichListItem },
 	setup() {
 		return { ...args };
@@ -70,102 +172,64 @@ const StoryTemplate: StoryFn<typeof BasicRichListItem> = (args, { updateArgs })
     </basic-rich-list-item>`,
 });
 
-export const Interactive = StoryTemplate.bind({});
-
-const args = {
-	size: RICH_LIST_ITEM_SIZE.MEDIUM,
-	type: RICH_LIST_ITEM_TYPE.DEFAULT,
-	backgroundColor: RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,
-	elevation: null,
-	isDimmed: false,
-	isDraggable: true,
-	hasDraggableHandler: true,
-	icon: null,
-	iconColor: null,
-	iconColorHex: '',
-	hasActionsSlotDivider: true,
-	isSelectable: true,
-	isSelected: true,
-	borderColor: null,
-	borderColorHex: '',
-	state: RICH_LIST_ITEM_STATE.DEFAULT,
-	isInteractive: true,
-	draggableIconClassName: 'draggableIconClassName-1',
+export const Interactive = InteractiveStoryTemplate.bind({});
+expandStory(Interactive);
 
-	eyebrow: 'Eyebrow Uppercase',
-	text: 'Długa nazwa gdy się nie mieści Praesentium dicta sit. Molestiae unde voluptatem eaque labore.',
-	isEyebrowUppercase: false,
-
-	meta: 'Meta Slot',
-	actions: 'ACS',
-} as Args;
-
-const argTypes = {
-	type: {
-		options: Object.values(RICH_LIST_ITEM_TYPE),
-		control: { type: 'select' },
-	},
-	size: {
-		options: Object.values(RICH_LIST_ITEM_SIZE),
-		control: { type: 'select' },
-	},
-	state: {
-		options: Object.values(RICH_LIST_ITEM_STATE),
-		control: { type: 'select' },
-	},
-	iconColor: {
-		options: [null, ...Object.values(ICON_COLORS)],
-		control: { type: 'select' },
-	},
-	borderColor: {
-		options: [null, ...Object.values(RICH_LIST_ITEM_BORDER_COLOR)],
-		control: { type: 'select' },
-	},
-	icon: {
-		options: [null, ...Object.keys(ICONS)],
-		control: { type: 'select' },
-	},
-	iconColorHex: {
-		control: { type: 'text' },
-	},
-	borderColorHex: {
-		control: { type: 'text' },
-	},
-	text: {
-		control: { type: 'text' },
-	},
-	eyebrow: {
-		control: { type: 'text' },
-	},
-	meta: {
-		control: { type: 'text' },
-	},
-	actions: {
-		control: { type: 'text' },
-	},
-	draggableIconClassName: {
-		control: { type: 'text' },
-	},
-	backgroundColor: {
-		options: [null, ...Object.values(RICH_LIST_ITEM_BACKGROUND_COLOR)],
-		control: { type: 'select' },
-	},
-	elevation: {
-		options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
-		control: { type: 'select' },
-	},
-} as ArgTypes;
-
-Interactive.argTypes = argTypes;
-Interactive.args = args;
-
-Interactive.parameters = {
-	actions: {
-		handles: ['icon-click', 'click', 'update:is-selected'],
-	},
-	layout: 'fullscreen',
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=8673-2345&mode=design&t=QeEz8TmzxDbrGYK3-4',
-	},
+const WithMediaStoryTemplate: StoryFn<typeof BasicRichListItem> = (args, { updateArgs }) => {
+	return {
+		components: { BasicRichListItem, DsImage },
+		setup() {
+			return { ...args };
+		},
+		data() {
+			return {
+				ICONS: Object.freeze(ICONS),
+			};
+		},
+		methods: {
+			updateIsSelected(isSelected) {
+				updateArgs({ isSelected });
+			},
+		},
+		template: `
+			<basic-rich-list-item
+				:size="size"
+				:type="type"
+				:is-interactive="isInteractive"
+				:is-draggable="isDraggable"
+				:icon="ICONS[icon]"
+				:icon-color="iconColor"
+				:icon-color-hex="iconColorHex"
+				:is-dimmed="isDimmed"
+				:border-color="borderColor"
+				:border-color-hex="borderColorHex"
+				:state="state"
+				:text="text"
+				:eyebrow="eyebrow"
+				:is-eyebrow-uppercase="isEyebrowUppercase"
+				:background-color="backgroundColor"
+				:elevation="elevation"
+				:has-draggable-handler="hasDraggableHandler"
+				:has-actions-slot-divider="hasActionsSlotDivider"
+				:is-selectable="isSelectable"
+				:is-selected="isSelected"
+				@update:is-selected="updateIsSelected"
+			>
+				<template #media>
+					<ds-image :src="imageSrcUsedInStoryBook" />
+				</template>
+				<template v-if="meta" #meta>
+					<div v-html="meta" />
+				</template>
+				<template v-if="actions" #actions>
+					<div v-html="actions" />
+				</template>
+			</basic-rich-list-item>`,
+	};
 };
+
+export const WithMedia = WithMediaStoryTemplate.bind({});
+expandStory(WithMedia, {
+	imageSrcUsedInStoryBook:
+		'https://storage.googleapis.com/media-manager/lek/018f6291-3956-7342-8e6b-0ee901d48643/018f6291-3a56-7213-aef6-b5da7253839f.jpg',
+});

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue

@@ -23,6 +23,9 @@
 		}"
 		@update:is-selected="$emit('update:is-selected', $event)"
 	>
+		<template v-if="$slots.media" #media>
+			<slot name="media" />
+		</template>
 		<template #content>
 			<div class="ds-basicRichListItem__content">
 				<div
@@ -127,8 +130,8 @@ import RichListItem, {
 	RichListItemState,
 	RichListItemType,
 } from '../RichListItem';
-import { PropType } from 'vue';
-import { ICON_COLORS, IconColor } from '../../Icons/Icon';
+import { PropType, toRaw } from 'vue';
+import { ICON_COLORS, IconColor, IconItem, ICONS } from '../../Icons/Icon';
 
 export default {
 	name: 'BasicRichListItem',
@@ -170,8 +173,11 @@ export default {
 			default: true,
 		},
 		icon: {
-			type: String,
+			type: Object as PropType<IconItem>,
 			default: null,
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
+			},
 		},
 		iconColor: {
 			type: String as PropType<IconColor>,