PatternFly Element | Site switcher element

Usage

This web component is responsible for loading the Red Hat site switcher which allows site visitors to navigate between Red Hat web properties.

<site-switcher></site-switcher>

Attributes

• lang: The lang attribute is used to specify the desired language of the loaded content. The component will default to english in its absence. Currently this attribute must be set manually.

Dev

`npm start`

Build

`npm run build`

Demo

From the PFElements root directory, run:

`npm run demo`

Setting the language

Language is set with the lang attribute on the site-switcher tag. Ideally this is done server side, but it will update if it's changed after the site switcher has loaded.

The options are:

• en
• de
• es
• fr
• it
• ja
• ko
• pt
• zh

For example:

<!-- German -->
<site-switcher lang="de"></site-switcher>
<!-- French -->
<site-switcher lang="fr"></site-switcher>

Setting the "You are here" status

New Approach

Use the html attribute site and set it to one of the following values:

• rhdc: RedHat.com
• customer-portal: access.redhat.com
• developers: developers.redhat.com
• connect: connect.redhat.com

<site-switcher site="connect"></site-switcher>

Legacy Support for "You are here" Functionality

Originally this component had a system of custom properties to set "You are Here", which was a little hard to explain and work with. To keep support of this approach, if the site attribute is not set, the component checks one of the CSS custom properties:

These are the 4 custom properties and values legacy support looks for at load:

• RedHat.com: --rhdc--label: var(--label--you-are-here);
• Customer Portal: --customer-portal--label: var(--label--you-are-here);
• Developers: --developers--label: var(--label--you-are-here);
• Partner Connect: --connect--label: var(--label--you-are-here);

As long as it's set on a parent of the site switcher (e.g. :root, body, etc.), or the site switcher itself, it should work; but it's slightly less performant.

Site Switcher Styles

Originally the styles were published separately when RedHat.com was hosting the HTML.

So instead of finding a new place to staticly publish the CSS and figure out how to get it loaded correctly on each site with CORS and other headaches, the CSS is in the component and part of this build.

This project parses the Sass, deals with minification, and then knows how to cram that into the javascript. Unfortuantely it also puts those styles in the shadow DOM, which is empty.

So when the site switcher content is injected in the light DOM the code is also moving the <style> tag to the light DOM. This is an odd approach, but the CSS is scoped well to not effect anything except the site switcher, and given a specificity boost to try and make sure the site styles don't mess with it.