diff --git a/picker/components/Artboard.astro b/picker/components/Artboard.astro index 9c6ebc8de..88b8bf14c 100644 --- a/picker/components/Artboard.astro +++ b/picker/components/Artboard.astro @@ -13,6 +13,13 @@ */ interface Props { mode?: 'bars' | 'type'; + /* + Which surface the board draws. The chrome and the frame are shared and only + the two bodies change, the same arrangement the four wireframes on the + surface question already use, so a change to the nav lands on all of them at + once. Named boards are the ones the font screen switches between. + */ + surface?: 'persuade' | 'operate' | 'read' | 'experience'; phone?: boolean; class?: string; strategyHook?: boolean; @@ -29,6 +36,7 @@ interface Props { const { mode = 'bars', + surface, phone = true, class: className = '', strategyHook = false, @@ -37,6 +45,9 @@ const { carry = false, } = Astro.props; const type = mode === 'type'; +const ops = surface === 'operate'; +const docs = surface === 'read'; +const index = surface === 'experience'; const classes = ['picker-artboard', className].filter(Boolean).join(' '); // Empty string renders the bare attribute the font screen's selectors expect; // undefined drops it entirely on the other screens. @@ -46,6 +57,7 @@ const hook = type ? '' : undefined;
}
+ {ops ? ( +
+ {/* The rail is where a tool keeps its navigation, so it carries the + longest run of micro labels on any board. The open one is a filled + plate rather than a recolor: a selection is a state, not a word. */} +
+ {[0, 1, 2].map((n) => ( + + + + ))} +
+
+ +
+ {[0, 1, 2].map(() => ( + + + + + ))} +
+
+ + + + + {[0, 1, 2].map((n) => ( + + + + + + + ))} +
+
+
+ + + {[0, 1].map((n) => ( + + + + + ))} +
+
+ ) : docs ? ( +
+ {/* The rail names sections of one document rather than pages of a site, + which is why it cannot take the nav's words: the two would read as + the same list drawn twice. */} +
+ {[0, 1, 2, 3].map((n) => ( + + + + ))} +
+ {/* Two heading levels and the passages between them. A documentation + page is the one surface where the relationship between a page title + and the heading under it is visible at a glance, so the board shows + both rather than the single heading the drawing carries. */} +
+

+

+ +

+

+
+ + + + + +
+
+
+ ) : index ? ( +
+ {/* The drawing staggers two plates and neither says anything the other + does not. One row buys the page title above it, which is the only + place in the set where the heading face is allowed to be as large + as this surface would really set it. */} +

+
+
+
+ + + +
+
+ {/* The chevrons stay shapes because an arrow is not a word. The track's + segments are, so they are set: a carousel's stops are named. */} +
+ +
+ {[0, 1, 2, 3].map((n) => ( + + ))} +
+ +
+
+ ) : ( +
{type ? ( @@ -120,6 +240,8 @@ const hook = type ? '' : undefined; ))}
+ + )}
{type ? (
@@ -130,7 +252,7 @@ const hook = type ? '' : undefined;
{/* Off-grid marks, drawn only where the page has already left the field: - opacity rides --pvs-drift, so on the three disciplined answers they are + opacity rides --pvs-drift, so on the disciplined answers they are rendered and invisible and the answers that pay for them are the ones that asked. Absolute, so the desktop grid still has exactly its five declared rows. @@ -156,6 +278,67 @@ const hook = type ? '' : undefined; {!type && } + {ops ? ( +
+ + + + + + {/* The table has nowhere to put four columns at this width, so it + collapses to the two cells that carry the row: what it is and what + it comes to. */} +
+ {[0, 1, 2].map((n) => ( + + + + + + ))} +
+
+ {[0, 1].map((n) => ( + + + + + ))} +
+
+ ) : docs ? ( +
+ {/* The crumb is the drawing's, and it is a phone element there because + the rail it stands in for has nowhere to go at this width. */} + +

+

+ +

+
+ + + + + +
+
+ ) : index ? ( +
+ {/* No page title here. At this width the display step would take the + card, and what a handset shows of an index is the work. */} + {[0, 1].map(() => ( + +
+
+ + + +
+ + ))} +
+ ) : (
{type ? ( @@ -202,6 +385,7 @@ const hook = type ? '' : undefined; ))}
+ )}
{type ? ( @@ -211,4 +395,9 @@ const hook = type ? '' : undefined;
)} + + {/* Chrome that belongs to the frame rather than to the page drawn in it, + such as the surface tab strip. Taken out of the flow by its own rules, so + the artboard's grid is still the two columns declared above. */} + diff --git a/picker/components/QuestionScreen.astro b/picker/components/QuestionScreen.astro index 868545c13..c89a8f568 100644 --- a/picker/components/QuestionScreen.astro +++ b/picker/components/QuestionScreen.astro @@ -5,11 +5,15 @@ as data and its design lives in its own stylesheet. */ import Artboard from './Artboard.astro'; +import { SURFACE_MODES, SURFACE_ANSWERS, surfaceTabsAttrs } from '../data/surfaces.js'; interface Option { value: string; title: string; desc: string; + /* The sentence that stands in for the description on a surface this option + does not suit. Present only on options some surface rules out. */ + blocked?: string; } interface Props { @@ -28,6 +32,10 @@ interface Props { const { id, step, slug, name, title, legend, cta, options, previewClass, phone = true } = Astro.props; const titleId = `picker-${slug}-title`; const artboardClass = phone ? previewClass : `${previewClass} picker-artboard--solo`; +// A question listed in the matrix is answered once per chosen surface, which +// buys it a tab strip on the frame and a field per surface to answer into. +// Everything else about the screen is unchanged by opting in. +const perSurface = SURFACE_ANSWERS[name]; ---