@nice-digital/nds-page-header 4.0.6 → 4.0.7

package/README.md

@@ -33,7 +33,7 @@ import { PageHeader } from "@nice-digital/nds-page-header";
 
 ##### heading
 
-- Type: `React.node` (required)
+- Type: `React.ReactNode` (required)
 
 The main title that is rendered into a H1 with H1 styling.
 
@@ -53,7 +53,7 @@ Whether to use the `h1-alt` alternative (smaller) heading 1 style.
 
 ##### preheading
 
-- Type: `React.node`
+- Type: `React.ReactNode`
 
 For occasions when the main title might be too long, a smaller H3 styled `span` that is rendered just above the main title.
 
@@ -63,7 +63,7 @@ For occasions when the main title might be too long, a smaller H3 styled `span`
 
 ##### lead
 
-- Type: `React.node`
+- Type: `React.ReactNode`
 
 Lead text serves as a short introduction to the page, rendered as a paragraph.
 
@@ -76,7 +76,7 @@ Lead text serves as a short introduction to the page, rendered as a paragraph.
 
 ##### metadata
 
-- Type: `Array<React.node>`
+- Type: `Array<React.ReactNode>`
 
 ```jsx
 <PageHeader
@@ -92,7 +92,7 @@ Lead text serves as a short introduction to the page, rendered as a paragraph.
 
 ##### cta
 
-- Type: `React.node`
+- Type: `React.ReactNode`
 
 Room for a button or other call-to-action.
 
@@ -104,6 +104,62 @@ const CtaButton = <button onclick={()=>false}>
 <PageHeader heading="Products" cta={CtaButton} />
 ```
 
