From 689860292253b5ecaf366a44d65ad2eb5f70a05a Mon Sep 17 00:00:00 2001 From: Lamont Crook Date: Wed, 8 Jul 2026 10:00:05 -0600 Subject: [PATCH 1/2] Add search variant to form block for cruise search bar Adds a horizontal "search bar" variant to the form block, styled as a pill with joined dropdowns and a CTA button (matching the Holland America "Find Your Cruise" pattern). The band background is left to the section level (e.g. Section Metadata Style "dark") so it composes with page styling; the pill fills the content column and stacks into a card on mobile. Field labels are visually hidden and carried by each select's placeholder option. When the block has no submit endpoint, submitting previews the selected query in an alert as a placeholder for future search behavior. Co-Authored-By: Claude Opus 4.8 --- blocks/form/form.css | 105 +++++++++++++++++++++++++++++++++++++++++++ blocks/form/form.js | 12 +++++ 2 files changed, 117 insertions(+) diff --git a/blocks/form/form.css b/blocks/form/form.css index 5b759dc..7a68357 100644 --- a/blocks/form/form.css +++ b/blocks/form/form.css @@ -235,3 +235,108 @@ width: max-content; } } + +/* search variant: horizontal "find your cruise" style search bar. + The band background (e.g. navy) is provided at the section/page level, + for example via Section Metadata Style "dark". */ +.form.search form { + display: flex; + flex-direction: column; + gap: 0; + overflow: hidden; + border-radius: 16px; + background-color: var(--background-color); +} + +/* hide the field labels; the placeholder option carries the field name */ +.form.search .form-field > label { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border: 0; +} + +.form.search .form-field { + display: flex; + flex: 1; + margin: 0; +} + +.form.search .form-field + .form-field { + margin-top: 0; + border-top: 1px solid var(--border-color); +} + +/* stylelint-disable-next-line no-descending-specificity */ +.form.search select { + width: 100%; + height: 100%; + padding: 1em 3em 1em 1.5em; + border: 0; + border-radius: 0; + background-color: transparent; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 1.25em center; + background-size: 1em; + appearance: none; + color: var(--brand-navy); + font-weight: 700; + font-size: var(--body-font-size-m); + cursor: pointer; +} + +.form.search select:hover { + border-color: transparent; + background-color: var(--light-color); +} + +.form.search select:focus { + outline: 2px solid var(--brand-blue); + outline-offset: -2px; +} + +.form.search .button-wrapper { + display: flex; + margin: 0; +} + +/* stylelint-disable-next-line no-descending-specificity */ +.form.search .button-wrapper button.button { + width: 100%; + height: 100%; + padding: 1em 2em; + border: 0; + border-radius: 0; + background-color: var(--cta-color); + color: #fff; + font-weight: 700; + font-size: var(--body-font-size-m); + white-space: nowrap; +} + +.form.search .button-wrapper button.button:hover { + background-color: var(--cta-hover-color); +} + +@media (width >= 900px) { + .form.search form { + flex-direction: row; + align-items: stretch; + border-radius: 999px; + } + + .form.search .form-field + .form-field { + border-top: 0; + border-left: 1px solid var(--border-color); + } + + .form.search .button-wrapper button.button { + width: max-content; + } +} diff --git a/blocks/form/form.js b/blocks/form/form.js index 36b0c04..56125c8 100644 --- a/blocks/form/form.js +++ b/blocks/form/form.js @@ -657,6 +657,18 @@ export default function decorate(block) { const form = buildForm(data, submit); block.replaceChildren(form); block.removeAttribute('style'); + // search variant has no submit endpoint yet; preview the query for now + if (block.classList.contains('search') && !submit) { + form.addEventListener('submit', (e) => { + e.preventDefault(); + const payload = generatePayload(form); + const summary = Object.entries(payload) + .map(([key, value]) => `${key}: ${value || '(any)'}`) + .join('\n'); + // eslint-disable-next-line no-alert + window.alert(`Find Your Cruise\n\n${summary}`); + }); + } } catch (error) { // eslint-disable-next-line no-console console.error('Could not build form from', source, error); From f1b7c57e44891cde2f86d6526cbccaf9b6cfddad Mon Sep 17 00:00:00 2001 From: Lamont Crook Date: Wed, 8 Jul 2026 10:05:07 -0600 Subject: [PATCH 2/2] Add vertical padding to search form band The search variant now owns its vertical padding so the pill always has breathing room within the band, independent of the section background. Co-Authored-By: Claude Opus 4.8 --- blocks/form/form.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/blocks/form/form.css b/blocks/form/form.css index 7a68357..7eb1827 100644 --- a/blocks/form/form.css +++ b/blocks/form/form.css @@ -238,7 +238,13 @@ /* search variant: horizontal "find your cruise" style search bar. The band background (e.g. navy) is provided at the section/page level, - for example via Section Metadata Style "dark". */ + for example via Section Metadata Style "dark". The block owns its own + vertical padding so the pill always has breathing room in the band; + horizontal insets come from the section's content column. */ +.form.search { + padding: 24px 0; +} + .form.search form { display: flex; flex-direction: column;