Add unit tests for new breakpoint functions

packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss

@@ -1,6 +1,6 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-@include post.between(sm, lg) {
+@include post.media-breakpoint-between(sm, lg) {
   .custom-class {
     display: block; // Show the element on screens between 600px and 1024px
   }

packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss

@@ -1,6 +1,6 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-@include post.max(lg) {
+@include post.media-breakpoint-down(lg) {
   .custom-class {
     display: none; // Hide the element on screens narrower than 1024px
   }

packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss

@@ -4,7 +4,7 @@
   display: none; // By default, this element is hidden
 }
 
-@include post.min(lg) {
+@include post.media-breakpoint-up(lg) {
   .custom-class {
     display: block; // On screens 1024px or wider, this element is shown
   }

packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss

@@ -1,6 +1,6 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-@include post.only(md) {
+@include post.media-breakpoint-only(md) {
   .custom-class {
     display: block; // Show this element only on medium screens (≥780px and <1024px)
   }

packages/styles/src/components/topic-teaser.scss

@@ -13,7 +13,6 @@
 @use './../mixins/icons' as icons-mx;
 
 .topic-teaser {
-
   &:not(.topic-teaser-reverse) {
     @each $breakpoint in topic-teaser.$grid-breakpoints-upper {
       @include media-breakpoint-only($breakpoint) {

packages/styles/src/functions/_breakpoint.scss

@@ -10,6 +10,10 @@
     @error 'Breakpoint #{$breakpoint} does not exist.';
   }
 
+  @if ($index == list.length($breakpoints)) {
+    @return null;
+  }
+
   @return list.nth($breakpoints, $index + 1);
 }
 

packages/styles/src/layout/index.scss

@@ -41,7 +41,7 @@ tokens.$default-map: layout.$post-grid;
 }
 
 @each $breakpoint, $device-size in breakpoints.$grid-breakpoints {
-  @include media.min($breakpoint) {
+  @include media.media-breakpoint-up($breakpoint) {
     $infix: if($device-size == 0, '', '-#{$breakpoint}');
 
     .col#{$infix} {

packages/styles/src/layout/temp/_tokens.scss

@@ -20,15 +20,15 @@ $_post-grid-desktop: (
 );
 
 :root {
-  @include media.max(sm) {
+  @include media.media-breakpoint-down(sm) {
     @include tokens.from($_post-grid-mobile);
   }
 
-  @include media.between(sm, lg) {
+  @include media.media-breakpoint-between(sm, lg) {
     @include tokens.from($_post-grid-tablet);
   }
 
-  @include media.min(lg) {
+  @include media.media-breakpoint-up(lg) {
     @include tokens.from($_post-grid-desktop);
   }
 }

packages/styles/src/mixins/_media.scss

@@ -1,24 +1,24 @@
 @use '../functions/breakpoint';
 
-@mixin min($breakpoint) {
+@mixin media-breakpoint-up($breakpoint) {
   @media screen and (min-width: breakpoint.min-width($breakpoint)) {
     @content;
   }
 }
 
-@mixin max($breakpoint) {
+@mixin media-breakpoint-down($breakpoint) {
   @media screen and (max-width: breakpoint.max-width($breakpoint)) {
     @content;
   }
 }
 
-@mixin between($breakpoint-min, $breakpoint-max) {
+@mixin media-breakpoint-between($breakpoint-min, $breakpoint-max) {
   @media screen and (min-width: breakpoint.min-width($breakpoint-min)) and (max-width: breakpoint.max-width($breakpoint-max)) {
     @content;
   }
 }
 
-@mixin only($breakpoint) {
+@mixin media-breakpoint-only($breakpoint) {
   @media screen and (min-width: breakpoint.min-width($breakpoint)) and (max-width: breakpoint.max-width($breakpoint)) {
     @content;
   }

packages/styles/src/themes/bootstrap/_core.scss

@@ -9,6 +9,5 @@
 // Optional Sass map overrides here
 
 @import 'bootstrap/scss/maps';
-@import 'bootstrap/scss/mixins';
 
 @import './overrides-mixins';

packages/styles/src/themes/bootstrap/_overrides-mixins.scss

@@ -1,5 +1,40 @@
 @use './../../variables/components/tooltips';
 
+@import 'bootstrap/scss/vendor/rfs';
+
+// Deprecate
+@import 'bootstrap/scss/mixins/deprecate';
+
+// Helpers
+@import 'bootstrap/scss/mixins/color-mode';
+@import 'bootstrap/scss/mixins/color-scheme';
+@import 'bootstrap/scss/mixins/image';
+@import 'bootstrap/scss/mixins/resize';
+@import 'bootstrap/scss/mixins/visually-hidden';
+@import 'bootstrap/scss/mixins/reset-text';
+@import 'bootstrap/scss/mixins/text-truncate';
+
+// Utilities
+@import 'bootstrap/scss/mixins/utilities';
+
+// Components
+@import 'bootstrap/scss/mixins/backdrop';
+@import 'bootstrap/scss/mixins/buttons';
+@import 'bootstrap/scss/mixins/caret';
+@import 'bootstrap/scss/mixins/pagination';
+@import 'bootstrap/scss/mixins/lists';
+@import 'bootstrap/scss/mixins/forms';
+@import 'bootstrap/scss/mixins/table-variants';
+
+// Skins
+@import 'bootstrap/scss/mixins/border-radius';
+@import 'bootstrap/scss/mixins/box-shadow';
+@import 'bootstrap/scss/mixins/gradients';
+@import 'bootstrap/scss/mixins/transition';
+
+// Layout
+@import 'bootstrap/scss/mixins/clearfix';
+
 // Keep this mixin override: it is necessary to clear Bootstrap styles for .is-(in)valid and .(in)valid-feedback
 @mixin form-validation-state(
   $state,

packages/styles/src/tokens/_device.scss

@@ -5,15 +5,15 @@
 @use './../mixins/media';
 
 :root {
-  @include media.max(sm) {
+  @include media.media-breakpoint-down(sm) {
     @include tokens.from(device.$post-mobile);
   }
 
-  @include media.between(sm, lg) {
+  @include media.media-breakpoint-between(sm, lg) {
     @include tokens.from(device.$post-tablet);
   }
 
-  @include media.min(lg) {
+  @include media.media-breakpoint-up(lg) {
     @include tokens.from(device.$post-desktop);
   }
 }

packages/styles/src/utilities/_mixins.scss

@@ -14,7 +14,7 @@
     @if ($min-width == 0) {
       @include generate-utilities($properties, $value, $prefix, $suffix);
     } @else {
-      @include media.min($breakpoint) {
+      @include media.media-breakpoint-up($breakpoint) {
         $infix: '-#{$breakpoint}';
         @include generate-utilities($properties, $value, $prefix, $suffix, $infix);
       }

packages/styles/src/variables/components/_stepper.scss

@@ -35,4 +35,3 @@ $stepper-link-color: var(--post-gray-60);
 
 $stepper-link-current-color: var(--post-gray-80);
 $stepper-link-current-font-weight: type.$font-weight-bold;
-

packages/styles/tests/functions/breakpoint.test.scss

@@ -0,0 +1,16 @@
+@use 'tests/jest';
+@use 'sass:map';
+@use 'src/functions/breakpoint';
+@use 'src/variables/breakpoints';
+
+// it should return the next available breakpoint
+@include jest.equal(lg, breakpoint.next(md));
+
+// it should return null if the breakpoint is the last one available
+@include jest.equal(null, breakpoint.next(xl));
+
+// it should return the min-width corresponding to the breakpoint
+@include jest.equal(map.get(breakpoints.$grid-breakpoints, sm), breakpoint.min-width(sm));
+
+// it should return the max-width corresponding to the breakpoint
+@include jest.equal(map.get(breakpoints.$grid-breakpoints, sm) - 0.01, breakpoint.max-width(xs));