@nice-digital/nds-action-banner 4.1.2-alpha.0 → 4.2.1-alpha.0

package/es/ActionBanner.d.ts

@@ -7,5 +7,6 @@ export interface ActionBannerProps {
     cta: ReactNode;
     className?: string;
     image?: string;
+    headingLevel?: number | string;
 }
 export declare const ActionBanner: React.FC<ActionBannerProps>;

package/es/ActionBanner.js

@@ -19,7 +19,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 require("../scss/action-banner.scss");
 const ActionBanner = (props) => {
-    const { variant, title, children, cta, className, image } = props, rest = __rest(props, ["variant", "title", "children", "cta", "className", "image"]);
+    const { variant, title, children, cta, className, image, headingLevel = 2 } = props, rest = __rest(props, ["variant", "title", "children", "cta", "className", "image", "headingLevel"]);
     const kebabCaseVariantClassName = variant
         ? `${variant.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`
         : "";
@@ -28,6 +28,11 @@ const ActionBanner = (props) => {
         [`action-banner--${kebabCaseVariantClassName}`]: variant,
         [`${className}`]: className
     };
-    return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: (0, classnames_1.default)(classes), "data-component": `action-banner${variant ? `--${variant}` : ""}` }, rest, { children: [image && variant === "fullWidth" ? ((0, jsx_runtime_1.jsx)("div", { className: "action-banner--full-width__image-container", style: { backgroundImage: `url(${image})` } })) : null, (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "action-banner__container" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "action-banner__inner" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "action-banner__text" }, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "action-banner__title" }, { children: title })), children && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "action-banner__intro" }, { children: children }))] })), cta && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "action-banner__actions" }, { children: cta }))] })) }))] })));
+    const parsedHeadingLevel = typeof headingLevel === "string"
+        ? parseInt(headingLevel, 10)
+        : headingLevel;
+    const validHeadingLevel = parsedHeadingLevel >= 2 && parsedHeadingLevel <= 6 ? parsedHeadingLevel : 2;
+    const HeadingLevel = `h${validHeadingLevel}`;
+    return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: (0, classnames_1.default)(classes), "data-component": `action-banner${variant ? `--${variant}` : ""}` }, rest, { children: [(variant === "fullWidth" || variant === "fullWidthSubtle") && image && ((0, jsx_runtime_1.jsx)("div", { className: `action-banner--${kebabCaseVariantClassName}__image-container`, style: { backgroundImage: `url(${image})` } })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "action-banner__container" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "action-banner__inner" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "action-banner__text" }, { children: [(0, jsx_runtime_1.jsx)(HeadingLevel, Object.assign({ className: "action-banner__title" }, { children: title })), children && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "action-banner__intro" }, { children: children }))] })), cta && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "action-banner__actions" }, { children: cta }))] })) }))] })));
 };
 exports.ActionBanner = ActionBanner;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-action-banner",
-	"version": "4.1.2-alpha.0",
+	"version": "4.2.1-alpha.0",
 	"description": "Action banner component for the NICE Design System",
 	"keywords": [
 		"banner"
@@ -31,8 +31,8 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/icons": "^6.0.1",
-		"@nice-digital/nds-core": "^4.1.2-alpha.0",
+		"@nice-digital/icons": "^6.1.5",
+		"@nice-digital/nds-core": "^4.0.14",
 		"classnames": "^2.3.1"
 	},
 	"peerDependencies": {
@@ -47,5 +47,5 @@
 		"@types/node": "^18.11.9",
 		"typescript": "^4.8.4"
 	},
-	"gitHead": "6ad38eba73e88e959f6dbd37ff316d7002f457df"
+	"gitHead": "02811394f31db6456ee72bda7ce367a3f06c6e9c"
 }

package/scss/action-banner.scss

@@ -14,6 +14,7 @@
 
 /// Action banner component. Used to highlight
 /// and give context to a call-to-action.
+///
 /// Modifiers:
 /// - subtle
 ///
@@ -63,7 +64,8 @@
     }
   }
 
-  &--full-width {
+  &--full-width,
+  &--full-width-subtle {
     @include layout.fullWidth();
     @include typography.links-default;
     background: colours.$action-banner-full-width-background;
@@ -149,7 +151,8 @@
   }
 
   @include media-queries.mq($from: sm) {
-    &--full-width {
+    &--full-width,
+    &--full-width-subtle {
       &__image-container {
         aspect-ratio: 21 / 9;
       }
@@ -159,7 +162,8 @@
   @include media-queries.mq($from: md) {
     @include layout.clearfix;
 
-    &--full-width {
+    &--full-width,
+    &--full-width-subtle {
       &__image-container {
         aspect-ratio: unset;
         bottom: 0;
@@ -175,7 +179,6 @@
         }
 
         &::before {
-          background: colours.$action-banner-full-width-background;
           content: '';
           flex: 0 0 200px;
           pointer-events: none;
@@ -192,6 +195,22 @@
       }
     }
 
+    &--full-width {
+      &__image-container {
+        &::before {
+          background: colours.$action-banner-full-width-background;
+        }
+      }
+    }
+
+    &--full-width-subtle {
+      &__image-container {
+        &::before {
+          background: colours.$action-banner-full-width-subtle-background;
+        }
+      }
+    }
+
     &__text {
       margin-bottom: 0;
       width: math.percentage(3 * 0.25);