@nice-digital/nds-page-header 2.0.2-alpha.0 → 2.0.3-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 CHANGED
@@ -41,6 +41,16 @@ The main title that is rendered into a H1 with H1 styling.
41
41
  <PageHeader heading="Welcome to the page" />
42
42
  ```
43
43
 
44
+ #### useAltHeading
45
+
46
+ - Type: `boolean` (optional)
47
+
48
+ Whether to use the `h1-alt` alternative (smaller) heading 1 style.
49
+
50
+ ```jsx
51
+ <PageHeader useAltHeading ... />
52
+ ```
53
+
44
54
  ##### preheading
45
55
 
46
56
  - Type: `React.node`
@@ -99,7 +109,7 @@ const CtaButton = <button onclick={()=>false}>
99
109
  If you're not using [React](#react), then import the SCSS directly into your application by:
100
110
 
101
111
  ```scss
102
- @import "~@nice-digital/nds-page-header/scss/page-header";
112
+ @forward '@nice-digital/nds-page-header/scss/page-header';
103
113
  ```
104
114
 
105
115
  #### HTML
@@ -108,7 +118,7 @@ If you're not using [React](#react), then include the [SCSS as above](#scss) and
108
118
 
109
119
  ```html
110
120
  <div class="page-header">
111
- <h1 class="page-header__heading">
121
+ <h1 class="page-header__heading page-header__heading--alt">
112
122
  <span class="page-header__pre-heading">
113
123
  Systemic lupus erythematosus
114
124
  </span>
package/es/PageHeader.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- var _excluded = ["heading", "lead", "metadata", "cta", "preheading"];
3
+ var _excluded = ["heading", "useAltHeading", "lead", "metadata", "cta", "preheading"];
4
4
  import React from "react";
5
5
  import PropTypes from "prop-types";
6
6
  import "../scss/page-header.scss";
