@dmsi/wedgekit-react 0.0.2

package/src/components/ModalButtons.tsx

@@ -0,0 +1,44 @@
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+
+type ModalButtonsProps = {
+  title?: string;
+  onClose?: () => void;
+  onContinue?: () => void;
+  sampleWidth?: boolean;
+  customActions?: React.ReactNode;
+};
+
+export const ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions,
+}: ModalButtonsProps) => {
+  return (
+    <div className="border-t border-neutral-300 p-4 flex justify-end space-x-2">
+      {customActions ?? (
+        <>
+          <Button
+            variant="secondary"
+            leftIcon={<Icon name="close" size={24} />}
+            onClick={onClose}
+            className="max-sm:w-full"
+          >
+            Close
+          </Button>
+
+          <Button
+            variant="primary"
+            leftIcon={<Icon name="check" size={24} />}
+            className="max-sm:w-full"
+            onClick={onContinue} // Assuming you want to close the modal on continue
+          >
+            Continue
+          </Button>
+        </>
+      )}
+    </div>
+  );
+};
+
+ModalButtons.displayName = "ModalButtons";

package/src/components/ModalContent.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+
+export interface ModalContentProps {
+  fixedHeightScrolling?: boolean;
+}
+
+export function ModalContent({
+  fixedHeightScrolling,
+  children,
+}: React.PropsWithChildren<ModalContentProps>) {
+  return (
+    <div
+      className={clsx(
+        "flex-grow desktop:flex-grow-0 p-4",
+        fixedHeightScrolling && "overflow-auto",
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+ModalContent.displayName = "ModalContent";

package/src/components/ModalHeader.tsx

@@ -0,0 +1,41 @@
+import { Heading2 } from "./Heading";
+
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+
+type ModalHeaderProps = {
+  title?: string;
+  hideCloseIcon?: boolean;
+  headerIcon?: React.ReactNode;
+  onClose?: () => void;
+};
+
+export const ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  onClose,
+}: ModalHeaderProps) => {
+  return (
+    <div className="flex justify-between items-center p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap">
+      <div className="flex items-center gap-2">
+        {headerIcon}
+        {title && <Heading2 as="p">{title}</Heading2>}
+      </div>
+      {!hideCloseIcon && (
+        <Button
+          iconOnly
+          variant="tertiary"
+          onClick={onClose}
+          leftIcon={
+            <span className="text-icon-primary-normal contents">
+              <Icon name="close" size={24} />
+            </span>
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+ModalHeader.displayName = "ModalHeader";

package/src/components/ModalScrim.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import { PropsWithChildren } from "react";
+
+type ModalScrimProps = PropsWithChildren<{
+  sampleWidth?: boolean;
+  show?: boolean;
+  size?: "small" | "medium" | "large" | "x-large";
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  ref?: React.Ref<HTMLDivElement>;
+}>;
+
+export const ModalScrim = ({
+  show = false,
+  size = "small",
+  children,
+  onClick,
+  ref,
+}: ModalScrimProps) => {
+  return (
+    <div
+      className={clsx(
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
+        !show && " pointer-events-none",
+        size === "small" && "p-4",
+        "inset-0 z-50",
+      )}
+      onMouseDown={onClick}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+};
+
+ModalScrim.displayName = "ModalScrim";

package/src/components/NavigationTab.tsx

@@ -0,0 +1,89 @@
+import clsx from "clsx";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+import { CSSProperties } from "react";
+
+export type NavigationTabProps = {
+  label?: string;
+  onClick?: () => void;
+  selected?: boolean;
+  className?: string;
+  disabled?: boolean;
+  colorPrimitives?: "dmsi" | "agility";
+  href?: string;
+};
+
+export const NavigationTab = ({
+  label,
+  onClick,
+  selected = false,
+  className,
+  disabled = false,
+  href,
+  ...props
+}: NavigationTabProps) => {
+  const textClassName = clsx(
+    // "!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "!text-brand-text-on-action-primary-hover",
+    // "hover:!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "hover:!text-brand-text-on-action-primary-hover",
+    // "active:!text-text-on-action-primary-active", // use this once semantic tokens are available
+    "active:!text-brand-text-on-action-primary-active",
+    "disabled:!text-brand-text-on-action-primary-disabled",
+  );
+
+  const disabledClassName = clsx(
+    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none",
+  );
+
+  const paddingClassName = clsx(
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+  );
+
+  const unselectedClassName = clsx(
+    "!bg-brand-200",
+    "hover:!bg-background-on-action-primary-normal",
+    // "hover:!bg-background-action-primary-normal", // use this once semantic tokens are available
+    "active:!bg-background-on-action-primary-active",
+    // "active:!bg-background-action-primary-active", // use this once semantic tokens are available
+    "shadow-nav-tab",
+  );
+
+  const selectedClassName = clsx(
+    "!bg-neutral-000",
+    "hover:!bg-background-on-action-primary-normal",
+    "active:!bg-background-on-action-primary-active",
+  );
+
+  const tokenOverrides: CSSProperties = {
+    '--color-text-on-action-primary-hover': 'var(--color-brand-500)',
+    '--color-text-on-action-primary-active': 'var(--color-brand-300)'
+  }
+
+  return (
+    <Button
+      variant="tertiary-critical"
+      colorClassName={textClassName}
+      className={clsx(
+        "!border-0 !rounded-b-none h-10 min-w-20 relative",
+        paddingClassName,
+        disabledClassName,
+        !selected && unselectedClassName,
+        selected && selectedClassName,
+        className,
+      )}
+      style={tokenOverrides}
+      classNameLabel="px-1"
+      rightIcon={<Icon name="close" size={16} />}
+      onClick={onClick}
+      disabled={disabled}
+      {...props}
+      as={href ? "a" : undefined}
+      href={href}
+    >
+      {label}
+    </Button>
+  );
+};
+
+NavigationTab.displayName = "NavigationTab";

package/src/components/NavigationTabs.tsx

@@ -0,0 +1,63 @@
+"use client";
+import clsx from "clsx";
+import { ReactNode, useState } from "react";
+import { NavigationTab } from "./NavigationTab";
+import { componentGap } from "../classNames";
+
+type Tab = {
+  id: string;
+  label: string;
+  href?: string;
+  content?: ReactNode;
+};
+
+export type NavigationTabsProps = {
+  tabs: Tab[];
+  onTabChange?: (tabId: string) => void;
+  colorPrimitives?: "dmsi" | "agility";
+};
+
+export const NavigationTabs = ({
+  tabs,
+  onTabChange,
+  colorPrimitives = "dmsi",
+}: NavigationTabsProps) => {
+  const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id);
+
+  const handleTabClick = (id: string) => {
+    setSelectedTab(id);
+    onTabChange?.(id);
+  };
+
+  const selectedContent = tabs.find((tab) => tab.id === selectedTab)?.content;
+  const selectedTabHasHref = tabs.find((tab) => tab.id === selectedTab)?.href;
+
+  return (
+    <div>
+      <div>
+        <div
+          className={clsx(
+            "flex items-center relative overflow-x-auto overflow-y-hidden",
+            componentGap,
+          )}
+        >
+          {tabs.map((tab) => (
+            <NavigationTab
+              key={tab.id}
+              label={tab.label}
+              selected={selectedTab === tab.id}
+              onClick={() => handleTabClick(tab.id)}
+              colorPrimitives={colorPrimitives}
+              href={tab.href}
+            />
+          ))}
+        </div>
+      </div>
+      {selectedContent && !selectedTabHasHref && (
+        <div className="mt-2">{selectedContent}</div>
+      )}
+    </div>
+  );
+};
+
+NavigationTabs.displayName = "NavigationTabs";

package/src/components/Notification.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import clsx from "clsx";
+
+import { ReactNode, useState } from "react";
+
+import { Button } from "./Button";
+import { Paragraph } from "./Paragraph";
+import { Heading3 } from "./Heading";
+import { Icon } from "./Icon";
+import { Stack } from "./Stack";
+
+export interface NotificationProps {
+  variant?: "success" | "warning" | "error" | "info";
+  title?: string;
+  message?: string;
+  enableMessage?: boolean;
+  description?: string;
+  enableDescription?: boolean;
+  disclaimer?: string;
+  enableDisclaimer?: boolean;
+  card?: boolean;
+  icon?: ReactNode;
+}
+
+const variants = {
+  success: {
+    className: "border-success-400",
+    icon: (
+      <span className="text-icon-success-normal contents">
+        <Icon name="check_circle" size={24} />
+      </span>
+    ),
+  },
+  warning: {
+    className: "border-warning-400",
+    icon: (
+      <span className="text-icon-warning-normal contents">
+        <Icon name="warning" size={24} />
+      </span>
+    ),
+  },
+  error: {
+    className: "border-critical-400",
+    icon: (
+      <span className="text-icon-critical-normal contents">
+        <Icon name="error" size={24} />
+      </span>
+    ),
+  },
+  info: {
+    className: "border-action-400",
+    icon: (
+      <span className="text-icon-on-action-secondary-normal contents">
+        <Icon name="info" size={24} />
+      </span>
+    ),
+  },
+};
+
+export const Notification = ({
+  variant = "success",
+  title,
+  message,
+  enableMessage = true,
+  description,
+  enableDescription = false,
+  disclaimer,
+  enableDisclaimer = false,
+  card = false,
+  ...props
+}: NotificationProps) => {
+  const [visible, setVisible] = useState(true);
+
+  const { className, icon: iconElement } =
+    variants[variant] ?? variants.success;
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={clsx(
+        "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white max-w-240",
+        className,
+        card && "shadow-4",
+      )}
+      {...props}
+    >
+      <Stack
+        horizontal
+        horizontalMobile
+        items="start"
+        justify="start"
+        sizing="layout"
+      >
+        {iconElement}
+
+        <Stack elevation={0} items="start" justify="start" sizing="component">
+          {title && <Heading3 as="h3">{title}</Heading3>}
+          {message && enableMessage && <Paragraph as="p">{message}</Paragraph>}
+          {description && enableDescription && (
+            <Paragraph as="p">{description}</Paragraph>
+          )}
+          {disclaimer && enableDisclaimer && (
+            <Paragraph as="p">{disclaimer}</Paragraph>
+          )}
+        </Stack>
+      </Stack>
+
+      <Button
+        iconOnly
+        variant="tertiary"
+        onClick={() => setVisible(false)}
+        leftIcon={<Icon name="close" size={24} />}
+      />
+    </div>
+  );
+};
+
+Notification.displayName = "Notification";

package/src/components/OptionPill.tsx

@@ -0,0 +1,114 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import {
+  baseTransition,
+  componentGap,
+  componentPadding,
+  componentPaddingMinusBorder,
+  componentPaddingYUsingComponentGap,
+} from "../classNames";
+import { Button } from "./Button";
+import { Label } from "./Label";
+import { Icon } from "./Icon";
+
+type OptionPillProps = {
+  selected?: boolean;
+  onClick?: () => void;
+  onRemove?: () => void;
+  removable?: boolean;
+  disabled?: boolean;
+};
+
+export const OptionPill = ({
+  selected = false,
+  onClick,
+  onRemove,
+  removable = false,
+  disabled = false,
+  children,
+  className,
+  ...props
+}: ComponentProps<"div"> & OptionPillProps) => {
+  const additionalAttributes = {
+    "data-disabled": disabled || null,
+    "data-selected": selected || null,
+  };
+
+  const classNames = clsx(
+    {
+      "hover:border-border-action-hover active:border-border-action-active":
+        !disabled,
+      "data-disabled:cursor-default data-disabled:border-border-primary-normal":
+        disabled,
+
+      "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active":
+        selected,
+
+      "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent":
+        disabled && selected,
+    },
+    !removable && componentPadding,
+    removable &&
+      "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
+  );
+
+  const textColor = clsx(
+    !disabled && "text-text-primary-normal",
+    disabled && !selected && "text-text-primary-disabled",
+    disabled && selected && "text-text-on-action-primary-disabled",
+  );
+
+  return (
+    <div
+      onClick={handleOnClick}
+      {...props}
+      {...additionalAttributes}
+      className={clsx(
+        "flex items-center justify-between cursor-pointer w-max",
+        "border border-border-primary-normal rounded-base",
+        "outline-2 outline-transparent -outline-offset-2",
+        componentGap,
+        baseTransition,
+        classNames,
+        className,
+        textColor,
+      )}
+    >
+      <Label padded className={componentPaddingYUsingComponentGap}>
+        {children}
+      </Label>
+
+      {removable && (
+        <Button
+          onClick={handleOnRemove}
+          disabled={disabled}
+          className={clsx(
+            "mx-0 h-full w-10 !border-0",
+            componentPaddingMinusBorder,
+          )}
+          iconOnly
+          variant="tertiary"
+          leftIcon={<Icon name="close" />}
+        />
+      )}
+    </div>
+  );
+
+  function handleOnClick() {
+    if (disabled) {
+      return;
+    }
+
+    onClick?.();
+  }
+
+  function handleOnRemove() {
+    if (!removable || !onRemove) {
+      return;
+    }
+
+    onRemove();
+  }
+};
+
+OptionPill.displayName = "OptionPill";

package/src/components/Paragraph.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import { componentPaddingXUsingComponentGap, typography } from "../classNames";
+import { AsProps, TextAttributes, TypographyProps } from "../types";
+
+type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
+
+type ParagraphProps = {
+  as?: Tags;
+} & AsProps<Tags> &
+  TextAttributes &
+  TypographyProps;
+
+export const Paragraph = ({
+  className,
+  color,
+  padded,
+  align = "left",
+  tall,
+  addOverflow,
+  children,
+  as = "p",
+  ...props
+}: ParagraphProps) => {
+  const Element = as;
+
+  return (
+    <Element
+      {...props}
+      className={clsx(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden",
+      )}
+      style={{
+        ...props.style,
+        color: color ? `var(--color-${color})` : undefined,
+      }}
+    >
+      {children}
+    </Element>
+  );
+};
+
+Paragraph.displayName = "Paragraph";

package/src/components/Password.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { ComponentProps, useState } from "react";
+import { InputBase, InputBaseProps } from "./Input";
+import { Icon } from "./Icon";
+
+export const Password = ({
+  ...props
+}: Omit<ComponentProps<"input">, "type" | "children"> & InputBaseProps) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <InputBase
+      {...props}
+      type={show ? "text" : "password"}
+      after={<WhichIcon show={show} setShow={setShow} />}
+    />
+  );
+};
+
+type WhichIconProps = {
+  show: boolean;
+  setShow: (value: boolean) => void;
+};
+
+const WhichIcon = ({ show, setShow }: WhichIconProps) => {
+  if (show) {
+    return (
+      <Icon
+        name="visibility_off"
+        className="cursor-pointer"
+        onClick={() => setShow(false)}
+      />
+    );
+  }
+
+  return (
+    <Icon
+      name="visibility"
+      className="cursor-pointer"
+      onClick={() => setShow(true)}
+    />
+  );
+};
+
+Password.displayName = "Password";