opc-footer component 👋

A standardized web component based on Lit Element for Red Hat One Platform Footer.

Usage

Footer with links:

• The links needs to have following data type which is defined in ./types.d.ts file. Below is the mock data example.
• use the opcLinkCatagories setter function to add links.

const links = [
  { "category":"Group name 1",
    "links":[
      { "text":"Lorem ipsum", "href":"https://example.com" },
      { "text":"Lorem ipsum" },
    ]},
  { "category":"Group name 2",
    "links":[
      { "text":"Lorem ipsum", "href":"https://example.com" },
      { "text":"Lorem ipsum" },
      { "text":"Lorem ipsum" },
  ]},
];

const myFooterEl = document.querySelector('opc-footer');
myFooterEl.opcLinkCatagories = links;

• The Links with no path fires the custom event called opc-footer-link:click, so the user can add custom behavior. for example

  const myFooterElement = document.querySelector('opc-footer');
  myFooterElement.addEventListener('opc-footer-link:click', (e) => {
    console.log(e);
    /// custom behaviors.
  });

Default with light theme:

<opc-footer></opc-footer>

Dark theme: in html

<opc-footer theme="dark"></opc-footer>

as well you can change the theme in js too by selecting the element reference.

const myFooterEl = document.querySelector('opc-footer');
myFooterEl.theme = 'dark';

Slot

The opc-footer component supports the slot for foot note which is reserved for copyright text. By default it shows the text as Copyright All Rights Reserved. You can use copyright slot to provide custom text as shown in below example

<opc-footer>
  <span slot="copyright">My Company Rights Reserved</span>
</opc-footer>

Attributes

theme

| Theme name | Value | | ----------------- | ------- | | light | #FFF | | dark | #000 |

link-catagories

We recommend to provide the links via js API but if you want to implement data goes down and events go up pattern then you can use the link-catagories attribute.

flat

The flat attribute removes the background cubes illustration from the footer component. By Default the value is false

for example:

<opc-footer flat="true"></opc-footer>

recommended

<opc-footer> 
</opc-footer>

const myFooterEl = document.querySelector('opc-footer');
myFooterEl.opcLinkCatagories = MockLinkData;

not recommended

<opc-footer link-catagories="${MockLinkData}"> 
</opc-footer>

CSS Variables

| CSS Variable name | Value | | ----------------- | ------- | | --opc-header--BackgroundColor | #FFF | | --opc-header--TextColor | #000 |

Development server

Install packages

npm run install

Run development server

npm run dev opc-footer

OR

npm run start opc-footer

Build

npm run build opc-footer

Run tests

npm run test

🤝 Contributors

👤 Sumeet Ingole

Show your support

Give a ⭐️ if this project helped you!

📝 License

This project is MIT licensed.