@bethinkpl/design-system 39.1.0 → 40.0.0

package/lib/js/components/Well/Well.spec.ts

@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest';
+import { ComponentMountingOptions, mount } from '@vue/test-utils';
+
+import Well from './Well.vue';
+import { WELL_RIBBON_POSITIONS } from './Well.consts';
+
+describe('Well', () => {
+	const createComponent = (options: ComponentMountingOptions<typeof Well> = {}) => {
+		return mount(Well, options);
+	};
+
+	it('should create', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-well').exists()).toBe(true);
+	});
+
+	it('should render default slot content', () => {
+		const content = 'Wpłynąlem na suchego przestwór oceanu';
+		const component = createComponent({
+			slots: { default: () => content },
+		});
+
+		expect(component.find('.ds-well__content').text()).toContain(content);
+	});
+
+	it('should not set no-radius class by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-well').classes()).not.toContain('-ds-noRadius');
+	});
+
+	it('should set no-radius class when hasRadius is false', () => {
+		const component = createComponent({
+			props: { hasRadius: false },
+		});
+
+		expect(component.find('.ds-well').classes()).toContain('-ds-noRadius');
+	});
+
+	it('should not set border class by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-well').classes()).not.toContain('-ds-hasBorder');
+	});
+
+	it('should set border class when hasBorder is true', () => {
+		const component = createComponent({
+			props: { hasBorder: true },
+		});
+
+		expect(component.find('.ds-well').classes()).toContain('-ds-hasBorder');
+	});
+
+	it('should not render a ribbon by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-well__ribbon').exists()).toBe(false);
+		expect(component.find('.ds-container-ribbon').exists()).toBe(false);
+	});
+
+	it('should render a horizontal ribbon for the top position', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, ribbonPosition: WELL_RIBBON_POSITIONS.TOP },
+		});
+
+		expect(component.find('.ds-container-ribbon').classes()).toContain('-ds-layout-horizontal');
+		expect(component.find('.ds-well').classes()).not.toContain('-ds-leftRibbon');
+	});
+
+	it('should render a vertical ribbon and left-ribbon class for the left position', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, ribbonPosition: WELL_RIBBON_POSITIONS.LEFT },
+		});
+
+		expect(component.find('.ds-container-ribbon').classes()).toContain('-ds-layout-vertical');
+		expect(component.find('.ds-well').classes()).toContain('-ds-leftRibbon');
+	});
+
+	it('should not give the ribbon a radius when the well is rounded', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRadius: true },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(false);
+		expect(component.find('.-ds-radius-right').exists()).toBe(false);
+	});
+
+	it('should give a top ribbon a bottom radius when the well is square', () => {
+		const component = createComponent({
+			props: {
+				hasRibbon: true,
+				hasRadius: false,
+				ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+			},
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(true);
+	});
+
+	it('should give a left ribbon a right radius when the well is square', () => {
+		const component = createComponent({
+			props: {
+				hasRibbon: true,
+				hasRadius: false,
+				ribbonPosition: WELL_RIBBON_POSITIONS.LEFT,
+			},
+		});
+
+		expect(component.find('.-ds-radius-right').exists()).toBe(true);
+	});
+});

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

@@ -2,7 +2,14 @@
 
 import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
 import Well from './Well.vue';
-import { WELL_COLORS, WELL_PADDINGS } from './Well.consts';
+import {
+	WELL_COLORS,
+	WELL_DEFAULT_COLOR,
+	WELL_PADDINGS,
+	WELL_RIBBON_COLORS,
+	WELL_RIBBON_POSITIONS,
+	WELL_RIBBON_SIZES,
+} from './Well.consts';
 import type { ComponentProps } from 'vue-component-type-helpers';
 import Chip, { CHIP_RADIUSES } from '../Chip';
 
@@ -27,6 +34,27 @@ const meta: Meta<WellProps> = {
 			control: 'select',
 			options: Object.values(WELL_COLORS),
 		},
+		hasRadius: {
+			control: 'boolean',
+		},
+		hasBorder: {
+			control: 'boolean',
+		},
+		hasRibbon: {
+			control: 'boolean',
+		},
+		ribbonPosition: {
+			control: 'select',
+			options: Object.values(WELL_RIBBON_POSITIONS),
+		},
+		ribbonSize: {
+			control: 'select',
+			options: Object.values(WELL_RIBBON_SIZES),
+		},
+		ribbonColor: {
+			control: 'select',
+			options: Object.values(WELL_RIBBON_COLORS),
+		},
 		content: {
 			control: 'text',
 		},
