fix: Patch Jump links error (#1224)

* fix: Patch Jump links error

* fix: Fix JS console error

* fix: Add an auto-build fallback

* fix: Add fallback properties for existing code

* Update CHANGELOG-1.x.md

* fix: Remove array conversion on menu_links

* fix: Add backwards support for pfe-c prefixed attributes; set band height to 100% on aside when full is used

* fix: Remove band package-lock

* fix: Remove flex styles on band (not in a flex container)

* fix: Updating demo pages to make branch testing easier

* fix: Updating jump links test case to use test-fixtures and add fallback validation

* fix: Update documentation

* fix: Add an import in the vue test for the suite after mounted callback

* fix: Simplify test page for e2e

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

Author: castastrophe

CHANGELOG-1.x.md

@@ -1,6 +1,8 @@
 ## 1.0.1 ( TBD )
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Accordion assigned to content set panel was always being set to hidden
+- [07d1466](https://github.com/patternfly/patternfly-elements/commit/07d14667a0ed521edda8ad5d5fcc7067645c746d) fix: Accordion assigned to content set panel was always being set to hidden
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Jump Links fallback alias' added for old property names; additional checks on scroll
+
 ## 1.0.0 ( 2020-12-02 )
 
 - [e86f33e](https://github.com/patternfly/patternfly-elements/commit/e86f33e0342933f1992d52a022f9a25fd1e2fbeb) feat: Add standard attribute/property definitions 

elements/pfe-band/src/pfe-band.scss

@@ -303,8 +303,7 @@ $regions-grid: (
 }
 
 .pfe-band__aside {
-  flex-grow: 1;
-  align-self: flex-start;
+  height: 100%;
 }
 
 @each $section in (header, body, footer, aside) {

elements/pfe-jump-links/README.md

@@ -2,12 +2,13 @@
 
 
 ## Usage
-This component is focused on reading content inside the <pfe-jump-links-panel> and updating a sidebar or horizontal nav to indicate the section of the document currently being viewed. As a developer, you have the choice of whether you bring your own markup to the nav, or have the nav build a DOM tree for you. Please note the shape of the DOM tree below. In order to support sub-section highlighting jump links must be very opinionated about the DOM tree.
+This component watches the content inside a `<pfe-jump-links-panel>` and updates the corresponding `<pfe-jump-links-nav>` to indicate the section of the document currently being viewed. As a developer, you have the choice of whether you bring your own markup to the navigation element or have it build for you (see `autobuild` attribute below). Please note the shape of the markup that is required. In order to support sub-section highlighting, jump links must be somewhat opinionated about the DOM tree.
 
-Inside of <pfe-jump-links-panel> add the class .pfe-jump-links-panel__section to tell the component to watch for when that section crosses the scroll threshold. If this section has sub-sections you add the class .has-sub-section to the section parent (i.e. section 8) and add .sub-section to the child sections (i.e. 8.1). Make sure to add an id to each section, this id should match to the href attribute of the corresponding <a> tag.
+Inside the `<pfe-jump-links-panel>` add the class `.pfe-jump-links-panel__section` to any elements you want the navigation to watch; when that element crosses the scroll threshold, the navigation will highlight to show it is active. If it has sub-sections, add the class `.has-sub-section` to the section parent (i.e. section 8) and add `.sub-section` to the child sections (i.e. 8.1). Make sure to add an id to each section, this id should match to the href attribute of the corresponding `<a>` tag (see below).
 
 ## Wiring up the nav
-The panel and nav are wired up by a scrolltarget and id. On the panel add an attribute scrolltarget="foo". This will correspond to the nav's #id. Add the corresponding id to your nav like so id="foo". The last step is to match the <a> tag's href attribute to specific sections (just like you would with same page anchor links). See below for a simple example with three sections where section two has two sub-sections:
+
+The panel and nav are connected via a scrolltarget and id. On the panel, add an attribute `scrolltarget="foo"`. This will correspond to the `pfe-jump-links-nav` on the page with `id="foo"`. The last step is to match the `<a>` tag's href attribute to specific sections (just like you would with same page anchor links). See below for a simple example with three sections where section two has two sub-sections:
 
 ```html
 <pfe-jump-links-nav id="jumplinks1" default>
@@ -48,7 +49,9 @@ The panel and nav are wired up by a scrolltarget and id. On the panel add an att
 ```
 
 ### Accessibility
+
 The template and DOM structure of this component are as follows:
+
 ```html
 <nav>
   <h2 hidden>Page navigation</h2> // this is visually hidden
@@ -70,21 +73,32 @@ No extra roles or aria labels are required because we're using standard html tag
 ## Slots
 
 
-- `pfe-jump-links-nav--heading`:  The rest of the component works by creating a mirror shadowRoot based on the Light DOM markup. 
+- `pfe-jump-links-nav--heading`: This slot is for the navigation element, `pfe-jump-links-nav` to identify the markup for the list's heading.
 
+The rest of the component works by creating a mirror shadowRoot based on the Light DOM markup. 
 
-## Attributes
 
+## Attributes
 
 - `autobuild`: Flips the switch on the component to create its own markup for the navigation. You can add `pfe-jump-links-panel__section` to each section that should show in the nav. If you want to use sub-sections add `has-sub-section` to the parent section that should always show and the `sub-section` class to the children of that section. If you use this attribute, keep in mind that non-JavaScript environments (some search engines, browsers with JS disabled) will not see the proper markup.
 
-- `sr-text`: This attribute is read when the component upgrades to provide the innerText of the heading. If there is no `sr-text` attribute then the component defaults to "JUMP TO SECTION". This attribute is to enable translations and internationalization.
+- `sr-text`: This attribute is read when the component upgrades to provide the innerText of the heading. If there is no `sr-text` attribute then the component defaults to "Jump to section". This attribute is to enable translations and internationalization.
 
 - `offset`: This attribute determines the distance from the top of the browser window to trigger a switch from one link being active to the next. For instance `offset="600"` would mean that threshold flips at 600px from the top. The default is set at 200, and if you desire 200px then you can leave this attribute off. The `offset` attribute should be placed on `pfe-jump-links-panel`. There is a css solution to control the offset, however the attribute value takes precedence over css. To read more about a css solution see below.
 
-- `style="--pfe-jump-links-panel--offset: {integer};"`: You can control offset in your styling layer as well. This value can be set directly on the component inside a style attribute, e.g. `style="--pfe-jump-links-panel--offset: 100;"` or using the appropriate selector in another file. Please note that adding an attribute will take precedence over a css value. At the moment only integer values passed to this key are valid. No other values are supported. This means that passing "300px", "2rem","calc(100% - 12px)" will all result in JavaScript errors. You should pass a number that correlates to pixels. To read about the `offset` attribute, see above.
+- `scrolltarget`: This attribute connects a `pfe-jump-links-panel` to a specific `pfe-jump-links-nav` using the ID of the navigation element.  If the nav and panel are the only ones on the page, this is not necessary.  If more than one of each component exists, this attribute is required.
+
+## Deprecated alias attributes
+
+- `pfe-c-autobuild`: Alias for autobuild.
+- `pfe-c-offset`: Alias for offset.
+- `pfe-c-scrolltarget`: Alias for scrolltarget.
+
+## Custom properties
+
+- `--pfe-jump-links-panel--offset: {integer}`: You can control offset in your styling layer as well. This value can be set directly on the component inside a style attribute, e.g. `style="--pfe-jump-links-panel--offset: 100;"` or using the appropriate selector in another file. Please note that adding an attribute will take precedence over a css value. At the moment only integer values passed to this key are valid. No other values are supported. This means that passing "300px", "2rem","calc(100% - 12px)" will all result in JavaScript errors. You should pass a number that correlates to pixels. To read about the `offset` attribute, see above.
 
-- `style="--pfe-jump-links-panel__section--spacer: {integer}{unit};"`: pfe-jump-links are built with native behavior in terms of anchor links and scroll. That means that clicking a nav link will adjust the viewport to show the top of that section aligned with the top of the browser. This native browser is undesirable in certain cases such as working with a "sticky" navigation bar or other elements placed outside of the normal document flow. The panel components inserts a "spacer" just before each section that can be manipulated with this custom property. Specify a unit along with an integer like so: `--pfe-jump-links-panel__section--spacer: 100px;`.
+- `--pfe-jump-links-panel__section--spacer: {integer}{unit}`: pfe-jump-links are built with native behavior in terms of anchor links and scroll. That means that clicking a nav link will adjust the viewport to show the top of that section aligned with the top of the browser. This native browser is undesirable in certain cases such as working with a "sticky" navigation bar or other elements placed outside of the normal document flow. The panel components inserts a "spacer" just before each section that can be manipulated with this custom property. Specify a unit along with an integer like so: `--pfe-jump-links-panel__section--spacer: 100px;`.
 
 ## Events
 This component fires an event when a link is made active.

elements/pfe-jump-links/demo/demo.css

@@ -3,7 +3,7 @@ html {
     scroll-behavior: smooth;
 }
 
-:root{
+#nav-vars-set {
     --pfe-navigation--Height--actual: 55px;
     --pfe-jump-links--nav-height: 62px;
     --pfe-jump-links-panel__section--spacer: 117px;
@@ -49,10 +49,9 @@ a.pfe-jump-links-nav__item {
   position: fixed;
   top: 0;
   width: 100%;
-  overflow: hidden;
-  background-color: #333;
   height: var(--pfe-navigation--Height--actual);
   z-index: 9;
+  padding-top: 0;
 }
 
 #navbar a {