@tui-cruises/mein-schiff-web-react-component-library 2.0.0-rc.1

package/src/components/core/Tabs/Tabs.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { ComponentProps, FC, forwardRef } from 'react';
+import { IconButton } from '../IconButton';
+import {
+  CarouselInterface,
+  CarouselStage,
+  UniversalCarousel,
+} from '../../shared/UniversalCarousel';
+import { twJoin } from 'tailwind-merge';
+import { Pictogram, PictogramName } from '../Pictogram';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsContent = TabsPrimitive.Content;
+
+type Props = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+  centerTabItems?: boolean;
+};
+
+const TabsList = forwardRef<React.ElementRef<typeof TabsPrimitive.List>, Props>(
+  ({ className, centerTabItems, ...props }, ref) => {
+    return (
+      <TabsPrimitive.List
+        className="relative flex items-center justify-between gap-1"
+        {...props}
+        ref={ref}
+      >
+        <UniversalCarousel>
+          <div className="relative w-full overflow-hidden before:absolute before:bottom-0 before:left-0 before:right-0 before:h-px before:bg-surface-secondary-20">
+            <CarouselStage
+              className={twJoin('-mx-1', centerTabItems && 'justify-center')}
+              itemProps={{
+                className: 'w-auto',
+              }}
+              draggable
+            >
+              {props.children}
+            </CarouselStage>
+            <CarouselInterface>
+              {context => {
+                const { prev, next } = context;
+                const { visibleIndexes, lastIndex } = context;
+
+                return (
+                  <>
+                    <div
+                      className={twJoin(
+                        'pointer-events-none absolute left-0 top-1/2 flex h-full -translate-y-1/2 items-center bg-gradient-to-r from-white from-50% pr-4',
+                        visibleIndexes[0] === 0 && 'hidden',
+                      )}
+                    >
+                      <IconButton
+                        className="pointer-events-auto"
+                        iconName="nav-arrow-left"
+                        variant="ghost"
+                        aria-label="tabs-navigate-previous"
+                        size="sm"
+                        onClick={prev}
+                        disabled={visibleIndexes[0] === 0}
+                      />
+                    </div>
+
+                    <div
+                      className={twJoin(
+                        'pointer-events-none absolute right-0 top-1/2 flex h-full -translate-y-1/2 items-center bg-gradient-to-l from-white from-50% pl-4',
+                        visibleIndexes.includes(lastIndex) && 'hidden',
+                      )}
+                    >
+                      <IconButton
+                        className="pointer-events-auto"
+                        iconName="nav-arrow-right"
+                        aria-label="tabs-navigate-next"
+                        variant="ghost"
+                        size="sm"
+                        onClick={next}
+                        disabled={visibleIndexes.includes(lastIndex)}
+                      />
+                    </div>
+                  </>
+                );
+              }}
+            </CarouselInterface>
+          </div>
+        </UniversalCarousel>
+      </TabsPrimitive.List>
+    );
+  },
+);
+
+TabsList.displayName = 'TabsList';
+
+type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger> & {
+  pictogram?: PictogramName;
+  variant?: 'default' | 'error';
+};
+
+const TabsTrigger: FC<TabsTriggerProps> = ({
+  pictogram,
+  variant = 'default',
+  children,
+  ...args
+}) => (
+  <TabsPrimitive.Trigger
+    className={twJoin(
+      'font-bold box-content flex shrink-0 px-6 py-4',
+      'text-base',
+      'data-[state=active]:border-b-[4px] ',
+      'data-[state=active]:font-semibold',
+      variant === 'default' && [
+        'text-marine-medium-emphasis',
+        'hover:border-stroke-primary-100 hover:text-marine-high-emphasis',
+        'data-[state=active]:border-stroke-primary-100 data-[state=active]:text-marine-high-emphasis',
+      ],
+      variant === 'error' && [
+        'text-on-surface-feedback-error',
+        'data-[state=active]:border-stroke-error-120',
+      ],
+    )}
+    {...args}
+  >
+    <div className="flex flex-col items-center">
+      {pictogram && <Pictogram name={pictogram} size="sm" />}
+      {children}
+    </div>
+  </TabsPrimitive.Trigger>
+);
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/core/Tabs/index.ts

@@ -0,0 +1 @@
+export * from './Tabs';

