diff --git a/blocks/store-locator/store-locator.css b/blocks/store-locator/store-locator.css index 31bf26b..9af3587 100644 --- a/blocks/store-locator/store-locator.css +++ b/blocks/store-locator/store-locator.css @@ -1,7 +1,8 @@ .store-locator { - display: flex; - flex-direction: column; - gap: 24px; + display: grid; + grid-template-columns: 1fr; + gap: 24px 48px; + align-items: start; } .store-locator-search h1, @@ -10,7 +11,7 @@ .store-locator-search h4, .store-locator-search h5, .store-locator-search h6 { - margin: 0 0 16px; + margin: 0 0 24px; color: inherit; } @@ -22,31 +23,70 @@ .store-locator-field input { box-sizing: border-box; width: 100%; - border: 1px solid var(--conti-darkest-grey); - border-radius: 4px; + border: 0; + border-bottom: 1px solid var(--conti-white); + border-radius: 0; background-color: transparent; - padding: 12px 16px; + padding: 8px 24px 8px 0; color: var(--conti-white); font-family: var(--body-font-family); font-size: var(--body-font-size-s); } .store-locator-field input::placeholder { - color: var(--conti-dark-grey); + color: var(--conti-white); + text-transform: uppercase; + letter-spacing: 0.05em; } .store-locator-field input:disabled { - cursor: not-allowed; - opacity: 0.7; + cursor: default; +} + +.store-locator-search p { + margin: 12px 0 0; + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: var(--body-font-size-xs); +} + +/* example store result */ +.store-locator-result { + display: grid; + grid-template-columns: auto 1fr; + gap: 4px 24px; + align-items: start; +} + +.store-locator-result p { + margin: 0 0 6px; +} + +.store-locator-result p:first-child { + grid-row: span 5; + align-self: center; + color: var(--conti-yellow); + font-size: var(--heading-font-size-l); + line-height: 1; + text-align: center; +} + +.store-locator-result p:first-child strong { + display: block; + font-weight: 300; +} + +.store-locator-result .icon { + width: 18px; + height: 18px; + vertical-align: middle; + margin-inline-end: 6px; } .store-locator-ctas { display: flex; flex-wrap: wrap; gap: 16px; -} - -.store-locator-ctas p { margin: 0; } @@ -62,10 +102,13 @@ color: var(--conti-black); } -@media (width >= 700px) { +@media (width >= 900px) { .store-locator { - flex-direction: row; - align-items: center; - justify-content: space-between; + grid-template-columns: 1fr 1fr; + } + + .store-locator-ctas { + grid-column: 2; + justify-content: flex-end; } } diff --git a/blocks/store-locator/store-locator.js b/blocks/store-locator/store-locator.js index 6b775ee..28e9dc9 100644 --- a/blocks/store-locator/store-locator.js +++ b/blocks/store-locator/store-locator.js @@ -1,30 +1,30 @@ /** - * Static shell for the live store locator: a heading, a disabled location - * input (no live geolocation/search in this demo) and CTA links. The input - * is built in JS because it has no default-content representation. + * Static representation of the live "Stores near" module: a search column + * (heading + disabled location input + use-current-location link) and an + * example nearest-store result with distance, address, directions and phone, + * plus CTA links. No live geolocation/search in this demo; the store result + * is illustrative content authored on the page, matching what the live site + * renders by default. * @param {Element} block the store-locator block */ export default function decorate(block) { - const heading = block.querySelector('h1, h2, h3, h4, h5, h6'); - const ctaWrappers = [...block.querySelectorAll('p.button-wrapper')]; + const [search, result, ctas] = [...block.children]; - const search = document.createElement('div'); - search.className = 'store-locator-search'; - if (heading) search.append(heading); + if (search) { + search.className = 'store-locator-search'; + const field = document.createElement('div'); + field.className = 'store-locator-field'; + const input = document.createElement('input'); + input.type = 'text'; + input.placeholder = 'Enter city, state or zip'; + input.setAttribute('aria-label', 'Enter city, state or zip'); + input.disabled = true; + field.append(input); + const heading = search.querySelector('h1, h2, h3, h4, h5, h6'); + if (heading) heading.after(field); + else search.prepend(field); + } - const field = document.createElement('div'); - field.className = 'store-locator-field'; - const input = document.createElement('input'); - input.type = 'text'; - input.placeholder = 'Enter city, state or zip'; - input.setAttribute('aria-label', 'Enter city, state or zip'); - input.disabled = true; - field.append(input); - search.append(field); - - const ctas = document.createElement('div'); - ctas.className = 'store-locator-ctas'; - ctaWrappers.forEach((p) => ctas.append(p)); - - block.replaceChildren(search, ctas); + if (result) result.className = 'store-locator-result'; + if (ctas) ctas.className = 'store-locator-ctas'; } diff --git a/icons/chat.svg b/icons/chat.svg index ffa6cdc..e7f6359 100644 --- a/icons/chat.svg +++ b/icons/chat.svg @@ -1,4 +1 @@ - - - + diff --git a/icons/facebook.svg b/icons/facebook.svg index 6f75636..505d85f 100644 --- a/icons/facebook.svg +++ b/icons/facebook.svg @@ -1,3 +1 @@ - - - + diff --git a/icons/help-outline.svg b/icons/help-outline.svg index e0d754c..631229f 100644 --- a/icons/help-outline.svg +++ b/icons/help-outline.svg @@ -1,6 +1 @@ - - - + diff --git a/icons/instagram.svg b/icons/instagram.svg new file mode 100644 index 0000000..6229df7 --- /dev/null +++ b/icons/instagram.svg @@ -0,0 +1 @@ + diff --git a/icons/license-plate.svg b/icons/license-plate.svg index 15173a6..e118eae 100644 --- a/icons/license-plate.svg +++ b/icons/license-plate.svg @@ -1,6 +1 @@ - - - - - + diff --git a/icons/limited-warranty.svg b/icons/limited-warranty.svg deleted file mode 100644 index 7acb0e8..0000000 --- a/icons/limited-warranty.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/icons/mileage-warranty.svg b/icons/mileage-warranty.svg deleted file mode 100644 index 40fdbf6..0000000 --- a/icons/mileage-warranty.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - diff --git a/icons/phone.svg b/icons/phone.svg new file mode 100644 index 0000000..586edfe --- /dev/null +++ b/icons/phone.svg @@ -0,0 +1 @@ + diff --git a/icons/pin.svg b/icons/pin.svg new file mode 100644 index 0000000..0c30a27 --- /dev/null +++ b/icons/pin.svg @@ -0,0 +1 @@ + diff --git a/icons/road-hazard.svg b/icons/road-hazard.svg deleted file mode 100644 index 6014dca..0000000 --- a/icons/road-hazard.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/icons/roadside-assistance.svg b/icons/roadside-assistance.svg deleted file mode 100644 index 95b67c8..0000000 --- a/icons/roadside-assistance.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/icons/satisfaction-trial.svg b/icons/satisfaction-trial.svg deleted file mode 100644 index 972aab9..0000000 --- a/icons/satisfaction-trial.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/icons/search.svg b/icons/search.svg index 637c677..1c88718 100644 --- a/icons/search.svg +++ b/icons/search.svg @@ -1,6 +1 @@ - - - + diff --git a/icons/tcp-badge.svg b/icons/tcp-badge.svg index 2f6f7d7..d4395fa 100644 --- a/icons/tcp-badge.svg +++ b/icons/tcp-badge.svg @@ -1,6 +1 @@ - - - - - - + diff --git a/icons/tire-size.svg b/icons/tire-size.svg index 9adcfe0..c7c8d2b 100644 --- a/icons/tire-size.svg +++ b/icons/tire-size.svg @@ -1,9 +1 @@ - - - - - - - + diff --git a/icons/trip-interruption.svg b/icons/trip-interruption.svg deleted file mode 100644 index e99e332..0000000 --- a/icons/trip-interruption.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - diff --git a/icons/vehicle.svg b/icons/vehicle.svg index a3891bf..885d791 100644 --- a/icons/vehicle.svg +++ b/icons/vehicle.svg @@ -1,6 +1 @@ - - - + diff --git a/icons/x.svg b/icons/x.svg index f9284f1..8f05391 100644 --- a/icons/x.svg +++ b/icons/x.svg @@ -1,3 +1 @@ - - - + diff --git a/icons/youtube.svg b/icons/youtube.svg new file mode 100644 index 0000000..4900cf6 --- /dev/null +++ b/icons/youtube.svg @@ -0,0 +1 @@ + diff --git a/styles/styles.css b/styles/styles.css index 65638a0..790cfbc 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -304,6 +304,12 @@ main img { width: 100%; } +/* Total Confidence Plan badge renders at hero size, not as a small icon */ +.icon.icon-tcp-badge { + width: 110px; + height: 128px; +} + /* sections */ main > .section { margin: 40px 0;