feat: add the row attribute so the banner can be stay as a row on mobile

AlaskaAirlines · Jul 9, 2021 · 89f558e · 89f558e
1 parent ae4b243
commit 89f558e
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 23 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -428,6 +428,41 @@ The following example illustrates a `<auro-banner>` custom element with the `rou
 
 </auro-accordion>
 
+## Row
+
+The following example illustrates a `<auro-banner>` custom element with the `row` variant which maintains the row format on mobile instead of the default stacking behavior.
+
+<div class="exampleWrapper">
+  <auro-banner row flipped ratio="1:2">
+    <div slot="content">
+       <auro-header level="2" display="800" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
+    <div style="color:#0b5575; margin-bottom: 1rem">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+    </div>
+    <auro-hyperlink secondary cta href="#" target="_blank" >Reprehenderit</auro-hyperlink>
+    </div>
+      <img slot="graphic"src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="" />
+  </auro-banner>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+<span slot="trigger">See code</span>
+
+```html
+  <auro-banner row flipped ratio="1:2">
+    <div slot="content">
+       <auro-header level="2" display="800" margin="both" size="none" style="color:#0b5575">Lorem ipsum dolor</auro-header>
+    <div style="color:#0b5575; margin-bottom: 1rem">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+    </div>
+    <auro-hyperlink secondary cta href="#" target="_blank" >Reprehenderit</auro-hyperlink>
+    </div>
+      <img slot="graphic"src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="" />
+  </auro-banner>
+  ```
+
+</auro-accordion>
+
 ## Additional Examples
 
 The examples below showcase current or former examples of how the `<auro-banner>` is being used in production to give further context on how to use the it.
@@ -588,9 +623,7 @@ This example showcases a collection of `<auro-icon>` and a description using our
 
 <auro-twocolumn ratio="2:1" gap="24">
   <auro-banner roundedBorder flipped ratio="3:5" slot="left">
-  <div slot="graphic">
-  <img src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="Alaska Airlines Visa Signature card" style="max-width: 100%;">
-  </div>
+  <img slot="graphic"src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="Alaska Airlines Visa Signature card" style="max-width: 100%;">
   <div slot="content">
     <auro-header level="2" display="400" margin="both" size="none">SPECIAL OFFER FOR YOU</auro-header>
     <div style="font-size: .8rem; line-height: 1.25; margin: .25rem 0 .5rem;">
@@ -606,17 +639,15 @@ This example showcases a collection of `<auro-icon>` and a description using our
 
 ```html
 <auro-banner roundedBorder flipped ratio="3:5" slot="left">
-  <div slot="graphic">
-  <img src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="Alaska Airlines Visa Signature card" style="max-width: 100%;">
-  </div>
+  <img slot="graphic"src="https://sitecore-prod-cd-westcentralus.azurewebsites.net/-/media/Images/photos-infographics/credit-card/visa_signature" alt="Alaska Airlines Visa Signature card" style="max-width: 100%;">
   <div slot="content">
     <auro-header level="2" display="400" margin="both" size="none">SPECIAL OFFER FOR YOU</auro-header>
     <div style="font-size: .8rem; line-height: 1.25; margin: .25rem 0 .5rem;">
     Apply today and get a $200 statement credit offer plus a 30,000 bonus mile offer.
     </div>
     <auro-hyperlink secondary cta href="#" target="_blank">Apply now</auro-hyperlink>
   </div>
