feat: Add pfe-border styles in a separate PR (#856)

Author: castastrophe

CHANGELOG-prerelease.md

@@ -1,7 +1,8 @@
 ## Prerelese 46 ( TBD )
 
 - [27fee5f](https://github.com/patternfly/patternfly-elements/commit/27fee5f5c5eb021ac126f3767dd0299f5cda8231) fix: pfe-tabs check for tagName on addedNode mutation before continuing
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Add clearfix within tab and accordion panels
+- [2c950b0](https://github.com/patternfly/patternfly-elements/commit/2c950b08f7638787df50aa5ee6738f1205ea3a9d) fix: Add clearfix within tab and accordion panels
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add border to the card component
 
 ## Prerelese 45 ( 2020-04-27 )
 

elements/pfe-card/README.md

@@ -54,6 +54,7 @@ There are several attributes available for customizing the visual treatment of t
 - `pfe-img-src`: Optional background image applied to the entire card container.  Alignment of this image can be managed using the `--pfe-card--BackgroundPosition` variable which is set to `center center` by default.
 - `pfe-size`: Optionally adjusts the padding on the container.  Accepts: `small`.
 - `pfe-overflow`: Optionally allows an image or element to overflow the padding on the container. This property should be added to the direct child of the slotm such as on an image tag; should be added to the element that you want to overflow the container. Accepts: `top`, `right`, `bottom`, `left`.
+- `pfe-border`: Optionally apply a border color and weight to the entire card container. The default color and weight is `#d2d2d2` and `1px`, respectively.
 
 ## Variables
 There are several powerful variables available to hook into and override default styles.

elements/pfe-card/demo/index.html

@@ -87,9 +87,9 @@
     <h1>&lt;pfe-card&gt;</h1>
     <div class="demo-cards">
 
-      <pfe-card pfe-color="lightest" class="custom-border">
+      <pfe-card pfe-color="lightest" pfe-border>
         <h2 slot="pfe-card--header">Lightest card</h2>
-        <p>This is the lightest pfe-card and <a href="#">a link</a>.</p>
+        <p>This is the lightest pfe-card and <a href="#">a link</a> with <code>pfe-border</code>.</p>
         <div class="button-series" slot="pfe-card--footer">
           <pfe-cta slot="pfe-card--footer" pfe-priority="secondary">
             <a href="#">Try</a>

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

@@ -18,7 +18,7 @@ $variables: (
   BorderRadius: pfe-var(surface--border-radius),
 
   //-- Border variable encompasses width, style, and color
-  Border: #{pfe-local(BorderWeight, 0)} #{pfe-local(BorderStyle, solid)} #{pfe-local(BorderColor, transparent)},
+  Border: #{pfe-local(BorderWidth, 0)} #{pfe-local(BorderStyle, solid)} #{pfe-local(BorderColor, #{pfe-color(surface--border)})},
 
   //-- Color properties
   BackgroundColor: pfe-color(surface--base),
@@ -98,6 +98,10 @@ $variables: (
   --pfe-card--PaddingLeft:    #{pfe-var(container-spacer)};
 }
 
+:host([pfe-border]:not([pfe-border="false"])) {
+  --pfe-card--BorderWidth:   #{map-get($pfe-vars, surface--border-width)};
+}
+
 // Targets the wrappers in the shadow DOM
 .pfe-card {
   &__header,

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

@@ -204,6 +204,17 @@ <h2 slot="pfe-card--header">Card 4</h2>
         test("it should have reduced padding when pfe-size is small", () => {
           card[0].setAttribute("pfe-size", "small");
           assert.equal(getComputedStyle(card[0], null)["padding"], "16px");
+          card[0].removeAttribute("pfe-size");
+        });
+
+        test("it should have a standard border when pfe-border is set", done => {
+          card[0].setAttribute("pfe-border", "");
+
+          flush(() => {
+            assert.deepEqual(getColor(card[0], "border-left-color"), hexToRgb("#d2d2d2"));
+            assert.equal(getComputedStyle(card[0], null)["border-left-width"], "1px");
+            done();
+          });
         });
 
         // Iterate over the slots object to test expected results