fix: Reduce unnecessary interpolation and function calls (#1042)

* fix: Reduce unnecessary interpolation and function calls

* fix: Reduce pfe-print-local for clarity

* fix: update changelog

* fix: Run files through prettier

* fix: Update package lock?

* fix: Update changelog

* fix: Organize pfe-band for readability

* fix: Adjust jump-links to fix minor bug

* Update elements/pfe-accordion/src/pfe-accordion-panel.scss

* fix: Bring back width values; leave empty var

* fix: Update components

* fix: Resolve bugs in remaining band styles

* fix: Adding comments

* fix: Fix content set display bug; icon visuals

* fix: Update icon template

* fix: Resolve extra padding on landing page; add template for grid to remove console notice

* fix: Tidy up IE11 bugs for pfe-band

* fix: Update documentation

* fix: Add missing closing bracket so it compiles

* fix: Fix pfe-band sass changes

* fix: Adjust the margin settings

* fix: Fix IE11 float overflow

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kendall Totten <[email protected]>

Author: 3 people

CHANGELOG-1.x.md

@@ -14,5 +14,6 @@
 - [6eadb21](https://github.com/patternfly/patternfly-elements/commit/6eadb21a29768c06ff312de42bd54b44072ee051) fix: umd.min modules now import umd.min builds of PFE dependencies (#1168)
 - [40e0b09](https://github.com/patternfly/patternfly-elements/commit/40e0b099e77943feee4e8ba1a34d25b01ddf86ff) fix: global theme palette color for visited links in a saturated context
 - [117a0e7](https://github.com/patternfly/patternfly-elements/commit/117a0e7e407ea1244cc861b251391f61a8b143ef) fix: Variable references to theme vs. context
-- [7c7093a1](https://github.com/patternfly/patternfly-elements/commit/7c7093a1b4d099941320558e54003a0beca01eda) fix: ie11 pfe-cta link text and padding issues
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add theming to storybook
+- [a02d6e5](https://github.com/patternfly/patternfly-elements/commit/a02d6e57f9e444b28cde9676d70c0e16a5dca4d9) fix: ie11 pfe-cta link text and padding issues
+- [f50368b](https://github.com/patternfly/patternfly-elements/commit/f50368b0bbb1141dc805ef2ceb4f86203e90ceff) fix: Storybook bug fixes; jump links updates
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Reduce unnecessary interpolation and function calls (#1042)

docs/content/develop/properties.md

@@ -161,7 +161,7 @@ class PfeCount extends PFElement {
   }
 
   handleCount(oldVal, newVal) {
-    console.log(`count changed from ${oldVal} to ${newVal}`);
+    this.log(`count changed from ${oldVal} to ${newVal}`);
   }
 
 }

docs/content/develop/step-2d.md

@@ -77,7 +77,7 @@ class PfeCoolElement extends PFElement {
   }
 
   _clickHandler(event) {
-    console.log("Button clicked!!!");
+    this.log("Button clicked!!!");
     this.follow = !this.follow;
   }
 
@@ -165,7 +165,7 @@ constructor() {
 }
 ```
 
-Now, we'll add the `pfe-photo-url` attribute to our `observedAttributes`:
+Now, we'll add the `photo-url` attribute to our `observedAttributes`:
 
 ```
 static get observedAttributes() {

elements/pfe-accordion/demo/index.html

@@ -212,7 +212,7 @@ <h3>Panel with CTA</h3>
 
   <section class="light-gray-background">
     <h2>&lt;pfe-accordion&gt;</h2><br />
-    <pfe-accordion>
+    <pfe-accordion id="dynamic-accordion">
       <pfe-accordion-header>
         <h3>Why do wizards need money if they could just create it?</h3>
       </pfe-accordion-header>
@@ -599,7 +599,7 @@ <h3>Not a disclosure because disclosure=false</h3>
 
   <script>
     var btn = document.querySelector("#addTabAndPanelBtn");
-    var pfeAccordion = document.querySelector("pfe-accordion");
+    var pfeAccordion = document.querySelector("pfe-accordion#dynamic-accordion");
 
     btn.addEventListener("click", function () {
       var fragment = document.createDocumentFragment();

elements/pfe-accordion/src/pfe-accordion-header.scss

@@ -56,7 +56,7 @@
 }
 
 :host(:last-of-type.animating) button {
-  @include pfe-print-local((BorderBottomWidth: 0));
+  --pfe-accordion--BorderBottomWidth: 0;
 }
 
 // Styles based on background color
@@ -78,7 +78,7 @@ button[aria-expanded="true"] {
 
 :host([disclosure="true"]) {
   button {
-    padding-left: calc((#{pfe-local(Padding, $region: base)} * 3));
+    padding-left: calc(#{pfe-local(Padding, $region: base)} * 3);
     @include browser-query(ie11) {
       padding: 16px 24px 16px 47px;
       border-right-color: pfe-fetch(surface--border);

elements/pfe-accordion/src/pfe-accordion-panel.scss

@@ -19,18 +19,10 @@
 .container {
   @include pfe-clearfix;
   @include pfe-panel-container;
-  @include pfe-print-local((
-    panel-container: (
-      Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 3) #{pfe-local(Padding, $region: base)} calc(#{pfe-local(Padding, $region: base)} * 1.5)
-    )
-  ));
+  --pfe-accordion__panel-container--Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 3) #{pfe-local(Padding, $region: base)} calc(#{pfe-local(Padding, $region: base)} * 1.5);
 
   :host([disclosure="true"]) & {
-    @include pfe-print-local((
-      panel-container: (
-        Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 1.5)
-      )
-    ));
+    --pfe-accordion__panel-container--Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 1.5);
   }
 }
 

elements/pfe-accordion/src/pfe-accordion.js

@@ -37,14 +37,12 @@ class PfeAccordion extends PFElement {
       oldDisclosure: {
         type: String,
         alias: "disclosure",
-        attr: "pfe-disclosure",
-        cascade: ["pfe-accordion-header", "pfe-accordion-panel"]
+        attr: "pfe-disclosure"
       },
       role: {
         type: String,
         default: "tablist",
-        values: ["tablist"],
-        prefix: false
+        values: ["tablist"]
       }
     };
   }

elements/pfe-accordion/src/pfe-accordion.scss

@@ -1,6 +1,7 @@
 @import "shared-assets";
 
 :host {
+  // @TODO remove this eventually to allow empty local variables
   @include pfe-print-local($LOCAL-VARIABLES);
   display: block;
   position: relative;
@@ -26,3 +27,7 @@
   $disclosure: pfe-accordion-variables($variant: disclosure);
   @include pfe-print-local($disclosure);
 }
+
+:host([hidden]) {
+  display: none;
+}

elements/pfe-band/README.md

@@ -8,7 +8,7 @@ All slots other than `pfe-band--body` are optional.  If the slot is not defined,
 
 - `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 template is automatically wrapping this slot in a `header` tag.  Recommend using h-level or p tags inside this slot.
 - **Default slot**: This unnamed slot should contain the bulk of the content in this element. The template is automatically wrapping all content within an `article` tag.
-- `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`.The template is automatically wrapping this slot in a `footer` tag.
+- `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`. The template is automatically wrapping this slot in a `footer` tag.
 - `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. The template is automatically wrapping this slot in an `aside` tag.
 
 ### Example markup
@@ -45,27 +45,43 @@ All slots other than `pfe-band--body` are optional.  If the slot is not defined,
 
 There are several attributes available for customizing the visual treatment of this container.
 
-- `pfe-color`: Options include darkest, darker, accent, complement, lighter, lightest.  The band has a default value of `#dfdfdf`. Your context will influence these colors so check there first if you are seeing inconsistencies.
+- `color`: Options include darkest, darker, accent, complement, lighter, lightest.  The band has a default value of `#dfdfdf`. Your context will influence these colors so check there first if you are seeing inconsistencies.
 
     | color | hex |
     |-------|-----|
-    | default | <span class="color-preview" style="--bg:#dfdfdf"></span> #dfdfdf |
-    | darker | <span class="color-preview" style="--bg:#464646"></span> #464646 |
-    | darkest | <span class="color-preview" style="--bg:#131313"></span> #131313 |
-    | accent | <span class="color-preview" style="--bg:#ee0000"></span> #ee0000 |
-    | complement | <span class="color-preview" style="--bg:#0477a4"></span> #0477a4 |
-    | lighter | <span class="color-preview" style="--bg:#ececec"></span> #ececec |
+    | base/default | <span class="color-preview" style="--bg:#f0f0f0"></span> #f0f0f0 |
+    | darker | <span class="color-preview" style="--bg:#3c3f42"></span> #3c3f42 |
+    | darkest | <span class="color-preview" style="--bg:#151515"></span> #151515 |
+    | accent | <span class="color-preview" style="--bg:#004080"></span> #004080 |
+    | complement | <span class="color-preview" style="--bg:#002952"></span> #002952 |
+    | lighter | <span class="color-preview" style="--bg:#f0f0f0"></span> #f0f0f0 |
     | lightest | <span class="color-preview" style="--bg:#fff"></span> #ffffff |
 
-- `pfe-img-src`: Optional background image applied to the entire band container.  Alignment of this image can be managed using the `--pfe-band--BackgroundPosition` variable which is set to `center center` by default.
-- `pfe-size`: Optionally adjusts the padding on the container.  Accepts: `small`.
+- `img-src`: Optional background image applied to the entire band container.  Alignment of this image can be managed using the `--pfe-band--BackgroundPosition` variable which is set to `center center` by default.
+- `size`: Optionally adjusts the padding on the container.  Accepts: `small`.
+- `use-grid`: This turns on a default grid inside the header, body, footer, and aside regions. The grid can be customized using the following CSS variables:
+
+    | Variable name | Default |
+    |---|---|
+    | `--pfe-band__header--layout` | 1fr |
+    | `--pfe-band__header--gutter--vertical` | var(--pfe-theme--container-spacer, 16px) |
+    | `--pfe-band__header--gutter--horizontal` | calc(var(--pfe-theme--container-spacer, 16px) * 3) |
+    | `--pfe-band__body--layout` | 1fr |
+    | `--pfe-band__body--gutter--vertical` | var(--pfe-theme--container-spacer, 16px) |
+    | `--pfe-band__body--gutter--horizontal` | calc(var(--pfe-theme--container-spacer, 16px) * 3) |
+    | `--pfe-band__footer--layout` | 1fr |
+    | `--pfe-band__footer--gutter--vertical` | var(--pfe-theme--container-spacer, 16px) |
+    | `--pfe-band__footer--gutter--horizontal` | calc(var(--pfe-theme--container-spacer, 16px) * 3) |
+    | `--pfe-band__aside--layout` | 1fr |
+    | `--pfe-band__aside--gutter--vertical` | var(--pfe-theme--container-spacer, 16px) |
+    | `--pfe-band__aside--gutter--horizontal` | calc(var(--pfe-theme--container-spacer, 16px) * 3) |
 
 ### Aside settings
 The aside settings have defaults and if no attribute is defined on the element's main tag, these attributes will be injected with their default values automatically.
 
-- `pfe-aside-desktop`: This influences where the aside is rendered at the desktop view and are indicated relative to the body content. Options are `right` or `left`. **Right is the default.**
-- `pfe-aside-mobile`: This influences the position of the aside in the mobile view as well as where in the DOM the aside markup is rendered. These names are relative to the body content. Options are `top` or `bottom`. **Bottom is the default.**
-- `pfe-aside-height`: This influences the height of the aside region relative to the body content. Options are `full` or `body`. A `full` height starts at the top of the band and spans the header, body, and footer regions. A `body` height spans the body and footer regions only with the header region sitting above it in the rendered view. **Body is the default.**
+- `aside-desktop`: This influences where the aside is rendered at the desktop view and are indicated relative to the body content. Options are `right` or `left`. **Right is the default.**
+- `aside-mobile`: This influences the position of the aside in the mobile view as well as where in the DOM the aside markup is rendered. These names are relative to the body content. Options are `top` or `bottom`. **Bottom is the default.**
+- `aside-height`: This influences the height of the aside region relative to the body content. Options are `full` or `body`. A `full` height starts at the top of the band and spans the header, body, and footer regions. A `body` height spans the body and footer regions only with the header region sitting above it in the rendered view. **Body is the default.**
 
 ## Variables
 There are several powerful variables available to hook into and override default styles.
@@ -74,12 +90,7 @@ There are several powerful variables available to hook into and override default
 - **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`.
 - **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.  It uses the CSS grid spec and creates a stacked layout by default.  By updating these values, you will be able to create simple grid layouts.  Please note that these do not include fallbacks for older browsers. Possible values include: `1fr 1fr`, `repeat(3, 1fr)`, `repeat(auto-fill, minmax(300px, 1fr))`
-    * `--pfe-band--layout`: Applied to `.pfe-band__container`.
-    * `--pfe-band_header--layout`: Applied to `.pfe-band__header`.
-    * `--pfe-band_body--layout`: Applied to `.pfe-band__body`.
-    * `--pfe-band_footer--layout`: Applied to `.pfe-band__footer`.
-    * `--pfe-band_aside--layout`: Applied to `.pfe-band__aside`.
+- **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));`.
 
 ## Test
 
@@ -89,11 +100,11 @@ There are several powerful variables available to hook into and override default
 
     npm run build
 
-## Demo
+## Develop
 
 From the PFElements root directory, run:
 
-    npm start
+    npm dev pfe-band
 
 ## Code style
 

elements/pfe-band/demo/demo.css

@@ -0,0 +1,54 @@
+body {
+    margin: 0;
+}
+
+/* Example CSS variable overrides
+:root  {
+--pfe-theme--container-spacer: 4px;
+}
+
+pfe-band {
+--pfe-band--Padding--vertical: 1px;
+--pfe-band--Padding--horizontal: 1px;
+--pfe-band_aside--layout: 380px;
+}
+*/
+
+/* Set typography styles using a class */
+.custom-band-summary {
+    font-size: 20px;
+    margin: 0;
+}
+
+.custom-footnote ol {
+    list-style: none;
+    counter-reset: my-counter;
+    margin: 0;
+    padding: 0;
+}
+
+.custom-footnote li:before {
+    content: "["counter(my-counter) "] ";
+    counter-increment: my-counter;
+    font-size: .8em;
+    vertical-align: super;
+}
+
+.custom-band {
+    --pfe-band--BackgroundColor: hotpink;
+    --context: saturated;
+}
+
+.custom-card {
+    --pfe-card--BackgroundColor: transparent;
+    --pfe-card--Border: 1px solid #fff;
+}
+
+#test-custom {
+    --pfe-band--BackgroundColor: green;
+    --context: saturated;
+}
+
+#custom-layout {
+    --pfe-band__body--layout: repeat(auto-fit, minmax(250px, 1fr));
+}