feat(banner): Add mobile-stacked variant support to banner.

PiperOrigin-RevId: 340543964

Author: EstebanG23

packages/mdc-banner/README.md

@@ -172,6 +172,25 @@ Banners may have one or two low-emphasis text buttons.
 </div>
 ```
 
+
+#### Mobile Stacked
+
+On mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:
+
+```html
+<div class="mdc-banner mdc-banner--mobile-stacked">
+  ...
+</div>
+```
+
+Alternatively, you can call the `mobile-stacked` mixin from Sass:
+
+```scss
+.my-banner {
+  @include banner.mobile-stacked;
+}
+```
+
 ## API
 
 ### Sass mixins

packages/mdc-banner/_banner-theme.scss

@@ -21,6 +21,7 @@
 //
 
 @use '@material/feature-targeting/feature-targeting';
+@use '@material/rtl/mixins' as rtl-mixins;
 @use '@material/shape/mixins' as shape-mixins;
 @use '@material/theme/theme';
 @use '@material/theme/theme-color';
@@ -187,6 +188,34 @@ $z-index: 1;
   }
 }
 
+///
+/// Sets the banner content to centered instead of leading.
+///
+@mixin mobile-stacked($query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+
+  @include feature-targeting.targets($feat-structure) {
+    @media (max-width: $mobile-breakpoint) {
+      .mdc-banner__content {
+        flex-wrap: wrap;
+      }
+
+      .mdc-banner__graphic {
+        margin-bottom: 12px;
+      }
+
+      .mdc-banner__text {
+        @include rtl-mixins.reflexive-property(margin, 16px, 8px);
+        padding-bottom: 4px;
+      }
+
+      .mdc-banner__actions {
+        margin-left: auto;
+      }
+    }
+  }
+}
+
 // Sets the z-index of the banner.
 // @param {Number} $z-index
 @mixin z-index($z-index, $query: feature-targeting.all()) {

packages/mdc-banner/_banner.scss

@@ -75,22 +75,8 @@ $_exit-duration: 250ms;
           right: 0;
         }
 
-        .mdc-banner__content {
-          flex-wrap: wrap;
-        }
-
-        .mdc-banner__graphic {
-          margin-bottom: 12px;
-        }
-
         .mdc-banner__text {
-          margin-left: 16px;
-          margin-right: 8px;
-          padding-bottom: 4px;
-        }
-
-        .mdc-banner__actions {
-          margin-left: auto;
+          @include rtl-mixins.reflexive-property(margin, 16px, 36px);
         }
       }
 
@@ -103,6 +89,10 @@ $_exit-duration: 250ms;
       position: relative;
       width: 100%;
     }
+
+    &.mdc-banner--mobile-stacked {
+      @include banner-theme.mobile-stacked($query: $query);
+    }
   }
 
   .mdc-banner--opening,