@bolttech/atoms-section-header 0.14.0 → 0.15.0

package/README.md

@@ -1,8 +1,86 @@
-# atoms-section-header
+# SectionHeader Component
 
-This library was generated with [Nx](https://nx.dev).
+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.
 
-## Running unit tests
+## Table of Contents
 
+- [Installation](#installation)
+- [Usage](#usage)
+- [Props](#props)
+- [Example](#example)
+- [Contributing](#contributing)
 
-Run `nx test atoms-section-header` to execute the unit tests via [Jest](https://jestjs.io).
+## Installation
+
+To use the **SectionHeader** component in your React application, you need to follow these steps:
+
+### Installation
+
+```bash
+npm install @edirect/frontend-foundations @bolttech/atoms-section-header
+```
+
+or
+
+```bash
+yarn add @edirect/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:
+
+```jsx
+import React from 'react';
+import {SectionHeader} from '@bolttech/atoms-section-header';
+import {bolttechTheme, BolttechThemeProvider} from "@edirect/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:
+
+```jsx
+<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.

package/index.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var styled = require('styled-components');
 var frontendFoundations = require('@edirect/frontend-foundations');
 
@@ -42,19 +43,20 @@ const IlustrationContainer = /*#__PURE__*/styled__default["default"].div.withCon
   componentId: "sc-xtf6u-4"
 })(["display:flex;position:relative;justify-content:flex-end;align-items:flex-end;@media only screen and (max-width:1431px){width:60%;height:100%;svg{max-width:100%;max-height:100%;height:100%;}}"]);
 
-function SectionHeader({
-  dataTestId = 'section-header-data-testid',
+const SectionHeader = /*#__PURE__*/react.forwardRef(({
+  dataTestId: _dataTestId = 'section-header-data-testid',
   title,
   icon,
   background
-}) {
+}, ref) => {
   return jsxRuntime.jsxs(SectionHeaderContainer, {
     fullWidth: true,
-    "data-testid": dataTestId,
+    "data-testid": _dataTestId,
+    ref: ref,
     children: [jsxRuntime.jsx(SectionHeaderLabel, {
       variant: "h1",
       type: "headings",
-      "data-testid": `${dataTestId}-label`,
+      "data-testid": `${_dataTestId}-label`,
       children: title
     }), jsxRuntime.jsxs(IlustrationContainer, {
       children: [icon && jsxRuntime.jsx(Icon, {
@@ -64,6 +66,6 @@ function SectionHeader({
       })]
     })]
   });
-}
+});
 
 exports.SectionHeader = SectionHeader;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bolttech/atoms-section-header",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@edirect/frontend-foundations": "0.0.58",
+    "@edirect/frontend-foundations": "0.0.67",
     "react": "18.2.0",
     "styled-components": "5.3.6"
   },

package/src/lib/atoms-section-header.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SectionHeaderProps } from './atoms-section-header.type';
-export declare function SectionHeader({ dataTestId, title, icon, background, }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export default SectionHeader;

package/src/lib/atoms-section-header.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const SectionHeaderContainer: import("styled-components").StyledComponent<({ attributes, className, children, fullWidth, fullHeight, center, ...rest }: import("@edirect/frontend-foundations/dist/src/shared/types/row.type").RowPropsType) => JSX.Element, any, {}, never>;
-export declare const SectionHeaderLabel: import("styled-components").StyledComponent<({ className, children, type, variant, text, ...rest }: import("@edirect/frontend-foundations/dist/src/shared/types/typography.type").TypographyPropsType) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;
+export declare const SectionHeaderContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@edirect/frontend-foundations/dist/src/shared/types/row.type").RowPropsType & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const SectionHeaderLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@edirect/frontend-foundations/dist/src/shared/types/typography.type").TypographyPropsType & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const Background: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Icon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IlustrationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;