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.