@mich8060/chg-design-system 0.1.0

package/src/pages/Installation.scss

@@ -0,0 +1,40 @@
+.installation {
+  &__code-block-wrapper {
+    position: relative;
+    margin: var(--uds-spacing-16) 0;
+  }
+
+  &__code-block {
+    background: var(--uds-code-bg);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: var(--uds-radius-8);
+    padding: var(--uds-spacing-16);
+    overflow-x: auto;
+    max-width: 100%;
+    word-break: break-word;
+    
+    // Override Prism base styles to use our custom variables
+    pre[class*="language-"] {
+      background: transparent;
+      margin: 0;
+      padding: 0;
+    }
+    
+    code[class*="language-"] {
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: var(--uds-font-size-14);
+      line-height: var(--uds-line-20);
+      white-space: pre;
+      word-wrap: normal;
+      display: block;
+      overflow-x: auto;
+      background: transparent;
+    }
+  }
+}
+
+// Show copy button on hover of code block container
+.installation__code-block-wrapper:hover .copy-button {
+  opacity: 1;
+  pointer-events: auto;
+}

package/src/pages/KeyDemo.jsx

@@ -0,0 +1,184 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Key from "../ui/Key/Key";
+import Flex from "../ui/Flex/Flex";
+import Breadcrumb from "../ui/Breadcrumb/Breadcrumb";
+import Divider from "../ui/Divider/Divider";
+import { formatLastUpdated } from "../utils/formatDate";
+
+/**
+ * Key Component Demo & Documentation
+ *
+ * This page demonstrates the Key component and its various configurations.
+ *
+ * ## Key Component Props:
+ *
+ * ### Required Props:
+ * - `label` (string): The text or symbol to display on the key (e.g., "Esc", "⌘", "Ctrl")
+ *
+ * ### Optional Props:
+ * - `appearance` (string): Visual style variant
+ *   - Options: 'light', 'dark'
+ *   - Default: 'light'
+ *
+ * ## Usage Examples:
+ *
+ * Basic key:
+ * ```jsx
+ * <Key label="Esc" />
+ * ```
+ *
+ * Dark key:
+ * ```jsx
+ * <Key label="⌘" appearance="dark" />
+ * ```
+ *
+ * Keyboard shortcut display:
+ * ```jsx
+ * <div>
+ *   <Key label="Ctrl" /> + <Key label="K" />
+ * </div>
+ * ```
+ */
+
+// Common keyboard keys and symbols
+const commonKeys = [
+  "Esc",
+  "⌘",
+  "Ctrl",
+  "Alt",
+  "Shift",
+  "Enter",
+  "Tab",
+  "Space",
+  "Delete",
+  "Backspace",
+  "↑",
+  "↓",
+  "←",
+  "→",
+];
+
+export default function KeyDemo() {
+
+  return (
+    <section className="page">
+      <header className="page__header">
+        <div className="page__header-container">
+          <Breadcrumb />
+          <div className="page__header-info">
+            <div className="page__header-content">
+              <h1 className="page__header-title">Key</h1>
+              <p className="page__header-description">
+                The Key component displays keyboard key representations, perfect for
+          showing keyboard shortcuts, hotkeys, or keyboard instructions.
+          Supports both light and dark appearance styles to match your design
+          theme.
+              </p>
+            </div>
+            <div className="page__header-metadata">
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Author</p>
+                <a
+                  href="https://chgit.slack.com/team/U06V9C0K06S"
+                  className="page__metadata-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  @Michael-Stevens
+                </a>
+              </div>
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Last updated</p>
+                <p className="page__metadata-value">{formatLastUpdated()}</p>
+              </div>
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Version</p>
+                <Flex direction="row" gap="8" alignItems="center">
+                  <p className="page__metadata-value">1.0.0</p>
+                  <span className="page__version-badge">BETA</span>
+                </Flex>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <main className="page__content">
+        <div className="page__examples-section">
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Common Keys</h2>
+            <p className="demo-group__description">
+              Display keyboard key representations for shortcuts, hotkeys, or keyboard instructions. The default appearance is light.
+            </p>
+            <Flex direction="row" gap="8" wrap={true} alignItems="center" className="demo-content">
+              {commonKeys.map((key) => (
+                <Key key={key} label={key} />
+              ))}
+            </Flex>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Appearances</h2>
+            <p className="demo-group__description">
+              Keys support both light and dark appearance styles to match your design theme.
+            </p>
+            <Flex direction="row" gap="16" wrap={true} alignItems="center" className="demo-content">
+              <Flex direction="column" gap="8" alignItems="center">
+                <Key label="Esc" appearance="light" />
+                <span style={{ fontSize: '12px', color: 'var(--uds-text-secondary)' }}>Light</span>
+              </Flex>
+              <Flex direction="column" gap="8" alignItems="center">
+                <Key label="Esc" appearance="dark" />
+                <span style={{ fontSize: '12px', color: 'var(--uds-text-secondary)' }}>Dark</span>
+              </Flex>
+            </Flex>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Keyboard Shortcuts</h2>
+            <p className="demo-group__description">
+              Combine multiple keys to display keyboard shortcuts. This is useful for showing command combinations.
+            </p>
+            <Flex direction="column" gap="16" className="demo-content">
+              <Flex direction="row" gap="8" alignItems="center">
+                <Key label="Ctrl" /> + <Key label="K" />
+              </Flex>
+              <Flex direction="row" gap="8" alignItems="center">
+                <Key label="⌘" /> + <Key label="C" />
+              </Flex>
+              <Flex direction="row" gap="8" alignItems="center">
+                <Key label="Alt" /> + <Key label="Tab" />
+              </Flex>
+              <Flex direction="row" gap="8" alignItems="center">
+                <Key label="Shift" /> + <Key label="Enter" />
+              </Flex>
+            </Flex>
+          </div>
+        </div>
+
+        <Divider variant="solid" />
+
+        <div className="page__tabs-content-container">
+          <div className="demo-group">
+            <div className="page__navigation">
+              <Link
+                to="/input"
+                className="page__nav-link page__nav-link--prev"
+              >
+                <span className="page__nav-label">Previous</span>
+                <span className="page__nav-title">Text Input</span>
+              </Link>
+              <Link
+                to="/micro-calendar"
+                className="page__nav-link page__nav-link--next"
+              >
+                <span className="page__nav-label">Next</span>
+                <span className="page__nav-title">Micro Calendar</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </section>
+  );
+}

