Skip to content

CPFED-3689 breaking nav changes #1616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wesruv merged 3 commits into from
May 21, 2021
Merged

CPFED-3689 breaking nav changes #1616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b119859
Minor updates from review
wesruv May 13, 2021
d768ca7
Updating slot names and making updates to be more in line with PFE
wesruv May 7, 2021
98d4da8
Updating docs
wesruv May 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions elements/pfe-navigation-account/demo/fake-wes-auth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,5 +61,12 @@ window.addEventListener("load", function() {
username: "[email protected]",
fullName: "James Ruvalcaba"
};

if (!PfeNavigationAccount.hasAttribute("login-link")) {
PfeNavigationAccount.setAttribute("login-link", "#login");
}
if (!PfeNavigationAccount.hasAttribute("logout-link")) {
PfeNavigationAccount.setAttribute("logout-link", "#logout");
}
}
});
7 changes: 3 additions & 4 deletions elements/pfe-navigation-account/src/pfe-navigation-account.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,9 @@ class PfeNavigationAccount extends PFElement {
this._processUserData(userData);
}

// static get events() {
// return {
// };
// }
static get events() {
return {};
}

// Declare the type of this component
static get PfeType() {
Expand Down
14 changes: 7 additions & 7 deletions elements/pfe-navigation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,15 +212,15 @@ Example markup:
</nav>

<!-- Example of a custom link in the secondary section -->
<div slot="pfe-navigation--custom-links" class="pfe-navigation__custom-links" id="pfe-navigation__custom-links">
<div slot="secondary-links" class="pfe-navigation__custom-links" id="pfe-navigation__custom-links">
<a href="#" class="">
<pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
Custom Link
</a>
</div>

<!-- Example of a custom dropdown in the secondary section -->
<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<pfe-navigation-dropdown dropdown-width="full" icon="web-globe" name="Language">
<div class="language-picker">
<h3>Select a language</h3>
Expand All @@ -245,24 +245,24 @@ Example markup:
</pfe-navigation-dropdown>
</div>

<div slot="pfe-navigation--search" class="pfe-navigation__search">
<div slot="search" class="pfe-navigation__search">
<form>
<label for="pfe-navigation__search-label1">Search</label>
<input id="pfe-navigation__search-label1" type="text" placeholder="Search" />
<button>Search</button>
</form>
</div>

<pfe-navigation-account slot="pfe-navigation--account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
<pfe-navigation-account slot="account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>

</pfe-navigation>
```

## Slots

- `pfe-navigation--search`: For local site's search form
- `pfe-navigation--custom-links`: For local site's custom links that need to appear in the nav bar
- `pfe-navigation--account`: Slot for pfe-navigation-account, which powers the login experience and account dropdown.
- `search`: For local site's search form
- `secondary-links`: For local site's custom links that need to appear in the nav bar
- `account`: Slot for pfe-navigation-account, which powers the login experience and account dropdown.

## Attributes

Expand Down
11 changes: 6 additions & 5 deletions elements/pfe-navigation/demo/access.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,9 @@
"../../pfe-card/dist/pfe-card.umd.js",
"../../pfe-primary-detail/dist/pfe-primary-detail.umd.js",
"https://unpkg.com/@cpelements/[email protected]/dist/site-switcher.umd.min.js",
])</script>

]);
</script>
<script src="../../pfe-navigation-account/demo/fake-wes-auth.js"></script>
<style>
body {
margin: 0;
Expand Down Expand Up @@ -481,7 +482,7 @@ <h3 slot="details-nav">
</div>
</pfe-primary-detail>

<div id="site-search" slot="pfe-navigation--search" class="utility-link site-search">
<div id="site-search" slot="search" class="utility-link site-search">
<div class="content">
<form class="ng-pristine ng-valid topSearchForm" id="topSearchForm" name="topSearchForm" action="/search/browse/search/" method="get" enctype="application/x-www-form-urlencoded">
<cp-search-autocomplete class="push-bottom" path="/webassets/avalon/j/data.json"></cp-search-autocomplete>
Expand All @@ -490,9 +491,9 @@ <h3 slot="details-nav">
</div>
</div>

<pfe-navigation-account slot="pfe-navigation--account"></pfe-navigation-account>
<pfe-navigation-account slot="account"></pfe-navigation-account>

<div slot="pfe-navigation--custom-links" class="pfe-navigation__site-switcher">
<div slot="secondary-links" class="pfe-navigation__site-switcher">
<pfe-navigation-dropdown dropdown-width="full" icon="web-icon-grid-3x3" name="All Red Hat">
<site-switcher></site-switcher>
</pfe-navigation-dropdown>
Expand Down
5 changes: 2 additions & 3 deletions elements/pfe-navigation/demo/catalog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,8 +353,7 @@ <h3 slot="trigger">
</ul>
</pfe-navigation-main>


<li slot="pfe-navigation--custom-links">
<li slot="secondary-links">
<pfe-navigation-dropdown dropdown-width="full" icon="web-megaphone" name="Resources">
<div class="pfe-navigation-item__tray--container grid-2-column-mobile">
<div class="pfe-navigation-grid">
Expand Down Expand Up @@ -406,7 +405,7 @@ <h3 slot="trigger">
</li>

<!-- HELP -->
<li slot="pfe-navigation--custom-links">
<li slot="secondary-links">
<a href="https://redhat-connect.gitbook.io/catalog-help/">
<pfe-icon icon="web-question-mark" pfe-size="md" aria-hidden="true"></pfe-icon>
Help
Expand Down
22 changes: 16 additions & 6 deletions elements/pfe-navigation/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,13 +458,13 @@ <h3>
</li>
</ul>

<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<a href="#">
<pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
Custom Link
</a>
</div>
<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<pfe-navigation-dropdown dropdown-width="single" icon="web-icon-alert-default" name="Alerts" alerts="1">
<h2>This is pfe-navigation-dropdown</h2>
<pfe-cta pfe-priority="primary">
Expand All @@ -474,7 +474,7 @@ <h2>This is pfe-navigation-dropdown</h2>
</div>

<!-- Example of custom button -->
<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<button class="pfe-navigation__custom-link" data-analytics-text="language">
<pfe-icon icon="web-globe" size="sm" aria-hidden="true"></pfe-icon>
Language
Expand Down Expand Up @@ -533,9 +533,19 @@ <h3>Select a language</h3>
</pfe-navigation-dropdown>
</div>

<pfe-navigation-account slot="pfe-navigation--account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
<div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
<!-- @todo: move form and label for="" and label id into shadow DOM -->
<!-- @todo: add a11y features to search form and submit button in shadow DOM -->
<form>
<label for="pfe-navigation__search-label2" class="sr-only">Search the Red Hat Customer Portal</label>
<input id="pfe-navigation__search-label2" type="text" placeholder="Search the Red Hat Customer Portal" />
<button aria-label="Submit Search">Search</button>
</form>
</div>

<pfe-navigation-account slot="account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>

<div slot="pfe-navigation--custom-links" class="pfe-navigation__site-switcher">
<div slot="secondary-links" class="pfe-navigation__site-switcher">
<pfe-navigation-dropdown dropdown-width="full" icon="web-icon-grid-3x3" name="All Red Hat">
<site-switcher></site-switcher>
</pfe-navigation-dropdown>
Expand Down Expand Up @@ -654,7 +664,7 @@ <h2>Other demos:</h2>
}
var nav = document.querySelector('pfe-navigation');
var newDropdownWrapper = document.createElement('div');
newDropdownWrapper.setAttribute('slot', 'pfe-navigation--custom-links');
newDropdownWrapper.setAttribute('slot', 'secondary-links');
newDropdownWrapper.innerHTML =
'<pfe-navigation-dropdown dropdown-width="' + width + '" icon="web-cart" name="' + name + '" alerts="1">' +
'<h2>This is pfe-navigation-dropdown</h2>' +
Expand Down
6 changes: 3 additions & 3 deletions elements/pfe-navigation/demo/index_react.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,20 +263,20 @@ <h3>
</li>
</ul>

<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<a href="#">
<pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
Custom Link
</a>
</div>
<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<button>
<pfe-icon icon="web-cart" pfe-size="md" aria-hidden="true"></pfe-icon>
Cart
</button>
</div>

<div slot="pfe-navigation--search" className="pfe-navigation__search pfe-navigation__search--default-styles">
<div slot="search" className="pfe-navigation__search pfe-navigation__search--default-styles">
<form>
<label htmlFor="pfe-navigation__search-label1" className="sr-only">Search the Red Hat Customer Portal</label>
<input id="pfe-navigation__search-label1" type="text" placeholder="Search the Red Hat Customer Portal" />
Expand Down
6 changes: 3 additions & 3 deletions elements/pfe-navigation/demo/index_vue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,20 +272,20 @@ <h3>
</li>
</ul>

<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<a href="#">
<pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
Custom Link
</a>
</div>
<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<button>
<pfe-icon icon="web-cart" pfe-size="md" aria-hidden="true"></pfe-icon>
Cart
</button>
</div>

<div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
<div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
<!-- @todo: move form and label for="" and label id into shadow DOM -->
<!-- @todo: add a11y features to search form and submit button in shadow DOM -->
<form>
Expand Down
4 changes: 2 additions & 2 deletions elements/pfe-navigation/demo/pfe-navigation.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,14 +274,14 @@
// </li>
// </ul>

// <li slot="pfe-navigation--custom-links">
// <li slot="secondary-links">
// <a href="#">
// <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
// Custom Link
// </a>
// </li>

// <div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
// <div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
// <!-- @todo: move form and label for="" and label id into shadow DOM -->
// <!-- @todo: add a11y features to search form and submit button in shadow DOM -->
// <form>
Expand Down
4 changes: 2 additions & 2 deletions elements/pfe-navigation/demo/single-nav-sticky-alert-banner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -672,7 +672,7 @@ <h3>
</li>
</ul>

<div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
<div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
<!-- @todo: move form and label for="" and label id into shadow DOM -->
<!-- @todo: add a11y features to search form and submit button in shadow DOM -->
<form>
Expand All @@ -682,7 +682,7 @@ <h3>
</form>
</div>

<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<a href="#">
<pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
Custom Link
Expand Down
4 changes: 2 additions & 2 deletions elements/pfe-navigation/demo/single-nav-sticky.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,7 @@ <h3>
</li>
</ul>

<div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
<div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
<!-- @todo: move form and label for="" and label id into shadow DOM -->
<!-- @todo: add a11y features to search form and submit button in shadow DOM -->
<form>
Expand All @@ -505,7 +505,7 @@ <h3>
</form>
</div>

<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<a href="#">
<pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
Custom Link
Expand Down
4 changes: 2 additions & 2 deletions elements/pfe-navigation/demo/single-nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,14 +393,14 @@ <h3>
</li>
</ul>

<div slot="pfe-navigation--custom-links">
<div slot="secondary-links">
<a href="#">
<pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
Custom Link
</a>
</div>

<div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
<div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
<!-- @todo: move form and label for="" and label id into shadow DOM -->
<!-- @todo: add a11y features to search form and submit button in shadow DOM -->
<form>
Expand Down
2 changes: 1 addition & 1 deletion elements/pfe-navigation/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion elements/pfe-navigation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"ie-polyfill.js"
]
},
"version": "1.0.50",
"version": "1.0.51",
"publishConfig": {
"access": "public"
},
Expand Down
8 changes: 4 additions & 4 deletions elements/pfe-navigation/src/pfe-navigation--lightdom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ pfe-navigation {

// Slotted content styles
// --------------------------------------------------------
[slot='pfe-navigation--custom-links'] {
[slot='secondary-links'] {
@include secondary-links-li;

> a,
Expand Down Expand Up @@ -224,7 +224,7 @@ pfe-navigation {
position: relative;
}

// Slotted li to pfe-navigation--custom-links after the component has mounted
// Slotted li to secondary-links after the component has mounted
.pfe-navigation__custom-dropdown__wrapper {
display: block;
}
Expand Down Expand Up @@ -253,7 +253,7 @@ pfe-navigation {
}
}

&[breakpoint='mobile'] [slot="pfe-navigation--custom-links"][mobile-slider] .pfe-navigation__dropdown-wrapper {
&[breakpoint='mobile'] [slot="secondary-links"][mobile-slider] .pfe-navigation__dropdown-wrapper {
$vertical-offset: pfe-local(PaddingVertical, $region: mobile-dropdown);
$horizontal-offset: pfe-local(PaddingHorizontal, $region: mobile-dropdown);
position: absolute;
Expand Down Expand Up @@ -542,7 +542,7 @@ pfe-navigation {
}
}

pfe-navigation pfe-navigation-account[slot="pfe-navigation--account"] {
pfe-navigation pfe-navigation-account[slot="account"] {
width: 100%;
background: pfe-local(Background, $region: dropdown);
}
8 changes: 4 additions & 4 deletions elements/pfe-navigation/src/pfe-navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,24 @@

<div class="pfe-navigation__secondary-links-wrapper" id="pfe-navigation__secondary-links-wrapper">
<div>
<button class="pfe-navigation__search-toggle" id="secondary-links__button--search" hidden>
<button class="pfe-navigation__search-toggle" id="secondary-links__button--search" hidden data-analytics-text="Search" data-analytics-category="Search" data-analytics-level="1">
<pfe-icon icon="web-search" pfe-size="sm" aria-hidden="true"></pfe-icon>
<span id="secondary-links__button--search-text">Search</span>
</button>
<div class="pfe-navigation__search-dropdown-wrapper" id="pfe-navigation__search-wrapper--md">
<slot name="pfe-navigation--search" class="pfe-navigation__search" id="search-slot">
<slot name="search" class="pfe-navigation__search" id="search-slot">
</slot>
</div>
</div>

<slot name="pfe-navigation--custom-links" id="pfe-navigation--custom-links"></slot>
<slot name="secondary-links" id="secondary-links"></slot>

</div>
</div>
</div>

<div class="pfe-navigation__account-wrapper" id="pfe-navigation__account-wrapper">
<slot name="pfe-navigation--account" id="pfe-navigation__account-slot" class="pfe-navigation__dropdown-wrapper pfe-navigation__dropdown-wrapper--account pfe-navigation__dropdown-wrapper--invisible"></slot>
<slot name="account" id="pfe-navigation__account-slot" class="pfe-navigation__dropdown-wrapper pfe-navigation__dropdown-wrapper--account pfe-navigation__dropdown-wrapper--invisible"></slot>
</div>

</nav>
Expand Down
Loading