@mich8060/chg-design-system 0.1.0

package/src/ui/Divider/Divider.scss

@@ -0,0 +1,112 @@
+@use "../../styles/typography" as *;
+
+.uds-divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: var(--uds-gap-16) 0;
+
+  // Solid variant - 8px tall box that goes edge to edge
+  &--solid {
+    align-items: stretch;
+    height: 8px;
+    margin: var(--uds-spacing-24) 0;
+    background-color: var(--uds-color-neutrals-100);
+    border-top:solid var(--uds-border-width-1) var(--uds-border-secondary);
+    border-bottom:solid var(--uds-border-width-1) var(--uds-border-secondary);
+    width: 100%;
+  }
+
+  // Line variant (default) - horizontal line with optional content
+  &--line,
+  &:not(&--solid) {
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 50%;
+      height: var(--uds-border-width-1);
+      background-color: var(--uds-border-primary);
+      z-index: 0;
+    }
+  }
+
+  // Alignment variants
+  &--left {
+    .uds-divider__content {
+    }
+  }
+
+  &--center {
+    display: flex;
+    align-items: center;
+
+    .uds-divider__content {
+        margin: 0 auto;
+    }
+  }
+
+  &--right {
+    .uds-divider__content {
+        margin-left: auto;
+    }
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--uds-gap-8);
+    background-color: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    padding-inline: var(--uds-spacing-12);
+    padding-block: var(--uds-spacing-4);
+
+    // Icon-only variant
+    &--icon-only {
+      border-radius: var(--uds-radius-9999);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width:28px;
+      padding:0;
+      height:28px;
+    }
+
+    // Label variant (with or without icon)
+    &--with-label {
+      border-radius: var(--uds-radius-9999);
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--uds-text-primary);
+    flex: 0;
+    width: 20px;
+    height: 28px;
+  }
+
+  &__label {
+    @include uds-body-14-medium;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--uds-gap-6);
+    color: var(--uds-text-primary);
+    background-color: var(--uds-surface-primary);
+    padding-inline: var(--uds-spacing-8);
+    padding-block: var(--uds-spacing-4);
+    border-radius: var(--uds-radius-4);
+    white-space: nowrap;
+  }
+
+  &__label-icon {
+    flex-shrink: 0;
+    color: var(--uds-text-primary);
+  }
+}

package/src/ui/Divider/index.js

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

