Feat(web): Add responsive variants to breakout-container helper #DS-1386

packages/web/src/scss/helpers/breakout/_breakout.scss

@@ -1,3 +1,35 @@
-.breakout-container {
-    margin-inline: calc(-1 * var(--container-padding-inline));
+@use 'sass:map';
+@use '../../tools/breakpoint';
+@use '@tokens' as tokens;
+
+@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
+    $suffix: breakpoint.get-modifier('suffix', $breakpoint-name, $breakpoint-value);
+
+    @include breakpoint.up($breakpoint-value) {
+        .breakout-container#{$suffix} {
+            margin-inline: calc(-1 * var(--container-padding-inline));
+        }
+    }
+}
+
+$previous-breakpoint: (
+    name: '',
+    value: 0,
+);
+
+@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
+    @if map.get($previous-breakpoint, name) != '' {
+        @include breakpoint.up(map.get($previous-breakpoint, value)) {
+            @include breakpoint.down($breakpoint-value) {
+                .breakout-container-#{map.get($previous-breakpoint, name)}-only {
+                    margin-inline: calc(-1 * var(--container-padding-inline));
+                }
+            }
+        }
+    }
+
+    $previous-breakpoint: (
+        name: $breakpoint-name,
+        value: $breakpoint-value,
+    );
 }

packages/web/src/scss/helpers/breakout/index.html

@@ -8,6 +8,14 @@ <h2 class="docs-Heading">Breakout</h2>
 
     <div class="breakout-container docs-Box">Break out of Container</div>
 
+    <div class="breakout-container-tablet docs-Box">Break out of Container from Tablet</div>
+
+    <div class="breakout-container-desktop docs-Box">Break out of Container from Desktop</div>
+
+    <div class="breakout-container-mobile-only docs-Box">Break out of Container only on Mobile</div>
+
+    <div class="breakout-container-tablet-only docs-Box">Break out of Container only on Tablet</div>
+
   </div>
 
 </section>