@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/Alert.tsx

@@ -1,81 +0,0 @@
-import clsx from "clsx";
-import { Button } from "./Button";
-import { Heading2 } from "./Heading";
-import { Icon } from "./Icon";
-import { Paragraph } from "./Paragraph";
-import { Stack } from "./Stack";
-import { HTMLAttributes, useCallback } from "react";
-
-export type AlertVariant = "error" | "warning";
-
-export interface AlertProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "className"> {
-  id?: string;
-  testId?: string;
-  variant: AlertVariant;
-  title: string;
-  message: string;
-  dismissible?: boolean;
-  onClose?: () => void;
-}
-export function Alert({
-  id,
-  testId,
-  variant,
-  title,
-  message,
-  dismissible = false,
-  onClose,
-  ...rest
-}: AlertProps) {
-  const isError = variant === "error";
-
-  const handleClose = useCallback(() => {
-    if (onClose) onClose();
-  }, [onClose]);
-
-  return (
-    <Stack
-      id={id}
-      data-testid={testId}
-      sizing="container"
-      backgroundColor="background-grouped-primary-normal"
-      borderColor="border-primary-normal"
-      items="start"
-      elevation={4}
-      rounded
-      padding
-      horizontal
-      horizontalMobile
-      {...rest}
-    >
-      <div
-        className={clsx("min-w-[2px] min-h-full flex", {
-          "bg-background-critical-normal": isError,
-          "bg-background-warning-normal": !isError,
-        })}
-      />
-      <span
-        className={clsx({
-          "text-icon-critical-normal": isError,
-          "text-icon-warning-normal": !isError,
-        })}
-      >
-        <Icon name="warning" />
-      </span>
-      <Stack flexGrow={1} sizing="component">
-        <Heading2>{title}</Heading2>
-        <Paragraph>{message}</Paragraph>
-      </Stack>
-      {dismissible && (
-        <Button
-          aria-label="Dismiss alert"
-          iconOnly
-          variant="tertiary"
-          leftIcon={<Icon name="close" />}
-          onClick={handleClose}
-        />
-      )}
-    </Stack>
-  );
-}

package/src/components/Breadcrumbs.tsx

