diff --git a/picker/components/Artboard.astro b/picker/components/Artboard.astro new file mode 100644 index 000000000..06f10846b --- /dev/null +++ b/picker/components/Artboard.astro @@ -0,0 +1,171 @@ +--- +/* + The wireframe landing page every option screen previews its answer on. One + copy so a change to the page's anatomy lands on every screen at once. + + mode: 'bars' fills the hero with bar stacks, which is what a screen judging + color, layout, or depth needs. 'type' swaps them for real text elements and + adds the data-type-* hooks the font screen writes specimen copy into; that + screen is judging glyphs, so bars would tell it nothing. + + phone: false drops the handset and leaves the desktop artboard alone in the + frame, for a screen whose answer only reads at desktop width. +*/ +interface Props { + mode?: 'bars' | 'type'; + phone?: boolean; + class?: string; + strategyHook?: boolean; + typeHook?: boolean; + cursor?: boolean; + /* + Marks an artboard as one that accumulates the structural answers. The + committed layout, boundary, corner, and depth selectors key on it, which is + how each screen shows the page as decided so far without those answers + reaching back to the screens that came before them. + */ + carry?: boolean; +} + +const { + mode = 'bars', + phone = true, + class: className = '', + strategyHook = false, + typeHook = false, + cursor = false, + carry = false, +} = Astro.props; +const type = mode === 'type'; +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. +const hook = type ? '' : undefined; +--- + + diff --git a/picker/components/QuestionScreen.astro b/picker/components/QuestionScreen.astro new file mode 100644 index 000000000..868545c13 --- /dev/null +++ b/picker/components/QuestionScreen.astro @@ -0,0 +1,79 @@ +--- +/* + One question, one artboard: the shape screens 03 onward all share. A screen + that only remaps artboard slots needs nothing of its own here, so it arrives + as data and its design lives in its own stylesheet. +*/ +import Artboard from './Artboard.astro'; + +interface Option { + value: string; + title: string; + desc: string; +} + +interface Props { + id: string; + step: string; + slug: string; + name: string; + title: string; + legend: string; + cta: string; + options: Option[]; + previewClass: string; + phone?: boolean; +} + +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`; +--- + + diff --git a/picker/layouts/Picker.astro b/picker/layouts/Picker.astro index 6d3a8a1fd..a94d3038e 100644 --- a/picker/layouts/Picker.astro +++ b/picker/layouts/Picker.astro @@ -1,5 +1,13 @@ --- import '../styles/picker.css'; +// Loaded after the shared sheet so a screen's own answers win on source order +// as well as specificity. One file per question, each owning only the slots +// its options rewrite. +import '../styles/screens/motion.css'; +import '../styles/screens/layout.css'; +import '../styles/screens/boundaries.css'; +import '../styles/screens/corners.css'; +import '../styles/screens/depth.css'; interface Props { title?: string; diff --git a/picker/pages/index.astro b/picker/pages/index.astro index d1f319ee5..f1a060608 100644 --- a/picker/pages/index.astro +++ b/picker/pages/index.astro @@ -1,5 +1,7 @@ --- import Picker from '../layouts/Picker.astro'; +import Artboard from '../components/Artboard.astro'; +import QuestionScreen from '../components/QuestionScreen.astro'; const roles = [ ['primary', 'Primary'], @@ -24,6 +26,169 @@ const scales = [ // Exponent above the 16px base: P sits at the base, H1 six steps up. const scaleRows = [['H1', 6], ['H2', 5], ['H3', 4], ['H4', 3], ['H5', 2], ['H6', 1], ['P', 0]]; + +// The five questions that are answered by looking at the same wireframe page. +// Each one only rewrites the artboard slots it owns, so by the last screen the +// page is showing every decision made before it. Motion is the one question +// whose answer cannot be read on a handset, so it takes the frame alone. +const questions = [ + { + id: '06', + step: 'Motion', + slug: 'motion', + name: 'motion-energy', + title: 'How much movement should this design have?', + legend: 'Motion energy', + cta: 'Select motion energy', + previewClass: 'picker-preview-motion', + phone: false, + options: [ + { + value: 'restrained', + title: 'Restrained', + desc: 'State changes only. Things are already changed by the time you see them.', + }, + { + value: 'responsive', + title: 'Responsive', + desc: 'Feedback and transitions on whatever you touch. Nothing is orchestrated.', + }, + { + value: 'choreographed', + title: 'Choreographed', + desc: 'Entrances are staged and scrolling drives sequences.', + }, + ], + }, + { + id: '07', + step: 'Layout', + slug: 'layout', + name: 'layout-structure', + title: 'How strict should the layout feel?', + legend: 'Layout structure', + cta: 'Select layout structure', + previewClass: 'picker-preview-layout', + options: [ + { + value: 'simple-grid', + title: 'Simple grid', + desc: 'Everything lines up. Equal columns and one rhythm down the page.', + }, + { + value: 'balanced', + title: 'Balanced', + desc: 'An aligned grid with a few deliberate breaks in it.', + }, + { + value: 'editorial', + title: 'Editorial', + desc: 'Uneven columns, with one of them clearly leading.', + }, + { + value: 'freeform', + title: 'Freeform', + desc: 'Blocks step out of the grid and overlap where it pays off.', + }, + ], + }, + { + id: '08', + step: 'Boundaries', + slug: 'boundaries', + name: 'boundary-style', + title: 'How should sections be separated?', + legend: 'Boundary style', + cta: 'Select boundary style', + previewClass: 'picker-preview-boundaries', + options: [ + { + value: 'open-space', + title: 'Open space', + desc: 'Nothing between sections but room. Spacing does the dividing.', + }, + { + value: 'thin-dividers', + title: 'Thin dividers', + desc: 'A hairline marks where one section ends and the next starts.', + }, + { + value: 'surface-changes', + title: 'Surface changes', + desc: 'Bands of tone. Sections are told apart by the ground they sit on.', + }, + { + value: 'cards-and-panels', + title: 'Cards and panels', + desc: 'Content sits inside containers with edges you can see.', + }, + ], + }, + { + id: '09', + step: 'Corners', + slug: 'corners', + name: 'corner-style', + title: 'How round should shapes be?', + legend: 'Corner style', + cta: 'Select corner style', + previewClass: 'picker-preview-corners', + options: [ + { + value: 'sharp', + title: 'Sharp', + desc: 'Square corners throughout. Precise, drafted, architectural.', + }, + { + value: 'slightly-soft', + title: 'Slightly soft', + desc: 'Just enough radius to take the edge off without being noticed.', + }, + { + value: 'friendly', + title: 'Friendly', + desc: 'Cards, buttons, and images are clearly rounded.', + }, + { + value: 'pill', + title: 'Pill-like', + desc: 'Buttons and tags go fully round.', + }, + ], + }, + { + id: '10', + step: 'Depth', + slug: 'depth', + name: 'depth-style', + title: 'How much depth should the surface have?', + legend: 'Depth style', + cta: 'Select depth style', + previewClass: 'picker-preview-depth', + options: [ + { + value: 'flat', + title: 'Flat', + desc: 'One plane. Nothing casts a shadow.', + }, + { + value: 'layered', + title: 'Layered', + desc: 'Tone stacks the page. Still no shadows anywhere.', + }, + { + value: 'soft-lift', + title: 'Soft lift', + desc: 'Cards and controls sit a little off the page.', + }, + { + value: 'floating', + title: 'Floating', + desc: 'Panels are well above the surface, with the lift to prove it.', + }, + ], + }, +]; --- @@ -265,76 +430,7 @@ const scaleRows = [['H1', 6], ['H2', 5], ['H3', 4], ['H4', 3], ['H5', 2], ['H6', - +
@@ -380,75 +476,7 @@ const scaleRows = [['H1', 6], ['H2', 5], ['H3', 4], ['H4', 3], ['H5', 2], ['H6',
- +