@bethinkpl/design-system 35.2.3 → 36.0.0

package/dist/lib/js/components/Well/Well.consts.d.ts

@@ -1,7 +1,19 @@
 import { Value } from '../../utils/type.utils';
 
 export declare const WELL_PADDINGS: {
-    SMALL: string;
-    MEDIUM: string;
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
 };
 export type WellPadding = Value<typeof WELL_PADDINGS>;
+export declare const WELL_COLORS: {
+    readonly ACCENT: "accent";
+    readonly PRIMARY: "primary";
+    readonly FAIL: "fail";
+    readonly INFO: "info";
+    readonly INVERTED: "inverted";
+    readonly NEUTRAL: "neutral";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+};
+export type WellColor = Value<typeof WELL_COLORS>;
+export declare const WELL_DEFAULT_COLOR: "neutral";

package/dist/lib/js/components/Well/Well.vue.d.ts

@@ -1,30 +1,15 @@
-import { WellPadding } from './Well.consts';
-import { ChipRadius, ChipColor } from '../Chip';
-import { IconItem } from '../Icons/Icon';
+import { WellPadding, WellColor } from './Well.consts';
 
 declare function __VLS_template(): {
     accessory?(_: {}): any;
-    chipAccessory?(_: {}): any;
     default?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    padding?: WellPadding;
-    hasChip?: boolean;
-    chipLabel?: string;
-    chipLabelUppercase?: boolean;
-    chipLeftIcon?: IconItem;
-    chipRadius?: ChipRadius;
-    chipColor?: ChipColor;
-    chipColorHex?: string;
+    padding?: WellPadding | null;
+    color?: WellColor;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    padding?: WellPadding;
-    hasChip?: boolean;
-    chipLabel?: string;
-    chipLabelUppercase?: boolean;
-    chipLeftIcon?: IconItem;
-    chipRadius?: ChipRadius;
-    chipColor?: ChipColor;
-    chipColorHex?: string;
+    padding?: WellPadding | null;
+    color?: WellColor;
 }>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

@@ -3,6 +3,21 @@ import { Value } from '../../utils/type.utils';
 export const WELL_PADDINGS = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
-};
+} as const;
 
 export type WellPadding = Value<typeof WELL_PADDINGS>;
+
+export const WELL_COLORS = {
+	ACCENT: 'accent',
+	PRIMARY: 'primary',
+	FAIL: 'fail',
+	INFO: 'info',
+	INVERTED: 'inverted',
+	NEUTRAL: 'neutral',
+	SUCCESS: 'success',
+	WARNING: 'warning',
+} as const;
+
+export type WellColor = Value<typeof WELL_COLORS>;
+
+export const WELL_DEFAULT_COLOR = WELL_COLORS.NEUTRAL;

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

@@ -2,47 +2,31 @@
 
 import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
 import Well from './Well.vue';
-import { WELL_PADDINGS } from './Well.consts';
+import { WELL_COLORS, WELL_PADDINGS } from './Well.consts';
 import type { ComponentProps } from 'vue-component-type-helpers';
-import { ICONS } from '../Icons/Icon';
-import Chip, { CHIP_COLORS, CHIP_DEFAULT_COLOR, CHIP_RADIUSES } from '../Chip';
-import DsBanner, { BANNER_COLORS } from '../Banner';
+import Chip, { CHIP_RADIUSES } from '../Chip';
 
 type WellProps = ComponentProps<typeof Well>;
 
-function wrapWithContainer(template: string): string {
-	// line-height: 0; is to remove extra space below the badge (as it's an inline element)
-	return `<div style="display: inline-flex; flex-direction: column; width: 100%; gap: 20px;">${template}
-<ds-banner :color="BANNER_COLORS.WARNING" title="Taka kombinacja jest niezgodna z design systemem!" v-if="invalidUsage" /></div>
-`;
-}
-
 const meta: Meta<WellProps> = {
 	title: 'Components/Well',
 	component: Well,
 	render: (args) => ({
-		components: { Well, DsBanner },
+		components: { Well },
 		setup() {
-			return {
-				args,
-				ICONS,
-				BANNER_COLORS,
-			};
-		},
-		template: wrapWithContainer(
-			'<well v-bind="args" :chip-left-icon="ICONS[args.chipLeftIcon]"><div v-html="args.content" /></well>',
-		),
-		computed: {
-			invalidUsage() {
-				return args.hasChip && !args.padding;
-			},
+			return { args };
 		},
+		template: '<well v-bind="args"><div v-html="args.content" /></well>',
 	}),
 	argTypes: {
 		padding: {
 			control: 'select',
 			options: [null, ...Object.values(WELL_PADDINGS)],
 		},
+		color: {
+			control: 'select',
+			options: Object.values(WELL_COLORS),
+		},
 		content: {
 			control: 'text',
 		},
@@ -64,33 +48,9 @@ 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.',
-		hasChip: false,
-		chipLabel: 'Chip z labelem',
-		chipLabelUppercase: false,
-		chipLeftIcon: null,
-		chipRadius: CHIP_RADIUSES.ROUNDED,
-		color: CHIP_DEFAULT_COLOR,
-		colorHex: '',
 	} as Args,
 };
 
