@bethinkpl/design-system 34.0.4 → 34.0.5

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

@@ -14,8 +14,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     colorHex?: string | null;
     state?: ChipState;
     isRemovable?: boolean;
+    isInteractive?: boolean;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     remove: () => void;
+    chipClick: (event: Event) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     label?: string | null;
     isLabelUppercase?: boolean;
@@ -26,8 +28,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     colorHex?: string | null;
     state?: ChipState;
     isRemovable?: boolean;
+    isInteractive?: boolean;
 }>>> & Readonly<{
     onRemove?: (() => any) | undefined;
+    onChipClick?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts

@@ -1251,10 +1251,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             isRemovable: {
                 type: PropType<boolean>;
             };
+            isInteractive: {
+                type: PropType<boolean>;
+            };
         }>> & Readonly<{
             onRemove?: (() => any) | undefined;
+            onChipClick?: ((event: Event) => any) | undefined;
         }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             remove: () => void;
+            chipClick: (event: Event) => void;
         }, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -1288,8 +1293,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             isRemovable: {
                 type: PropType<boolean>;
             };
+            isInteractive: {
+                type: PropType<boolean>;
+            };
         }>> & Readonly<{
             onRemove?: (() => any) | undefined;
+            onChipClick?: ((event: Event) => any) | undefined;
         }>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
@@ -1320,10 +1329,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         isRemovable: {
             type: PropType<boolean>;
         };
