@nice-digital/nds-page-header 4.0.14-alpha.0 → 4.0.15-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -0
- package/es/PageHeader.d.ts +1 -0
- package/es/PageHeader.js +5 -1
- package/package.json +3 -3
- package/scss/page-header.scss +4 -1
package/README.md
CHANGED
|
@@ -159,6 +159,24 @@ The two full width variants span the full width of the page, breaking out of any
|
|
|
159
159
|
heading="I am a full width dark header!"
|
|
160
160
|
variant="fullWidthDark"
|
|
161
161
|
/>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
#### verticalPadding
|
|
165
|
+
|
|
166
|
+
- Type: "loose";
|
|
167
|
+
- Default: null;
|
|
168
|
+
|
|
169
|
+
The normal variant is the default and can be omitted.
|
|
170
|
+
|
|
171
|
+
The verticalPadding `loose` value updates the top and bottom padding of the `PageHeader` container.
|
|
172
|
+
|
|
173
|
+
```jsx
|
|
174
|
+
<PageHeader
|
|
175
|
+
heading="I am a full width light header!"
|
|
176
|
+
veritalPadding="loose"
|
|
177
|
+
/>
|
|
178
|
+
```
|
|
179
|
+
|
|
162
180
|
|
|
163
181
|
### SCSS
|
|
164
182
|
|
package/es/PageHeader.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export interface PageHeaderProps {
|
|
|
11
11
|
description?: React.ReactNode;
|
|
12
12
|
cta?: React.ReactNode;
|
|
13
13
|
secondSection?: React.ReactNode;
|
|
14
|
+
verticalPadding?: "loose";
|
|
14
15
|
variant?: "normal" | "fullWidthDark" | "fullWidthLight";
|
|
15
16
|
}
|
|
16
17
|
export declare const PageHeader: React.FC<PageHeaderProps>;
|
package/es/PageHeader.js
CHANGED
|
@@ -16,7 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
16
16
|
const nds_grid_1 = require("@nice-digital/nds-grid");
|
|
17
17
|
require("../scss/page-header.scss");
|
|
18
18
|
const PageHeader = (props) => {
|
|
19
|
-
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"]);
|
|
19
|
+
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"]);
|
|
20
20
|
// Figure out variant
|
|
21
21
|
const isFullWidth = variant === "fullWidthDark" || variant === "fullWidthLight";
|
|
22
22
|
let variantClassname = "";
|
|
@@ -28,6 +28,10 @@ const PageHeader = (props) => {
|
|
|
28
28
|
variantClassname = "page-header--full-width-light";
|
|
29
29
|
break;
|
|
30
30
|
}
|
|
31
|
+
// Figure out vertical padding
|
|
32
|
+
if (verticalPadding === "loose") {
|
|
33
|
+
variantClassname += " page-header--vertical-padding-loose";
|
|
34
|
+
}
|
|
31
35
|
// Figure out grid
|
|
32
36
|
const mainSectionColumns = secondSection ? 9 : 12;
|
|
33
37
|
// TODO: Refactor this into some sort of conditional component
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-page-header",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.15-alpha.0",
|
|
4
4
|
"description": "Page header component for the NICE Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"header"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"url": "https://github.com/nice-digital/nice-design-system/issues"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@nice-digital/nds-core": "^4.0.13
|
|
38
|
+
"@nice-digital/nds-core": "^4.0.13"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "^16 || ^17 || ^18",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"@types/node": "^18.11.9",
|
|
50
50
|
"typescript": "^4.8.4"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "58f08d261770b3abcb7d6426c830af3ca25d5560"
|
|
53
53
|
}
|
package/scss/page-header.scss
CHANGED
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
/// @since 0.4.0
|
|
32
32
|
.page-header {
|
|
33
33
|
margin: utils.rem(0 0 spacing.$x-large 0);
|
|
34
|
-
padding: utils.rem(spacing.$large) 0 utils.rem(spacing.$x-large);
|
|
35
34
|
|
|
36
35
|
&--full-width-light {
|
|
37
36
|
@include layout.fullWidth();
|
|
@@ -58,6 +57,10 @@
|
|
|
58
57
|
}
|
|
59
58
|
}
|
|
60
59
|
|
|
60
|
+
&--vertical-padding-loose {
|
|
61
|
+
padding: utils.rem(spacing.$large) 0 utils.rem(spacing.$x-large);
|
|
62
|
+
}
|
|
63
|
+
|
|
61
64
|
&__pre-heading {
|
|
62
65
|
@include typography.font-size(h5);
|
|
63
66
|
display: block;
|