@mich8060/chg-design-system 0.1.0

package/src/pages/ButtonDemo.scss

@@ -0,0 +1,34 @@
+.button-demo {
+  &__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;
+    }
+  }
+}

package/src/pages/CheckboxDemo.jsx

@@ -0,0 +1,194 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Checkbox from "../ui/Checkbox/Checkbox";
+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 CheckboxDemo() {
+  const [checked1, setChecked1] = useState(false);
+  const [checked2, setChecked2] = useState(true);
+  const [checked3, setChecked3] = useState(false);
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [allSelected, setAllSelected] = useState(false);
+  const [items, setItems] = useState({
+    item1: false,
+    item2: false,
+    item3: false,
+  });
+
+  const handleSelectAll = (checked) => {
+    setAllSelected(checked);
+    setItems({
+      item1: checked,
+      item2: checked,
+      item3: checked,
+    });
+  };
+
+  const handleItemChange = (itemKey, checked) => {
+    const newItems = { ...items, [itemKey]: checked };
+    setItems(newItems);
+
+    const allChecked = Object.values(newItems).every(Boolean);
+    const noneChecked = Object.values(newItems).every((val) => val === false);
+    setAllSelected(allChecked);
+    setIndeterminate(!allChecked && !noneChecked);
+  };
+
+  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">Checkbox</h1>
+              <p className="page__header-description">
+                The Checkbox component allows users to select one or more options from
+          a set. Use checkboxes when users need to make multiple selections.
+              </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 simple checkbox for selecting an option. Use checkboxes when users need to make multiple selections from a set of options.
+            </p>
+            <Flex direction="column" gap="16" className="demo-content">
+              <Checkbox
+                label="Unchecked checkbox"
+                checked={checked1}
+                onChange={setChecked1}
+              />
+              <Checkbox
+                label="Checked checkbox"
+                checked={checked2}
+                onChange={setChecked2}
+              />
+              <Checkbox
+                label="Disabled unchecked"
+                checked={false}
+                onChange={() => {}}
+                disabled
+              />
+              <Checkbox
+                label="Disabled checked"
+                checked={true}
+                onChange={() => {}}
+                disabled
+              />
+            </Flex>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Indeterminate State</h2>
+            <p className="demo-group__description">
+              The indeterminate state is used when some but not all items in a group are selected. This is commonly used with "Select All" functionality.
+            </p>
+            <Flex direction="column" gap="16" className="demo-content">
+              <Checkbox
+                label="Select All"
+                checked={allSelected}
+                indeterminate={indeterminate}
+                onChange={handleSelectAll}
+              />
+              <div style={{ marginLeft: "24px" }}>
+                <Flex direction="column" gap="12">
+                  <Checkbox
+                    label="Item 1"
+                    checked={items.item1}
+                    onChange={(checked) => handleItemChange("item1", checked)}
+                  />
+                  <Checkbox
+                    label="Item 2"
+                    checked={items.item2}
+                    onChange={(checked) => handleItemChange("item2", checked)}
+                  />
+                  <Checkbox
+                    label="Item 3"
+                    checked={items.item3}
+                    onChange={(checked) => handleItemChange("item3", checked)}
+                  />
+                </Flex>
+              </div>
+            </Flex>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Different States</h2>
+            <p className="demo-group__description">
+              Checkboxes support various states including checked, unchecked, disabled, and indeterminate. The indeterminate state is useful for "Select All" scenarios.
+            </p>
+            <Flex direction="column" gap="16" className="demo-content">
+              <Checkbox
+                label="Default checkbox"
+                checked={checked3}
+                onChange={setChecked3}
+              />
+              <Checkbox
+                label="Indeterminate checkbox"
+                checked={false}
+                indeterminate={true}
+                onChange={() => {}}
+              />
+            </Flex>
+          </div>
+        </div>
+
+        <Divider variant="solid" />
+
+        <div className="page__tabs-content-container">
+          <div className="demo-group">
+            <div className="page__navigation">
+              <Link
+                to="/chip"
+                className="page__nav-link page__nav-link--prev"
+              >
+                <span className="page__nav-label">Previous</span>
+                <span className="page__nav-title">Chip</span>
+              </Link>
+              <Link
+                to="/datepicker"
+                className="page__nav-link page__nav-link--next"
+              >
+                <span className="page__nav-label">Next</span>
+                <span className="page__nav-title">Datepicker</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </section>
+  );
+}

package/src/pages/ChipDemo.jsx

