@bethinkpl/design-system 24.2.1 → 25.0.1

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

@@ -1,7 +1,10 @@
 <template>
 	<div class="ds-richListItem" :class="classList" @click="$emit('click', $event)">
+		<div v-if="hasMedia && isVertical" class="ds-richListItem__mediaVertical -ds-dimmable">
+			<slot name="media" />
+		</div>
 		<div class="ds-richListItem__container -ds-dimmable">
-			<div v-if="hasMedia" class="ds-richListItem__media">
+			<div v-if="hasMedia && isHorizontal" class="ds-richListItem__mediaHorizontal">
 				<slot name="media" />
 			</div>
 			<div v-if="isDraggable && hasDraggableHandler" class="ds-richListItem__dragAndDrop">
@@ -35,19 +38,18 @@
 				<slot name="content" />
 			</div>
 			<div class="ds-richListItem__rightContainer">
-				<div v-if="$slots.metadata" class="ds-richListItem__metadata -ds-hideOnMobile">
+				<div v-if="$slots.metadata && isHorizontal" class="ds-richListItem__metadata">
 					<slot name="metadata" />
 				</div>
 				<div v-if="$slots.actions" class="ds-richListItem__actionSlot" @click.stop>
 					<ds-divider
-						v-if="$slots.actions && hasActionsSlotDivider"
+						v-if="$slots.actions && hasActionsSlotDivider && isHorizontal"
 						is-vertical
-						class="-ds-hideOnMobile"
 					/>
 					<slot name="actions" />
 				</div>
 				<div v-if="isSelectable" class="ds-richListItem__checkbox">
-					<ds-divider is-vertical class="-ds-hideOnMobile" />
+					<ds-divider v-if="isHorizontal" is-vertical />
 					<ds-checkbox
 						:is-selected="isSelected"
 						@update:is-selected="$emit('update:is-selected', $event)"
@@ -57,10 +59,7 @@
 			</div>
 		</div>
 
-		<div
-			v-if="$slots.metadata"
-			class="ds-richListItem__metadata -ds-dimmable -ds-visibleOnMobile"
-		>
+		<div v-if="$slots.metadata && isVertical" class="ds-richListItem__metadata -ds-dimmable">
 			<slot name="metadata" />
 		</div>
 		<div
@@ -108,20 +107,147 @@ $rich-list-item-background-colors: (
 		}
 	}
 
-	align-items: flex-start;
 	cursor: default;
 	display: flex;
 	flex: 1;
-	flex-direction: column;
-	justify-content: center;
-	padding: $space-4xs;
 	position: relative;
 
