@altruist03/ui 0.1.0 → 0.2.0

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useCallback } from 'react';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import { getBadgeTokensFromResolved } from '../../tokens';
+import type { BadgeProps } from './Badge.types';
+
+function CloseIcon({ size }: { size: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d="M1 1L11 11M11 1L1 11"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const Badge = ({
+  children,
+  variant = 'default',
+  size = 'md',
+  color = 'grey',
+  onRemove,
+  disabled = false,
+  removeLabel,
+  style,
+  className,
+}: BadgeProps) => {
+  const [removeHovered, setRemoveHovered] = useState(false);
+  const resolvedTokens = useTokens();
+  const tokens = getBadgeTokensFromResolved(resolvedTokens);
+
+  const height =
+    size === 'xs' ? tokens.heightXs
+    : size === 'sm' ? tokens.heightSm
+    : size === 'lg' ? tokens.heightLg
+    : tokens.heightMd;
+  const isCircle = variant === 'circle';
+  const padding =
+    size === 'xs' ? tokens.paddingXs
+    : size === 'sm' ? tokens.paddingSm
+    : size === 'lg' ? tokens.paddingLg
+    : tokens.paddingMd;
+  const fontSize =
+    size === 'xs' ? tokens.fontSizeXs
+    : size === 'sm' ? tokens.fontSizeSm
+    : size === 'lg' ? tokens.fontSizeLg
+    : tokens.fontSizeMd;
+  const borderRadius =
+    size === 'xs' ? tokens.borderRadiusXs
+    : size === 'sm' ? tokens.borderRadiusSm
+    : size === 'lg' ? tokens.borderRadiusLg
+    : tokens.borderRadiusMd;
+  const iconSize =
+    size === 'xs' ? tokens.removeIconSizeXs
+    : size === 'sm' ? tokens.removeIconSizeSm
+    : size === 'lg' ? tokens.removeIconSizeLg
+    : tokens.removeIconSizeMd;
+
+  const handleRemoveClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled && onRemove) onRemove(e);
+    },
+    [disabled, onRemove]
+  );
+
+  const removeButtonColor =
+    disabled ? tokens.removeButtonColor
+    : removeHovered ? tokens.removeButtonHoverColor
+    : tokens.removeButtonColor;
+
+  const backgroundColor = color === 'white' ? tokens.backgroundWhite : tokens.background;
+
+  return (
+    <span
+      className={className}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: isCircle ? 0 : 6,
+        boxSizing: 'border-box',
+        padding: isCircle ? 0 : padding,
+        fontSize,
+        fontWeight: 400,
+        backgroundColor,
+        color: tokens.color,
+        borderRadius: isCircle ? '50%' : borderRadius,
+        border: isCircle ? `1px solid ${tokens.borderColor}` : undefined,
+        width: isCircle ? height : undefined,
+        height: isCircle ? height : undefined,
+        minWidth: isCircle ? height : undefined,
+        boxShadow: isCircle ? 'none' : tokens.boxShadow,
+        opacity: disabled ? 0.6 : 1,
+        ...style,
+      }}
+    >
+      <span style={{ lineHeight: 1.4 }}>{children}</span>
+      {onRemove != null && (
+        <button
+          type="button"
+          onClick={handleRemoveClick}
+          onMouseDown={(e) => e.preventDefault()}
+          onMouseEnter={() => setRemoveHovered(true)}
+          onMouseLeave={() => setRemoveHovered(false)}
+          disabled={disabled}
+          aria-label={removeLabel ?? `Remove ${typeof children === 'string' ? children : 'item'}`}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: iconSize + 4,
+            height: iconSize + 4,
+            padding: 0,
+            border: 'none',
+            background: 'transparent',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            color: removeButtonColor,
+            marginLeft: 2,
+          }}
+        >
+          <CloseIcon size={iconSize} />
+        </button>
+      )}
+    </span>
+  );
+};

package/src/components/Badge/Badge.types.ts

