@bethinkpl/design-system 26.4.0 → 26.6.0

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

@@ -33,6 +33,10 @@ const StoryTemplate: StoryFn<typeof DsTextGroup> = (args) => ({
 			:skeleton-loading-size="skeletonLoadingSize"
 			:is-selected="isSelected"
 			:state="state"
+			:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
+			:is-supporting-text-tooltip-enabled-on-mobile="isSupportingTextTooltipEnabledOnMobile"
+			:is-supporting-text-tooltip-auto-filled-with-content="isSupportingTextTooltipAutoFilledWithContent"
+			:supporting-text-tooltip-content="supportingTextTooltipContent"
 		/>
 		<div style="margin-top: 100px; color: #888">
 			<ds-divider />
@@ -57,6 +61,10 @@ Interactive.args = {
 	skeletonLoadingSize: TEXT_GROUP_LOADING_SIZES.LARGE,
 	isSelected: false,
 	state: TEXT_GROUP_STATES.DEFAULT,
+	isSupportingTextTooltipEnabled: false,
+	isSupportingTextTooltipEnabledOnMobile: true,
+	isSupportingTextTooltipAutoFilledWithContent: true,
+	supportingTextTooltipContent: '',
 } as Args;
 
 Interactive.argTypes = {
@@ -103,6 +111,18 @@ Interactive.argTypes = {
 		control: 'select',
 		options: Object.values(TEXT_GROUP_STATES),
 	},
+	isSupportingTextTooltipEnabled: {
+		control: 'boolean',
+	},
+	isSupportingTextTooltipEnabledOnMobile: {
+		control: 'boolean',
+	},
+	isSupportingTextTooltipAutoFilledWithContent: {
+		control: 'boolean',
+	},
+	supportingTextTooltipContent: {
+		control: 'text',
+	},
 } as ArgTypes;
 
 Interactive.parameters = {

package/lib/js/components/TextGroup/TextGroup.vue

@@ -43,18 +43,33 @@
 			<span v-else-if="mainText === ''">&nbsp;</span>
 			<span v-else>{{ mainText }}</span>
 		</div>
-		<div
-			v-if="supportingText !== null"
-			class="ds-textGroup__supporting"
-			:class="{
-				'-ds-ellipsis': supportingTextEllipsis,
-			}"
-		>
+		<div v-if="supportingText !== null" class="ds-textGroup__supportingWrapper">
 			<div v-if="isLoading" class="ds-textGroup__skeletonWrapper">
 				<ds-skeleton width="100%" height="100%" />
 			</div>
 			<span v-else-if="supportingText === ''">&nbsp;</span>
-			<span v-else v-html="supportingText" />
+			<template v-else>
+				<ds-tooltip
+					class="ds-textGroup__supportingTooltip"
+					:text="
+						isSupportingTextTooltipAutoFilledWithContent
+							? supportingText
+							: supportingTextTooltipContent
+					"
+					:is-disabled="!isSupportingTextTooltipEnabled"
+					:is-hidden-on-mobile="!isSupportingTextTooltipEnabledOnMobile"
+					inline
+				>
+					<div
+						class="ds-textGroup__supporting"
+						:class="{
+							'-ds-ellipsis': supportingTextEllipsis,
+						}"
+					>
+						<span v-html="supportingText" />
+					</div>
+				</ds-tooltip>
+			</template>
 		</div>
 	</div>
 </template>
@@ -172,6 +187,16 @@ $text-group-colors: (
 		@include text-m-compact-bold;
 	}
 
+	&__supportingWrapper {
+		display: flex;
+	}
+
+	&__supportingTooltip {
+		display: inline-flex;
+		max-width: 100%;
+		overflow: hidden;
+	}
+
 	&__supporting {
 		@include text-s-compact-regular;
 	}
@@ -251,11 +276,13 @@ import {
 	TextGroupSize,
 	TextGroupState,
 } from './TextGroup.consts';
+import DsTooltip from '../Tooltip';
 
 export default defineComponent({
 	name: 'TextGroup',
 	components: {
 		DsSkeleton,
+		DsTooltip,
 	},
 	props: {
 		size: {
@@ -310,6 +337,22 @@ export default defineComponent({
 			type: String as PropType<TextGroupState>,
 			default: TEXT_GROUP_STATES.DEFAULT,
 		},
+		isSupportingTextTooltipEnabled: {
+			type: Boolean,
+			default: false,
+		},
+		isSupportingTextTooltipEnabledOnMobile: {
+			type: Boolean,
+			default: true,
+		},
+		isSupportingTextTooltipAutoFilledWithContent: {
+			type: Boolean,
+			default: true,
+		},
+		supportingTextTooltipContent: {
+			type: [String, null],
+			default: null,
+		},
 	},
 	data() {
 		return {

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

@@ -20,3 +20,29 @@ export const TILE_STATES = {
 } as const;
 
 export type TileStates = Value<typeof TILE_STATES>;
+
+export const TILE_BORDER_COLORS = {
+	NEUTRAL: 'neutral',
+	NEUTRAL_WEAK: 'neutralWeak',
+	PRIMARY: 'primary',
+	PRIMARY_WEAK: 'primaryWeak',
+	SUCCESS: 'success',
+	SUCCESS_WEAK: 'successWeak',
+	FAIL: 'fail',
+	FAIL_WEAK: 'failWeak',
+	DANGER: 'danger',
+	DANGER_WEAK: 'dangerWeak',
+	WARNING: 'warning',
+	WARNING_WEAK: 'warningWeak',
+	INFO: 'info',
+	INFO_WEAK: 'infoWeak',
+} as const;
+
+export type TileBorderColors = Value<typeof TILE_BORDER_COLORS>;
+
+export const TILE_ADDITIONAL_TEXT_MAX_WIDTHS = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+} as const;
+
+export type TileAdditionalTextMaxWidths = Value<typeof TILE_ADDITIONAL_TEXT_MAX_WIDTHS>;

package/lib/js/components/Tile/Tile.sb.shared.ts

@@ -1,8 +1,10 @@
 import { ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES } from './Tile.consts';
+import { TILE_BORDER_COLORS, TILE_COLORS, TILE_STATES } from './Tile.consts';
 import { Args, ArgTypes } from '@storybook/vue3';
+import DsBanner, { BANNER_COLORS } from '../Banner';
 
 export const template = (componentTag: string) => `
+<div style="display: flex; row-gap: 16px; flex-direction: column">
 		<${componentTag}
 			:additional-text="additionalText"
 			:color="color"
@@ -16,17 +18,45 @@ export const template = (componentTag: string) => `
 			:state="state"
 			:text-ellipsis="textEllipsis"
 			:text="text"
-			:has-border="hasBorder"
-		/>`;
+			:border-color="borderColor"
+		/>
+		<ds-banner :color="BANNER_COLORS.WARNING" title="Taka kombinacja koloru komponentu z kolorem bordera jest niezgodna z design systemem!" v-if="borderColor && !allowedColorsToBorderColorsMap[color].includes(borderColor)" />
+</div>
+`;
 
 export const data = () => ({
 	ICONS: Object.freeze(ICONS),
+	BANNER_COLORS: Object.freeze(BANNER_COLORS),
+	allowedColorsToBorderColorsMap: {
+		[TILE_COLORS.NEUTRAL]: [
+			TILE_BORDER_COLORS.NEUTRAL,
+			TILE_BORDER_COLORS.NEUTRAL_WEAK,
+			TILE_BORDER_COLORS.PRIMARY,
+			TILE_BORDER_COLORS.PRIMARY_WEAK,
+		],
+		[TILE_COLORS.NEUTRAL_WEAK]: [
+			TILE_BORDER_COLORS.NEUTRAL,
+			TILE_BORDER_COLORS.NEUTRAL_WEAK,
+			TILE_BORDER_COLORS.PRIMARY,
+			TILE_BORDER_COLORS.PRIMARY_WEAK,
+		],
+		[TILE_COLORS.PRIMARY]: [TILE_BORDER_COLORS.PRIMARY, TILE_BORDER_COLORS.PRIMARY_WEAK],
+		[TILE_COLORS.SUCCESS]: [TILE_BORDER_COLORS.SUCCESS, TILE_BORDER_COLORS.SUCCESS_WEAK],
+		[TILE_COLORS.FAIL]: [TILE_BORDER_COLORS.FAIL, TILE_BORDER_COLORS.FAIL_WEAK],
+		[TILE_COLORS.DANGER]: [TILE_BORDER_COLORS.DANGER, TILE_BORDER_COLORS.DANGER_WEAK],
+		[TILE_COLORS.WARNING]: [TILE_BORDER_COLORS.WARNING, TILE_BORDER_COLORS.WARNING_WEAK],
+		[TILE_COLORS.INFO]: [TILE_BORDER_COLORS.INFO, TILE_BORDER_COLORS.INFO_WEAK],
+	},
 });
 
+export const components = {
+	DsBanner,
+};
+
 export const args = {
 	interactive: true,
 	color: TILE_COLORS.NEUTRAL,
-	hasBorder: false,
+	borderColor: null,
 	iconLeft: null,
 	iconRight: null,
 	isIconRightHiddenOnMobile: false,
@@ -52,6 +82,10 @@ export const argTypes = {
 		control: 'select',
 		options: [...Object.values(TILE_COLORS)],
 	},
+	borderColor: {
+		control: 'select',
+		options: [null, ...Object.values(TILE_BORDER_COLORS)],
+	},
 	state: {
 		control: 'select',
 		options: [...Object.values(TILE_STATES)],

package/lib/js/components/Tile/Tile.shared.ts

@@ -1,6 +1,14 @@
 import { PropType, toRaw } from 'vue';
 import { ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES, TileColors, TileStates } from './Tile.consts';
+import {
+	TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
+	TILE_COLORS,
+	TILE_STATES,
+	TileAdditionalTextMaxWidths,
+	TileBorderColors,
+	TileColors,
+	TileStates,
+} from './Tile.consts';
 import { Value } from '../../utils/type.utils';
 
 export const props = {
@@ -64,8 +72,15 @@ export const props = {
 		type: Boolean,
 		default: true,
 	},
-	hasBorder: {
-		type: Boolean,
-		default: false,
+	borderColor: {
+		type: String as PropType<TileBorderColors>,
+		default: null,
+	},
+	additionalTextMaxWidth: {
+		type: String as PropType<TileAdditionalTextMaxWidths>,
+		default: TILE_ADDITIONAL_TEXT_MAX_WIDTHS.SMALL,
+		validator(value: TileAdditionalTextMaxWidths) {
+			return Object.values(TILE_ADDITIONAL_TEXT_MAX_WIDTHS).includes(value);
+		},
 	},
 };

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

@@ -4,7 +4,7 @@ import Tile from './Tile.vue';
 import { TILE_STATES } from './Tile.consts';
 
 import type { Args, Meta, StoryObj } from '@storybook/vue3';
-import { args, argTypes, data, template } from './Tile.sb.shared';
+import { args, argTypes, components, data, template } from './Tile.sb.shared';
 import type { ComponentProps } from 'vue-component-type-helpers';
 import { withActions } from '@storybook/addon-actions/decorator';
 
@@ -15,7 +15,7 @@ const meta: Meta<TileProps> = {
 	component: Tile,
 	decorators: [withActions],
 	render: (args) => ({
-		components: { Tile },
+		components: { ...components, Tile },
 		setup() {
 			return args;
 		},

package/lib/js/components/Tile/Tile.vue

@@ -3,7 +3,10 @@
 		:class="[
 			tileColor,
 			tileState,
-			{ '-ds-interactive': interactive, '-ds-hasBorder': hasBorder },
+			{
+				'-ds-interactive': interactive,
+				[`-ds-border-${borderColor}`]: borderColor !== null,
+			},
 		]"
 		class="ds-tile"
 	>
@@ -39,7 +42,16 @@
 			:icon="iconRight"
 			:size="ICON_SIZES.SMALL"
 		/>
-		<div v-else-if="additionalText" class="ds-tile__additionalText">
+		<div
+			v-else-if="additionalText"
+			class="ds-tile__additionalText"
+			:class="{
+				'-ds-max-width-small':
+					additionalTextMaxWidth === TILE_ADDITIONAL_TEXT_MAX_WIDTHS.SMALL,
+				'-ds-max-width-medium':
+					additionalTextMaxWidth === TILE_ADDITIONAL_TEXT_MAX_WIDTHS.MEDIUM,
+			}"
+		>
 			{{ additionalText }}
 		</div>
 	</div>
@@ -54,21 +66,76 @@
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/typography/tokens';
 
+$tile-border-colors: (
+	'neutral': (
+		'default': $color-neutral-border,
+		'disabled': $color-neutral-border-disabled,
+	),
+	'neutralWeak': (
+		'default': $color-neutral-border-weak,
+		'disabled': $color-neutral-border-weak-disabled,
+	),
+	'primary': (
+		'default': $color-primary-border,
+		'disabled': $color-primary-border-disabled,
+	),
+	'primaryWeak': (
+		'default': $color-primary-border-weak,
+		'disabled': $color-primary-border-weak-disabled,
+	),
+	'success': (
+		'default': $color-success-border,
+		'disabled': $color-success-border-disabled,
+	),
+	'successWeak': (
+		'default': $color-success-border-weak,
+		'disabled': $color-success-border-weak-disabled,
+	),
+	'fail': (
+		'default': $color-fail-border,
+		'disabled': $color-fail-border-disabled,
+	),
+	'failWeak': (
+		'default': $color-fail-border-weak,
+		'disabled': $color-fail-border-weak-disabled,
+	),
+	'danger': (
+		'default': $color-danger-border,
+		'disabled': $color-danger-border-disabled,
+	),
+	'dangerWeak': (
+		'default': $color-danger-border-weak,
+		'disabled': $color-danger-border-weak-disabled,
+	),
+	'warning': (
+		'default': $color-warning-border,
+		'disabled': $color-warning-border-disabled,
+	),
+	'warningWeak': (
+		'default': $color-warning-border-weak,
+		'disabled': $color-warning-border-weak-disabled,
+	),
+	'info': (
+		'default': $color-info-border,
+		'disabled': $color-info-border-disabled,
+	),
+	'infoWeak': (
+		'default': $color-info-border-weak,
+		'disabled': $color-info-border-weak-disabled,
+	),
+);
+
 $tile-colors: (
 	'neutral': (
 		'default': (
 			'background': $color-neutral-background,
 			'background-hover': $color-neutral-background-hovered,
-			'border': $color-neutral-border,
-			'border-interactive': $color-primary-border,
 			'eyebrow-text': $color-neutral-text-weak,
 			'icon': $color-neutral-icon,
 			'icon-interactive': $color-primary-icon,
 		),
 		'disabled': (
 			'background': $color-neutral-background-disabled,
-			'border': $color-neutral-border-disabled,
-			'border-interactive': $color-primary-border-disabled,
 			'eyebrow-text': $color-neutral-text-weak-disabled,
 			'icon': $color-neutral-icon-disabled,
 			'icon-interactive': $color-primary-icon-disabled,
@@ -78,16 +145,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-neutral-background-weak,
 			'background-hover': $color-neutral-background-weak-hovered,
-			'border': $color-neutral-border,
-			'border-interactive': $color-primary-border,
 			'eyebrow-text': $color-neutral-text-weak,
 			'icon': $color-neutral-icon,
 			'icon-interactive': $color-primary-icon,
 		),
 		'disabled': (
 			'background': $color-neutral-background-weak-disabled,
-			'border': $color-neutral-border-disabled,
-			'border-interactive': $color-primary-border-disabled,
 			'eyebrow-text': $color-neutral-text-weak-disabled,
 			'icon': $color-neutral-icon-disabled,
 			'icon-interactive': $color-primary-icon-disabled,
@@ -97,16 +160,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-primary-background,
 			'background-hover': $color-primary-background-hovered,
-			'border': $color-primary-border,
-			'border-interactive': $color-primary-border,
 			'eyebrow-text': $color-primary-text,
 			'icon': $color-primary-icon,
 			'icon-interactive': $color-primary-icon,
 		),
 		'disabled': (
 			'background': $color-primary-background-disabled,
-			'border': $color-primary-border-disabled,
-			'border-interactive': $color-primary-border-disabled,
 			'eyebrow-text': $color-primary-text-disabled,
 			'icon': $color-primary-icon-disabled,
 			'icon-interactive': $color-primary-icon-disabled,
@@ -116,16 +175,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-success-background,
 			'background-hover': $color-success-background-hovered,
-			'border': $color-success-border,
-			'border-interactive': $color-success-border,
 			'eyebrow-text': $color-success-text,
 			'icon': $color-success-icon,
 			'icon-interactive': $color-success-icon,
 		),
 		'disabled': (
 			'background': $color-success-background-disabled,
-			'border': $color-success-border-disabled,
-			'border-interactive': $color-success-border-disabled,
 			'eyebrow-text': $color-success-text-disabled,
 			'icon': $color-success-icon-disabled,
 			'icon-interactive': $color-success-icon-disabled,
@@ -135,16 +190,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-fail-background,
 			'background-hover': $color-fail-background-hovered,
-			'border': $color-fail-border,
-			'border-interactive': $color-fail-border,
 			'eyebrow-text': $color-fail-text,
 			'icon': $color-fail-icon,
 			'icon-interactive': $color-fail-icon,
 		),
 		'disabled': (
 			'background': $color-fail-background-disabled,
-			'border': $color-fail-border-disabled,
-			'border-interactive': $color-fail-border-disabled,
 			'eyebrow-text': $color-fail-text-disabled,
 			'icon': $color-fail-icon-disabled,
 			'icon-interactive': $color-fail-icon-disabled,
@@ -154,16 +205,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-danger-background,
 			'background-hover': $color-danger-background-hovered,
-			'border': $color-danger-border,
-			'border-interactive': $color-danger-border,
 			'eyebrow-text': $color-danger-text,
 			'icon': $color-danger-icon,
 			'icon-interactive': $color-danger-icon,
 		),
 		'disabled': (
 			'background': $color-danger-background-disabled,
-			'border': $color-danger-border-disabled,
-			'border-interactive': $color-danger-border-disabled,
 			'eyebrow-text': $color-danger-text-disabled,
 			'icon': $color-danger-icon-disabled,
 			'icon-interactive': $color-danger-icon-disabled,
@@ -173,16 +220,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-warning-background,
 			'background-hover': $color-warning-background-hovered,
-			'border': $color-warning-border,
-			'border-interactive': $color-warning-border,
 			'eyebrow-text': $color-warning-text,
 			'icon': $color-warning-icon,
 			'icon-interactive': $color-warning-icon,
 		),
 		'disabled': (
 			'background': $color-warning-background-disabled,
-			'border': $color-warning-border-disabled,
-			'border-interactive': $color-warning-border-disabled,
 			'eyebrow-text': $color-warning-text-disabled,
 			'icon': $color-warning-icon-disabled,
 			'icon-interactive': $color-warning-icon-disabled,
@@ -192,16 +235,12 @@ $tile-colors: (
 		'default': (
 			'background': $color-info-background,
 			'background-hover': $color-info-background-hovered,
-			'border': $color-info-border,
-			'border-interactive': $color-info-border,
 			'eyebrow-text': $color-info-text,
 			'icon': $color-info-icon,
 			'icon-interactive': $color-info-icon,
 		),
 		'disabled': (
 			'background': $color-info-background-disabled,
-			'border': $color-info-border-disabled,
-			'border-interactive': $color-info-border-disabled,
 			'eyebrow-text': $color-info-text-disabled,
 			'icon': $color-info-icon-disabled,
 			'icon-interactive': $color-info-icon-disabled,
@@ -212,10 +251,6 @@ $tile-colors: (
 @mixin setColors($root, $color-map) {
 	background-color: map-get($color-map, 'background');
 
-	&.-ds-hasBorder {
-		outline: $border-xs solid map-get($color-map, 'border');
-	}
-
 	#{$root}__eyebrowText {
 		color: map-get($color-map, 'eyebrow-text');
 	}
@@ -226,10 +261,6 @@ $tile-colors: (
 	}
 
 	&.-ds-interactive {
-		&.-ds-hasBorder {
-			outline: $border-xs solid map-get($color-map, 'border-interactive');
-		}
-
 		#{$root}__iconRight {
 			color: map-get($color-map, 'icon-interactive');
 		}
@@ -255,6 +286,16 @@ $tile-colors: (
 		}
 	}
 
+	@each $border-color-name, $border-color-map in $tile-border-colors {
+		&.-ds-border-#{$border-color-name} {
+			outline: $border-xs solid map-get($border-color-map, 'default');
+
+			&.-ds-disabled {
+				outline: $border-xs solid map-get($border-color-map, 'disabled');
+			}
+		}
+	}
+
 	align-items: center;
 	border-radius: $radius-s;
 	display: flex;
@@ -283,8 +324,15 @@ $tile-colors: (
 		color: $color-neutral-text;
 		flex-grow: 1;
 		margin-left: $space-xs;
-		max-width: 30%;
 		text-align: right;
+
+		&.-ds-max-width-small {
+			max-width: 30%;
+		}
+
+		&.-ds-max-width-medium {
+			max-width: 50%;
+		}
 	}
 
 	&__center {
@@ -346,7 +394,7 @@ $tile-colors: (
 
 <script lang="ts">
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES } from './Tile.consts';
+import { TILE_ADDITIONAL_TEXT_MAX_WIDTHS, TILE_COLORS, TILE_STATES } from './Tile.consts';
 import { props } from './Tile.shared';
 import { defineComponent } from 'vue';
 
@@ -361,6 +409,7 @@ export default defineComponent({
 			ICONS: Object.freeze(ICONS),
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 			TILE_STATES: Object.freeze(TILE_STATES),
+			TILE_ADDITIONAL_TEXT_MAX_WIDTHS: Object.freeze(TILE_ADDITIONAL_TEXT_MAX_WIDTHS),
 		};
 	},
 	computed: {

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

@@ -9,6 +9,7 @@
 
 <style lang="scss">
 @import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/media-queries';
 
 .ds-tooltip-text {
 	@include text-s-compact-bold;
@@ -17,6 +18,14 @@
 .ds-tooltip-arrow-hide {
 	display: none;
 }
+
+.ds-tooltip-hide-on-mobile {
+	display: none !important;
+
+	@media #{breakpoint-l()} {
+		display: inline-block !important;
+	}
+}
 </style>
 
 <script lang="ts">
@@ -50,6 +59,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		isHiddenOnMobile: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		tooltipParams() {
@@ -68,8 +81,9 @@ export default defineComponent({
 					background: 'var(--neutral-background-medium, #E5E7ED)',
 					color: 'var(--neutral-text-heavy, #343C50)',
 					borderRadius: '4px',
-					maxWidth: '240px',
+					maxWidth: '900px',
 				},
+				class: this.isHiddenOnMobile ? 'ds-tooltip-hide-on-mobile' : null,
 				ptOptions: {
 					mergeProps: true,
 				},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.4.0",
+  "version": "26.6.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",

package/docs/assets/BasicRichListItem-VxP1mYya.js

@@ -1 +0,0 @@
-import{i as y,R as r,c as l,b as u,a as t,d as v,e as d,f as b}from"./GroupRichListItem-DEqhXKuF.js";import{D as T,T as p,c as n}from"./TextGroup-C6PK25ok.js";import{d as S,t as g,b as E,h as L,e as s,n as R,r as f,o as C,f as i,a as h,k as O}from"./vue.esm-bundler-CWlcb7ht.js";import{I as _,c as D}from"./Icon-ChGia3n4.js";import{_ as M}from"./_plugin-vue_export-helper-DlAUqK2U.js";const m=S({name:"BasicRichListItem",components:{DsTextGroup:T,RichListItem:y},props:{type:{type:String,default:r.DEFAULT,validator(e){return Object.values(r).includes(e)}},state:{type:String,default:l.DEFAULT,validator(e){return Object.values(l).includes(e)}},layout:{type:String,default:u.HORIZONTAL,validator(e){return Object.values(u).includes(e)}},size:{type:String,default:t.MEDIUM,validator(e){return Object.values(t).includes(e)}},isInteractive:{type:Boolean,default:!0},isDimmed:{type:Boolean,default:!1},isDraggable:{type:Boolean,default:!0},icon:{type:Object,default:null,validator(e){return Object.values(_).includes(g(e))}},iconColor:{type:String,default:null,validator(e){return Object.values(D).includes(e)}},iconColorHex:{type:String,default:null},borderColor:{type:String,default:null,validator(e){return Object.values(v).includes(e)}},borderColorHex:{type:String,default:null},text:{type:String,required:!0},textEllipsis:{type:Boolean,default:!1},eyebrow:{type:String,default:null},eyebrowEllipsis:{type:Boolean,default:!1},isEyebrowUppercase:{type:Boolean,default:!1},supportingText:{type:String,default:null},supportingTextEllipsis:{type:Boolean,default:!1},backgroundColor:{type:String,default:d.NEUTRAL,validator(e){return Object.values(d).includes(e)}},elevation:{type:String,default:null,validator(e){return Object.values(b).includes(e)}},hasDraggableHandler:{type:Boolean,default:!0},hasActionsSlotDivider:{type:Boolean,default:!0},isSelectable:{type:Boolean,default:!0},isSelected:{type:Boolean,default:!1}},emits:{"update:is-selected":e=>!0},data(){return{hovered:!1,RICH_LIST_ITEM_SIZE:Object.freeze(t),RICH_LIST_ITEM_STATE:Object.freeze(l)}},computed:{textGroupSize(){return{[t.SMALL]:p.SMALL,[t.MEDIUM]:p.MEDIUM}[this.size]},textGroupState(){return this.state===l.LOADING?n.LOADING:this.hovered&&this.isInteractive?n.HOVERED:n.DEFAULT}}}),A={class:"ds-basicRichListItem__content"};function H(e,a,V,B,U,w){const c=f("ds-text-group"),I=f("rich-list-item");return C(),E(I,{size:e.size,type:e.type,layout:e.layout,"is-interactive":e.isInteractive,"is-draggable":e.isDraggable,icon:e.icon,"icon-color":e.iconColor,"icon-color-hex":e.iconColorHex,"is-dimmed":e.isDimmed,"border-color":e.borderColor,"border-color-hex":e.borderColorHex,state:e.state,"background-color":e.backgroundColor,elevation:e.elevation,"has-draggable-handler":e.hasDraggableHandler,"has-actions-slot-divider":e.hasActionsSlotDivider,"is-selectable":e.isSelectable,"is-selected":e.isSelected,class:R(["ds-basicRichListItem",{"-ds-loading":e.state===e.RICH_LIST_ITEM_STATE.LOADING,"-ds-small":e.size===e.RICH_LIST_ITEM_SIZE.SMALL}]),onMouseover:a[0]||(a[0]=o=>e.hovered=!0),onMouseleave:a[1]||(a[1]=o=>e.hovered=!1),"onUpdate:isSelected":a[2]||(a[2]=o=>e.$emit("update:is-selected",o))},L({content:s(()=>[h("div",A,[O(c,{"eyebrow-text":e.eyebrow,"eyebrow-text-ellipsis":e.eyebrowEllipsis,"is-eyebrow-text-uppercase":e.isEyebrowUppercase,"is-selected":e.isSelected,"is-interactive":!1,"main-text":e.text,"main-text-ellipsis":e.textEllipsis,"supporting-text":e.supportingText,"supporting-text-ellipsis":e.supportingTextEllipsis,size:e.textGroupSize,state:e.textGroupState},null,8,["eyebrow-text","eyebrow-text-ellipsis","is-eyebrow-text-uppercase","is-selected","main-text","main-text-ellipsis","supporting-text","supporting-text-ellipsis","size","state"])])]),_:2},[e.$slots.media?{name:"media",fn:s(()=>[i(e.$slots,"media",{},void 0,!0)]),key:"0"}:void 0,e.$slots.metadata?{name:"metadata",fn:s(()=>[i(e.$slots,"metadata",{},void 0,!0)]),key:"1"}:void 0,e.$slots.actions?{name:"actions",fn:s(()=>[i(e.$slots,"actions",{},void 0,!0)]),key:"2"}:void 0]),1032,["size","type","layout","is-interactive","is-draggable","icon","icon-color","icon-color-hex","is-dimmed","border-color","border-color-hex","state","background-color","elevation","has-draggable-handler","has-actions-slot-divider","is-selectable","is-selected","class"])}const G=M(m,[["render",H],["__scopeId","data-v-d2d3c19f"]]);m.__docgenInfo={displayName:"BasicRichListItem",exportName:"default",description:"",tags:{},props:[{name:"type",type:{name:"RichListItemType"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_TYPE.DEFAULT"}},{name:"state",type:{name:"RichListItemState"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_STATE.DEFAULT"}},{name:"layout",type:{name:"RichListItemLayout"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_LAYOUT.HORIZONTAL"}},{name:"size",type:{name:"RichListItemSize"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_SIZE.MEDIUM"}},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isDimmed",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isDraggable",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"icon",type:{name:"IconItem"},defaultValue:{func:!1,value:"null"}},{name:"iconColor",type:{name:"IconColor"},defaultValue:{func:!1,value:"null"}},{name:"iconColorHex",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"borderColor",type:{name:"RichListItemBorderColor"},defaultValue:{func:!1,value:"null"}},{name:"borderColorHex",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"text",type:{name:"string"},required:!0},{name:"textEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"eyebrow",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"eyebrowEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isEyebrowUppercase",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"supportingText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"supportingTextEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"backgroundColor",type:{name:"RichListItemBackgroundColor"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL"}},{name:"elevation",type:{name:"RichListItemElevation"},defaultValue:{func:!1,value:"null"}},{name:"hasDraggableHandler",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"hasActionsSlotDivider",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isSelectable",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"update:is-selected"}],slots:[{name:"media"},{name:"metadata"},{name:"actions"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue"]};export{G as B};