@mtvh/mtvh-design-system 0.0.32 → 0.0.34

package/assets/scss/app.scss

@@ -1,7 +1,97 @@
 @import "mtvh";
 
+
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "bootstrap/scss/functions";
+
 // 2. Include any default variable overrides here
-@import "../../node_modules/@thulite/doks-core/assets/scss/app";
+@import "../../node_modules/@thulite/doks-core/assets/scss/common/colors";
+@import "../../node_modules/@thulite/doks-core/assets/scss/common/variables-overrides";
+
+// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+
+// 6. Optionally include any other parts as needed
+
+// Layout & components
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+
+// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "bootstrap/scss/utilities/api";
+
+// 8. Add additional custom code here
+//@import "common/fonts";
+@import "../../node_modules/@thulite/doks-core/assets/scss/common/global";
+@import "../../node_modules/@thulite/doks-core/assets/scss/common/syntax";
+@import "../../node_modules/@thulite/doks-core/assets/scss/common/dark";
+//@import "components/alerts";
+//@import "components/buttons";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/callouts";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/expressive-code";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/code";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/comments";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/details";
+//@import "components/forms";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/images";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/mermaid";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/modals";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/search";
+@import "../../node_modules/@thulite/doks-core/assets/scss/components/section-nav";
+//@import "components/steps";
+//@import "components/tables";
+//@import "components/tabs";
+@import "../../node_modules/@thulite/doks-core/assets/scss/layouts/footer";
+@import "../../node_modules/@thulite/doks-core/assets/scss/layouts/header";
+@import "../../node_modules/@thulite/doks-core/assets/scss/layouts/pages";
+@import "../../node_modules/@thulite/doks-core/assets/scss/layouts/sidebar";
+
+/*
+body {
+  background-color: {{ site.Params.doks.backGround }};
+}
+*/
+
+// 9. Custom styles
+@import "common/custom";
 
 // 9. Custom styles
 @import "common/custom";

package/assets/scss/components/_accordion.scss

