@mich8060/chg-design-system 0.1.0

package/src/pages/TokensDemo.scss

@@ -0,0 +1,270 @@
+.tokens-demo {
+  padding: var(--uds-spacing-24);
+  max-width: 1600px;
+  margin: 0 auto;
+  background: white;
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  border-radius: var(--uds-radius-8);
+  color: var(--uds-text-primary);
+  font-family: var(--uds-font-family);
+
+  &__header {
+    margin-bottom: var(--uds-spacing-24);
+  }
+
+  &__title {
+    font-size: var(--uds-font-size-24) !important;
+    font-weight: var(--uds-font-weight-bold) !important;
+    line-height: var(--uds-line-heading-24) !important;
+    margin: 0 0 var(--uds-spacing-8) 0;
+    color: var(--uds-text-brand-primary);
+    font-family: var(--uds-font-family);
+  }
+
+  &__subtitle {
+    font-size: var(--uds-font-size-14);
+    line-height: var(--uds-line-14);
+    color: var(--uds-text-secondary);
+    margin: 0;
+    font-family: var(--uds-font-family);
+  }
+
+  &__section-title {
+    font-size: var(--uds-font-size-16);
+    font-weight: var(--uds-font-weight-semibold);
+    line-height: var(--uds-line-16);
+    margin: 0 0 var(--uds-spacing-16) 0;
+    color: var(--uds-text-primary);
+    font-family: var(--uds-font-family);
+  }
+
+  &__core {
+    margin-bottom: var(--uds-spacing-48);
+  }
+
+  &__core-content {
+    background: var(--uds-surface-secondary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: var(--uds-radius-8);
+    padding: 16px;
+  }
+
+  &__brands,
+  &__modes {
+    margin-bottom: var(--uds-spacing-48);
+  }
+
+  &__grid {
+    display: grid;
+    gap: var(--uds-gap-24);
+
+    &--brands {
+      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    }
+
+    &--modes {
+      grid-template-columns: repeat(2, 1fr);
+      max-width: 1400px;
+    }
+  }
+
+  &__loading,
+  &__error {
+    text-align: center;
+    padding: var(--uds-spacing-48);
+    color: var(--uds-text-secondary);
+  }
+}
+
+.tokens-section {
+  background: var(--uds-surface-secondary);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  border-radius: var(--uds-radius-8);
+  padding: var(--uds-spacing-24);
+
+  &__title {
+    font-size: var(--uds-font-size-18);
+    font-weight: var(--uds-font-weight-semibold);
+    line-height: var(--uds-line-18);
+    margin: 0 0 var(--uds-spacing-12) 0;
+    color: var(--uds-text-primary);
+    font-family: var(--uds-font-family);
+    text-transform: capitalize;
+    padding-bottom: var(--uds-spacing-12);
+    border-bottom: var(--uds-border-width-2) solid var(--uds-border-primary);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--uds-gap-24);
+  }
+}
+
+.token-table-wrapper {
+  margin-bottom: var(--uds-spacing-24);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &__title {
+    font-size: var(--uds-font-size-16);
+    font-weight: var(--uds-font-weight-semibold);
+    line-height: var(--uds-line-16);
+    color: var(--uds-text-primary);
+    font-family: var(--uds-font-family);
+    text-transform: capitalize;
+    margin: 0 0 var(--uds-spacing-12) 0;
+    padding-bottom: var(--uds-spacing-8);
+    border-bottom: var(--uds-border-width-2) solid var(--uds-border-primary);
+  }
+}
+
+.token-subgroup {
+  margin-bottom: var(--uds-spacing-24);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &__title {
+    font-size: var(--uds-font-size-14);
+    font-weight: var(--uds-font-weight-semibold);
+    line-height: var(--uds-line-14);
+    color: var(--uds-text-secondary);
+    font-family: var(--uds-font-family);
+    text-transform: capitalize;
+    margin: 0 0 var(--uds-spacing-12) 0;
+    padding: var(--uds-spacing-8) var(--uds-spacing-12);
+    background: var(--uds-surface-tertiary);
+    border-radius: var(--uds-radius-4);
+    display: inline-block;
+  }
+}
+
+.token-subgroup-nested {
+  margin-bottom: var(--uds-spacing-24);
+  margin-left: var(--uds-spacing-16);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &__title {
+    font-size: var(--uds-font-size-12);
+    font-weight: var(--uds-font-weight-semibold);
+    line-height: var(--uds-line-12);
+    color: var(--uds-text-secondary);
+    font-family: var(--uds-font-family);
+    text-transform: uppercase;
+    letter-spacing: var(--uds-letter-spacing-loose);
+    margin: 0 0 var(--uds-spacing-8) 0;
+    opacity: 0.8;
+  }
+}
+
+.token-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--uds-font-size-14);
+  font-family: var(--uds-font-family);
+
+  &__header {
+    text-align: left;
+    padding: var(--uds-spacing-10) var(--uds-spacing-12);
+    font-weight: var(--uds-font-weight-semibold);
+    font-size: var(--uds-font-size-12);
+    line-height: var(--uds-line-12);
+    text-transform: uppercase;
+    letter-spacing: var(--uds-letter-spacing-loose);
+    color: var(--uds-text-secondary);
+    font-family: var(--uds-font-family);
+    background: var(--uds-surface-tertiary);
+    border-bottom: var(--uds-border-width-2) solid var(--uds-border-primary);
+
+    &--name {
+      width: 50%;
+    }
+
+    &--value {
+      width: 50%;
+    }
+  }
+
+  &__row {
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-quaternary);
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background: var(--uds-surface-tertiary);
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &__cell {
+    padding: var(--uds-spacing-10) var(--uds-spacing-12);
+    vertical-align: middle;
+    font-size: var(--uds-font-size-14);
+    line-height: var(--uds-line-14);
+    font-family: var(--uds-font-family);
+
+    &--name {
+      font-family: var(--uds-font-family);
+      color: var(--uds-text-primary);
+
+      code {
+        font-size: var(--uds-font-size-14);
+        line-height: var(--uds-line-14);
+        font-family: var(--uds-font-family);
+        background: var(--uds-surface-tertiary);
+        padding: var(--uds-spacing-2) var(--uds-spacing-6);
+        border-radius: var(--uds-radius-4);
+      }
+    }
+
+    &--value {
+      color: var(--uds-text-secondary);
+    }
+  }
+}
+
+.token-value {
+  display: flex;
+  align-items: center;
+  gap: var(--uds-gap-8);
+  font-family: var(--uds-font-family);
+  color: var(--uds-text-secondary);
+  white-space: nowrap;
+  font-size: var(--uds-font-size-14);
+  line-height: var(--uds-line-14);
+
+  &--color {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__swatch {
+    width: 20px;
+    height: 20px;
+    border-radius: var(--uds-radius-4);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    flex-shrink: 0;
+    box-shadow: 0 0 0 1px var(--uds-scrim-subtle);
+  }
+
+  &__text {
+    font-size: var(--uds-font-size-14);
+    line-height: var(--uds-line-14);
+  }
+
+  &--text {
+    font-size: var(--uds-font-size-14);
+    line-height: var(--uds-line-14);
+    color: var(--uds-text-secondary);
+  }
+}

package/src/pages/TokensUsage.jsx

@@ -0,0 +1,220 @@
+import React, { useEffect } from "react";
+import Breadcrumb from "../ui/Breadcrumb/Breadcrumb";
+import Divider from "../ui/Divider/Divider";
+import { formatLastUpdated } from "../utils/formatDate";
+import Prism from "prismjs";
+import "../styles/prism-custom.css";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-markup";
+
+export default function TokensUsage() {
+  useEffect(() => {
+    Prism.highlightAll();
+  }, []);
+
+  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">CSS Tokens Usage</h1>
+              <p className="page__header-description">
+                Learn how to use design tokens (CSS custom properties) in your stylesheets.
+              </p>
+            </div>
+            <div className="page__header-metadata">
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Last updated</p>
+                <p className="page__metadata-value">{formatLastUpdated()}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="page__content">
+        <div className="page__examples-section">
+          <div className="demo-group">
+            <h2 className="demo-group__heading">What are Design Tokens?</h2>
+            <p className="demo-group__description">
+              Design tokens are CSS custom properties (variables) that store design decisions 
+              like colors, spacing, typography, and more. They ensure consistency across your 
+              application and make it easy to update the design system.
+            </p>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Basic Usage</h2>
+            <p className="demo-group__description">
+              Reference tokens in your CSS using the <code>var()</code> function:
+            </p>
+            <pre className="code-block">
+              <code className="language-css">{`.my-component {
+  color: var(--uds-text-primary);
+  background: var(--uds-surface-primary);
+  padding: var(--uds-spacing-16);
+  border-radius: var(--uds-radius-8);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+}`}</code>
+            </pre>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Token Categories</h2>
+            
+            <div style={{ marginTop: "16px" }}>
+              <h3 className="uds-heading-20-semibold" style={{ marginBottom: "12px" }}>Colors</h3>
+              <p className="uds-body-16" style={{ marginBottom: "12px" }}>
+                Color tokens follow this naming pattern:
+              </p>
+              <ul className="uds-body-16" style={{ marginLeft: "24px", marginBottom: "16px" }}>
+                <li><code>--uds-color-primary-*</code> - Primary brand colors</li>
+                <li><code>--uds-color-secondary-*</code> - Secondary brand colors</li>
+                <li><code>--uds-text-*</code> - Text colors</li>
+                <li><code>--uds-surface-*</code> - Background/surface colors</li>
+                <li><code>--uds-border-*</code> - Border colors</li>
+              </ul>
+              <pre className="code-block">
+                <code className="language-css">{`.card {
+  background: var(--uds-surface-primary);
+  color: var(--uds-text-primary);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+}`}</code>
+              </pre>
+            </div>
+
+            <div style={{ marginTop: "24px" }}>
+              <h3 className="uds-heading-20-semibold" style={{ marginBottom: "12px" }}>Spacing</h3>
+              <p className="uds-body-16" style={{ marginBottom: "12px" }}>
+                Spacing tokens use the pattern <code>--uds-spacing-{`{size}`}</code>:
+              </p>
+              <pre className="code-block">
+                <code className="language-css">{`.container {
+  padding: var(--uds-spacing-16);
+  margin: var(--uds-spacing-24);
+  gap: var(--uds-spacing-8);
+}`}</code>
+              </pre>
+            </div>
+
+            <div style={{ marginTop: "24px" }}>
+              <h3 className="uds-heading-20-semibold" style={{ marginBottom: "12px" }}>Typography</h3>
+              <p className="uds-body-16" style={{ marginBottom: "12px" }}>
+                Typography tokens include font size, line height, and weight:
+              </p>
+              <pre className="code-block">
+                <code className="language-css">{`.custom-text {
+  font-family: var(--uds-font-family);
+  font-size: var(--uds-font-size-16);
+  line-height: var(--uds-line-16);
+  font-weight: var(--uds-font-weight-semibold);
+}`}</code>
+              </pre>
+            </div>
+
+            <div style={{ marginTop: "24px" }}>
+              <h3 className="uds-heading-20-semibold" style={{ marginBottom: "12px" }}>Border Radius</h3>
+              <p className="uds-body-16" style={{ marginBottom: "12px" }}>
+                Border radius tokens: <code>--uds-radius-{`{size}`}</code>
+              </p>
+              <pre className="code-block">
+                <code className="language-css">{`.rounded {
+  border-radius: var(--uds-radius-8);
+}
+
+.rounded-lg {
+  border-radius: var(--uds-radius-12);
+}`}</code>
+              </pre>
+            </div>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Brand and Theme Switching</h2>
+            <p className="demo-group__description">
+              Tokens automatically adapt based on the <code>data-brand</code> and <code>data-mode</code> 
+              attributes on your root HTML element.
+            </p>
+            <pre className="code-block">
+              <code className="language-markup">{`<!-- Light mode, default brand -->
+<html data-brand="design-system" data-mode="light">
+
+<!-- Dark mode, CompHealth brand -->
+<html data-brand="comphealth" data-mode="dark">`}</code>
+            </pre>
+            <p className="uds-body-14" style={{ marginTop: "16px", color: "var(--uds-text-secondary)" }}>
+              When you change these attributes, all tokens automatically update to match the selected 
+              brand and theme. No code changes needed!
+            </p>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Inline Styles (React)</h2>
+            <p className="demo-group__description">
+              You can also use tokens directly in inline styles:
+            </p>
+            <pre className="code-block">
+              <code className="language-markup">{`<div style={{
+  color: 'var(--uds-text-primary)',
+  padding: 'var(--uds-spacing-16)',
+  background: 'var(--uds-surface-secondary)'
+}}>
+  Content
+</div>`}</code>
+            </pre>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Animation Tokens</h2>
+            <p className="demo-group__description">
+              Use animation tokens for consistent motion:
+            </p>
+            <pre className="code-block">
+              <code className="language-css">{`.animated-element {
+  transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+}
+
+.animated-element:hover {
+  transform: scale(1.05);
+}`}</code>
+            </pre>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Button Tokens</h2>
+            <p className="demo-group__description">
+              Button-specific tokens for consistent button styling:
+            </p>
+            <pre className="code-block">
+              <code className="language-css">{`.custom-button {
+  background: var(--uds-button-surface-primary-default);
+  color: var(--uds-button-text-default);
+  border: var(--uds-border-width-1) solid var(--uds-button-border-primary-default);
+}
+
+.custom-button:hover {
+  background: var(--uds-button-surface-primary-hover);
+  border-color: var(--uds-button-border-primary-hover);
+}`}</code>
+            </pre>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Exploring Tokens</h2>
+            <p className="demo-group__description">
+              View all available tokens in the{" "}
+              <a href="/figma-variables" style={{ color: "var(--uds-text-brand-primary)" }}>
+                Design Tokens
+              </a>{" "}
+              page, or inspect the <code>tokens.css</code> file directly.
+            </p>
+          </div>
+        </div>
+
+        <Divider variant="solid" />
+      </main>
+    </section>
+  );
+}

