@one-platform/opc-footer

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@one-platform/opc-footer
0.0.4-prereleasea year ago2 years agoMinified + gzip package size for @one-platform/opc-footer in KB

Readme

opc-footer component 👋
Version Build Status Maintenance
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:
```html
`recommended`
```html
<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.