package/src/components/core/Tag/Tag.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+import { twJoin } from 'tailwind-merge';
+import { Icon } from '../Icon';
+
+/**
+ * Props for the Tag component.
+ */
+export type TagProps = {
+  className?: string;
+  variant?: 'default' | 'attention' | 'topic' | 'teaser' | 'signal';
+  children?: ReactNode;
+};
+
+/**
+ * Variant styles for the Tag component.
+ */
+const variants = {
+  variant: {
+    default:
+      'bg-surface-secondary-20 text-marine-high-emphasis border-transparent',
+    attention:
+      'bg-surface-feedback-attention text-on-surface-feedback-attention border-stroke-attention-120',
+    topic: 'bg-opacity-black-60 text-white border-transparent',
+    teaser: 'bg-surface-white text-marine-high-emphasis border-transparent',
+    signal: 'bg-yellow-100 text-marine-high-emphasis border-transparent',
+  },
+};
+
+/**
+ * A versatile Tag component for displaying small count indicators or labels.
+ *
+ * @param {TagProps} props - The props for the Tag component.
+ * @returns {JSX.Element} The rendered Tag component.
+ */
+const Tag = ({
+  className,
+  variant = 'default',
+  children,
+  ...args
+}: TagProps) => {
+  // Determine if we need to show the icon (for the attention variant)
+  const isAttention = variant === 'attention';
+
+  return (
+    <div
+      {...args}
+      className={twJoin(
+        'inline-flex items-center justify-center rounded-full border px-3 py-1 text-xs font-semibold',
+        variants.variant[variant],
+        className,
+      )}
+    >
+      {isAttention && <Icon name="warning-circle" size="sm" className="mr-2" />}
+      {children}
+    </div>
+  );
+};
+
+Tag.displayName = 'Tag';
+
+export { Tag };

package/src/components/core/Tag/index.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/src/components/core/TextButton/TextButton.tsx

@@ -0,0 +1,108 @@
+import {
+  ButtonHTMLAttributes,
+  ForwardRefRenderFunction,
+  PropsWithChildren,
+} from 'react';
+import React, { forwardRef } from 'react';
+import { Icon, IconName } from '../../core/Icon';
+import { twMerge } from 'tailwind-merge';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { wrapSlottableChildren } from '../../../helpers/slot';
+import { DataAttributes } from '../../../helpers/types';
+
+type CommonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  PropsWithChildren<{
+    asChild?: boolean;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+    iconSize?: 'xs' | 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md';
+    on?: 'white' | 'gray' | 'ocean' | 'image';
+  }>;
+
+type ButtonAttributes = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'className'
+> &
+  DataAttributes;
+
+export type TextButtonProps = ButtonAttributes & CommonProps;
+
+const TextButtonRenderFunction: ForwardRefRenderFunction<
+  HTMLButtonElement,
+  TextButtonProps
+> = (
+  {
+    children,
+    asChild,
+    iconLeft,
+    iconRight,
+    iconSize = 'xs',
+    size = 'md',
+    on = 'white',
+    className: classNameArg,
+    ...rest
+  },
+  ref,
+) => {
+  const Comp = asChild ? Slot : 'button';
+
+  const className = twMerge(
+    classNameArg,
+    'group inline-flex cursor-pointer appearance-none items-center space-x-1 py-1 font-normal leading-normal',
+    'focus:outline-none focus-visible:shadow-focus-state',
+    'disabled:pointer-events-none disabled:text-secondary-marine-48',
+    size === 'sm' && 'text-sm',
+
+    // On white (default)
+    on === 'white' && 'text-marine-high-emphasis',
+
+    // On gray
+    on === 'gray' && 'text-marine-high-emphasis',
+
+    // On ocean
+    on === 'ocean' &&
+      'text-marine-high-emphasis disabled:text-secondary-marine-7',
+
+    // On image
+    on === 'image' && 'text-white',
+  );
+
+  const linkClassName = twMerge(
+    'relative after:absolute after:-bottom-[.25em] after:right-0 after:h-[1px] after:w-full after:transition-all',
+    'group-hover:after:w-0',
+    'group-disabled:after:bg-secondary-marine-48',
+
+    // On white (default)
+    on === 'white' && 'after:bg-primary-ocean-100',
+
+    // On gray
+    on === 'gray' && 'after:bg-primary-ocean-100',
+
+    // On ocean
+    on === 'ocean' &&
+      'after:bg-neutral-white group-disabled:after:bg-secondary-marine-7',
+
+    // On image
+    on === 'image' && 'after:bg-primary-ocean-100',
+  );
+
+  return (
+    <Comp {...rest} className={className} ref={ref}>
+      {iconLeft && <Icon name={iconLeft} size={iconSize} />}
+      <Slottable>
+        {wrapSlottableChildren(asChild, children, children => (
+          <span className={linkClassName}>{children}</span>
+        ))}
+      </Slottable>
+      {iconRight && <Icon name={iconRight} size={iconSize} />}
+    </Comp>
+  );
+};
+
+/**
+ * `TextButton` is a component that renders a text button.
+ */
+export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(
+  TextButtonRenderFunction,
+) as typeof TextButtonRenderFunction;

