@mich8060/chg-design-system 0.1.0

package/src/App.js

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Home from "./pages/Home";
+import Installation from "./pages/Installation";
+import FontInstallation from "./pages/FontInstallation";
+import TokensUsage from "./pages/TokensUsage";
+import ComponentsUsage from "./pages/ComponentsUsage";
+import ButtonDemo from "./pages/ButtonDemo";
+import IconDemo from "./pages/IconDemo";
+import FlexDemo from "./pages/FlexDemo";
+import TypographyDemo from "./pages/TypographyDemo";
+import SpacingDemo from "./pages/SpacingDemo";
+import ShadowsDemo from "./pages/ShadowsDemo";
+import BorderRadiusDemo from "./pages/BorderRadiusDemo";
+import ColorsDemo from "./pages/ColorsDemo";
+import AccordionDemo from "./pages/AccordionDemo";
+import ActionMenuDemo from "./pages/ActionMenuDemo";
+import AvatarDemo from "./pages/AvatarDemo";
+import BadgeDemo from "./pages/BadgeDemo";
+import BrandingDemo from "./pages/BrandingDemo";
+import BreadcrumbDemo from "./pages/BreadcrumbDemo";
+import DatepickerDemo from "./pages/DatepickerDemo";
+import MicroCalendarDemo from "./pages/MicroCalendarDemo";
+import CheckboxDemo from "./pages/CheckboxDemo";
+import ChipDemo from "./pages/ChipDemo";
+import DividerDemo from "./pages/DividerDemo";
+import DotStatusDemo from "./pages/DotStatusDemo";
+import DropdownDemo from "./pages/DropdownDemo";
+import FieldDemo from "./pages/FieldDemo";
+import FileUploadDemo from "./pages/FileUploadDemo";
+import ImageAspectDemo from "./pages/ImageAspectDemo";
+import KeyDemo from "./pages/KeyDemo";
+import PillToggleDemo from "./pages/PillToggleDemo";
+import ProgressIndicatorDemo from "./pages/ProgressIndicatorDemo";
+import ProgressCircleDemo from "./pages/ProgressCircleDemo";
+import RadioDemo from "./pages/RadioDemo";
+import SliderDemo from "./pages/SliderDemo";
+import StatusDemo from "./pages/StatusDemo";
+import StepsDemo from "./pages/StepsDemo";
+import TableDemo from "./pages/TableDemo";
+import ToastDemo from "./pages/ToastDemo";
+import ToggleDemo from "./pages/ToggleDemo";
+import TooltipDemo from "./pages/TooltipDemo";
+import InputDemo from "./pages/InputDemo";
+import MenuDemo from "./pages/MenuDemo";
+import TabsDemo from "./pages/TabsDemo";
+import FigmaVariablesDemo from "./pages/FigmaVariablesDemo";
+import PaginationDemo from "./pages/PaginationDemo";
+import UtilitiesDemo from "./pages/UtilitiesDemo";
+import Menu from "./ui/Menu/Menu";
+import "./App.scss";
+
+const BRANDS = [
+  "design-system",
+  "locumsmart",
+  "wireframe",
+  "connect",
+  "comphealth",
+  "modio",
+  "weatherby",
+  "gms",
+];
+
+function App() {
+  const [activeBrand, setActiveBrand] = useState(() => {
+    const savedBrand = localStorage.getItem("activeBrand");
+    return savedBrand && BRANDS.includes(savedBrand)
+      ? savedBrand
+      : "design-system";
+  });
+
+  const [activeMode, setActiveMode] = useState(() => {
+    const savedMode = localStorage.getItem("activeMode");
+    return savedMode === "dark" ? "dark" : "light";
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-brand", activeBrand);
+    root.setAttribute("data-mode", activeMode);
+    localStorage.setItem("activeBrand", activeBrand);
+    localStorage.setItem("activeMode", activeMode);
+
+    return () => {
+      root.setAttribute("data-brand", "design-system");
+      root.setAttribute("data-mode", "light");
+    };
+  }, [activeBrand, activeMode]);
+
+  return (
+    <Router>
+      <div className="app">
+        <div className="app__sidebar">
+          <Menu
+            activeBrand={activeBrand}
+            activeMode={activeMode}
+            onBrandChange={setActiveBrand}
+            onModeChange={setActiveMode}
+          />
+        </div>
+        <div className="app__content">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/getting-started" element={<Installation />} />
+            <Route path="/getting-started/installation" element={<Installation />} />
+            <Route path="/getting-started/font" element={<FontInstallation />} />
+            <Route path="/getting-started/tokens" element={<TokensUsage />} />
+            <Route path="/getting-started/components" element={<ComponentsUsage />} />
+            <Route path="/buttons" element={<ButtonDemo />} />
+            <Route path="/icons" element={<IconDemo />} />
+            <Route path="/flex" element={<FlexDemo />} />
+            <Route path="/typography" element={<TypographyDemo />} />
+            <Route path="/spacing" element={<SpacingDemo />} />
+            <Route path="/shadows" element={<ShadowsDemo />} />
+            <Route path="/border-radius" element={<BorderRadiusDemo />} />
+            <Route path="/colors" element={<ColorsDemo />} />
+            <Route path="/accordion" element={<AccordionDemo />} />
+            <Route path="/action-menu" element={<ActionMenuDemo />} />
+            <Route path="/avatar" element={<AvatarDemo />} />
+            <Route path="/badge" element={<BadgeDemo />} />
+            <Route path="/branding" element={<BrandingDemo />} />
+            <Route path="/breadcrumb" element={<BreadcrumbDemo />} />
+            <Route path="/calendar" element={<DatepickerDemo />} />
+            <Route path="/micro-calendar" element={<MicroCalendarDemo />} />
+            <Route path="/checkbox" element={<CheckboxDemo />} />
+            <Route path="/chip" element={<ChipDemo />} />
+            <Route path="/divider" element={<DividerDemo />} />
+            <Route path="/dot-status" element={<DotStatusDemo />} />
+            <Route path="/dropdown" element={<DropdownDemo />} />
+            <Route path="/field" element={<FieldDemo />} />
+            <Route path="/file-upload" element={<FileUploadDemo />} />
+            <Route path="/image-aspect" element={<ImageAspectDemo />} />
+            <Route path="/key" element={<KeyDemo />} />
+            <Route path="/pill-toggle" element={<PillToggleDemo />} />
+            <Route
+              path="/progress-indicator"
+              element={<ProgressIndicatorDemo />}
+            />
+            <Route path="/progress-circle" element={<ProgressCircleDemo />} />
+            <Route path="/radio" element={<RadioDemo />} />
+            <Route path="/slider" element={<SliderDemo />} />
+            <Route path="/status" element={<StatusDemo />} />
+            <Route path="/steps" element={<StepsDemo />} />
+            <Route path="/table" element={<TableDemo />} />
+            <Route path="/toast" element={<ToastDemo />} />
+            <Route path="/toggle" element={<ToggleDemo />} />
+            <Route path="/tooltip" element={<TooltipDemo />} />
+            <Route path="/input" element={<InputDemo />} />
+            <Route path="/menu" element={<MenuDemo />} />
+            <Route path="/tabs" element={<TabsDemo />} />
+            <Route path="/pagination" element={<PaginationDemo />} />
+            <Route path="/figma-variables" element={<FigmaVariablesDemo />} />
+            <Route path="/utilities" element={<UtilitiesDemo />} />
+          </Routes>
+        </div>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

package/src/App.scss

@@ -0,0 +1,548 @@
+@import "./styles/typography";
+
+* {
+  box-sizing: border-box;
+}
+
+// Global text hyperlink styles
+a {
+  color: var(--uds-text-link-primary-default);
+  text-decoration: none;
+  transition: color 0.3s ease;
+
+  &:hover {
+    color: var(--uds-text-link-primary-hover);
+  }
+
+  &:active {
+    color: var(--uds-text-link-primary-active);
+  }
+
+  &:visited {
+    color: var(--uds-text-link-primary-visited);
+  }
+}
+
+.app {
+  background: var(--uds-surface-primary);
+  display: flex;
+  flex-direction: row;
+
+  &__bar {
+    background: var(--uds-color-black);
+    height: 8px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 11;
+  }
+
+  &__sidebar {
+    height: 100vh;
+    width: 300px;
+    background: var(--uds-surface-secondary);
+    border-right: var(--uds-border-width-1) solid var(--uds-border-primary);
+    transition: width var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-gap-24);
+  position: relative;
+  min-height: 100vh;
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 0;
+    width: 100%;
+    margin: 0;
+  }
+
+  &__examples-section {
+    width: 100%;
+    padding: var(--uds-spacing-48);
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// Demo group styles for component variant sections
+.demo-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-spacing-16);
+
+  &__heading {
+    @include uds-heading-24-medium;
+    margin: 0;
+    color: var(--uds-text-primary);
+  }
+
+  &__description {
+    @include uds-body-20;
+    margin: 0;
+    color: var(--uds-text-primary);
+    max-width: 720px;
+  }
+
+  h2 {
+    @include uds-heading-24-medium;
+    margin: 0 0 var(--uds-spacing-24) 0;
+    color: var(--uds-text-primary);
+  }
+
+  h3 {
+    @include uds-heading-20-semibold;
+    margin: var(--uds-spacing-32) 0 var(--uds-spacing-16) 0;
+    color: var(--uds-text-primary);
+  }
+
+  p {
+    @include uds-body-20;
+    margin: 0 0 var(--uds-spacing-24) 0;
+    color: var(--uds-text-primary);
+    max-width: 720px;
+  }
+}
+
+.page {
+
+  &__variant-tabs-container {
+    margin-bottom: var(--uds-spacing-24);
+  }
+
+  &__variant-tabs-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 0;
+    width: 100%;
+  }
+
+  &__tabs-container {
+    margin: 0 auto;
+    max-width: 960px;
+    width: 100%;
+    padding: var(--uds-spacing-48) var(--uds-spacing-48) 0;
+  }
+
+  &__tabs-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 0;
+    width: 100%;
+    margin-top: var(--uds-spacing-24);
+  }
+
+  &__tabs-content-container {
+    margin: 0 auto;
+    width: 960px;
+    padding: 0 var(--uds-spacing-48);
+  }
+
+  &__link {
+    color: var(--uds-text-link-primary-default);
+    text-decoration: none;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: var(--uds-text-link-primary-hover);
+    }
+
+    &:active {
+      color: var(--uds-text-link-primary-active);
+    }
+
+    &:visited {
+      color: var(--uds-text-link-primary-visited);
+    }
+  }
+
+  &__feedback-text {
+    margin-top: var(--uds-spacing-16);
+  }
+
+  &__usage-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--uds-gap-32);
+    margin-top: var(--uds-spacing-16);
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+      gap: var(--uds-gap-24);
+    }
+  }
+
+  &__usage-do,
+  &__usage-dont {
+    h3 {
+      @include uds-body-16-semibold;
+      margin: 0 0 var(--uds-spacing-12) 0;
+      color: var(--uds-text-primary);
+    }
+
+    ul {
+      margin: 0;
+      padding-left: var(--uds-spacing-20);
+      list-style-type: disc;
+    }
+
+    li {
+      @include uds-body-14;
+      margin-bottom: var(--uds-spacing-8);
+      color: var(--uds-text-primary);
+    }
+  }
+
+  &__usage-do {
+    h3 {
+      color: var(--uds-text-success);
+    }
+  }
+
+  &__usage-dont {
+    h3 {
+      color: var(--uds-text-destructive);
+    }
+  }
+
+  &__navigation {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--uds-gap-24);
+    margin-top: var(--uds-spacing-16);
+  }
+
+  &__nav-link {
+    display: flex;
+    flex-direction: column;
+    padding: var(--uds-spacing-16) var(--uds-spacing-24);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: var(--uds-radius-8);
+    text-decoration: none;
+    color: var(--uds-text-primary);
+    transition: all 0.2s ease;
+    flex: 1;
+    max-width: 300px;
+
+    &:hover {
+      background-color: var(--uds-surface-secondary);
+      border-color: var(--uds-border-brand-primary);
+      color: var(--uds-text-brand-primary);
+    }
+
+    &--prev {
+      text-align: left;
+    }
+
+    &--next {
+      text-align: right;
+      margin-left: auto;
+    }
+  }
+
+  &__nav-label {
+    @include uds-body-12;
+    color: var(--uds-text-secondary);
+    margin-bottom: var(--uds-spacing-4);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  &__nav-title {
+    @include uds-body-16-semibold;
+    color: var(--uds-text-primary);
+  }
+
+  &__header {
+    background: var(--uds-surface-secondary);
+    padding: var(--uds-spacing-80);
+    color: var(--uds-text-primary);
+    position: relative;
+    overflow: hidden;
+  }
+
+  &__header-container {
+    max-width: calc(
+      1280px - 96px
+    ); // Account for header padding: 48px left + 48px right = 96px
+    width: 100%;
+    margin: 0; // Left-aligned to match content
+    display: flex;
+    flex-direction: column;
+    gap: var(--uds-gap-16); // 16px between breadcrumb and headline
+  }
+
+  &__header-title {
+    @include uds-display-48-bold;
+    margin: 0;
+    letter-spacing: -0.96px;
+    text-transform: capitalize;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__header-description {
+    @include uds-body-16;
+    margin: 0;
+    color: var(--uds-text-secondary);
+    max-width: 720px;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__header-info {
+    display: flex;
+    gap: var(--uds-gap-10);
+    align-items: flex-end;
+    justify-content: space-between;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__header-content {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    gap: var(--uds-gap-16); // 16px between headline and paragraph
+    position: relative;
+    z-index: 1;
+  }
+
+  &__header-metadata {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 320px;
+    @include uds-body-12;
+  }
+
+  &__metadata-row {
+    display: flex;
+    gap: var(--uds-gap-24);
+    align-items: center;
+    padding: var(--uds-spacing-8) var(--uds-spacing-12);
+    width: 100%;
+
+    &:not(:first-child) {
+      border-top: var(--uds-border-width-1) solid var(--uds-border-inverse);
+    }
+  }
+
+  &__metadata-label {
+    @include uds-body-12-semibold;
+    color: var(--uds-text-secondary);
+    width: 120px;
+    margin: 0;
+  }
+
+  &__metadata-value {
+    color: var(--uds-text-secondary);
+    margin: 0;
+  }
+
+  &__metadata-link {
+    color: var(--uds-text-link-primary-default);
+    text-decoration: none;
+    margin: 0;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: var(--uds-text-link-primary-hover);
+    }
+
+    &:active {
+      color: var(--uds-text-link-primary-active);
+    }
+
+    &:visited {
+      color: var(--uds-text-link-primary-visited);
+    }
+  }
+
+  &__version-badge {
+    color: var(--uds-text-link-primary-default);
+    padding: 0 var(--uds-spacing-4);
+  }
+}
+
+.demo {
+  &-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--uds-gap-16);
+    margin: 0 auto;
+    max-width: 960px;
+    width: 100%;
+    padding: var(--uds-spacing-24) var(--uds-spacing-48);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    h2 {
+      @include uds-heading-20-bold;
+      margin: 0;
+      color: var(--uds-text-primary);
+    }
+
+    h3 {
+      @include uds-heading-20-semibold;
+      margin: 0;
+      color: var(--uds-text-primary);
+    }
+
+    p {
+      @include uds-body-16;
+      margin: 0;
+      color: var(--uds-text-secondary);
+    }
+  }
+
+  &-file-list {
+    margin-top: var(--uds-gap-16);
+    padding: var(--uds-spacing-12);
+    background: var(--uds-surface-secondary);
+    border-radius: var(--uds-radius-4);
+
+    &__title {
+      @include uds-body-14-semibold;
+      margin: 0 0 var(--uds-gap-8) 0;
+      color: var(--uds-text-primary);
+    }
+
+    &__items {
+      @include uds-body-14;
+      margin: 0;
+      padding-left: var(--uds-spacing-20);
+      color: var(--uds-text-primary);
+    }
+
+    &__item {
+      margin-bottom: var(--uds-gap-4);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    ul {
+      @include uds-body-16;
+      margin: 0;
+      padding-left: var(--uds-spacing-24);
+      color: var(--uds-text-secondary);
+    }
+
+    li {
+      margin-bottom: var(--uds-gap-8);
+    }
+
+    code {
+      @include uds-body-14;
+      padding: var(--uds-spacing-2) var(--uds-spacing-6);
+      background: var(--uds-surface-tertiary);
+      border-radius: var(--uds-radius-4);
+      color: var(--uds-text-brand-primary);
+    }
+  }
+}
+
+.page__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--uds-spacing-24);
+}
+
+.demo-content {
+
+  &--icons {
+    > * {
+      flex: 1 1 240px;
+      min-width: 240px;
+    }
+  }
+}
+
+.demo-grid {
+  > * {
+    flex: 0 1 auto;
+  }
+}
+
+.demo-icon {
+  @include uds-body-20;
+  display: inline-flex;
+}
+
+.icon-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-gap-12);
+  padding: var(--uds-spacing-24);
+  border-radius: var(--uds-radius-16);
+  background: var(--uds-surface-secondary);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  align-items: center;
+  text-align: center;
+  box-shadow: var(--uds-shadow-sm);
+  transition:
+    box-shadow var(--uds-animation-duration-200) var(--uds-animation-ease-standard),
+    transform var(--uds-animation-duration-200) var(--uds-animation-ease-standard),
+    border-color var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+  &:hover {
+    box-shadow: var(--uds-shadow-md);
+    border-color: var(--uds-border-brand-primary);
+    transform: translateY(-2px);
+  }
+}
+
+.icon-card__meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-gap-4);
+  color: var(--uds-text-secondary);
+}
+
+.icon-card__label {
+  @include uds-body-14-semibold;
+  text-transform: capitalize;
+  color: var(--uds-text-primary);
+}
+
+.icon-card__meta code {
+  @include uds-body-12;
+  padding: var(--uds-spacing-4) var(--uds-spacing-8);
+  background: var(--uds-surface-tertiary);
+  border-radius: var(--uds-radius-4);
+  color: var(--uds-text-secondary);
+}
+
+@media (max-width: var(--uds-breakpoint-md)) {
+  .app-shell {
+    flex-direction: column;
+  }
+
+  .app-shell__content {
+    margin-left: 0;
+    max-width: 100%;
+    padding: var(--uds-spacing-32) var(--uds-spacing-16) var(--uds-spacing-48);
+  }
+}

package/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+test("renders learn react link", () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});