Add (i) info button to every tab, explained for the average user
New InfoPanel.svelte: shared (i) button next to each module's h2, toggling a plain-language explainer with three sections — what this tab is, how to use it, what to enter in each field. One component so tone stays consistent across all 10 tabs instead of each screen inventing its own help pattern. Deliberately avoids fiqh/legal jargon in favor of concrete, everyday framing (e.g. Hibah explained as "a gift you give right now, while you're alive" rather than leading with the Arabic term) — written for someone with no prior estate-planning or Islamic finance background, consistent with the "convince a 100-year-old grandmother" usability bar already established for this product. Wired into: Coverage, Faraid, Assets, Wassiyah, Hibah, Family Waqf, Nominate, Trigger, Claims (H2), Settings. e2e-info.cjs: new suite verifying the info button appears, opens a non-trivial explanation, and closes again on every one of the 10 tabs. 31/31 passing. Re-verified all five prior suites (32/32, 16/16, 12/12, 10/10, 10/10) — 111/111 total, no regressions.
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
// still fall into the slow court queue because no fast-path instrument covers it.
|
||||
import { computeCoverage, suggestedChannel } from './nonprobate.js';
|
||||
import Disclaimer from './Disclaimer.svelte';
|
||||
import InfoPanel from './InfoPanel.svelte';
|
||||
|
||||
const coverage = computeCoverage();
|
||||
|
||||
@@ -29,7 +30,15 @@
|
||||
</script>
|
||||
|
||||
<div class="module">
|
||||
<h2>Coverage Dashboard</h2>
|
||||
<div class="module-header">
|
||||
<h2>Coverage Dashboard</h2>
|
||||
<InfoPanel
|
||||
title="Coverage Dashboard"
|
||||
what="The one number that tells you if this app is actually working for you: what percentage of everything you own will skip the slow Faraid/probate court process entirely. Green means covered and fast; red means it's still stuck in the old system."
|
||||
how="This updates automatically as you use the other tabs — nothing to fill in here. Just check it, and for anything shown in red, tap the suggested next step to go fix it (usually Hibah, Waqf, or the Nomination Registry)."
|
||||
fields={[]}
|
||||
/>
|
||||
</div>
|
||||
<p class="sub">What fraction of your estate is already arranged to skip Faraid/probate entirely.</p>
|
||||
|
||||
<div class="big-number-card" class:full={coverage.fastPercent === 100} class:partial={coverage.fastPercent > 0 && coverage.fastPercent < 100} class:none={coverage.fastPercent === 0}>
|
||||
@@ -81,7 +90,8 @@
|
||||
|
||||
<style>
|
||||
.module { padding: 4px 0 40px; }
|
||||
h2 { font-family: 'DM Serif Display', serif; font-size: 24px; color: #E8E4DC; margin-bottom: 4px; }
|
||||
.module-header { display: flex; align-items: center; margin-bottom: 4px; }
|
||||
h2 { font-family: 'DM Serif Display', serif; font-size: 24px; color: #E8E4DC; margin-bottom: 0; }
|
||||
.sub { font-size: 13px; color: #8A8478; margin-bottom: 18px; }
|
||||
|
||||
.big-number-card { text-align: center; border-radius: 16px; padding: 24px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.08); }
|
||||
|
||||
Reference in New Issue
Block a user