pfe-card cta alignment

CHANGELOG-prerelease.md

@@ -4,6 +4,7 @@ Tag: [v1.0.0-prerelease.28](https://github.com/patternfly/patternfly-elements/re
 
 - []() fix: adding a mutation observer to pfe-content-set so it works in Angular
 - []() feat: adding a schema to pfe-icon-panel #572
+- []() fix: pfe-card cta alignment #560
 
 ## Prerelease 27 ( 2019-10-25 )
 
@@ -29,6 +30,7 @@ Tag: [v1.0.0-prerelease.27](https://github.com/patternfly/patternfly-elements/re
 - [1f9ec10](https://github.com/patternfly/patternfly-elements/commit/1f9ec10488a4a879d230705c2ea3d783d2df45f6) feat: pfe-cta add wind variant styles
 - [a162a43](https://github.com/patternfly/patternfly-elements/commit/a162a431923d037bf33a8ba0ef77edd9d059a39c) fix: bug in pfe-tab-panel
 
+
 ## Prerelease 25 ( 2019-09-10 )
 
 Tag: [v1.0.0-prerelease.25](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.25)

elements/pfe-card/demo/index.html

@@ -25,6 +25,7 @@
     </noscript>
 
     <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
+    <link href="../dist/pfe-card--lightdom.css" rel="stylesheet">
 
     <style>
       /* For demo only */
@@ -38,6 +39,13 @@
         min-width: 200px;
         width: calc(25% - 32px);
       }
+      .button-series {
+        display: inline-block;
+      }
+      .button-series > *:not(first-child) {
+        display: inline-block;
+        margin-left: 15px;
+      }
 
       h2[slot="pfe-card--header"] {
         font-size: 1.1em;
@@ -53,6 +61,10 @@
         --pfe-card__header--BackgroundColor: #0477a4;
         --pfe-card__header--Color: #fff;
       }
+
+      a {
+        color: var(--pfe-broadcasted--color--ui-link);
+      }
     </style>
 
   </head>
@@ -63,19 +75,26 @@ <h1>&lt;pfe-card&gt;</h1>
       <pfe-card pfe-color="lightest" class="custom-border">
         <h2 slot="pfe-card--header">Lightest card</h2>
         <p>This is the lightest pfe-card and <a href="#">a link</a>.</p>
-        <pfe-cta slot="pfe-card--footer">
-          <a href="#">Learn more</a>
-        </pfe-cta>
+        <div class="button-series" slot="pfe-card--footer">
+          <pfe-cta slot="pfe-card--footer" pfe-priority="secondary">
+            <a href="#">Try</a>
+          </pfe-cta>
+          <pfe-cta pfe-priority="primary">
+            <a href="#">Buy</a>
+          </pfe-cta>
+        </div>
       </pfe-card>
 
       <pfe-card pfe-color="lighter">
         <h2 slot="pfe-card--header">Light card</h2>
         <p>This is the light pfe-card and <a href="#">a link</a>.</p>
         <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
         <p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
-        <pfe-cta slot="pfe-card--footer">
-          <a href="#">Learn more</a>
-        </pfe-cta>
+        <div slot="pfe-card--footer">
+          <pfe-cta pfe-priority="primary">
+            <a href="#">Buy</a>
+          </pfe-cta>
+        </div>
       </pfe-card>
 
       <pfe-card>
@@ -138,7 +157,7 @@ <h2>Imaged card with top & side overflow</h2>
       <pfe-card pfe-color="lighter" class="custom-header-background">
         <h2 slot="pfe-card--header">Imaged card with side overflow + header</h2>
         <img pfe-overflow="top right left" src="https://placekitten.com/500/250"/>
-        <p style="margin-top: 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat porro similique saepe tempora vel! Facilis, porro?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat porro similique saepe tempora vel! Facilis, porro?</p>
         <pfe-cta slot="pfe-card--footer">
           <a href="#">Learn more</a>
         </pfe-cta>

elements/pfe-card/package.json

@@ -19,6 +19,12 @@
     "directory": "elements/pfe-card"
   },
   "main": "./dist/pfe-card.js",
+  "files": [
+    "pfe-card.*js",
+    "pfe-card.*js.map",
+    "pfe-card--lightdom.*css",
+    "pfe-card--lightdom.*css.map"
+  ],
   "scripts": {
     "build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}'",
     "dev": "../../node_modules/.bin/gulp dev",
@@ -29,6 +35,13 @@
       "name": "Mark Caron",
       "email": "mark@redhat.com",
       "url": "https://github.com/markcaron"
+    },
+    {
+      "name": "Kendall Totten"
+    },
+    {
+      "name": "castastrophe",
+      "url": "https://www.github.com/castastrophe"
     }
   ],
   "license": "MIT",

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

@@ -0,0 +1,8 @@
+@import "../../pfe-sass/pfe-sass";
+$LOCAL: card;
+
+@include browser-query(ie11) {
+    pfe-card img[pfe-overflow] {
+        max-width: 100%;
+    }
+}

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

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