package/src/pages/MenuDemo.jsx

@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Menu from "../ui/Menu/Menu";
+import Breadcrumb from "../ui/Breadcrumb/Breadcrumb";
+import Flex from "../ui/Flex/Flex";
+import { formatLastUpdated } from "../utils/formatDate";
+import Divider from "../ui/Divider/Divider";
+
+/**
+ * Menu Component Demo & Documentation
+ *
+ * This page demonstrates the Menu component and its various configurations.
+ */
+export default function MenuDemo() {
+  const [activeBrand, setActiveBrand] = useState("locumsmart");
+  const [activeMode, setActiveMode] = useState("light");
+
+  
+  
+
+  return (
+    <section className="page">
+      <header className="page__header">
+        <div className="page__header-container">
+          <Breadcrumb />
+          <div className="page__header-info">
+            <div className="page__header-content">
+              <h1 className="page__header-title">Menu</h1>
+              <p className="page__header-description">
+                The Menu component provides a collapsible navigation sidebar
+                with accordion sections for organizing navigation items. It
+                supports both expanded and collapsed states, with automatic
+                expansion of sections when child items are active.
+              </p>
+            </div>
+            <div className="page__header-metadata">
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Author</p>
+                <a
+                  href="https://chgit.slack.com/team/U06V9C0K06S"
+                  className="page__metadata-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  @Michael-Stevens
+                </a>
+              </div>
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Last updated</p>
+                <p className="page__metadata-value">{formatLastUpdated()}</p>
+              </div>
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Version</p>
+                <Flex direction="row" gap="8" alignItems="center">
+                  <p className="page__metadata-value">1.0.0</p>
+                  <span className="page__version-badge">BETA</span>
+                </Flex>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <main className="page__content">
+        {/* Component Examples Section - Above Tabs */}
+        <div className="page__examples-section">
+          <div className="demo-group">
+                <h2 className="demo-group__heading">Basic Usage</h2>
+                <p className="demo-group__description">
+                  The Menu component provides a navigation sidebar with
+                  collapsible sections. It automatically expands sections when
+                  their child routes are active.
+                </p>
+                <div className="demo-content">
+                  <div className="demo-card">
+                    <h3>Menu Component</h3>
+                    <p>
+                      The menu is typically used as a fixed sidebar in the
+                      application layout. It includes:
+                    </p>
+                    <ul>
+                      <li>Collapsible/expandable state</li>
+                      <li>
+                        Accordion sections for Foundations, Components, and
+                        Patterns
+                      </li>
+                      <li>
+                        Auto-expansion of sections when child routes are active
+                      </li>
+                      <li>Search functionality (placeholder)</li>
+                      <li>Brand and mode selection controls</li>
+                    </ul>
+                    <div
+                      style={{
+                        position: "relative",
+                        height: "600px",
+                        border: "1px solid var(--uds-border-primary)",
+                        borderRadius: "var(--uds-radius-8)",
+                        overflow: "hidden",
+                        marginTop: "var(--uds-gap-24)",
+                      }}
+                    >
+                      <Menu
+                        activeBrand={activeBrand}
+                        activeMode={activeMode}
+                        onBrandChange={setActiveBrand}
+                        onModeChange={setActiveMode}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+        <Divider variant="solid" />
+
+        <div className="page__tabs-content-container">
+          <div className="demo-group">
+            <div className="page__navigation">
+              <Link
+                to="/key"
+                className="page__nav-link page__nav-link--prev"
+              >
+                <span className="page__nav-label">Previous</span>
+                <span className="page__nav-title">Key</span>
+              </Link>
+              <Link
+                to="/pill-toggle"
+                className="page__nav-link page__nav-link--next"
+              >
+                <span className="page__nav-label">Next</span>
+                <span className="page__nav-title">Pill Toggle</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </section>
+  );
+}

