Merge pull request #478 from hlxsites/471-nhtsa-accordion-styling

Changes for NHTSA

blocks/columns/columns.css

@@ -5,6 +5,11 @@
     margin: 48px 0;
 }
 
+.columns.nhtsa > div {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
 .columns.revese-odd-rows-on-mobile > div:nth-of-type(odd),
 .columns.reverse-odd-rows-on-mobile > div:nth-of-type(odd) {
     flex-direction: column-reverse;
@@ -49,3 +54,19 @@
         padding-right: 10px;
     }
 }
+
+/* styling for nhtsa */
+.columns.nhtsa p {
+    margin-bottom: 0;
+}
+
+.columns.nhtsa a.button.primary {
+    padding: 0;
+    background-color: transparent;
+    color: var( --c-cta-blue-default);
+    height: auto;
+}
+
+.columns.nhtsa a.button.primary:hover {
+    color: var(--c-cta-blue-hover);
+}

blocks/columns/columns.js

@@ -1,4 +1,13 @@
 export default function decorate(block) {
   const cols = [...block.firstElementChild.children];
   block.classList.add(`columns-${cols.length}-cols`);
+
+  // Add target blank for nhtsa contact section link to open in new tab
+  if (block.classList.contains('nhtsa')) {
+    [...block.querySelectorAll('a')].forEach((link) => {
+      if (!link.target) {
+        link.target = '_blank';
+      }
+    });
+  }
 }

blocks/nhtsa-header/nhtsa-header.css

@@ -0,0 +1,69 @@
+:root {
+  --nhtsa-header-gutter: 16px;
+}
+
+.nhtsa-header {
+  display: flex;
+  gap: var(--nhtsa-header-gutter);
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.nhtsa-header .icon-nova-bus svg,
+.nhtsa-header .icon-prevost svg,
+.nhtsa-header .icon-logo svg {
+  width: 100px;
+  height: 20px;
+}
+
+.nhtsa-header .nhsta-header__langauge-switch {
+  background-color: var(--c-cta-blue-default);
+  color: var(--c-white);
+  text-transform: uppercase;
+  padding: 9px 21px;
+  font-family: var(--font-family-body);
+  font-size: var(--f-button-font-size);
+  line-height: var(--f-button-line-height);
+  letter-spacing: var(--f-button-letter-spacing);
+  border: 0;
+  align-items: center;
+  display: flex;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.nhtsa-header .nhsta-header__langauge-switch:hover,
+.nhtsa-header .nhsta-header__langauge-switch:focus {
+  background-color: var(--c-cta-blue-hover);
+}
+
+.nhtsa-header .nhsta-header__langauge-switch:active {
+  background-color: var(--c-cta-blue-active);
+}
+
+.nhtsa-header .hide {
+  display: none;
+}
+
+@media (min-width: 1200px) {
+  :root {
+    --nhtsa-header-gutter: 32px;
+  }
+
+  .nhtsa-header-wrapper {
+    border-top: 1px solid var(--c-grey-300);
+  }
+
+  .nhtsa-header .icon-logo svg {
+    width: 160px;
+    height: 30px;
+  }
+
+  .nhtsa-header .icon-nova-bus svg,
+  .nhtsa-header .icon-prevost svg {
+    width: initial;
+    height: initial;
+  }
+
+}

blocks/nhtsa-header/nhtsa-header.js

@@ -0,0 +1,20 @@
+import { unwrapDivs } from '../../scripts/common.js';
+
+// hide buttons for, content if they are from same origin
+function hideButtons(buttons) {
+  buttons.forEach((element) => {
+    element.classList.add('button', 'nhsta-header__langauge-switch');
+    const url = element.href;
+    const { location: { origin } = {} } = window.location.origin;
+
+    if (origin === url) {
+      element.classList.add('hide');
+    }
+  });
+}
+
+export default async function decorate(block) {
+  unwrapDivs(block);
+  const anchorTags = block.querySelectorAll('a');
+  hideButtons(anchorTags);
+}

blocks/specifications/specifications.css

@@ -182,4 +182,31 @@
     .block.specifications {
         --grid-rowheader-width: 200px;
     }
+}
+
+/* styles for arrow accordion */
+.specifications.arrow-accordion .rowgroup-header::after {
+    content: "\f107";
+    font-size: 25px;
+    transition: transform var(--duration-medium) cubic-bezier(0.45, 0, 0.125, 1);
+}
+
+.specifications.arrow-accordion .rowgroup-header[aria-expanded="true"]::after {
+    content: "\f106";
+}
+
+.specifications.arrow-accordion .rowgroup-header:first-child {
+    border-top: none;
+}
+
+.specifications.arrow-accordion .rowgroup-header:not(:first-child) {
+    border-top: 2px;
+}
+
+.block.specifications.arrow-accordion .row .cell {
+    background-color: var(--c-white);
+}
+
+.specifications.arrow-accordion h3 {
+    font-size: 16px;
 }

blocks/vin-number/vin-number.css

@@ -0,0 +1,115 @@
+:root {
+  --label-top: -6px;
+}
+
+.vin-number__form {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+}
+
+.vin-number__input-wrapper {
+  position: relative;
+}
+
+.vin-number__input {
+  margin: 0;
+  max-width: 100%;
+}
+
+.redesign-v2 .vin-number__form .vin-number__submit {
+  max-width: 100%;
+}
+
+.vin-number__form .vin-number__submit:disabled {
+  background-color: var(--overlay-background-color);
+  cursor: unset;
+}
+
+.vin-number__label {
+  left: var(--input-padding);
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  transition:
+    top var(--duration-small) var(--easing-standard),
+    left var(--duration-small) var(--easing-standard);
+}
+
+.vin-number__input:focus ~ .vin-number__label,
+.vin-number__input:not(:placeholder-shown) ~ .vin-number__label,
+.vin-number__input:not(:focus):valid ~ .v2-forms__label {
+  bottom: 0;
+  left: 0;
+  top: var(--label-top);
+}
+
+/* recalls list styling */
+.vin-number__results-container{
+  padding: 20px 0;
+}
+
+.vin-number__recalls-wrapper {
+  margin-top: 40px;
+}
+
+.vin-number__recalls-heading-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 5px;
+  flex-wrap: wrap;
+}
+
+.vin-number__recalls-heading {
+  margin-bottom: 0;
+}
+
+.vin-number__list,
+.vin-number__detail-list {
+  list-style: none;
+}
+
+.vin-number__list-item {
+  border-top: 1px solid var(--c-black);
+  padding: 20px 0;
+}
+
+.vin-number__detail-item {
+  display: flex;
+  gap: 16px;
+}
+
+.vin-number__detail-item--column {
+  flex-direction: column;
+  gap: 0;
+}
+
+.vin-number__detail-item:not(:first-child){
+  margin-top: 10px;
+}
+
+.vin-number__recall-incomplete,
+.vin-number__recall-incomplete-no-remedy {
+  color: var(--c-error-red);
+}
+
+.vin-number__recall-complete {
+  color: var(--c-leaf-4);
+}
+
+@media (min-width: 744px) {
+  :root {
+    --label-top: 3px;
+  }
+
+  .vin-number__form {
+    flex-direction: row;
+    max-width: 100%;
+  }
+
+  .vin-number__input-wrapper {
+    flex: 1;
+  }
+}