@helloimjolopez-pathway/pathway-components 0.3.2 → 0.5.0

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.5.0",
   "description": "Pathway Design System React components",
   "type": "module",
   "sideEffects": false,
@@ -18,7 +18,10 @@
     "./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",
+    "./bottom-sheet": "./components/bottom-sheet/bottom-sheet.jsx",
+    "./dropdown": "./components/dropdown/dropdown.jsx"
   },
   "peerDependencies": {
     "react": ">=17",