@@ -48,6 +76,13 @@ export const Interactive: Story = {
 		content:
 			'<h3 style="margin-top: 0">Content</h3>' +
 			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasRadius: true,
+		hasBorder: false,
+		hasRibbon: false,
+		ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+		ribbonColor: WELL_RIBBON_COLORS.NEUTRAL_HEAVY,
+		ribbonSize: WELL_RIBBON_SIZES.MEDIUM,
+		color: WELL_DEFAULT_COLOR,
 	} as Args,
 };
 
@@ -85,5 +120,59 @@ export const WithMultipleChips: Story = {
 	},
 	args: {
 		padding: WELL_PADDINGS.SMALL,
+		hasRadius: true,
+		hasBorder: false,
+		hasRibbon: false,
+		ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+		ribbonColor: WELL_RIBBON_COLORS.NEUTRAL_HEAVY,
+		ribbonSize: WELL_RIBBON_SIZES.MEDIUM,
+		color: WELL_DEFAULT_COLOR,
 	},
 };
+
+export const WithRibbon: Story = {
+	args: {
+		padding: WELL_PADDINGS.MEDIUM,
+		hasRibbon: true,
+		ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+		ribbonColor: WELL_RIBBON_COLORS.PRIMARY,
+		content:
+			'<h3 style="margin-top: 0">Content</h3>' +
+			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasRadius: true,
+		hasBorder: false,
+		color: WELL_DEFAULT_COLOR,
+	} as Args,
+};
+
+export const WithLeftRibbonNoRadius: Story = {
+	args: {
+		padding: WELL_PADDINGS.MEDIUM,
+		hasRadius: false,
+		hasRibbon: true,
+		ribbonPosition: WELL_RIBBON_POSITIONS.LEFT,
+		ribbonColor: WELL_RIBBON_COLORS.SUCCESS,
+		content:
+			'<h3 style="margin-top: 0">Content</h3>' +
+			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasBorder: false,
+		ribbonSize: WELL_RIBBON_SIZES.MEDIUM,
+		color: WELL_DEFAULT_COLOR,
+	} as Args,
+};
+
+export const WithBorder: Story = {
+	args: {
+		padding: WELL_PADDINGS.MEDIUM,
+		hasBorder: true,
+		color: WELL_COLORS.PRIMARY,
+		content:
+			'<h3 style="margin-top: 0">Content</h3>' +
+			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasRadius: true,
+		hasRibbon: false,
+		ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+		ribbonColor: WELL_RIBBON_COLORS.NEUTRAL_HEAVY,
+		ribbonSize: WELL_RIBBON_SIZES.MEDIUM,
+	} as Args,
+};

package/lib/js/components/Well/Well.vue

@@ -6,53 +6,136 @@
 			{
 				'-ds-medium': WELL_PADDINGS.MEDIUM === padding,
 				'-ds-small': WELL_PADDINGS.SMALL === padding,
+				'-ds-noRadius': !hasRadius,
+				'-ds-hasBorder': hasBorder,
+				'-ds-leftRibbon': hasRibbon && ribbonPosition === WELL_RIBBON_POSITIONS.LEFT,
 			},
 		]"
 	>
+		<div v-if="hasRibbon" class="ds-well__ribbon">
+			<ds-container-ribbon
+				:size="ribbonSize"
+				:color="ribbonColor"
+				:layout="ribbonLayout"
+				:radius="ribbonRadius"
+			/>
+		</div>
+
 		<div v-if="$slots.accessory" class="ds-well__accessorySlot">
 			<slot name="accessory" />
 		</div>
 
