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.

``html

`

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
* zh-hans

For example:
`html






`

Setting the "You are here" status

$3


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

`html

`

$3


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