package/src/pages/MicroCalendarDemo.jsx

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import MicroCalendar from "../ui/MicroCalendar/MicroCalendar";
+import Flex from "../ui/Flex/Flex";
+import Breadcrumb from "../ui/Breadcrumb/Breadcrumb";
+import Divider from "../ui/Divider/Divider";
+import { formatLastUpdated } from "../utils/formatDate";
+
+export default function MicroCalendarDemo() {
+  const [selectedDate, setSelectedDate] = useState(new Date(2026, 0, 1)); // January 1, 2026
+  const [selectedDate2, setSelectedDate2] = useState(null);
+
+  // Example unavailable dates (matching the design: days 4, 5, 6, 7)
+  const unavailableDates = [
+    new Date(2026, 0, 4), // January 4
+    new Date(2026, 0, 5), // January 5
+    new Date(2026, 0, 6), // January 6
+    new Date(2026, 0, 7), // January 7
+  ];
+
+  // Example date data with travel and assignment flags (matching the design)
+  const dateData = {
+    "2026-01-01": { travel: false, onAssignment: false }, // Selected - light blue
+    "2026-01-08": { travel: false, onAssignment: true }, // On Assignment - dark blue
+    "2026-01-25": { travel: true, onAssignment: false }, // Travel - green triangle
+    "2026-01-26": { travel: false, onAssignment: true }, // On Assignment - blue circle
+    "2026-01-27": { travel: false, onAssignment: true }, // On Assignment - blue circle
+    "2026-01-28": { travel: false, onAssignment: true }, // On Assignment - blue circle
+    "2026-01-29": { travel: false, onAssignment: true }, // On Assignment - blue circle
+    "2026-01-30": { travel: false, onAssignment: true }, // On Assignment - blue circle
+    "2026-01-31": { travel: true, onAssignment: true }, // Both - green triangle and blue circle
+  };
+
+  return (
+    <section className="page">
+      <header className="page__header">
+        <div className="page__header-container">
+          <Breadcrumb />
+          <div className="page__header-info">
+            <div className="page__header-content">
+              <h1 className="page__header-title">Micro Calendar</h1>
+              <p className="page__header-description">
+                A compact, minimal calendar component perfect for inline date selection
+                or displaying dates in small spaces. The micro calendar shows a single
+                month view without navigation controls.
+              </p>
+            </div>
+            <div className="page__header-metadata">
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Author</p>
+                <a
+                  href="https://chgit.slack.com/team/U06V9C0K06S"
+                  className="page__metadata-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  @Michael-Stevens
+                </a>
+              </div>
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Last updated</p>
+                <p className="page__metadata-value">{formatLastUpdated()}</p>
+              </div>
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Version</p>
+                <Flex direction="row" gap="8" alignItems="center">
+                  <p className="page__metadata-value">1.0.0</p>
+                  <span className="page__version-badge">BETA</span>
+                </Flex>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="page__content">
+        <div className="page__examples-section">
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Basic Usage</h2>
+            <p className="demo-group__description">
+              A micro calendar with month navigation, date selection, and expand/collapse functionality. Click on any date to select it.
+            </p>
+            <div className="demo-content">
+              <MicroCalendar
+                value={selectedDate}
+                onDateSelect={setSelectedDate}
+                month={new Date(2026, 0, 1)} // January 2026
+                showExpandCollapse={false}
+              />
+            </div>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">With Date States</h2>
+            <p className="demo-group__description">
+              The calendar supports multiple date states: Available (white), Selected (light blue), On Assignment (dark blue with circle icon), Unavailable (red line), and Travel (green triangle icon).
+            </p>
+            <div className="demo-content">
+              <MicroCalendar
+                value={selectedDate}
+                onDateSelect={setSelectedDate}
+                unavailableDates={unavailableDates}
+                dateData={dateData}
+                month={new Date(2026, 0, 1)} // January 2026
+              />
+            </div>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Collapsed State</h2>
+            <p className="demo-group__description">
+              The calendar can start in a collapsed state, showing only the first row of days. Click the expand button to show all days.
+            </p>
+            <div className="demo-content">
+              <MicroCalendar
+                value={selectedDate2}
+                onDateSelect={setSelectedDate2}
+                defaultExpanded={false}
+                month={new Date(2026, 0, 1)} // January 2026
+              />
+            </div>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Without Legend</h2>
+            <p className="demo-group__description">
+              The legend can be hidden if you prefer a more compact display.
+            </p>
+            <div className="demo-content">
+              <MicroCalendar
+                value={selectedDate}
+                onDateSelect={setSelectedDate}
+                showLegend={false}
+                month={new Date(2026, 0, 1)} // January 2026
+              />
+            </div>
+          </div>
+        </div>
+
+        <Divider variant="solid" />
+
+        <div className="page__tabs-content-container">
+          <div className="demo-group">
+            <div className="page__navigation">
+              <Link
+                to="/datepicker"
+                className="page__nav-link page__nav-link--prev"
+              >
+                <span className="page__nav-label">Previous</span>
+                <span className="page__nav-title">Datepicker</span>
+              </Link>
+              <Link
+                to="/divider"
+                className="page__nav-link page__nav-link--next"
+              >
+                <span className="page__nav-label">Next</span>
+                <span className="page__nav-title">Divider</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </section>
+  );
+}