@tui-cruises/mein-schiff-web-react-component-library 3.1.14 → 3.1.15

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.1.15](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.14...v3.1.15) (2026-05-19)
+
+
+### Features
+
+* **Chip:** Add a dismissable chip variant ([73d4189](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/73d41894e86c52450ac42523923150f474e0e6f4))
+
+
+### Bug Fixes
+
+* **Checkbox:** Align hover effect with design system ([d824ffb](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/d824ffbd067cc4d19284d70f7c860d50266a7379))
+
 ### [3.1.14](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.13...v3.1.14) (2026-04-15)
 
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "3.1.14",
+  "version": "3.1.15",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",
   "scripts": {
     "lint": "eslint \"**/*.ts*\"",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run",
     "prettier": "prettier --write ./src",
     "dev": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -79,6 +79,9 @@
     "@storybook/addon-docs": "10.0.1",
     "@storybook/nextjs": "10.0.1",
     "@svgr/cli": "^8.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",
@@ -91,6 +94,7 @@
     "esbuild": "^0.25.11",
     "eslint": "^8.47.0",
     "eslint-plugin-storybook": "10.0.1",
+    "jsdom": "^29.1.1",
     "postcss": "^8.4.26",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.4.1",
@@ -101,6 +105,7 @@
     "tailwindcss": "^3.4.17",
     "ts-loader": "^9.5.2",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "vitest": "^4.1.6"
   }
 }

package/src/components/core/Checkbox/Checkbox.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import type { ForwardRefRenderFunction, InputHTMLAttributes } from 'react';
-import { Icon } from '../../core/Icon';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import { twJoin } from 'tailwind-merge';
+import { Icon } from '../../core/Icon';
+import { twMerge } from 'tailwind-merge';
 
 type BaseProps = {
   checked?: boolean | 'indeterminate';
   defaultChecked?: boolean | 'indeterminate';
   invalid?: string;
+  on?: 'white' | 'gray';
 };
 
 export type CheckboxProps = BaseProps &
@@ -17,7 +18,10 @@ export type CheckboxProps = BaseProps &
 const CheckboxRenderFunction: ForwardRefRenderFunction<
   HTMLInputElement | null,
   CheckboxProps
