Skip to content

Commit 35e572a

Browse files
Progressive disclosure for the OSS contributor checkbox (#773)
The OSS-contributor claim is personal-scope (one human attesting they contributed), so it only makes sense for individual signups. Hide the checkbox + helper note until the user picks "Just me" on team size. Switching to any non-solo size hides it again and resets the state to false so team signups can't accidentally carry is_contributor=true. Small fade-in animation on reveal so the layout shift doesn't feel abrupt. Generated with [Devin](https://cli.devin.ai/docs) Co-authored-by: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
1 parent d9832b7 commit 35e572a

1 file changed

Lines changed: 59 additions & 19 deletions

File tree

apps/marketing/src/pages/workspaces/index.astro

Lines changed: 59 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -180,25 +180,32 @@ const teamSizes = [
180180
></textarea>
181181
</div>
182182

183-
<div
184-
class="ws-check-row"
185-
id="contributor-toggle"
186-
role="checkbox"
187-
aria-checked="false"
188-
tabindex="0"
189-
>
190-
<span class="ws-box" aria-hidden="true">
191-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
192-
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
193-
</svg>
194-
</span>
195-
<span>I've contributed to or maintain the Plannotator OSS core.</span>
196-
</div>
183+
<!-- Progressive disclosure: the OSS-contributor claim is
184+
personal-scope (one human attesting they contributed), so
185+
it only makes sense for individual signups. Hidden until
186+
"Just me" is selected on team size; reset on any other
187+
team-size choice. -->
188+
<div class="ws-contrib-block" id="contributor-block">
189+
<div
190+
class="ws-check-row"
191+
id="contributor-toggle"
192+
role="checkbox"
193+
aria-checked="false"
194+
tabindex="0"
195+
>
196+
<span class="ws-box" aria-hidden="true">
197+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
198+
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
199+
</svg>
200+
</span>
201+
<span>I've contributed to or maintain the Plannotator OSS core.</span>
202+
</div>
197203

198-
<p class="ws-contrib-note">
199-
↑ Early contributors and meaningful early supporters receive
200-
<span class="ws-accent">lifetime free access</span> to Workspaces.
201-
</p>
204+
<p class="ws-contrib-note">
205+
↑ Early contributors and meaningful early supporters receive
206+
<span class="ws-accent">lifetime free access</span> to Workspaces.
207+
</p>
208+
</div>
202209

203210
{turnstileSitekey && (
204211
<div
@@ -347,6 +354,24 @@ const teamSizes = [
347354
});
348355
}
349356

357+
// OSS-contributor block only matters for individual signups. Show
358+
// it when team size = "solo"; hide and reset state otherwise so a
359+
// team signup doesn't accidentally carry is_contributor=true.
360+
var contribBlock = document.getElementById('contributor-block');
361+
var contribEl = document.getElementById('contributor-toggle');
362+
363+
function setContributorVisibility(visible) {
364+
if (!contribBlock) return;
365+
contribBlock.classList.toggle('is-visible', visible);
366+
if (!visible && contributor) {
367+
contributor = false;
368+
if (contribEl) {
369+
contribEl.classList.remove('on');
370+
contribEl.setAttribute('aria-checked', 'false');
371+
}
372+
}
373+
}
374+
350375
// Pill picker
351376
document.querySelectorAll('.ws-pills').forEach(function (group) {
352377
var key = group.dataset.field;
@@ -363,13 +388,13 @@ const teamSizes = [
363388
p.classList.add('on');
364389
p.setAttribute('aria-pressed', 'true');
365390
fields[key] = v;
391+
if (key === 'teamSize') setContributorVisibility(v === 'solo');
366392
}
367393
clearErr(group);
368394
});
369395
});
370396

371397
// Contributor toggle (click + keyboard)
372-
var contribEl = document.getElementById('contributor-toggle');
373398
function toggleContributor() {
374399
contributor = !contributor;
375400
contribEl.classList.toggle('on', contributor);
@@ -984,6 +1009,21 @@ const teamSizes = [
9841009
margin: 0 0 14px;
9851010
}
9861011

1012+
/* Progressive-disclosure wrapper. Hidden by default; the JS toggles
1013+
`.is-visible` when team size flips to "solo". Small fade-in keeps
1014+
the reveal from feeling like a layout jolt. */
1015+
.ws-contrib-block {
1016+
display: none;
1017+
}
1018+
.ws-contrib-block.is-visible {
1019+
display: block;
1020+
animation: ws-disclose 0.22s cubic-bezier(0.23, 1, 0.32, 1);
1021+
}
1022+
@keyframes ws-disclose {
1023+
from { opacity: 0; transform: translateY(-4px); }
1024+
to { opacity: 1; transform: translateY(0); }
1025+
}
1026+
9871027
/* ── Turnstile slot (almost always invisible) ── */
9881028
.ws-turnstile {
9891029
margin-top: 10px;

0 commit comments

Comments
 (0)