@cpelements/rh-site-switcher
v1.0.12
Published
Site switcher element for cpelements
Downloads
348
Readme
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
zh-hans
For example:
<!-- German -->
<site-switcher lang="de"></site-switcher>
<!-- French -->
<site-switcher lang="fr"></site-switcher>
<!-- Chinese -->
<site-switcher lang="zh-hans"></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.comcustomer-portal
: access.redhat.comdevelopers
: developers.redhat.comconnect
: 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.