Merge branch 'master' of github.com:patternfly/patternfly-elements into issue-310/band-layout

Author: castastrophe

elements/pfe-band/README.md

@@ -7,10 +7,35 @@ This container element provides a set of slots in which to render banded content
 All slots other than `pfe-band--body` are optional.  If the slot is not defined, the container tag for it will not be rendered in the template.
 
 - `pfe-band--header`: This slot renders at the top of the container and generally contains the title, headline, and or subheadline content.  Other possible candidates include a set of social sharing links or tags that describe the content below. The recommended tag for this slot is the `header` tag with h-level or p tags contained within it.
-- **Default slot**: This is the default slot and contains the bulk of the content in this element.  Paragraph text or a grid of cards or images might be rendered in this region.  Recommended tag for this slot is the `article` tag. Any content not assigned to a slot will be rendered here.
+- **Default slot**: This unnamed slot should contain the bulk of the content in this element.  The recommended wrapper within this slot is the `article` tag, but a `div` could also work to contain text elements like paragraphs. If you are rendering non-text components such as cards or images, no wrapper is necessary, and these items will make use of the grid layout.  Any content not assigned to a named slot will be rendered here.
 - `pfe-band--footer`: This slot is typically used for calls-to-action or footnotes and is pushed to the bottom of the container.  Recommended tags include `pfe-cta` or `footer`.
 - `pfe-band--aside`: This slot is for content that should be rendered to the right or left of the default slot on desktop.  Asides often contain `pfe-card` or interest forms which provide users a little more information or context for the band.
 
+### Example markup
+```
+<pfe-band>
+    <header slot="pfe-band--header">
+        <h2>Lighter band; no footer</h2>
+    </header>
+
+    <article>
+        <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata dolor sit amet.</p>
+    </article>
+
+    <pfe-card slot="pfe-band--aside">
+        <h3 slot="header">Aside: left body bottom</h3>
+        <p>Ut wisi enim ad minim veniam.</p>
+    </pfe-card>
+
+    <footer slot="pfe-band--footer">
+        <pfe-cta slot="footer" priority="tertiary">
+            <a href="#">Learn more</a>
+        </pfe-cta>
+    </footer>
+</pfe-band>
+```
+
+
 ## Attributes
 
 <style>

elements/pfe-band/demo/index.html

@@ -9,6 +9,7 @@
     <noscript>
       <link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
     </noscript>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
 
     <link href="../../pfelement/pfelement.min.css" rel="stylesheet">
     <link href="../../pfe-layouts/pfe-layouts.css" rel="stylesheet">
@@ -46,19 +47,6 @@
       margin: 0;
     }
 
