@dmsi/wedgekit-react 0.0.4

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,113 @@
+"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";
+
+export interface NotificationProps {
+  variant?: "success" | "warning" | "error" | "info";
+  title?: string;
+  message?: string;
+  removeMessage?: boolean;
+  description?: string;
+  removeDescription?: boolean;
+  disclaimer?: string;
+  removeDisclaimer?: 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,
+  removeMessage = false,
+  description,
+  removeDescription = false,
+  disclaimer,
+  removeDisclaimer = 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",
+        className,
+        card && "shadow-4",
+      )}
+      {...props}
+    >
+      <div className="flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap">
+        {iconElement}
+
+        <div className="flex flex-col gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap">
+          {title && <Heading3 as="h3">{title}</Heading3>}
+          {message && !removeMessage && <Paragraph as="p">{message}</Paragraph>}
+          {description && !removeDescription && (
+            <Paragraph as="p">{description}</Paragraph>
+          )}
+          {disclaimer && !removeDisclaimer && (
+            <Paragraph as="p">{disclaimer}</Paragraph>
+          )}
+        </div>
+      </div>
+
+      <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";

package/src/components/ProjectBar.tsx

@@ -0,0 +1,76 @@
+import clsx from "clsx";
+import { ComponentProps, ReactNode } from "react";
+import {
+  containerPaddingX,
+  layoutGap,
+  layoutGroupGap,
+  paddingYUsingLayoutGroupGap,
+} from "../classNames";
+import { useMatchesMobile } from "./useMatchesMedia";
+
+type ProjectBarProps = {
+  left: ReactNode;
+  right: ReactNode;
+  mobileLeft: ReactNode;
+  mobileRight: ReactNode;
+};
+
+export const ProjectBar = ({
+  left,
+  right,
+  mobileLeft,
+  mobileRight,
+}: ComponentProps<"div"> & ProjectBarProps) => {
+  const isMobile = useMatchesMobile();
+
+  const tokenOverrides = isMobile
+    ? {
+        "--color-background-primary-normal": "var(--color-brand-400)",
+        "--color-background-action-primary-normal": "var(--color-neutral-000)",
+        "--color-background-action-primary-hover": "var(--color-critical-100)",
+        "--color-background-action-primary-active": "var(--color-neutral-200)",
+        "--color-background-action-secondary-normal": "var(--color-brand-400)",
+        "--color-background-action-secondary-hover":
+          "var(--color-critical-100)",
+
+        "--color-text-on-action-primary-normal": "var(--color-brand-400)",
+        "--color-text-primary-normal": "var(--color-neutral-000)",
+        "--color-text-action-primary-normal": "var(--color-neutral-000)",
+        "--color-text-action-primary-hover": "var(--color-critical-500)",
+        "--color-text-action-primary-active": "var(--color-critical-300)",
+
+        "--color-border-action-normal": "var(--color-neutral-000)",
+        "--color-border-action-hover": "var(--color-critical-500)",
+        "--color-border-action-active": "var(--color-critical-300)",
+      }
+    : {};
+
+  return (
+    <div
+      style={{ ...tokenOverrides } as React.CSSProperties}
+      className={clsx(
+        "flex items-center justify-between",
+        "bg-background-primary-normal",
+        paddingYUsingLayoutGroupGap,
+        containerPaddingX,
+        layoutGap,
+      )}
+    >
+      <div className={clsx("hidden desktop:block flex-1 leading-[1]")}>
+        {left}
+      </div>
+
+      <div className={clsx("hidden desktop:flex items-center", layoutGroupGap)}>
+        {right}
+      </div>
+
+      <div className={clsx("flex flex-col desktop:hidden")}>{mobileLeft}</div>
+
+      <div className={clsx("flex items-center desktop:hidden", layoutGroupGap)}>
+        {mobileRight}
+      </div>
+    </div>
+  );
+};
+
+ProjectBar.displayName = "ProjectBar";

package/src/components/Radio.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import { baseTransition } from "../classNames";
+import { Paragraph } from "./Paragraph";
+import { TextColorTokens } from "../types";
+
+interface RadioProps
+  extends Omit<
+    ComponentProps<"input">,
+    "type" | "children" | "dangerouslySetInnerHTML"
+  > {
+  label?: string;
+  error?: boolean;
+  readOnly?: boolean;
+}
+
+export const Radio = ({
+  className,
+  label,
+  error,
+  disabled,
+  checked,
+  readOnly,
+  ...props
+}: RadioProps) => {
+  const radioId = props.id;
+
+  const paragraphColor: TextColorTokens = disabled
+    ? "text-primary-disabled"
+    : error
+      ? "text-primary-error"
+      : "text-primary-normal";
+
+  const defaultClassName = clsx(
+    !error &&
+      !disabled &&
+      "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover",
+  );
+
+  const errorClassName = clsx(
+    error &&
+      !disabled &&
+      "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 ",
+  );
+
+  const disabledClassName = clsx(
+    disabled &&
+      "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0",
+  );
+
+  const readonlyClassName = clsx(
+    readOnly &&
+      "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0",
+  );
+
+  return (
+    <label
+      htmlFor={radioId}
+      className={clsx(
+        "flex items-center gap-desktop-component-gap",
+        disabled ? "cursor-default" : "cursor-pointer",
+        className,
+      )}
+    >
+      <div className="relative">
+        <input
+          id={radioId}
+          type="radio"
+          className="sr-only peer"
+          disabled={disabled}
+          checked={checked}
+          readOnly={readOnly}
+          {...props}
+        />
+        <div
+          className={clsx(
+            "size-6 rounded-full border flex items-center justify-center",
+            baseTransition,
+            defaultClassName,
+            errorClassName,
+            disabledClassName,
+            readonlyClassName,
+          )}
+        >
+          {checked && (
+            <RadioIcon
+              className={clsx(
+                "transition-colors",
+                !error &&
+                  !disabled &&
+                  "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
+                error &&
+                  !disabled &&
+                  "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
+                disabled && "text-icon-on-action-secondary-disabled",
+                readOnly && "text-icon-on-action-secondary-disabled",
+              )}
+            />
+          )}
+        </div>
+      </div>
+
+      {label && (
+        <Paragraph className="px-mobile-component-gap" color={paragraphColor}>
+          {label}
+        </Paragraph>
+      )}
+    </label>
+  );
+};
+
+Radio.displayName = "Radio";
+
+const RadioIcon = ({ className }: { className: string }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <rect
+        x="1"
+        y="1"
+        width="22"
+        height="22"
+        rx="11"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <rect x="4" y="4" width="16" height="16" rx="8" fill="currentColor" />
+    </svg>
+  );
+};
+
+RadioIcon.displayName = "RadioIcon";