-		<slot />
+		<div class="ds-well__content">
+			<slot />
+		</div>
 	</div>
 </template>
 
 <style scoped lang="scss">
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/radiuses';
+@import '../../../styles/settings/borders';
 @import '../../../styles/settings/colors/tokens';
 
 .ds-well {
 	$root: &;
 
 	border-radius: $radius-m;
+	display: flex;
+	flex-direction: column;
 	position: relative;
 
+	&.-ds-noRadius {
+		border-radius: 0;
+	}
+
+	&.-ds-leftRibbon {
+		flex-direction: row;
+	}
+
+	// box-shadow is used instead of border so the border doesn't add to the well's size
+	&.-ds-hasBorder {
+		box-shadow: inset 0 0 0 $border-xs var(--ds-well-border-color);
+
+		// when the well is square it spans edge-to-edge, so only top/bottom rules are drawn
+		&.-ds-noRadius {
+			box-shadow:
+				inset 0 $border-xs 0 0 var(--ds-well-border-color),
+				inset 0 (-$border-xs) 0 0 var(--ds-well-border-color);
+		}
+	}
+
 	&.-ds-accent {
+		--ds-well-border-color: #{$color-accent-border-weak};
+
 		background-color: $color-accent-background;
 	}
 	&.-ds-primary {
+		--ds-well-border-color: #{$color-primary-border-weak};
+
 		background-color: $color-primary-background;
 	}
 	&.-ds-fail {
+		--ds-well-border-color: #{$color-fail-border-weak};
+
 		background-color: $color-fail-background;
 	}
 	&.-ds-info {
+		--ds-well-border-color: #{$color-info-border-weak};
+
 		background-color: $color-info-background;
 	}
 	&.-ds-inverted {
+		--ds-well-border-color: #{$color-neutral-border-weak};
+
 		background-color: $color-default-background;
 	}
 	&.-ds-neutral {
+		--ds-well-border-color: #{$color-neutral-border-weak};
+
 		background-color: $color-neutral-background;
 	}
 	&.-ds-success {
+		--ds-well-border-color: #{$color-success-border-weak};
+
 		background-color: $color-success-background;
 	}
 	&.-ds-warning {
+		--ds-well-border-color: #{$color-warning-border-weak};
+
 		background-color: $color-warning-background;
 	}
 
+	// the border container is added to avoid adding overflow hidden to the well itself
+	// which would clip the accessory slot rendered above its top edge
+	&__ribbon {
+		border-top-left-radius: $radius-m;
+		border-top-right-radius: $radius-m;
+		display: flex;
+		flex-shrink: 0;
+		overflow: hidden;
+
+		#{$root}.-ds-leftRibbon & {
+			border-bottom-left-radius: $radius-m;
+			border-top-left-radius: $radius-m;
+			border-top-right-radius: 0;
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+		}
+
+		#{$root}.-ds-noRadius & {
+			border-radius: 0;
+		}
+	}
+
+	&__content {
+		flex: 1;
+		// prevents excessive width due to child elements
+		min-width: 0;
+	}
+
 	&__accessorySlot {
 		display: flex;
 		gap: $space-2;
@@ -62,7 +145,9 @@
 	}
 
 	&.-ds-medium {
-		padding: $space-8;
+		#{$root}__content {
+			padding: $space-8;
+		}
 
 		#{$root}__accessorySlot {
 			right: $space-8;
@@ -70,7 +155,9 @@
 	}
 
 	&.-ds-small {
-		padding: $space-6;
+		#{$root}__content {
+			padding: $space-6;
+		}
 
 		#{$root}__accessorySlot {
 			right: $space-6;
@@ -81,17 +168,41 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+
+import DsContainerRibbon from '../ContainerRibbon/ContainerRibbon.vue';
+import { CONTAINER_RIBBON_LAYOUTS, CONTAINER_RIBBON_RADIUSES } from '../ContainerRibbon';
 import {
 	WELL_PADDINGS,
 	WELL_COLORS,
 	WELL_DEFAULT_COLOR,
+	WELL_RIBBON_POSITIONS,
 	WellPadding,
 	WellColor,
+	WellRibbonPosition,
+	WellRibbonSize,
+	WellRibbonColor,
+	WELL_RIBBON_SIZES,
+	WELL_RIBBON_COLORS,
 } from './Well.consts';
 