@@ -1,142 +0,0 @@
-"use client";
-
-import React, { useLayoutEffect, useState } from "react";
-import clsx from "clsx";
-import { Link } from "./Link";
-import { Icon } from "./Icon";
-
-type BreadcrumbsProps = {
-  asCardStyle?: boolean;
-  path?: string; // Optional override for SSR / testing
-  crumbs: BreadcrumbProps[];
-  id?: string;
-  testid?: string;
-};
-
-type BreadcrumbProps = {
-  href: string;
-  children: React.ReactNode;
-  onClick?: () => void; // Optional click handler
-  id?: string;
-  testid?: string;
-};
-
-export const Breadcrumb = ({
-  href,
-  children,
-  onClick,
-  id,
-  testid,
-}: BreadcrumbProps) => {
-  const linkPadding = clsx(
-    "!text-text-link-normal  whitespace-nowrap",
-    "py-mobile-component-padding",
-    "desktop:py-desktop-component-padding",
-    "compact:py-desktop-compact-component-padding",
-  );
-
-  return (
-    <li key={href} id={id} data-testid={testid} className="flex items-center">
-      <Link
-        id={id ? `${id}-link` : undefined}
-        data-testid={testid ? `${testid}-link` : undefined}
-        className={clsx(linkPadding, "!text-caption-desktop")}
-        href={href}
-        typographyStyle="caption"
-        onClick={onClick}
-      >
-        {children}
-      </Link>
-    </li>
-  );
-};
-
-const Chevron = () => (
-  <li className="flex items-center" aria-hidden="true">
-    <Icon name="chevron_right" size={16} />
-  </li>
-);
-
-export const Breadcrumbs = ({
-  asCardStyle,
-  id,
-  testid,
-  crumbs,
-}: BreadcrumbsProps) => {
-  const scrollableElement = React.useRef<HTMLElement | null>(null);
-  const [isOverflow, setIsOverflow] = useState(false);
-
-  useLayoutEffect(() => {
-    scrollableElement.current?.scrollTo({
-      left: scrollableElement.current?.scrollWidth ?? 0,
-      behavior: "instant",
-    });
-
-    updateOverflow();
-  }, [scrollableElement, crumbs]);
-
-  const updateOverflow = () => {
-    if (!scrollableElement.current) return;
-
-    setIsOverflow(
-      scrollableElement.current.scrollWidth !==
-        scrollableElement.current.clientWidth &&
-        scrollableElement.current.scrollLeft > 0,
-    );
-  };
-
-  return (
-    <nav
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "relative select-none flex items-center  max-w-full w-full",
-        {
-          "bg-white rounded-base shadow-4 px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding":
-            asCardStyle,
-          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding":
-            !asCardStyle,
-        },
-      )}
-      aria-label="Breadcrumb"
-    >
-      <div
-        className={clsx(
-          isOverflow ? "opacity-100" : "opacity-0",
-          "absolute left-6 top-0 h-full w-12 bg-gradient-to-r from-white to-transparent pointer-events-none z-10 transition",
-        )}
-      />
-
-      <ol
-        id={id ? `${id}-list` : undefined}
-        data-testid={testid ? `${testid}-list` : undefined}
-        className="flex items-center overflow-x-scroll"
-        style={{ scrollbarWidth: "none" }}
-        onScroll={updateOverflow}
-        ref={(el) => {
-          scrollableElement.current = el;
-        }}
-      >
-        {crumbs.map((crumb, index) => {
-          const { href, children, onClick } = crumb;
-
-          return (
-            <React.Fragment key={index}>
-              {index > 0 && <Chevron />}
-              <Breadcrumb
-                href={href}
-                onClick={onClick}
-                id={id ? `${id}-crumb-${index}` : undefined}
-                testid={testid ? `${testid}-crumb-${index}` : undefined}
-              >
-                {children}
-              </Breadcrumb>
-            </React.Fragment>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-Breadcrumbs.displayName = "Breadcrumbs";

package/src/components/Button.tsx

@@ -1,216 +0,0 @@
-import clsx from "clsx";
-import { ReactNode, ButtonHTMLAttributes } from "react";
-import {
-  baseTransition,
-  componentGap,
-  componentPaddingMinus2pxBorder,
-  componentPaddingXUsingComponentGap,
-  paddingUsingComponentGap,
-  typography,
-} from "../classNames";
-import { AsProps } from "../types";
-type Tags = "a" | "button" | React.ElementType;
-
-type BaseButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children"
-> & {
-  as?: Tags;
-  variant?:
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "primary-critical"
-    | "secondary-critical"
-    | "tertiary-critical"
-    | "navigation";
-  iconOnly?: boolean;
-  block?: boolean;
-  className?: string;
-  classNameLabel?: string;
-  disabled?: boolean;
-  colorClassName?: string;
-  href?: string;
-  id?: string;
-  testid?: string;
-};
-
-// At least one of leftIcon, rightIcon, or children must be provided
-type RequireAtLeastOneContent =
-  | { leftIcon: ReactNode; rightIcon?: ReactNode; children?: ReactNode }
-  | { rightIcon: ReactNode; leftIcon?: ReactNode; children?: ReactNode }
-  | { children: ReactNode; leftIcon?: ReactNode; rightIcon?: ReactNode };
-
-export type ButtonProps = BaseButtonProps & RequireAtLeastOneContent;
-
-export const Button = ({
-  variant = "primary",
-  as = "button",
-  block,
-  leftIcon,
-  rightIcon,
-  className,
-  classNameLabel,
-  disabled = false,
-  children,
-  iconOnly = false,
-  colorClassName,
-  href,
-  id,
-  testid,
-  ...props
-}: AsProps<Tags> & ButtonProps) => {
-  const primaryVariantStyles =
-    variant === "primary" &&
-    clsx(
-      colorClassName?.trim()
-        ? colorClassName
-        : "text-text-on-action-primary-normal",
-      "bg-background-action-primary-normal border-background-action-primary-normal",
-      "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
-      "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
-      "active:bg-background-action-primary-active active:border-background-action-primary-active",
-      "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled",
-    );
-
-  const secondaryVariantStyles =
-    variant === "secondary" &&
-    clsx(
-      colorClassName?.trim()
-        ? colorClassName
-        : "text-text-action-primary-normal",
-      "bg-background-action-secondary-normal border-border-action-normal",
-      "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
-      "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
-      "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
-      "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled",
-    );
-
-  const tertiaryVariantStyles =
-    variant === "tertiary" &&
-    clsx(
-      "bg-transparent border-transparent",
-      iconOnly
-        ? colorClassName?.trim()
-          ? colorClassName
-          : "text-icon-action-primary-normal"
-        : colorClassName?.trim()
-          ? colorClassName
-          : "text-text-action-primary-normal",
-      "bg-transparent border-transparent",
-      "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
-      "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-      "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
-      "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled",
-    );
-
-  const primaryCriticalVariantStyles =
-    variant === "primary-critical" &&
-    clsx(
-      colorClassName?.trim()
-        ? colorClassName
-        : "text-text-on-action-primary-normal",
-      "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
-      "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
-      "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
-      "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
-      "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled",
-    );
-
-  const secondaryCriticalVariantStyles =
-    variant === "secondary-critical" &&
-    clsx(
-      colorClassName?.trim()
-        ? colorClassName
-        : "text-text-action-critical-normal",
-      "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
-      "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
-      "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
-      "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
-      "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled",
-    );
-
-  const tertiaryCriticalVariantStyles =
-    variant === "tertiary-critical" &&
-    clsx(
-      colorClassName?.trim()
-        ? colorClassName
-        : "text-text-action-critical-normal",
-      "bg-transparent border-transparent text-text-action-critical-normal",
-      "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
-      "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
-      "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
-      "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled",
-    );
-
-  const navigationVarianStyles =
-    variant === "navigation" &&
-    clsx(
-      colorClassName?.trim()
-        ? colorClassName
-        : "text-text-action-primary-normal",
-      "bg-transparent",
-      "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-      "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-      "active:bg-background-action-secondary-active active:text-text-action-primary-active",
-      "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
-      "flex-col",
-      paddingUsingComponentGap,
-    );
-
-  const notNavigationVariantStyles =
-    variant !== "navigation" &&
-    clsx("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
-
-  const buttonClasses = clsx(
-    disabled ? "cursor-default" : "cursor-pointer",
-    block ? "w-full" : "w-fit",
-    baseTransition,
-    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
-    primaryVariantStyles,
-    secondaryVariantStyles,
-    tertiaryVariantStyles,
-    primaryCriticalVariantStyles,
-    secondaryCriticalVariantStyles,
-    tertiaryCriticalVariantStyles,
-
-    navigationVarianStyles,
-    notNavigationVariantStyles,
-    className,
-  );
-
-  const labelClasses = clsx(
-    "min-h-6 flex items-center justify-center",
-    classNameLabel,
-    componentPaddingXUsingComponentGap,
-    typography.buttonLabel,
-  );
-
-  const Element = href && !as ? "a" : as;
-
-  return (
-    <Element
-      id={id}
-      data-testid={testid}
-      type={Element === "button" ? "button" : undefined}
-      className={buttonClasses}
-      {...props}
-      onClick={props.onClick}
-      disabled={disabled}
-      href={href}
-      data-theme={variant === "navigation" ? "brand" : undefined}
-    >
-      {leftIcon && leftIcon}
-
-      {!iconOnly && children && (
-        <span id={id ? `${id}-label` : undefined} data-testid={testid ? `${testid}-label` : undefined} className={labelClasses}>
-          {children}
-        </span>
-      )}
-
-      {rightIcon && rightIcon}
-    </Element>
-  );
-};
-
-Button.displayName = "Button";