+        isInteractive: {
+            type: PropType<boolean>;
+        };
     }>> & Readonly<{
         onRemove?: (() => any) | undefined;
+        onChipClick?: ((event: Event) => any) | undefined;
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         remove: () => void;
+        chipClick: (event: Event) => void;
     }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: {
             accessory?(_: {}): any;

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

@@ -13,6 +13,7 @@ interface createComponentOptions {
 	isRemovable?: boolean;
 	size?: string;
 	color?: string;
+	isInteractive?: boolean;
 }
 
 describe('Chip', () => {
@@ -22,6 +23,7 @@ describe('Chip', () => {
 		isRemovable = false,
 		size = CHIP_SIZES.SMALL,
 		color = CHIP_COLORS.NEUTRAL,
+		isInteractive = false,
 	}: createComponentOptions = {}) => {
 		return shallowMount(Chip, {
 			props: {
@@ -30,6 +32,7 @@ describe('Chip', () => {
 				isRemovable,
 				size,
 				color,
+				isInteractive,
 			} as any,
 		});
 	};
@@ -130,6 +133,32 @@ describe('Chip', () => {
 		},
 	);
 
+	it('does not have interactive class by default', () => {
+		const component = createComponent();
+
+		expect(component.classes()).not.toContain('-ds-interactive');
+	});
+
+	it('has interactive class when interactive prop is true', () => {
+		const component = createComponent({ isInteractive: true });
+
+		expect(component.classes()).toContain('-ds-interactive');
+	});
+
+	it('emits click event when interactive and clicked', async () => {
+		const component = createComponent({ isInteractive: true });
+
+		await component.trigger('click');
+		expect(component.emitted('chipClick')?.length).toBe(1);
+	});
+
+	it('does not emit click event when not interactive and clicked', async () => {
+		const component = createComponent({ isInteractive: false });
+
+		await component.trigger('click');
+		expect(component.emitted('chipClick')).toBeUndefined();
+	});
+
 	it("doesn't render remove when size x-small", () => {
 		const component = createComponent({ isRemovable: true, size: CHIP_SIZES.X_SMALL });
 

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

@@ -21,7 +21,7 @@ const StoryTemplate: StoryFn<typeof Chip> = (args) => ({
 		return args;
 	},
 	template:
-		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius" />',
+		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius" :is-interactive="isInteractive" />',
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
@@ -34,7 +34,7 @@ const StoryTemplateWithAccessory: StoryFn<typeof Chip> = (args) => ({
 		return args;
 	},
 	template:
-		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius">' +
+		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius" :is-interactive="isInteractive">' +
 		'<template #accessory><logo-badge :style="svgStyle" /></template>' +
 		'</chip>',
 	data() {
@@ -64,6 +64,7 @@ const args = {
 	color: CHIP_DEFAULT_COLOR,
 	colorHex: '',
 	isRemovable: false,
+	isInteractive: false,
 	state: CHIP_STATES.DEFAULT,
 } as Args;
 const argTypes = {

package/lib/js/components/Chip/Chip.vue

@@ -8,9 +8,11 @@
 			'-ds-uppercase': isLabelUppercase,
 			'-ds-rounded': radius === CHIP_RADIUSES.ROUNDED,
 			'-ds-removable': size !== CHIP_SIZES.X_SMALL && isRemovable,
+			'-ds-interactive': isInteractiveComputed,
 		}"
 		:title="label ?? undefined"
 		:style="colorHex ? { backgroundColor: colorHex } : undefined"
+		@click="isInteractiveComputed && $emit('chipClick', $event)"
 	>
 		<span v-if="$slots.accessory || leftIcon" class="ds-chip__leftIcon">
 			<slot name="accessory">
@@ -40,6 +42,7 @@
 </template>
 
 <style lang="scss" scoped>
+@import '../../../styles/settings/animations';
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/radiuses';
 @import '../../../styles/settings/colors/tokens';
@@ -51,6 +54,7 @@ $chip-colors: (
 		'label': $color-neutral-text-strong,
 		'icon': $color-neutral-icon,
 		'background': $color-neutral-background-medium,
+		'background-hover': $color-neutral-background-medium-hovered,
 		'disabled': (
 			'label': $color-neutral-text-strong-disabled,
 			'icon': $color-neutral-icon-disabled,
@@ -61,6 +65,7 @@ $chip-colors: (
 		'label': $color-neutral-text,
 		'icon': $color-neutral-icon,
 		'background': $color-neutral-background,
+		'background-hover': $color-neutral-background-hovered,
 		'disabled': (
 			'label': $color-neutral-text-disabled,
 			'icon': $color-neutral-icon-disabled,
@@ -71,6 +76,7 @@ $chip-colors: (
 		'label': $color-inverted-text,
 		'icon': $color-inverted-icon,
 		'background': $color-primary-background-strong,
+		'background-hover': $color-primary-background-strong-hovered,
 		'disabled': (
 			'label': $color-inverted-text,
 			'icon': $color-inverted-icon,
@@ -81,6 +87,7 @@ $chip-colors: (
 		'label': $color-primary-text,
 		'icon': $color-primary-icon,
 		'background': $color-primary-background,
+		'background-hover': $color-primary-background-hovered,
 		'disabled': (
 			'label': $color-primary-text-disabled,
 			'icon': $color-primary-icon-disabled,
@@ -91,6 +98,7 @@ $chip-colors: (
 		'label': $color-fail-text,
 		'icon': $color-fail-icon,
 		'background': $color-fail-background,
+		'background-hover': $color-fail-background-hovered,
 		'disabled': (
 			'label': $color-fail-text-disabled,
 			'icon': $color-fail-icon-disabled,
@@ -101,6 +109,7 @@ $chip-colors: (
 		'label': $color-danger-text,
 		'icon': $color-danger-icon,
 		'background': $color-danger-background,
+		'background-hover': $color-danger-background-hovered,
 		'disabled': (
 			'label': $color-danger-text-disabled,
 			'icon': $color-danger-icon-disabled,
@@ -111,6 +120,7 @@ $chip-colors: (
 		'label': $color-warning-text,
 		'icon': $color-warning-icon,
 		'background': $color-warning-background,
+		'background-hover': $color-warning-background-hovered,
 		'disabled': (
 			'label': $color-warning-text-disabled,
 			'icon': $color-warning-icon-disabled,
@@ -121,6 +131,7 @@ $chip-colors: (
 		'label': $color-success-text,
 		'icon': $color-success-icon,
 		'background': $color-success-background,
+		'background-hover': $color-success-background-hovered,
 		'disabled': (
 			'label': $color-success-text-disabled,
 			'icon': $color-success-icon-disabled,
@@ -131,6 +142,7 @@ $chip-colors: (
 		'label': $color-info-text,
 		'icon': $color-info-icon,
 		'background': $color-info-background,
+		'background-hover': $color-info-background-hovered,
 		'disabled': (
 			'label': $color-info-text-disabled,
 			'icon': $color-info-icon-disabled,
@@ -140,11 +152,12 @@ $chip-colors: (
 	'inverted': (
 		'label': $color-neutral-text,
 		'icon': $color-neutral-icon,
-		'background': $color-default-background,
+		'background': $color-neutral-background-weak,
+		'background-hover': $color-neutral-background-weak-hovered,
 		'disabled': (
 			'label': $color-neutral-text-disabled,
 			'icon': $color-neutral-icon-disabled,
-			'background': $color-default-background,
+			'background': $color-neutral-background-weak,
 		),
 	),
 	'invertedHex': (
@@ -173,6 +186,14 @@ $chip-colors: (
 				color: map-get($color-map, 'label');
 			}
 
+			&.-ds-interactive:hover {
+				$background-hover: map-get($color-map, 'background-hover');
+
+				@if $background-hover {
+					background-color: $background-hover;
+				}
+			}
+
 			&.-ds-disabled {
 				background-color: map-get(map-get($color-map, 'disabled'), 'background');
 
@@ -194,6 +215,11 @@ $chip-colors: (
 	gap: $space-4xs;
 	padding: $space-4xs $space-2xs;
 
+	&.-ds-interactive {
+		cursor: pointer;
+		transition: background-color ease-in-out $default-transition-time;
+	}
+
 	&.-ds-removable {
 		padding: $space-5xs $space-5xs $space-5xs $space-2xs;
 	}
@@ -291,6 +317,7 @@ const {
 	colorHex = null,
 	state = CHIP_STATES.DEFAULT,
 	isRemovable = false,
+	isInteractive = false,
 } = defineProps<{
 	label?: string | null;
 	isLabelUppercase?: boolean;
@@ -301,12 +328,16 @@ const {
 	colorHex?: string | null;
 	state?: ChipState;
 	isRemovable?: boolean;
+	isInteractive?: boolean;
 }>();
 
 defineEmits<{
 	remove: [];
+	chipClick: [event: Event];
 }>();
 
+const isInteractiveComputed = computed(() => isInteractive && state !== CHIP_STATES.DISABLED);
+
 const colorClassName = computed(() => {
 	if (colorHex) {
 		return `-ds-color-invertedHex`;

package/package.json

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