fix: pfe-card header and footer slot issues (#861)

Author: kylebuch8

CHANGELOG-prerelease.md

@@ -5,6 +5,7 @@
 
 ## Prerelease 46 ( 2020-05-12 )
 
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-card header and footer slot issues
 - [27fee5f](https://github.com/patternfly/patternfly-elements/commit/27fee5f5c5eb021ac126f3767dd0299f5cda8231) fix: pfe-tabs check for tagName on addedNode mutation before continuing
 - [2c950b0](https://github.com/patternfly/patternfly-elements/commit/2c950b08f7638787df50aa5ee6738f1205ea3a9d) fix: Add clearfix within tab and accordion panels
 - [96f0a1b](https://github.com/patternfly/patternfly-elements/commit/96f0a1bdf9c758650e02b20a63ee3fb2fcf11bc9) feat: Add border to the card component

elements/pfe-card/demo/pfe-card.story.js

@@ -129,7 +129,7 @@ stories.add(PfeCard.tag, () => {
       const ctaPriorityValue = storybookBridge.select(
         "Priority",
         {
-          null: "default",
+          default: null,
           primary: "primary",
           secondary: "secondary"
         },
@@ -154,19 +154,28 @@ stories.add(PfeCard.tag, () => {
   // Trigger the auto generation of the knobs for slots
   config.has = tools.autoContentKnobs(slots, storybookBridge);
 
-  // prettier-ignore
-  config.slots = [{
-    slot: "pfe-card--header",
-    content: tools.customTag({
-      tag: "h3",
-      content: config.has.header
-    })
-  }, {
-    content: (region !== "footer") ? image + config.has.body : config.has.body
-  }, {
-    slot: "pfe-card--footer",
-    content: (region === "footer") ? image : config.has.footer
-  }];
+  config.slots = [];
+
+  if (config.has.header.length > 0) {
+    config.slots.push({
+      slot: "pfe-card--header",
+      content: tools.customTag({
+        tag: "h3",
+        content: config.has.header
+      })
+    });
+  }
+
+  config.slots.push({
+    content: region !== "footer" ? image + config.has.body : config.has.body
+  });
+
+  if (config.has.footer.length > 0) {
+    config.slots.push({
+      slot: "pfe-card--footer",
+      content: region === "footer" ? image : config.has.footer
+    });
+  }
 
   // Some attribute values don't need to be included in the markup
   if (config.prop.color === "base") {

elements/pfe-card/src/pfe-card.html

@@ -1,10 +1,10 @@
 <!-- pfe-card -->
-${ this.has_slot("pfe-card--header") ? `<div class="pfe-card__header">
+<div class="pfe-card__header">
   <slot name="pfe-card--header"></slot>
-</div>` : ``}
+</div>
 <div class="pfe-card__body">
   <slot></slot>
 </div>
-${ this.has_slot("pfe-card--footer") ? `<div class="pfe-card__footer">
+<div class="pfe-card__footer">
   <slot name="pfe-card--footer"></slot>
-</div>` : ``}
+</div>

elements/pfe-card/src/pfe-card.scss

@@ -42,7 +42,7 @@ $variables: (
 
 :host {
   @include pfe-print-variables($variables);
-  
+
   // Broadcasted values set to match background color
   @include pfe-set-broadcast-theme(light);
   --theme: light;
@@ -187,6 +187,10 @@ $variables: (
       --pfe-card__overflow--MarginTop: calc(#{pfe-local(PaddingTop)} * -1);
     }
 
+    :host(:not([has_header])) & {
+      display: none;
+    }
+
     :host([has_body],[has_footer]) & ::slotted([pfe-overflow~="bottom"]) {
       --pfe-card__overflow--MarginBottom: calc(#{pfe-local(spacing--vertical)} * -1);
     }
@@ -218,6 +222,10 @@ $variables: (
     :host([has_footer]) & ::slotted([pfe-overflow~="bottom"]) {
       --pfe-card__overflow--MarginBottom: calc(#{pfe-local(spacing--vertical)} * -1);
     }
+
+    :host(:not([has_footer])) & {
+      margin-bottom: 0;
+    }
   }
   &__footer {
     margin-top: auto; // This allows the footer to move to the very bottom
@@ -231,12 +239,14 @@ $variables: (
     ::slotted([pfe-overflow~="bottom"]) {
       --pfe-card__overflow--MarginBottom: calc(#{pfe-local(PaddingBottom)} * -1);
     }
+
+    :host(:not([has_footer])) & {
+      display: none;
+    }
   }
   &__header,
   &__body {
-    &:not(:last-child) {
-      margin-bottom: #{pfe-local(spacing--vertical)};
-    }
+    margin-bottom: #{pfe-local(spacing--vertical)};
 
     //-- Slotted styles for typography
     // Remove margins from typography inside the slots

elements/pfe-card/test/pfe-card_test.html

@@ -40,6 +40,10 @@ <h2 slot="pfe-card--header">Card 4</h2>
         <p>This is pfe-card.</p>
         <div slot="pfe-card--footer">Text in footer</div>
       </pfe-card>
+
+      <pfe-card id="dynamicHeaderFooter">
+        This is the card
+      </pfe-card>
     </div>
 
     <script>
@@ -176,6 +180,30 @@ <h2 slot="pfe-card--header">Card 4</h2>
           })
         });
 
+        test("it should render a header and footer when content for those slots are added dynamically", done => {
+          const card = document.querySelector("#dynamicHeaderFooter");
+          
+          const header = document.createElement("h2");
+          header.setAttribute("slot", "pfe-card--header");
+          header.textContent = "Card Header";
+
+          const footer = document.createElement("div");
+          footer.setAttribute("slot", "pfe-card--footer");
+          footer.textContent = "This is the footer";
+
+          card.prepend(header);
+          card.appendChild(footer);
+
+          flush(() => {
+            const cardHeaderSlot = card.shadowRoot.querySelector(`slot[name="pfe-card--header"]`);
+            const cardFooterSlot = card.shadowRoot.querySelector(`slot[name="pfe-card--footer"]`);
+
+            assert.equal(cardHeaderSlot.assignedNodes().length, 1);
+            assert.equal(cardFooterSlot.assignedNodes().length, 1);
+            done();
+          });
+        });
+
         // Iterate over the colors object to test expected background color results
         Object.entries(colors).forEach(set => {
           test(`it should have a background color of ${set[1]} when pfe-color is ${set[0]}`, () => {