opc-header component 👋

A standardized web component based on Lit Element for Red Hat One Platform Header that uses Patternfly Breadcrumb and Links as button HTML component

Prerequisites

The opc-header component is partially dependent on the Patternfly library for breadcrumbs and links. So to avoid any missing styles, add the patternfly.css file before the component script tags.

Usage

Plain Header

 <opc-header heading="OPC Header"></opc-header>

Header with Breadcrumbs and Links

 <opc-header heading="OPC Header">
  <opc-header-breadcrumb slot="breadcrumb"></opc-header-breadcrumb>
  <opc-header-links slot="links"></opc-header-links>
 </opc-header>

For custom options,

• use the opcHeaderBreadcrumb setter function to set the header breadcrumb
• use the opcHeaderLinks setter function to set the header links

  const breadcrumbs = [
    {
      "name":"Section Home",
      "href":"#"
    },
    {
      "name":"Section Landing",
      "href":"#"
    }];

  const links = [
    {
      "name":"Link1",
      "href":"#",
      "icon":"fa-play-circle"
    },
    {
      "name":"Link2",
      "href":"#",
      "icon":"fa-question-circle"
    },
    {
      "name":"Link3",
      "href":"#",
      "icon":"fa-file"
    }];

  document.querySelector("opc-header-breadcrumb").opcHeaderBreadcrumb = breadcrumbs;
  document.querySelector("opc-header-links").opcHeaderLinks = links;

Header with color themes

 <opc-header heading="OPC Header" theme="dark">
  <opc-header-breadcrumb slot="breadcrumb"></opc-header-breadcrumb>
  <opc-header-links slot="links"></opc-header-links>
 </opc-header>

Header with lightDOM

 <opc-header heading="OPC Header" theme="red">
  <div slot="breadcrumb" id="breadcrumb">
    <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
      <ol class="pf-c-breadcrumb__list">
        <li class="pf-c-breadcrumb__item">
          <span class="pf-c-breadcrumb__item-divider">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
          </span>
          <a href="#" class="pf-c-breadcrumb__link">Section home</a>
        </li>
        <li class="pf-c-breadcrumb__item">
          <span class="pf-c-breadcrumb__item-divider">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
          </span>
          <a href="#" class="pf-c-breadcrumb__link pf-m-current" aria-current="page">Section landing</a>
        </li>
      </ol>
    </nav>
  </div>
  <div slot="links">
    <a class="pf-c-button pf-m-link" href="" style="--pf-c-button--m-link--Color: var(--opc-header__Links--Color);--pf-c-button--FontSize: var(--pf-global--FontSize--sm);">
      <span class="pf-c-button__icon pf-m-start">
        <i class="fas fa-play-circle" aria-hidden="true"></i>
      </span>Link1
    </a>
    <a class="pf-c-button pf-m-link" href="" style="--pf-c-button--m-link--Color: var(--opc-header__Links--Color);--pf-c-button--FontSize: var(--pf-global--FontSize--sm);">
      <span class="pf-c-button__icon pf-m-start">
        <i class="fas fa-question-circle-o" aria-hidden="true"></i>
      </span>Link2
    </a>
  </div>
 </opc-header>

Slots

There are two optional slots for header breadcrumb and links.

Default slot

Place the opc-header-breadcrumb and opc-header-links component here.

Attributes

heading Adds a heading to the header component

theme Options include default, dark, red, blue, cyan. Please use css variables provided with the component if you want to add more customizations.

| color | hex | |---------|------------------------------------------------------------------| | default | #ffffff | | dark | #000000 | | red | #be0000 | | blue | #316DC1 | | cyan | #1B8793 |

Variable hooks

Available hooks for styling header, breadcrumb and link colors include:

| Variable name | Default value | | --------------------------------------------| ---------------------------------------------------------------------------| | --opc-header--BackgroundColor | #ffffff | | --opc-header--Color | #000000 | | --opc-header--Width | 100% | | --opc-header__BreadcrumbDivider--Color | #000000 | | --opc-header__BreadcrumbLink--Color | var(--pf-global--link--Color) | | --opc-header__Links--Color | var(--pf-global--link--Color) |

Events

None as of yet

Development server

• Run development server

npm run dev opc-header

OR

npm run start opc-header

Build

npm run build opc-header

Run tests

npm run test

🤝 Contributors

👤 Diwanshi Pandey