-> = ({ checked, defaultChecked, invalid, ...rest }, forwardedRef) => {
+> = (
+  { checked, defaultChecked, invalid, on = 'gray', ...rest },
+  forwardedRef,
+) => {
   const ref = useRef<HTMLInputElement | null>(null);
   const checkedProp = checked === 'indeterminate' ? false : checked;
   const defaultCheckedProp =
@@ -54,15 +58,18 @@ const CheckboxRenderFunction: ForwardRefRenderFunction<
     <span className="relative inline-block h-8 w-8 flex-shrink-0 md:h-6 md:w-6">
       <input
         {...rest}
-        className={twJoin(
-          'peer absolute inset-0 h-8 w-8 appearance-none rounded-sm md:h-6 md:w-6',
-          'before:absolute before:inset-0 before:rounded-sm before:border before:border-stroke-primary-100',
+        className={twMerge(
+          'peer absolute inset-0 h-8 w-8 appearance-none rounded-[2px] bg-surface-white md:h-6 md:w-6',
+          'before:absolute before:inset-0 before:rounded-[2px] before:border before:border-stroke-primary-100',
           'checked:before:border-transparent checked:before:bg-surface-primary-100',
           'indeterminate:before:border-transparent indeterminate:before:bg-surface-primary-100',
           'invalid:before:border-stroke-error-100',
-          'hover:cursor-pointer hover:bg-surface-secondary-7',
+          'hover:cursor-pointer hover:before:border-4',
           'focus:outline-none focus-visible:shadow-focus-state',
-          'disabled:before:border-stroke-secondary-40 disabled:hover:cursor-not-allowed disabled:hover:bg-transparent',
+          on === 'white' &&
+            'disabled:before:border-stroke-secondary-40 disabled:hover:cursor-not-allowed disabled:hover:bg-transparent',
+          on === 'gray' &&
+            'disabled:checked:before:bg-surface-white disabled:hover:before:border disabled:hover:cursor-not-allowed disabled:bg-surface-secondary-7 disabled:hover:bg-transparent',
         )}
         type="checkbox"
         defaultChecked={defaultCheckedProp}

package/src/components/core/Chip/Chip.test.tsx

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Chip } from './Chip';
+
+describe('Chip', () => {
+  describe('dismissable', () => {
+    it('renders dismiss button when onDismiss is provided', () => {
+      render(<Chip onDismiss={() => {}}>Label</Chip>);
+      expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
+    });
+
+    it('does not render dismiss button when onDismiss is not provided', () => {
+      render(<Chip>Label</Chip>);
+      expect(screen.queryByRole('button', { name: 'Dismiss' })).not.toBeInTheDocument();
+    });
+
+    it('calls onDismiss when dismiss button is clicked', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+      render(<Chip onDismiss={onDismiss}>Label</Chip>);
+
+      await user.click(screen.getByRole('button', { name: 'Dismiss' }));
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onDismiss on Enter key', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+      render(<Chip onDismiss={onDismiss}>Label</Chip>);
+
+      screen.getByRole('button', { name: 'Dismiss' }).focus();
+      await user.keyboard('{Enter}');
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onDismiss on Space key', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+      render(<Chip onDismiss={onDismiss}>Label</Chip>);
+
+      screen.getByRole('button', { name: 'Dismiss' }).focus();
+      await user.keyboard(' ');
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not propagate click to parent chip button', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+      const onClick = vi.fn();
+      render(
+        <Chip onClick={onClick} onDismiss={onDismiss}>
+          Label
+        </Chip>,
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Dismiss' }));
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/components/core/Chip/Chip.tsx

@@ -1,7 +1,8 @@
-import type { ReactNode, RefObject } from 'react';
+import type { ButtonHTMLAttributes, ReactNode, RefObject } from 'react';
 import { twJoin, twMerge } from 'tailwind-merge';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { Pictogram, PictogramName } from '../Pictogram';
+import { Icon } from '../Icon';
 
 /**
  * All allowed variants for the Chip component.
@@ -11,15 +12,13 @@ type Variant = 'text' | 'pictogram';
 /**
  * Props for the Chip component.
  */
-export type ChipProps = {
+export type ChipProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   asChild?: boolean;
-  className?: string;
   variant?: Variant;
   pictogram?: PictogramName;
   on?: 'white' | 'gray';
-  children?: ReactNode;
   active?: boolean;
-  disabled?: boolean;
+  onDismiss?: () => void;
   ref?: RefObject<HTMLButtonElement>;
 };
 
@@ -34,6 +33,7 @@ const Chip = ({
   on = 'white',
   active = false,
   disabled = false,
+  onDismiss,
   children,
   ref,
   ...args
@@ -41,12 +41,17 @@ const Chip = ({
   const Element = asChild ? Slot : 'button';
 
   const borderRadius = variant === 'text' ? 'rounded-full' : 'rounded-md';
-  const padding = variant === 'text' ? 'px-4 py-3' : 'p-3 lg:p-2';
+  const padding =
+    variant === 'text'
+      ? onDismiss
+        ? 'pl-4 pr-3 py-2'
+        : 'px-4 py-3'
+      : 'p-3 lg:p-2';
   const variantClasses = twMerge(
     'border-none text-center text-sm font-semibold transition-all',
 
     // Variants
-    variant === 'text' && [
+    variant === 'text' && !onDismiss && [
       // Shared
       'text-marine-high-emphasis hover:bg-surface-primary-100',
 
@@ -63,6 +68,10 @@ const Chip = ({
         'bg-surface-white shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-20)]',
     ],
 
+    variant === 'text' && onDismiss && [
+      'text-marine-high-emphasis bg-surface-white shadow-[inset_0_0_0_1px_theme(colors.stroke.secondary-20)] cursor-default',
+    ],
+
     variant === 'pictogram' && [
       // Shared
       'bg-surface-white shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)] hover:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)]',
@@ -83,7 +92,7 @@ const Chip = ({
       ref={ref}
       {...args}
       className={twJoin(
-        'inline-flex items-center justify-center',
+        'inline-flex items-center justify-center gap-2',
         borderRadius,
         padding,
         variantClasses,
@@ -92,6 +101,27 @@ const Chip = ({
     >
       <Slottable>{children ?? ''}</Slottable>
       {pictogram && <Pictogram name={pictogram} size="sm" />}
+      {onDismiss && (
+        <span
+          role="button"
+          aria-label="Dismiss"
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDismiss();
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              e.stopPropagation();
+              onDismiss();
+            }
+          }}
+          className="inline-flex cursor-pointer"
+        >
+          <Icon name="cancel" size="xs" />
+        </span>
+      )}
     </Element>
   );
 };