@@ -0,0 +1,359 @@
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+import Chip from "../ui/Chip/Chip";
+import Flex from "../ui/Flex/Flex";
+import Breadcrumb from "../ui/Breadcrumb/Breadcrumb";
+import Divider from "../ui/Divider/Divider";
+import { formatLastUpdated } from "../utils/formatDate";
+import CopyButton from "../ui/CopyButton/CopyButton";
+import Prism from "prismjs";
+import "../styles/prism-custom.css";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-javascript";
+import "./ChipDemo.scss";
+
+const appearances = ["outline", "primary"];
+const shapes = ["pill", "rounded"];
+
+export default function ChipDemo() {
+  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">Chip</h1>
+              <p className="page__header-description">
+                The Chip component is used to display labels, tags, or filters. It
+                supports various appearance styles, shapes, and icon placements. Hover
+                or click the chips to observe their interactive state styling.
+              </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">Appearances</h2>
+            <p className="demo-group__description">
+              The appearance prop controls the visual style of the chip. Choose from outline for a bordered style or primary for a filled style with brand colors.
+            </p>
+            <Flex direction="row" gap="16" wrap={true} className="demo-content">
+              {appearances.map((appearance) => (
+                <Chip
+                  key={appearance}
+                  label={appearance}
+                  appearance={appearance}
+                />
+              ))}
+            </Flex>
+            <div className="chip-demo__code-block-wrapper">
+              <CopyButton codeString={`import Chip from "../ui/Chip/Chip";
+
+// Outline style (default)
+<Chip label="outline" appearance="outline" />
+
+// Primary style with brand colors
+<Chip label="primary" appearance="primary" />`} />
+              <pre className="chip-demo__code-block">
+                <code className="language-jsx">{`import Chip from "../ui/Chip/Chip";
+
+// Outline style (default)
+<Chip label="outline" appearance="outline" />
+
+// Primary style with brand colors
+<Chip label="primary" appearance="primary" />`}</code>
+              </pre>
+            </div>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Shapes</h2>
+            <p className="demo-group__description">
+              The shape prop controls the border radius of the chip. Choose from pill for fully rounded corners or rounded for slightly rounded corners.
+            </p>
+            <Flex direction="row" gap="16" wrap={true} className="demo-content">
+              {shapes.map((shape) => (
+                <Chip
+                  key={shape}
+                  label={shape}
+                  shape={shape}
+                  appearance="outline"
+                />
+              ))}
+            </Flex>
+            <div className="chip-demo__code-block-wrapper">
+              <CopyButton codeString={`import Chip from "../ui/Chip/Chip";
+
+// Pill shape (fully rounded)
+<Chip label="pill" shape="pill" />
+
+// Rounded shape (slightly rounded corners)
+<Chip label="rounded" shape="rounded" />`} />
+              <pre className="chip-demo__code-block">
+                <code className="language-jsx">{`import Chip from "../ui/Chip/Chip";
+
+// Pill shape (fully rounded)
+<Chip label="pill" shape="pill" />
+
+// Rounded shape (slightly rounded corners)
+<Chip label="rounded" shape="rounded" />`}</code>
+              </pre>
+            </div>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">With Icons</h2>
+            <p className="demo-group__description">
+              Chips can display icons on the left, right, or both sides. Icons are useful for actions like closing or filtering.
+            </p>
+            <Flex direction="row" gap="16" wrap={true} className="demo-content">
+              <Chip
+                label="Left icon"
+                icon="Funnel"
+                iconPlacement="left"
+              />
+              <Chip
+                label="Right icon"
+                icon="X"
+                iconPlacement="right"
+              />
+              <Chip
+                label="Both icons"
+                icon="Funnel"
+                iconPlacement="both"
+              />
+            </Flex>
+            <div className="chip-demo__code-block-wrapper">
+              <CopyButton codeString={`import Chip from "../ui/Chip/Chip";
+
+// Icon on the left
+<Chip label="Left icon" icon="Funnel" iconPlacement="left" />
+
+// Icon on the right (common for remove/close actions)
+<Chip label="Right icon" icon="X" iconPlacement="right" />
+
+// Icons on both sides
+<Chip label="Both icons" icon="Funnel" iconPlacement="both" />`} />
+              <pre className="chip-demo__code-block">
+                <code className="language-jsx">{`import Chip from "../ui/Chip/Chip";
+
+// Icon on the left
+<Chip label="Left icon" icon="Funnel" iconPlacement="left" />
+
+// Icon on the right (common for remove/close actions)
+<Chip label="Right icon" icon="X" iconPlacement="right" />
+
+// Icons on both sides
+<Chip label="Both icons" icon="Funnel" iconPlacement="both" />`}</code>
+              </pre>
+            </div>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">With Badges</h2>
+            <p className="demo-group__description">
+              Chips can display a badge count to indicate quantity or notifications. Badges appear on the right side of the chip.
+            </p>
+            <Flex direction="row" gap="16" wrap={true} className="demo-content">
+              <Chip
+                label="Notifications"
+                badge={5}
+                badgeVariant="red"
+              />
+              <Chip
+                label="Messages"
+                badge={12}
+                badgeVariant="blue"
+              />
+              <Chip
+                label="Items"
+                badge={99}
+                badgeVariant="green"
+              />
+            </Flex>
+            <div className="chip-demo__code-block-wrapper">
+              <CopyButton codeString={`import Chip from "../ui/Chip/Chip";
+
+// Chip with red badge
+<Chip label="Notifications" badge={5} badgeVariant="red" />
+
+// Chip with blue badge
+<Chip label="Messages" badge={12} badgeVariant="blue" />
+
+// Chip with green badge
+<Chip label="Items" badge={99} badgeVariant="green" />`} />
+              <pre className="chip-demo__code-block">
+                <code className="language-jsx">{`import Chip from "../ui/Chip/Chip";
+
+// Chip with red badge
+<Chip label="Notifications" badge={5} badgeVariant="red" />
+
+// Chip with blue badge
+<Chip label="Messages" badge={12} badgeVariant="blue" />
+
+// Chip with green badge
+<Chip label="Items" badge={99} badgeVariant="green" />`}</code>
+              </pre>
+            </div>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Clickable Chips</h2>
+            <p className="demo-group__description">
+              Chips can be clickable by providing an onClick handler. This is useful for filters, tags, or removable items.
+            </p>
+            <Flex direction="row" gap="16" wrap={true} className="demo-content">
+              <Chip
+                label="Clickable chip"
+                onClick={() => alert("Chip clicked!")}
+              />
+              <Chip
+                label="Remove"
+                icon="X"
+                iconPlacement="right"
+                onClick={() => alert("Remove clicked!")}
+              />
+            </Flex>
+            <div className="chip-demo__code-block-wrapper">
+              <CopyButton codeString={`import Chip from "../ui/Chip/Chip";
+
+// Basic clickable chip
+<Chip 
+  label="Clickable chip" 
+  onClick={() => handleClick()} 
+/>
+
+// Removable chip with close icon
+<Chip 
+  label="Remove" 
+  icon="X" 
+  iconPlacement="right" 
+  onClick={() => handleRemove()} 
+/>`} />
+              <pre className="chip-demo__code-block">
+                <code className="language-jsx">{`import Chip from "../ui/Chip/Chip";
+
+// Basic clickable chip
+<Chip 
+  label="Clickable chip" 
+  onClick={() => handleClick()} 
+/>
+
+// Removable chip with close icon
+<Chip 
+  label="Remove" 
+  icon="X" 
+  iconPlacement="right" 
+  onClick={() => handleRemove()} 
+/>`}</code>
+              </pre>
+            </div>
+          </div>
+
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Disabled State</h2>
+            <p className="demo-group__description">
+              Chips can be disabled to prevent interaction. Disabled chips have reduced opacity and cannot be clicked.
+            </p>
+            <Flex direction="row" gap="16" wrap={true} className="demo-content">
+              <Chip
+                label="Disabled outline"
+                appearance="outline"
+                disabled
+              />
+              <Chip
+                label="Disabled primary"
+                appearance="primary"
+                disabled
+              />
+              <Chip
+                label="Disabled with icon"
+                icon="X"
+                iconPlacement="right"
+                disabled
+              />
+            </Flex>
+            <div className="chip-demo__code-block-wrapper">
+              <CopyButton codeString={`import Chip from "../ui/Chip/Chip";
+
+// Disabled outline chip
+<Chip label="Disabled outline" appearance="outline" disabled />
+
+// Disabled primary chip
+<Chip label="Disabled primary" appearance="primary" disabled />
+
+// Disabled chip with icon
+<Chip label="Disabled with icon" icon="X" iconPlacement="right" disabled />`} />
+              <pre className="chip-demo__code-block">
+                <code className="language-jsx">{`import Chip from "../ui/Chip/Chip";
+
+// Disabled outline chip
+<Chip label="Disabled outline" appearance="outline" disabled />
+
+// Disabled primary chip
+<Chip label="Disabled primary" appearance="primary" disabled />
+
+// Disabled chip with icon
+<Chip label="Disabled with icon" icon="X" iconPlacement="right" disabled />`}</code>
+              </pre>
+            </div>
+          </div>
+        </div>
+
+        <Divider variant="solid" />
+
+        <div className="page__tabs-content-container">
+          <div className="demo-group">
+            <div className="page__navigation">
+              <Link
+                to="/checkbox"
+                className="page__nav-link page__nav-link--prev"
+              >
+                <span className="page__nav-label">Previous</span>
+                <span className="page__nav-title">Checkbox</span>
+              </Link>
+              <Link
+                to="/datepicker"
+                className="page__nav-link page__nav-link--next"
+              >
+                <span className="page__nav-label">Next</span>
+                <span className="page__nav-title">Datepicker</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </section>
+  );
+}

package/src/pages/ChipDemo.scss

@@ -0,0 +1,40 @@
+.chip-demo {
+  &__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
+.chip-demo__code-block-wrapper:hover .copy-button {
+  opacity: 1;
+  pointer-events: auto;
+}