@mich8060/unified-design-system 0.1.10

package/src/ui/Dropdown/Dropdown.scss

@@ -0,0 +1,129 @@
+@use "../../styles/typography" as *;
+
+.uds-dropdown {
+  // ActionMenu default is inline-block; we override to full width
+  width: 100%;
+
+  // ── Outer wrapper (label + dropdown) ────────────────
+  &-outer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--uds-gap-8);
+    width: 100%;
+  }
+
+  // ── Element: label ──────────────────────────────────
+  &__label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+    display: block;
+    margin-bottom: var(--uds-gap-8);
+  }
+
+  // ── Element: trigger button (default = 44px) ────────
+  &__trigger {
+    @include uds-body-16;
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 44px;
+    padding: var(--uds-spacing-10) var(--uds-spacing-12);
+    background-color: var(--uds-input-surface);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: var(--uds-radius-4);
+    color: var(--uds-text-primary);
+    cursor: pointer;
+    transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+    box-sizing: border-box;
+    text-align: left;
+
+    &:focus-visible {
+      outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+    }
+  }
+
+  // ── Element: displayed value ────────────────────────
+  &__value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &--placeholder {
+      color: var(--uds-text-secondary);
+    }
+  }
+
+  // ── Element: caret icon ─────────────────────────────
+  &__icon {
+    flex-shrink: 0;
+    margin-left: var(--uds-gap-8);
+    transition: transform var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+    color: var(--uds-text-secondary);
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  // ── Element: options panel (via ActionMenu menuClassName)
+  &__menu {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  // ── Size: compact ───────────────────────────────────
+  &--compact {
+    .uds-dropdown__trigger {
+      padding: var(--uds-spacing-8) var(--uds-spacing-10);
+      @include uds-body-14;
+      height: 36px;
+    }
+  }
+
+  // ── State: focused ──────────────────────────────────
+  &--focused {
+    .uds-dropdown__trigger {
+      border-color: var(--uds-border-brand-primary);
+    }
+  }
+
+  // ── State: error ────────────────────────────────────
+  &--error {
+    .uds-dropdown__trigger {
+      border-color: var(--uds-text-error, #ef4444);
+      background-color: var(--uds-surface-primary);
+      color: #ef4444;
+    }
+
+    .uds-dropdown__value {
+      color: #ef4444;
+    }
+
+    .uds-dropdown__icon {
+      color: #ef4444;
+    }
+  }
+
+  // ── State: disabled ─────────────────────────────────
+  &--disabled {
+    .uds-dropdown__trigger {
+      background-color: var(--uds-surface-tertiary);
+      border-color: var(--uds-border-primary);
+      color: var(--uds-text-secondary);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .uds-dropdown__value {
+      color: var(--uds-text-secondary);
+    }
+
+    .uds-dropdown__icon {
+      color: var(--uds-text-secondary);
+    }
+  }
+}

package/src/ui/Dropdown/Dropdown.spec.ts

@@ -0,0 +1,54 @@
+export const DROPDOWN_BASE_CLASS = "uds-dropdown";
+
+export const DROPDOWN_SIZES = ["compact", "default"] as const;
+export const DROPDOWN_STATES = ["default", "focused", "error", "disabled"] as const;
+
+export const DROPDOWN_DEFAULTS = {
+  options: [],
+  placeholder: "Select an option",
+  size: "default",
+  state: "default",
+  placement: "bottom-start",
+  className: "",
+  disabled: false,
+} as const;
+
+export const DROPDOWN_CLASS_MAP = {
+  size: {
+    compact: "compact",
+    default: null,
+  } as const,
+  state: {
+    default: null,
+    focused: "focused",
+    error: "error",
+    disabled: "disabled",
+  } as const,
+} as const;
+
+export const DROPDOWN_STORY_SPEC = {
+  defaults: {
+    options: [
+      { value: "apple", label: "Apple" },
+      { value: "orange", label: "Orange" },
+      { value: "banana", label: "Banana" },
+    ],
+    value: "apple",
+    placeholder: DROPDOWN_DEFAULTS.placeholder,
+    size: DROPDOWN_DEFAULTS.size,
+    state: DROPDOWN_DEFAULTS.state,
+    placement: DROPDOWN_DEFAULTS.placement,
+    disabled: DROPDOWN_DEFAULTS.disabled,
+    label: "Fruit",
+  },
+  options: {
+    size: DROPDOWN_SIZES,
+    state: DROPDOWN_STATES,
+  },
+  stories: {
+    default: {},
+    compact: { size: "compact" },
+    error: { state: "error" },
+    disabled: { disabled: true, state: "disabled" },
+  },
+} as const;

package/src/ui/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,59 @@
+import Dropdown from "./Dropdown";
+import { DROPDOWN_STORY_SPEC } from "./Dropdown.spec";
+import { createStoryArgsFromSpec } from "../_spec/createStoryArgsFromSpec";
+
+type DropdownStoryArgs = {
+  options: readonly { value: string; label: string }[];
+  value: string;
+  placeholder: string;
+  size: "compact" | "default";
+  state: "default" | "focused" | "error" | "disabled";
+  placement: string;
+  disabled: boolean;
+  label: string;
+};
+
+const DROPDOWN_DEFAULT_ARGS: DropdownStoryArgs = {
+  ...DROPDOWN_STORY_SPEC.defaults,
+};
+
+const fromSpec = createStoryArgsFromSpec<DropdownStoryArgs>(DROPDOWN_DEFAULT_ARGS);
+
+export default {
+  title: "Components/Dropdown",
+  component: Dropdown,
+  tags: ["autodocs"],
+  args: DROPDOWN_DEFAULT_ARGS,
+  argTypes: {
+    size: {
+      control: "select",
+      options: [...DROPDOWN_STORY_SPEC.options.size],
+    },
+    state: {
+      control: "select",
+      options: [...DROPDOWN_STORY_SPEC.options.state],
+    },
+    label: { control: "text", description: "Field label" },
+    placeholder: { control: "text", description: "Placeholder text" },
+    options: { control: "object", description: "Dropdown options list" },
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: fromSpec(DROPDOWN_STORY_SPEC.stories.default),
+};
+
+export const Compact = {
+  args: fromSpec(DROPDOWN_STORY_SPEC.stories.compact),
+};
+
+export const Error = {
+  args: fromSpec(DROPDOWN_STORY_SPEC.stories.error),
+};
+
+export const Disabled = {
+  args: fromSpec(DROPDOWN_STORY_SPEC.stories.disabled),
+};

package/src/ui/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,37 @@
+import { describe, test } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import Dropdown from "./Dropdown";
+import { DROPDOWN_DEFAULTS, DROPDOWN_SIZES } from "./Dropdown.spec";
+
+describe("Dropdown spec sync", () => {
+  test("renders label and placeholder from defaults", () => {
+    render(<Dropdown label="Fruit" />);
+    expect(screen.getByRole("button", { name: /Fruit/i })).toBeInTheDocument();
+    expect(screen.getByText(DROPDOWN_DEFAULTS.placeholder)).toBeInTheDocument();
+  });
+
+  test("supports all size options from spec", () => {
+    DROPDOWN_SIZES.forEach((size) => {
+      const { container, unmount } = render(<Dropdown size={size} />);
+      const root = container.querySelector(".uds-dropdown");
+      if (size === DROPDOWN_DEFAULTS.size) {
+        expect(root).not.toHaveClass(`uds-dropdown--${size}`);
+      } else {
+        expect(root).toHaveClass(`uds-dropdown--${size}`);
+      }
+      unmount();
+    });
+  });
+
+  test("normalizes string options and renders selected value", () => {
+    render(
+      <Dropdown
+        label="Sort by"
+        options={["Latest", "Oldest"]}
+        value="Oldest"
+      />,
+    );
+    expect(screen.getByRole("button", { name: /Sort by/i })).toBeInTheDocument();
+    expect(screen.getByText("Oldest")).toBeInTheDocument();
+  });
+});

package/src/ui/Dropdown/Dropdown.tsx

@@ -0,0 +1,119 @@
+import { useMemo, useState } from "react";
+import Icon from "../Icon/Icon";
+import ActionMenu from "../ActionMenu/ActionMenu";
+import "./Dropdown.scss";
+import {
+  DROPDOWN_BASE_CLASS,
+  DROPDOWN_CLASS_MAP,
+  DROPDOWN_DEFAULTS,
+} from "./Dropdown.spec";
+import type { DropdownOption, DropdownProps } from "./Dropdown.types";
+
+const IconComponent = Icon as any;
+const ActionMenuComponent = ActionMenu as any;
+
+export default function Dropdown({
+  options = [],
+  value,
+  onChange,
+  placeholder = DROPDOWN_DEFAULTS.placeholder,
+  size = DROPDOWN_DEFAULTS.size,
+  state = DROPDOWN_DEFAULTS.state,
+  placement = DROPDOWN_DEFAULTS.placement,
+  id,
+  label,
+  className = DROPDOWN_DEFAULTS.className,
+  disabled = DROPDOWN_DEFAULTS.disabled,
+  ...props
+}: DropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const dropdownId = id || `dropdown-${Math.random().toString(36).substr(2, 9)}`;
+
+  const normalizedOptions = useMemo<DropdownOption[]>(
+    () =>
+      options.map((option) =>
+        typeof option === "string" ? { value: option, label: option } : option,
+      ),
+    [options],
+  );
+
+  const currentState =
+    disabled ? "disabled" : state === "default" && isOpen ? "focused" : state;
+
+  const selectedOption = normalizedOptions.find((opt) => opt.value === value);
+  const displayValue = selectedOption ? selectedOption.label : placeholder;
+
+  const menuItems = useMemo(
+    () =>
+      normalizedOptions.map((opt) => ({
+        id: opt.value,
+        label: opt.label,
+        active: opt.value === value,
+        onClick: () => {
+          if (onChange && !disabled) {
+            onChange(opt.value);
+          }
+        },
+      })),
+    [normalizedOptions, value, onChange, disabled],
+  );
+
+  const wrapperClassNames = [
+    DROPDOWN_BASE_CLASS,
+    DROPDOWN_CLASS_MAP.size[size] && `${DROPDOWN_BASE_CLASS}--${DROPDOWN_CLASS_MAP.size[size]}`,
+    DROPDOWN_CLASS_MAP.state[currentState] &&
+      `${DROPDOWN_BASE_CLASS}--${DROPDOWN_CLASS_MAP.state[currentState]}`,
+    isOpen && `${DROPDOWN_BASE_CLASS}--open`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const triggerButton = (
+    <button
+      type="button"
+      id={dropdownId}
+      className={`${DROPDOWN_BASE_CLASS}__trigger`}
+      disabled={disabled}
+      aria-label={label || placeholder}
+      {...props}
+    >
+      <span
+        className={`${DROPDOWN_BASE_CLASS}__value ${
+          !selectedOption ? `${DROPDOWN_BASE_CLASS}__value--placeholder` : ""
+        }`}
+      >
+        {displayValue}
+      </span>
+      <IconComponent
+        name="CaretDown"
+        size={16}
+        appearance="regular"
+        className={`${DROPDOWN_BASE_CLASS}__icon ${
+          isOpen ? `${DROPDOWN_BASE_CLASS}__icon--open` : ""
+        }`}
+      />
+    </button>
+  );
+
+  return (
+    <div className={`${DROPDOWN_BASE_CLASS}-outer`}>
+      {label && (
+        <label htmlFor={dropdownId} className={`${DROPDOWN_BASE_CLASS}__label`}>
+          {label}
+        </label>
+      )}
+      <ActionMenuComponent
+        trigger={triggerButton}
+        items={menuItems}
+        placement={placement}
+        fullWidth
+        disabled={disabled}
+        onOpenChange={setIsOpen}
+        className={wrapperClassNames}
+        menuClassName={`${DROPDOWN_BASE_CLASS}__menu`}
+      />
+    </div>
+  );
+}

package/src/ui/Dropdown/Dropdown.types.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "react";
+import type { DROPDOWN_SIZES, DROPDOWN_STATES } from "./Dropdown.spec";
+
+export type DropdownSize = (typeof DROPDOWN_SIZES)[number];
+export type DropdownState = (typeof DROPDOWN_STATES)[number];
+
+export interface DropdownOption {
+  value: string | number;
+  label: string;
+}
+
+export interface DropdownProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, "onChange"> {
+  options?: Array<DropdownOption | string>;
+  value?: string | number;
+  onChange?: (value: string | number) => void;
+  placeholder?: string;
+  size?: DropdownSize;
+  state?: DropdownState;
+  placement?: string;
+  id?: string;
+  label?: string;
+  className?: string;
+  disabled?: boolean;
+}

package/src/ui/Dropdown/index.js

@@ -0,0 +1 @@
+export { default } from "./Dropdown";

package/src/ui/EventCard/EventCard.ai.md

@@ -0,0 +1,101 @@
+# EventCard (Blade)
+
+A visual scheduling event bar for calendars, schedules, and lists.
+
+## When to Use
+- Displaying events within the Calendar component (automatic)
+- Building event lists, timelines, or schedule views
+- Dashboard scheduling summaries
+- Any UI that shows travel, assignment, or unassigned events
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `title` | `string` | `"Title"` | Any text | Event title text |
+| `type` | `string` | `"travel"` | `"travel"`, `"assignment"`, `"unassigned"` | Event type (determines color) |
+| `status` | `string` | `"active"` | `"active"`, `"past"`, `"pending"` | Event status (determines fill style) |
+| `badge` | `string` | — | Any text | Badge label text (compact inverse Tag) |
+| `icon` | `boolean` | `false` | `true`, `false` | Show CornersOut expand icon |
+| `startCap` | `boolean` | `true` | `true`, `false` | Rounded left corners |
+| `endCap` | `boolean` | `true` | `true`, `false` | Rounded right corners |
+| `onClick` | `function` | — | `() => void` | Click handler |
+| `className` | `string` | `""` | Any CSS class | Additional CSS classes |
+
+## Color Matrix
+
+| Type | Active | Past | Pending |
+|------|--------|------|---------|
+| `travel` | Blue solid (`primary-500`) | Neutral gray (`neutrals-100`) | Cyan striped (`cyan-50` + `cyan-200` border) |
+| `assignment` | Orange solid (`secondary-500`) | Neutral gray (`neutrals-100`) | Aqua striped (`aqua-50` + `aqua-200` border) |
+| `unassigned` | Gray solid (`neutrals-500`) | Neutral gray (`neutrals-100`) | Light gray striped (`neutrals-50` + `neutrals-500` border) |
+
+## Code Examples
+
+### Basic EventCard
+```jsx
+import { EventCard } from "@mich8060/chg-design-system";
+
+<EventCard title="Denver, CO" type="travel" status="active" />
+```
+
+### With Badge
+```jsx
+<EventCard title="Salt Lake" type="assignment" status="active" badge="Label" />
+```
+
+### With Icon
+```jsx
+<EventCard title="Denver" type="travel" status="active" icon />
+```
+
+### With Badge + Icon
+```jsx
+<EventCard title="Denver" type="travel" status="active" badge="Label" icon />
+```
+
+### Multi-day Spanning
+```jsx
+import { EventCard, Flex } from "@mich8060/chg-design-system";
+
+<Flex gap="0">
+  <EventCard title="5-Day Trip" type="travel" status="active" startCap endCap={false} />
+  <EventCard title="" type="travel" status="active" startCap={false} endCap={false} />
+  <EventCard title="" type="travel" status="active" startCap={false} endCap={false} />
+  <EventCard title="" type="travel" status="active" startCap={false} endCap />
+</Flex>
+```
+
+### Schedule List
+```jsx
+<Flex direction="column" gap="4">
+  <EventCard title="Denver, CO" type="travel" status="active" onClick={...} />
+  <EventCard title="Salt Lake City" type="assignment" status="active" badge="2" onClick={...} />
+  <EventCard title="Open Shift" type="unassigned" status="active" onClick={...} />
+  <EventCard title="Portland" type="travel" status="pending" onClick={...} />
+</Flex>
+```
+
+## Cap Behavior
+
+| startCap | endCap | Rounding | Content |
+|----------|--------|----------|---------|
+| `true` | `true` | All corners | Title + badge + icon |
+| `true` | `false` | Left only | Title + badge + icon |
+| `false` | `true` | Right only | Bar only (unless icon/badge) |
+| `false` | `false` | None | Bar only (unless icon/badge) |
+
+When `startCap={false}` and neither `icon` nor `badge` is set, only a color bar is rendered.
+
+## Do's and Don'ts
+- **Do** use `type` to match the event's scheduling category
+- **Do** use `status` to reflect whether the event is current, completed, or tentative
+- **Do** use `startCap`/`endCap` for multi-day calendar spanning
+- **Don't** manually set caps unless building custom calendar layouts
+- **Do** use `onClick` to make events interactive
+
+## Accessibility
+- Renders as `<button>` when `onClick` is provided, otherwise `<div>`
+- Includes `title` attribute for tooltip
+- Supports keyboard focus when clickable
+- Pending pattern overlay has `aria-hidden="true"`

package/src/ui/EventCard/EventCard.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import Tag from "../Tag/Tag";
+import Icon from "../Icon/Icon";
+import "./EventCard.scss";
+
+const BASE_CLASS = "uds-event-card";
+
+/**
+ * EventCard (Blade) — A visual scheduling event bar for calendars and lists.
+ *
+ * Displays events as colored bars with type-based coloring (travel, assignment,
+ * unassigned), status styling (active, past, pending), optional badge, and
+ * optional expand icon. Supports startCap/endCap for multi-day spanning.
+ *
+ * @param {string}   title       - Event title text
+ * @param {string}   type        - Color type: "travel" | "assignment" | "unassigned"
+ * @param {string}   status      - Visual status: "active" | "past" | "pending"
+ * @param {string}   badge       - Badge label text (falsy to hide)
+ * @param {boolean}  icon        - Show CornersOut expand icon
+ * @param {boolean}  startCap    - Rounded left corners (true = start of event)
+ * @param {boolean}  endCap      - Rounded right corners (true = end of event)
+ * @param {function} onClick     - Click handler (renders as <button>)
+ * @param {string}   className   - Additional CSS classes
+ */
+export default function EventCard({
+  title = "Title",
+  type = "travel",
+  status = "active",
+  badge,
+  icon = false,
+  startCap = true,
+  endCap = true,
+  onClick,
+  className = "",
+  ...rest
+}) {
+  // Content is shown when startCap is true, or when there's an icon or badge
+  const showContent = startCap || icon || !!badge;
+
+  const classNames = [
+    BASE_CLASS,
+    `${BASE_CLASS}--${type}`,
+    `${BASE_CLASS}--${status}`,
+    !startCap && `${BASE_CLASS}--no-start-cap`,
+    !endCap && `${BASE_CLASS}--no-end-cap`,
+    !showContent && `${BASE_CLASS}--bar-only`,
+    onClick && `${BASE_CLASS}--clickable`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const Element = onClick ? "button" : "div";
+
+  return (
+    <Element
+      className={classNames}
+      onClick={onClick}
+      type={onClick ? "button" : undefined}
+      title={title}
+      {...rest}
+    >
+      <div className={`${BASE_CLASS}__container`}>
+        {status === "pending" && (
+          <div className={`${BASE_CLASS}__pattern`} aria-hidden="true" />
+        )}
+        {showContent && (
+          <div className={`${BASE_CLASS}__content`}>
+            <span className={`${BASE_CLASS}__title`}>{title}</span>
+            {badge && (
+              <Tag
+                label={badge}
+                color="inverse"
+                solid
+                rounded
+                size="compact"
+              />
+            )}
+          </div>
+        )}
+        {icon && (
+          <Icon
+            name="CornersOut"
+            size={16}
+            appearance="regular"
+            className={`${BASE_CLASS}__icon`}
+          />
+        )}
+      </div>
+    </Element>
+  );
+}