@mich8060/chg-design-system 0.1.0

package/src/ui/Pagination/Pagination.jsx

@@ -0,0 +1,237 @@
+import React, { useState } from "react";
+import Icon from "../Icon/Icon";
+import "./Pagination.scss";
+
+/**
+ * Pagination component
+ * @param {number} currentPage - Current active page (1-indexed)
+ * @param {number} totalPages - Total number of pages
+ * @param {function} onPageChange - Callback when page changes: (page: number) => void
+ * @param {string} variant - Variant style: "default" | "underline" | "with-jump" | "underline-with-jump" | "underline-double"
+ * @param {boolean} showFirstLast - Show first/last page buttons (for variants with double buttons)
+ * @param {string} className - Additional CSS classes
+ */
+export default function Pagination({
+  currentPage = 1,
+  totalPages = 10,
+  onPageChange,
+  variant = "default",
+  showFirstLast = false,
+  className = "",
+}) {
+  const [jumpToPage, setJumpToPage] = useState(currentPage.toString());
+
+  // Ensure currentPage is within valid range
+  const safeCurrentPage = Math.max(1, Math.min(currentPage, totalPages));
+
+  // Calculate which page numbers to show
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisible = 5; // Show up to 5 page numbers
+
+    if (totalPages <= maxVisible) {
+      // Show all pages if total is small
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always show first page
+      pages.push(1);
+
+      // Calculate start and end of middle range
+      let start = Math.max(2, safeCurrentPage - 1);
+      let end = Math.min(totalPages - 1, safeCurrentPage + 1);
+
+      // Adjust if we're near the beginning
+      if (safeCurrentPage <= 3) {
+        end = Math.min(4, totalPages - 1);
+      }
+
+      // Adjust if we're near the end
+      if (safeCurrentPage >= totalPages - 2) {
+        start = Math.max(2, totalPages - 3);
+      }
+
+      // Add ellipsis before middle range if needed
+      if (start > 2) {
+        pages.push("ellipsis-start");
+      }
+
+      // Add middle range
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      // Add ellipsis after middle range if needed
+      if (end < totalPages - 1) {
+        pages.push("ellipsis-end");
+      }
+
+      // Always show last page
+      if (totalPages > 1) {
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  const handlePageClick = (page) => {
+    if (page !== safeCurrentPage && page >= 1 && page <= totalPages && onPageChange) {
+      onPageChange(page);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (safeCurrentPage > 1) {
+      handlePageClick(safeCurrentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (safeCurrentPage < totalPages) {
+      handlePageClick(safeCurrentPage + 1);
+    }
+  };
+
+  const handleFirst = () => {
+    handlePageClick(1);
+  };
+
+  const handleLast = () => {
+    handlePageClick(totalPages);
+  };
+
+  const handleJumpSubmit = (e) => {
+    e.preventDefault();
+    const page = parseInt(jumpToPage, 10);
+    if (page >= 1 && page <= totalPages) {
+      handlePageClick(page);
+    } else {
+      setJumpToPage(safeCurrentPage.toString());
+    }
+  };
+
+  const handleJumpChange = (e) => {
+    setJumpToPage(e.target.value);
+  };
+
+  const pageNumbers = getPageNumbers();
+  const isUnderlineVariant =
+    variant === "underline" ||
+    variant === "underline-with-jump" ||
+    variant === "underline-double";
+  const showJumpInput =
+    variant === "with-jump" || variant === "underline-with-jump";
+  const showDoubleButtons =
+    variant === "with-jump" ||
+    variant === "underline-with-jump" ||
+    variant === "underline-double" ||
+    showFirstLast;
+
+  return (
+    <nav className={`pagination ${className}`} aria-label="Pagination">
+      <div className={`pagination__container ${isUnderlineVariant ? "pagination__container--underline" : ""} ${showDoubleButtons ? "pagination__container--double" : ""}`}>
+        {/* First page button (only for double button variants) */}
+        {showDoubleButtons && (
+          <button
+            type="button"
+            className="pagination__cap pagination__cap--first"
+            onClick={handleFirst}
+            disabled={safeCurrentPage === 1}
+            aria-label="First page"
+          >
+            <Icon name="CaretDoubleLeft" size={16} />
+          </button>
+        )}
+
+        {/* Previous page button */}
+        <button
+          type="button"
+          className="pagination__cap pagination__cap--prev"
+          onClick={handlePrevious}
+          disabled={safeCurrentPage === 1}
+          aria-label="Previous page"
+        >
+          <Icon name="CaretLeft" size={16} />
+        </button>
+
+        {/* Page numbers */}
+        {pageNumbers.map((page, index) => {
+          if (page === "ellipsis-start" || page === "ellipsis-end") {
+            return (
+              <button
+                key={`ellipsis-${index}`}
+                type="button"
+                className="pagination__item pagination__item--ellipsis"
+                disabled
+                aria-hidden="true"
+              >
+                ...
+              </button>
+            );
+          }
+
+          const isActive = page === safeCurrentPage;
+
+          return (
+            <button
+              key={page}
+              type="button"
+              className={`pagination__item ${
+                isActive ? "pagination__item--active" : ""
+              } ${isUnderlineVariant ? "pagination__item--underline" : ""}`}
+              onClick={() => handlePageClick(page)}
+              aria-label={`Page ${page}`}
+              aria-current={isActive ? "page" : undefined}
+            >
+              {page}
+            </button>
+          );
+        })}
+
+        {/* Jump to page input (for variants that include it) */}
+        {showJumpInput && (
+          <div className="pagination__jump">
+            <form onSubmit={handleJumpSubmit}>
+              <input
+                type="number"
+                className="pagination__jump-input"
+                value={jumpToPage}
+                onChange={handleJumpChange}
+                min="1"
+                max={totalPages}
+                aria-label="Jump to page"
+              />
+            </form>
+            <span className="pagination__jump-label">of {totalPages}</span>
+          </div>
+        )}
+
+        {/* Next page button */}
+        <button
+          type="button"
+          className="pagination__cap pagination__cap--next"
+          onClick={handleNext}
+          disabled={safeCurrentPage === totalPages}
+          aria-label="Next page"
+        >
+          <Icon name="CaretRight" size={16} />
+        </button>
+
+        {/* Last page button (only for double button variants) */}
+        {showDoubleButtons && (
+          <button
+            type="button"
+            className="pagination__cap pagination__cap--last"
+            onClick={handleLast}
+            disabled={safeCurrentPage === totalPages}
+            aria-label="Last page"
+          >
+            <Icon name="CaretDoubleRight" size={16} />
+          </button>
+        )}
+      </div>
+    </nav>
+  );
+}

package/src/ui/Pagination/Pagination.scss

@@ -0,0 +1,182 @@
+@use "../../styles/typography" as *;
+
+.pagination {
+  display: inline-flex;
+  align-items: center;
+
+  &__container {
+    display: flex;
+    align-items: stretch;
+    height: 48px;
+
+    &--underline {
+      // For underline variants, items use top border only
+    }
+
+    &--double {
+      // For double button variants, caps use top border only
+    }
+  }
+
+  &__cap {
+    @include uds-body-16;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 47px;
+    height: 100%;
+    padding: 0;
+    background: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    color: var(--uds-text-primary);
+    cursor: pointer;
+    transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    &:first-child {
+      border-top-left-radius: var(--uds-radius-8);
+      border-bottom-left-radius: var(--uds-radius-8);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--uds-radius-8);
+      border-bottom-right-radius: var(--uds-radius-8);
+    }
+
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    &:hover:not(:disabled) {
+      background: var(--uds-surface-secondary);
+      color: var(--uds-text-primary);
+    }
+
+    &:active:not(:disabled) {
+      background: var(--uds-surface-tertiary);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    // For variants with double buttons, use top border only
+    .pagination__container--double & {
+      border: none;
+      border-top: var(--uds-border-width-1) solid var(--uds-border-primary);
+    }
+  }
+
+  &__item {
+    @include uds-body-16;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 47px;
+    height: 100%;
+    padding: var(--uds-spacing-12) var(--uds-spacing-18);
+    background: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-left: none;
+    color: var(--uds-text-primary);
+    cursor: pointer;
+    transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    &:hover:not(:disabled):not(&--active) {
+      background: var(--uds-surface-secondary);
+      color: var(--uds-text-primary);
+    }
+
+    &:active:not(:disabled):not(&--active) {
+      background: var(--uds-surface-tertiary);
+    }
+
+    &--active {
+      background: var(--uds-button-surface-primary-default);
+      border-color: var(--uds-button-border-primary-default);
+      color: var(--uds-button-text-default);
+      font-weight: 600;
+      cursor: default;
+
+      &.pagination__item--underline {
+        background: var(--uds-surface-primary);
+        border: var(--uds-border-width-1) solid var(--uds-border-primary);
+        border-top: 2px solid var(--uds-button-border-primary-default);
+        border-left: none;
+        color: var(--uds-button-border-primary-default);
+        font-weight: 600;
+        padding-top: calc(var(--uds-spacing-12) - 2px);
+      }
+    }
+
+    &--underline {
+      // Base underline variant styling - only top border for non-active items
+      background: var(--uds-surface-primary);
+      border: none;
+      border-top: var(--uds-border-width-1) solid var(--uds-border-primary);
+      border-left: none;
+      color: var(--uds-text-primary);
+    }
+
+    &--ellipsis {
+      cursor: default;
+      color: var(--uds-text-primary);
+      border-top: var(--uds-border-width-1) solid var(--uds-border-primary);
+      border-left: none;
+
+      &:hover {
+        background: var(--uds-surface-primary);
+      }
+    }
+  }
+
+  &__jump {
+    display: flex;
+    align-items: center;
+    gap: var(--uds-spacing-8);
+    padding: var(--uds-spacing-6) var(--uds-spacing-12);
+    background: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-left: none;
+    margin-right: -1px;
+
+    &-input {
+      @include uds-body-14;
+      width: 45px;
+      height: 36px;
+      padding: var(--uds-spacing-8) var(--uds-spacing-12);
+      background: 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);
+      text-align: center;
+      outline: none;
+      transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+      &:focus {
+        border-color: var(--uds-border-focus);
+        box-shadow: 0 0 0 3px var(--uds-border-focus-soft);
+      }
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      &[type="number"] {
+        -moz-appearance: textfield;
+      }
+    }
+
+    &-label {
+      @include uds-body-14-semibold;
+      color: var(--uds-text-primary);
+      white-space: nowrap;
+    }
+  }
+}

package/src/ui/Pagination/index.js

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

package/src/ui/PillToggle/PillToggle.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import "./PillToggle.scss";
+
+const BASE_CLASS = "uds-pill-toggle";
+
+/**
+ * PillToggle component for switching between selected and unselected states
+ * @param {string} label - The text content of the toggle
+ * @param {boolean} selected - Whether the toggle is selected
+ * @param {function} onChange - Callback function when toggle state changes
+ * @param {string} id - Unique identifier for the toggle input
+ * @param {boolean} disabled - Whether the toggle is disabled
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the toggle
+ */
+export default function PillToggle({
+  label = "Label States",
+  selected = false,
+  onChange,
+  id,
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const toggleId =
+    id || `pill-toggle-${Math.random().toString(36).substr(2, 9)}`;
+
+  const handleChange = (event) => {
+    if (!disabled && onChange) {
+      onChange(event.target.checked);
+    }
+  };
+
+  const classNames = [
+    BASE_CLASS,
+    selected && `${BASE_CLASS}--selected`,
+    disabled && `${BASE_CLASS}--disabled`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <label className={classNames} htmlFor={toggleId} {...props}>
+      <input
+        type="checkbox"
+        id={toggleId}
+        className={`${BASE_CLASS}__input`}
+        checked={selected}
+        onChange={handleChange}
+        disabled={disabled}
+      />
+      <span className={`${BASE_CLASS}__label`}>{label}</span>
+    </label>
+  );
+}

package/src/ui/PillToggle/PillToggle.scss

@@ -0,0 +1,84 @@
+@use "../../styles/typography" as *;
+
+.uds-pill-toggle {
+  @include uds-body-16-medium;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--uds-spacing-16);
+  padding-block: var(--uds-spacing-8);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  background-color: var(--uds-surface-primary);
+  color: var(--uds-text-primary);
+  border-radius: 999px; // Fully rounded pill shape
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+  box-sizing: border-box;
+  white-space: nowrap;
+  width: fit-content;
+  height: fit-content;
+  min-height: 40px;
+
+  &__input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+
+    &:focus-visible + .uds-pill-toggle__label {
+      outline: var(--uds-focus-ring-width) solid var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+      border-radius: 4px;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    white-space: nowrap;
+    text-align: center;
+    line-height: var(--uds-line-height-24);
+  }
+
+  // Unselected state (default) - hover and active
+  &:hover:not(.uds-pill-toggle--disabled):not(.uds-pill-toggle--selected) {
+    border-color: var(--uds-border-secondary);
+    background-color: var(--uds-surface-secondary);
+  }
+
+  &:active:not(.uds-pill-toggle--disabled):not(.uds-pill-toggle--selected) {
+    border-color: var(--uds-border-tertiary);
+    background-color: var(--uds-surface-tertiary);
+  }
+
+  // Selected state
+  &--selected {
+    background-color: var(--uds-surface-brand-primary);
+    border-color: var(--uds-border-brand-primary);
+    color: var(--uds-text-inverse, white);
+
+    &:hover:not(.uds-pill-toggle--disabled) {
+      background-color: var(--uds-surface-brand-secondary);
+      border-color: var(--uds-border-brand-primary);
+    }
+
+    &:active:not(.uds-pill-toggle--disabled) {
+      background-color: var(--uds-surface-brand-tertiary);
+      border-color: var(--uds-border-brand-primary);
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  // Focus state
+  &:focus-visible {
+    outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+    outline-offset: var(--uds-focus-ring-offset);
+  }
+}

package/src/ui/PillToggle/index.js

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