@bolttech/atoms-section-header 0.16.0 → 0.18.0

package/README.md

@@ -17,13 +17,13 @@ To use the **SectionHeader** component in your React application, you need to fo
 ### Installation
 
 ```bash
-npm install @edirect/frontend-foundations @bolttech/atoms-section-header
+npm install @bolttech/frontend-foundations @bolttech/atoms-section-header
 ```
 
 or
 
 ```bash
-yarn add @edirect/frontend-foundations @bolttech/atoms-section-header
+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.
@@ -37,7 +37,7 @@ 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";
+import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";
 
 function App() {
   return (

package/index.cjs

@@ -6,7 +6,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');
+var frontendFoundations = require('@bolttech/frontend-foundations');
 var uiUtils = require('@bolttech/ui-utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -1148,13 +1148,21 @@ const Background = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "atoms-section-headerstyle__Background",
   componentId: "sc-xtf6u-2"
 })(["display:flex;align-items:flex-end;z-index:0;"]);
+const BackgroundImage = /*#__PURE__*/styled__default["default"].img.withConfig({
+  displayName: "atoms-section-headerstyle__BackgroundImage",
+  componentId: "sc-xtf6u-3"
+})(["display:flex;align-items:flex-end;z-index:0;max-height:150px;"]);
 const Icon = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "atoms-section-headerstyle__Icon",
-  componentId: "sc-xtf6u-3"
+  componentId: "sc-xtf6u-4"
 })(["position:absolute;display:flex;bottom:0;z-index:1;transform:translate(-50%);"]);
+const IconImage = /*#__PURE__*/styled__default["default"].img.withConfig({
+  displayName: "atoms-section-headerstyle__IconImage",
+  componentId: "sc-xtf6u-5"
+})(["position:absolute;display:flex;bottom:0;z-index:1;transform:translate(-50%);max-height:150px;width:auto;"]);
 const IlustrationContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "atoms-section-headerstyle__IlustrationContainer",
-  componentId: "sc-xtf6u-4"
+  componentId: "sc-xtf6u-6"
 })(["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%;}}"]);
 
 const SectionHeader = /*#__PURE__*/react.forwardRef((_a, ref) => {
@@ -1165,6 +1173,28 @@ const SectionHeader = /*#__PURE__*/react.forwardRef((_a, ref) => {
       background
     } = _a,
     props = __rest(_a, ["dataTestId", "title", "icon", "background"]);
+  const renderIcon = () => {
+    if (icon && typeof icon === 'string') return jsxRuntime.jsx(IconImage, {
+      "data-testid": `${dataTestId}-iconimg`,
+      src: icon
+    });
+    if (icon && typeof icon !== 'string') return jsxRuntime.jsx(Icon, {
+      "data-testid": `${dataTestId}-icon`,
+      children: icon
+    });
+    return null;
+  };
+  const renderBackground = () => {
+    if (background && typeof background === 'string') return jsxRuntime.jsx(BackgroundImage, {
+      "data-testid": `${dataTestId}-backgroundimg`,
+      src: background
+    });
+    if (background && typeof background !== 'string') return jsxRuntime.jsx(Background, {
+      "data-testid": `${dataTestId}-background`,
+      children: background
+    });
+    return null;
+  };
   return jsxRuntime.jsxs(SectionHeaderContainer, Object.assign({
     fullWidth: true,
     "data-testid": dataTestId,
@@ -1177,11 +1207,7 @@ const SectionHeader = /*#__PURE__*/react.forwardRef((_a, ref) => {
     }, uiUtils.applyDataAttributes(props, 'title'), {
       children: title
     })), jsxRuntime.jsxs(IlustrationContainer, {
-      children: [icon && jsxRuntime.jsx(Icon, {
-        children: icon
-      }), background && jsxRuntime.jsx(Background, {
-        children: background
-      })]
+      children: [renderIcon(), renderBackground()]
     })]
   }));
 });

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@bolttech/atoms-section-header",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
+    "@bolttech/default-theme": "0.0.1",
+    "@bolttech/frontend-foundations": "0.0.1",
     "@bolttech/ui-utils": "0.1.1",
-    "@edirect/frontend-foundations": "0.0.69",
     "react": "18.2.0",
     "styled-components": "5.3.6"
   },

package/src/index.d.ts

@@ -1,2 +1,2 @@
 export * from './lib/atoms-section-header';
-export { SectionHeaderProps } from './lib/atoms-section-header.type';
+export type { SectionHeaderProps } from './lib/atoms-section-header.type';

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

@@ -2,7 +2,7 @@ import React from 'react';
 export declare const SectionHeader: React.ForwardRefExoticComponent<import("@bolttech/ui-utils").DefaultProps & {
     dataTestId?: string | undefined;
     title: string;
-    icon?: React.ReactElement<SVGElement, string | React.JSXElementConstructor<any>> | undefined;
-    background?: React.ReactElement<SVGElement, string | React.JSXElementConstructor<any>> | undefined;
+    icon?: string | React.ReactElement<SVGElement, string | React.JSXElementConstructor<any>> | undefined;
+    background?: string | React.ReactElement<SVGElement, string | React.JSXElementConstructor<any>> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default SectionHeader;

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

@@ -1,6 +1,16 @@
 /// <reference types="react" />
-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 SectionHeaderContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("dist/libs/frontend-foundations/src/lib/shared/types/row.type").RowPropsType & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const SectionHeaderLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("dist/libs/utils/src").DefaultProps & {
+    className?: string | undefined;
+    children?: string | string[] | undefined;
+    type?: string | undefined;
+    variant?: string | undefined;
+    align?: "center" | "left" | "right" | undefined;
+    text?: string | undefined;
+    htmlFor?: string | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLParagraphElement | HTMLSpanElement | null>>, any, {}, never>;
 export declare const Background: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BackgroundImage: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const Icon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconImage: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const IlustrationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -13,7 +13,7 @@ export type SectionHeaderProps = DefaultProps & {
     /** Main text that will be displayed on the section header */
     title: string;
     /** SVG that will be displayed on top */
-    icon?: React.ReactElement<SVGElement>;
+    icon?: string | React.ReactElement<SVGElement>;
     /** SVG that will be displayed as the background of the icon */
-    background?: React.ReactElement<SVGElement>;
+    background?: string | React.ReactElement<SVGElement>;
 };