@helloimjolopez-pathway/pathway-components 0.7.2 → 0.8.1

package/components/toggle-button/toggle-button-demo.jsx

@@ -1,193 +0,0 @@
-/**
- * Toggle Button's standalone demo. Imports the real module, so there is nothing
- * here that can fall out of step with the shipped component: see
- * components/_demo/harness.jsx for why the newer demos are generated.
- */
-import React, { useState } from "react";
-import { DemoChrome, mount } from "../_demo/harness.jsx";
-import { ToggleButton, ToggleButtonOption, SIZES } from "./toggle-button.jsx";
-import { Widget } from "../widget/widget.jsx";
-import { TooltipProvider } from "../tooltip/tooltip.jsx";
-
-const U = (n) => `var(--semantic-layout-units-${n})`;
-const C = (n) => `var(--semantic-color-${n})`;
-const Y = (n) => `var(--semantic-type-${n})`;
-
-const STYLES = ["Primary", "Secondary", "Tertiary"];
-const SIZE_KEYS = Object.keys(SIZES);
-
-const VIEW = [
-  { value: "bar", label: "Bar", icon: "bar_chart" },
-  { value: "line", label: "Line", icon: "show_chart" },
-  { value: "table", label: "Table", icon: "table_rows" },
-];
-const MONTHLY = "Budgets are set by month.";
-const PERIOD = [
-  { value: "d", label: "D", disabled: true, reason: `Daily totals aren't available. ${MONTHLY}` },
-  { value: "w", label: "W", disabled: true, reason: `Weekly totals aren't available. ${MONTHLY}` },
-  { value: "m", label: "M" },
-  { value: "p", label: "P" },
-  { value: "q", label: "Q" },
-  { value: "y", label: "Y" },
-];
-const RANGE = [
-  { value: "this", label: "This fiscal year" },
-  { value: "last", label: "Last fiscal year" },
-  { value: "ytd", label: "Year to date" },
-  { value: "quarter", label: "This quarter" },
-];
-
-const card = {
-  background: C("fill-surface-elevated"), border: `1px solid ${C("stroke-static-neutral-base")}`,
-  borderRadius: U("cornerradius-large"), padding: U("padding-relaxed"),
-  display: "flex", flexDirection: "column", gap: U("gap-base"), minWidth: 0,
-};
-const h2 = { margin: 0, fontSize: Y("font-size-m"), lineHeight: Y("line-height-m-single"), fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-bold") };
-const small = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
-
-/* A chart placeholder: bars whose heights change with the view, so a choice is
-   visible straight away, which is the job the toggle does. */
-function Chart({ view }) {
-  const data = [62, 44, 30, 28, 46, 80, 58, 64, 40, 54, 70, 70];
-  if (view === "table") {
-    return (
-      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: U("gap-xtight"), ...small }}>
-        {["Jan", "Feb", "Mar", "Apr", "May", "Jun"].map((m, i) => (
-          <React.Fragment key={m}><span>{m}</span><span style={{ color: C("foreground-static-neutral-base") }}>${(data[i] * 31).toLocaleString()}</span></React.Fragment>
-        ))}
-      </div>
-    );
-  }
-  return (
-    <div style={{ display: "flex", alignItems: "flex-end", gap: U("gap-xtight"), height: 140 }}>
-      {data.map((v, i) => (
-        <div key={i} style={{ flex: 1, height: `${v}%`, background: C("fill-chart-sequential-07"),
-          borderRadius: view === "line" ? U("cornerradius-full") : U("cornerradius-small"),
-          maxHeight: view === "line" ? 6 : undefined, alignSelf: view === "line" ? "auto" : undefined,
-          marginBottom: view === "line" ? `${v - 6}%` : 0 }} />
-      ))}
-    </div>
-  );
-}
-
-function InWidget() {
-  const [view, setView] = useState("bar");
-  const [period, setPeriod] = useState("m");
-  const [bank, setBank] = useState("bar");
-  return (
-    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 360px), 1fr))", gap: U("gap-relaxed") }}>
-      <Widget title="Budget Compared to Actual" size="detail" inGrid={false}>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-base") }}>
-          <div style={{ display: "flex", justifyContent: "flex-end", minWidth: 0 }}>
-            <ToggleButton label="Chart view" options={VIEW} value={view} onChange={setView} showIcon />
-          </div>
-          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: U("gap-base"), minWidth: 0 }}>
-            <span style={{ fontSize: Y("font-size-xl"), lineHeight: Y("line-height-xl-single"), fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-strong") }}>2,000</span>
-            <ToggleButton label="Period" options={PERIOD} value={period} onChange={setPeriod} />
-          </div>
-          <Chart view={view} />
-        </div>
-      </Widget>
-      <Widget title="Bank Balances" size="detail" inGrid={false}>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-base") }}>
-          <div style={{ display: "flex", justifyContent: "flex-end" }}>
-            <ToggleButton label="Chart view" options={VIEW} value={bank} onChange={setBank} showIcon showLabel={false} />
-          </div>
-          <Chart view={bank} />
-        </div>
-      </Widget>
-    </div>
-  );
-}
-
-function Styles() {
-  const [v, setV] = useState({});
-  return (
-    <section style={card}>
-      <h2 style={h2}>Styles and sizes</h2>
-      <p style={{ ...small, margin: 0 }}>Primary for one page-level toggle per view. Secondary inside cards, widgets, dialogs and sheets. Tertiary where Secondary fits but the selection should carry brand colour.</p>
-      {STYLES.map((st) => (
-        <div key={st} style={{ display: "flex", flexDirection: "column", gap: U("gap-xtight") }}>
-          <div style={small}>{st}</div>
-          <div style={{ display: "flex", alignItems: "center", gap: U("gap-relaxed"), flexWrap: "wrap" }}>
-            {SIZE_KEYS.map((sz) => (
-              <ToggleButton key={sz} label={`${st} ${sz}`} toggleStyle={st} size={sz} options={VIEW} showIcon
-                value={v[st + sz] ?? "bar"} onChange={(x) => setV((o) => ({ ...o, [st + sz]: x }))} />
-            ))}
-          </div>
-        </div>
-      ))}
-      <div style={small}>Icon only</div>
-      <div style={{ display: "flex", alignItems: "center", gap: U("gap-relaxed"), flexWrap: "wrap" }}>
-        {SIZE_KEYS.map((sz) => (
-          <ToggleButton key={sz} label={`Icon only ${sz}`} size={sz} options={VIEW} showIcon showLabel={false}
-            value={v["i" + sz] ?? "bar"} onChange={(x) => setV((o) => ({ ...o, ["i" + sz]: x }))} />
-        ))}
-      </div>
-    </section>
-  );
-}
-
-function States() {
-  const [st, setSt] = useState("Secondary");
-  const states = [null, "hover", "focused", "pressed"];
-  const names = ["Rest", "Hover", "Focused", "Pressed"];
-  return (
-    <section style={card}>
-      <h2 style={h2}>States</h2>
-      <ToggleButton label="Style" options={STYLES.map((s) => ({ value: s, label: s }))} value={st} onChange={setSt} size="XS" />
-      <div style={{ display: "grid", gridTemplateColumns: "auto repeat(5, max-content)", gap: `${U("gap-base")} ${U("gap-relaxed")}`, alignItems: "center", overflowX: "auto" }}>
-        <span />{[...names, "Unavailable"].map((n) => <span key={n} style={small}>{n}</span>)}
-        {[false, true].map((sel) => (
-          <React.Fragment key={String(sel)}>
-            <span style={small}>{sel ? "Selected" : "Unselected"}</span>
-            {states.map((s, i) => (
-              <ToggleButtonOption key={i} toggleStyle={st} size="M" selected={sel} position="Only" label="Option" icon="bar_chart" forceState={s} tabIndex={-1} />
-            ))}
-            {sel ? <span style={small}>never</span>
-              : <ToggleButtonOption toggleStyle={st} size="M" position="Only" label="Option" icon="bar_chart" disabled tabIndex={-1} />}
-          </React.Fragment>
-        ))}
-      </div>
-    </section>
-  );
-}
-
-function Narrow() {
-  const [w, setW] = useState(520);
-  const [period, setPeriod] = useState("m");
-  const [range, setRange] = useState("this");
-  return (
-    <section style={card}>
-      <h2 style={h2}>Narrow space</h2>
-      <p style={{ ...small, margin: 0 }}>Drag the slider. Unavailable options move into More first, then options from the end. The selected option always stays in the row.</p>
-      <label style={{ ...small, display: "flex", alignItems: "center", gap: U("gap-tight") }}>
-        Container width {w}px
-        <input type="range" min={120} max={640} value={w} onChange={(e) => setW(+e.target.value)} style={{ flex: 1, maxWidth: 320 }} />
-      </label>
-      <div style={{ width: w, maxWidth: "100%", padding: U("padding-xtight"), border: `1px dashed ${C("stroke-static-neutral-bold")}`, borderRadius: U("cornerradius-base"), display: "flex", flexDirection: "column", gap: U("gap-base") }}>
-        <ToggleButton label="Period" options={PERIOD} value={period} onChange={setPeriod} />
-        <ToggleButton label="Range" options={RANGE} value={range} onChange={setRange} size="M" />
-      </div>
-    </section>
-  );
-}
-
-function App() {
-  return (
-    <DemoChrome title="Toggle Button"
-      blurb={"Pick one of two to five options; one is always selected. Keyboard: Tab to the group, arrows move and select, " +
-             "Home and End jump. Hover, focus or tap an unavailable option to see why."}>
-      <TooltipProvider>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
-          <InWidget />
-          <Narrow />
-          <Styles />
-          <States />
-        </div>
-      </TooltipProvider>
-    </DemoChrome>
-  );
-}
-
-mount(<App />);

