diff --git a/blocks/form/form.css b/blocks/form/form.css index 5b759dc..7eb1827 100644 --- a/blocks/form/form.css +++ b/blocks/form/form.css @@ -235,3 +235,114 @@ 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". 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; + 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);