@mtvh/mtvh-design-system 0.0.11 → 0.0.12

package/assets/scss/components/_all.scss

@@ -7,3 +7,4 @@
 @import '_list-group';
 @import '_stepper';
 @import '_banner';
+@import '_status';

package/assets/scss/components/_banner.scss

@@ -33,6 +33,7 @@
 
   --#{$prefix}banner-padding-y :#{$mtvh-spacing-3};
   --#{$prefix}banner-padding-x : 0;
+
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -84,7 +85,7 @@
 
 
 @each $state, $variable in $banner-theme-colors {
-  .mtvh-banner-#{$state} {
+  .mtvh-banner--#{$state} {
     --#{$prefix}banner-text-color: var(--#{$prefix}black);
     --#{$prefix}border-color: var(--#{$prefix}black);
     --#{$prefix}banner-bg: #{$variable};

package/assets/scss/components/_close.scss

@@ -34,7 +34,7 @@
 }
 
 @each $state in map-keys($banner-theme-colors) {
-  .mtvh-banner-#{$state} {
+  .mtvh-banner--#{$state} {
       --#{$prefix}btn-close-focus-outline-color: var(--#{$prefix}dark-outline-color);
       --#{$prefix}btn-close-hover-bg-color:  var(--#{$prefix}btn-close-#{$state}-hover-bg);
   }

package/assets/scss/components/_form.scss

@@ -5,7 +5,8 @@
   @import "../forms/labels";
   @import "../forms/validation";
   @import "../forms/formio";
-  @import "../forms/form-date-input"; 
+  @import "../forms/form-date-input";
+  @import "../forms/input-group";
 
   --#{$prefix}form-padding-y: #{$mtvh-spacing-7};
   --#{$prefix}form-padding-x: #{$mtvh-spacing-4};

package/assets/scss/components/_status.scss

@@ -0,0 +1,24 @@
+.badge {
+  background-color: var(--#{$prefix}badge-background);
+  border-color: var(--#{$prefix}badge-border-color);
+  color: var(--#{$prefix}badge-color);
+  border: 2px solid var(--#{$prefix}badge-border-color);
+  text-transform: uppercase;
+  line-height: 1.25;
+  @include media-breakpoint-up(lg) {
+    --#{$prefix}badge-padding-x: #{$mtvh-spacing-2};
+    --#{$prefix}badge-padding-y: #{$mtvh-spacing-1};
+  }
+}
+
+@each $state, $variable in $badge-themes {
+  $bg-colour: map-get($variable, "background");
+  $border-color: map-get($variable, "border");
+  $color: map-get($variable, "color");
+
+  .badge--#{$state} {
+      --#{$prefix}badge-color: #{$color};
+      --#{$prefix}badge-border-color: #{$border-color};
+      --#{$prefix}badge-background: #{$bg-colour};
+  }
+}

package/assets/scss/config/_variables.scss

@@ -257,3 +257,71 @@ $content-block-theme-border: (
   "yellow-03": var(--#{$prefix}yellow-03)
 );
 
+$badge-themes: (
+  "primary" : (
+    "border" : transparent,
+    "background" :  var(--#{$prefix}blue-03),
+    "color" :  var(--#{$prefix}black),
+  ),
+  "secondary" : (
+    "border" :  transparent,
+    "background" : var(--#{$prefix}grey-05),
+    "color" : var(--#{$prefix}black),
+  )
+  ,
+  "success" : (
+    "border" : transparent,
+    "background" : var(--#{$prefix}green-03),
+    "color" : var(--#{$prefix}black),
+  ),
+  "danger" : (
+    "border" : transparent,
+    "background" : var(--#{$prefix}red-03),
+    "color" : var(--#{$prefix}black),
+  ),
+  "warning" : (
+    "border" : transparent,
+    "background" : var(--#{$prefix}yellow-03),
+    "color" : var(--#{$prefix}black),
+  ),
+  "info" : (
+    "border" : transparent,
+    "background" :var(--#{$prefix}purple-03),
+    "color" : var(--#{$prefix}black),
+  ),
+  "danger-light" : (
+    "border" : transparent,
+    "background" : var(--#{$prefix}red-02),
+    "color" : var(--#{$prefix}black),
+  ),
+  "outline-dark" : (
+    "border" : var(--#{$prefix}black),
+    "background" : transparent,
+    "color" : var(--#{$prefix}black),
+  ),
+  "outline-success" : (
+    "border" : var(--#{$prefix}green-04),
+    "background" : var(--#{$prefix}white),
+    "color" : var(--#{$prefix}green-04)
+  ),
+  "outline-info" : (
+    "border" : var(--#{$prefix}purple-04),
+    "background" : var(--#{$prefix}white),
+    "color" : var(--#{$prefix}purple-04)
+  ),
+  "outline-danger" : (
+    "border": var(--#{$prefix}red-04),
+    "background" : var(--#{$prefix}white),
+    "color": var(--#{$prefix}red-04),
+  ),
+  "outline-light" : (
+    "border" : var(--#{$prefix}grey-06),
+    "background" : var(--#{$prefix}white),
+    "color" :  var(--#{$prefix}grey-06)
+  )
+);
+
+$badge-border-radius: 0;
+$badge-padding-x: $mtvh-spacing-1;
+$badge-padding-y: 0;
+$badge-font-size: $mtvh-base-font-size;

package/assets/scss/forms/input-group.scss

@@ -0,0 +1,3 @@
+.input-group-text {
+  border-radius: 0.25rem 0 0  0.25rem ;
+}

package/assets/scss/mixins/_form.scss

@@ -8,6 +8,7 @@
   position: relative;
   display: flex;
   gap: $mtvh-spacing-3;
+  margin: 0;
   &:before {
     content: '';
     -webkit-mask: get-icon('error',$danger);