SectionHeader Component

The SectionHeader component is a React component designed to provide a header for sections with an optional icon or background illustration. This component allows you to create visually appealing section headers with customizable titles and decorative elements.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the SectionHeader component in your React application, you need to follow these steps:

Installation

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

or

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

Once you have the required dependencies installed, you can start using the SectionHeader component in your React application.

Usage

The SectionHeader component provides a visually appealing section header with an optional icon or background illustration. It supports customization through various props.

To use the component, import it and include it in your JSX:

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

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <SectionHeader
        title="Welcome to our Section"
        icon={<YourIconComponent/>}
        background={<YourBackgroundComponent/>}
        dataTestId="section-header-component"
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The SectionHeader component accepts the following props:

| Prop | Type | Description | |--------------|---------------|---------------------------------------------------| | dataTestId | string | The data-testid attribute for testing purposes. | | title | string | The title text of the section header. | | icon | ReactNode | An optional icon component to be displayed. | | background | ReactNode | An optional background illustration component. |

Example

Here's an example of using the SectionHeader component:

<SectionHeader
  title="Discover Our New Collection"
  icon={<Icon name="bookmark" />}
  background={<Illustration src={illustrationUrl} />}
  dataTestId="section-header-component"
/>

This will render a SectionHeader component with a title, an icon, and a background illustration.

Contributing

Contributions to the SectionHeader component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.