@helloimjolopez-pathway/pathway-components 0.3.2 → 0.4.0

package/components/checkbox/checkbox.jsx

@@ -0,0 +1,392 @@
+/**
+ * Checkbox, Pathway Design System
+ *
+ * Importable React component module. Source of truth for the Checkbox
+ * implementation; the standalone demo (checkbox.html) and the Storybook
+ * stories both consume this.
+ *
+ * Spec:  components/checkbox/checkbox-spec.md
+ * Figma: https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40002324-54532
+ */
+
+import React, { useRef, useEffect, useState } from "react";
+import { useReducedMotion } from "../_shared/use-reduced-motion.jsx";
+
+// ─── SEMANTIC TOKEN CSS VARIABLES ─────────────────────────────────────────────
+// All colours and radii come from semantic tokens only. No raw hex, no
+// primitive vars. See checkbox-spec.md §5 for the full token table.
+//
+// Note: some tokens in §5.3 of the spec are missing from the token file.
+// Fallbacks are used where noted and will be updated once Figma is re-synced.
+const V = {
+  // Box fill, standard checked / indeterminate
+  fillCheckedBase:     "var(--semantic-color-fill-action-primary-strong-rest)",
+  fillCheckedHover:    "var(--semantic-color-fill-action-primary-strong-hover)",
+  fillCheckedFocused:  "var(--semantic-color-fill-action-primary-strong-hover)",
+  fillCheckedPressed:  "var(--semantic-color-fill-action-primary-strong-pressed)",
+  fillCheckedDisabled: "var(--semantic-color-fill-action-disabled)",
+
+  // Box border, standard unchecked
+  borderBase:     "var(--semantic-color-stroke-action-secondary-rest)",
+  borderHover:    "var(--semantic-color-stroke-action-secondary-hover)",
+  borderFocused:  "var(--semantic-color-stroke-action-secondary-hover)",
+  borderPressed:  "var(--semantic-color-stroke-action-secondary-pressed)",
+  borderDisabled: "var(--semantic-color-stroke-action-disabled)",
+
+  // Checkmark / dash icon, standard.
+  //
+  // MUST be an ON-STRONG foreground, because the box it sits in is filled with
+  // fill-action-primary-strong-*. This was foreground-action-primary-ON-SUBTLE-rest,
+  // which is #345499 sitting on #3a5aaa: the same blue, so the whole square
+  // read as a solid blue block with no visible tick. Reported 2026-10-02.
+  //
+  // Figma binds Foreground/Static/Neutral/MONO here instead, which is correct
+  // in Light (#ffffff) and wrong in Midnight: mono is an INVERSION ANCHOR, not
+  // a rung, so it flips to #181b2b and would put a near-black tick on a blue
+  // box. on-strong is #ffffff in both modes, which is what a foreground on a
+  // strong fill is for. Recorded in the manifest as a Figma defect.
+  iconPrimary: "var(--semantic-color-foreground-action-primary-on-strong)",
+
+  // Checkmark / dash icon: error. Same fix: the error box is filled with
+  // fill-action-status-negative-strong-*, so the tick needs the on-strong
+  // foreground. Was on-subtle-rest: #722121 on #b03a3a.
+  iconError: "var(--semantic-color-foreground-action-status-negative-on-strong)",
+
+  // State-layer, unchecked hover / focused
+  stateLayerUncheckedHover: "var(--semantic-color-fill-action-secondary-hover)",
+
+  // State-layer, checked hover / focused / pressed
+  stateLayerCheckedHover:    "var(--semantic-color-fill-action-primary-subtle-hover)",
+  stateLayerCheckedFocused:  "var(--semantic-color-fill-action-primary-subtle-hover)",
+  stateLayerCheckedPressed:  "var(--semantic-color-fill-action-primary-subtle-pressed)",
+
+  // Box fill: error checked / indeterminate
+  fillErrorBase:     "var(--semantic-color-fill-action-status-negative-strong-rest)",
+  fillErrorHover:    "var(--semantic-color-fill-action-status-negative-strong-hover)",
+  fillErrorFocused:  "var(--semantic-color-fill-action-status-negative-strong-hover)",
+  fillErrorPressed:  "var(--semantic-color-fill-action-status-negative-strong-pressed)",
+  fillErrorDisabled: "var(--semantic-color-fill-action-disabled)",
+
+  // Box border: error unchecked
+  borderErrorBase:     "var(--semantic-color-stroke-action-status-negative-rest)",
+  borderErrorHover:    "var(--semantic-color-stroke-action-status-negative-hover)",
+  borderErrorFocused:  "var(--semantic-color-stroke-action-status-negative-hover)",
+  borderErrorPressed:  "var(--semantic-color-stroke-action-status-negative-pressed)",
+  borderErrorDisabled: "var(--semantic-color-stroke-action-disabled)",
+
+  // State-layer: error hover (both unchecked and checked)
+  stateLayerErrorHover: "var(--semantic-color-fill-action-status-negative-subtle-hover)",
+
+  // Highlight.
+  //
+  // THIS IS NOT A RESTING TINT. It used to be one here, and that was wrong in
+  // both directions: it painted a background the Figma variant does not have,
+  // and it did nothing on hover, which is the only place the variant actually
+  // differs. Reported 2026-10-02.
+  //
+  // Figma has three Highlight variants, all Unselected:
+  //   Type=Highlight Unselected, State=Active   no state layer at all
+  //   Type=Highlight Hovered,    State=Hovered  state layer #e2e9f7
+  //   Type=Hhighlight Focused,   State=Focused  state layer #e2e9f7  (sic)
+  // The box fill and both border colours are IDENTICAL to the standard
+  // unselected variants (#77726b rest, #67625c hover). So the entire meaning of
+  // Highlight is one swap: the unchecked hover/focus state layer goes from the
+  // warm grey Fill/Action/Secondary/Hover (#f3f0ec) to the pale blue
+  // Fill/Action/Primary/Subtle/Hover (#e2e9f7). It marks a row as brand-live on
+  // interaction; it does not mark it at rest.
+  stateLayerHighlightHover: "var(--semantic-color-fill-action-primary-subtle-hover)",
+
+  // Label text
+  labelColor: "var(--semantic-color-foreground-static-neutral-base)",
+
+  // Geometry
+  // cornerradius.small = 4px, matches the 4px box radius in the Figma spec.
+  // (cornerradius.xsmall = 2px which is too small; small is the correct value.)
+  //
+  // NOT wrapped in calc(... * 1px). The layout tokens already carry their unit
+  // (`--semantic-layout-units-cornerradius-small: 4px`), so multiplying by 1px
+  // produced calc(4px * 1px): px times px is not a length, so the browser
+  // dropped the declaration and the box rendered with square corners. Silent,
+  // because an invalid value falls back to the initial one rather than erroring.
+  // Style Dictionary emits layout tokens as unitless numbers, so we multiply
+  // by 1px inside calc() to get a valid CSS length.
+  radius:     "var(--semantic-layout-units-cornerradius-small)",
+  radiusFull: "100px",  // state-layer pill: no dedicated token, 100px safely rounds any 44px circle
+};
+
+// ─── GEOMETRY ─────────────────────────────────────────────────────────────────
+export const BOX_SIZE  = { default: 18, s: 16 };
+export const TARGET_SIZE = 44;          // touch target, always 44px (WCAG 2.5.5)
+export const BORDER_WIDTH = 1.5;        // px
+export const LABEL_GAP = 16;            // px, gap between state-layer and label text
+
+// ─── ICONS ────────────────────────────────────────────────────────────────────
+// Both icons use the same 18×18 viewBox so they scale cleanly when size="s".
+// Paths are centred in the viewBox to match Figma geometry.
+
+export function IconCheck({ color, size }) {
+  return (
+    <svg
+      width={size} height={size} viewBox="0 0 18 18"
+      fill="none" aria-hidden="true" focusable="false"
+    >
+      <path
+        d="M4 9.5L7.5 13L14 6"
+        stroke={color}
+        strokeWidth={BORDER_WIDTH}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function IconDash({ color, size }) {
+  return (
+    <svg
+      width={size} height={size} viewBox="0 0 18 18"
+      fill="none" aria-hidden="true" focusable="false"
+    >
+      <path
+        d="M5 9H13"
+        stroke={color}
+        strokeWidth={BORDER_WIDTH}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+// ─── CHECKBOX ─────────────────────────────────────────────────────────────────
+
+/**
+ * Checkbox
+ *
+ * @param {boolean}  checked        - Whether the checkbox is checked
+ * @param {boolean}  indeterminate  - Shows dash icon; overrides checked visually
+ * @param {boolean}  error          - Error / negative styling
+ * @param {boolean}  highlight      - Brand-tinted hover/focus state-layer for selectable
+ *                                   rows. Unchecked only, and no effect at rest.
+ * @param {boolean}  secondary      - Secondary indeterminate (muted colour), use with indeterminate only
+ * @param {boolean}  disabled       - Non-interactive
+ * @param {"default"|"s"} size      - Visual size of the control
+ * @param {string}   label          - Optional visible label
+ * @param {function} onChange       - (checked: boolean) => void
+ * @param {string}   id             - For <label htmlFor> association
+ * @param {string}   name           - Form field name
+ * @param {string}   value          - Form field value
+ * @param {string}   className      - Additional CSS class on the root element
+ * @param {string}   [describedBy]  - aria-describedby for error messages (error state)
+ */
+export function Checkbox({
+  checked = false,
+  indeterminate = false,
+  error = false,
+  highlight = false,
+  secondary = false,
+  disabled = false,
+  size = "default",
+  label,
+  onChange,
+  id,
+  name,
+  value,
+  className = "",
+  describedBy,
+}) {
+  const noMotion = useReducedMotion();
+  const inputRef = useRef(null);
+  const [hovered,  setHovered]  = useState(false);
+  const [focused,  setFocused]  = useState(false);
+  const [pressed,  setPressed]  = useState(false);
+
+  // The indeterminate state can only be set on the DOM element: not via HTML.
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  const boxSize = BOX_SIZE[size] || BOX_SIZE.default;
+
+  // ─── Derived box fill ──────────────────────────────────────────────────────
+  let boxFill = "transparent";
+  if (disabled && (checked || indeterminate)) {
+    boxFill = error ? V.fillErrorDisabled : V.fillCheckedDisabled;
+  } else if (!disabled && (checked || indeterminate)) {
+    if (error) {
+      boxFill = pressed  ? V.fillErrorPressed
+              : focused  ? V.fillErrorFocused
+              : hovered  ? V.fillErrorHover
+              :             V.fillErrorBase;
+    } else {
+      boxFill = pressed  ? V.fillCheckedPressed
+              : focused  ? V.fillCheckedFocused
+              : hovered  ? V.fillCheckedHover
+              :             V.fillCheckedBase;
+    }
+  }
+
+  // ─── Derived box border colour ─────────────────────────────────────────────
+  // When checked or indeterminate, border matches fill (visually absorbed).
+  // When unchecked, border shows the action.secondary (or negative) stroke token.
+  let borderColor;
+  if (checked || indeterminate) {
+    borderColor = boxFill; // border hidden under fill
+  } else if (disabled) {
+    borderColor = error ? V.borderErrorDisabled : V.borderDisabled;
+  } else if (error) {
+    borderColor = pressed  ? V.borderErrorPressed
+                : focused  ? V.borderErrorFocused
+                : hovered  ? V.borderErrorHover
+                :             V.borderErrorBase;
+  } else {
+    borderColor = pressed  ? V.borderPressed
+                : focused  ? V.borderFocused
+                : hovered  ? V.borderHover
+                :             V.borderBase;
+  }
+
+  // ─── Derived state-layer background ───────────────────────────────────────
+  let stateLayerBg = "transparent";
+  if (!disabled) {
+    if (pressed) {
+      // pressed: same tint as hover: no separate pressed state-layer in spec
+      stateLayerBg = (checked || indeterminate)
+        ? V.stateLayerCheckedPressed
+        : (error ? V.stateLayerErrorHover : V.stateLayerUncheckedHover);
+    } else if (hovered || focused) {
+      if (checked || indeterminate) {
+        stateLayerBg = error
+          ? V.stateLayerErrorHover
+          : (focused ? V.stateLayerCheckedFocused : V.stateLayerCheckedHover);
+      } else {
+        // Unchecked hover/focus. Highlight swaps the warm grey layer for the
+        // pale blue one; error still wins over both. See V.stateLayerHighlightHover.
+        stateLayerBg = error
+          ? V.stateLayerErrorHover
+          : (highlight ? V.stateLayerHighlightHover : V.stateLayerUncheckedHover);
+      }
+    }
+    // No `else if (highlight)` branch: Figma's highlight variant has no resting
+    // state layer, so at rest a highlighted checkbox is indistinguishable from
+    // a standard one. That is the design.
+  }
+
+  // ─── Focus ring ───────────────────────────────────────────────────────────
+  // Error: spec defines a 3px rgba red shadow on the state-layer.
+  // Standard: border colour change on the box is sufficient (above).
+  const focusShadow = focused && error
+    ? "0 0 0 3px var(--semantic-color-fill-static-negative-subtle)"
+    // Was a hand-mixed red at 10 percent. Fill/Static/Negative/Subtle is the
+    // tone's own pale tint and it inverts with the theme, so the ring stays
+    // visible on a dark canvas instead of vanishing into it.
+    : "none";
+
+  // ─── Icon colour ──────────────────────────────────────────────────────────
+  const iconColor = error ? V.iconError : V.iconPrimary;
+  const showIcon  = checked || indeterminate;
+
+  return (
+    <label
+      className={`pds-checkbox${size === "s" ? " pds-checkbox--s" : ""}${error ? " pds-checkbox--error" : ""}${highlight ? " pds-checkbox--highlight" : ""}${disabled ? " pds-checkbox--disabled" : ""}${className ? ` ${className}` : ""}`}
+      style={{
+        display:     "inline-flex",
+        alignItems:  "center",
+        gap:         label ? LABEL_GAP : 0,
+        cursor:      disabled ? "not-allowed" : "pointer",
+        userSelect:  "none",
+        fontFamily:  "'Red Hat Text', sans-serif",
+      }}
+      onMouseEnter={() => !disabled && setHovered(true)}
+      onMouseLeave={() => { setHovered(false); setPressed(false); }}
+      onMouseDown={()  => !disabled && setPressed(true)}
+      onMouseUp={()    => setPressed(false)}
+    >
+      {/* 44×44 touch target / state-layer */}
+      <span
+        aria-hidden="true"
+        style={{
+          position:         "relative",
+          display:          "inline-flex",
+          alignItems:       "center",
+          justifyContent:   "center",
+          width:            TARGET_SIZE,
+          height:           TARGET_SIZE,
+          borderRadius:     V.radiusFull,
+          backgroundColor:  stateLayerBg,
+          transition: noMotion ? "none" : "background-color var(--motion-duration-3) var(--motion-easing-standard)",
+          boxShadow:        focusShadow,
+          flexShrink:       0,
+        }}
+      >
+        {/* Visually hidden native input, provides semantics and keyboard behaviour */}
+        <input
+          ref={inputRef}
+          type="checkbox"
+          id={id}
+          name={name}
+          value={value}
+          checked={indeterminate ? false : checked}
+          disabled={disabled}
+          aria-describedby={describedBy}
+          onChange={e => onChange && onChange(e.target.checked)}
+          onFocus={() => setFocused(true)}
+          onBlur={()  => setFocused(false)}
+          style={{
+            position:  "absolute",
+            width:     boxSize,
+            height:    boxSize,
+            opacity:   0,
+            margin:    0,
+            padding:   0,
+            cursor:    disabled ? "not-allowed" : "pointer",
+            zIndex:    1,
+          }}
+        />
+
+        {/* Visual checkbox box */}
+        <span
+          aria-hidden="true"
+          style={{
+            display:         "inline-flex",
+            alignItems:      "center",
+            justifyContent:  "center",
+            width:           boxSize,
+            height:          boxSize,
+            borderRadius:    V.radius,
+            border:          `${BORDER_WIDTH}px solid ${borderColor}`,
+            backgroundColor: boxFill,
+            boxSizing:       "border-box",
+            transition: noMotion ? "none" : "background-color var(--motion-duration-2) var(--motion-easing-decelerate), border-color var(--motion-duration-2) var(--motion-easing-decelerate)",
+            flexShrink:      0,
+          }}
+        >
+          {showIcon && (
+            indeterminate
+              ? <IconDash  color={iconColor} size={boxSize} />
+              : <IconCheck color={iconColor} size={boxSize} />
+          )}
+        </span>
+      </span>
+
+      {/* Label text */}
+      {label && (
+        <span
+          style={{
+            fontSize: "var(--semantic-type-font-size-s)",
+            lineHeight: "var(--semantic-type-line-height-s-single)",
+            fontWeight: 400,
+            color:      disabled
+              ? "var(--semantic-color-foreground-static-neutral-base)"
+              : V.labelColor,
+          }}
+        >
+          {label}
+        </span>
+      )}
+    </label>
+  );
+}
+
+export default Checkbox;

package/components/scroll-to-enable/scroll-to-enable-demo.jsx

@@ -0,0 +1,125 @@
+/**
+ * Scroll-to-Enable'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, isEmbed, mount } from "../_demo/harness.jsx";
+import { ScrollToEnable } from "./scroll-to-enable.jsx";
+
+const U = (n) => `var(--semantic-layout-units-${n})`;
+const C = (n) => `var(--semantic-color-${n})`;
+const Y = (n) => `var(--semantic-type-${n})`;
+
+const FCRA = [
+  "In connection with your employment application with [Org Name] (the “Organization”), this notice is intended to inform you that a consumer report will be obtained on you from a consumer reporting agency for employment purposes. These purposes may include hiring, promotion, reassignment or retention.",
+  "The consumer report may contain information about your character, general reputation, personal characteristics and mode of living. It may include, but is not limited to, criminal history, motor vehicle records, education and employment verification, and credit history, where permitted by law.",
+  "You have the right, upon written request made within a reasonable time, to request whether a consumer report has been run about you, and to request a copy of your report. You may also request the nature and scope of any investigative consumer report.",
+  "This online application is protected by a secure certificate authority, which supports up to a TLS 1.2 256-bit encryption process. All information provided on this form is secure.",
+  "A summary of your rights under the Fair Credit Reporting Act is available on request, and a copy will be provided with any adverse action notice.",
+];
+const SHORT = [FCRA[0]];
+const LABEL = "I acknowledge receipt of the disclosure regarding background investigation and certify that I have read and understand this document.";
+
+const body = (paras) => paras.map((p, i) => <p key={i}>{p}</p>);
+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 caption = { fontSize: Y("font-size-xs"), lineHeight: Y("line-height-xs-single"), color: C("foreground-static-neutral-subtle") };
+
+/* The real screen it lives on: the background check form, step 3. */
+function InContext() {
+  const [short, setShort] = useState(false);
+  const [done, setDone] = useState(false);
+  return (
+    <section style={{ ...card, padding: 0, overflow: "hidden" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: `${U("padding-tight")} ${U("padding-relaxed")}`,
+        background: C("fill-static-brand-strong"), color: C("foreground-static-brand-on-strong"), fontSize: Y("font-size-s") }}>
+        <span>[Org Name] Background Check</span><span>Step 3 of 6</span>
+      </div>
+      <div style={{ padding: U("padding-relaxed"), display: "flex", justifyContent: "center" }}>
+        <div style={{ width: "100%", maxWidth: 456, display: "flex", flexDirection: "column", gap: U("gap-base") }}>
+          <div>
+            <h2 style={{ ...h2, fontSize: Y("font-size-xl") }}>FCRA Notice</h2>
+            <p style={{ margin: 0, fontSize: Y("font-size-s"), color: C("foreground-static-neutral-base") }}>Please read and acknowledge receipt of the disclosure.</p>
+          </div>
+          <ScrollToEnable key={`${short}-${done}`} title="Terms & Conditions" agreementLabel={LABEL}
+            onContinue={() => setDone(true)} onPrint={() => {}}>
+            {body(short ? SHORT : FCRA)}
+          </ScrollToEnable>
+          {done && <p role="status" style={{ margin: 0, ...caption }}>Continue accepted: the form would move to step 4.</p>}
+          <div style={{ display: "flex", gap: U("gap-tight"), alignItems: "center", flexWrap: "wrap", ...caption }}>
+            Notice:
+            {[["Long", false], ["Short, fits", true]].map(([name, v]) => (
+              <button key={name} type="button" aria-pressed={short === v} onClick={() => { setShort(v); setDone(false); }}
+                style={{ font: "inherit", padding: `${U("padding-xxxtight")} ${U("padding-tight")}`, borderRadius: U("cornerradius-base"),
+                  border: `1px solid ${short === v ? C("stroke-action-primary-strong-rest") : C("stroke-static-neutral-base")}`,
+                  background: short === v ? C("fill-action-primary-subtle-rest") : "transparent", color: C("foreground-static-neutral-base"), cursor: "pointer" }}>
+                {name}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Cell({ label, children }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: U("gap-tight"), minWidth: 0 }}>
+      <span style={caption}>{label}</span>
+      {children}
+    </div>
+  );
+}
+
+function States() {
+  const grid = { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(340px, 100%), 1fr))", gap: U("gap-relaxed") };
+  const inline = ["Unread", "Reading", "Read", "Agreed", "Blocked", "Agreement Missing"];
+  const page = ["Unread", "Blocked", "Read", "Agreed", "Agreement Missing"];
+  const sheet = ["Sheet Unread", "Sheet Blocked", "Sheet Read"];
+  const make = (s, layout) => (
+    <ScrollToEnable layout={layout} demoState={s} title={layout === "sheet" ? "FCRA Notice" : "Terms & Conditions"}
+      agreementLabel={LABEL} noticeHeight={layout === "sheet" && s.startsWith("Sheet") ? 180 : undefined} onPrint={() => {}}>
+      {body(FCRA)}
+    </ScrollToEnable>
+  );
+  return (
+    <>
+      <section style={card}>
+        <h2 style={h2}>Inline (viewport 768 and up)</h2>
+        <div style={grid}>{inline.map((s) => <Cell key={s} label={s}>{make(s, "inline")}</Cell>)}</div>
+      </section>
+      <section style={card}>
+        <h2 style={h2}>Sheet: the page (viewport under 768)</h2>
+        <div style={grid}>{page.map((s) => <Cell key={s} label={s}>{make(s, "sheet")}</Cell>)}</div>
+      </section>
+      <section style={card}>
+        <h2 style={h2}>Sheet: open</h2>
+        <div style={grid}>{sheet.map((s) => <Cell key={s} label={s}>{make(s, "sheet")}</Cell>)}</div>
+      </section>
+    </>
+  );
+}
+
+function App() {
+  return (
+    <DemoChrome title="Scroll-to-Enable"
+      blurb={"The person reaches the end of a legal notice before agreeing and continuing. Nothing is disabled: " +
+             "press Continue or the checkbox early and it says what to do and moves focus there. " +
+             "Inline at 768 and wider; switch to Mobile for the sheet. Tab into the notice and use the arrow keys; Esc closes the sheet."}>
+      <div style={{ display: "flex", flexDirection: "column", gap: U("gap-relaxed") }}>
+        <InContext />
+        {/* The Tablet and Mobile frames show the real screen only: the state
+            grids force each layout and are reference, not responsive. */}
+        {!isEmbed() && <States />}
+      </div>
+    </DemoChrome>
+  );
+}
+
+mount(<App />);

package/components/scroll-to-enable/scroll-to-enable.jsx

@@ -0,0 +1,500 @@
+/**
+ * Scroll-to-Enable, Pathway Design System
+ *
+ * Importable React component module. Source of truth for the Scroll-to-Enable
+ * implementation; the standalone demo (scroll-to-enable.html, generated from
+ * scroll-to-enable-demo.jsx) and the Storybook stories both consume this.
+ *
+ * Spec:  components/scroll-to-enable/scroll-to-enable-spec.md
+ * Figma: https://www.figma.com/design/3sw45aVcngFAmpbP6cfrXP/?node-id=40003308-10049
+ *        (inline), 40003308:11167 (mobile page), 40019965:1078 (sheet)
+ *
+ * NOTHING IS EVER DISABLED. The old Figma version disabled Continue, Done
+ * Reading and the checkbox until the notice had been scrolled. A disabled
+ * control cannot be focused, gives no reason and is skipped by screen readers,
+ * so every gate here is enforced on activation instead: the control responds,
+ * an inline message says what is needed, and focus moves to where it can be
+ * done. Do not add `disabled` or `aria-disabled` to anything in this file.
+ *
+ * THREE PARTS ARE BUILT HERE FOR NOW. Reading progress, the message and the
+ * sheet (with its header) stand in for Progress Bar, Help Text, Step
+ * Navigation Header and Sheet, none of which are in the repo yet. They are not
+ * exported. When those components ship, swap them in (spec §17).
+ */
+
+import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Button } from "../button/button.jsx";
+import { Checkbox } from "../checkbox/checkbox.jsx";
+import { Scrollable } from "../scrollbar/scrollbar.jsx";
+import { Icon } from "../icon/icon.jsx";
+import { useReducedMotion } from "../_shared/use-reduced-motion.jsx";
+
+// ─── TOKEN HELPERS ────────────────────────────────────────────────────────────
+// SC = semantic-color            (themes/*.css)
+// SL = semantic-layout-units     (layout.css)
+// CL = contextual-layout-units   (layout-contextual.css)
+// RL = responsive-layout         (layout-responsive.css, per breakpoint)
+// ST = semantic-type             (type.css)
+const SC = (p) => `var(--semantic-color-${p})`;
+const SL = (p) => `var(--semantic-layout-units-${p})`;
+const CL = (p) => `var(--contextual-layout-units-${p})`;
+const RL = (p) => `var(--responsive-layout-${p})`;
+const ST = (p) => `var(--semantic-type-${p})`;
+
+// One composed type style per Figma text style. Tracking is named differently
+// in Figma and the CSS (Figma Standard/Wide/ExtraWide = CSS wide/spacious/
+// extraspacious, 0.1/0.3/0.6), so each line says which Figma style it is.
+const TYPE = (size, lineHeight, weight, tracking) => ({
+  fontFamily: ST("family-brand"),
+  fontSize: ST(`font-size-${size}`),
+  lineHeight: ST(`line-height-${lineHeight}`),
+  fontWeight: ST(`weight-${weight}`),
+  letterSpacing: ST(`letter-spacing-${tracking}`),
+});
+
+// ─── LAYOUT CONSTANTS ─────────────────────────────────────────────────────────
+export const T = {
+  // Colour
+  noticeFill:     SC("fill-surface-elevated"),
+  noticeStroke:   SC("stroke-static-neutral-faint"),
+  hintFill:       SC("fill-surface-overlay"),
+  hintStroke:     SC("stroke-static-neutral-bold"),
+  messageFill:    SC("fill-static-negative-subtle"),
+  messageFg:      SC("foreground-static-negative-on-subtle"),
+  // One token in every state and theme. It does NOT turn green at 100%:
+  // Fill/Static/Positive/Strong is 1.85:1 on the page in Amplify Light.
+  progressFill:   SC("fill-static-brand-strong"),
+  progressTrack:  SC("stroke-static-neutral-faint"),
+  sheetFill:      SC("fill-surface-overlay"),
+  scrim:          SC("scrim-base"),
+  fgStrong:       SC("foreground-static-neutral-strong"),
+  fgBase:         SC("foreground-static-neutral-base"),
+  focusRing:      SC("stroke-focusring-base"),
+  // Shadow
+  hintShadow:     "var(--elevation-lift)",
+  sheetShadow:    "var(--elevation-sheet)",
+  // Geometry
+  borderWidth:    SL("borderwidth-thin"),
+  noticeRadius:   SL("cornerradius-base"),
+  pillRadius:     SL("cornerradius-full"),
+  messageRadius:  SL("cornerradius-small"),
+  sheetRadius:    RL("sheet-corner-radius-cornerradius"),
+  focusWidth:     CL("focusring-width"),
+  focusOffset:    CL("focusring-offset"),
+  // Spacing
+  sectionGap:     SL("gap-medium"),
+  progressGap:    SL("gap-xtight"),
+  titleGap:       SL("gap-tight"),
+  agreementGap:   SL("gap-xtight"),
+  paragraphGap:   SL("gap-base"),
+  toolbarPad:     `${SL("padding-xxtight")} ${SL("padding-xtight")} ${SL("padding-xxxtight")}`,
+  contentPad:     `${SL("padding-xtight")} ${SL("padding-base")} ${SL("padding-base")}`,
+  hintPad:        `${SL("padding-xxxtight")} ${SL("padding-xtight")}`,
+  hintGap:        SL("gap-xxtight"),
+  hintOffset:     SL("padding-xtight"),
+  messagePad:     SL("padding-xtight"),
+  messageGap:     SL("gap-tight"),
+  sheetPad:       `${RL("sheet-padding-top")} ${RL("sheet-padding-horizontal")} ${SL("padding-wide")}`,
+  sheetGap:       SL("gap-base"),
+  sheetHeaderPad: SL("padding-medium"),
+  // Type (Figma text style in the comment)
+  noticeType:     TYPE("s", "s-single", "regular", "spacious"),          // Text/Body/Small/Regular
+  titleType:      TYPE("r", "r-single", "medium", "wide"),               // Heading/Section/Small/Medium
+  progressType:   TYPE("xs", "xs-single", "regular", "extraspacious"),   // Label/Progress/Small/Regular
+  hintType:       TYPE("xs", "xs-single", "semibold", "extraspacious"),  // Label/Badge/Base/Semibold
+  messageType:    TYPE("xs", "xs-single", "semibold", "extraspacious"),  // Text/Supporting/Base/Semibold
+  sheetTitleType: TYPE("m", "m-relaxed", "semibold", "wide"),            // Heading/Section/Base/Semibold
+  // Motion
+  progressMotion: "width var(--motion-duration-2) var(--motion-easing-standard)",
+  scrimMotion:    "pds-ste-fade var(--motion-duration-3) var(--motion-easing-standard)",
+  sheetMotion:    "pds-ste-rise var(--motion-duration-4) var(--motion-easing-emphasized)",
+  // Measurements (widths and heights are not tokens, CLAUDE.md §5)
+  noticeHeight:   200,  // scroll area, Figma Scroll Area fixed height
+  progressHeight: 4,    // Figma Progress Bar height
+  minWidth:       320,
+  readThreshold:  8,    // px from the end that counts as read
+  breakpoint:     768,  // --breakpoints-tablet-768px: inline at and above, sheet below
+  sheetFrameHeight: 560, // documentation frames only: room for a contained sheet
+};
+
+/** Default message copy. Each one says what to do next. */
+export const MESSAGES = {
+  scrollInline:  "Scroll to the end of the notice before you continue.",
+  readAgreement: "Read the agreement before you agree to it.",
+  scrollSheet:   "Scroll to the end of the notice to finish reading.",
+  agree:         "Check the box to confirm you have read the notice.",
+};
+
+/**
+ * Documentation only: the Figma states, for stories and the demo. Each seeds
+ * the internal state once; the component stays fully interactive after that.
+ * "Blocked" picks the inline or sheet-page message by layout. The Sheet states
+ * keep the sheet inside the component's own frame instead of the viewport.
+ */
+export const DEMO_STATES = {
+  "Unread":            {},
+  "Reading":           { progress: 0.5 },
+  "Read":              { progress: 1, read: true },
+  "Agreed":            { progress: 1, read: true, checked: true },
+  "Blocked":           { msg: "blocked" },
+  "Agreement Missing": { progress: 1, read: true, msg: "agree", missing: true },
+  "Sheet Unread":      { sheetOpen: true },
+  "Sheet Blocked":     { sheetOpen: true, progress: 0.4, sheetMsg: "scrollSheet" },
+  "Sheet Read":        { sheetOpen: true, progress: 1 },
+};
+
+// Keyframes and the paragraph reset cannot be inline styles. Injected once,
+// the same way Scrollable and Button add theirs.
+function ensureStyles() {
+  if (typeof document === "undefined" || document.getElementById("pds-ste-styles")) return;
+  const s = document.createElement("style");
+  s.id = "pds-ste-styles";
+  s.textContent =
+    "@keyframes pds-ste-fade{from{opacity:0}to{opacity:1}}" +
+    "@keyframes pds-ste-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}" +
+    ".pds-ste__region{outline:none}" +
+    ".pds-ste__region p{margin:0}";
+  document.head.appendChild(s);
+}
+
+const canMatch = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const WIDE = `(min-width: ${T.breakpoint}px)`;
+
+/** "inline" at the 768 breakpoint and above, "sheet" below. */
+function useAutoLayout(layout) {
+  const [wide, setWide] = useState(() => (canMatch() ? window.matchMedia(WIDE).matches : true));
+  useEffect(() => {
+    if (layout !== "auto" || !canMatch()) return;
+    const mq = window.matchMedia(WIDE);
+    setWide(mq.matches);
+    const onChange = (e) => setWide(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [layout]);
+  if (layout === "inline" || layout === "sheet") return layout;
+  return wide ? "inline" : "sheet";
+}
+
+/** Focus an element if it can take focus. */
+const focusEl = (el) => { if (el && typeof el.focus === "function") el.focus(); };
+
+// ─── INTERNAL PARTS (not exported; see the header) ────────────────────────────
+
+function ReadingProgress({ value, labelId }) {
+  const noMotion = useReducedMotion();
+  const pct = Math.round(value * 100);
+  return (
+    <div className="pds-ste__progress" style={{ display: "flex", flexDirection: "column", gap: T.progressGap }}>
+      <div style={{ display: "flex", justifyContent: "space-between", ...T.progressType, color: T.fgBase }}>
+        <span id={labelId}>Reading progress</span>
+        <span aria-hidden="true">{pct}%</span>
+      </div>
+      <div role="progressbar" aria-labelledby={labelId} aria-valuemin={0} aria-valuemax={100} aria-valuenow={pct}
+        style={{ height: T.progressHeight, borderRadius: T.pillRadius, background: T.progressTrack, overflow: "hidden" }}>
+        <div style={{ width: `${pct}%`, height: "100%", borderRadius: T.pillRadius, background: T.progressFill,
+          transition: noMotion ? "none" : T.progressMotion }} />
+      </div>
+    </div>
+  );
+}
+
+/* The container always renders so aria-describedby always has a target. The
+   alert inside is keyed by `nonce`, so a repeat tap announces again. */
+function FieldMessage({ id, text, nonce }) {
+  return (
+    <div id={id}>
+      {text && (
+        <div key={nonce} role="alert" style={{
+          display: "flex", alignItems: "flex-start", gap: T.messageGap, padding: T.messagePad,
+          borderRadius: T.messageRadius, background: T.messageFill, color: T.messageFg, ...T.messageType,
+        }}>
+          <Icon name="error" size="M" fill={1} />
+          <span>{text}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Hint() {
+  return (
+    <div aria-hidden="true" style={{ position: "absolute", left: 0, right: 0, bottom: T.hintOffset,
+      display: "flex", justifyContent: "center", pointerEvents: "none" }}>
+      <span style={{ display: "inline-flex", alignItems: "center", gap: T.hintGap, padding: T.hintPad,
+        borderRadius: T.pillRadius, background: T.hintFill, boxShadow: T.hintShadow,
+        border: `${T.borderWidth} solid ${T.hintStroke}`, ...T.hintType, color: T.fgStrong }}>
+        <Icon name="arrow_downward" size="M" />Scroll to continue
+      </span>
+    </div>
+  );
+}
+
+/* The notice box: optional Print, the repo Scrollable, the focusable region
+   inside it, and the hint. Reports progress 0..1 through onProgress. */
+function Notice({ children, height, titleId, regionRef, showPrint, onPrint, showHint, onProgress, startAt }) {
+  const boxRef = useRef(null);
+  const [ring, setRing] = useState(false);
+
+  const report = useCallback((view) => {
+    if (!view) return;
+    const max = view.scrollHeight - view.clientHeight;
+    onProgress(max <= T.readThreshold ? 1 : Math.min(1, view.scrollTop / (max - T.readThreshold)));
+  }, [onProgress]);
+
+  // Measure on mount and whenever the box resizes: a notice that fits is read.
+  useLayoutEffect(() => {
+    const view = boxRef.current && boxRef.current.querySelector(".pds-scrollable__view");
+    if (!view) return;
+    if (startAt != null) view.scrollTop = (view.scrollHeight - view.clientHeight) * startAt;
+    report(view);
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => report(view));
+    ro.observe(view);
+    return () => ro.disconnect();
+  }, [report, height, startAt]);
+
+  const onFocus = (e) => {
+    let visible = true;
+    try { visible = e.target.matches(":focus-visible") || e.target.dataset.moved === "1"; } catch (_) { /* old engines: show it */ }
+    delete e.target.dataset.moved;
+    setRing(visible);
+  };
+
+  return (
+    <div ref={boxRef} className="pds-ste__notice"
+      // Scrollable exposes no scroll callback; the scroll event is caught here.
+      onScrollCapture={(e) => report(e.target)}
+      style={{ position: "relative", background: T.noticeFill, border: `${T.borderWidth} solid ${T.noticeStroke}`,
+        borderRadius: T.noticeRadius,
+        outline: ring ? `${T.focusWidth} solid ${T.focusRing}` : "none", outlineOffset: T.focusOffset }}>
+      {showPrint && (
+        <div style={{ padding: T.toolbarPad }}>
+          <Button buttonStyle="Naked" type="Secondary" size="S" text="Print" showLeadingIcon leadingIcon="print" onClick={onPrint} />
+        </div>
+      )}
+      <Scrollable style={{ height }}>
+        <div ref={regionRef} className="pds-ste__region" role="region" tabIndex={0} aria-labelledby={titleId}
+          onFocus={onFocus} onBlur={() => setRing(false)}
+          style={{ padding: T.contentPad, display: "flex", flexDirection: "column", gap: T.paragraphGap, ...T.noticeType, color: T.fgStrong }}>
+          {children}
+        </div>
+      </Scrollable>
+      {showHint && <Hint />}
+    </div>
+  );
+}
+
+/* Modal bottom sheet on the Radix Dialog anatomy: Overlay, Content, Title, Close. */
+function Sheet({ title, titleId, stepLabel, onClose, children, footer, initialFocusRef, contained }) {
+  const noMotion = useReducedMotion();
+  const contentRef = useRef(null);
+
+  useEffect(() => {
+    if (contained) return undefined;  // documentation frames: no scroll lock, no focus grab
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const t = setTimeout(() => focusEl(initialFocusRef.current), 0);
+    return () => { clearTimeout(t); document.body.style.overflow = prevOverflow; };
+  }, [initialFocusRef, contained]);
+
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") { e.stopPropagation(); onClose(); return; }
+    if (e.key !== "Tab" || !contentRef.current) return;
+    const els = contentRef.current.querySelectorAll("button, input, [tabindex='0']");
+    if (!els.length) return;
+    const first = els[0], last = els[els.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); focusEl(last); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); focusEl(first); }
+  };
+
+  return (
+    <div className="pds-ste-sheet" style={{ position: contained ? "absolute" : "fixed", inset: 0, zIndex: contained ? 1 : 1000, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
+      <div className="pds-ste-sheet__scrim" onClick={onClose}
+        style={{ position: "absolute", inset: 0, background: T.scrim, animation: noMotion ? "none" : T.scrimMotion }} />
+      <div ref={contentRef} role="dialog" aria-modal="true" aria-labelledby={titleId} onKeyDown={onKeyDown}
+        style={{ position: "relative", background: T.sheetFill, boxShadow: T.sheetShadow,
+          borderRadius: `${T.sheetRadius} ${T.sheetRadius} 0 0`, padding: T.sheetPad,
+          display: "flex", flexDirection: "column", gap: T.sheetGap, maxHeight: "85vh",
+          animation: noMotion ? "none" : T.sheetMotion }}>
+        <div className="pds-ste-sheet__header" style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
+          paddingLeft: T.sheetHeaderPad, paddingRight: T.sheetHeaderPad }}>
+          <span style={{ ...T.progressType, color: T.fgBase }}>{stepLabel}</span>
+          <Button buttonStyle="Naked" type="Secondary" size="S" showText={false} showLeadingIcon leadingIcon="close"
+            text="Close" ariaLabel="Close" onClick={onClose} />
+        </div>
+        <h2 id={titleId} style={{ margin: 0, textAlign: "center", ...T.sheetTitleType, color: T.fgStrong }}>{title}</h2>
+        {children}
+        {footer}
+      </div>
+    </div>
+  );
+}
+
+// ─── SCROLL-TO-ENABLE ─────────────────────────────────────────────────────────
+
+/**
+ * @param {string}    title             Notice title; also the sheet title and the region's name
+ * @param {ReactNode} children          The notice content (paragraphs)
+ * @param {string}    agreementLabel    Checkbox label
+ * @param {function}  onContinue        Called when the notice is read and the box is ticked
+ * @param {"auto"|"inline"|"sheet"} layout  auto picks by viewport at 768
+ * @param {number}    noticeHeight      Scroll area height in px (default 200)
+ * @param {boolean}   showPrint         Show Print in the inline layout (never in the sheet)
+ * @param {function}  onPrint           Print handler; defaults to window.print()
+ * @param {string}    continueLabel
+ * @param {string}    readAgreementLabel  Sheet trigger before reading
+ * @param {string}    readLabel           Sheet trigger after reading
+ * @param {string}    doneReadingLabel
+ * @param {string}    stepLabel           Optional label at the left of the sheet header
+ * @param {object}    messages            Overrides for MESSAGES
+ * @param {function}  onAgreeChange       Called with the checkbox value when it changes
+ * @param {string}    demoState           Documentation only: start in a Figma state (DEMO_STATES)
+ * @param {string}    className
+ */
+export function ScrollToEnable({
+  title,
+  children,
+  agreementLabel,
+  onContinue,
+  layout = "auto",
+  noticeHeight = T.noticeHeight,
+  showPrint = true,
+  onPrint,
+  continueLabel = "Continue",
+  readAgreementLabel = "Read Agreement",
+  readLabel = "Agreement read",
+  doneReadingLabel = "Done Reading",
+  stepLabel,
+  messages,
+  onAgreeChange,
+  demoState,
+  className = "",
+}) {
+  ensureStyles();
+  const mode = useAutoLayout(layout);
+  const uid = useId().replace(/:/g, "");
+  const ids = {
+    title: `${uid}-title`, progress: `${uid}-rp`, msg: `${uid}-msg`, sheetTitle: `${uid}-sheet-title`,
+    sheetMsg: `${uid}-sheet-msg`, checkbox: `${uid}-cb`,
+  };
+  const copy = { ...MESSAGES, ...messages };
+  const seed = (demoState && DEMO_STATES[demoState]) || {};
+  const contained = !!demoState;
+  const seedMsg = seed.msg === "blocked" ? (mode === "inline" ? "scrollInline" : "readAgreement") : (seed.msg || null);
+
+  const [progress, setProgress] = useState(seed.progress || 0);
+  const [read, setRead] = useState(!!seed.read);
+  const [checked, setChecked] = useState(!!seed.checked);
+  const [msg, setMsg] = useState(seedMsg);     // key of MESSAGES on the page
+  const [sheetMsg, setSheetMsg] = useState(seed.sheetMsg || null);
+  const [nonce, setNonce] = useState(0);
+  const [sheetOpen, setSheetOpen] = useState(!!seed.sheetOpen);
+  const [missing, setMissing] = useState(!!seed.missing);
+
+  const regionRef = useRef(null);
+  const sheetRegionRef = useRef(null);
+  const triggerRef = useRef(null);
+
+  const say = (key) => { setMsg(key); setNonce((n) => n + 1); };
+  const moveFocus = (el) => { if (el) { el.dataset.moved = "1"; focusEl(el); } };
+  const triggerButton = () => triggerRef.current && triggerRef.current.querySelector("button");
+
+  // Progress never goes back; reaching the end inline marks the notice read.
+  const onInlineProgress = useCallback((v) => {
+    setProgress((p) => Math.max(p, v));
+    if (v >= 1) { setRead(true); setMsg((m) => (m === "scrollInline" ? null : m)); }
+  }, []);
+  const onSheetProgress = useCallback((v) => {
+    setProgress((p) => Math.max(p, v));
+    if (v >= 1) setSheetMsg(null);
+  }, []);
+
+  const blocked = () => {
+    if (mode === "inline") { say("scrollInline"); moveFocus(regionRef.current); }
+    else { say("readAgreement"); focusEl(triggerButton()); }
+  };
+
+  const onCheck = (next) => {
+    if (!read) { blocked(); return; }
+    setChecked(next);
+    if (next) { setMsg(null); setMissing(false); }
+    if (onAgreeChange) onAgreeChange(next);
+  };
+
+  const onContinueClick = () => {
+    if (!read) { blocked(); return; }
+    if (!checked) { setMissing(true); say("agree"); focusEl(document.getElementById(ids.checkbox)); return; }
+    if (onContinue) onContinue();
+  };
+
+  const closeSheet = () => { setSheetOpen(false); setSheetMsg(null); setTimeout(() => focusEl(triggerButton()), 0); };
+
+  const onDoneReading = () => {
+    if (progress < 1) { setSheetMsg("scrollSheet"); setNonce((n) => n + 1); moveFocus(sheetRegionRef.current); return; }
+    setRead(true); setMsg(null); closeSheet();
+  };
+
+  const print = onPrint || (() => { if (typeof window !== "undefined") window.print(); });
+
+  const agreement = (
+    <div className="pds-ste__agreement" style={{ display: "flex", flexDirection: "column", gap: T.agreementGap }}>
+      <Checkbox id={ids.checkbox} checked={checked} error={missing && !checked} label={agreementLabel}
+        onChange={onCheck} describedBy={ids.msg} />
+      <FieldMessage id={ids.msg} text={msg ? copy[msg] : null} nonce={nonce} />
+    </div>
+  );
+
+  const actions = (
+    <div className="pds-ste__actions" style={{ display: "flex", justifyContent: "center" }}>
+      <Button buttonStyle="Fill" type="Primary" size="L" text={continueLabel} onClick={onContinueClick} aria-describedby={ids.msg} />
+    </div>
+  );
+
+  const root = { display: "flex", flexDirection: "column", gap: T.sectionGap, minWidth: T.minWidth, width: "100%" };
+
+  if (mode === "inline") {
+    return (
+      <div className={`pds-ste ${className}`} style={root}>
+        <ReadingProgress value={progress} labelId={ids.progress} />
+        <div className="pds-ste__notice-group" style={{ display: "flex", flexDirection: "column", gap: T.titleGap }}>
+          <div id={ids.title} style={{ ...T.titleType, color: T.fgStrong }}>{title}</div>
+          <Notice height={noticeHeight} titleId={ids.title} regionRef={regionRef} showPrint={showPrint}
+            onPrint={print} showHint={!read} onProgress={onInlineProgress} startAt={seed.read ? 1 : seed.progress}>
+            {children}
+          </Notice>
+        </div>
+        {agreement}
+        {actions}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`pds-ste ${className}`}
+      style={contained && sheetOpen ? { ...root, position: "relative", minHeight: T.sheetFrameHeight } : root}>
+      <span ref={triggerRef} style={{ display: "flex" }}>
+        <Button buttonStyle="Fill" type="Tertiary" size="M" text={read ? readLabel : readAgreementLabel}
+          showTrailingIcon trailingIcon={read ? "check" : "open_in_new"} aria-haspopup="dialog"
+          onClick={() => { setSheetOpen(true); setSheetMsg(null); }} />
+      </span>
+      {agreement}
+      {actions}
+      {sheetOpen && (
+        <Sheet title={title} titleId={ids.sheetTitle} stepLabel={stepLabel} onClose={closeSheet} initialFocusRef={sheetRegionRef} contained={contained}
+          footer={
+            <div style={{ display: "flex", justifyContent: "center" }}>
+              <Button buttonStyle="Fill" type="Primary" size="L" text={doneReadingLabel} onClick={onDoneReading} aria-describedby={ids.sheetMsg} />
+            </div>
+          }>
+          <Notice height={noticeHeight} titleId={ids.sheetTitle} regionRef={sheetRegionRef} showPrint={false}
+            showHint={progress < 1} onProgress={onSheetProgress} startAt={seed.sheetOpen ? seed.progress : undefined}>
+            {children}
+          </Notice>
+          <FieldMessage id={ids.sheetMsg} text={sheetMsg ? copy[sheetMsg] : null} nonce={nonce} />
+        </Sheet>
+      )}
+    </div>
+  );
+}
+
+export default ScrollToEnable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-components",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Pathway Design System React components",
   "type": "module",
   "sideEffects": false,
@@ -18,7 +18,8 @@
     "./nav-shell": "./components/nav-shell/nav-shell.jsx",
     "./page-template": "./components/page-template/page-template.jsx",
     "./tooltip": "./components/tooltip/tooltip.jsx",
-    "./badge": "./components/badge/badge.jsx"
+    "./badge": "./components/badge/badge.jsx",
+    "./scroll-to-enable": "./components/scroll-to-enable/scroll-to-enable.jsx"
   },
   "peerDependencies": {
     "react": ">=17",