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

package/src/components/core/Dialog/Dialog.tsx

@@ -0,0 +1,443 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { formatTrackingString, trackEvent } from '@tuic/lib/helpers/tracking';
+import { EventClickArea } from '@tuic/lib/tracking/tealium';
+import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
+import { twJoin } from 'tailwind-merge';
+import { IconButton } from '../../core/IconButton';
+
+export type DialogContentProps = PropsWithChildren<{
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * Read [Radix Composition guide](https://www.radix-ui.com/primitives/docs/guides/composition) for more details.
+   */
+  asChild?: ComponentProps<typeof DialogPrimitive.Content>['asChild'];
+
+  /**
+   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from Dialog.Portal.
+   */
+  forceMount?: ComponentProps<typeof DialogPrimitive.Content>['forceMount'];
+
+  /**
+   * Event handler called when focus moves into the component after opening. It can be prevented by calling `event.preventDefault`.
+   */
+  onOpenAutoFocus?: ComponentProps<
+    typeof DialogPrimitive.Content
+  >['onOpenAutoFocus'];
+
+  /**
+   * Event handler called when focus moves to the trigger after closing. It can be prevented by calling `event.preventDefault`.
+   */
+  onCloseAutoFocus?: ComponentProps<
+    typeof DialogPrimitive.Content
+  >['onCloseAutoFocus'];
+
+  /**
+   * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.
+   */
+  onEscapeKeyDown?: ComponentProps<
+    typeof DialogPrimitive.Content
+  >['onEscapeKeyDown'];
+
+  /**
+   * Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling `event.preventDefault`.
+   */
+  onPointerDownOutside?: ComponentProps<
+    typeof DialogPrimitive.Content
+  >['onPointerDownOutside'];
+
+  /**
+   * Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling `event.preventDefault`.
+   */
+  onInteractOutside?: ComponentProps<
+    typeof DialogPrimitive.Content
+  >['onInteractOutside'];
+
+  /**
+   * The title displayed at the top of the dialog.
+   */
+  title?: string;
+
+  /**
+   * Used to display the Dialog in a fullscreen mode across the entire viewport.
+   */
+  fullscreen?: boolean;
+
+  /**
+   * Used to display the Dialog in a windowed mode on smaller viewport.
+   */
+  mobileWindowed?: boolean;
+
+  /**
+   * Used to display the Dialog in the maximum height (regadless of it's childrens height).
+   */
+  expanded?: boolean;
+
+  /**
+   * Used to display a medium or large width dialog on desktop. Defaults to `'md'`.
+   */
+  desktopSize?: 'md' | 'lg' | 'xl';
+
+  /**
+   * Specifies the container in which the dialog will render. If not provided, the dialog will render as a child of its parent in the DOM tree.
+   */
+  container?: ComponentProps<typeof DialogPrimitive.Portal>['container'];
+
+  /**
+   * Used to remove the default padding from the dialog content.
+   */
+  disableSpacing?: boolean;
+
+  /**
+   * The CTA-Link on the left side
+   */
+  ctaLink?: React.ReactNode;
+
+  /**
+   * The CTA-Button on the right side
+   */
+  ctaButton?: React.ReactNode;
+
+  /**
+   * The hero content of the dialog, displayed at the top of the dialog.
+   */
+  heroContent?: React.ReactNode;
+
+  /**
+   * The footer content of the dialog. Sticks to the bottom of the dialog.
+   */
+  footerContent?: ReactNode;
+
+  /**
+   * Limits the height of the content to the dialog height (useful when a fixed bottom bar is needed)
+   */
+  heightLimited?: boolean;
+
+  /**
+   * Wird benutzt um die Größe im Mobile auf 90vh zu fixen
+   */
+  nearlyFullScreen?: boolean;
+
+  /**
+   * Displays a back button inside the dialog header.
+   */
+  showBackButton?: boolean;
+
+  /**
+   * Callback to call on click on back button.
+   */
+  onBack?: () => void;
+
+  /**
+   * Displays the close button inside the dialog header (default = true)
+   */
+  showCloseButton?: boolean;
+
+  /**
+   * CSS classes on dialog body.
+   */
+  bodyClassName?: string;
+
+  /**
+   * Name of the Dialog used for tracking
+   */
+  trackingName?: string;
+
+  /**
+   * Disable the focus reset which occurs after the closing of a dialog.
+   * When focus reset is disabled, the trigger of the dialog is focused once the dialog closes.
+   */
+  disableOnCloseFocusReset?: boolean;
+}>;
+
+export type DialogProps = PropsWithChildren<{
+  /**
+   * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
+   */
+  defaultOpen?: ComponentProps<typeof DialogPrimitive.Root>['defaultOpen'];
+
+  /**
+   * Callback fired when the dialog's open state changes.
+   */
+  onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>['onOpenChange'];
+
+  /**
+   * The controlled open state of the dialog. Must be used in conjunction with onOpenChange.
+   */
+  open?: ComponentProps<typeof DialogPrimitive.Root>['open'];
+
+  /**
+   * The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
+   */
+  modal?: ComponentProps<typeof DialogPrimitive.Root>['modal'];
+
+  /**
+   * Name of the Dialog used for tracking
+   */
+  trackingName?: string;
+}>;
+
+export type DialogTriggerProps = PropsWithChildren<{
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * Read [Radix Composition guide](https://www.radix-ui.com/primitives/docs/guides/composition) for more details.
+   */
+  asChild?: ComponentProps<typeof DialogPrimitive.Trigger>['asChild'];
+
+  className?: ComponentProps<typeof DialogPrimitive.Trigger>['className'];
+}>;
+
+/**
+ * The Dialog component can be used to isolate the user from the main window by overlaying
+ * another window that requires the users attention.
+ *
+ * Based on [Radix Dialog](https://radix-ui.com/primitives/docs/components/dialog) (see for further documentation).
+ *
+ * ### Developer Notes
+ *
+ * * The content should be wrapped in a `DialogContent`.
+ * * Dialogs can also be nested (though this should be avoided).
+ * * By default, the Dialog is wrapped in a `DialogPortal` that portals the `DialogOverlay` and `DialogContent` into the body - this can be adjusted to any other place with the `container` prop.
+ * * The dialog can be controlled or uncontrolled:
+ *
+ * ```tsx
+ * // controlled:
+ * // use the `open` and `onOpenChange` props to control
+ * // the appearance state of the dialog from outside.
+ *
+ * import { useState } from 'react';
+ * import Button from '@tui-cruises/mein-schiff-web-react-component-library';
+ * import { Dialog, DialogContent } from '@tui-cruises/mein-schiff-web-react-component-library';
+ *
+ * const [open, setOpen] = useState(false);
+ *
+ * // ...
+ *
+ * <Button label="Open Dialog" onClick={() => setOpen(true)}/>
+ *
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogContent title="Title of the Dialog">
+ *      <div>
+ *         Content of the dialog.
+ *      </div>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ * ```tsx
+ * // uncontrolled:
+ * // use the `DialogTrigger` inside the main `Dialog` component
+ * // to let the dialog itself handle the appearance state.
+ *
+ * import Button from '@tui-cruises/mein-schiff-web-react-component-library';
+ * import { Dialog, DialogContent, DialogTrigger } from '@tui-cruises/mein-schiff-web-react-component-library';
+ *
+ * // ...
+ *
+ * <Dialog>
+ * <DialogTrigger asChild>
+ *   <Button label="Open Dialog" />
+ * </DialogTrigger>
+ *   <DialogContent title="Title of the Dialog">
+ *      <div>
+ *         Content of the dialog.
+ *      </div>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ *
+ *
+ */
+
+const Dialog = (props: DialogProps) => {
+  const { onOpenChange, trackingName, ...rest } = props;
+
+  const handleOpenChange = (open: boolean) => {
+    if (trackingName) {
+      trackEvent({
+        event_name: open ? 'layer-open-user' : 'layer-close',
+        layer_name: formatTrackingString(trackingName),
+      });
+    }
+    onOpenChange && onOpenChange(open);
+  };
+
+  return <DialogPrimitive.Root {...rest} onOpenChange={handleOpenChange} />;
+};
+
+const DialogTrigger: FC<DialogTriggerProps> = DialogPrimitive.Trigger;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogContent = ({
+  title,
+  fullscreen = false,
+  mobileWindowed = false,
+  desktopSize = 'md',
+  expanded = false,
+  container,
+  children,
+  disableSpacing = false,
+  heightLimited = false,
+  nearlyFullScreen = false,
+  ctaLink,
+  ctaButton,
+  heroContent,
+  footerContent,
+  showBackButton,
+  onBack,
+  showCloseButton = true,
+  bodyClassName,
+  trackingName,
+  disableOnCloseFocusReset,
+  ...rest
+}: DialogContentProps) => {
+  return (
+    <DialogPrimitive.Portal container={container || undefined}>
+      <DialogPrimitive.Overlay
+        className={twJoin(
+          'fixed inset-0 z-dialog flex',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'firefox:data-[state=closed]:animate-none firefox:data-[state=open]:animate-none',
+          !fullscreen &&
+            twJoin(
+              'items-end bg-overlay backdrop-blur-sm md:items-center md:justify-center md:p-8',
+              'data-[state=open]:duration-300',
+              'data-[state=closed]:duration-500',
+            ),
+          mobileWindowed && 'items-center justify-center p-4',
+        )}
+      >
+        <DialogPrimitive.Content
+          onCloseAutoFocus={createOnCloseAutoFocusHandler(
+            disableOnCloseFocusReset,
+          )}
+          data-track-click-area={EventClickArea.Dialog}
+          data-track-dialog={
+            trackingName ? formatTrackingString(trackingName) : title
+          }
+          className={twJoin(
+            'relative flex w-full overflow-hidden bg-surface-secondary-7',
+            'duration-200',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0 md:data-[state=open]:zoom-in-95',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 md:data-[state=closed]:zoom-out-95',
+            fullscreen && 'fixed inset-0 h-full w-full',
+            !fullscreen &&
+              twJoin(
+                'max-h-[calc(100%_-_theme(space.8))] rounded-t-md shadow-md md:max-h-full md:rounded-md',
+                'data-[state=open]:duration-300 data-[state=open]:slide-in-from-bottom-1/2 md:data-[state=open]:slide-in-from-bottom-0',
+                'data-[state=closed]:duration-500 data-[state=closed]:slide-out-to-bottom-1/2 md:data-[state=closed]:slide-out-to-bottom-0',
+              ),
+            !fullscreen && desktopSize === 'md' && 'md:max-w-[640px]',
+            !fullscreen && desktopSize === 'lg' && 'md:max-w-[996px]',
+            !fullscreen && desktopSize === 'xl' && 'md:max-w-[1600px]',
+            nearlyFullScreen && 'h-[90vh]',
+            expanded && 'h-full',
+            mobileWindowed && 'rounded-md rounded-t-md',
+          )}
+          {...rest}
+        >
+          <button className="h-0 w-0" name="trap-focus-placeholder" />
+          <div
+            className={twJoin(
+              'absolute left-0 top-0 flex h-12 w-full flex-col items-center justify-center bg-surface-white px-12 py-2 text-center',
+              !fullscreen && 'rounded-t-md',
+            )}
+          >
+            <DialogPrimitive.Title className="relative max-w-full truncate text-nowrap text-lg font-semibold text-marine-high-emphasis">
+              {title}
+            </DialogPrimitive.Title>
+            {showCloseButton && (
+              <div className="absolute right-2 top-0 flex h-12 items-center justify-center">
+                <DialogPrimitive.Close asChild>
+                  <IconButton
+                    iconName="cancel"
+                    variant="ghost"
+                    size="sm"
+                    aria-label={`close-${title}`}
+                  />
+                </DialogPrimitive.Close>
+              </div>
+            )}
+          </div>
+          <div
+            className={twJoin(
+              'mt-12 flex max-h-[calc(100%_-_theme(space.12))] w-full flex-col overflow-y-auto',
+              bodyClassName,
+            )}
+          >
+            {heroContent}
+            <div
+              className={twJoin(
+                'flex grow flex-col gap-8',
+                !disableSpacing && 'p-6 md:p-10',
+                heightLimited && 'max-h-full',
+              )}
+            >
+              {children}
+              {(!!ctaLink || !!ctaButton) && (
+                <div className="flex flex-col justify-between gap-4 sm:flex-row">
+                  <div>
+                    {!!ctaLink && (
+                      <div className="text-base text-marine-high-emphasis underline">
+                        {ctaLink}
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex gap-6">{ctaButton}</div>
+                </div>
+              )}
+            </div>
+
+            {footerContent && (
+              <div
+                className={twJoin(
+                  'sticky -bottom-0 left-0 right-0',
+                  'pb-6 pt-4 md:pb-4',
+                  !disableSpacing && 'px-6 md:px-10',
+                  'bg-surface-white',
+                )}
+              >
+                {footerContent}
+              </div>
+            )}
+          </div>
+
+          {showBackButton && (
+            <div className="absolute left-4 top-0 flex h-12 items-center justify-center">
+              <IconButton
+                iconName="arrow-left"
+                aria-label={`navigate-back-${title}`}
+                variant="secondary"
+                size="sm"
+                onClick={onBack}
+              />
+            </div>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Overlay>
+    </DialogPrimitive.Portal>
+  );
+};
+
+const createOnCloseAutoFocusHandler = (
+  disableOnCloseFocusReset: boolean | undefined,
+): DialogContentProps['onCloseAutoFocus'] => {
+  if (disableOnCloseFocusReset === true) {
+    return undefined;
+  }
+
+  return event => {
+    event.preventDefault();
+
+    const target = event.target as HTMLElement | null;
+
+    if (!target) return;
+
+    target.focus();
+    target.blur();
+  };
+};
+
+export { Dialog, DialogTrigger, DialogContent, DialogClose };

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

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

package/src/components/core/Divider/Divider.tsx

@@ -0,0 +1,37 @@
+import type { FC, HTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+
+type Props = HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+  align?: 'vertical' | 'horizontal';
+  color?: 'secondary-20' | 'secondary-40' | 'primary-40' | 'primary-100';
+};
+
+/**
+ * Dividers are thin lines that group and/or divide content in lists or other containers.
+ */
+export const Divider: FC<Props> = ({
+  asChild,
+  align = 'horizontal',
+  color = 'secondary-40',
+  ...rest
+}) => {
+  const classNames = {
+    'secondary-20': 'bg-stroke-secondary-20',
+    'secondary-40': 'bg-stroke-secondary-40',
+    'primary-40': 'bg-stroke-primary-40',
+    'primary-100': 'bg-stroke-primary-100',
+  };
+
+  const colorClass = classNames[color] || classNames['secondary-40'];
+  const className = twMerge(
+    align === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+    rest.className,
+    `border-0 appearance-none ${colorClass}`,
+  );
+
+  const Element = asChild ? Slot : 'div';
+
+  return <Element {...rest} className={className} />;
+};

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

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