@mtvh/mtvh-design-system 0.0.31 → 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,6 +4,7 @@
   );
   min-width: unset;
   min-height: unset;
+
   @include button-circle();
 
 }

package/assets/scss/components/_button.scss

@@ -133,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/_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

@@ -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,6 @@ $stepper-font-size: $font-size-xs;
 $stepper-font-color: var(--#{$prefix}white);
 $stepper-breakpoint: "lg";
 
-$alert-border-radius: 0.5rem;
 $alert-padding-x: 0;
 $alert-padding-y: 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/_input-group.scss

@@ -1,27 +1,3 @@
 .input-group-text {
   border-radius: 0.25rem 0 0 0.25rem;
 }
-.input-group-search {
-  $height: 46px;
-  display: flex;
-  align-items: center;
-
-
-  input.form-control {
-    padding-left: $mtvh-spacing-5;
-    border-right: 0;
-    height: $height;
-  }
-  .input-group-append {
-    border: var(--mtvh-border-width) solid var(--mtvh-grey-06);
-    border-top-right-radius: 0.25rem !important;
-    border-bottom-right-radius: 0.25rem !important;
-    border-radius: 0.25rem;
-    height: $height;
-    .mtvh-icon {
-      &:before {
-        background-color: var(--mtvh-black);
-      }
-    }
-  }
-}

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

@@ -69,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;
   }
 }