-  </auro-banner>
+</auro-banner>
 ```
 
 </auro-accordion>

diff --git a/demo/index.html b/demo/index.html
@@ -38,7 +38,7 @@
           Prism.highlightAll();
         });
     </script>
-    <!-- <script type="module" src="../src/auro-banner.js"></script> -->
+    <script type="module" src="../src/auro-banner.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
@@ -47,6 +47,8 @@
     <script src="https://unpkg.com/@alaskaairux/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-header@latest/dist/auro-header__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@aurolabs/auro-background@latest/dist/auro-background__bundled.js" type="module"></script>
-    <script src="https://unpkg.com/@aurolabs/auro-banner@latest/dist/auro-banner__bundled.js" type="module"></script>
+    <!-- <script src="https://unpkg.com/@aurolabs/auro-banner@latest/dist/auro-banner__bundled.js" type="module"></script> -->
+    <script src="https://unpkg.com/@aurolabs/auro-twocolumn@latest/dist/auro-twocolumn__bundled.js" type="module"></script>
+    <script src="https://unpkg.com/@aurolabs/auro-threecolumn@latest/dist/auro-threecolumn__bundled.js" type="module"></script>
   </body>
 </html>
diff --git a/docs/api.md b/docs/api.md
@@ -12,6 +12,7 @@ The auro-card-hero element provides users a flexible way to convey a summary of
 | `overlay`      | `overlay`      | `Boolean` | false                                 | Enables the overlay slot which adds an overlay that sits between the two columns and overlays a graphic |
 | `overlayBg`    | `overlayBg`    | `String`  | "var(--auro-color-brand-neutral-400)" | Sets a background behind the overlay             |
 | `ratio`        | `ratio`        | `String`  | "1:1"                                 | in the format 'X:Y' where 'X' and 'Y' are two integers. |
+| `row`          | `row`          | `Boolean` | false                                 | This setting keeps the row formating for mobile instead of the default stacking behavior. |
 
 ## Slots
 

diff --git a/src/auro-banner.js b/src/auro-banner.js
@@ -20,6 +20,7 @@ import "focus-visible/dist/focus-visible.min.js";
 /**
  * The auro-card-hero element provides users a flexible way to convey a summary of information in various large formats.
  * @attr {Boolean} flipped - The content column will move to the right and the graphic column will move to the left.  No change on mobile.  Graphic still on top and content below.
+ * @attr {Boolean} row - This setting keeps the row formating for mobile instead of the default stacking behavior.
  * @attr {Boolean} onBackground - This setting provides padding around the banner when used on a background color or image.
  * @attr {Boolean} inset - Adds additional padding around the content slot.  Useful when the banner is wrapped in a background color.
  * @attr {Boolean} overlay - Enables the overlay slot which adds an overlay that sits between the two columns and overlays a graphic
@@ -39,6 +40,7 @@ class AuroBanner extends LitElement {
     this.flipped = false;
     this.onBackground = false;
     this.inset = false;
+    this.row = false;
   }
 
   static get properties() {
@@ -55,6 +57,10 @@ class AuroBanner extends LitElement {
         type: Boolean,
         reflect: true,
       },
+      row: {
+        type: Boolean,
+        reflect: true,
+      },
       overlay: {
         type: Boolean,
         reflect: true,

diff --git a/src/style.scss b/src/style.scss
@@ -60,20 +60,6 @@
   max-width: 100%;
 }
 
-:host([flipped]) {
-  .bannerWrapper {
-    @include auro_breakpoint--sm {
-      flex-direction: row-reverse;
-    }
-  }
-
-  .content {
-    @include auro_breakpoint--sm {
-      padding-left: var(--auro-size-xl);
-    }
-  }
-}
-
 :host([overlay]) {
   .content {
     padding-bottom: 6.25rem;
@@ -133,3 +119,42 @@
     border-radius: var(--auro-size-xs);
   }
 }
+
+:host([row]) {
+  .bannerWrapper {
+    flex-direction: row;
+  }
+  .content {
+    padding-left: var(--auro-size-xl);
+  }
+  .graphic {
+    margin-bottom: none;
+  }
+}
+
+:host([flipped]) {
+  .bannerWrapper {
+    @include auro_breakpoint--sm {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .content {
+    @include auro_breakpoint--sm {
+      padding-left: var(--auro-size-xl);
+    }
+  }
+}
+
+:host([row][flipped]) {
+  .bannerWrapper {
+    flex-direction: row-reverse;
+  }
+  .content {
+    padding-right: var(--auro-size-xl);
+  }
+  .graphic {
+    margin-bottom: 0;
+  }
+}
+