package/components/tooltip/tooltip-demo.jsx

@@ -1,149 +0,0 @@
-/**
- * Tooltip's standalone demo. Imports the real module, so there is nothing here
- * that can fall out of step with the shipped component: see
- * components/_demo/harness.jsx for why the newer demos are generated.
- */
-import React, { useState } from "react";
-import { DemoChrome, mount } from "../_demo/harness.jsx";
-import { Tooltip, TooltipProvider } from "./tooltip.jsx";
-import { Button } from "../button/button.jsx";
-
-const U = (n) => `var(--semantic-layout-units-${n})`;
-const C = (n) => `var(--semantic-color-${n})`;
-const Y = (n) => `var(--semantic-type-${n})`;
-
-const SIDES = ["top", "bottom", "left", "right"];
-const ALIGNS = ["start", "center", "end"];
-const LONG = "Weekly totals aren't available because budgets are set by month. Switch to Month to compare.";
-
-const label = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
-const card = {
-  background: C("fill-surface-elevated"), border: `1px solid ${C("stroke-static-neutral-base")}`,
-  borderRadius: U("cornerradius-large"), padding: U("padding-relaxed"),
-  display: "flex", flexDirection: "column", gap: U("gap-base"), minWidth: 0,
-};
-const h2 = { margin: 0, fontSize: Y("font-size-m"), lineHeight: Y("line-height-m-single"), fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-bold") };
-
-/* An unavailable option stays focusable so it can say why, which a native
-   disabled button cannot. This stands in for a Toggle Button option. */
-const Unavailable = React.forwardRef(function Unavailable({ children, ...rest }, ref) {
-  return (
-    <button ref={ref} type="button" aria-disabled="true" {...rest}
-      style={{ minWidth: U("accessibility-touch-target-aa-width"), minHeight: U("accessibility-touch-target-aa-height"),
-        padding: `0 ${U("padding-tight")}`, border: 0, borderRadius: U("cornerradius-base"), cursor: "not-allowed",
-        background: C("fill-action-disabled"), color: C("foreground-action-disabled"),
-        fontFamily: Y("family-brand"), fontSize: Y("font-size-s"), fontWeight: Y("weight-medium") }}>
-      {children}
-    </button>
-  );
-});
-
-function Playground() {
-  const [side, setSide] = useState("top");
-  const [align, setAlign] = useState("center");
-  const [arrow, setArrow] = useState(true);
-  const [text, setText] = useState("Bar chart");
-  const pick = (list, v, set) => (
-    <div style={{ display: "flex", gap: U("gap-xtight"), flexWrap: "wrap" }}>
-      {list.map((x) => <Button key={x} size="S" buttonStyle={x === v ? "Fill" : "Outlined"} type="Secondary" text={x} onClick={() => set(x)} />)}
-    </div>
-  );
-  return (
-    <section style={card}>
-      <h2 style={h2}>Playground</h2>
-      <div style={{ display: "flex", gap: U("gap-relaxed"), flexWrap: "wrap" }}>
-        <div><div style={label}>Side</div>{pick(SIDES, side, setSide)}</div>
-        <div><div style={label}>Align</div>{pick(ALIGNS, align, setAlign)}</div>
-        <div><div style={label}>Arrow</div>{pick(["on", "off"], arrow ? "on" : "off", (x) => setArrow(x === "on"))}</div>
-      </div>
-      <label style={{ ...label, display: "flex", flexDirection: "column", gap: U("gap-xxtight"), maxWidth: 420 }}>
-        Content
-        <input id="tooltip-content" value={text} onChange={(e) => setText(e.target.value)}
-          style={{ font: "inherit", fontSize: Y("font-size-s"), padding: U("padding-xtight"), borderRadius: U("cornerradius-small"),
-            border: `1px solid ${C("stroke-static-neutral-bold")}`, background: C("fill-surface-elevated"), color: C("foreground-static-neutral-base") }} />
-      </label>
-      <div style={{ minHeight: 160, display: "flex", alignItems: "center", justifyContent: "center" }}>
-        <Tooltip content={text} side={side} align={align} arrow={arrow} open purpose="description">
-          <button type="button" style={{ width: 120, height: 44, border: `1px dashed ${C("stroke-static-neutral-bold")}`,
-            borderRadius: U("cornerradius-base"), background: "transparent", color: C("foreground-static-neutral-subtle"), font: "inherit" }}>
-            Trigger
-          </button>
-        </Tooltip>
-      </div>
-    </section>
-  );
-}
-
-function Uses() {
-  return (
-    <section style={card}>
-      <h2 style={h2}>Try it: hover, Tab, tap, Esc</h2>
-      <div style={{ display: "flex", gap: U("gap-wide"), flexWrap: "wrap", alignItems: "flex-end" }}>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-tight") }}>
-          <span style={label}>Names icon-only controls</span>
-          <div style={{ display: "flex", gap: U("gap-xxtight") }}>
-            {[["bar_chart", "Bar chart"], ["show_chart", "Line chart"], ["table_rows", "Table"]].map(([icon, name]) => (
-              <Tooltip key={icon} content={name} purpose="label">
-                <Button buttonStyle="Naked" type="Secondary" size="M" showText={false} text={name}
-                  leadingIcon={icon} showLeadingIcon />
-              </Tooltip>
-            ))}
-          </div>
-        </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-tight") }}>
-          <span style={label}>Says why an option is unavailable</span>
-          <Tooltip content="Weekly totals aren't available. Budgets are set by month." persistOnPress>
-            <Unavailable>Week</Unavailable>
-          </Tooltip>
-        </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-tight") }}>
-          <span style={label}>Adds a short hint</span>
-          <Tooltip content="Includes payments that haven't cleared yet.">
-            <Button buttonStyle="Naked" type="Secondary" size="M" showText={false} text="About this balance"
-              leadingIcon="info" showLeadingIcon />
-          </Tooltip>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function Grid() {
-  return (
-    <section style={card}>
-      <h2 style={h2}>Sides and alignment</h2>
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: U("gap-base") }}>
-        {SIDES.flatMap((s) => ALIGNS.map((a) => (
-          <div key={s + a} style={{ minHeight: 150, display: "flex", flexDirection: "column", gap: U("gap-tight"),
-            border: `1px dashed ${C("stroke-static-neutral-base")}`, borderRadius: U("cornerradius-base"), padding: U("padding-tight") }}>
-            <span style={label}>{s}, {a}</span>
-            <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
-              <Tooltip content={a === "center" ? "Bar chart" : LONG.slice(0, 44)} side={s} align={a} open>
-                <span tabIndex={-1} style={{ width: 28, height: 28, borderRadius: U("cornerradius-small"), background: C("fill-static-neutral-base") }} />
-              </Tooltip>
-            </div>
-          </div>
-        )))}
-      </div>
-    </section>
-  );
-}
-
-function App() {
-  return (
-    <DemoChrome title="Tooltip"
-      blurb={"A short, plain-text label beside a control. It is always the opposite mode to the page: " +
-             "switch to Midnight to see it turn light. Hover waits 300ms, keyboard focus opens it at once, " +
-             "a tap shows it for 2.6 seconds, Esc closes it."}>
-      <TooltipProvider>
-        <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
-          <Uses />
-          <Playground />
-          <Grid />
-        </div>
-      </TooltipProvider>
-    </DemoChrome>
-  );
-}
-
-mount(<App />);

package/components/top-nav/top-nav-demo.jsx

@@ -1,79 +0,0 @@
-/**
- * TopNav's standalone demo. Imports the real module, so there is nothing here
- * that can fall out of step with the shipped component: see
- * components/_demo/harness.jsx for why the newer demos are generated.
- *
- * Replaced the hand-written top-nav.html on 2026-10-30. That page carried its
- * own copy of TopNav, and the copy had drifted from top-nav.jsx: it still
- * abbreviated the mobile org label, still drew the campus line in Mono, and
- * still sized the module mark at 24.
- */
-import React, { useState } from "react";
-import { DemoChrome, mount } from "../_demo/harness.jsx";
-import { TopNav } from "./top-nav.jsx";
-
-const U = (n) => `var(--semantic-layout-units-${n})`;
-const C = (n) => `var(--semantic-color-${n})`;
-const Y = (n) => `var(--semantic-type-${n})`;
-
-const BARS = [
-  { id: "desktop", label: "Desktop", width: 1200 },
-  { id: "tablet", label: "Tablet", width: 768 },
-  { id: "mobile", label: "Mobile", width: 393 },
-];
-const ORG = { id: "gcc", name: "Grace Community Church", shortName: "Grace Comm", campus: "Knoxville", initials: "GC" };
-const USER = { name: "Jo Lopez", initials: "JL", email: "jo@gracecommunity.org" };
-
-const label = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
-const card = {
-  background: C("fill-surface-elevated"), border: `1px solid ${C("stroke-static-neutral-base")}`,
-  borderRadius: U("cornerradius-large"), padding: U("padding-relaxed"),
-  display: "flex", flexDirection: "column", gap: U("gap-base"), minWidth: 0,
-};
-const h2 = { margin: 0, fontSize: Y("font-size-m"), lineHeight: Y("line-height-m-single"), fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-bold") };
-
-function App() {
-  const [showCampus, setShowCampus] = useState(false);
-  const [module, setModule] = useState("people");
-  const [brand, setBrand] = useState("amplify");
-  return (
-    <DemoChrome title="TopNav"
-      blurb={"The global bar across the top of every Pathway screen. Hover and open the module and org switchers. " +
-             "The campus line is off by default, as in Figma; turn it on below."}>
-      <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
-        <section style={card}>
-          <h2 style={h2}>Options</h2>
-          <label style={{ ...label, display: "flex", alignItems: "center", gap: U("gap-xtight") }}>
-            <input id="topnav-show-campus" type="checkbox" checked={showCampus} onChange={(e) => setShowCampus(e.target.checked)} />
-            Show campus line (Figma "Show CityName")
-          </label>
-          <label style={{ ...label, display: "flex", alignItems: "center", gap: U("gap-xtight") }}>
-            Brand layout
-            <select id="topnav-brand" value={brand} onChange={(e) => setBrand(e.target.value)}>
-              <option value="amplify">Amplify</option>
-              <option value="newco">NewCo</option>
-            </select>
-          </label>
-          <label style={{ ...label, display: "flex", alignItems: "center", gap: U("gap-xtight") }}>
-            Module
-            <select id="topnav-module" value={module} onChange={(e) => setModule(e.target.value)}>
-              {["home", "people", "giving", "accounting", "communications"].map((m) => <option key={m} value={m}>{m}</option>)}
-            </select>
-          </label>
-        </section>
-        {BARS.map((b) => (
-          <section key={b.id} style={card}>
-            <h2 style={h2}>{b.label}</h2>
-            <div style={{ overflowX: "auto" }}>
-              <div style={{ width: b.width }}>
-                <TopNav key={module + brand} brand={brand} breakpoint={b.id} activeModuleId={module} org={ORG} user={USER} showCampus={showCampus} />
-              </div>
-            </div>
-          </section>
-        ))}
-      </div>
-    </DemoChrome>
-  );
-}
-
-mount(<App />);