-	@media #{breakpoint-s()} {
+	&.-ds-horizontal {
 		align-items: center;
 		flex-direction: initial;
 		justify-content: initial;
 		padding: 0 $space-4xs;
+
+		#{$root}__container {
+			align-self: initial;
+		}
+
+		#{$root}__dragAndDrop,
+		#{$root}__iconWrapper {
+			align-items: center;
+			padding: $space-3xs $space-3xs $space-3xs $space-s;
+		}
+
+		#{$root}__content {
+			padding: 0 $space-4xs 0 $space-2xs;
+		}
+
+		#{$root}__metadata {
+			justify-content: flex-start;
+			padding-left: $space-4xs;
+		}
+
+		#{$root}__rightContainer {
+			align-items: center;
+			justify-content: initial;
+			padding: $space-xs 0;
+		}
+
+		#{$root}__actionSlot {
+			align-items: center;
+			justify-content: initial;
+			padding: 0 $space-4xs;
+		}
+
+		#{$root}__checkbox {
+			align-items: center;
+			padding: 0 $space-s 0 $space-4xs;
+		}
+
+		&.-ds-small {
+			padding: 0 $space-4xs 0 0;
+
+			#{$root}__dragAndDrop,
+			#{$root}__iconWrapper {
+				padding: $space-3xs 0 $space-3xs $space-xs;
+			}
+
+			#{$root}__checkbox {
+				gap: $space-xs;
+				padding: 0 $space-xs 0 $space-4xs;
+			}
+
+			#{$root}__rightContainer {
+				padding: $space-2xs 0;
+			}
+
+			#{$root}__actionSlot {
+				padding: 0 $space-4xs;
+			}
+
+			#{$root}__metadata {
+				justify-content: flex-start;
+				padding-left: $space-4xs;
+			}
+		}
+	}
+
+	&.-ds-vertical {
+		align-items: flex-start;
+		flex-direction: column;
+		justify-content: center;
+		padding-bottom: $space-4xs;
+
+		#{$root}__container {
+			align-self: stretch;
+			padding: $space-4xs $space-4xs 0;
+		}
+
+		#{$root}__dragAndDrop,
+		#{$root}__iconWrapper {
+			align-items: flex-start;
+			padding: $space-xs 0 0 $space-xs;
+		}
+
+		#{$root}__content {
+			padding: 0 $space-4xs 0 $space-xs;
+		}
+
+		#{$root}__metadata {
+			padding-left: $space-s;
+			padding-right: $space-2xs;
+		}
+
+		#{$root}__rightContainer {
+			align-items: flex-start;
+			justify-content: flex-end;
+		}
+
+		#{$root}__actionSlot {
+			align-items: flex-start;
+			justify-content: flex-end;
+			padding: $space-4xs $space-4xs 0 $space-4xs;
+		}
+
+		#{$root}__checkbox {
+			align-items: flex-start;
+			padding: $space-3xs $space-xs 0 $space-xs;
+		}
+
+		&.-ds-small {
+			#{$root}__dragAndDrop,
+			#{$root}__iconWrapper {
+				padding: $space-2xs $space-4xs 0 $space-2xs;
+			}
+
+			#{$root}__checkbox {
+				gap: $space-s;
+				padding: $space-5xs $space-2xs 0 $space-2xs;
+			}
+
+			#{$root}__actionSlot {
+				padding: 0 $space-4xs 0 $space-5xs;
+			}
+
+			#{$root}__metadata {
+				padding-left: $space-xs;
+			}
+		}
+	}
+
+	&.-ds-verticalWithMedia {
+		padding-right: 0;
+		padding-top: 0;
 	}
 
 	&.-ds-has-media {
@@ -230,33 +356,26 @@ $rich-list-item-background-colors: (
 
 	&__container {
 		align-items: center;
-		align-self: stretch;
 		display: flex;
 		flex: 1;
 		width: 100%;
-
-		@media #{breakpoint-s()} {
-			align-self: initial;
-		}
 	}
 
-	&__media {
+	&__mediaHorizontal {
 		height: 80px;
 		margin-right: $space-3xs;
 		width: 100px;
 	}
 
+	&__mediaVertical {
+		aspect-ratio: 4 / 3;
+		overflow: hidden;
+	}
+
 	&__dragAndDrop,
 	&__iconWrapper {
-		align-items: flex-start;
 		align-self: stretch;
 		display: flex;
-		padding: $space-xs 0 0 $space-xs;
-
-		@media #{breakpoint-s()} {
-			align-items: center;
-			padding: $space-3xs $space-3xs $space-3xs $space-s;
-		}
 	}
 
 	&__content {
@@ -264,81 +383,30 @@ $rich-list-item-background-colors: (
 		display: flex;
 		flex: 1 0 0;
 		min-width: 0;
-		padding: 0 $space-4xs 0 $space-xs;
-
-		@media #{breakpoint-s()} {
-			padding: 0 $space-4xs 0 $space-2xs;
-		}
 	}
 
 	&__metadata {
 		align-items: center;
 		gap: $space-xs;
-		padding-left: $space-xs;
 		padding-right: $space-4xs;
-
-		@media #{breakpoint-s()} {
-			justify-content: flex-start;
-			padding-left: $space-4xs;
-		}
-
-		&.-ds-hideOnMobile {
-			display: none;
-
-			@media #{breakpoint-s()} {
-				display: flex;
-			}
-		}
-
-		&.-ds-visibleOnMobile {
-			display: flex;
-
-			@media #{breakpoint-s()} {
-				display: none;
-			}
-		}
 	}
 
 	&__rightContainer {
-		align-items: flex-start;
 		align-self: stretch;
 		display: flex;
-		justify-content: flex-end;
-
-		@media #{breakpoint-s()} {
-			align-items: center;
-			justify-content: initial;
-			padding: $space-xs 0;
-		}
 	}
 
 	&__actionSlot {
-		align-items: flex-start;
 		align-self: stretch;
 		display: flex;
 		gap: $space-2xs;
-		justify-content: flex-end;
-		padding: $space-4xs $space-4xs 0 $space-4xs;
-
-		@media #{breakpoint-s()} {
-			align-items: center;
-			justify-content: initial;
-			padding: 0 $space-4xs;
-		}
 	}
 
 	&__checkbox {
-		align-items: flex-start;
 		align-self: stretch;
 		display: flex;
 		gap: $space-s;
 		justify-content: flex-end;
-		padding: $space-5xs $space-xs 0 $space-xs;
-
-		@media #{breakpoint-s()} {
-			align-items: center;
-			padding: 0 $space-s 0 $space-4xs;
-		}
 	}
 
 	&__icon {
@@ -361,70 +429,16 @@ $rich-list-item-background-colors: (
 	}
 
 	&.-ds-small {
-		padding: $space-4xs;
-
-		@media #{breakpoint-s()} {
-			padding: 0 $space-4xs 0 0;
-		}
-
-		#{$root}__dragAndDrop,
-		#{$root}__iconWrapper {
-			padding: $space-2xs $space-4xs 0 $space-2xs;
-
-			@media #{breakpoint-s()} {
-				padding: $space-3xs 0 $space-3xs $space-xs;
-			}
-		}
-
-		#{$root}__checkbox {
-			gap: $space-s;
-			padding: $space-5xs $space-2xs 0 $space-2xs;
-
-			@media #{breakpoint-s()} {
-				gap: $space-xs;
-				padding: 0 $space-xs 0 $space-4xs;
-			}
-		}
-
 		#{$root}__content {
 			align-items: center;
 			padding: 0 $space-4xs 0 $space-2xs;
 		}
 