@@ -0,0 +1,66 @@
+.accordion {
+  --#{$prefix}accordion-active-bg: var(--#{$prefix}white);
+  --#{$prefix}accordion-active-color: var(--#{$prefix}blue-04);
+  --#{$prefix}accordion-body-padding-x: #{$mtvh-spacing-7};
+  --#{$prefix}accordion-body-padding-y: #{$mtvh-spacing-6};
+  --#{$prefix}accordion-inner-border-radius: #{$border-radius-lg};
+
+  background-color: var(--#{$prefix}white);
+  padding: $mtvh-spacing-6 $mtvh-spacing-5;
+  border-radius: $border-radius-lg;
+  @include media-breakpoint-up(md) {
+    padding: $mtvh-spacing-6;
+  }
+
+}
+
+.accordion-button {
+  border-left: 0;
+  border-right: 0;
+  font-size: $font-size-sm;
+  font-weight: $mtvh-font-weight-bold;
+  font-family: $font-family-sans-serif;
+  &:not(.collapsed)
+  {
+    box-shadow: none;
+  }
+
+
+  &:focus {
+    @include focus-radius;
+    border-radius: $border-radius-lg;
+  }
+
+  &:after {
+    left: 0;
+    position: absolute;
+
+  }
+  padding-left: $mtvh-spacing-7;
+}
+.accordion-header {
+
+  &:hover {
+    background-color: var(--#{$prefix}grey-01);
+    .accordion-button {
+      background-color: var(--#{$prefix}grey-01);
+    }
+  }
+
+  padding-top:0;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  align-items: center;
+}
+.accordion-item {
+  border-left: 0;
+  border-right: 0;
+
+}
+.accordion-body {
+  padding-top: 0;
+  padding-right: 0;
+  border-right: 0;
+
+}

package/assets/scss/components/_alert.scss

@@ -17,3 +17,4 @@
     margin: 0;
   }
 }
+

package/assets/scss/components/_all.scss

@@ -18,3 +18,7 @@
 @import "_good-to-know";
 @import "_collapse_button";
 @import "_agent-repair-location-list";
+@import "_accordion";
+@import "_table";
+@import "_progress-bar";
+@import "_tabs";

package/assets/scss/components/_banner.scss

@@ -1,4 +1,5 @@
 .mtvh-banner {
+
   background-color: var(--#{$prefix}banner-bg);
   color: var(--#{$prefix}banner-text-color);
   display: none;
@@ -57,7 +58,7 @@
   &.alert {
     --#{$prefix}alert-margin-bottom: 0;
     &.p-0 {
-      height: 44px;
+      height: $input-min-height;
       overflow: hidden;
     }
   }

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

@@ -1,4 +1,6 @@
 .btn-icon-circle {
+  --#{$prefix}icon-right-spacing: 0px;
+  --#{$prefix}icon-left-spacing: 0px;
   --#{$prefix}btn-close-focus-outline-color: var(
     --#{$prefix}primary-outline-color
   );
@@ -11,6 +13,9 @@
 
 .btn-close-circle {
   @include button-circle();
+  &.btn-close {
+    padding: 0;
+  }
 }
 
 @each $state in map-keys($banner-theme-colors) {

package/assets/scss/components/_button.scss

@@ -62,6 +62,23 @@ $mtvh-buttons: (
     border-active: var(--mtvh-blue-06),
     border-color-disabled: var(--mtvh-grey-06),
   ),
+  outline-primary-filled: (
+    text-color: var(--mtvh-blue-04),
+    text-color-hover: var(--mtvh-blue-05),
+    text-color-active: var(--mtvh-blue-06),
+    text-color-focus: var(--mtvh-blue-05),
+    text-color-disabled: var(--mtvh-grey-06),
+    background: var(--mtvh-white),
+    background-hover: var(--mtvh-white),
+    background-focus: var(--mtvh-white),
+    background-disabled: var(--mtvh-white),
+    background-active: var(--mtvh-white),
+    border: var(--mtvh-blue-04),
+    border-hover: var(--mtvh-blue-05),
+    border-focus: var(--mtvh-blue-05),
+    border-active: var(--mtvh-blue-06),
+    border-color-disabled: var(--mtvh-grey-06),
+  ),
   outline-light: (
     text-color: var(--mtvh-white),
     text-color-hover: var(--mtvh-grey-04),
@@ -129,22 +146,18 @@ $mtvh-buttons: (
   box-shadow: none;
 
   &:focus-visible {
-    box-shadow: none;
-    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) {
-    outline: 0;
+    @include focus-radius;
   }
+
   &:hover {
     text-decoration: none;
   }
 }
 
 .mtvh-btn {
+  --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
+  --#{$prefix}icon-left-spacing: 0;
+
   min-height: 2.5rem;
   min-width: var(--#{$prefix}btn-min-width);
   border-radius: $btn-border-radius;

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

@@ -1,13 +1,14 @@
 .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-4;
     padding-bottom: $mtvh-spacing-5;
@@ -20,6 +21,16 @@
       padding-top: $mtvh-spacing-5;
     }
 
+    .credit-card-form & {
+
+      margin-left: 0;
+      margin-right: 0;
+
+      &:first-child {
+        border-top: 1px solid var(--#{$prefix}grey-03);
+      }
+    }
+
     &:has(.label) {
       &:last-child {
         border-bottom: none;
@@ -43,12 +54,14 @@
 
       div {
         flex-wrap: nowrap;
-        @include media-breakpoint-up(lg) {
-          flex-wrap: nowrap;
-        }
+      }
+
+      .form-check-input, span {
+        margin-right: $mtvh-spacing-5;
       }
 
       span {
+        --#{$prefix}icon-right-spacing: #{$mtvh-spacing-5};
         display: block;
         align-self: center;
         font-size: $font-size-xs;
@@ -71,8 +84,9 @@
       align-self: flex-start;
     }
 
-    .invali-feedback {
+    .invalid-feedback {
       flex-basis: 100%;
+      padding-top: $mtvh-spacing-4;
     }
   }
 }

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

@@ -6,10 +6,17 @@
     padding: $mtvh-spacing-6 $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-6;
   }
 
-  &:last-of-type {
-    .mtvh-link {
-      padding-bottom: 0;
-    }
+  p {
+    margin-bottom: $mtvh-spacing-3;
+  }
+  .large {
+    margin-bottom: map-get($spacers,2);
+  }
+  .mtvh-link, .mtvh-btn {
+    margin-top: $mtvh-spacing-3;
+  }
+ .mtvh-btn {
+    margin-bottom: $mtvh-spacing-3;
   }
 
   &__date {
@@ -93,25 +100,6 @@
       font-size: $mtvh-base-font-size;
     }
   }
-  .mtvh-btn,
-  p {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  h3,
-  .mtvh-h3 {
-    + .mtvh-btn {
-      margin-top: 0.625rem;
-    }
-  }
-  h4,
-  .mtvh-h4 {
-    + .mtvh-btn {
-      margin-top: 0.625rem;
-    }
-  }
 
   &-no-padding {
     padding: 0;
@@ -129,6 +117,8 @@
   }
 
   &-icon {
+
+    --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
     &:not(.mtvh-content-block-link-card) {
       padding: $mtvh-spacing-5;
       @include media-breakpoint-up(md) {
@@ -142,11 +132,6 @@
       display: block;
     }
 
-    h3:has(+ p + p),
-    h3:has(+ p + p + p),
-    h3:has(+ div) {
-      margin-bottom: $mtvh-spacing-5;
-    }
   }
 
   &-container {

package/assets/scss/components/_form.scss

@@ -15,6 +15,7 @@
   @import "../forms/mtvho-contact-phone";
   @import "../forms/mtvho-contact-email";
   @import "../forms/mtvh-address";
+  @import "../forms/file-upload";
 }
 
 .mtvh-form,
@@ -58,6 +59,7 @@ formio {
       display: none;
       --#{$prefix}form-group-padding-y: 0;
     }
+
   }
 
   label.field-required,
@@ -91,7 +93,7 @@ formio {
   --#{$prefix}form-control-input-width: #{$input-width-size-lg};
 
   @include media-breakpoint-up("md") {
-    --#{$prefix}form-max-width: 576px;
+    --#{$prefix}form-max-width: unset;
   }
   @include media-breakpoint-up("lg") {
     --#{$prefix}form-group-padding-y: #{$form-group-lg-margin-bottom};
@@ -132,8 +134,5 @@ 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;
-  }
+  padding: 0 0 $mtvh-spacing-7 0;
 }

package/assets/scss/components/_good-to-know.scss

@@ -26,6 +26,10 @@
     margin-right: $spacing-unit;
     border-bottom: 1px solid var(--mtvh-yellow-03);
 
+    @include media-breakpoint-up(lg) {
+      margin-left: $mtvh-spacing-6;
+    }
+
     h3,
     h4,
     h5,
@@ -41,6 +45,7 @@
       font-family: $font-family-sans-serif;
       font-size: $font-size-base;
       line-height: $line-height-base;
+      margin: unset;
     }
 
     a {

package/assets/scss/components/_link.scss

@@ -85,10 +85,11 @@ $mtvh-links: (
       }
     }
   }
+
   &:before {
-    margin-right: $link-icon-spacing !important;
+    --#{$prefix}icon-right-spacing: #{$link-icon-spacing};
   }
   &:after {
-    margin-left: $link-icon-spacing !important;
+    --#{$prefix}icon-left-spacing: #{$link-icon-spacing};
   }
 }

package/assets/scss/components/_pagination.scss

@@ -1,5 +1,5 @@
 .pagination {
-  $size: 44px;
+  $size: $input-min-height;
   margin: 0;
 
   @include media-breakpoint-down("lg") {

package/assets/scss/components/_payment.scss

@@ -0,0 +1,59 @@
+.payment-supported {
+
+  text-align: center;
+  font-size: $font-size-xs;
+  color: var(--#{$prefix}grey-06);
+  border-top:1px solid var(--#{$prefix}grey-04);
+
+  margin-top: $mtvh-spacing-4;
+  margin-bottom: $mtvh-spacing-5;
+
+  @include media-breakpoint-up(md) {
+    text-align: left;
+    display: flex;
+    align-items: center;
+    padding-top: $mtvh-spacing-3;
+    padding-bottom: $mtvh-spacing-5;
+    margin: 0;
+  }
+
+  &-text {
+    padding-top: $mtvh-spacing-4;
+    padding-bottom: $mtvh-spacing-3;
+    display: block;
+
+    @include media-breakpoint-up(md) {
+      padding-top: $mtvh-spacing-3;
+      padding-bottom: $mtvh-spacing-5;
+      margin-right: $mtvh-spacing-6;
+    }
+
+  }
+  &-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    margin-bottom: $mtvh-spacing-6;
+
+    span {
+      &:last-child {
+        margin-right: $mtvh-spacing-3;
+      }
+    }
+    @include media-breakpoint-up(md) {
+      margin: 0;
+    }
+  }
+}
+
+.payment-info {
+  padding: $mtvh-spacing-4 $mtvh-spacing-5;
+  border-radius: $border-radius-lg;
+  background-color: var(--#{$prefix}grey-01);
+  font-size: $font-size-xs;
+  @include media-breakpoint-up(md) {
+    font-size: $font-size-sm;
+    padding: $mtvh-spacing-5 $mtvh-spacing-6;
+  }
+}

package/assets/scss/components/_progress-bar.scss

@@ -0,0 +1,29 @@
+.progress {
+  border: 1px solid var(--#{$prefix}purple-05);
+}
+
+
+.progress-container {
+  background-color: var(--#{$prefix}purple-01);
+  padding: $mtvh-spacing-3;
+  button {
+    cursor: pointer;
+  }
+  .fileName {
+    display: flex;
+    align-items: center;
+  }
+  .name {
+    flex: 1 100px;
+    display: flex;
+  }
+  @include media-breakpoint-up("lg") {
+    padding: $mtvh-spacing-5;
+  }
+  .progress {
+    margin-top: $mtvh-spacing-3;
+    @include media-breakpoint-up("lg") {
+      margin-top: $mtvh-spacing-5;
+    }
+  }
+}

package/assets/scss/components/_space-selection.scss

@@ -1,4 +1,10 @@
 fieldset.space-selection {
+  --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
+
+  .form-check {
+    margin-bottom: $mtvh-spacing-4;
+  }
+
   input {
     @extend .btn-check;
   }
@@ -6,7 +12,7 @@ fieldset.space-selection {
   input + label {
     display: flex;
     align-items: center;
-    padding: $mtvh-spacing-3 $mtvh-spacing-6;
+    padding: $mtvh-spacing-3 $mtvh-spacing-5;
     border: 1px solid var(--mtvh-grey-06);
     border-radius: 0.5rem;
     background-color: var(--mtvh-grey-02);
@@ -23,6 +29,10 @@ fieldset.space-selection {
     div {
       flex-direction: column;
     }
+
+    @include media-breakpoint-up(lg) {
+        max-width: 336px;
+    }
   }
 
   input:checked + label {

package/assets/scss/components/_stepper.scss

@@ -9,16 +9,21 @@
 @mixin stepper-small-count {
   counter-increment: count-1;
   content: counter(count);
+  position: absolute;
 }
 @mixin stepper-small-position {
   opacity: 0;
-  position: absolute;
   top: 80px;
   left: 0;
   margin-left: auto;
   text-align: center;
   color: var(--#{$prefix}stepper-sm-font-color);
   width: 100%;
+  min-height: $input-min-height;
+}
+
+@mixin stepper-small-position-active {
+  position: absolute;
 }
 
 .mtvh-stepper {
@@ -51,7 +56,9 @@
     }
   }
 
+
   .mtvh-stepper-item {
+
     align-items: center;
     display: flex;
     justify-content: center;
@@ -68,6 +75,10 @@
       margin-right: 4px;
     }
 
+    &:only-child {
+      color: blue;
+    }
+
     &:has(a + span),
     &:has(span + a),
     &.completed {
@@ -157,9 +168,16 @@
       a {
         opacity: 1;
         @include active-link-style;
+        @include media-breakpoint-down($stepper-breakpoint) {
+          @include stepper-small-position-active;
+        }
       }
     }
   }
+  .mtvh-stepper-item:only-child {
+    border-radius: 50px;
+  }
+
 }
 
 .mtvh-stepper-small {
@@ -169,6 +187,13 @@
     span {
       @include stepper-small-position;
     }
+    &.active {
+      a,
+      span {
+        @include stepper-small-position-active;
+
+      }
+    }
     &:before {
       @include stepper-small-count;
     }