@mtvh/mtvh-design-system 0.0.30 → 0.0.32

package/assets/scss/components/_agent-repair-location-list.scss

@@ -0,0 +1,13 @@
+// list style overrides for the MTVHO agent repair search results
+.agent-repair-location-search-list {
+  list-style-type: none;
+  padding-left: 0;
+
+  ul {
+    padding-left: $mtvh-spacing-6;
+  }
+
+  &.agent-repair-location-search-list-additional {
+    border-bottom: 1px solid var(--mtvh-grey-03);
+  }
+}

package/assets/scss/components/_all.scss

@@ -16,3 +16,5 @@
 @import "_card-list";
 @import "_space-selection";
 @import "_good-to-know";
+@import "_collapse_button";
+@import "_agent-repair-location-list";

package/assets/scss/components/_button-circle.scss

@@ -4,23 +4,15 @@
   );
   min-width: unset;
   min-height: unset;
+
   @include button-circle();
-  &:before {
-    margin: 0;
-  }
+
 }
 
 .btn-close-circle {
   @include button-circle();
 }
 
-.alert-dismissible {
-  .btn-close-circle {
-    top: $mtvh-spacing-5;
-    padding: $mtvh-spacing-4;
-  }
-}
-
 @each $state in map-keys($banner-theme-colors) {
   .mtvh-banner--#{$state} {
     --#{$prefix}btn-close-focus-outline-color: var(

package/assets/scss/components/_button.scss

@@ -30,6 +30,21 @@ $mtvh-buttons: (
     border-active: transparent,
     border-color-disabled: var(--mtvh-grey-05),
   ),
+  light-grey: (
+    text-color: var(--mtvh-black),
+    text-color-hover: var(--mtvh-black),
+    text-color-active: var(--mtvh-black),
+    text-color-focus: var(--mtvh-black),
+    text-color-disabled: var(--mtvh-black),
+    background: var(--mtvh-grey-01),
+    background-hover: var(--mtvh-grey-01),
+    background-active: var(--mtvh-grey-02),
+    background-focus: var(--mtvh-white),
+    background-disabled: var(--mtvh-grey-05),
+    border: transparent,
+    border-active: transparent,
+    border-color-disabled: var(--mtvh-grey-05),
+  ),
   outline-primary: (
     text-color: var(--mtvh-blue-04),
     text-color-hover: var(--mtvh-blue-05),
@@ -118,6 +133,7 @@ $mtvh-buttons: (
     outline: solid var(--#{$prefix}btn-outline-border)
       var(--#{$prefix}btn-outline-color);
     outline-offset: var(--#{$prefix}btn-outline-border);
+    border-radius: $btn-border-radius;
     text-decoration: none;
   }
   &:focus:not(:focus-visible) {

package/assets/scss/components/_card-list.scss

@@ -1,11 +1,24 @@
 .card-list {
+  border-radius: $border-radius-lg;
+  background-color: var(--#{$prefix}white);
   &-item {
+
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    align-items: center;
+    
     border-bottom: 1px solid var(--#{$prefix}grey-03);
-    padding-top: $mtvh-spacing-5;
+    padding-top: $mtvh-spacing-4;
     padding-bottom: $mtvh-spacing-5;
+    margin-left: $mtvh-spacing-5;
+    margin-right: $mtvh-spacing-5;
+
+    @include media-breakpoint-up(md) {
+      margin-left: $mtvh-spacing-6;
+      margin-right: $mtvh-spacing-6;
+      padding-top: $mtvh-spacing-5;
+    }
 
     &:has(.label) {
       &:last-child {
@@ -38,7 +51,12 @@
       span {
         display: block;
         align-self: center;
-
+        font-size: $font-size-xs;
+        @include media-breakpoint-down(sm) {
+          &:not(:first-child) {
+            padding-top: $mtvh-spacing-2;
+          }
+        }
         @include media-breakpoint-up(sm) {
           display: inline;
         }

package/assets/scss/components/_collapse_button.scss

@@ -0,0 +1,14 @@
+// collapse button for use with Bootstrap Collapse components, based on the
+// circle varriation of the close button animation goes through the transition
+// mixin so it adheres to the reduced motion setting.
+.btn-collapse {
+
+  transform: rotate(0deg);;
+  @include transition($btn-collapse-transition);
+
+  &.collapsed {
+    transform: rotate(180deg);
+    @include transition($btn-collapse-transition);
+  }
+}
+

package/assets/scss/components/_content-block.scss

@@ -126,9 +126,6 @@
   &-bg {
     --#{$prefix}content-block-bg: var(--mtvh-white);
     background-color: var(--#{$prefix}content-block-bg);
-    a {
-      color: var(--#{$prefix}content-block-bg-link-color, var(--#{$prefix}blue-04));
-    }
   }
 
   &-icon {
@@ -231,7 +228,9 @@
   .mtvh-content-block-bg--#{$state} {
     --#{$prefix}content-block-bg: #{$variable};
     @if ($state == "grey-02" or $state == "yellow-02") {
-      --#{$prefix}content-block-bg-link-color: var(--#{$prefix}black);
+      a {
+        color: var(--#{$prefix}black);
+      }
     }
   }
 }

package/assets/scss/components/_form.scss

@@ -8,6 +8,7 @@
 @import "../forms/validation";
 @import "../forms/stripe";
 @import "../forms/credit-card-form";
+@import "../forms/search";
 
 .formio-form {
   @import "../forms/formio";
@@ -127,11 +128,12 @@ formio {
     }
   }
 
-  .mtvh-form-container-required {
-    font-size: $font-size-xs;
-    padding: 0 0 $mtvh-spacing-6 0;
-    @include media-breakpoint-down("lg") {
-      padding-bottom: $mtvh-spacing-7;
-    }
+}
+
+.mtvh-form-container-required {
+  font-size: $font-size-xs;
+  padding: 0 0 $mtvh-spacing-6 0;
+  @include media-breakpoint-down("lg") {
+    padding-bottom: $mtvh-spacing-7;
   }
 }

package/assets/scss/config/_icon-list.scss

@@ -27,7 +27,7 @@ $icons: (
   "person":
     '<svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11.611c-1.607 0-2.976-.566-4.108-1.697C7.26 8.782 6.694 7.412 6.694 5.806c0-1.607.566-2.976 1.698-4.108C9.524.566 10.893 0 12.5 0c1.607 0 2.976.566 4.108 1.698 1.132 1.132 1.698 2.5 1.698 4.108 0 1.606-.566 2.976-1.698 4.108-1.132 1.132-2.501 1.697-4.108 1.697ZM0 21.714v-1.17c0-.814.218-1.562.654-2.245a4.366 4.366 0 0 1 1.779-1.582 25.435 25.435 0 0 1 5.02-1.822c1.677-.41 3.36-.615 5.047-.615 1.688 0 3.37.205 5.05.615a25.352 25.352 0 0 1 5.019 1.821c.75.372 1.343.9 1.778 1.583.435.683.653 1.43.653 2.245v1.17c0 .673-.235 1.245-.706 1.716a2.336 2.336 0 0 1-1.716.706H2.422a2.336 2.336 0 0 1-1.716-.706A2.336 2.336 0 0 1 0 21.714Zm2.39.033h20.22v-1.199c0-.353-.1-.677-.3-.973-.2-.297-.477-.54-.83-.732a21.98 21.98 0 0 0-4.444-1.624 19.049 19.049 0 0 0-9.082 0c-1.493.367-2.969.908-4.426 1.624a2.285 2.285 0 0 0-.838.733c-.2.297-.3.62-.3.97v1.2ZM12.5 9.222a3.29 3.29 0 0 0 2.413-1.004 3.29 3.29 0 0 0 1.003-2.412 3.29 3.29 0 0 0-1.003-2.413A3.29 3.29 0 0 0 12.5 2.39a3.29 3.29 0 0 0-2.413 1.003 3.29 3.29 0 0 0-1.003 2.413c0 .94.334 1.743 1.003 2.412A3.29 3.29 0 0 0 12.5 9.222Z" fill="#000"/></svg>',
   "search":
-    '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.215 14.417c-2.019 0-3.726-.698-5.122-2.094C.698 10.927 0 9.223 0 7.21c0-2.013.697-3.718 2.092-5.115C3.486.698 5.19 0 7.206 0c2.016 0 3.722.699 5.12 2.096 1.396 1.397 2.095 3.102 2.095 5.116 0 .843-.141 1.655-.425 2.436a6.767 6.767 0 0 1-1.134 2.03l6.89 6.871a.82.82 0 0 1 .248.59.803.803 0 0 1-.254.605.828.828 0 0 1-1.192.003l-6.883-6.888a6.552 6.552 0 0 1-2.065 1.152 7.238 7.238 0 0 1-2.39.406Zm-.004-1.688c1.545 0 2.851-.533 3.92-1.6 1.067-1.066 1.601-2.373 1.601-3.921 0-1.548-.534-2.855-1.602-3.921-1.068-1.066-2.375-1.599-3.922-1.599-1.547 0-2.854.533-3.92 1.6-1.066 1.066-1.6 2.373-1.6 3.921 0 1.548.534 2.855 1.6 3.921 1.067 1.066 2.374 1.599 3.923 1.599Z" fill="#000"/></svg>',
+    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M7.383 14.762c-2.06 0-3.806-.715-5.237-2.145C.716 11.187 0 9.442 0 7.383c0-2.06.715-3.805 2.144-5.237C3.574.716 5.318 0 7.377 0c2.06 0 3.804.716 5.234 2.147 1.431 1.431 2.146 3.177 2.146 5.239a7.22 7.22 0 0 1-.371 2.333 6.53 6.53 0 0 1-1.016 1.925l6.272 6.266c.239.244.358.532.358.866 0 .334-.123.621-.369.862-.24.241-.53.362-.865.362-.336 0-.623-.12-.862-.358l-6.26-6.267c-.56.439-1.205.78-1.936 1.023a7.316 7.316 0 0 1-2.325.364Zm-.004-2.455c1.376 0 2.541-.477 3.494-1.43.953-.953 1.43-2.119 1.43-3.496 0-1.377-.477-2.542-1.43-3.495-.953-.954-2.118-1.43-3.494-1.43-1.377 0-2.542.476-3.495 1.43-.953.953-1.43 2.118-1.43 3.495 0 1.377.477 2.543 1.43 3.496.953.953 2.118 1.43 3.495 1.43Z"/></svg>',
   "generic-doc":
     '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.95 20c-.528 0-.981-.188-1.358-.565a1.852 1.852 0 0 1-.565-1.358V1.923c0-.529.189-.982.565-1.358C2.97.188 3.422 0 3.95 0h7.308c.255 0 .499.047.73.141.231.094.438.232.62.413l4.8 4.79a1.925 1.925 0 0 1 .568 1.361v11.372c0 .529-.188.981-.565 1.358-.376.377-.83.565-1.358.565H3.95Zm7.154-14.09V1.923H3.95v16.154h12.103V6.872h-3.987a.926.926 0 0 1-.68-.282.926.926 0 0 1-.282-.68Z" fill="#000"/></svg>',
   "presentation":
@@ -81,9 +81,9 @@ $icons: (
   "space-sub-block":
     '<svg width="28" height="28" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.52481 12C1.24033 12 0.998404 11.8987 0.799042 11.6961C0.599681 11.4933 0.5 11.2474 0.5 10.9582V1.0416C0.5 0.752457 0.599681 0.506571 0.799042 0.303943C0.998404 0.101314 1.24033 0 1.52481 0H5.88428C6.16876 0 6.41069 0.101314 6.61005 0.303943C6.80941 0.506571 6.90909 0.752457 6.90909 1.0416V2.74286H12.4752C12.7597 2.74286 13.0016 2.84417 13.201 3.0468C13.4003 3.24943 13.5 3.49531 13.5 3.78446V10.9582C13.5 11.2474 13.4003 11.4933 13.201 11.6961C13.0016 11.8987 12.7597 12 12.4752 12H1.52481ZM1.51182 10.9714H5.89727V9.25714H1.51182V10.9714ZM1.51182 8.22857H5.89727V6.51429H1.51182V8.22857ZM1.51182 5.48571H5.89727V3.77143H1.51182V5.48571ZM1.51182 2.74286H5.89727V1.02857H1.51182V2.74286ZM6.90909 10.9714H12.4882V3.77143H6.90909V10.9714ZM8.89427 6.51429C8.75091 6.51429 8.63071 6.46497 8.53367 6.36634C8.43674 6.26771 8.38828 6.14548 8.38828 5.99966C8.38828 5.85394 8.43674 5.73183 8.53367 5.63331C8.63071 5.53491 8.75091 5.48571 8.89427 5.48571H10.3733C10.5167 5.48571 10.6368 5.53503 10.7337 5.63366C10.8308 5.73217 10.8793 5.85434 10.8793 6.00017C10.8793 6.146 10.8308 6.26811 10.7337 6.36651C10.6368 6.46503 10.5167 6.51429 10.3733 6.51429H8.89427ZM8.89427 9.25714C8.75091 9.25714 8.63071 9.20783 8.53367 9.1092C8.43674 9.01057 8.38828 8.88834 8.38828 8.74251C8.38828 8.5968 8.43674 8.47468 8.53367 8.37617C8.63071 8.27777 8.75091 8.22857 8.89427 8.22857H10.3733C10.5167 8.22857 10.6368 8.27788 10.7337 8.37651C10.8308 8.47503 10.8793 8.5972 10.8793 8.74303C10.8793 8.88886 10.8308 9.01097 10.7337 9.10937C10.6368 9.20789 10.5167 9.25714 10.3733 9.25714H8.89427Z" fill="#9A9A9A"/></svg>',
   "chevron-up":
-  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44"><path fill="#000" d="m22.01 18.23-8.413 9.46a.875.875 0 0 1-.621.31c-.244.014-.466-.088-.665-.308a1.11 1.11 0 0 1-.31-.723c-.009-.262.087-.512.285-.75l8.636-9.711c.17-.177.34-.309.513-.397.173-.088.364-.132.575-.132.21 0 .403.044.577.133.173.089.34.222.497.399l8.627 9.705c.188.211.285.456.289.732.005.277-.093.525-.291.744-.2.22-.415.33-.646.33-.231 0-.445-.11-.64-.331l-8.413-9.46Z"/></svg>',
+  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 20 13"><path fill="#000" d="m10.01 2.252-8.413 9.46a.875.875 0 0 1-.621.31c-.244.013-.466-.09-.665-.308a1.11 1.11 0 0 1-.31-.723c-.009-.262.087-.512.285-.75L8.922.528c.17-.176.34-.309.513-.397C9.608.044 9.8 0 10.01 0c.21 0 .403.044.577.133.173.089.34.222.497.4l8.627 9.704c.188.212.285.456.289.732a1.05 1.05 0 0 1-.291.745c-.2.219-.415.329-.646.329-.231 0-.445-.11-.64-.331l-8.413-9.46Z"/></svg>',
   "chevron-down":
-  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44"><path fill="#000" d="m21.99 25.77 8.413-9.46a.875.875 0 0 1 .621-.31c.244-.014.466.088.665.308s.302.46.31.723c.009.262-.086.512-.285.75l-8.636 9.711c-.17.177-.34.309-.513.397a1.247 1.247 0 0 1-.575.132c-.21 0-.403-.044-.577-.133a1.73 1.73 0 0 1-.497-.399l-8.627-9.705a1.096 1.096 0 0 1-.289-.732 1.051 1.051 0 0 1 .291-.744c.2-.22.415-.33.646-.33.231 0 .445.11.64.331l8.413 9.46Z"/></svg>'
+  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 20 13"><path fill="#000" d="M9.99 9.79 18.403.33a.875.875 0 0 1 .621-.309c.244-.014.466.089.665.308.199.22.302.46.31.723.009.262-.086.512-.285.75l-8.636 9.712c-.17.176-.34.308-.513.397a1.247 1.247 0 0 1-.575.132c-.21 0-.403-.045-.577-.134a1.73 1.73 0 0 1-.497-.399L.289 1.805A1.097 1.097 0 0 1 0 1.073 1.051 1.051 0 0 1 .291.329C.491.109.705 0 .937 0c.231 0 .445.11.64.33L9.99 9.79Z"/></svg>'
 );
 
 /**
@@ -127,6 +127,14 @@ $mtvh-icons: (
     width: $icon-size-scale-sm,
     height: $icon-size-scale-sm,
   ),
+  "chevron-up": (
+    width: $icon-size-scale-sm,
+    height: $icon-size-scale-sm
+  ),
+  "chevron-down": (
+    width: $icon-size-scale-sm,
+    height: $icon-size-scale-sm
+  ),
   "spreadsheet": (
     width: $icon-size-scale-sm,
     height: $icon-size-scale-sm,
@@ -679,14 +687,7 @@ $mtvh-icons: (
     height: $icon-size-scale-lg,
     svg-path: "#{$asset-icon-path}mastercard.svg",
   ),
-  "chevron-up": (
-    width: $icon-size-scale-lg,
-    height: $icon-size-scale-lg
-  ),
-  "chevron-down": (
-    width: $icon-size-scale-lg,
-    height: $icon-size-scale-lg
-  ),
+
   "space-building": (
     width: $icon-size-scale-md,
     height: $icon-size-scale-md,

package/assets/scss/config/_theme.scss

@@ -12,7 +12,7 @@
   --mtvh-btn-line-height: 1.5;
   --mtvh-btn-font-weight: bold;
   --mtvh-btn-outline-color: var(--mtvh-blue-03);
-  --mtvh-btn-outline-border: 0.13rem;
+  --mtvh-btn-outline-border: 0.125rem;
   --mtvh-btn-min-width: 10rem;
 
   /* Shadows */

package/assets/scss/config/_variables.scss

@@ -183,7 +183,7 @@ $input-width-size-xl: 450px;
 $input-width-size-l: 420px;
 
 /* form check */
-$form-check-bg-color: unset;
+$form-check-bg-color: var(--#{$prefix}grey-01);
 $form-check-hover-bg-color: unset;
 $form-check-input-width: 2.75rem;
 $form-check-input-height: 2.75rem;
@@ -223,6 +223,9 @@ $btn-close-circle-height: 1.25rem;
 $btn-close-focus-opacity: 1;
 $btn-close-hover-opacity: 1;
 
+/* collapse button */
+$btn-collapse-transition: transform 0.2s ease-in-out;
+
 /* stepper */
 $stepper-bg-color: var(--#{$prefix}grey-06);
 $stepper-sm-font-color: var(--#{$prefix}purple-04);
@@ -233,7 +236,9 @@ $stepper-font-size: $font-size-xs;
 $stepper-font-color: var(--#{$prefix}white);
 $stepper-breakpoint: "lg";
 
-$alert-border-radius: 8px;
+$alert-padding-x: 0;
+$alert-padding-y: 0;
+
 $banner-theme-colors: (
   "success": var(--#{$prefix}green-02),
   "warning": var(--#{$prefix}yellow-02),
@@ -376,7 +381,7 @@ $pagination-padding-y: 8px;
 $pagination-border-radius: 4px;
 $pagination-color: var(--#{$prefix}blue-04);
 $pagination-hover-color: var(--#{$prefix}blue-05);
-$pagination-hover-bg: var(--#{$prefix}white);
+$pagination-hover-bg: var(--#{$prefix}grey-01);
 $pagination-active-bg: var(--#{$prefix}purple-04);
 $pagination-active-color: var(--#{$prefix}white);
 $pagination-focus-color: var(--#{$prefix}blue-04);

package/assets/scss/core/iconography/_icon.scss

@@ -26,7 +26,7 @@
           @include hover-animate($position: "right");
         }
       }
-      &.m-0, &.mtvh-icon--circle {
+      &.m-0, &.btn-icon-circle   {
         &:after,
         &:before {
           margin-right: 0;

package/assets/scss/forms/_form-check.scss

@@ -26,9 +26,10 @@
 }
 
 .form-check-input {
+
+  --#{$prefix}form-check-bg: #{$form-check-bg-color};
   margin-top: 0;
   margin-right: $mtvh-spacing-4;
-  float: unset;
   align-self: start;
   border: var(--#{$prefix}border-width) solid var(--#{$prefix}grey-06);
 

package/assets/scss/forms/_search.scss

@@ -0,0 +1,30 @@
+.input-group-search {
+
+  $height: 44px;
+  $button-size: $icon-size-scale-lg;
+  display: flex;
+  align-items: center;
+  position: relative;
+  input.form-control {
+    padding-left: $mtvh-spacing-5;
+    padding-right: calc(#{$button-size} * 2  + 0.25rem);
+    height: $height;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+  .input-group-search-append {
+    position: absolute;
+    z-index:8;
+    display: flex;
+    top: 0;
+    right: 0;
+  }
+
+  .mtvh-icon {
+    position: relative;
+    &:before {
+      background-color: var(--mtvh-black) !important;
+    }
+  }
+
+}

package/assets/scss/mixins/_butttons.scss

@@ -47,10 +47,15 @@
   }
 }
 
-@mixin button-circle($padding: $mtvh-spacing-4, $hover-bg: rgba(0, 0, 0, 0.08), $active-bg: rgba(0, 0, 0, 0.16)) {
-  border: 0;
+@mixin button-circle($size: 44px, $padding-x: 0,$padding-y: 0, $hover-bg: rgba(0, 0, 0, 0.08), $active-bg: rgba(0, 0, 0, 0.16)) {
+
+  width: $size;
+  height: $size;
+  min-width: $size;
+  min-height: $size;
+  border: none;
   border-radius: 50%;
-  padding: $padding;
+  padding: $padding-y $padding-x;
 
   &:focus-visible {
     box-shadow: none;
@@ -64,11 +69,28 @@
   &:active:not(:disabled):not(.disabled) {
     outline: 0;
   }
+
+  &:hover, &:active:not(:disabled):not(.disabled) {
+    position: relative;
+    &:after {
+      content: "";
+      position: absolute;
+      left: 4px;
+      top: 4px;
+      padding: 1.125rem;
+      border-radius: 50%;
+      z-index:  1;
+    }
+  }
   &:hover {
     cursor: pointer;
-    background-color: $hover-bg;
+    &:after {
+      background: $hover-bg;
+    }
   }
   &:active:not(:disabled):not(.disabled) {
-    background-color: $active-bg;
+    &:after {
+      background: $active-bg;
+    }
   }
 }

package/assets/scss/mixins/_form.scss

@@ -4,7 +4,7 @@
   font-weight: bold;
   position: relative;
   display: flex;
-  margin: $mtvh-spacing-3 0 0 0;
+  margin: $mtvh-spacing-4 0 0 0;
   &:before {
     content: "";
     -webkit-mask: get-icon("error", $danger);
@@ -12,9 +12,10 @@
     background-color: $danger;
     mask-repeat: no-repeat;
     -webkit-mask-repeat: no-repeat;
-    padding-right: $mtvh-spacing-7;
+    padding-right: calc(1.25rem + #{$mtvh-spacing-3});
     margin-top: $mtvh-spacing-1;
     vertical-align: top;
+    width: $icon-size-scale-sm;
   }
 }
 

package/assets/scss/mixins/_icon.scss

@@ -136,6 +136,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: (($size - $icon-size-scale-xs) / 2);
   color: $color;
 
   &.mtvh-icon {