-		#{$root}__rightContainer {
-			@media #{breakpoint-s()} {
-				padding: $space-2xs 0;
-			}
-		}
-
 		#{$root}__actionSlot {
 			gap: $space-2xs;
-			padding: 0 $space-4xs 0 $space-5xs;
-
-			@media #{breakpoint-s()} {
-				padding: 0 $space-4xs;
-			}
-		}
-
-		#{$root}__metadata {
-			padding-left: $space-2xs;
-			padding-right: $space-4xs;
-
-			@media #{breakpoint-s()} {
-				justify-content: flex-start;
-				padding-left: $space-4xs;
-			}
 		}
 	}
 }
-
-.-ds-hideOnMobile {
-	display: none;
-
-	@media #{breakpoint-s()} {
-		display: initial;
-	}
-}
 </style>
 
 <script lang="ts">
@@ -442,12 +456,14 @@ import {
 	RICH_LIST_ITEM_BACKGROUND_COLOR,
 	RICH_LIST_ITEM_BORDER_COLOR,
 	RICH_LIST_ITEM_ELEVATION,
+	RICH_LIST_ITEM_LAYOUT,
 	RICH_LIST_ITEM_SIZE,
 	RICH_LIST_ITEM_STATE,
 	RICH_LIST_ITEM_TYPE,
 	RichListItemBackgroundColor,
 	RichListItemBorderColor,
 	RichListItemElevation,
+	RichListItemLayout,
 	RichListItemSize,
 	RichListItemState,
 	RichListItemType,
@@ -464,14 +480,21 @@ export default {
 		type: {
 			type: String as PropType<RichListItemType>,
 			default: RICH_LIST_ITEM_TYPE.DEFAULT,
-			validator(type) {
+			validator(type: RichListItemType) {
 				return Object.values(RICH_LIST_ITEM_TYPE).includes(type);
 			},
 		},
+		layout: {
+			type: String as PropType<RichListItemLayout>,
+			default: RICH_LIST_ITEM_LAYOUT.HORIZONTAL,
+			validator(layout: RichListItemLayout) {
+				return Object.values(RICH_LIST_ITEM_LAYOUT).includes(layout);
+			},
+		},
 		state: {
 			type: String as PropType<RichListItemState>,
 			default: RICH_LIST_ITEM_STATE.DEFAULT,
-			validator(state) {
+			validator(state: RichListItemState) {
 				return Object.values(RICH_LIST_ITEM_STATE).includes(state);
 			},
 		},
@@ -577,6 +600,9 @@ export default {
 			return {
 				'-ds-default': this.type === RICH_LIST_ITEM_TYPE.DEFAULT,
 				'-ds-flat': this.type === RICH_LIST_ITEM_TYPE.FLAT,
+				'-ds-horizontal': this.isHorizontal,
+				'-ds-verticalWithMedia': this.isVertical && this.hasMedia,
+				'-ds-vertical': this.isVertical,
 				'-ds-loading': this.state === RICH_LIST_ITEM_STATE.LOADING,
 				'-ds-dimmed': this.isDimmed,
 				'-ds-interactive': this.isInteractive,
@@ -593,6 +619,12 @@ export default {
 				'-ds-has-media': this.hasMedia,
 			};
 		},
+		isHorizontal() {
+			return this.layout === RICH_LIST_ITEM_LAYOUT.HORIZONTAL;
+		},
+		isVertical() {
+			return this.layout === RICH_LIST_ITEM_LAYOUT.VERTICAL;
+		},
 		iconColorClass() {
 			if (!this.iconColor || (this.iconColor && this.iconColorHex)) {
 				return;

package/lib/js/components/Tooltip/Tooltip.vue

@@ -67,6 +67,7 @@ export default defineComponent({
 					background: 'var(--neutral-background-medium, #E5E7ED)',
 					color: 'var(--neutral-text-heavy, #343C50)',
 					borderRadius: '4px',
+					maxWidth: '240px',
 				},
 				ptOptions: {
 					mergeProps: true,

package/lib/js/primevue.ts

@@ -10,6 +10,9 @@ export const initializePrimeVue = (app) => {
 				darkModeSelector: '.app-dark', // enabling dark mode in storybook makes all components canvas black
 			},
 		},
+		zIndex: {
+			tooltip: 16777271, // keep above $z-index-modal
+		},
 	});
 
 	app.directive('pv-tooltip', Tooltip);

package/lib/styles/settings/_z-indexes.scss

@@ -1,4 +1,5 @@
 // z-index positioning
 // hardcoded
+// Keep in sync with zIndex.tooltip in primevue.ts
 $z-index-modal: 16777270; // 16777271 is the highest possible value in Safari, we need to make space for elements that above modal, so -1
 $z-index-overlay: 51;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "24.2.1",
+  "version": "25.0.1",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -40,7 +40,6 @@
     "@fortawesome/pro-regular-svg-icons": "6.4.2",
     "@fortawesome/pro-solid-svg-icons": "6.4.2",
     "@fortawesome/vue-fontawesome": "3.0.3",
-    "@primevue/themes": "4.0.0-rc.3",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-controls": "^6.5.13",
     "@storybook/addon-docs": "^6.5.13",
@@ -73,11 +72,10 @@
     "jsdom-global": "^3.0.2",
     "postcss-prefix-selector": "^1.9.0",
     "prettier": "2.7.1",
-    "primevue": "4.0.0-rc.3",
     "sass": "^1.28.0",
     "sass-loader": "^7.1.0",
     "storybook-addon-designs": "^6.3.1",
-    "stylelint": "13.6.1",
+    "stylelint": "13.8.0",
     "stylelint-config-standard": "20.0.0",
     "stylelint-order": "6.0.3",
     "stylelint-scss": "3.18.0",
@@ -88,5 +86,9 @@
     "vue-loader": "17.0.0",
     "vue-popperjs": "github:bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f",
     "vue-svg-loader": "0.17.0-beta.2"
+  },
+  "dependencies": {
+    "@primevue/themes": "4.0.0-rc.3",
+    "primevue": "4.0.0-rc.3"
   }
 }

package/vue.config.js

@@ -18,6 +18,9 @@ module.exports = {
 	css: {
 		extract: false,
 	},
+	configureWebpack: (config) => {
+		config.externals = [/^@?primevue\/.*$/];
+	},
 	chainWebpack: (config) => {
 		/**
 		 * These are some necessary steps changing the default webpack config of the Vue CLI