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;