package/src/pages/TooltipDemo.jsx

@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Tooltip from "../ui/Tooltip/Tooltip";
+import Button from "../ui/Button/Button";
+import Icon from "../ui/Icon/Icon";
+import Flex from "../ui/Flex/Flex";
+import Breadcrumb from "../ui/Breadcrumb/Breadcrumb";
+import Divider from "../ui/Divider/Divider";
+import { formatLastUpdated } from "../utils/formatDate";
+
+const tooltipContent =
+  "A message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface.";
+
+/**
+ * Tooltip Component Demo & Documentation
+ *
+ * This page demonstrates the Tooltip component and its various configurations.
+ */
+export default function TooltipDemo() {
+
+  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">Tooltip</h1>
+              <p className="page__header-description">
+                Tooltips provide additional context or information when users
+                hover over or focus on an element. They appear temporarily and
+                disappear when the user moves their cursor away.
+              </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">Placement</h2>
+            <p className="demo-group__description">
+              Tooltips can be positioned on any side of the trigger element: top, bottom, left, or right. The default placement is top.
+            </p>
+            <Flex direction="row" gap="24" wrap={true} alignItems="center" className="demo-content">
+              <Tooltip content={tooltipContent} placement="top">
+                <Button appearance="outline">Top</Button>
+              </Tooltip>
+              <Tooltip content={tooltipContent} placement="bottom">
+                <Button appearance="outline">Bottom</Button>
+              </Tooltip>
+              <Tooltip content={tooltipContent} placement="left">
+                <Button appearance="outline">Left</Button>
+              </Tooltip>
+              <Tooltip content={tooltipContent} placement="right">
+                <Button appearance="outline">Right</Button>
+              </Tooltip>
+            </Flex>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">With Icons</h2>
+            <p className="demo-group__description">
+              Tooltips work well with icon buttons to provide additional context without cluttering the interface.
+            </p>
+            <Flex direction="row" gap="16" wrap={true} alignItems="center" className="demo-content">
+              <Tooltip content="Edit this item" placement="top">
+                <Button appearance="text" layout="icon-only" icon="Pencil" size="small" />
+              </Tooltip>
+              <Tooltip content="Delete this item" placement="top">
+                <Button appearance="text" layout="icon-only" icon="Trash" size="small" />
+              </Tooltip>
+              <Tooltip content="More information" placement="top">
+                <Button appearance="text" layout="icon-only" icon="Info" size="small" />
+              </Tooltip>
+              <Tooltip content="Settings" placement="top">
+                <Button appearance="text" layout="icon-only" icon="Gear" size="small" />
+              </Tooltip>
+            </Flex>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">With Text</h2>
+            <p className="demo-group__description">
+              Tooltips can be attached to any element, including text links or labels, to provide helpful context.
+            </p>
+            <Flex direction="column" gap="16" className="demo-content">
+              <p>
+                This is a paragraph with a{" "}
+                <Tooltip content="This is a helpful tooltip" placement="top">
+                  <a href="#" style={{ color: 'var(--uds-text-link-primary-default)', textDecoration: 'underline' }}>
+                    tooltip on a link
+                  </a>
+                </Tooltip>
+                .
+              </p>
+              <p>
+                Hover over this{" "}
+                <Tooltip content="Additional information appears here" placement="bottom">
+                  <span style={{ borderBottom: '1px dotted', cursor: 'help' }}>dotted text</span>
+                </Tooltip>
+                {" "}to see the tooltip.
+              </p>
+            </Flex>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Disabled Tooltip</h2>
+            <p className="demo-group__description">
+              Tooltips can be disabled when they are not needed or should not be displayed.
+            </p>
+            <div className="demo-content">
+              <Tooltip content="This tooltip is disabled" placement="top" disabled>
+                <Button appearance="outline">Hover me (tooltip disabled)</Button>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+
+        <Divider variant="solid" />
+
+        <div className="page__tabs-content-container">
+          <div className="demo-group">
+            <div className="page__navigation">
+              <Link
+                to="/toggle"
+                className="page__nav-link page__nav-link--prev"
+              >
+                <span className="page__nav-label">Previous</span>
+                <span className="page__nav-title">Toggle</span>
+              </Link>
+              <Link
+                to="/input"
+                className="page__nav-link page__nav-link--next"
+              >
+                <span className="page__nav-label">Next</span>
+                <span className="page__nav-title">Text Input</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </section>
+  );
+}