Header

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/header"></script>

NPM#

npm i @pearson-ux/header --save

Demo#

Important note Wrap your header in a div with 100% width.

Light Header#

<div style="width:100%">    <pearson-header theme="light" name="David ODey"> </pearson-header></div>

Dark Header#

Important note Add a background color style to the wrapper div to acheive a background color.

<div style="width:100%" class="your-color-class">    <pearson-header theme="dark" name="David ODey"> </pearson-header></div>

Header with link in logo#

<div style="width:100%">    <pearson-header logolink="http://www.pearson.com" theme="light"> </pearson-header></div>

Custom Markup#

<div style="width:100%">    <pearson-header name="David ODey">        <img src="https://via.placeholder.com/468x60?text=Your+Image"/>    </pearson-header></div>

Logged In#

<div style="width:100%">    <pearson-header loggedIn> </pearson-header></div>

Logged In w/ Notifications#

<div style="width:100%">    <pearson-header notifications="5" loggedIn> </pearson-header></div>

Structure#

To add a header, add the markup up at the top of the document above the <main id="main"> element.

Important note The header component is not connected to any pearson authentication services.

<body>    <div class="full-width">        <pearson-header theme="dark" name="David ODey"> </pearson-header>    </div>    <main id="main">    <!-- place your app markup here -->    </main></body>

Authentication#

You will need to build a script for users to authenticate through console. This does not come with the header and is completely seperate. The header is flexible and allows you to pass in attributes to toggle the different states. Here is the recommended user flow to achieve these results.

A user clicks sign in and they are redirected to console.
The user logs in through console and gets redirected back to your application.
After redirect add the following attributes to the header that are provided through authentication.
1. name="full name"
2. notifications="number"
3. loggedIn
When a user clicks log out, the state of the header changes and an event fires allowing you to make any service calls you need to so you can log out of the application"

API#

Required#

All these attributes are required AFTER a user has been authenticated.

Attribute	Type	Default	Description
`notifications`	`String`	`'0'`	The number of notifications the user has, this will display in the header.
`name`	`String`	`unset`	The name of the user, used to build the avatar
`loggedin`	`Bool`	`false`	When true, the header changes to a logged in state.

Optional#

All these attributes are optional.

Attribute	Type	Default	Description
`theme`	`String`	`dark`	Choose between a 'light' and 'dark' header theme
`logolink`	`String`	`unset`	Enter a URL that you want the logo to direct to, if unset the logo link is removed.

Events#

pearson-header emits one event: logout.

Event	Description
`logout`	Will fire when the user clicks the logout button

  const headerNode = document.querySelector('pearson-header');
  headerNode.addEventListener('logout', function (e) {    // Communicate to the authentication service and log the user out.  });

HTML Markup#

Do you want to build out a custom header? No problem, use the markup below along with CSS to make your own header.

Here are some basic practices to make sure the header you build is accessible.

Header Markup#

<header class="gr-header light">    <div class="logo" role="img" aria-label="Pearson"></div>    <div class="actions">        <button class="gr-btn icon-btn-18">            <div class="avatar">                <span class="initials">DO</span>                <span class="notification"></span>            </div>            <svg id="expand" focusable="false" class="icon-24" aria-hidden="true">                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#drop-down-24"></use>            </svg>            <svg id="collapse" focusable="false" class="icon-24" aria-hidden="true">                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#drop-up-24"></use>            </svg>        </button>    </div></header>

Menu Markup#

<div class="header-menu">    <ul>        <li>            <button class="gr-btn header-btn">                <div class="text">                    <span class="gr-font-large">Log out</span>                    <span class="gr-meta">Sign out of all Pearson products</span>                </div>                <div class="icon">                    <svg focusable="false" class="icon-24" aria-hidden="true">                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#next-24"></use>                    </svg>                </div>            </button>        </li>    </ul></div>