@@ -0,0 +1,24 @@
+import type { BadgeSize } from '../../tokens';
+
+export type BadgeVariant = 'default' | 'circle';
+
+export interface BadgeProps {
+  /** Badge content (label) */
+  children: React.ReactNode;
+  /** Shape variant */
+  variant?: BadgeVariant;
+  /** Size variant */
+  size?: BadgeSize;
+  /** Background color variant */
+  color?: 'grey' | 'white';
+  /** Callback when remove button is clicked. When provided, shows the remove (X) button. */
+  onRemove?: (e: React.MouseEvent) => void;
+  /** Disables the badge and remove button */
+  disabled?: boolean;
+  /** Accessible label for the remove button (e.g. "Remove Verified") */
+  removeLabel?: string;
+  /** Additional CSS styles */
+  style?: React.CSSProperties;
+  /** Additional CSS class name */
+  className?: string;
+}

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Breadcrumb } from "./Breadcrumb";
+import type { BreadcrumbProps, BreadcrumbOption } from "./Breadcrumb.types";
+
+const defaultOptions: BreadcrumbOption[] = [
+  { label: "Campaign", value: "campaign" },
+  { label: "Schedule", value: "schedule" },
+];
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: "Design System/Breadcrumb",
+  component: Breadcrumb,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "420px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    options: defaultOptions,
+    value: "schedule",
+    separator: " > ",
+  } as BreadcrumbProps,
+  argTypes: {
+    value: {
+      control: { type: "radio" },
+      options: ["campaign", "schedule"],
+    },
+    separator: {
+      control: { type: "text" },
+    },
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Playground: Story = {
+  args: {
+    options: defaultOptions,
+    value: "schedule",
+  },
+  render: function PlaygroundRender(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <Breadcrumb
+        {...args}
+        value={value}
+        onChange={(v) => {
+          setValue(v);
+          args.onChange?.(v);
+        }}
+      />
+    );
+  },
+};
+
+export const Showcase: Story = {
+  render: function ShowcaseRender() {
+    const [value1, setValue1] = useState("schedule");
+    const [value2, setValue2] = useState("schedule");
+    const [value3, setValue3] = useState("schedule");
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {/* Campaign > Schedule (2 levels) */}
+        <Breadcrumb
+          options={[
+            { label: "Campaign", value: "campaign" },
+            { label: "Schedule", value: "schedule" },
+          ]}
+          value={value1}
+          onChange={setValue1}
+        />
+
+        {/* Home > Campaigns > Schedule (3 levels) */}
+        <Breadcrumb
+          options={[
+            { label: "Home", value: "home" },
+            { label: "Campaigns", value: "campaigns" },
+            { label: "Schedule", value: "schedule" },
+          ]}
+          value={value2}
+          onChange={setValue2}
+        />
+
+        {/* Using optionArray prop */}
+        <Breadcrumb
+          optionArray={[
+            { label: "Campaign", value: "campaign" },
+            { label: "Schedule", value: "schedule" },
+          ]}
+          value={value3}
+          onChange={setValue3}
+        />
+
+        {/* Custom separator */}
+        <Breadcrumb
+          options={[
+            { label: "Campaign", value: "campaign" },
+            { label: "Schedule", value: "schedule" },
+          ]}
+          value="schedule"
+          separator=" / "
+        />
+      </div>
+    );
+  },
+};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { getBreadcrumbTokensFromResolved } from "../../tokens";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import type { BreadcrumbProps, BreadcrumbOption } from "./Breadcrumb.types";
+
+function toColor(value: string | undefined, fallback: string): string {
+  if (!value || typeof value !== "string") return fallback;
+  const s = value.trim();
+  if (s.includes("{")) return fallback;
+  if (s.startsWith("#") || s.startsWith("rgb") || s.startsWith("hsl")) return s;
+  if (/^[0-9A-Fa-f]{6}$/.test(s)) return `#${s}`;
+  return fallback;
+}
+
+export const Breadcrumb = ({
+  options,
+  optionArray,
+  value,
+  onChange,
+  separator = " > ",
+  style,
+  ...rest
+}: BreadcrumbProps) => {
+  const resolvedTokens = useTokens();
+  const t = getBreadcrumbTokensFromResolved(resolvedTokens);
+
+  const items: BreadcrumbOption[] = optionArray ?? options ?? [];
+
+  const itemColor = toColor(t.itemColor, "#1f1f1f");
+  const currentColor = toColor(t.currentColor, "#1f1f1f");
+  const separatorColor = toColor(t.separatorColor, "#1f1f1f");
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Breadcrumb"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: t.gap,
+        fontFamily: t.fontFamily,
+        fontSize: t.fontSize,
+        lineHeight: t.lineHeight,
+        color: itemColor,
+        ...style,
+      }}
+      {...rest}
+    >
+      {items.map((option, index) => {
+        const isLast = index === items.length - 1;
+        const isCurrent = option.value === value || isLast;
+        const isClickable = !isCurrent && !!onChange;
+
+        return (
+          <React.Fragment key={option.value}>
+            {index > 0 && (
+              <span
+                aria-hidden
+                style={{
+                  color: separatorColor,
+                  fontWeight: t.fontWeight,
+                  fontFamily: t.fontFamily,
+                  fontSize: t.fontSize,
+                  lineHeight: t.lineHeight,
+                  userSelect: "none",
+                }}
+              >
+                {separator}
+              </span>
+            )}
+            {isClickable ? (
+              <button
+                type="button"
+                onClick={() => onChange?.(option.value)}
+                style={{
+                  background: "none",
+                  border: "none",
+                  padding: 0,
+                  margin: 0,
+                  cursor: "pointer",
+                  color: itemColor,
+                  fontWeight: t.itemFontWeight,
+                  fontFamily: t.fontFamily,
+                  fontSize: t.fontSize,
+                  lineHeight: t.lineHeight,
+                  textDecoration: "none",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.textDecoration = "underline";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.textDecoration = "none";
+                }}
+              >
+                {option.label}
+              </button>
+            ) : (
+              <span
+                style={{
+                  color: currentColor,
+                  fontWeight: t.fontWeight,
+                  fontFamily: t.fontFamily,
+                  fontSize: t.fontSize,
+                  lineHeight: t.lineHeight,
+                }}
+              >
+                {option.label}
+              </span>
+            )}
+          </React.Fragment>
+        );
+      })}
+    </nav>
+  );
+};

package/src/components/Breadcrumb/Breadcrumb.types.ts

@@ -0,0 +1,22 @@
+export interface BreadcrumbOption {
+  /** Display label for the breadcrumb item */
+  label: string;
+  /** Value used for selection and onChange */
+  value: string;
+}
+
+export interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+  /**
+   * Array of options to display as breadcrumb path.
+   * Each option has `label` (display text) and `value` (for selection).
+   */
+  options: BreadcrumbOption[];
+  /** Alias for `options` - use either `options` or `optionArray` */
+  optionArray?: BreadcrumbOption[];
+  /** Currently selected/active value. The matching item is styled as current (non-clickable). */
+  value: string;
+  /** Called when user clicks a parent breadcrumb item (not the current one). */
+  onChange?: (value: string) => void;
+  /** Separator between breadcrumb items. Defaults to " > " */
+  separator?: string;
+}