Skip to content

Commit 9adb7ce

Browse files
Djfaucettekylebuch8starryeyez024
authored
feat: pfe-jump-links (#858)
* got nested subsections working * WIP and is working * cleaned up a bit * added autobuild feature to build with just content * updated demo page * cleaning up * trigger a rerender of autobuilt nav in the panel's mutation observer * cleaned up and added comments * changed calling a function to an event listener triggered by the mutation observer * changed list builder over to a template literal with a function * added an attribute to customize offset * wip horizontal nav * playing around with the idea of two optional slots * changed up the logo to not look gross * making sure the ids are unique in the demo file * making sure the links don't jump around on focus * using this.emitEvent instead of dispatchEvent * updating the hover style for the dark theme * changed dark attribute to pfe-color=darkest * styling updates for horizontal nav * commented out all but one instance of the element to test in browserstack * removed all mutation observers from firing * missed one. Pushing up to test * fixed a bug the nav was rebuilding when it shouldn't be * cleaned up and reverted back to working demo * removed the observer before re-rendering for IE11 * playing around with a lightweight ie11 fix * making some observer updates and cleaning up commented out code * removed border in default variant * Update elements/pfe-jump-links/src/pfe-jump-links-nav.scss Co-authored-by: Kendall Totten <ktotten@redhat.com> * Update elements/pfe-jump-links/src/pfe-jump-links-nav.scss Co-authored-by: Kendall Totten <ktotten@redhat.com> * Update elements/pfe-jump-links/src/pfe-jump-links-nav.scss Co-authored-by: Kendall Totten <ktotten@redhat.com> * Update elements/pfe-jump-links/src/pfe-jump-links-nav.scss Co-authored-by: Kendall Totten <ktotten@redhat.com> * Update elements/pfe-jump-links/src/pfe-jump-links-nav.scss Co-authored-by: Kendall Totten <ktotten@redhat.com> * Update elements/pfe-jump-links/src/pfe-jump-links-nav.scss Co-authored-by: Kendall Totten <ktotten@redhat.com> * Update elements/pfe-jump-links/src/pfe-jump-links-nav.scss Co-authored-by: Kendall Totten <ktotten@redhat.com> * updated stylesheet to use pfe-sass * updated demo file to use pfe-cta * adding tests * added test case for scroll * doesn't throw a warning if you're not using the sidebar pattern * added warnings for using incorrect slots * POC of using accordion as a disclosure * POC of using accordion inside the template * got accordion to work and look like our spec * updated demo file * fixed a bug where content was visible 'under' component in mobile * made updates to be bem-ier * switched back over to html selectors * refactored some code to not require devs to add classes at all and added some documentation * Adding support for local variables for padding, background color, border color, font size, heading font size. * Bring back accordion overrides * cleaning up a bit * added attribute to pass in any text for a11y help text * Added another instance to the bottom of the demo page to show the jump links with overrides. Cleaned up some of the spacing so that the links have more room, and added a couple more local variables * Use pfe-breakpoint function, remove padding from heading only on desktop * beautify demo file * Add hover state to horizontal links * added reportHeight function to add computed height to corresponding panel * remove background color from first demo * update dark demo margins * tweaked styles to use vars and match spec * added font family rule back in * Remove extra demo override vars * removed font styles from demo page Co-authored-by: Daniel Faucette <dfaucett@redhat.com> Co-authored-by: Kyle Buchanan <kylebuch8@gmail.com> Co-authored-by: Kendall Totten <ktotten@redhat.com>
1 parent 26139b5 commit 9adb7ce

20 files changed

Lines changed: 3411 additions & 0 deletions

‎elements/pfe-jump-links/CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## 1.0.0-prerelease.39 ( TBD )
2+
3+
Tag: [1.0.0-prerelease.39](https://github.com/patternfly/patternfly-elements/releases/tag/1.0.0-prerelease.39)
4+
5+
- [code](url) Init - new component pfe-jump-links

‎elements/pfe-jump-links/LICENSE.txt‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright 2020 Red Hat, Inc.
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in
11+
all copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎elements/pfe-jump-links/README.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# PatternFly Element | Jump links element
2+
3+
4+
## Usage
5+
This component is focused on reading content inside the <pfe-jump-links-panel> and updating a sidebar or horizontal nav with 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.
6+
7+
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 will match to the href attribute of the corresponding <a> tag.
8+
9+
## Wiring up the nav
10+
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 we would with same page anchor links). See below for a simple example with three sections where section two has two sub-sections:
11+
12+
```html
13+
<pfe-jump-links-nav id="jumplinks1" default>
14+
<h4 slot="pfe-jump-links-nav--heading">Jump to section</h4>
15+
<ul>
16+
<li>
17+
<a href="#section1">Section 1</a>
18+
</li>
19+
<li>
20+
<a href="#section2">Section 2</a>
21+
<ul>
22+
<li>
23+
<a href="#section2.1">Section 2.1</a>
24+
</li>
25+
<li>
26+
<a href="#section2.2">Section 2.2</a>
27+
</li>
28+
</ul>
29+
</li>
30+
<li>
31+
<a href="#section3">Section 3</a>
32+
</li>
33+
</ul>
34+
</pfe-jump-links-nav>
35+
...
36+
<pfe-jump-links-panel>
37+
<h2 class="pfe-jump-links-panel__section" id="section1">Section 1</h2>
38+
<p>Some content...</p>
39+
<h2 class="pfe-jump-links-panel__section has-sub-section" id="section2">Section 2</h2>
40+
<p>Some content...</p>
41+
<h2 class="pfe-jump-links-panel__section sub-section" id="section2">Section 2.1</h2>
42+
<p>Some content...</p>
43+
<h2 class="pfe-jump-links-panel__section sub-section" id="section2">Section 2.2</h2>
44+
<p>Some content...</p>
45+
<h2 class="pfe-jump-links-panel__section" id="section2">Section 2</h2>
46+
<p>Some content...</p>
47+
</pfe-jump-links-panel>
48+
```
49+
50+
### Accessibility
51+
The template and DOM structure of this component are as follows:
52+
```html
53+
<nav>
54+
<h2 hidden>Page navigation</h2> // this is visually hidden
55+
<h4>Slotted content</h4>
56+
<ul>
57+
<li><a>Regular list item</a></li>
58+
<li><a>List item with sub sections</a></li>
59+
<li>
60+
<ul>
61+
<li><a>Nested sub section</a></li>
62+
</ul>
63+
</li>
64+
</ul>
65+
</nav>
66+
```
67+
68+
No extra roles or aria labels are required because we're using standard html tags in their prescribed uses.
69+
70+
## Slots
71+
72+
- `namedSlot`: The only slot this component has is the heading. The rest of the component works by creating a mirror shadowRoot based on the Light DOM markup.
73+
74+
## Attributes
75+
76+
- `attr`: autobuild Flips the switch on the component to create its own markup for the navigation. If you use this attribute, then no experience is given for non-JS runtimes and the component will crawl the associated panel to come up with its own list of links.
77+
78+
## Events
79+
This component fires an event when a link is made active.
80+
81+
82+
## Dependencies
83+
Describe any dependent elements or libraries here too.
84+
85+
## Dev
86+
87+
`npm start`
88+
89+
## Test
90+
91+
`npm run test`
92+
93+
## Build
94+
95+
`npm run build`
96+
97+
## Demo
98+
99+
From the PFElements root directory, run:
100+
101+
`npm run demo`
102+
103+
## Code style
104+
105+
Jump links (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
106+
107+
[prettier]: https://github.com/prettier/prettier/
108+
[prettier-ed]: https://prettier.io/docs/en/editors.html
109+
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/pfe-jump-links/WHY.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Project name
2+
_NOTE:_ Please convert this file to WHY.md and save it in the folder for the elements it references (i.e., `elements/pfe-cta/WHY.md`).
3+
4+
| | |
5+
| --- | --- |
6+
| **Brief description of the project** | |
7+
| **Design wireframes / mock-ups** | |
8+
| **Relavant project management links** | |
9+
10+
## MVP Requirements
11+
This project's primary goal is to...
12+
13+
## Questions to answer
14+
- What **existing** components do we need to **update** to accomplish this project's main goal?
15+
- What **new** components do we need to accomplish this project's main goal?
16+
1. Content components:
17+
2. Container components:
18+
3. Combo components:
19+
20+
## Notes about styles
21+
* [Check w/ Design System Collaborative for Designs](https://github.com/patternfly/patternfly-unified-design-kit/projects/1)
22+
* [Check PF4](https://docs.google.com/spreadsheets/d/1P9iYwguDy2EnIS-Iw5ynX1Dn6FdKOR8GeZNaXGI_LNA/edit#gid=289588122)
23+
24+
The styles for this component should...
25+
26+
## Accessibility requirements
27+
As a screen-reader user, this component should...
28+
29+
As a sighted keyboard user, this component should...
30+
31+
## Semantics / SEO requirements
32+
From a semantic HTML mindset, this component should...
33+
34+
As a search-engine, this component should...
35+
36+
## Features to include if there is time
37+
If there is time, these features are nice-to-haves.
38+
39+
## Out-of-scope // @TODO later
40+
These are some things we would like to add later to enhance this component.

0 commit comments

Comments
 (0)