@gitlab/ui 32.25.0 → 32.29.0

package/src/scss/mixins.spec.scss

@@ -0,0 +1,103 @@
+@import './mixins';
+@import './variables';
+@import 'true';
+
+@include describe('gl-fluid-font-size') {
+  @include it('returns fluid font-size') {
+    @include assert {
+      @include output {
+        @include gl-fluid-font-size(2rem, 3.5rem);
+      }
+      @include expect {
+        @media (min-width: 768px) {
+          // prettier-ignore
+          font-size: calc( 2rem + 1.5 * ((100vw - 768px) / 27));
+        }
+
+        @media (min-width: 1200px) {
+          font-size: 3.5rem;
+        }
+      }
+    }
+  }
+}
+
+@include describe('gl-fluid-line-height') {
+  @include it('returns fluid line-height') {
+    @include assert {
+      @include output {
+        @include gl-fluid-line-height(2rem, 3.5rem);
+      }
+      @include expect {
+        @media (min-width: 768px) {
+          // prettier-ignore
+          line-height: calc( 2rem + 1.5 * ((100vw - 768px) / 27));
+        }
+
+        @media (min-width: 1200px) {
+          line-height: 3.5rem;
+        }
+      }
+    }
+  }
+}
+
+@include describe('gl-media-breakpoint-up') {
+  @include it('returns no media query for xs') {
+    @include assert {
+      @include output {
+        @include gl-media-breakpoint-up(xs) {
+          color: $green-100;
+        }
+      }
+      @include expect {
+        color: $green-100;
+      }
+    }
+  }
+  @include it('returns min-width media query for sm') {
+    @include assert {
+      @include output {
+        @include gl-media-breakpoint-up(sm) {
+          color: $blue-100;
+        }
+      }
+      @include expect {
+        @media (min-width: '576px') {
+          color: $blue-100;
+        }
+      }
+    }
+  }
+}
+
+@include describe('gl-media-breakpoint-down') {
+  @include it('returns max-width media query for lg') {
+    @include assert {
+      @include output {
+        @include gl-media-breakpoint-down(lg) {
+          color: $red-100;
+        }
+      }
+      @include expect {
+        @media (max-width: '991.98px') {
+          color: $red-100;
+        }
+      }
+    }
+  }
+  @include it('returns max-width media query for md') {
+    @include assert {
+      @include output {
+        @include gl-media-breakpoint-down(md) {
+          color: $orange-100;
+        }
+      }
+      @include expect {
+        @media (max-width: '767.98px') {
+          color: $orange-100;
+        }
+      }
+    }
+  }
+}