-    p,
-    h1,
-    h2,
-    h3 {
-      margin-top: 0;
-    }
-
-    p:last-child,
-    h1:last-child,
-    h2:last-child,
-    h3:last-child {
-      margin-bottom: 0;
-    }
     /* Example CSS variable overrides
     :root  {
       --pfe-theme--container-spacer: 4px;
@@ -120,10 +108,12 @@ <h3 slot="header">Aside: right body bottom</h3>
         <h2>Lighter band; no footer</h2>
         <p class="custom-band-summary">Header region, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
       </header>
-      <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-      <pfe-cta priority="tertiary">
-        <a href="#">Learn more</a>
-      </pfe-cta>
+      <article>
+        <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+        <pfe-cta priority="tertiary">
+          <a href="#">Learn more</a>
+        </pfe-cta>
+      </article>
       <pfe-card color="complement" slot="pfe-band--aside">
         <h3 slot="header">Aside: left body bottom</h3>
         <p>Ut wisi enim ad minim veniam.</p>

elements/pfe-band/src/pfe-band.scss

@@ -2,6 +2,20 @@
 
 $LOCAL: band;
 
+%flex-fallback {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    margin-bottom: #{pfe-local(gutter--vertical)};
+}
+
+%grid-layout {
+  display: grid;
+  grid-row-gap: #{pfe-local(gutter--vertical)};
+  grid-column-gap: #{pfe-local(gutter--horizontal)};
+  margin-bottom: 0;
+}
+
 :host {
   display: block;
 
@@ -55,9 +69,7 @@ $LOCAL: band;
 
   // Wrapper sets padding and background visuals
   position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-items: flex-start;
+  @extend %flex-fallback;
 
   // Padding 
   padding: calc(#{pfe-local(Padding--vertical)} / 2)  #{pfe-local(Padding--horizontal)};
@@ -99,48 +111,6 @@ $LOCAL: band;
   --pfe-band--Padding:   calc(#{pfe-local(Padding--vertical)} / 4)  #{pfe-local(Padding--horizontal)};
 }
 
-@each $slot in (default, header, footer, aside) {
-  $slot-name: $slot;
-  $grid-area: "body";
-  @if $slot != default {
-    $slot-name: "pfe-band--#{$slot-name}";
-    $grid-area: $slot;
-  }
-  .pfe-band__#{$grid-area} {
-    // Set up the flex styles for each region
-    display:     flex;
-    flex-flow:   column nowrap;
-    align-items: flex-start;
-    // Grid support styles
-    @supports (display: grid) {
-      grid-area: #{$grid-area};
-      // Set up the internal grid system for each slot
-      display: grid;
-      grid-row-gap: #{pfe-local(gutter--vertical)};
-      grid-column-gap: #{pfe-local(gutter--horizontal)};
-      grid-template-columns: #{pfe-local(
-        $cssvar: layout,
-        $region: $grid-area
-      )};
-    }
-  }
-  @include pfe-slot($slot-name, ":not(:last-child)") {
-    margin-bottom: #{pfe-local(gutter--vertical)};
-    @supports (display: grid) {
-      margin-bottom: 0;
-    }
-  }
-  @include pfe-slot($slot-name, "> *") {
-    margin: 0;
-  }
-  @include pfe-slot($slot-name, "> *:not(:last-child)") {
-    margin-bottom: #{pfe-local(gutter--vertical)};
-    @supports (display: grid) {
-      margin-bottom: 0;
-    }
-  }
-}
-
 .pfe-band {
   &__container {
     // Does not need to be wrapped in @supports because it updates variables
@@ -288,12 +258,11 @@ $LOCAL: band;
     margin:    0 auto;
     width: 100%;
     max-width: #{pfe-local(Width)};
-    
+    @extend %flex-fallback;
+
     // Grid support styles
     @supports (display: grid) {
-      display:               grid;
-      grid-row-gap:          #{pfe-local(gutter--vertical)};
-      grid-column-gap:       #{pfe-local(gutter--horizontal)};
+      @extend %grid-layout;
       grid-template-columns: #{pfe-local(layout)};
       grid-template-rows:    max-content;
       grid-template-areas:   var(--pfe-band--gridTemplateArea_mobile);
@@ -302,4 +271,18 @@ $LOCAL: band;
       }
     }
   }
+  // For each section in the band layout
+  @each $section in (header, body, aside, footer) {
+    &__#{$section} { // i.e., pfe-band__header
+      @extend %flex-fallback; // Add the flex fallback styles
+      // Apply the standard grid
+      @supports (display: grid) {
+          @extend %grid-layout;
+          // Apply the section as a named grid-area
+          grid-area: #{$section};
+          // Allow users to hook into the layout with custom columns
+          grid-template-columns: var(--pfe-band__#{$section}--layout);
+      }
+    }
+  }
 }

elements/pfe-sass/mixins/_mixins.scss

@@ -142,19 +142,3 @@
 @mixin pfe-define-vars($this-component-var, $this-theme-var, $this-fallback) {
   --pfe-local-#{$this-component-var}: var(--pfe-#{$this-component-var}, var(--pfe-theme--#{$this-theme-var}, #{$this-fallback}));
 }
-
-// Mixin for building slot selectors
-@mixin pfe-slot($slot-name, $selector: "") {
-  // This logic makes it much easier to style default slots in a loop
-  // with named slots
-  @if $slot-name != default {
-    ::slotted([slot="#{$slot-name}"]#{$selector}) {
-      @content;
-    }
-  }
-  @else {
-    ::slotted(*) {
-      @content;
-    }
-  }
-}