@nice-digital/nds-page-header 4.0.14 → 4.0.15-alpha.0

package/README.md

@@ -159,6 +159,24 @@ The two full width variants span the full width of the page, breaking out of any
 	heading="I am a full width dark header!"
 	variant="fullWidthDark"
 />
+```
+
+#### verticalPadding
+
+- Type: "loose";
+- Default: null;
+
+The normal variant is the default and can be omitted.
+
+The verticalPadding `loose` value updates the top and bottom padding of the `PageHeader` container.
+
+```jsx
+<PageHeader
+	heading="I am a full width light header!"
+	veritalPadding="loose"
+/>
+```
+
 
 ### SCSS
 

package/es/PageHeader.d.ts

@@ -11,6 +11,7 @@ export interface PageHeaderProps {
     description?: React.ReactNode;
     cta?: React.ReactNode;
     secondSection?: React.ReactNode;
+    verticalPadding?: "loose";
     variant?: "normal" | "fullWidthDark" | "fullWidthLight";
 }
 export declare const PageHeader: React.FC<PageHeaderProps>;

package/es/PageHeader.js

@@ -16,7 +16,7 @@ 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 { 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"]);
+    const { useAltHeading = false, preheading, breadcrumbs, heading, metadata, lead, description, cta, secondSection, verticalPadding, variant = "normal" } = props, rest = __rest(props, ["useAltHeading", "preheading", "breadcrumbs", "heading", "metadata", "lead", "description", "cta", "secondSection", "verticalPadding", "variant"]);
     // Figure out variant
     const isFullWidth = variant === "fullWidthDark" || variant === "fullWidthLight";
     let variantClassname = "";
@@ -28,6 +28,10 @@ const PageHeader = (props) => {
             variantClassname = "page-header--full-width-light";
             break;
     }
+    // Figure out vertical padding
+    if (verticalPadding === "loose") {
+        variantClassname += " page-header--vertical-padding-loose";
+    }
     // Figure out grid
     const mainSectionColumns = secondSection ? 9 : 12;
     // TODO: Refactor this into some sort of conditional component

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-page-header",
-	"version": "4.0.14",
+	"version": "4.0.15-alpha.0",
 	"description": "Page header component for the NICE Design System",
 	"keywords": [
 		"header"
@@ -49,5 +49,5 @@
 		"@types/node": "^18.11.9",
 		"typescript": "^4.8.4"
 	},
-	"gitHead": "db6f8cf90646197793933dcaa27863ff66effdcb"
+	"gitHead": "58f08d261770b3abcb7d6426c830af3ca25d5560"
 }

package/scss/page-header.scss

@@ -31,7 +31,6 @@
 /// @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();
@@ -58,6 +57,10 @@
     }
   }
 
+  &--vertical-padding-loose {
+    padding: utils.rem(spacing.$large) 0 utils.rem(spacing.$x-large);
+  }
+
   &__pre-heading {
     @include typography.font-size(h5);
     display: block;