[pfe-navigation (1.x)] Should have a general purpose, utility slot for secondary links

[eyevana]

Unless I use one of the named slots provided (login, language, etc.) I loose some of the styling for secondary links on the right side of the navigation. I think we should add one utility slot for general purpose usage.

[eyevana]

Help & Service accounts are both direct links, btw.

[samlinville]

Some context for why this is necessary as a universal nav–
Catalog is a great example of a use case that doesn't fit the mainstream four named slots (login, language, etc...). As we continue to expand the use of this nav to other *.redhat.com properties, there will almost definitely be more use cases for a general purpose slot (cloud.redhat.com would likely be on this list, if they decide to adopt this nav)

[castastrophe]

Some possible discovery questions to answer before we start coding:

• Direct links or dropdowns?
  • Note: pfe-navigation-item[variant="wind"] has been used to indicate a direct link + icon in other use-cases.
• Should the new slot support both (dropdown and direct links)?
• Should the slot allow you to configure it's position among the other utility links (right or left) for example? Or should the links always appear in the order they're added to the DOM (not sure how we accomplish that with the template)?

[castastrophe]

Can you include the mock-up?

[samlinville]

https://sketch.cloud/s/V81ga/a/9gjMJM

@castastrophe Here's the mockup. Let me sync up with @eyevana today to make sure we have the correct answers to your discovery questions.

[eyevana]

@castastrophe the slot should support both dropdown & direct links. For your last question, are you referring to how the general slot would position itself amongst the other utility slots (language, search, login, and site-switcher)? So if we indicate left on the general slot, it would show up before language (assuming that's provided)? & right would place it after site-switcher, for example?

[eyevana]

I just want to add that we'll need the mobile version of this new slot too, and we should be able to use any icon, not just pfe-icon. I noticed that changing the pfe-icon to "web-user" for the "mobile-language" slot had no affect on it. It still displayed the globe.

<a slot="mobile-language" href="https://red-hat-ecosystem-catalog.gitbook.io/help/" pfe-icon="web-user">...

[kylebuch8]

Here's where I think we are:

1. The markup for utility items in the navigation need a slot for things that are not language, search, login, or the site switcher

${ this.has_slot("language") || this.has_slot("search") || this.has_slot("login") || this.has_slot("site-switcher") ? `<div class="pfe-navigation__utility">
      <!-- PUT STUFF HERE? -->
      <slot name="language"></slot>
      <slot name="search"></slot>
      <slot name="login"></slot>
      <slot name="site-switcher"></slot>
    </div>` : ""}

Where should the slot go? Before the language slot?

2. What happens on mobile? Do the new utility items appear before the login and language slots?

3. Do we need to play defense against a bunch of items added to the utility nav? Do we need to set a limit and possibly collapse others under a dropdown?

4. On a side note, do we have a help icon yet?