patternfly · castastrophe · Oct 28, 2019 · Nov 18, 2019 · Nov 18, 2019 · Nov 18, 2019
diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
@@ -1,5 +1,6 @@
 # 1.11.0 (2021)
 
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Adding variable hooks for pfe-card, overlay region
 - [d3ea7fa](https://github.com/patternfly/patternfly-elements/commit/d3ea7facb0c36b7f3e20e2568bdc4bf2e5a5a852) feat: Graceful failure for component registry
 - [](https://github.com/patternfly/patternfly-elements/commit/) fix: Accordion alignment with latest design kit
 - [5f88c39](https://github.com/patternfly/patternfly-elements/commit/5f88c3963f8a6c13a9aeba6e9f664678453d46ce) fix: Jump links parseInt for IE11
@@ -15,7 +16,6 @@
 - [c9c3b56](https://github.com/patternfly/patternfly-elements/commit/c9c3b5654ac05875eabfce0727c54af183e4ac09) chore: Minor testing updates
 - [af4bc70](https://github.com/patternfly/patternfly-elements/commit/af4bc7063b995c316320f6df706b744133f1753d) feat: Jump links navigation rework to support panel customizations and elements in separate DOMs; horizontal designs aligned to kit
 
-
 # 1.9.3 (2021-06-16)
 
 - [b7fc80d](https://github.com/patternfly/patternfly-elements/commit/b7fc80d3417eb14be519c6e37895fcff639d1bbd) fix: set margin-top for ctas in footer on mobile

diff --git a/brand/styles.css b/brand/styles.css
@@ -21,6 +21,8 @@ pfe-card .img-link {
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    height: 100%;
 }
 
 pfe-card h2 {

diff --git a/docs/_data/todos.json b/docs/_data/todos.json
diff --git a/elements/pfe-band/README.md b/elements/pfe-band/README.md
@@ -87,7 +87,7 @@ The aside settings have defaults and if no attribute is defined on the element's
 There are several powerful variables available to hook into and override default styles.
 
 - **Vertical and horizontal padding**: `--pfe-band--Padding--vertical` and `--pfe-band--Padding--horizontal` accept size values such as px, em, rem, etc.
-- **Background color**: Though using the `pfe-color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable.  If you update this value manually, you should also update the `--context` context variable to invoke the right context on it and it's child elements.  Supported contexts include: `light`, `dark`, and `saturated`.
+- **Background color**: Though using the `color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable.  If you update this value manually, you should also update the `--context` context variable to invoke the right context on it and it's child elements.  Supported contexts include: `light`, `dark`, and `saturated`.
 - **Background position**: This is designed for use with the `pfe-img-src` attribute to allow you to align your background image.  Default value is `center center`.
 - **Border**: This allows the customization of a border around the entire container and is primarily designed to be used to add a top and/or bottom border line.  This variable accepts the entire border shorthand and is set to transparent by default.
 - **Layout**: The band has a rudimentary layout system designed to be used inside the slot regions for the header, body, footer, and aside (see `use-grid` attribute details above). The regions themselves are also wrapped in a grid system that supports customization. All layouts appears "stacked" by default. Please note that the fallback for older browsers is a simple stacked layout (the aside position will be aligned using floats). Possible values include: `1fr 1fr`, `repeat(3, 1fr)`, `repeat(auto-fill, minmax(300px, 1fr))`. i.e., `--pfe-band--layout: repeat(auto-fill, minmax(300px, 1fr));`.

diff --git a/elements/pfe-band/src/pfe-band.js b/elements/pfe-band/src/pfe-band.js
@@ -181,6 +181,8 @@ class PfeBand extends PFElement {
 
   // Update the background image
   _imgSrcChanged(oldVal, newVal) {
+    if (oldVal === newVal) return;
+
     // Set the image as the background image
     this.style.backgroundImage = newVal ? `url('${newVal}')` : ``;
   }

diff --git a/elements/pfe-card/README.md b/elements/pfe-card/README.md
@@ -13,16 +13,16 @@
 ```
 
 ## Slots
-All slots are optional.  If the slot is not defined, the content will be added to the `body` region of the card.
+All slots are optional. If the slot is not defined, the content will be added to the `body` region of the card.
 
 ### Header
-If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).  An icon, svg, or use of the icon component are also valid in this region.
+If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6). An icon, svg, or use of the icon component are also valid in this region.
 
 ### Default slot (body)
 Any content that is not designated for the `header` or `footer` slot, will go to this slot.
 
 ### Footer
-Use this slot for anything that you want to be stuck to the base of the card.  This region is bottom-aligned.
+Use this slot for anything that you want to be stuck to the base of the card. This region is bottom-aligned.
 
 ## Attributes
 
@@ -59,10 +59,67 @@ There are several attributes available for customizing the visual treatment of t
 ## Variables
 There are several powerful variables available to hook into and override default styles.
 
-- **Background color**: Though using the `pfe-color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable.  If you update this value manually, you should also update the `--context` context variable to invoke the right context on it and it's child elements.  Supported contexts include: `light`, `dark`, and `saturated`.
-- **Background position**: This is designed for use with the `pfe-img-src` attribute to allow you to align your background image.  Default value is `center center`. **Variable name:** `--pfe-card--BackgroundPosition`.
-- **Border**: This allows the customization of a border around the entire container.  There is a variable for the entire border shorthand (transparent by default) or you can hook into the individual properties. **Variable name:** `--pfe-card--BorderRadius` and `--pfe-card--Border` or `--pfe-card--BorderWeight`, `--pfe-card--BorderStyle`, `--pfe-card--BorderColor`.
-- **Padding**: You can customize the padding around the outside of the card container by connecting to either the shortcut padding variable or just one or more of the individual padding regions. **Variable names:** `--pfe-card--Padding` or `--pfe-card--PaddingTop`, `--pfe-card--PaddingRight`, `--pfe-card--PaddingBottom`, `--pfe-card--PaddingLeft`.
+- **Background color**: Though using the `color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable. If you update this value manually, you should also update the `--context` variable to invoke the right context on it and it's child elements. Supported contexts include: `light`, `dark`, and `saturated`.
+- **Background position**: This is designed for use with the `img-src` attribute to allow you to align your background image. Default value is `center center`.
+- **Border**: This allows the customization of a border around the entire container. There is a variable for the entire border shorthand (transparent by default) or you can hook into the individual properties. There is also a separate `border-top` property which is available to add an emphasis border at the top of the card; typically that would consist of setting the variable as follows: `--pfe-card--BorderTop: 4px solid #ee00`.
+- **Padding**: You can customize the padding around the outside of the card container by connecting to either the shortcut padding variable or just one or more of the individual padding regions. If you add a header slot to the card, note that the `padding-top` value will not be used, but rather, the `spacing--vertical` value; this is to maintain consistent padding around the text inside the card header.
+- **Spacing**: Spacing controls the internal padding for the card. There is a `spacing--vertical` property which controls spacing between regions of the card (header, body, footer) and a `spacing--horizontal` which controls spacing between items in the footer region.
+
+| Variable name | Fallback |
+| --- | --- |
+| **Display properties** |
+| `--pfe-card--AlignSelf` | stretch |
+| `--pfe-card--context` | `var(--pfe-theme--color--surface--base--context, light)` |
+| **Padding/spacing properties** |
+| `--pfe-card--PaddingTop` | `calc(--pfe-theme--container-spacer, 1rem) * 2` |
+| `--pfe-card--PaddingRight` | `calc(--pfe-theme--container-spacer, 1rem) * 2)` |
+| `--pfe-card--PaddingBottom` | `calc(--pfe-theme--container-spacer, 1rem) * 2)` |
+| `--pfe-card--PaddingLeft` | `calc(--pfe-theme--container-spacer, 1rem) * 2)` |
+| `--pfe-card--Padding` | Combination of the top, right, bottom, and left properties above |
+| `--pfe-card--region--spacing` | `var(--pfe-theme--container-spacer, 1rem)` |
+| `--pfe-card--spacing--vertical` | `var(--pfe-theme--content-spacer, 1.5rem)` |
+| `--pfe-card--spacing--horizontal` | `calc(var(--pfe-theme--content-spacer, 1.5rem) / 2)` |
+| **Border properties** |
+| `--pfe-card--BorderRadius` | `var(--pfe-theme--surface--border-radius, 3px)` |
+| `--pfe-card--BorderWidth` | 0 |
+| `--pfe-card--BorderStyle` | solid |
+| `--pfe-card--BorderColor` | var(--pfe-theme--color--surface--border, #d2d2d2) |
+| `--pfe-card--Border` | `--pfe-card--BorderWidth`, `--pfe-card--BorderStyle`, `--pfe-card--BorderColor` |
+| `--pfe-card--BorderTop` | `--pfe-card--Border` |
+| **Background properties** |
+| `--pfe-card--BackgroundColor` | `var(--pfe-theme--surface--base, #f0f0f0)` |
+| `--pfe-card--BackgroundImage` | |
+| `--pfe-card--BackgroundAttachment` | |
+| `--pfe-card--BackgroundPosition` | center center |
+| `--pfe-card--BackgroundRepeat` | |
+| `--pfe-card--BackgroundSize` | |
+| **General properties** |
+| `--pfe-card--TextAlign` | left |
+| **Overlay properties** |
+| `--pfe-card__overlay--BackgroundColor` | `rgba(0, 0, 0, var(--pfe-theme--opacity, 0.09))` |
+| **Header region properties** |
+| `--pfe-card__header--Display` | `flex` |
+| `--pfe-card__header--JustifyContent` | |
+| `--pfe-card__header--BackgroundColor` | `rgba(0, 0, 0, var(--pfe-theme--opacity, 0.09))` |
+| `--pfe-card__header--Color` | `var(--pfe-broadcasted--text, #3c3f42)` |
+| **Body region properties** |
+| `--pfe-card__body--FlexDirection` | column |
+| `--pfe-card__body--FlexWrap` | nowrap |
+| `--pfe-card__body--JustifyContent` | |
+| `--pfe-card__body--AlignItems` | |
+| **Footer region properties** |
+| `--pfe-card__footer--AlignItems` | |
+| `--pfe-card__footer--FlexDirection` | `row` |
+| `--pfe-card__footer--FlexWrap` | `wrap` |
+| `--pfe-card__footer--JustifyContent` | |
+| `--pfe-card__footer--spacing--horizontal` | `var(--pfe-theme--content-spacer, 1.5rem)` |
+
+
+### Usage notes
+
+#### Header region
+* The display property for the header region is very helpful in situations where you need to have the header content present in the DOM but want it visibly hidden from view. You can do that by setting that property to: `--pfe-card__header--Display: none`.
+* If you set the `background-color` of the header region to a color that requires a different context than the rest of the card, please be sure you update the value of the `--pfe-card__header--Color` property to use a font color that works for that `background-color`. There is no `--context` variable for this region at this time.
 
 ## Test
 
@@ -84,4 +141,4 @@ Card (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. T
 
 [prettier]: https://github.com/prettier/prettier/
 [prettier-ed]: https://prettier.io/docs/en/editors.html
-[web-component-tester]: https://github.com/Polymer/web-component-tester
+[web-component-tester]: https://github.com/Polymer/web-component-tester
diff --git a/elements/pfe-card/demo/demo.css b/elements/pfe-card/demo/demo.css
@@ -1,33 +1,52 @@
-/* For demo only */
-.demo-cards {
-    display: flex;
-    flex-wrap: wrap;
+pfe-band {
+  --pfe-band--Width: auto;
 }
 
-.demo-cards>* {
-    margin: 0 16px 32px;
-    min-width: 200px;
-    width: calc(25% - 32px);
+/* Use this to test updating variables using global scope */
+#custom {
+  --pfe-card--Padding: 25px 15px;
+  --pfe-card--spacing--vertical: 10px;
+  --pfe-card--spacing--horizontal: 10px;
+
+  --pfe-card--BackgroundColor: papayawhip;
+  --context: light;
+}
+
+#custom pfe-card:not([color]) {
+  --pfe-card__header--BackgroundColor: rgb(233, 176, 85);
+}
+
+#custom pfe-cta[priority] {
+  --pfe-cta--Padding: 8px 16px;
+}
+
+#custom #custom-image {
+  --pfe-card--BackgroundImage: url("https://placekitten.com/150/80");
+  --pfe-card--BackgroundPosition: calc(100% - 10px) calc(100% - 10px);
+  --pfe-card--BackgroundRepeat: no-repeat;
+}
+
+#custom #custom-spacing {
+  --pfe-card--spacing--vertical: 20px;
+  --pfe-card--spacing--horizontal: 40px;
 }
 
-.button-series {
-    display: inline-block;
-    margin-bottom: -15px;
-    margin-left: -15px;
+#custom #custom-border {
+  --pfe-card--BorderColor: #151515;
+  --pfe-card--BorderWidth: 2px;
+  --pfe-card--BorderRadius: 20px;
 }
 
-.button-series>* {
-    display: inline-block;
-    margin-left: 15px;
-    margin-bottom: 15px;
+#custom #custom-header {
+  --pfe-card__header--BackgroundColor: #0477a4;
+  --pfe-card__header--Color: #fff;
 }
 
-h2[slot="pfe-card--header"] {
-    font-size: 1.1em;
-    font-weight: bolder;
+#custom #custom-overlay {
+  --pfe-card__overlay--BackgroundColor: rgba(180, 82, 43, 0.1);
 }
 
-.custom-border {
-    --pfe-card--BorderColor: #eee;
-    --pfe-card--BorderWeight: 1px;
+.pfe-jump-links-panel__section:not(:first-child) {
+  margin-top: 80px;
+  margin-bottom: 20px;
 }