-const { padding = null, color = WELL_DEFAULT_COLOR } = defineProps<{
+const {
+	padding = null,
+	color = WELL_DEFAULT_COLOR,
+	hasRadius = true,
+	hasBorder = false,
+	hasRibbon = false,
+	ribbonPosition = WELL_RIBBON_POSITIONS.TOP,
+	ribbonSize = WELL_RIBBON_SIZES.MEDIUM,
+	ribbonColor = WELL_RIBBON_COLORS.NEUTRAL_HEAVY,
+} = defineProps<{
 	padding?: WellPadding | null;
 	color?: WellColor;
+	hasRadius?: boolean;
+	hasBorder?: boolean;
+	hasRibbon?: boolean;
+	ribbonPosition?: WellRibbonPosition;
+	ribbonSize?: WellRibbonSize;
+	ribbonColor?: WellRibbonColor;
 }>();
 
 const colorClass = computed(() => {
@@ -107,4 +218,24 @@ const colorClass = computed(() => {
 	};
 	return colorMap[color];
 });
+
+const ribbonLayout = computed(() => {
+	const layoutMap = {
+		[WELL_RIBBON_POSITIONS.TOP]: CONTAINER_RIBBON_LAYOUTS.HORIZONTAL,
+		[WELL_RIBBON_POSITIONS.LEFT]: CONTAINER_RIBBON_LAYOUTS.VERTICAL,
+	};
+	return layoutMap[ribbonPosition];
+});
+
+const ribbonRadius = computed(() => {
+	const ribbonPositionToRibbonRadiusMap = {
+		[WELL_RIBBON_POSITIONS.TOP]: CONTAINER_RIBBON_RADIUSES.BOTTOM,
+		[WELL_RIBBON_POSITIONS.LEFT]: CONTAINER_RIBBON_RADIUSES.RIGHT,
+	};
+	// when the well is rounded the outer corners are clipped by .ds-well__ribbon,
+	// so the ribbon only needs its own radius on the inner edge of a square well
+	return hasRadius
+		? CONTAINER_RIBBON_RADIUSES.NONE
+		: ribbonPositionToRibbonRadiusMap[ribbonPosition];
+});
 </script>

package/lib/js/icons/fontawesome.ts

@@ -69,6 +69,7 @@ import { faCode } from '@fortawesome/pro-regular-svg-icons/faCode';
 import { faCodeSimple } from '@fortawesome/pro-regular-svg-icons/faCodeSimple';
 import { faComment } from '@fortawesome/pro-regular-svg-icons/faComment';
 import { faCommentDots } from '@fortawesome/pro-regular-svg-icons/faCommentDots';
+import { faCommentPlus } from '@fortawesome/pro-regular-svg-icons/faCommentPlus';
 import { faComments } from '@fortawesome/pro-regular-svg-icons/faComments';
 import { faCompress } from '@fortawesome/pro-regular-svg-icons/faCompress';
 import { faCopy } from '@fortawesome/pro-regular-svg-icons/faCopy';
@@ -362,6 +363,7 @@ export const FONTAWESOME_ICONS = {
 	FA_CODE_SIMPLE: faCodeSimple,
 	FA_CODE: faCode,
 	FA_COMMENT_DOTS: faCommentDots,
+	FA_COMMENT_PLUS: faCommentPlus,
 	FA_COMMENT_SOLID: fasComment,
 	FA_COMMENT: faComment,
 	FA_COMMENTS_QUESTION_CHECK: faCommentsQuestionCheck,

package/lib/js/index.ts

@@ -1,3 +1,4 @@
+export { default as DsActionContent } from './components/ActionContent';
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar/Avatar.consts';
 export { default as Badge } from './components/Badge';
@@ -84,6 +85,7 @@ export * from './components/Headers/PageHeader/PageHeader.consts';
 export { default as SectionTitle } from './components/SectionTitle/SectionTitle.vue';
 export { default as DsSectionTitle } from './components/SectionTitle/SectionTitle.vue';
 export * from './components/SectionTitle/SectionTitle.consts';
+export { default as DsSpinnerLoading } from './components/SpinnerLoading/SpinnerLoading.vue';
 export { default as Drawer } from './components/Drawer';
 export { default as DsDrawer } from './components/Drawer';
 export * from './components/Drawer/Drawer.consts';

package/lib/js/utils/type.utils.ts

@@ -1 +1,17 @@
 export type Value<T extends {}> = T[keyof T];
+
+/**
+ * Marks a renamed/removed prop so any leftover usage fails type-checking.
+ *
+ * Using `never` directly inside `defineProps<{...}>()` breaks Vue's reactive
+ * props destructure inference, so this incompatible marker type is used instead:
+ * passing any real value (boolean, string, enum) to such a prop is a type error,
+ * and the message documents the migration.
+ *
+ * NOTE: the name `RemovedProp` is matched verbatim against the docgen `type.name`
+ * in `.storybook/disable-removed-props.ts` to hide these props from Storybook
+ * controls. Renaming this type requires updating that matcher too.
+ */
+export interface RemovedProp<TMessage extends string> {
+	__removed?: TMessage;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "39.1.0",
+  "version": "40.0.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -18,9 +18,9 @@
   ],
   "license": "UNLICENSED",
   "engines": {
-    "yarn": ">=1.22.1",
-    "npm": ">=6.0.0",
-    "node": "^16.13.0 || ^18.17.0 || ^20.9.0 || ^22.0.0 || ^24.0.0"
+    "yarn": "^4.17.0",
+    "npm": ">=11.5.1",
+    "node": "^24.5.0"
   },
   "scripts": {
     "build": "vite build",
@@ -61,7 +61,7 @@
     "@storybook/vue3": "^8.3.4",
     "@storybook/vue3-vite": "^8.3.4",
     "@types/lodash-es": "^4",
-    "@types/node": "^17.0.9",
+    "@types/node": "^24.0.0",
     "@typescript-eslint/eslint-plugin": "8.45.0",
     "@typescript-eslint/parser": "8.45.0",
     "@vee-validate/zod": "4.15.1",
@@ -122,5 +122,13 @@
     "vue": ">=3.5.0",
     "vue-i18n": ">=9.8.0"
   },
-  "packageManager": "yarn@4.11.0"
+  "dependenciesMeta": {
+    "esbuild": {
+      "built": true
+    },
+    "vue-demi": {
+      "built": true
+    }
+  },
+  "packageManager": "yarn@4.17.0"
 }