7
7
  export var PageHeader = function PageHeader(props) {
8
8
  var heading = props.heading,
9
+ _props$useAltHeading = props.useAltHeading,
10
+ useAltHeading = _props$useAltHeading === void 0 ? false : _props$useAltHeading,
9
11
  lead = props.lead,
10
12
  metadata = props.metadata,
11
13
  cta = props.cta,
@@ -15,7 +17,7 @@ export var PageHeader = function PageHeader(props) {
15
17
  return /*#__PURE__*/React.createElement("div", _extends({
16
18
  className: "page-header"
17
19
  }, rest), /*#__PURE__*/React.createElement("h1", {
18
- className: "page-header__heading"
20
+ className: "page-header__heading " + (useAltHeading ? "page-header__heading--alt" : "")
19
21
  }, preheading && /*#__PURE__*/React.createElement("span", {
20
22
  className: "page-header__pre-heading"
21
23
  }, preheading), heading), lead && /*#__PURE__*/React.createElement("p", {
@@ -32,6 +34,7 @@ export var PageHeader = function PageHeader(props) {
32
34
  };
33
35
  PageHeader.propTypes = {
34
36
  heading: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
37
+ useAltHeading: PropTypes.bool,
35
38
  lead: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
36
39
  metadata: PropTypes.arrayOf(PropTypes.node),
37
40
  preheading: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/PageHeader.js"],"names":["React","PropTypes","PageHeader","props","heading","lead","metadata","cta","preheading","rest","map","metadatum","i","propTypes","oneOfType","arrayOf","node","isRequired"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAO,0BAAP;AAEA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAAAC,KAAK,EAAI;AAClC,MAAQC,OAAR,GAA8DD,KAA9D,CAAQC,OAAR;AAAA,MAAiBC,IAAjB,GAA8DF,KAA9D,CAAiBE,IAAjB;AAAA,MAAuBC,QAAvB,GAA8DH,KAA9D,CAAuBG,QAAvB;AAAA,MAAiCC,GAAjC,GAA8DJ,KAA9D,CAAiCI,GAAjC;AAAA,MAAsCC,UAAtC,GAA8DL,KAA9D,CAAsCK,UAAtC;AAAA,MAAqDC,IAArD,iCAA8DN,KAA9D;;AAEA,sBACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiCM,IAAjC,gBACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACED,UAAU,iBACV;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA4CA,UAA5C,CAFF,EAIEJ,OAJF,CADD,EAQEC,IAAI,iBAAI;AAAG,IAAA,SAAS,EAAC;AAAb,KAAkCA,IAAlC,CARV,EAUEC,QAAQ,iBACR;AAAI,IAAA,SAAS,EAAC;AAAd,KACEA,QAAQ,CAACI,GAAT,CAAa,UAACC,SAAD,EAAYC,CAAZ;AAAA,wBACb;AAAI,MAAA,GAAG,EAAEA;AAAT,OAAaD,SAAb,CADa;AAAA,GAAb,CADF,CAXF,EAkBEJ,GAAG,iBAAI;AAAG,IAAA,SAAS,EAAC;AAAb,KAAiCA,GAAjC,CAlBT,CADD;AAsBA,CAzBM;AA2BPL,UAAU,CAACW,SAAX,GAAuB;AACtBT,EAAAA,OAAO,EAAEH,SAAS,CAACa,SAAV,CAAoB,CAC5Bb,SAAS,CAACc,OAAV,CAAkBd,SAAS,CAACe,IAA5B,CAD4B,EAE5Bf,SAAS,CAACe,IAFkB,CAApB,EAGNC,UAJmB;AAKtBZ,EAAAA,IAAI,EAAEJ,SAAS,CAACa,SAAV,CAAoB,CACzBb,SAAS,CAACc,OAAV,CAAkBd,SAAS,CAACe,IAA5B,CADyB,EAEzBf,SAAS,CAACe,IAFe,CAApB,CALgB;AAStBV,EAAAA,QAAQ,EAAEL,SAAS,CAACc,OAAV,CAAkBd,SAAS,CAACe,IAA5B,CATY;AAUtBR,EAAAA,UAAU,EAAEP,SAAS,CAACa,SAAV,CAAoB,CAC/Bb,SAAS,CAACc,OAAV,CAAkBd,SAAS,CAACe,IAA5B,CAD+B,EAE/Bf,SAAS,CAACe,IAFqB,CAApB,CAVU;AActBT,EAAAA,GAAG,EAAEN,SAAS,CAACa,SAAV,CAAoB,CAACb,SAAS,CAACc,OAAV,CAAkBd,SAAS,CAACe,IAA5B,CAAD,EAAoCf,SAAS,CAACe,IAA9C,CAApB;AAdiB,CAAvB","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport \"../scss/page-header.scss\";\n\nexport const PageHeader = props => {\n\tconst { heading, lead, metadata, cta, preheading, ...rest } = props;\n\n\treturn (\n\t\t<div className=\"page-header\" {...rest}>\n\t\t\t<h1 className=\"page-header__heading\">\n\t\t\t\t{preheading && (\n\t\t\t\t\t<span className=\"page-header__pre-heading\">{preheading}</span>\n\t\t\t\t)}\n\t\t\t\t{heading}\n\t\t\t</h1>\n\n\t\t\t{lead && <p className=\"page-header__lead\">{lead}</p>}\n\n\t\t\t{metadata && (\n\t\t\t\t<ul className=\"page-header__metadata\">\n\t\t\t\t\t{metadata.map((metadatum, i) => (\n\t\t\t\t\t\t<li key={i}>{metadatum}</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\n\t\t\t{cta && <p className=\"page-header__cta\">{cta}</p>}\n\t\t</div>\n\t);\n};\n\nPageHeader.propTypes = {\n\theading: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tlead: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]),\n\tmetadata: PropTypes.arrayOf(PropTypes.node),\n\tpreheading: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]),\n\tcta: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n"],"file":"PageHeader.js"}
1
+ {"version":3,"file":"PageHeader.js","names":["React","PropTypes","PageHeader","props","heading","useAltHeading","lead","metadata","cta","preheading","rest","map","metadatum","i","propTypes","oneOfType","arrayOf","node","isRequired","bool"],"sources":["../src/PageHeader.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport \"../scss/page-header.scss\";\n\nexport const PageHeader = (props) => {\n\tconst {\n\t\theading,\n\t\tuseAltHeading = false,\n\t\tlead,\n\t\tmetadata,\n\t\tcta,\n\t\tpreheading,\n\t\t...rest\n\t} = props;\n\n\treturn (\n\t\t<div className=\"page-header\" {...rest}>\n\t\t\t<h1\n\t\t\t\tclassName={`page-header__heading ${\n\t\t\t\t\tuseAltHeading ? \"page-header__heading--alt\" : \"\"\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{preheading && (\n\t\t\t\t\t<span className=\"page-header__pre-heading\">{preheading}</span>\n\t\t\t\t)}\n\t\t\t\t{heading}\n\t\t\t</h1>\n\n\t\t\t{lead && <p className=\"page-header__lead\">{lead}</p>}\n\n\t\t\t{metadata && (\n\t\t\t\t<ul className=\"page-header__metadata\">\n\t\t\t\t\t{metadata.map((metadatum, i) => (\n\t\t\t\t\t\t<li key={i}>{metadatum}</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\n\t\t\t{cta && <p className=\"page-header__cta\">{cta}</p>}\n\t\t</div>\n\t);\n};\n\nPageHeader.propTypes = {\n\theading: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tuseAltHeading: PropTypes.bool,\n\tlead: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]),\n\tmetadata: PropTypes.arrayOf(PropTypes.node),\n\tpreheading: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]),\n\tcta: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAO,0BAAP;AAEA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAAW;EACpC,IACCC,OADD,GAQID,KARJ,CACCC,OADD;EAAA,2BAQID,KARJ,CAECE,aAFD;EAAA,IAECA,aAFD,qCAEiB,KAFjB;EAAA,IAGCC,IAHD,GAQIH,KARJ,CAGCG,IAHD;EAAA,IAICC,QAJD,GAQIJ,KARJ,CAICI,QAJD;EAAA,IAKCC,GALD,GAQIL,KARJ,CAKCK,GALD;EAAA,IAMCC,UAND,GAQIN,KARJ,CAMCM,UAND;EAAA,IAOIC,IAPJ,iCAQIP,KARJ;;EAUA,oBACC;IAAK,SAAS,EAAC;EAAf,GAAiCO,IAAjC,gBACC;IACC,SAAS,6BACRL,aAAa,GAAG,2BAAH,GAAiC,EADtC;EADV,GAKEI,UAAU,iBACV;IAAM,SAAS,EAAC;EAAhB,GAA4CA,UAA5C,CANF,EAQEL,OARF,CADD,EAYEE,IAAI,iBAAI;IAAG,SAAS,EAAC;EAAb,GAAkCA,IAAlC,CAZV,EAcEC,QAAQ,iBACR;IAAI,SAAS,EAAC;EAAd,GACEA,QAAQ,CAACI,GAAT,CAAa,UAACC,SAAD,EAAYC,CAAZ;IAAA,oBACb;MAAI,GAAG,EAAEA;IAAT,GAAaD,SAAb,CADa;EAAA,CAAb,CADF,CAfF,EAsBEJ,GAAG,iBAAI;IAAG,SAAS,EAAC;EAAb,GAAiCA,GAAjC,CAtBT,CADD;AA0BA,CArCM;AAuCPN,UAAU,CAACY,SAAX,GAAuB;EACtBV,OAAO,EAAEH,SAAS,CAACc,SAAV,CAAoB,CAC5Bd,SAAS,CAACe,OAAV,CAAkBf,SAAS,CAACgB,IAA5B,CAD4B,EAE5BhB,SAAS,CAACgB,IAFkB,CAApB,EAGNC,UAJmB;EAKtBb,aAAa,EAAEJ,SAAS,CAACkB,IALH;EAMtBb,IAAI,EAAEL,SAAS,CAACc,SAAV,CAAoB,CACzBd,SAAS,CAACe,OAAV,CAAkBf,SAAS,CAACgB,IAA5B,CADyB,EAEzBhB,SAAS,CAACgB,IAFe,CAApB,CANgB;EAUtBV,QAAQ,EAAEN,SAAS,CAACe,OAAV,CAAkBf,SAAS,CAACgB,IAA5B,CAVY;EAWtBR,UAAU,EAAER,SAAS,CAACc,SAAV,CAAoB,CAC/Bd,SAAS,CAACe,OAAV,CAAkBf,SAAS,CAACgB,IAA5B,CAD+B,EAE/BhB,SAAS,CAACgB,IAFqB,CAApB,CAXU;EAetBT,GAAG,EAAEP,SAAS,CAACc,SAAV,CAAoB,CAACd,SAAS,CAACe,OAAV,CAAkBf,SAAS,CAACgB,IAA5B,CAAD,EAAoChB,SAAS,CAACgB,IAA9C,CAApB;AAfiB,CAAvB"}
package/lib/PageHeader.js CHANGED
@@ -15,13 +15,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
15
15
 
16
16
  require("../scss/page-header.scss");
17
17
 
18
- var _excluded = ["heading", "lead", "metadata", "cta", "preheading"];
18
+ var _excluded = ["heading", "useAltHeading", "lead", "metadata", "cta", "preheading"];
19
19
 
20
20
  var _jsxFileName = "C:\\_dev\\nice-design-system\\components\\nds-page-header\\src\\PageHeader.js",
21
21
  _this = void 0;
22
22
 
23
23
  var PageHeader = function PageHeader(props) {
24
24
  var heading = props.heading,
25
+ _props$useAltHeading = props.useAltHeading,
26
+ useAltHeading = _props$useAltHeading === void 0 ? false : _props$useAltHeading,
25
27
  lead = props.lead,
26
28
  metadata = props.metadata,
27
29
  cta = props.cta,
@@ -33,15 +35,15 @@ var PageHeader = function PageHeader(props) {
33
35
  __self: _this,
34
36
  __source: {
35
37
  fileName: _jsxFileName,
36
- lineNumber: 10,
38
+ lineNumber: 18,
37
39
  columnNumber: 3
38
40
  }
39
41
  }), /*#__PURE__*/_react["default"].createElement("h1", {
40
- className: "page-header__heading",
42
+ className: "page-header__heading " + (useAltHeading ? "page-header__heading--alt" : ""),
41
43
  __self: _this,
42
44
  __source: {
43
45
  fileName: _jsxFileName,
44
- lineNumber: 11,
46
+ lineNumber: 19,
45
47
  columnNumber: 4
46
48
  }
47
49
  }, preheading && /*#__PURE__*/_react["default"].createElement("span", {
@@ -49,7 +51,7 @@ var PageHeader = function PageHeader(props) {
49
51
  __self: _this,
50
52
  __source: {
51
53
  fileName: _jsxFileName,
52
- lineNumber: 13,
54
+ lineNumber: 25,
53
55
  columnNumber: 6
54
56
  }
55
57
  }, preheading), heading), lead && /*#__PURE__*/_react["default"].createElement("p", {
@@ -57,7 +59,7 @@ var PageHeader = function PageHeader(props) {
57
59
  __self: _this,
58
60
  __source: {
59
61
  fileName: _jsxFileName,
60
- lineNumber: 18,
62
+ lineNumber: 30,
61
63
  columnNumber: 13
62
64
  }
63
65
  }, lead), metadata && /*#__PURE__*/_react["default"].createElement("ul", {
@@ -65,7 +67,7 @@ var PageHeader = function PageHeader(props) {
65
67
  __self: _this,
66
68
  __source: {
67
69
  fileName: _jsxFileName,
68
- lineNumber: 21,
70
+ lineNumber: 33,
69
71
  columnNumber: 5
70
72
  }
71
73
  }, metadata.map(function (metadatum, i) {
@@ -74,7 +76,7 @@ var PageHeader = function PageHeader(props) {
74
76
  __self: _this,
75
77
  __source: {
76
78
  fileName: _jsxFileName,
77
- lineNumber: 23,
79
+ lineNumber: 35,
78
80
  columnNumber: 7
79
81
  }
80
82
  }, metadatum);
@@ -83,7 +85,7 @@ var PageHeader = function PageHeader(props) {
83
85
  __self: _this,
84
86
  __source: {
85
87
  fileName: _jsxFileName,
86
- lineNumber: 28,
88
+ lineNumber: 40,
87
89
  columnNumber: 12
88
90
  }
89
91
  }, cta));
@@ -92,6 +94,7 @@ var PageHeader = function PageHeader(props) {
92
94
  exports.PageHeader = PageHeader;
93
95
  PageHeader.propTypes = {
94
96
  heading: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
97
+ useAltHeading: _propTypes["default"].bool,
95
98
  lead: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
96
99
  metadata: _propTypes["default"].arrayOf(_propTypes["default"].node),
97
100
  preheading: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/PageHeader.js"],"names":["PageHeader","props","heading","lead","metadata","cta","preheading","rest","map","metadatum","i","propTypes","PropTypes","oneOfType","arrayOf","node","isRequired"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAAAC,KAAK,EAAI;AAClC,MAAQC,OAAR,GAA8DD,KAA9D,CAAQC,OAAR;AAAA,MAAiBC,IAAjB,GAA8DF,KAA9D,CAAiBE,IAAjB;AAAA,MAAuBC,QAAvB,GAA8DH,KAA9D,CAAuBG,QAAvB;AAAA,MAAiCC,GAAjC,GAA8DJ,KAA9D,CAAiCI,GAAjC;AAAA,MAAsCC,UAAtC,GAA8DL,KAA9D,CAAsCK,UAAtC;AAAA,MAAqDC,IAArD,kDAA8DN,KAA9D;AAEA,sBACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiCM,IAAjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBACC;AAAI,IAAA,SAAS,EAAC,sBAAd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACED,UAAU,iBACV;AAAM,IAAA,SAAS,EAAC,0BAAhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAA4CA,UAA5C,CAFF,EAIEJ,OAJF,CADD,EAQEC,IAAI,iBAAI;AAAG,IAAA,SAAS,EAAC,mBAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAkCA,IAAlC,CARV,EAUEC,QAAQ,iBACR;AAAI,IAAA,SAAS,EAAC,uBAAd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACEA,QAAQ,CAACI,GAAT,CAAa,UAACC,SAAD,EAAYC,CAAZ;AAAA,wBACb;AAAI,MAAA,GAAG,EAAEA,CAAT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAaD,SAAb,CADa;AAAA,GAAb,CADF,CAXF,EAkBEJ,GAAG,iBAAI;AAAG,IAAA,SAAS,EAAC,kBAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAiCA,GAAjC,CAlBT,CADD;AAsBA,CAzBM;;;AA2BPL,UAAU,CAACW,SAAX,GAAuB;AACtBT,EAAAA,OAAO,EAAEU,sBAAUC,SAAV,CAAoB,CAC5BD,sBAAUE,OAAV,CAAkBF,sBAAUG,IAA5B,CAD4B,EAE5BH,sBAAUG,IAFkB,CAApB,EAGNC,UAJmB;AAKtBb,EAAAA,IAAI,EAAES,sBAAUC,SAAV,CAAoB,CACzBD,sBAAUE,OAAV,CAAkBF,sBAAUG,IAA5B,CADyB,EAEzBH,sBAAUG,IAFe,CAApB,CALgB;AAStBX,EAAAA,QAAQ,EAAEQ,sBAAUE,OAAV,CAAkBF,sBAAUG,IAA5B,CATY;AAUtBT,EAAAA,UAAU,EAAEM,sBAAUC,SAAV,CAAoB,CAC/BD,sBAAUE,OAAV,CAAkBF,sBAAUG,IAA5B,CAD+B,EAE/BH,sBAAUG,IAFqB,CAApB,CAVU;AActBV,EAAAA,GAAG,EAAEO,sBAAUC,SAAV,CAAoB,CAACD,sBAAUE,OAAV,CAAkBF,sBAAUG,IAA5B,CAAD,EAAoCH,sBAAUG,IAA9C,CAApB;AAdiB,CAAvB","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport \"../scss/page-header.scss\";\n\nexport const PageHeader = props => {\n\tconst { heading, lead, metadata, cta, preheading, ...rest } = props;\n\n\treturn (\n\t\t<div className=\"page-header\" {...rest}>\n\t\t\t<h1 className=\"page-header__heading\">\n\t\t\t\t{preheading && (\n\t\t\t\t\t<span className=\"page-header__pre-heading\">{preheading}</span>\n\t\t\t\t)}\n\t\t\t\t{heading}\n\t\t\t</h1>\n\n\t\t\t{lead && <p className=\"page-header__lead\">{lead}</p>}\n\n\t\t\t{metadata && (\n\t\t\t\t<ul className=\"page-header__metadata\">\n\t\t\t\t\t{metadata.map((metadatum, i) => (\n\t\t\t\t\t\t<li key={i}>{metadatum}</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\n\t\t\t{cta && <p className=\"page-header__cta\">{cta}</p>}\n\t\t</div>\n\t);\n};\n\nPageHeader.propTypes = {\n\theading: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tlead: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]),\n\tmetadata: PropTypes.arrayOf(PropTypes.node),\n\tpreheading: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]),\n\tcta: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n"],"file":"PageHeader.js"}
1
+ {"version":3,"file":"PageHeader.js","names":["PageHeader","props","heading","useAltHeading","lead","metadata","cta","preheading","rest","map","metadatum","i","propTypes","PropTypes","oneOfType","arrayOf","node","isRequired","bool"],"sources":["../src/PageHeader.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport \"../scss/page-header.scss\";\n\nexport const PageHeader = (props) => {\n\tconst {\n\t\theading,\n\t\tuseAltHeading = false,\n\t\tlead,\n\t\tmetadata,\n\t\tcta,\n\t\tpreheading,\n\t\t...rest\n\t} = props;\n\n\treturn (\n\t\t<div className=\"page-header\" {...rest}>\n\t\t\t<h1\n\t\t\t\tclassName={`page-header__heading ${\n\t\t\t\t\tuseAltHeading ? \"page-header__heading--alt\" : \"\"\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{preheading && (\n\t\t\t\t\t<span className=\"page-header__pre-heading\">{preheading}</span>\n\t\t\t\t)}\n\t\t\t\t{heading}\n\t\t\t</h1>\n\n\t\t\t{lead && <p className=\"page-header__lead\">{lead}</p>}\n\n\t\t\t{metadata && (\n\t\t\t\t<ul className=\"page-header__metadata\">\n\t\t\t\t\t{metadata.map((metadatum, i) => (\n\t\t\t\t\t\t<li key={i}>{metadatum}</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\n\t\t\t{cta && <p className=\"page-header__cta\">{cta}</p>}\n\t\t</div>\n\t);\n};\n\nPageHeader.propTypes = {\n\theading: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tuseAltHeading: PropTypes.bool,\n\tlead: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]),\n\tmetadata: PropTypes.arrayOf(PropTypes.node),\n\tpreheading: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]),\n\tcta: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAAW;EACpC,IACCC,OADD,GAQID,KARJ,CACCC,OADD;EAAA,2BAQID,KARJ,CAECE,aAFD;EAAA,IAECA,aAFD,qCAEiB,KAFjB;EAAA,IAGCC,IAHD,GAQIH,KARJ,CAGCG,IAHD;EAAA,IAICC,QAJD,GAQIJ,KARJ,CAICI,QAJD;EAAA,IAKCC,GALD,GAQIL,KARJ,CAKCK,GALD;EAAA,IAMCC,UAND,GAQIN,KARJ,CAMCM,UAND;EAAA,IAOIC,IAPJ,kDAQIP,KARJ;EAUA,oBACC;IAAK,SAAS,EAAC;EAAf,GAAiCO,IAAjC;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,iBACC;IACC,SAAS,6BACRL,aAAa,GAAG,2BAAH,GAAiC,EADtC,CADV;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAKEI,UAAU,iBACV;IAAM,SAAS,EAAC,0BAAhB;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAA4CA,UAA5C,CANF,EAQEL,OARF,CADD,EAYEE,IAAI,iBAAI;IAAG,SAAS,EAAC,mBAAb;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAAkCA,IAAlC,CAZV,EAcEC,QAAQ,iBACR;IAAI,SAAS,EAAC,uBAAd;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GACEA,QAAQ,CAACI,GAAT,CAAa,UAACC,SAAD,EAAYC,CAAZ;IAAA,oBACb;MAAI,GAAG,EAAEA,CAAT;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAAaD,SAAb,CADa;EAAA,CAAb,CADF,CAfF,EAsBEJ,GAAG,iBAAI;IAAG,SAAS,EAAC,kBAAb;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAAiCA,GAAjC,CAtBT,CADD;AA0BA,CArCM;;;AAuCPN,UAAU,CAACY,SAAX,GAAuB;EACtBV,OAAO,EAAEW,qBAAA,CAAUC,SAAV,CAAoB,CAC5BD,qBAAA,CAAUE,OAAV,CAAkBF,qBAAA,CAAUG,IAA5B,CAD4B,EAE5BH,qBAAA,CAAUG,IAFkB,CAApB,EAGNC,UAJmB;EAKtBd,aAAa,EAAEU,qBAAA,CAAUK,IALH;EAMtBd,IAAI,EAAES,qBAAA,CAAUC,SAAV,CAAoB,CACzBD,qBAAA,CAAUE,OAAV,CAAkBF,qBAAA,CAAUG,IAA5B,CADyB,EAEzBH,qBAAA,CAAUG,IAFe,CAApB,CANgB;EAUtBX,QAAQ,EAAEQ,qBAAA,CAAUE,OAAV,CAAkBF,qBAAA,CAAUG,IAA5B,CAVY;EAWtBT,UAAU,EAAEM,qBAAA,CAAUC,SAAV,CAAoB,CAC/BD,qBAAA,CAAUE,OAAV,CAAkBF,qBAAA,CAAUG,IAA5B,CAD+B,EAE/BH,qBAAA,CAAUG,IAFqB,CAApB,CAXU;EAetBV,GAAG,EAAEO,qBAAA,CAAUC,SAAV,CAAoB,CAACD,qBAAA,CAAUE,OAAV,CAAkBF,qBAAA,CAAUG,IAA5B,CAAD,EAAoCH,qBAAA,CAAUG,IAA9C,CAApB;AAfiB,CAAvB"}
@@ -3,6 +3,7 @@ declare module "@nice-digital/nds-page-header" {
3
3
 
4
4
  export interface PageHeaderProps {
5
5
  [prop: string]: unknown;
6
+ useAltHeading?: boolean;
6
7
  preheading?: React.ReactNode;
7
8
  heading: React.ReactNode;
8
9
  lead?: React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice-digital/nds-page-header",
3
- "version": "2.0.2-alpha.0",
3
+ "version": "2.0.3-alpha.0",
4
4
  "description": "Page header component for the NICE Design System",
5
5
  "keywords": [
6
6
  "header"
@@ -37,7 +37,7 @@
37
37
  "url": "https://github.com/nice-digital/nice-design-system/issues"
38
38
  },
39
39
  "dependencies": {
40
- "@nice-digital/nds-core": "^2.0.2-alpha.0",
40
+ "@nice-digital/nds-core": "^2.0.3-alpha.0",
41
41
  "prop-types": "^15.7.2"
42
42
  },
43
43
  "peerDependencies": {
@@ -47,5 +47,5 @@
47
47
  "devDependencies": {
48
48
  "@babel/cli": "^7.5.0"
49
49
  },
50
- "gitHead": "04839cc13ae0a0fbd0baeefff5996943285dafab"
50
+ "gitHead": "4a3743bed00bf33822d76b1815e85e96c0d699f4"
51
51
  }
@@ -40,6 +40,10 @@
40
40
  &__heading {
41
41
  @include typography.font-size(h1);
42
42
  margin: utils.rem(0 0 spacing.$small 0);
43
+
44
+ &--alt {
45
+ @include typography.font-size(h1-alt);
46
+ }
43
47
  }
44
48
 
45
49
  &__lead {
@@ -67,7 +71,7 @@
67
71
  &:after {
68
72
  background: colours.$icons;
69
73
  content: glyphs.get-glyph(zero-width-space);
70
- margin: utils.em(0 spacing.$small);
74
+ margin: utils.rem(0 spacing.$small);
71
75
  width: 1px;
72
76
  }
73
77