@nice-digital/nds-hero 4.0.7-alpha.0 → 4.0.8

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.
Files changed (5) hide show
  1. package/README.md +7 -37
  2. package/es/Hero.d.ts +3 -5
  3. package/es/Hero.js +2 -2
  4. package/package.json +3 -3
  5. package/scss/hero.scss +28 -62
package/README.md CHANGED
@@ -83,48 +83,17 @@ const myCallsToAction = (
83
83
  <Hero title="Page title" actions={myCallsToAction} />;
84
84
  ```
85
85
 
86
- ##### children
86
+ ###### image
87
87
 
88
- - Type: `React.ReactNode`
89
-
90
- If you supply child markup it will render in the extra space on the right-hand side of the component.
91
-
92
- ```js
93
- <Hero title="Page title">
94
- <ul>
95
- <li>
96
- <a href="#">Page One</a>
97
- </li>
98
- <li>
99
- <a href="#">Page Two</a>
100
- </li>
101
- <li>
102
- <a href="#">Page Three</a>
103
- </li>
104
- <li>
105
- <a href="#">Page Four</a>
106
- </li>
107
- <li>
108
- <a href="#">Page Five</a>
109
- </li>
110
- <li>
111
- <a href="#">Page Six</a>
112
- </li>
113
- </ul>
114
- </Hero>
115
- ```
116
-
117
- ##### footer
88
+ - Type: `string`
118
89
 
119
- - Type: `React.ReactNode`
90
+ The URL to an image that will be displayed on the right hand side on desktop resolutions.
120
91
 
121
- Content for the footer. Accepts any valid react node.
92
+ ###### isDark
122
93
 
123
- ```js
124
- const myFooter = <p>Here is some footer content</p>;
94
+ - Type: `boolean`
125
95
 
126
- <Hero title="The title" footer={myFooter}>
127
- ```
96
+ If set to true, the hero will have a dark background and text within the hero will be light.
128
97
 
129
98
  ###### className
130
99
 
@@ -132,6 +101,7 @@ const myFooter = <p>Here is some footer content</p>;
132
101
 
133
102
  Any additional className will be merged on to the container.
134
103
 
104
+
135
105
  ### SCSS
136
106
 
137
107
  If you're not using [React](#react), then import the SCSS directly into your application by:
package/es/Hero.d.ts CHANGED
@@ -2,14 +2,12 @@ import React from "react";
2
2
  import "../scss/hero.scss";
3
3
  export interface HeroProps {
4
4
  [prop: string]: unknown;
5
- actions?: React.ReactNode;
6
- extra?: React.ReactNode;
7
- footer?: React.ReactNode;
8
5
  header?: React.ReactNode;
9
- intro?: React.ReactNode;
10
6
  title: React.ReactNode;
7
+ intro?: React.ReactNode;
8
+ actions?: React.ReactNode;
11
9
  image?: string;
10
+ isDark?: boolean;
12
11
  className?: string;
13
- children?: React.ReactNode;
14
12
  }
15
13
  export declare const Hero: React.FC<HeroProps>;
package/es/Hero.js CHANGED
@@ -19,7 +19,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
19
19
  const classnames_1 = __importDefault(require("classnames"));
20
20
  require("../scss/hero.scss");
21
21
  const Hero = (props) => {
22
- const { actions, children, footer, header, intro, title, image, className } = props, rest = __rest(props, ["actions", "children", "footer", "header", "intro", "title", "image", "className"]);
23
- 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})` } }))] })));
22
+ const { actions, header, intro, title, image, isDark = false, className } = props, rest = __rest(props, ["actions", "header", "intro", "title", "image", "isDark", "className"]);
23
+ 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})` } }))] })));
24
24
  };
25
25
  exports.Hero = Hero;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice-digital/nds-hero",
3
- "version": "4.0.7-alpha.0",
3
+ "version": "4.0.8",
4
4
  "description": "Hero component for the NICE Design System",
5
5
  "keywords": [
6
6
  "hero"
@@ -34,7 +34,7 @@
34
34
  "url": "https://github.com/nice-digital/nice-design-system/issues"
35
35
  },
36
36
  "dependencies": {
37
- "@nice-digital/nds-core": "^4.0.7-alpha.0",
37
+ "@nice-digital/nds-core": "^4.0.8",
38
38
  "classnames": "^2.3.1"
39
39
  },
40
40
  "peerDependencies": {
@@ -49,5 +49,5 @@
49
49
  "@types/node": "^18.11.9",
50
50
  "typescript": "^4.8.4"
51
51
  },
52
- "gitHead": "8b33a79ecc8fa224223615ebe8647378e97936ad"
52
+ "gitHead": "3b51e48a6c3006fa350adf2b125d6cad9454d7c7"
53
53
  }
package/scss/hero.scss CHANGED
@@ -13,41 +13,38 @@
13
13
  /// Hero banner component.
14
14
  /// @since 0.2.0
15
15
  .hero {
16
- @include typography.links-inverse;
16
+ @include layout.fullWidth;
17
17
  @include focus.inverse-button-focus;
18
- background: colours.$hero-background;
19
- color: colours.$text-inverse;
20
- left: calc(50%);
18
+ background: colours.$hero-background-default;
19
+ color: colours.$hero-text-default;
21
20
  margin-bottom: utils.rem(spacing.$large);
22
- margin-left: -50vw;
23
- margin-right: -50vw;
24
21
  overflow: hidden;
22
+ padding: utils.rem(spacing.$large) 0 utils.rem(spacing.$x-large);
25
23
  position: relative;
26
- right: calc(50%);
27
- width: 100vw;
28
24
 
29
- & > * {
30
- position: relative;
31
- z-index: 2;
25
+ &--dark {
26
+ background: colours.$hero-background-dark;
27
+ color: colours.$hero-text-dark;
28
+
29
+ .breadcrumbs {
30
+ @include typography.links-inverse;
31
+ }
32
32
  }
33
33
 
34
- .breadcrumbs {
35
- @include typography.links-inverse;
34
+ &:has(.hero__image-container) {
35
+ @include media-queries.mq($from: md) {
36
+ min-height: 300px;
37
+ }
36
38
  }
37
39
 
38
40
  &__container {
39
- @include layout.container;
41
+ @include layout.fullWidthContainer;
40
42
  }
41
43
 
42
44
  &__body {
43
- @include layout.clearfix;
44
- margin-top: utils.rem(spacing.$large);
45
- padding: utils.rem(0 0 spacing.$large);
46
- }
47
-
48
- // Container for title, lead and actions
49
- &__copy {
50
- margin-bottom: utils.rem(spacing.$large);
45
+ @include media-queries.mq($from: md) {
46
+ width: 66%;
47
+ }
51
48
  }
52
49
 
53
50
  &__title {
@@ -56,68 +53,37 @@
56
53
 
57
54
  &__intro {
58
55
  @include typography.lead;
59
- }
60
-
61
- // Optional footer
62
- &__footer {
63
- align-items: center;
64
- border-top: utils.rem(spacing.$xx-small) solid colours.$hero-border;
65
- display: flex;
66
- flex-flow: row wrap;
67
- padding: utils.rem(spacing.$medium 0);
68
-
69
- p,
70
- ul {
71
- margin: 0;
72
- max-width: 100%;
73
- }
56
+ margin-bottom: utils.rem(spacing.$large);
74
57
  }
75
58
 
76
59
  &__image-container {
77
60
  background-position: center center;
78
61
  background-size: cover;
79
62
  bottom: 0;
80
- display: flex;
63
+ display: none;
81
64
  overflow: hidden;
82
65
  position: absolute;
83
66
  right: 0;
84
67
  top: 0;
85
- width: 40%;
86
68
  z-index: 0;
87
69
 
88
70
  @include media-queries.mq($from: md) {
89
- width: 33%;
71
+ display: flex;
72
+ width: 34%;
90
73
  }
91
74
 
92
75
  &::before {
93
- background: colours.$hero-background;
76
+ background: colours.$hero-background-default;
94
77
  content: '';
95
78
  flex: 0 0 200px;
79
+ pointer-events: none;
96
80
  position: relative;
97
81
  transform: rotate(-15deg) scale(1.2) translateX(-60%);
98
82
  z-index: 1;
99
- }
100
-
101
- &::after {
102
- background: colours.$hero-image-wash;
103
- content: '';
104
- inset: 0;
105
- opacity: 0.6;
106
- position: absolute;
107
- z-index: 0;
108
- }
109
- }
110
-
111
- @include media-queries.mq($from: md) {
112
- &__copy {
113
- float: left;
114
- margin-bottom: 0;
115
- width: 55%;
116
- }
117
83
 
118
- &__extra {
119
- float: right;
120
- width: 35%;
84
+ .hero--dark & {
85
+ background: colours.$hero-background-dark;
86
+ }
121
87
  }
122
88
  }
123
89
  }