@bolttech/atoms-header

Header Component

A responsive header component that includes a logo, call-to-action button, navigation links, icons, and language selector.

Installation

Use the package manager npm or yarn to install the component and its dependencies.

npm install @bolttech/frontend-foundations @bolttech/atoms-header

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-header

Props

The Header component accepts the following properties:

Prop	Type	Description
id	string	The id attribute of the header component.
dataTestId	string	The data-testid attribute for testing.
logo	object	Object containing the information of the logo.
cta	object	An object containing variant, label, and onClick properties for the CTA button.
links	array	An array of objects containing href, label, and selected properties for links.
icons	array	An array of objects containing href and icon properties for icons.
languages	array	An array of objects containing href and label properties for language selector links.

Usage

import React from 'react';
import { Header } from '@bolttech/atoms-header';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  const ctaButton = {
    variant: 'primary',
    label: 'Get Started',
    onClick: () => console.log('Button Clicked'),
  };

  const navLinks = [
    { href: '/home', label: 'Home', selected: true },
    { href: '/about', label: 'About', selected: false },
    { href: '/contact', label: 'Contact', selected: false },
  ];

  const socialIcons = [
    { href: 'https://twitter.com', icon: 'https://example.com/twitter.png' },
    { href: 'https://facebook.com', icon: 'https://example.com/facebook.png' },
  ];

  const languages = [
    { href: '/en', label: 'EN' },
    { href: '/fr', label: 'FR' },
  ];

  const logo = { image: 'https://example.com/logo.png', href: '/' };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Header id="header" dataTestId="custom-header" logo={logo} cta={ctaButton} links={navLinks} icons={socialIcons} languages={languages} />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.