@mtvh/mtvh-design-system 0.0.28 → 0.0.29

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

@@ -126,6 +126,9 @@
   &-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 {
@@ -228,9 +231,7 @@
   .mtvh-content-block-bg--#{$state} {
     --#{$prefix}content-block-bg: #{$variable};
     @if ($state == "grey-02" or $state == "yellow-02") {
-      a {
-        color: var(--#{$prefix}black);
-      }
+      --#{$prefix}content-block-bg-link-color: var(--#{$prefix}black);
     }
   }
 }

package/assets/scss/components/_form.scss

@@ -11,8 +11,9 @@
 
 .formio-form {
   @import "../forms/formio";
-  @import "../forms/mtvho_contact_phone";
-  @import "../forms/mtvho_contact_email";
+  @import "../forms/mtvho-contact-phone";
+  @import "../forms/mtvho-contact-email";
+  @import "../forms/mtvh-address";
 }
 
 .mtvh-form,

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

@@ -79,8 +79,11 @@ $icons: (
   "printer":
     '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M5.928 19c-.532 0-.987-.19-1.365-.567a1.859 1.859 0 0 1-.568-1.364v-2.112H1.933c-.532 0-.987-.189-1.365-.567A1.859 1.859 0 0 1 0 13.026v-4.12c0-.824.286-1.52.857-2.086a2.846 2.846 0 0 1 2.081-.85h14.124c.825 0 1.52.283 2.087.85.567.566.851 1.262.851 2.086v4.12c0 .53-.19.986-.568 1.364a1.862 1.862 0 0 1-1.365.567h-2.062v2.112c0 .53-.19.986-.568 1.364a1.862 1.862 0 0 1-1.365.567H5.928Zm-3.995-5.974h2.062v-.078c0-.53.19-.985.568-1.364a1.862 1.862 0 0 1 1.365-.567h8.144c.532 0 .987.19 1.365.568.379.378.568.832.568 1.363v.078h2.062v-4.12a.97.97 0 0 0-.29-.716.978.978 0 0 0-.718-.289H2.94a.978.978 0 0 0-.718.289.97.97 0 0 0-.29.716v4.12Zm12.14-7.056V2.931H5.927V5.97H3.995V2.931c0-.53.19-.986.568-1.364A1.862 1.862 0 0 1 5.928 1h8.144c.532 0 .987.19 1.365.567.379.378.568.833.568 1.364V5.97h-1.933Zm1.984 4.416a.932.932 0 0 0 .683-.283.93.93 0 0 0 .283-.682.93.93 0 0 0-.283-.683.931.931 0 0 0-.683-.283.931.931 0 0 0-.683.283.93.93 0 0 0-.284.683.93.93 0 0 0 .284.682.932.932 0 0 0 .683.283Zm-1.985 6.683v-4.12H5.928v4.12h8.144Z"/></svg>',
   "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>',
+    '<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>',
+  "cheveron-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>',
+  "cheveron-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>'
 );
 
 /**
@@ -676,6 +679,14 @@ $mtvh-icons: (
     height: $icon-size-scale-lg,
     svg-path: "#{$asset-icon-path}mastercard.svg",
   ),
+  "cheveron-up": (
+    width: $icon-size-scale-lg,
+    height: $icon-size-scale-lg
+  ),
+  "cheveron-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/_palette.scss

@@ -46,4 +46,5 @@
 
   --mtvh-stone-01: #f9f5f0;
   --mtvh-stone-02: #f9f2ea;
+  --mtvh-stone-03: #dbaa79;
 }

package/assets/scss/config/_variables.scss

@@ -329,6 +329,37 @@ $badge-themes: (
   ),
 );
 
+
+$icon-color-themes: (
+  "green": (
+    "background": var(--#{$prefix}green-01),
+    "color": var(--#{$prefix}green-03),
+  ),
+  "red": (
+    "background": var(--#{$prefix}red-01),
+    "color": var(--#{$prefix}red-03),
+  ),
+  "grey": (
+    "background": var(--#{$prefix}grey-02),
+    "color": var(--#{$prefix}grey-05),
+  ),
+  "blue": (
+    "background": var(--#{$prefix}blue-01),
+    "color": var(--#{$prefix}blue-03),
+  ),
+  "purple": (
+    "background": var(--#{$prefix}purple-01),
+    "color": var(--#{$prefix}purple-03),
+  ),
+  "yellow": (
+    "background": var(--#{$prefix}yellow-01),
+    "color": var(--#{$prefix}yellow-03),
+  ),
+  "stone": (
+    "background": var(--#{$prefix}stone-01),
+    "color": var(--#{$prefix}stone-03),
+  ),
+);
 $badge-border-radius: 0;
 $badge-padding-x: $mtvh-spacing-1;
 $badge-padding-y: 0;

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

@@ -26,7 +26,7 @@
           @include hover-animate($position: "right");
         }
       }
-      &.m-0 {
+      &.m-0, &.mtvh-icon--circle {
         &:after,
         &:before {
           margin-right: 0;
@@ -43,3 +43,17 @@
     }
   }
 }
+
+.mtvh-icon--circle {
+  @include mtvh-icon-circle($icon-size-scale-md, var(--#{$prefix}icon-background), var(--#{$prefix}icon-colour));
+}
+
+@each $state, $variable in $icon-color-themes {
+  $bg-colour: map-get($variable, "background");
+  $color: map-get($variable, "color");
+
+  .mtvh-icon--circle-#{$state} {
+    --#{$prefix}icon-colour: #{$color};
+    --#{$prefix}icon-background: #{$bg-colour};
+  }
+}

package/assets/scss/forms/_mtvh-address.scss

@@ -0,0 +1,21 @@
+.formio-component-mtvhAddress {
+  label {
+    margin-bottom: $mtvh-spacing-3;
+  }
+
+  select,
+  textarea {
+    @include media-breakpoint-up(lg) {
+      max-width: $input-width-size-xl;
+    }
+  }
+
+   #postCodeSection {
+     .d-flex {
+       align-items: center;
+       > button {
+         margin-left: $mtvh-spacing-4;
+       }
+     }
+   }
+}

package/assets/scss/forms/{_mtvho_contact_email.scss → _mtvho-contact-email.scss}

@@ -2,7 +2,7 @@
   select,
   input {
     @include media-breakpoint-up(lg) {
-      width: 50%;
+      max-width: $input-width-size-xl;
     }
   }
 }

package/assets/scss/forms/{_mtvho_contact_phone.scss → _mtvho-contact-phone.scss}

@@ -2,7 +2,7 @@
   select,
   input {
     @include media-breakpoint-up(lg) {
-      width: 50%;
+      max-width: $input-width-size-xl;
     }
   }
 }

package/assets/scss/mixins/_butttons.scss

@@ -47,33 +47,28 @@
   }
 }
 
-@mixin button-circle() {
+@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;
   border-radius: 50%;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  padding: $mtvh-spacing-4;
+  padding: $padding;
 
   &:focus-visible {
     box-shadow: none;
-    outline: solid var(--#{$prefix}btn-outline-border)
-      var(--#{$prefix}btn-close-focus-outline-color);
+    outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-close-focus-outline-color);
     outline-offset: calc(var(--mtvh-btn-outline-border) * -2);
     text-decoration: none;
     -webkit-tap-highlight-color: unset;
   }
-  &:focus:not(:focus-visible) {
+  &:focus:not(:focus-visible),
+  &:hover,
+  &:active:not(:disabled):not(.disabled) {
     outline: 0;
   }
   &:hover {
     cursor: pointer;
-    outline: 0;
-  }
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.08);
+    background-color: $hover-bg;
   }
   &:active:not(:disabled):not(.disabled) {
-    outline: 0;
-    background-color: rgba(0, 0, 0, 0.16);
+    background-color: $active-bg;
   }
 }

package/assets/scss/mixins/_icon.scss

@@ -126,3 +126,30 @@
     background-size: contain;
   }
 }
+
+
+@mixin mtvh-icon-circle($size, $bg, $color) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  background-color: $bg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $color;
+
+  &.mtvh-icon {
+    &:before,
+    &:after {
+      margin: 0;
+      vertical-align: middle;
+      height: $icon-size-scale-xs;
+      width: $icon-size-scale-xs;
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-size: contain;
+    }
+  }
+}