package/src/components/core/TextButton/index.ts

@@ -0,0 +1 @@
+export * from './TextButton';

package/src/components/core/Toast/Toast.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  HTMLAttributes,
+  PropsWithChildren,
+} from 'react';
+import { Icon } from '../../core/Icon';
+import * as RadixToast from '@radix-ui/react-toast';
+
+type Props = HTMLAttributes<HTMLDivElement> &
+  PropsWithChildren<{
+    title?: string;
+  }>;
+
+/**
+ * Renders the content of a toast notification.
+ *
+ * This component displays a toast with an optional title and children content. It also uses
+ * Radix UI's Toast components for accessibility and behavior.
+ *
+ * @param {Props} props - The properties passed to the toast component.
+ * @param {React.Ref} forwardedRef - A forwarded ref to the div element.
+ * @returns {JSX.Element} The rendered toast component.
+ */
+export const ToastRenderFunction: ForwardRefRenderFunction<
+  HTMLDivElement,
+  Props
+> = ({ title, children, ...rest }, forwardedRef) => {
+  return (
+    <div
+      {...rest}
+      className="rounded-md bg-surface-white p-6 text-marine-high-emphasis shadow-xl"
+      ref={forwardedRef}
+    >
+      <div className="space-y-2 md:relative md:ml-[1.5rem] md:pl-2">
+        <RadixToast.Title asChild>
+          <div className="flex gap-2 md:block">
+            <div className="md:absolute md:left-[-1.5rem] md:size-[1.5rem] md:pt-1">
+              <Icon name="security-pass" size="md" />
+            </div>
+            <div className="headline-sm flex-1 md:headline-md">{title}</div>
+          </div>
+        </RadixToast.Title>
+        {children && (
+          <RadixToast.Description asChild>
+            <div className="text-base md:text-lg">{children}</div>
+          </RadixToast.Description>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * The main toast component, using `forwardRef` to forward the ref to the `ToastRenderFunction`.
+ *
+ * @param {Props} props - The properties passed to the toast component.
+ * @param {React.Ref} ref - A forwarded ref to the div element.
+ * @returns {JSX.Element} The wrapped `ToastRenderFunction` with forwarded ref.
+ */
+export const Toast = forwardRef<HTMLDivElement, Props>(
+  ToastRenderFunction,
+) as typeof ToastRenderFunction;

package/src/components/core/Toast/index.ts

@@ -0,0 +1 @@
+export * from './Toast';

package/src/components/core/Tooltip/Tooltip.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { useState } from 'react';
+
+export type TooltipContentProps = React.ComponentPropsWithoutRef<
+  typeof TooltipPrimitive.Content
+>;
+
+export type TooltipRootProps = React.ComponentPropsWithoutRef<
+  typeof TooltipPrimitive.Root
+>;
+
+/**
+ * `TooltipProvider` sets up the context for tooltip elements, providing necessary
+ * configurations for their behavior and appearance.
+ */
+const TooltipProvider = TooltipPrimitive.Provider;
+
+/**
+ * `Tooltip` component that manages the tooltip's visibility and interaction.
+ *
+ * @param {TooltipRootProps} props - Properties for configuring the tooltip root.
+ * @returns {JSX.Element} The root wrapper for displaying tooltip content.
+ */
+const Tooltip = (props: TooltipRootProps) => {
+  const { children, ...rest } = props;
+  const [open, setOpen] = useState(false);
+
+  return (
+    <TooltipPrimitive.Root
+      open={open}
+      delayDuration={0}
+      onOpenChange={setOpen}
+      {...rest}
+    >
+      <div
+        className="inline-flex"
+        onMouseEnter={() => {
+          setOpen(true);
+        }}
+        onMouseLeave={() => {
+          setOpen(false);
+        }}
+        onFocus={() => {
+          setOpen(true);
+        }}
+        onBlur={() => {
+          setOpen(false);
+        }}
+      >
+        {children}
+      </div>
+    </TooltipPrimitive.Root>
+  );
+};
+
+/**
+ * `TooltipTrigger` component that acts as the interactive element triggering the tooltip.
+ *
+ * This is typically a button that shows the tooltip on focus or hover. Adds custom
+ * focus styling for accessibility.
+ *
+ * @param {TooltipPrimitive.TooltipTriggerProps} props - Properties for configuring the tooltip trigger.
+ * @param {React.Ref<HTMLButtonElement>} ref - Reference to the trigger button element.
+ * @returns {JSX.Element} A button that triggers the tooltip on focus or hover.
+ */
+const TooltipTrigger = forwardRef<
+  HTMLButtonElement,
+  TooltipPrimitive.TooltipTriggerProps
+>(({ children, ...props }, ref) => (
+  <TooltipPrimitive.Trigger
+    ref={ref}
+    className="rounded-full focus:outline-none focus-visible:shadow-focus-state"
+    {...props}
+  >
+    {children}
+  </TooltipPrimitive.Trigger>
+));
+
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
+
+/**
+ * `TooltipContent` component that displays the tooltip content with custom styles.
+ *
+ * @param {TooltipContentProps} props - Properties for configuring the tooltip content.
+ * @returns {JSX.Element} The styled tooltip content with an optional arrow pointer.
+ */
+const TooltipContent = (props: TooltipContentProps) => {
+  const { children, ...rest } = props;
+
+  return (
+    <TooltipPrimitive.TooltipPortal>
+      <TooltipPrimitive.Content
+        className="relative z-50 rounded-sm bg-surface-white px-3 py-1 text-sm text-marine-high-emphasis shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        {...rest}
+      >
+        {children}
+        <div className="absolute left-0 right-0 z-10 mx-1 h-1 bg-surface-white" />
+        <TooltipPrimitive.Arrow className="h-3 w-5 fill-white drop-shadow-md" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.TooltipPortal>
+  );
+};
+
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+Tooltip.displayName = TooltipPrimitive.Root.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/core/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/src/components/shared/NextFontMeinSchiffSansPro/NextFontMeinSchiffSansPro.tsx

@@ -0,0 +1,160 @@
+import type { FC, ReactNode } from 'react';
+import localFont from '@next/font/local';
+
+type Props = {
+  children: (font: ReturnType<typeof localFont>) => ReactNode;
+};
+
+const meinSchiffSansPro = localFont({
+  display: 'swap',
+  variable: '--font-mein-schiff-sans-pro',
+  src: [
+    /* source-sans-pro-200 - latin */
+    {
+      path: './../../../assets/fonts/source-sans-pro/source-sans-pro-v21-latin-200.woff2',
+      style: 'normal',
+      weight: '200',
+    },
+    /* source-sans-pro-200italic - latin */
+    {
+      path: './../../../assets/fonts/source-sans-pro/source-sans-pro-v21-latin-200italic.woff2',
+      style: 'italic',
+      weight: '200',
+    },
+    /* source-sans-pro-300 - latin */
+    {
+      path: './../../../assets/fonts/source-sans-pro/source-sans-pro-v21-latin-300.woff2',
+      style: 'normal',
+      weight: '300',
+    },
+    /* source-sans-pro-300italic - latin */
+    {
+      path: './../../../assets/fonts/source-sans-pro/source-sans-pro-v21-latin-300italic.woff2',
+      style: 'italic',
+      weight: '300',
+    },
+    /* source-sans-pro-regular - latin */
+    {
+      path: './../../../assets/fonts/mein-schiff-sans-pro/MeinSchiffSansPro_Rg.woff2',
+      style: 'normal',
+      weight: '400',
+    },
+    /* source-sans-pro-italic - latin */
+    {
+      path: './../../../assets/fonts/mein-schiff-sans-pro/MeinSchiffSansPro_It.woff2',
+      style: 'italic',
+      weight: '400',
+    },
+    /* source-sans-pro-600 - latin */
+    {
+      path: './../../../assets/fonts/mein-schiff-sans-pro/MeinSchiffSansPro_SBd.woff2',
+      style: 'normal',
+      weight: '600',
+    },
+    /* source-sans-pro-600italic - latin */
+    {
+      path: './../../../assets/fonts/mein-schiff-sans-pro/MeinSchiffSansPro_SBdIt.woff2',
+      style: 'italic',
+      weight: '600',
+    },
+    /* source-sans-pro-700 - latin */
+    {
+      path: './../../../assets/fonts/source-sans-pro/source-sans-pro-v21-latin-700.woff2',
+      style: 'normal',
+      weight: '700',
+    },
+    /* source-sans-pro-700italic - latin */
+    {
+      path: './../../../assets/fonts/source-sans-pro/source-sans-pro-v21-latin-700italic.woff2',
+      style: 'italic',
+      weight: '700',
+    },
+    /* source-sans-pro-900 - latin */
+    {
+      path: './../../../assets/fonts/source-sans-pro/source-sans-pro-v21-latin-900.woff2',
+      style: 'normal',
+      weight: '900',
+    },
+    /* source-sans-pro-900italic - latin */
+    {
+      path: './../../../assets/fonts/source-sans-pro/source-sans-pro-v21-latin-900italic.woff2',
+      style: 'italic',
+      weight: '900',
+    },
+  ],
+});
+
+/**
+ * Adds the `Mein Schiff Sans Pro` font to a Tailwind based Next.js 13 app.
+ *
+ * Under the hood the components uses [Next's local font loader](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts).
+ *
+ * ## Font Details
+ *
+ * `Mein Schiff Sans Pro` is a custom font based on Adobe's Source Sans Pro from [Google Fonts](https://fonts.google.com/specimen/Source+Sans+3). While it incorporates specific ligatures for Mein Schiff, it retains the core characteristics of Source Sans Pro. In cases where `Mein Schiff Sans Pro` isn't available for a particular font weight or style, we fall back to using `Source Sans Pro`.
+ *
+ * Here's how the fonts are used within different styles and weights:
+ *
+ * | Style | Weight | Font |
+ * | --- | --- | --- |
+ * | Normal | 200 | Source Sans Pro |
+ * | Normal | 300 | Source Sans Pro |
+ * | **Normal** | **400** | **Mein Schiff Sans Pro** |
+ * | **Normal** | **600** | **Mein Schiff Sans Pro** |
+ * | Normal | 700 | Source Sans Pro |
+ * | Normal | 900 | Source Sans Pro |
+ * | Italic | 200 | Source Sans Pro |
+ * | Italic | 300 | Source Sans Pro |
+ * | **Italic** | **400** | **Mein Schiff Sans Pro** |
+ * | **Italic** | **600** | **Mein Schiff Sans Pro** |
+ * | Italic | 700 | Source Sans Pro |
+ * | Italic | 900 | Source Sans Pro |
+ *
+ * ## Where to use?
+ *
+ * This component is intended for usage in Next.js 13+ apps. You should have this component only once in your app.
+ * Don't use it as a dynamic font wrapper.
+ *
+ * ## Usage
+ *
+ * ### 1. Load the Font
+ *
+ * Wrap your layout or your app in the `NextFontMeinSchiffSansPro` component and add the font's class name to a suitable html element.
+ *
+ * You can access the font's class name by supplying a render prop based child to the component. The render prop is invoked with the result of [Next's local font loader](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts) as its first argument.
+ *
+ * ```tsx
+ * <NextFontMeinSchiffSansPro>
+ *   { (font) => (
+ *     <html className={font.className}>
+ *       <body>
+ *         ...
+ *       </body>
+ *     </html>
+ *   )}
+ * </NextFontMeinSchiffSansPro>
+ * ```
+ *
+ * ### 2. Add the Font to your Tailwind Config
+ *
+ * Add the variable name `--font-mein-schiff-sans-pro` to your `tailwind.config.js` file.
+ *
+ * ```tsx
+ * import type { Config } from 'tailwindcss'
+ *
+ * const config: Config = {
+ *   // ...
+ *   theme: {
+ *     fontFamily: {
+ *       sans: ['var(--font-mein-schiff-sans-pro)']
+ *     }
+ *   },
+ *   // ...
+ * };
+ *
+ * export default config;
+ * ```
+ */
+export const NextFontMeinSchiffSansPro: FC<Props> = ({ children }) => {
+  return <>{children(meinSchiffSansPro)}</>;
+};

package/src/components/shared/NextFontMeinSchiffSansPro/index.ts

@@ -0,0 +1 @@
+export * from './NextFontMeinSchiffSansPro';