package/src/ui/DotStatus/DotStatus.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import "./DotStatus.scss";
+
+const BASE_CLASS = "uds-dot-status";
+
+const variantClassMap = {
+  "light-gray": "light-gray",
+  red: "red",
+  orange: "orange",
+  yellow: "yellow",
+  "light-green": "light-green",
+  green: "green",
+  blue: "blue",
+  "dark-blue": "dark-blue",
+  teal: "teal",
+  purple: "purple",
+  pink: "pink",
+  magenta: "magenta",
+  "dark-red": "dark-red",
+  "dark-gray": "dark-gray",
+};
+
+const sizeClassMap = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+};
+
+/**
+ * Dot Status component for displaying status indicators
+ * @param {string} variant - Color variant
+ * @param {string} size - Size variant: 'small', 'medium', or 'large'
+ * @param {boolean} outline - Whether to show an outline/border around the dot
+ * @param {string} className - Additional CSS classes
+ * @param {string} 'aria-label' - Accessible label for screen readers
+ * @param {object} props - Additional props to pass to the dot element
+ */
+export default function DotStatus({
+  variant = "blue",
+  size = "medium",
+  outline = false,
+  className = "",
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const classNames = [
+    BASE_CLASS,
+    variantClassMap[variant] && `${BASE_CLASS}--${variantClassMap[variant]}`,
+    sizeClassMap[size] && `${BASE_CLASS}--${sizeClassMap[size]}`,
+    outline && `${BASE_CLASS}--outline`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <span
+      className={classNames}
+      role="status"
+      aria-label={ariaLabel || `${variant} status`}
+      {...props}
+    />
+  );
+}

package/src/ui/DotStatus/DotStatus.scss

@@ -0,0 +1,87 @@
+@use "../../styles/typography" as *;
+
+.uds-dot-status {
+  display: inline-block;
+  border-radius: 50%;
+  flex-shrink: 0;
+  vertical-align: middle;
+
+  // Size variants
+  &--small {
+    width: 8px;
+    height: 8px;
+  }
+
+  &--medium {
+    width: 12px;
+    height: 12px;
+  }
+
+  &--large {
+    width: 16px;
+    height: 16px;
+  }
+
+  // Variant colors
+  &--light-gray {
+    background-color: #f3f4f6; // Very light gray
+  }
+
+  &--red {
+    background-color: #ef4444; // Bright red
+  }
+
+  &--orange {
+    background-color: #f97316; // Bright orange
+  }
+
+  &--yellow {
+    background-color: #eab308; // Bright yellow
+  }
+
+  &--light-green {
+    background-color: #84cc16; // Light green (lime)
+  }
+
+  &--green {
+    background-color: #22c55e; // Darker green
+  }
+
+  &--blue {
+    background-color: #3b82f6; // Medium blue
+  }
+
+  &--dark-blue {
+    background-color: #2563eb; // Dark blue
+  }
+
+  &--teal {
+    background-color: #14b8a6; // Teal/Cyan
+  }
+
+  &--purple {
+    background-color: #a855f7; // Medium purple
+  }
+
+  &--pink {
+    background-color: #ec4899; // Bright pink
+  }
+
+  &--magenta {
+    background-color: #d946ef; // Darker pink/magenta
+  }
+
+  &--dark-red {
+    background-color: #dc2626; // Dark red/maroon
+  }
+
+  &--dark-gray {
+    background-color: #1f2937; // Dark gray (almost black)
+  }
+
+  // Outline variant
+  &--outline {
+    border: var(--uds-border-width-1) solid var(--uds-border-inverse); // Light gray border/ring
+    // Background colors remain the same as defined above
+  }
+}

package/src/ui/DotStatus/index.js

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

package/src/ui/Dropdown/Dropdown.jsx

@@ -0,0 +1,200 @@
+import React, { useState, useRef, useEffect } from "react";
+import Icon from "../Icon/Icon";
+import "./Dropdown.scss";
+
+const BASE_CLASS = "uds-dropdown";
+
+const stateClassMap = {
+  default: "default",
+  focused: "focused",
+  error: "error",
+  disabled: "disabled",
+};
+
+/**
+ * Dropdown component for custom select inputs
+ * @param {array} options - Array of option objects with { value, label } or array of strings
+ * @param {string|number} value - Currently selected value
+ * @param {function} onChange - Callback when selection changes (receives new value)
+ * @param {string} placeholder - Placeholder text when no option is selected
+ * @param {string} state - Visual state: 'default', 'focused', 'error', 'disabled'
+ * @param {string} id - Unique identifier for the dropdown
+ * @param {string} label - Label text for the dropdown
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the dropdown
+ */
+export default function Dropdown({
+  options = [],
+  value,
+  onChange,
+  placeholder = "Select an option",
+  state = "default",
+  id,
+  label,
+  className = "",
+  disabled = false,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const dropdownRef = useRef(null);
+  const listRef = useRef(null);
+
+  const dropdownId =
+    id || `dropdown-${Math.random().toString(36).substr(2, 9)}`;
+
+  // Normalize options to always have { value, label } format
+  const normalizedOptions = options.map((option) => {
+    if (typeof option === "string") {
+      return { value: option, label: option };
+    }
+    return option;
+  });
+
+  // Determine the current state
+  const currentState = disabled
+    ? "disabled"
+    : state === "default" && focused
+      ? "focused"
+      : state;
+
+  // Get the selected option's label
+  const selectedOption = normalizedOptions.find((opt) => opt.value === value);
+  const displayValue = selectedOption ? selectedOption.label : placeholder;
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setFocused(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+        setFocused(false);
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const currentIndex = normalizedOptions.findIndex(
+          (opt) => opt.value === value,
+        );
+        const nextIndex =
+          currentIndex < normalizedOptions.length - 1 ? currentIndex + 1 : 0;
+        if (onChange && !disabled) {
+          onChange(normalizedOptions[nextIndex].value);
+        }
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const currentIndex = normalizedOptions.findIndex(
+          (opt) => opt.value === value,
+        );
+        const prevIndex =
+          currentIndex > 0 ? currentIndex - 1 : normalizedOptions.length - 1;
+        if (onChange && !disabled) {
+          onChange(normalizedOptions[prevIndex].value);
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, value, normalizedOptions, onChange, disabled]);
+
+  const handleToggle = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+      setFocused(!isOpen);
+    }
+  };
+
+  const handleSelect = (optionValue) => {
+    if (onChange && !disabled) {
+      onChange(optionValue);
+      setIsOpen(false);
+      setFocused(false);
+    }
+  };
+
+  const classNames = [
+    BASE_CLASS,
+    stateClassMap[currentState] &&
+      `${BASE_CLASS}--${stateClassMap[currentState]}`,
+    isOpen && `${BASE_CLASS}--open`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={`${BASE_CLASS}-wrapper`}>
+      {label && (
+        <label htmlFor={dropdownId} className={`${BASE_CLASS}__label`}>
+          {label}
+        </label>
+      )}
+      <div className={classNames} ref={dropdownRef}>
+        <button
+          type="button"
+          id={dropdownId}
+          className={`${BASE_CLASS}__trigger`}
+          onClick={handleToggle}
+          onFocus={() => !disabled && setFocused(true)}
+          onBlur={() => !focused && setFocused(false)}
+          disabled={disabled}
+          aria-haspopup="listbox"
+          aria-expanded={isOpen}
+          aria-label={label || placeholder}
+          {...props}
+        >
+          <span
+            className={`${BASE_CLASS}__value ${!selectedOption ? `${BASE_CLASS}__value--placeholder` : ""}`}
+          >
+            {displayValue}
+          </span>
+          <Icon
+            name="CaretDown"
+            size={16}
+            appearance="regular"
+            className={`${BASE_CLASS}__icon ${isOpen ? `${BASE_CLASS}__icon--open` : ""}`}
+          />
+        </button>
+        {isOpen && !disabled && (
+          <ul className={`${BASE_CLASS}__list`} role="listbox" ref={listRef}>
+            {normalizedOptions.map((option) => {
+              const isSelected = option.value === value;
+              return (
+                <li
+                  key={option.value}
+                  className={`${BASE_CLASS}__option ${isSelected ? `${BASE_CLASS}__option--selected` : ""}`}
+                  role="option"
+                  aria-selected={isSelected}
+                  onClick={() => handleSelect(option.value)}
+                  onMouseEnter={(e) => e.currentTarget.focus()}
+                >
+                  {option.label}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/Dropdown/Dropdown.scss

@@ -0,0 +1,156 @@
+@use "../../styles/typography" as *;
+
+.uds-dropdown-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-gap-8);
+  width: 100%;
+}
+
+.uds-dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  &__label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+    display: block;
+    margin-bottom: var(--uds-gap-8);
+  }
+
+  &__trigger {
+    @include uds-body-16;
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--uds-spacing-10) var(--uds-spacing-12);
+    background-color: var(--uds-surface-primary);
+    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);
+    }
+  }
+
+  &__value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &--placeholder {
+      color: var(--uds-text-secondary);
+    }
+  }
+
+  &__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);
+    }
+  }
+
+  // State variants
+  &--default {
+    .uds-dropdown__trigger {
+      background-color: var(--uds-surface-primary);
+      border-color: var(--uds-border-primary);
+      color: var(--uds-text-primary);
+    }
+  }
+
+  &--focused {
+    .uds-dropdown__trigger {
+      background-color: var(--uds-surface-primary);
+      border-color: var(--uds-border-brand-primary);
+      color: var(--uds-text-primary);
+    }
+  }
+
+  &--error {
+    .uds-dropdown__trigger {
+      background-color: var(--uds-surface-primary);
+      border-color: #ef4444; // Red border
+      color: #ef4444; // Red text
+    }
+
+    .uds-dropdown__value {
+      color: #ef4444;
+    }
+
+    .uds-dropdown__icon {
+      color: #ef4444;
+    }
+  }
+
+  &--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);
+    }
+  }
+
+  &__list {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    margin: 0;
+    padding: var(--uds-spacing-4) 0;
+    background-color: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: var(--uds-radius-4);
+    box-shadow: var(--uds-shadow-lg);
+    list-style: none;
+    max-height: 300px;
+    overflow-y: auto;
+    box-sizing: border-box;
+  }
+
+  &__option {
+    @include uds-body-16;
+    padding: var(--uds-spacing-10) var(--uds-spacing-12);
+    color: var(--uds-text-primary);
+    cursor: pointer;
+    transition: background-color var(--uds-animation-duration-200)
+      var(--uds-animation-ease-standard);
+    outline: none;
+
+    &:hover,
+    &:focus {
+      background-color: var(--uds-surface-tertiary);
+    }
+
+    &--selected {
+      background-color: var(--uds-surface-brand-secondary);
+      color: var(--uds-text-brand-primary);
+      font-weight: 600;
+    }
+  }
+}

package/src/ui/Dropdown/index.js

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