+#### breadcrumbs
+
+- Type: `React.ReactNode`
+
+Add breadcrumbs here, using the NDS breadcrumb component.
+
+```jsx
+<PageHeader
+	heading="Header with breadcrumbs"
+	breadcrumbs={
+		<Breadcrumbs>
+			<Breadcrumb to="https://www.nice.org.uk/">Home</Breadcrumb>
+			<Breadcrumb to="https://www.nice.org.uk/guidance">
+				NICE guidance
+			</Breadcrumb>
+			<Breadcrumb>Published</Breadcrumb>
+		</Breadcrumbs>
+	}
+/>
+```
+
+#### description
+
+- Type: `React.ReactNode`
+
+Add an optional description, which will be displayed below the lead text.
+
+```jsx
+<PageHeader
+	heading="Header with description"
+	description="I am a description"
+/>
+```
+
+
+#### variant
+
+- Type: "normal" | "fullWidthDark" | "fullWidthLight";
+
+The normal variant is the default and can be omitted.
+
+The two full width variants span the full width of the page, breaking out of any containers. There is a light and a dark version.
+
+```jsx
+<PageHeader
+	heading="I am a full width light header!"
+	variant="fullWidthLight"
+/>
+```
+
+```jsx
+<PageHeader
+	heading="I am a full width dark header!"
+	variant="fullWidthDark"
+/>
+
 ### SCSS
 
 If you're not using [React](#react), then import the SCSS directly into your application by:

package/es/PageHeader.d.ts

@@ -4,9 +4,13 @@ export interface PageHeaderProps {
     [prop: string]: unknown;
     useAltHeading?: boolean;
     preheading?: React.ReactNode;
+    breadcrumbs?: React.ReactNode;
     heading: React.ReactNode;
-    lead?: React.ReactNode;
     metadata?: React.ReactNode[];
+    lead?: React.ReactNode;
+    description?: React.ReactNode;
     cta?: React.ReactNode;
+    secondSection?: React.ReactNode;
+    variant?: "normal" | "fullWidthDark" | "fullWidthLight";
 }
 export declare const PageHeader: React.FC<PageHeaderProps>;

package/es/PageHeader.js

@@ -13,9 +13,26 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const nds_grid_1 = require("@nice-digital/nds-grid");
 require("../scss/page-header.scss");
 const PageHeader = (props) => {
-    const { heading, useAltHeading = false, lead, metadata, cta, preheading } = props, rest = __rest(props, ["heading", "useAltHeading", "lead", "metadata", "cta", "preheading"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "page-header", "data-component": "page-header" }, rest, { children: [(0, jsx_runtime_1.jsxs)("h1", Object.assign({ className: `page-header__heading ${useAltHeading ? "page-header__heading--alt" : ""}` }, { children: [preheading && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "page-header__pre-heading" }, { children: preheading }))), heading] })), lead && (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "page-header__lead" }, { children: lead })), metadata && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "page-header__metadata" }, { children: metadata.map((metadatum, i) => ((0, jsx_runtime_1.jsx)("li", { children: metadatum }, i))) }))), cta && (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "page-header__cta" }, { children: cta }))] })));
+    const { useAltHeading = false, preheading, breadcrumbs, heading, metadata, lead, description, cta, secondSection, variant = "normal" } = props, rest = __rest(props, ["useAltHeading", "preheading", "breadcrumbs", "heading", "metadata", "lead", "description", "cta", "secondSection", "variant"]);
+    // Figure out variant
+    const isFullWidth = variant === "fullWidthDark" || variant === "fullWidthLight";
+    let variantClassname = "";
+    switch (variant) {
+        case "fullWidthDark":
+            variantClassname = "page-header--full-width-dark";
+            break;
+        case "fullWidthLight":
+            variantClassname = "page-header--full-width-light";
+            break;
+    }
+    // Figure out grid
+    const mainSectionColumns = secondSection ? 9 : 12;
+    // TODO: Refactor this into some sort of conditional component
+    // e.g. https://dev.to/dailydevtips1/conditional-wrapping-in-react-46o5
+    const PageHeaderContent = () => ((0, jsx_runtime_1.jsxs)(nds_grid_1.Grid, { children: [(0, jsx_runtime_1.jsxs)(nds_grid_1.GridItem, Object.assign({ md: { cols: mainSectionColumns } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "page-header__breadcrumbs" }, { children: breadcrumbs }))), (0, jsx_runtime_1.jsxs)("h1", Object.assign({ className: `page-header__heading ${useAltHeading ? "page-header__heading--alt" : ""}` }, { children: [preheading && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "page-header__pre-heading" }, { children: preheading }))), heading] })), lead && (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "page-header__lead" }, { children: lead })), description && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "page-header__description" }, { children: description }))), metadata && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "page-header__metadata" }, { children: metadata.map((metadatum, i) => ((0, jsx_runtime_1.jsx)("li", { children: metadatum }, i))) }))), cta && (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "page-header__cta" }, { children: cta }))] })), secondSection ? ((0, jsx_runtime_1.jsx)(nds_grid_1.GridItem, Object.assign({ md: { cols: 3 }, className: "page-header__second-section" }, { children: secondSection }))) : null] }));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `page-header ${variantClassname}`, "data-component": "page-header" }, rest, { children: isFullWidth ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "container" }, { children: (0, jsx_runtime_1.jsx)(PageHeaderContent, {}) }))) : ((0, jsx_runtime_1.jsx)(PageHeaderContent, {})) })));
 };
 exports.PageHeader = PageHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-page-header",
-	"version": "4.0.6",
+	"version": "4.0.7",
 	"description": "Page header component for the NICE Design System",
 	"keywords": [
 		"header"
@@ -35,7 +35,7 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/nds-core": "^4.0.6"
+		"@nice-digital/nds-core": "^4.0.7"
 	},
 	"peerDependencies": {
 		"react": "^16 || ^17 || ^18",
@@ -49,5 +49,5 @@
 		"@types/node": "^18.11.9",
 		"typescript": "^4.8.4"
 	},
-	"gitHead": "04c8392903d506a0b09a52110944b32e449990b0"
+	"gitHead": "a7286ee7a795e1b01dc9356fd858bbae2dc5b2b9"
 }

package/scss/page-header.scss

@@ -4,6 +4,7 @@
 
 @use '@nice-digital/nds-core/scss/colours';
 @use '@nice-digital/nds-core/scss/glyphs';
+@use '@nice-digital/nds-core/scss/layout';
 @use '@nice-digital/nds-core/scss/media-queries';
 @use '@nice-digital/nds-core/scss/spacing';
 @use '@nice-digital/nds-core/scss/typography';
@@ -30,6 +31,32 @@
 /// @since 0.4.0
 .page-header {
   margin: utils.rem(0 0 spacing.$x-large 0);
+  padding: utils.rem(spacing.$large) 0 utils.rem(spacing.$x-large);
+
+  &--full-width-light {
+    @include layout.fullWidth();
+    background: colours.$page-header-full-width-light-background;
+  }
+
+  &--full-width-dark {
+    @include layout.fullWidth();
+    background: colours.$page-header-full-width-dark-background;
+
+    & * {
+      color: colours.$page-header-full-width-dark-background-text-colour;
+    }
+
+    & .breadcrumbs a {
+      &:link,
+      &:visited,
+      &:hover,
+      &:active,
+      &:focus {
+        color: colours.$page-header-full-width-dark-background-text-colour;
+        outline-color: colours.$page-header-full-width-dark-background-text-colour;
+      }
+    }
+  }
 
   &__pre-heading {
     @include typography.font-size(h5);
@@ -88,4 +115,11 @@
     display: block;
     margin: 0;
   }
+
+  &__second-section {
+    @include media-queries.mq($from: md) {
+      border-left: 2px solid colours.$page-header-second-section-border-colour;
+      padding-left: utils.rem(spacing.$medium);
+    }
+  }
 }