feat(banner): Update content to be leading as default and add support…

… for optional centered.

BREAKING CHANGE: Dom structure change, see README.md

PiperOrigin-RevId: 332891202

packages/mdc-banner/README.md

@@ -71,6 +71,26 @@ const banner = new MDCBanner(document.querySelector('.mdc-banner'));
 
 ### Variants
 
+#### Centered
+
+By default, banners are positioned as leading.
+
+They can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:
+
+```html
+<div class="mdc-banner mdc-banner--centered">
+  ...
+</div>
+```
+
+Alternatively, you can call the `position-centered` mixin from Sass:
+
+```scss
+.my-banner {
+  @include banner.position-centered;
+}
+```
+
 #### Banner with graphic
 
 Images can help communicate a banner’s message.

packages/mdc-banner/_banner-theme.scss

@@ -157,3 +157,19 @@ $mobile-breakpoint: 480px;
     }
   }
 }
+
+///
+/// Sets the banner content to centered instead of leading.
+///
+@mixin position-centered($query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+
+  .mdc-banner__content {
+    @include feature-targeting.targets($feat-structure) {
+      left: 0;
+      margin-left: auto;
+      margin-right: auto;
+      right: 0;
+    }
+  }
+}

packages/mdc-banner/_banner.scss

@@ -71,7 +71,6 @@ $_exit-duration: 250ms;
       box-sizing: border-box;
       display: none;
       height: 0;
-      justify-content: center;
       position: relative;
       width: 100%;
     }
@@ -113,15 +112,15 @@ $_exit-duration: 250ms;
     }
   }
 
+  .mdc-banner--centered {
+    @include banner-theme.position-centered($query: $query);
+  }
+
   .mdc-banner__content {
     @include feature-targeting.targets($feat-structure) {
       display: flex;
-      left: 0;
-      margin-left: auto;
-      margin-right: auto;
       min-height: 52px;
       position: absolute;
-      right: 0;
       transform: translateY(-100%);
       width: 720px;
     }