@nice-digital/nds-hero 4.0.7 → 4.0.8

package/README.md

@@ -83,48 +83,17 @@ const myCallsToAction = (
 <Hero title="Page title" actions={myCallsToAction} />;
 ```
 
-##### children
+###### image
 
-- Type: `React.ReactNode`
-
-If you supply child markup it will render in the extra space on the right-hand side of the component.
-
-```js
-<Hero title="Page title">
-	<ul>
-		<li>
-			<a href="#">Page One</a>
-		</li>
-		<li>
-			<a href="#">Page Two</a>
-		</li>
-		<li>
-			<a href="#">Page Three</a>
-		</li>
-		<li>
-			<a href="#">Page Four</a>
-		</li>
-		<li>
-			<a href="#">Page Five</a>
-		</li>
-		<li>
-			<a href="#">Page Six</a>
-		</li>
-	</ul>
-</Hero>
-```
-
-##### footer
+- Type: `string`
 
-- Type: `React.ReactNode`
+The URL to an image that will be displayed on the right hand side on desktop resolutions.
 
-Content for the footer. Accepts any valid react node.
+###### isDark
 
-```js
-const myFooter = <p>Here is some footer content</p>;
+- Type: `boolean`
 
-<Hero title="The title" footer={myFooter}>
-```
+If set to true, the hero will have a dark background and text within the hero will be light.
 
 ###### className
 
@@ -132,6 +101,7 @@ const myFooter = <p>Here is some footer content</p>;
 
 Any additional className will be merged on to the container.
 
+
 ### SCSS
 
 If you're not using [React](#react), then import the SCSS directly into your application by:

package/es/Hero.d.ts

@@ -2,14 +2,12 @@ import React from "react";
 import "../scss/hero.scss";
 export interface HeroProps {
     [prop: string]: unknown;
-    actions?: React.ReactNode;
-    extra?: React.ReactNode;
-    footer?: React.ReactNode;
     header?: React.ReactNode;
-    intro?: React.ReactNode;
     title: React.ReactNode;
+    intro?: React.ReactNode;
+    actions?: React.ReactNode;
     image?: string;
+    isDark?: boolean;
     className?: string;
-    children?: React.ReactNode;
 }
 export declare const Hero: React.FC<HeroProps>;

package/es/Hero.js

@@ -19,7 +19,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 require("../scss/hero.scss");
 const Hero = (props) => {
-    const { actions, children, footer, header, intro, title, image, className } = props, rest = __rest(props, ["actions", "children", "footer", "header", "intro", "title", "image", "className"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(["hero", className]), "data-component": "hero" }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hero__container" }, { children: [header && header, (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hero__body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hero__copy" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "hero__title" }, { children: title })), intro && (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "hero__intro" }, { children: intro })), actions && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "hero__actions" }, { children: actions }))] })), children && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "hero__extra" }, { children: children }))] })), footer && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "hero__footer" }, { children: footer }))] })), image && ((0, jsx_runtime_1.jsx)("div", { className: "hero__image-container", style: { backgroundImage: `url(${image})` } }))] })));
+    const { actions, header, intro, title, image, isDark = false, className } = props, rest = __rest(props, ["actions", "header", "intro", "title", "image", "isDark", "className"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(["hero", { "hero--dark": isDark }, className]), "data-component": "hero" }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hero__container" }, { children: [header && header, (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hero__body" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "hero__title" }, { children: title })), intro && (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "hero__intro" }, { children: intro })), actions && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "hero__actions" }, { children: actions }))] }))] })), image && ((0, jsx_runtime_1.jsx)("div", { className: "hero__image-container", style: { backgroundImage: `url(${image})` } }))] })));
 };
 exports.Hero = Hero;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-hero",
-	"version": "4.0.7",
+	"version": "4.0.8",
 	"description": "Hero component for the NICE Design System",
 	"keywords": [
 		"hero"
@@ -34,7 +34,7 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/nds-core": "^4.0.7",
+		"@nice-digital/nds-core": "^4.0.8",
 		"classnames": "^2.3.1"
 	},
 	"peerDependencies": {
@@ -49,5 +49,5 @@
 		"@types/node": "^18.11.9",
 		"typescript": "^4.8.4"
 	},
-	"gitHead": "a7286ee7a795e1b01dc9356fd858bbae2dc5b2b9"
+	"gitHead": "3b51e48a6c3006fa350adf2b125d6cad9454d7c7"
 }

package/scss/hero.scss

@@ -13,41 +13,38 @@
 /// Hero banner component.
 /// @since 0.2.0
 .hero {
-  @include typography.links-inverse;
+  @include layout.fullWidth;
   @include focus.inverse-button-focus;
-  background: colours.$hero-background;
-  color: colours.$text-inverse;
-  left: calc(50%);
+  background: colours.$hero-background-default;
+  color: colours.$hero-text-default;
   margin-bottom: utils.rem(spacing.$large);
-  margin-left: -50vw;
-  margin-right: -50vw;
   overflow: hidden;
+  padding: utils.rem(spacing.$large) 0 utils.rem(spacing.$x-large);
   position: relative;
-  right: calc(50%);
-  width: 100vw;
 
-  & > * {
-    position: relative;
-    z-index: 2;
+  &--dark {
+    background: colours.$hero-background-dark;
+    color: colours.$hero-text-dark;
+
+    .breadcrumbs {
+      @include typography.links-inverse;
+    }
   }
 
-  .breadcrumbs {
-    @include typography.links-inverse;
+  &:has(.hero__image-container) {
+    @include media-queries.mq($from: md) {
+      min-height: 300px;
+    }
   }
 
   &__container {
-    @include layout.container;
+    @include layout.fullWidthContainer;
   }
 
   &__body {
-    @include layout.clearfix;
-    margin-top: utils.rem(spacing.$large);
-    padding: utils.rem(0 0 spacing.$large);
-  }
-
-  // Container for title, lead and actions
-  &__copy {
-    margin-bottom: utils.rem(spacing.$large);
+    @include media-queries.mq($from: md) {
+      width: 66%;
+    }
   }
 
   &__title {
@@ -56,68 +53,37 @@
 
   &__intro {
     @include typography.lead;
-  }
-
-  // Optional footer
-  &__footer {
-    align-items: center;
-    border-top: utils.rem(spacing.$xx-small) solid colours.$hero-border;
-    display: flex;
-    flex-flow: row wrap;
-    padding: utils.rem(spacing.$medium 0);
-
-    p,
-    ul {
-      margin: 0;
-      max-width: 100%;
-    }
+    margin-bottom: utils.rem(spacing.$large);
   }
 
   &__image-container {
     background-position: center center;
     background-size: cover;
     bottom: 0;
-    display: flex;
+    display: none;
     overflow: hidden;
     position: absolute;
     right: 0;
     top: 0;
-    width: 40%;
     z-index: 0;
 
     @include media-queries.mq($from: md) {
-      width: 33%;
+      display: flex;
+      width: 34%;
     }
 
     &::before {
-      background: colours.$hero-background;
+      background: colours.$hero-background-default;
       content: '';
       flex: 0 0 200px;
+      pointer-events: none;
       position: relative;
       transform: rotate(-15deg) scale(1.2) translateX(-60%);
       z-index: 1;
-    }
-
-    &::after {
-      background: colours.$hero-image-wash;
-      content: '';
-      inset: 0;
-      opacity: 0.6;
-      position: absolute;
-      z-index: 0;
-    }
-  }
-
-  @include media-queries.mq($from: md) {
-    &__copy {
-      float: left;
-      margin-bottom: 0;
-      width: 55%;
-    }
 
-    &__extra {
-      float: right;
-      width: 35%;
+      .hero--dark & {
+        background: colours.$hero-background-dark;
+      }
     }
   }
 }