-const argTypes = {
-	chipLeftIcon: {
-		control: 'select',
-		options: [null, ...Object.keys(ICONS)],
-	},
-	chipColor: {
-		control: 'select',
-		options: Object.values(CHIP_COLORS),
-	},
-	chipRadius: {
-		control: 'select',
-		options: Object.values(CHIP_RADIUSES),
-	},
-} as ArgTypes;
-
-Interactive.argTypes = argTypes;
-
 export const WithMultipleChips: Story = {
 	render: (args) => {
 		return {
@@ -127,5 +87,3 @@ export const WithMultipleChips: Story = {
 		padding: WELL_PADDINGS.SMALL,
 	},
 };
-
-WithMultipleChips.argTypes = argTypes;

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

@@ -1,26 +1,16 @@
 <template>
 	<div
 		class="ds-well"
-		:class="{
-			'-ds-medium': WELL_PADDINGS.MEDIUM === padding,
-			'-ds-small': WELL_PADDINGS.SMALL === padding,
-		}"
+		:class="[
+			colorClass,
+			{
+				'-ds-medium': WELL_PADDINGS.MEDIUM === padding,
+				'-ds-small': WELL_PADDINGS.SMALL === padding,
+			},
+		]"
 	>
-		<div v-if="hasChip || $slots.accessory" class="ds-well__accessorySlot">
-			<slot name="accessory">
-				<chip
-					:label="chipLabel"
-					:is-label-uppercase="chipLabelUppercase"
-					:left-icon="chipLeftIcon"
-					:radius="chipRadius"
-					:color="chipColor"
-					:color-hex="chipColorHex"
-				>
-					<template v-if="$slots.chipAccessory" #accessory>
-						<slot name="chipAccessory" />
-					</template>
-				</chip>
-			</slot>
+		<div v-if="$slots.accessory" class="ds-well__accessorySlot">
+			<slot name="accessory" />
 		</div>
 
 		<slot />
@@ -35,10 +25,34 @@
 .ds-well {
 	$root: &;
 
-	background-color: $color-neutral-background;
 	border-radius: $radius-m;
 	position: relative;
 
+	&.-ds-accent {
+		background-color: $color-accent-background;
+	}
+	&.-ds-primary {
+		background-color: $color-primary-background;
+	}
+	&.-ds-fail {
+		background-color: $color-fail-background;
+	}
+	&.-ds-info {
+		background-color: $color-info-background;
+	}
+	&.-ds-inverted {
+		background-color: $color-default-background;
+	}
+	&.-ds-neutral {
+		background-color: $color-neutral-background;
+	}
+	&.-ds-success {
+		background-color: $color-success-background;
+	}
+	&.-ds-warning {
+		background-color: $color-warning-background;
+	}
+
 	&__accessorySlot {
 		display: flex;
 		gap: $space-4xs;
@@ -66,27 +80,31 @@
 </style>
 
 <script lang="ts" setup>
-import { WELL_PADDINGS, WellPadding } from './Well.consts';
-import Chip, { CHIP_DEFAULT_COLOR, CHIP_RADIUSES, ChipRadius, ChipColor } from '../Chip';
-import { IconItem } from '../Icons/Icon';
+import { computed } from 'vue';
+import {
+	WELL_PADDINGS,
+	WELL_COLORS,
+	WELL_DEFAULT_COLOR,
+	WellPadding,
+	WellColor,
+} from './Well.consts';
 
-const {
-	padding = null,
-	hasChip = false,
-	chipLabel,
-	chipLabelUppercase = false,
-	chipLeftIcon = null,
-	chipRadius = CHIP_RADIUSES.ROUNDED,
-	chipColor = CHIP_DEFAULT_COLOR,
-	chipColorHex,
-} = defineProps<{
-	padding?: WellPadding;
-	hasChip?: boolean;
-	chipLabel?: string;
-	chipLabelUppercase?: boolean;
-	chipLeftIcon?: IconItem;
-	chipRadius?: ChipRadius;
-	chipColor?: ChipColor;
-	chipColorHex?: string;
+const { padding = null, color = WELL_DEFAULT_COLOR } = defineProps<{
+	padding?: WellPadding | null;
+	color?: WellColor;
 }>();
+
+const colorClass = computed(() => {
+	const colorMap: Record<WellColor, string> = {
+		[WELL_COLORS.ACCENT]: '-ds-accent',
+		[WELL_COLORS.PRIMARY]: '-ds-primary',
+		[WELL_COLORS.FAIL]: '-ds-fail',
+		[WELL_COLORS.INFO]: '-ds-info',
+		[WELL_COLORS.INVERTED]: '-ds-inverted',
+		[WELL_COLORS.NEUTRAL]: '-ds-neutral',
+		[WELL_COLORS.SUCCESS]: '-ds-success',
+		[WELL_COLORS.WARNING]: '-ds-warning',
+	};
+	return colorMap[color];
+});
 </script>

package/package.json

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