New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@one-platform/opc-footer

Package Overview
Dependencies
Maintainers
7
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@one-platform/opc-footer

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

  • 0.0.4-prerelease
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
72
increased by71.43%
Maintainers
7
Weekly downloads
 
Created
Source

Version Build Status Maintenance

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

Usage

  • 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 nameValue
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 nameValue
--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.

FAQs

Package last updated on 16 Sep 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc