@nice-digital/nds-action-banner 4.0.8 → 4.0.9

package/es/ActionBanner.d.ts

@@ -1,19 +1,11 @@
 import React, { ReactNode } from "react";
 import "../scss/action-banner.scss";
-interface ActionBannerProps {
+export interface ActionBannerProps {
     title: string;
-    variant?: "default" | "subtle";
+    variant?: "default" | "subtle" | "fullWidth" | "fullWidthSubtle";
     children: ReactNode[] | ReactNode;
-    cta?: ReactNode;
-    onClosing?: Function;
+    cta: ReactNode;
     className?: string;
+    image?: string;
 }
-interface ActionBannerState {
-    isClosed: boolean;
-}
-export declare class ActionBanner extends React.Component<ActionBannerProps, ActionBannerState> {
-    constructor(props: ActionBannerProps);
-    closeClickHandler(): void;
-    render(): JSX.Element | null;
-}
-export {};
+export declare const ActionBanner: React.FC<ActionBannerProps>;

package/es/ActionBanner.js

@@ -16,38 +16,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionBanner = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Remove_1 = __importDefault(require("@nice-digital/icons/lib/Remove"));
 require("../scss/action-banner.scss");
-class ActionBanner extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isClosed: false
-        };
-        this.closeClickHandler = this.closeClickHandler.bind(this);
-    }
-    closeClickHandler() {
-        this.setState({
-            isClosed: true
-        });
-        if (typeof this.props.onClosing === "function")
-            this.props.onClosing(this);
-        else
-            throw new Error("The onClosing prop should be a function");
-    }
-    render() {
-        if (this.state.isClosed)
-            return null;
-        const _a = this.props, { variant, onClosing, title, children, cta, className } = _a, rest = __rest(_a, ["variant", "onClosing", "title", "children", "cta", "className"]);
-        const classes = {
-            "action-banner": true,
-            "action-banner--closeable": onClosing,
-            [`action-banner--${variant}`]: variant,
-            [`${className}`]: className
-        };
-        return ((0, jsx_runtime_1.jsx)("section", Object.assign({ className: (0, classnames_1.default)(classes), "data-component": `action-banner${variant ? `--${variant}` : ""}` }, rest, { children: (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 })), onClosing && ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: "action-banner__close", onClick: this.closeClickHandler }, { children: [(0, jsx_runtime_1.jsx)(Remove_1.default, {}), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "visually-hidden" }, { children: ["Close ", title] }))] })))] })) })) })));
-    }
-}
+const ActionBanner = (props) => {
+    const { variant, title, children, cta, className, image } = props, rest = __rest(props, ["variant", "title", "children", "cta", "className", "image"]);
+    const kebabCaseVariantClassName = variant
+        ? `${variant.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`
+        : "";
+    const classes = {
+        "action-banner": true,
+        [`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 }))] })) }))] })));
+};
 exports.ActionBanner = ActionBanner;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-action-banner",
-	"version": "4.0.8",
+	"version": "4.0.9",
 	"description": "Action banner component for the NICE Design System",
 	"keywords": [
 		"banner"
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@nice-digital/icons": "^6.0.1",
-		"@nice-digital/nds-core": "^4.0.8",
+		"@nice-digital/nds-core": "^4.0.9",
 		"classnames": "^2.3.1"
 	},
 	"peerDependencies": {
@@ -47,5 +47,5 @@
 		"@types/node": "^18.11.9",
 		"typescript": "^4.8.4"
 	},
-	"gitHead": "3b51e48a6c3006fa350adf2b125d6cad9454d7c7"
+	"gitHead": "79b8403759d3b64619e04e9313f56594a79882fb"
 }

package/scss/action-banner.scss

@@ -54,57 +54,144 @@
     }
   }
 
-  &__close {
-    @include focus.inverse-button-focus;
-    appearance: none;
-    background: 0;
-    border: 0;
-    color: colours.$text-inverse;
-    cursor: pointer;
-    line-height: 1;
-    padding: utils.rem(spacing.$small);
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 1;
+  &--subtle {
+    @include typography.links-default;
+    background: colours.$action-banner-subtle-background;
+    border: 1px solid colours.$action-banner-subtle-border;
+    color: colours.$text;
 
-    &:hover {
-      background: rgb(0 0 0 / 20%);
+    .action-banner__title {
+      color: colours.$text;
     }
 
-    &:focus {
-      @include focus.inverse-focus-style;
+    .action-banner__actions {
+      @include focus.default-button-focus;
     }
   }
 
-  &--subtle {
+  &--full-width {
+    @include layout.fullWidth();
     @include typography.links-default;
-    background: colours.$action-banner-subtle-background;
-    border: 1px solid colours.$action-banner-subtle-border;
-    color: colours.$text;
+    background: colours.$action-banner-full-width-background;
+    border: 1px solid colours.$action-banner-full-width-border;
+    color: colours.$text-inverse;
+    padding: 0;
+
+    .action-banner__intro * {
+      @include typography.lead();
+      margin-top: utils.rem(spacing.$medium);
+      margin-bottom: utils.rem(spacing.$large);
+    }
+
+    .action-banner__container {
+      min-height: 300px;
+      padding-top: utils.rem(spacing.$x-large);
+      padding-bottom: utils.rem(spacing.$x-large);
+    }
 
     .action-banner__title {
-      color: colours.$text;
+      @include typography.h2();
+      color: colours.$text-inverse;
+      margin: 0;
+    }
+
+    .action-banner__actions {
+      text-align: left;
+      position: relative;
+      top: 0;
+      left: 0;
+      transform: unset;
     }
 
-    .action-banner__close {
+    .action-banner__actions > .btn.btn--inverse {
+      @include focus.default-button-focus;
+    }
+
+    &__image-container {
+      aspect-ratio: 16 / 9;
+      background-position: center center;
+      background-size: cover;
+      display: block;
+      height: 100%;
+    }
+
+    & a {
+      &:link,
+      &:visited,
+      &:hover,
+      &:active,
+      &:focus {
+        color: colours.$action-banner-full-width-dark-background-text-colour;
+        outline-color: colours.$focus-inverse;
+      }
+    }
+  }
+
+  &--full-width-subtle {
+    @extend .action-banner--full-width;
+
+    background: colours.$action-banner-full-width-subtle-background;
+    border: 1px solid colours.$action-banner-full-width-subtle-border;
+    color: colours.$text;
+
+    .action-banner__title {
       color: colours.$text;
     }
 
     .action-banner__actions {
       @include focus.default-button-focus;
     }
+
+    & a {
+      &:link,
+      &:visited,
+      &:hover,
+      &:active,
+      &:focus {
+        color: colours.$action-banner-full-width-light-background-text-colour;
+        outline-color: colours.$focus;
+      }
+    }
   }
 
-  &--closeable {
-    .action-banner__title {
-      padding-right: utils.rem(spacing.$large); // Make room for close button
+  @include media-queries.mq($from: sm) {
+    &--full-width {
+      &__image-container {
+        aspect-ratio: 21 / 9;
+      }
     }
   }
 
   @include media-queries.mq($from: md) {
     @include layout.clearfix;
 
+    &--full-width {
+      &__image-container {
+        aspect-ratio: unset;
+        bottom: 0;
+        overflow: hidden;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 0;
+
+        @include media-queries.mq($from: md) {
+          display: flex;
+          width: 34%;
+        }
+
+        &::before {
+          background: colours.$action-banner-full-width-background;
+          content: '';
+          flex: 0 0 200px;
+          pointer-events: none;
+          position: relative;
+          transform: rotate(-15deg) scale(1.2) translateX(-60%);
+          z-index: 1;
+        }
+      }
+    }
+
     &__text {
       margin-bottom: 0;
       width: math.percentage(3 * 0.25);
@@ -118,15 +205,5 @@
       transform: translateY(-50%);
       width: math.percentage(1 * 0.25);
     }
-
-    &--closeable {
-      .action-banner__title {
-        padding-right: 0;
-      }
-
-      .action-banner__actions {
-        right: utils.rem(spacing.$x-large);
-      }
-    }
   }
 }