@mtvh/mtvh-design-system 0.0.35 → 0.0.36

package/assets/scss/components/_all.scss

@@ -22,3 +22,4 @@
 @import "_table";
 @import "_progress-bar";
 @import "_tabs";
+@import "_appointment"

package/assets/scss/components/_appointment.scss

@@ -0,0 +1,89 @@
+.card.appointment-card {
+  border: 1px solid $success;
+  border-radius: $border-radius-lg;
+  --mtvh-card-spacer-y: 0;
+  --mtvh-card-spacer-x: 0;
+
+  .appointment-card-label {
+    background-color: var(--#{$prefix}green-01);
+    border-radius: $border-radius-lg 0 0 $border-radius-lg;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: $mtvh-spacing-6 $mtvh-spacing-7;
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: row;
+      border-radius: $border-radius-lg $border-radius-lg 0 0;
+      align-items: flex-start;
+      padding: $mtvh-spacing-5;
+    }
+  }
+
+  .card-body {
+    @include media-breakpoint-down(sm) {
+      text-align: center;
+    }
+  }
+
+  .appointment-card-title {
+    font-size: $font-size-md;
+    line-height: 1.4;
+    margin-bottom: 0;
+  }
+
+  .small-bold {
+    @include media-breakpoint-down(sm) {
+      padding-left: $mtvh-spacing-3;
+    }
+  }
+
+  .appointment-card-details {
+    padding: $mtvh-spacing-6 $mtvh-spacing-7;
+    display: flex;
+
+    @include media-breakpoint-down(sm) {
+      padding: $mtvh-spacing-5;
+    }
+
+    %p.appointment-text {
+      margin-bottom: 4px;
+    }
+
+    %p.text-secondary {
+      margin-bottom: 0;
+    }
+  }
+
+  .divider {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+
+    @include media-breakpoint-down(sm) {
+      padding: $mtvh-spacing-5;
+    } 
+  }
+
+  .divider::before {
+    content: "";
+    background-color: var(--#{$prefix}grey-04);
+    height: 1px;
+  }
+
+  @include media-breakpoint-up(md) {
+    .divider {
+      width: 1px;
+      align-items: center;
+      height: 100%;
+    }
+
+    .divider::before {
+      width: 1px;
+      height: 100%;
+    }
+  }
+}

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

@@ -140,19 +140,22 @@
   &-icon {
 
     --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
-    &:not(.mtvh-content-block-link-card) {
-      padding: $mtvh-spacing-5;
-      @include media-breakpoint-up(md) {
-        padding: $mtvh-spacing-5 $mtvh-spacing-6;
+    padding: $mtvh-spacing-5;
+    @include media-breakpoint-up(md) {
+      padding: $mtvh-spacing-5 $mtvh-spacing-6;
+    }
+
+    &.d-md-flex {
+      padding-top: $mtvh-spacing-6;
+      @include media-breakpoint-down(md) {
+        padding-top: $mtvh-spacing-5;
       }
     }
 
     .mtvh-icon {
       margin-bottom: $mtvh-spacing-3;
-      height: $icon-size-scale-xl;
       display: block;
     }
-
   }
 
   &-container {
@@ -233,7 +236,7 @@
 @each $state, $variable in $content-block-theme-colors {
   .mtvh-content-block-bg--#{$state} {
     --#{$prefix}content-block-bg: #{$variable};
-    @if ($state == "grey-02" or $state == "yellow-02") {
+    @if ($state == "grey-02" or $state == "yellow-02" or $state == "red-02") {
       a {
         color: var(--#{$prefix}black);
       }

package/assets/scss/components/_status.scss

@@ -28,3 +28,12 @@
     --#{$prefix}badge-background: #{$bg-colour};
   }
 }
+
+.badge--bg-dark {
+  text-transform: none;
+  border-radius: $border-radius-sm;
+  font-weight: normal;
+  line-height: 1.5;
+   --#{$prefix}badge-padding-y: 0;
+   --#{$prefix}badge-padding-x: #{$mtvh-spacing-3};
+}

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

@@ -87,7 +87,9 @@ $icons: (
   "chevron-up":
   '<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" 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>'
+  '<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>',
+  "appointment":
+    '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 20C2.45 20 1.97917 19.8042 1.5875 19.4125C1.19583 19.0208 1 18.55 1 18V4C1 3.45 1.19583 2.97917 1.5875 2.5875C1.97917 2.19583 2.45 2 3 2H4V1C4 0.716667 4.09583 0.479167 4.2875 0.2875C4.47917 0.0958333 4.71667 0 5 0C5.28333 0 5.52083 0.0958333 5.7125 0.2875C5.90417 0.479167 6 0.716667 6 1V2H14V1C14 0.716667 14.0958 0.479167 14.2875 0.2875C14.4792 0.0958333 14.7167 0 15 0C15.2833 0 15.5208 0.0958333 15.7125 0.2875C15.9042 0.479167 16 0.716667 16 1V2H17C17.55 2 18.0208 2.19583 18.4125 2.5875C18.8042 2.97917 19 3.45 19 4V18C19 18.55 18.8042 19.0208 18.4125 19.4125C18.0208 19.8042 17.55 20 17 20H3ZM3 18H17V8H3V18ZM3 6H17V4H3V6ZM10 12C9.71667 12 9.47917 11.9042 9.2875 11.7125C9.09583 11.5208 9 11.2833 9 11C9 10.7167 9.09583 10.4792 9.2875 10.2875C9.47917 10.0958 9.71667 10 10 10C10.2833 10 10.5208 10.0958 10.7125 10.2875C10.9042 10.4792 11 10.7167 11 11C11 11.2833 10.9042 11.5208 10.7125 11.7125C10.5208 11.9042 10.2833 12 10 12ZM6 12C5.71667 12 5.47917 11.9042 5.2875 11.7125C5.09583 11.5208 5 11.2833 5 11C5 10.7167 5.09583 10.4792 5.2875 10.2875C5.47917 10.0958 5.71667 10 6 10C6.28333 10 6.52083 10.0958 6.7125 10.2875C6.90417 10.4792 7 10.7167 7 11C7 11.2833 6.90417 11.5208 6.7125 11.7125C6.52083 11.9042 6.28333 12 6 12ZM14 12C13.7167 12 13.4792 11.9042 13.2875 11.7125C13.0958 11.5208 13 11.2833 13 11C13 10.7167 13.0958 10.4792 13.2875 10.2875C13.4792 10.0958 13.7167 10 14 10C14.2833 10 14.5208 10.0958 14.7125 10.2875C14.9042 10.4792 15 10.7167 15 11C15 11.2833 14.9042 11.5208 14.7125 11.7125C14.5208 11.9042 14.2833 12 14 12ZM10 16C9.71667 16 9.47917 15.9042 9.2875 15.7125C9.09583 15.5208 9 15.2833 9 15C9 14.7167 9.09583 14.4792 9.2875 14.2875C9.47917 14.0958 9.71667 14 10 14C10.2833 14 10.5208 14.0958 10.7125 14.2875C10.9042 14.4792 11 14.7167 11 15C11 15.2833 10.9042 15.5208 10.7125 15.7125C10.5208 15.9042 10.2833 16 10 16ZM6 16C5.71667 16 5.47917 15.9042 5.2875 15.7125C5.09583 15.5208 5 15.2833 5 15C5 14.7167 5.09583 14.4792 5.2875 14.2875C5.47917 14.0958 5.71667 14 6 14C6.28333 14 6.52083 14.0958 6.7125 14.2875C6.90417 14.4792 7 14.7167 7 15C7 15.2833 6.90417 15.5208 6.7125 15.7125C6.52083 15.9042 6.28333 16 6 16ZM14 16C13.7167 16 13.4792 15.9042 13.2875 15.7125C13.0958 15.5208 13 15.2833 13 15C13 14.7167 13.0958 14.4792 13.2875 14.2875C13.4792 14.0958 13.7167 14 14 14C14.2833 14 14.5208 14.0958 14.7125 14.2875C14.9042 14.4792 15 14.7167 15 15C15 15.2833 14.9042 15.5208 14.7125 15.7125C14.5208 15.9042 14.2833 16 14 16Z" fill="#23870B"/></svg>'
 );
 
 /**
@@ -190,6 +192,10 @@ $mtvh-icons: (
   "presentation": (
     width: $icon-size-scale-sm,
     height: $icon-size-scale-sm,
+  ),
+   "appointment": (
+    width: $icon-size-scale-sm,
+    height: $icon-size-scale-sm,
   ),
   "notification": (
     width: $icon-size-scale-md,
@@ -291,6 +297,11 @@ $mtvh-icons: (
     height: $icon-size-scale-xl,
     svg-path: "#{$asset-icon-path}warning-sign-purple.svg",
   ),
+  "warning-sign-white": (
+    width: $icon-size-scale-xl,
+    height: $icon-size-scale-xl,
+    svg-path: "#{$asset-icon-path}warning-sign-white.svg",
+  ),
   "fire": (
     width: $icon-size-scale-xl,
     height: $icon-size-scale-xl,
@@ -343,6 +354,11 @@ $mtvh-icons: (
     height: $icon-size-scale-xl,
     svg-path: "#{$asset-icon-path}info.svg",
   ),
+  "info-yellow": (
+    width: $icon-size-scale-xl,
+    height: $icon-size-scale-xl,
+    svg-path: "#{$asset-icon-path}info-yellow.svg",
+  ),
   "aerosol": (
     width: $icon-size-scale-xl,
     height: $icon-size-scale-xl,

package/assets/scss/config/_variables.scss

@@ -110,23 +110,18 @@ $mtvh-spacing-12: 5rem;
 $spacer: 1rem;
 $spacers: (
   0: 0,
-  1: $spacer * 0.25,
-  2: $spacer * 0.375,
-  3: $spacer,
-  4: $spacer * 1.5,
-  5: $spacer * 3,
-  11: $mtvh-spacing-1,
-  12: $mtvh-spacing-2,
-  13: $mtvh-spacing-3,
-  14: $mtvh-spacing-4,
-  15: $mtvh-spacing-5,
-  16: $mtvh-spacing-6,
-  17: $mtvh-spacing-7,
-  18: $mtvh-spacing-8,
-  19: $mtvh-spacing-9,
-  20: $mtvh-spacing-10,
-  21: $mtvh-spacing-11,
-  22: $mtvh-spacing-12,
+  1: $mtvh-spacing-1,
+  2: $mtvh-spacing-2,
+  3: $mtvh-spacing-3,
+  4: $mtvh-spacing-4,
+  5: $mtvh-spacing-5,
+  6: $mtvh-spacing-6,
+  7: $mtvh-spacing-7,
+  8: $mtvh-spacing-8,
+  9: $mtvh-spacing-9,
+  10: $mtvh-spacing-10,
+  11: $mtvh-spacing-11,
+  12: $mtvh-spacing-12
 );
 
 $icon-size-scale-xs: 16px !default;
@@ -330,6 +325,11 @@ $badge-themes: (
     "background": var(--#{$prefix}white),
     "color": var(--#{$prefix}grey-06),
   ),
+  "bg-dark": (
+    "border": transparent,
+    "background": var(--#{$prefix}grey-06),
+    "color": var(--#{$prefix}white)
+  )
 );
 
 

package/assets/scss/core/typography/_typography.scss

@@ -125,6 +125,12 @@ p {
   line-height: 1.5;
 }
 
+.small-bold {
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: $mtvh-font-weight-bolder;
+}
+
 a {
   outline-color: var(--mtvh-btn-outline-color);
   &:focus-visible {

package/assets/scss/mixins/_icon.scss

@@ -35,6 +35,7 @@
 
       @if $svg-path {
         background-image: url($svg-path);
+        background-size: contain;
       } @else {
         -webkit-mask: get-icon($icon);
         mask: get-icon($icon);
@@ -63,6 +64,7 @@
       @include icon-transform("left");
       @if $svg-path {
         background-image: url($svg-path);
+        background-size: contain;
       } @else {
         -webkit-mask: get-icon($icon);
         mask: get-icon($icon);

package/assets/scss/mtvh.scss

@@ -47,7 +47,7 @@
 @import "bootstrap/scss/button-group";
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/navbar";
-//@import "bootstrap/scss/card";
+@import "bootstrap/scss/card";
 @import "bootstrap/scss/accordion";
 @import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";

package/dist/images/icons/info-yellow.svg

@@ -0,0 +1,6 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.3549 25.1176C54.5425 10.0816 35.0434 -0.568953 22.4502 3.60773C11.2789 8.20208 1.93558 20.3144 3.96674 33.2621C5.99789 46.2098 20.4191 54.9809 35.2465 54.1455C50.0739 53.3102 56.1674 40.1537 55.3549 25.1176Z" fill="white"/>
+<path d="M4.94743 20.7427C2.79307 36.928 9.22418 49.0146 22.7848 52.7818C33.7528 55.8287 49.4989 49.1947 53.7953 39.3439C59.5187 26.2214 53.6177 9.47686 35.5129 6.31871C18.8696 3.41551 6.75564 7.15803 4.94743 20.7427Z" fill="#E8C426"/>
+<path d="M46.3769 25.0806C45.1076 14.2928 32.8905 7.05736 22.101 9.798C13.3743 12.0147 9.49072 20.0702 9.77204 29.2539C10.0821 39.3772 16.6188 47.9518 28.682 47.7338C40.7451 47.5159 47.9212 38.205 46.3769 25.0806Z" fill="white"/>
+<path d="M15.7783 3.81358C32.3135 -2.7588 51.1032 7.82706 54.1416 25.3937C56.7562 40.5136 43.5554 53.5551 29.123 54.7306C15.4183 55.842 2.27305 48.5172 0.458008 34.0929C-0.973114 22.739 4.54406 10.929 14.4268 5.12412C14.6347 4.58853 15.0668 4.09337 15.7783 3.81358ZM37.0625 7.73154C30.6099 4.63718 23.5176 5.0283 16.9131 7.93076C16.6253 8.0586 16.3136 7.98734 16.0498 7.94736C8.34211 12.8887 3.18446 23.4185 3.87988 32.5655C4.73527 43.7416 14.559 51.3439 25.5508 51.3067C37.8398 51.2577 52.1821 41.6005 50.8311 26.6974C50.1754 19.4372 43.707 10.9139 37.0625 7.73154ZM28.4492 21.4913C29.9524 21.2754 31.9113 22.4677 31.2236 24.2667C30.2882 26.7292 29.2005 29.0957 28.1211 31.4942C27.2815 33.3652 26.2189 35.7245 26.083 37.9073C26.6272 38.6819 29.1132 36.6755 29.5449 36.3478C30.6644 35.5002 33.8065 34.2692 33.6709 36.2677C33.391 40.4334 25.1074 46.1505 21.8291 42.3927C19.8382 40.1059 20.6137 36.2202 21.5332 33.6456C22.4207 31.1431 23.6518 28.8561 24.915 26.5694C23.4999 26.8893 22.0842 27.2412 20.6211 27.4171C19.3181 27.5685 18.6304 25.6652 19.5576 24.8497C22.1162 22.6109 25.155 21.9631 28.4492 21.4913ZM26.0176 12.6808C26.6812 12.3609 28.8162 12.1608 29.8477 12.9444C30.743 13.624 31.7585 14.4074 32.0225 15.5665C32.2463 16.5339 32.0305 17.5418 31.2871 18.2374C30.7114 18.7731 29.943 19.0289 29.1914 19.2208C28.7278 19.3407 28.2641 19.3888 27.8164 19.3888C27.8004 19.3968 27.7842 19.4054 27.7842 19.4054H27.7764C26.2892 20.0128 24.6743 19.0048 24.2266 17.5577C23.9787 16.7582 24.0741 15.7827 24.3379 14.9991C24.6337 14.1196 25.1381 13.1046 26.0176 12.6808Z" fill="black"/>
+</svg>

package/dist/images/icons/warning-sign-white.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44">
+  <path fill="#fff" d="M33.37 13.147c-5.63-6.54-8.31-9.257-11.845-8.712-1.312 0-4.596 2.722-6.364 6.715-1.768 3.994-6.187 12.161-8.308 18.695-2.122 6.535.353 8.35 2.121 8.35s10.43.726 16.087 0 17.5-2.541 18.385-6.171c1.114-4.579-3.36-11.072-10.077-18.877Z"/>
+  <path fill="#000" d="M20.167 28.061c.702.989 1.899.885 2.589-.043 1.218-1.642 1.116-4.166 1.029-6.344-.018-.428-.035-.844-.04-1.237-.013-.779-.003-1.56.006-2.34.024-1.91.048-3.82-.25-5.7-.324-2.001-3.462-1.77-3.865.062-.472 2.145-.464 4.406-.457 6.622.001.477.003.952 0 1.423-.003.42-.017.862-.032 1.319-.072 2.146-.153 4.585 1.02 6.226v.012ZM21.931 30.692c.641.14 1.093.372 1.734 1.068l.012-.006c.294.32.3.836.305 1.181.002.144.003.257.025.315.336.915-.452 1.916-1.252 2.398a2.212 2.212 0 0 1-2.66-.299c-.617-.592-1.05-1.507-1.032-2.392.006-.287.073-.556.164-.818.397-1.056 1.49-1.71 2.704-1.447Z"/>
+  <path fill="#000" fill-rule="evenodd" d="M39.316 23.984C36.05 18.276 32.4 12.679 28.377 7.46l-.321-.42c-1.718-2.252-4.218-5.528-7.413-4.714-3.803.965-6.672 5.335-8.662 8.369-.259.391-.165.766-.082 1.1l.015.06c-.44.716-.993 1.522-1.545 2.325-.581.845-1.16 1.688-1.605 2.424-2.801 4.651-5.426 9.125-7.27 14.247-.921 2.563-2.27 7.264.751 9.058 2.066 1.226 5.07 1.275 7.643 1.318.606.01 1.187.02 1.727.044.774.035 1.55.072 2.33.11 8.787.42 17.867.854 26.53-.459 6.654-1.007.922-13.3-1.16-16.938Zm.69 12.678c-.8.134-1.606.238-2.412.323-9.736 1.032-20.388 1.16-30.148.464-.222-.015-.435-.03-.638-.042-2.882-.188-3.84-.25-3.03-3.7.945-4.032 3.215-7.907 5.377-11.599.6-1.025 1.193-2.036 1.746-3.032 1.034-1.863 2.173-3.67 3.312-5.479.515-.817 1.03-1.634 1.535-2.457.467-.51.919-1.044 1.37-1.577 1.197-1.415 2.395-2.829 3.897-3.83 1.026-.683 3.213 2.437 4.225 3.882.157.224.286.408.378.53 2.63 3.51 5.054 7.185 7.404 10.884 2.613 4.102 5.293 8.363 6.996 12.94.022.062.05.134.082.213.304.774.912 2.32-.1 2.486l.005-.006Z" clip-rule="evenodd"/>
+</svg>