@bolttech/atoms-section-header 0.16.0 → 0.17.0

package/index.cjs

@@ -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,6 +1,6 @@
 {
   "name": "@bolttech/atoms-section-header",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",

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

@@ -2,5 +2,7 @@
 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 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>;
 };