@cloudflare/component-page 7.0.0 → 7.2.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/Page.d.ts +9 -4
  3. package/es/Page.js +50 -19
  4. package/lib/Page.js +73 -43
  5. package/package.json +2 -1
  6. package/src/Page.tsx +58 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # Change Log
2
2
 
3
+ ## 7.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 9770d520c9: Add DocumentationLink to component-link; non-breaking design changes to component-page (incl. new props, heading hierarchy) + deprecate subtitle prop.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [9770d520c9]
12
+ - @cloudflare/component-link@7.1.0
13
+
14
+ ## 7.1.0
15
+
16
+ ### Minor Changes
17
+
18
+ - 51c2d1f916: Apply flex only when sidebar is placed inside, allowing main content to take up the full width if otherwise
19
+
3
20
  ## 7.0.0
4
21
 
5
22
  ### Patch Changes
package/dist/Page.d.ts CHANGED
@@ -3,21 +3,26 @@ declare type PageWidth = 'narrow' | 'wide' | 'unbounded';
3
3
  declare const _default: React.ComponentType<{
4
4
  title?: React.ReactNode;
5
5
  subtitle?: React.ReactNode;
6
+ parentPageLabel?: React.ReactNode;
6
7
  description?: React.ReactNode;
8
+ documentationLabel?: React.ReactNode;
9
+ documentationHref?: string | undefined;
7
10
  control?: React.ReactNode;
8
11
  children?: React.ReactNode;
9
12
  centerHeader?: boolean | undefined;
10
13
  beta?: boolean | undefined;
11
14
  titleRef?: React.RefObject<HTMLHeadingElement> | undefined;
12
15
  subtitleRef?: React.RefObject<HTMLHeadingElement> | undefined;
16
+ parentPageLabelRef?: React.RefObject<HTMLHeadingElement> | undefined;
13
17
  type?: PageWidth | undefined;
14
18
  className?: string | undefined;
15
19
  testId?: string | undefined;
16
20
  sidebar?: React.ReactNode;
17
21
  sidebarPosition?: "left" | "inside" | "outside" | undefined;
18
22
  autofocus?: boolean | undefined;
19
- p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
20
23
  color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
24
+ borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
25
+ p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
21
26
  height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
22
27
  width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
23
28
  cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
@@ -25,7 +30,6 @@ declare const _default: React.ComponentType<{
25
30
  fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
26
31
  fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
27
32
  textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
28
- borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
29
33
  margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
30
34
  marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
31
35
  marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
@@ -84,12 +88,13 @@ declare const _default: React.ComponentType<{
84
88
  flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
85
89
  flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
86
90
  flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
91
+ gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
87
92
  innerRef?: React.Ref<never> | undefined;
88
93
  gridColumnSpan?: number | number[] | "end" | "all" | undefined;
89
94
  gridColumnPad?: number | number[] | undefined;
90
95
  gridRowSpan?: number | number[] | undefined;
91
96
  gridRowPad?: number | number[] | undefined;
92
- gridAlign?: ("end" | "start" | "center" | "stretch") | undefined;
93
- gridJustify?: ("end" | "start" | "center" | "stretch") | undefined;
97
+ gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
98
+ gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
94
99
  }>;
95
100
  export default _default;
package/es/Page.js CHANGED
@@ -1,19 +1,32 @@
1
1
  import React, { useEffect, useRef } from 'react';
2
2
  import { useHistory } from 'react-router-dom';
3
3
  import { createStyledComponent, createComponent } from '@cloudflare/style-container';
4
- import { Main, Header, Div } from '@cloudflare/elements';
4
+ import { Main, Header, Div, P } from '@cloudflare/elements';
5
5
  import { Label } from '@cloudflare/component-label';
6
6
  import { Trans } from '@cloudflare/intl-react';
7
7
  import { Heading, Section } from './Heading';
8
+ import { DocumentationLink } from '@cloudflare/component-link';
8
9
  var maxWidthByType = {
9
10
  narrow: '64em',
10
11
  wide: '79em',
11
12
  unbounded: '100%'
12
13
  };
13
- var PageDescription = createComponent(_ref => {
14
+ var ParentPageLabel = createComponent(_ref => {
14
15
  var {
15
16
  theme
16
17
  } = _ref;
18
+ return {
19
+ fontSize: theme.fontSizes[3],
20
+ marginTop: theme.space[2],
21
+ lineHeight: 1.5,
22
+ color: theme.colors.gray[3],
23
+ fontWeight: 600
24
+ };
25
+ }, P);
26
+ var PageDescription = createComponent(_ref2 => {
27
+ var {
28
+ theme
29
+ } = _ref2;
17
30
  return {
18
31
  fontSize: theme.fontSizes[3],
19
32
  marginTop: theme.space[2],
@@ -22,14 +35,14 @@ var PageDescription = createComponent(_ref => {
22
35
  color: theme.colors.gray[3],
23
36
  fontWeight: 400
24
37
  };
25
- }, 'p');
38
+ }, P);
26
39
  PageDescription.displayName = 'PageDescription';
27
40
 
28
- var ControlWrapper = _ref2 => {
41
+ var ControlWrapper = _ref3 => {
29
42
  var {
30
43
  control,
31
44
  children
32
- } = _ref2;
45
+ } = _ref3;
33
46
  return control ? /*#__PURE__*/React.createElement(Div, {
34
47
  display: ['block', 'flex'],
35
48
  justifyContent: "space-between"
@@ -38,18 +51,22 @@ var ControlWrapper = _ref2 => {
38
51
 
39
52
  var maxPageTitles = 2;
40
53
 
41
- var PageHeader = _ref3 => {
54
+ var PageHeader = _ref4 => {
42
55
  var {
43
56
  title,
44
57
  subtitle,
58
+ parentPageLabel,
45
59
  description,
60
+ documentationLabel,
61
+ documentationHref,
46
62
  centerHeader,
47
63
  control,
48
64
  children,
49
65
  beta,
50
66
  titleRef,
51
- subtitleRef
52
- } = _ref3;
67
+ subtitleRef,
68
+ parentPageLabelRef
69
+ } = _ref4;
53
70
  var headerVisible = !!(title || subtitle || description);
54
71
  var titlesCount = Math.min([title, subtitle, description].filter(Boolean).length, 2);
55
72
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ControlWrapper, {
@@ -57,10 +74,12 @@ var PageHeader = _ref3 => {
57
74
  }, /*#__PURE__*/React.createElement(Header, {
58
75
  mb: headerVisible ? 3 : 0,
59
76
  textAlign: centerHeader ? 'center' : undefined
60
- }, title && /*#__PURE__*/React.createElement(Heading, {
77
+ }, parentPageLabel && /*#__PURE__*/React.createElement(ParentPageLabel, {
78
+ innerRef: parentPageLabelRef
79
+ }, parentPageLabel), title && /*#__PURE__*/React.createElement(Heading, {
61
80
  innerRef: titleRef
62
81
  }, title, beta && /*#__PURE__*/React.createElement(Label, {
63
- hue: "orange",
82
+ hue: "gray",
64
83
  ml: 2,
65
84
  verticalAlign: "middle"
66
85
  }, /*#__PURE__*/React.createElement(Trans, {
@@ -70,11 +89,15 @@ var PageHeader = _ref3 => {
70
89
  level: title ? 2 : 1,
71
90
  offset: title ? 0 : 1,
72
91
  innerRef: subtitleRef
73
- }, subtitle), description && (subtitle ? /*#__PURE__*/React.createElement(PageDescription, null, description) : /*#__PURE__*/React.createElement(Heading, {
74
- level: 2,
75
- fontSize: 4,
76
- color: "gray.3"
77
- }, description)))), /*#__PURE__*/React.createElement(Section, {
92
+ }, subtitle), description && /*#__PURE__*/React.createElement(PageDescription, null, description), documentationHref && /*#__PURE__*/React.createElement(DocumentationLink, {
93
+ fontSize: 2,
94
+ iconSize: 14,
95
+ href: documentationHref,
96
+ display: "block"
97
+ }, documentationLabel ? documentationLabel : /*#__PURE__*/React.createElement(Trans, {
98
+ id: "common.documentation",
99
+ _: 'Documentation'
100
+ })))), /*#__PURE__*/React.createElement(Section, {
78
101
  level: titlesCount,
79
102
  offset: maxPageTitles - titlesCount
80
103
  }, children));
@@ -99,13 +122,16 @@ var focus = function focus(el) {
99
122
  }
100
123
  };
101
124
 
102
- var Page = _ref4 => {
125
+ var Page = _ref5 => {
103
126
  var _history$location;
104
127
 
105
128
  var {
106
129
  title,
107
130
  subtitle,
131
+ parentPageLabel,
108
132
  description,
133
+ documentationLabel,
134
+ documentationHref,
109
135
  centerHeader,
110
136
  beta,
111
137
  testId,
@@ -117,8 +143,9 @@ var Page = _ref4 => {
117
143
  control,
118
144
  titleRef,
119
145
  subtitleRef,
146
+ parentPageLabelRef,
120
147
  children
121
- } = _ref4;
148
+ } = _ref5;
122
149
  var history = useHistory();
123
150
  var skipTargetRef = useRef(null);
124
151
  var path = history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : _history$location.pathname;
@@ -144,7 +171,7 @@ var Page = _ref4 => {
144
171
  }, /*#__PURE__*/React.createElement(Div, {
145
172
  ml: "auto",
146
173
  mr: sidebar && !sidebarInside ? 0 : 'auto',
147
- display: sidebar ? ['block', 'block', 'flex'] : undefined,
174
+ display: sidebar && sidebarInside ? ['block', 'block', 'flex'] : undefined,
148
175
  width: type === 'unbounded' ? '100%' : '90%',
149
176
  maxWidth: maxWidthByType[type] || maxWidthByType.narrow
150
177
  }, /*#__PURE__*/React.createElement(Div, {
@@ -157,14 +184,18 @@ var Page = _ref4 => {
157
184
  tabIndex: -1
158
185
  }), /*#__PURE__*/React.createElement(PageHeader, {
159
186
  title: title,
187
+ parentPageLabel: parentPageLabel,
160
188
  subtitle: subtitle,
161
189
  description: description,
190
+ documentationLabel: documentationLabel,
191
+ documentationHref: documentationHref,
162
192
  centerHeader: centerHeader,
163
193
  control: control,
164
194
  children: children,
165
195
  beta: beta,
166
196
  titleRef: titleRef,
167
- subtitleRef: subtitleRef
197
+ subtitleRef: subtitleRef,
198
+ parentPageLabelRef: parentPageLabelRef
168
199
  })), sidebar && sidebarInside && /*#__PURE__*/React.createElement(Div, {
169
200
  width: [1, 1, 1 / 3],
170
201
  pl: [0, 0, 3],
package/lib/Page.js CHANGED
@@ -21,6 +21,8 @@ var _intlReact = require("@cloudflare/intl-react");
21
21
 
22
22
  var _Heading = require("./Heading");
23
23
 
24
+ var _componentLink = require("@cloudflare/component-link");
25
+
24
26
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
27
 
26
28
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,8 +32,18 @@ var maxWidthByType = {
30
32
  wide: '79em',
31
33
  unbounded: '100%'
32
34
  };
33
- var PageDescription = (0, _styleContainer.createComponent)(function (_ref) {
35
+ var ParentPageLabel = (0, _styleContainer.createComponent)(function (_ref) {
34
36
  var theme = _ref.theme;
37
+ return {
38
+ fontSize: theme.fontSizes[3],
39
+ marginTop: theme.space[2],
40
+ lineHeight: 1.5,
41
+ color: theme.colors.gray[3],
42
+ fontWeight: 600
43
+ };
44
+ }, _elements.P);
45
+ var PageDescription = (0, _styleContainer.createComponent)(function (_ref2) {
46
+ var theme = _ref2.theme;
35
47
  return {
36
48
  fontSize: theme.fontSizes[3],
37
49
  marginTop: theme.space[2],
@@ -40,12 +52,12 @@ var PageDescription = (0, _styleContainer.createComponent)(function (_ref) {
40
52
  color: theme.colors.gray[3],
41
53
  fontWeight: 400
42
54
  };
43
- }, 'p');
55
+ }, _elements.P);
44
56
  PageDescription.displayName = 'PageDescription';
45
57
 
46
- var ControlWrapper = function ControlWrapper(_ref2) {
47
- var control = _ref2.control,
48
- children = _ref2.children;
58
+ var ControlWrapper = function ControlWrapper(_ref3) {
59
+ var control = _ref3.control,
60
+ children = _ref3.children;
49
61
  return control ? /*#__PURE__*/_react.default.createElement(_elements.Div, {
50
62
  display: ['block', 'flex'],
51
63
  justifyContent: "space-between"
@@ -54,16 +66,20 @@ var ControlWrapper = function ControlWrapper(_ref2) {
54
66
 
55
67
  var maxPageTitles = 2;
56
68
 
57
- var PageHeader = function PageHeader(_ref3) {
58
- var title = _ref3.title,
59
- subtitle = _ref3.subtitle,
60
- description = _ref3.description,
61
- centerHeader = _ref3.centerHeader,
62
- control = _ref3.control,
63
- children = _ref3.children,
64
- beta = _ref3.beta,
65
- titleRef = _ref3.titleRef,
66
- subtitleRef = _ref3.subtitleRef;
69
+ var PageHeader = function PageHeader(_ref4) {
70
+ var title = _ref4.title,
71
+ subtitle = _ref4.subtitle,
72
+ parentPageLabel = _ref4.parentPageLabel,
73
+ description = _ref4.description,
74
+ documentationLabel = _ref4.documentationLabel,
75
+ documentationHref = _ref4.documentationHref,
76
+ centerHeader = _ref4.centerHeader,
77
+ control = _ref4.control,
78
+ children = _ref4.children,
79
+ beta = _ref4.beta,
80
+ titleRef = _ref4.titleRef,
81
+ subtitleRef = _ref4.subtitleRef,
82
+ parentPageLabelRef = _ref4.parentPageLabelRef;
67
83
  var headerVisible = !!(title || subtitle || description);
68
84
  var titlesCount = Math.min([title, subtitle, description].filter(Boolean).length, 2);
69
85
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ControlWrapper, {
@@ -71,10 +87,12 @@ var PageHeader = function PageHeader(_ref3) {
71
87
  }, /*#__PURE__*/_react.default.createElement(_elements.Header, {
72
88
  mb: headerVisible ? 3 : 0,
73
89
  textAlign: centerHeader ? 'center' : undefined
74
- }, title && /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
90
+ }, parentPageLabel && /*#__PURE__*/_react.default.createElement(ParentPageLabel, {
91
+ innerRef: parentPageLabelRef
92
+ }, parentPageLabel), title && /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
75
93
  innerRef: titleRef
76
94
  }, title, beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
77
- hue: "orange",
95
+ hue: "gray",
78
96
  ml: 2,
79
97
  verticalAlign: "middle"
80
98
  }, /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
@@ -84,11 +102,15 @@ var PageHeader = function PageHeader(_ref3) {
84
102
  level: title ? 2 : 1,
85
103
  offset: title ? 0 : 1,
86
104
  innerRef: subtitleRef
87
- }, subtitle), description && (subtitle ? /*#__PURE__*/_react.default.createElement(PageDescription, null, description) : /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
88
- level: 2,
89
- fontSize: 4,
90
- color: "gray.3"
91
- }, description)))), /*#__PURE__*/_react.default.createElement(_Heading.Section, {
105
+ }, subtitle), description && /*#__PURE__*/_react.default.createElement(PageDescription, null, description), documentationHref && /*#__PURE__*/_react.default.createElement(_componentLink.DocumentationLink, {
106
+ fontSize: 2,
107
+ iconSize: 14,
108
+ href: documentationHref,
109
+ display: "block"
110
+ }, documentationLabel ? documentationLabel : /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
111
+ id: "common.documentation",
112
+ _: 'Documentation'
113
+ })))), /*#__PURE__*/_react.default.createElement(_Heading.Section, {
92
114
  level: titlesCount,
93
115
  offset: maxPageTitles - titlesCount
94
116
  }, children));
@@ -115,27 +137,31 @@ var focus = function focus(el) {
115
137
  }
116
138
  };
117
139
 
118
- var Page = function Page(_ref4) {
140
+ var Page = function Page(_ref5) {
119
141
  var _history$location;
120
142
 
121
- var title = _ref4.title,
122
- subtitle = _ref4.subtitle,
123
- description = _ref4.description,
124
- centerHeader = _ref4.centerHeader,
125
- beta = _ref4.beta,
126
- testId = _ref4.testId,
127
- className = _ref4.className,
128
- sidebar = _ref4.sidebar,
129
- _ref4$type = _ref4.type,
130
- type = _ref4$type === void 0 ? 'wide' : _ref4$type,
131
- _ref4$sidebarPosition = _ref4.sidebarPosition,
132
- sidebarPosition = _ref4$sidebarPosition === void 0 ? 'inside' : _ref4$sidebarPosition,
133
- _ref4$autofocus = _ref4.autofocus,
134
- autofocus = _ref4$autofocus === void 0 ? true : _ref4$autofocus,
135
- control = _ref4.control,
136
- titleRef = _ref4.titleRef,
137
- subtitleRef = _ref4.subtitleRef,
138
- children = _ref4.children;
143
+ var title = _ref5.title,
144
+ subtitle = _ref5.subtitle,
145
+ parentPageLabel = _ref5.parentPageLabel,
146
+ description = _ref5.description,
147
+ documentationLabel = _ref5.documentationLabel,
148
+ documentationHref = _ref5.documentationHref,
149
+ centerHeader = _ref5.centerHeader,
150
+ beta = _ref5.beta,
151
+ testId = _ref5.testId,
152
+ className = _ref5.className,
153
+ sidebar = _ref5.sidebar,
154
+ _ref5$type = _ref5.type,
155
+ type = _ref5$type === void 0 ? 'wide' : _ref5$type,
156
+ _ref5$sidebarPosition = _ref5.sidebarPosition,
157
+ sidebarPosition = _ref5$sidebarPosition === void 0 ? 'inside' : _ref5$sidebarPosition,
158
+ _ref5$autofocus = _ref5.autofocus,
159
+ autofocus = _ref5$autofocus === void 0 ? true : _ref5$autofocus,
160
+ control = _ref5.control,
161
+ titleRef = _ref5.titleRef,
162
+ subtitleRef = _ref5.subtitleRef,
163
+ parentPageLabelRef = _ref5.parentPageLabelRef,
164
+ children = _ref5.children;
139
165
  var history = (0, _reactRouterDom.useHistory)();
140
166
  var skipTargetRef = (0, _react.useRef)(null);
141
167
  var path = history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : _history$location.pathname;
@@ -161,7 +187,7 @@ var Page = function Page(_ref4) {
161
187
  }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
162
188
  ml: "auto",
163
189
  mr: sidebar && !sidebarInside ? 0 : 'auto',
164
- display: sidebar ? ['block', 'block', 'flex'] : undefined,
190
+ display: sidebar && sidebarInside ? ['block', 'block', 'flex'] : undefined,
165
191
  width: type === 'unbounded' ? '100%' : '90%',
166
192
  maxWidth: maxWidthByType[type] || maxWidthByType.narrow
167
193
  }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
@@ -174,14 +200,18 @@ var Page = function Page(_ref4) {
174
200
  tabIndex: -1
175
201
  }), /*#__PURE__*/_react.default.createElement(PageHeader, {
176
202
  title: title,
203
+ parentPageLabel: parentPageLabel,
177
204
  subtitle: subtitle,
178
205
  description: description,
206
+ documentationLabel: documentationLabel,
207
+ documentationHref: documentationHref,
179
208
  centerHeader: centerHeader,
180
209
  control: control,
181
210
  children: children,
182
211
  beta: beta,
183
212
  titleRef: titleRef,
184
- subtitleRef: subtitleRef
213
+ subtitleRef: subtitleRef,
214
+ parentPageLabelRef: parentPageLabelRef
185
215
  })), sidebar && sidebarInside && /*#__PURE__*/_react.default.createElement(_elements.Div, {
186
216
  width: [1, 1, 1 / 3],
187
217
  pl: [0, 0, 3],
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudflare/component-page",
3
3
  "description": "Cloudflare Page Component",
4
- "version": "7.0.0",
4
+ "version": "7.2.0",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "James Kyle <jkyle@cloudflare.com>",
@@ -14,6 +14,7 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@cloudflare/component-label": "^5.0.0",
17
+ "@cloudflare/component-link": "^7.1.0",
17
18
  "@cloudflare/elements": "^3.0.0",
18
19
  "@cloudflare/intl-react": "^1.9.80",
19
20
  "react-router-dom": "^5.1.0"
package/src/Page.tsx CHANGED
@@ -4,23 +4,31 @@ import {
4
4
  createStyledComponent,
5
5
  createComponent
6
6
  } from '@cloudflare/style-container';
7
- import { Main, Header, Div } from '@cloudflare/elements';
7
+ import { Main, Header, Div, P } from '@cloudflare/elements';
8
8
  import { Label } from '@cloudflare/component-label';
9
9
  import { Trans } from '@cloudflare/intl-react';
10
10
  import { Heading, Section } from './Heading';
11
+ import { DocumentationLink } from '@cloudflare/component-link';
11
12
 
12
13
  type PageWidth = 'narrow' | 'wide' | 'unbounded';
13
14
 
14
15
  type PageHeaderProps = {
15
16
  title?: React.ReactNode;
17
+ /**
18
+ * @deprecated. We are no longer using subtitles. Questions? Please chat with PCX :).
19
+ */
16
20
  subtitle?: React.ReactNode;
21
+ parentPageLabel?: React.ReactNode;
17
22
  description?: React.ReactNode;
23
+ documentationLabel?: React.ReactNode;
24
+ documentationHref?: string;
18
25
  control?: React.ReactNode;
19
26
  children?: React.ReactNode;
20
27
  centerHeader?: boolean;
21
28
  beta?: boolean;
22
29
  titleRef?: React.RefObject<HTMLHeadingElement>;
23
30
  subtitleRef?: React.RefObject<HTMLHeadingElement>;
31
+ parentPageLabelRef?: React.RefObject<HTMLHeadingElement>;
24
32
  };
25
33
 
26
34
  type Props = PageHeaderProps & {
@@ -38,6 +46,17 @@ const maxWidthByType = {
38
46
  unbounded: '100%'
39
47
  };
40
48
 
49
+ const ParentPageLabel = createComponent(
50
+ ({ theme }) => ({
51
+ fontSize: theme.fontSizes[3],
52
+ marginTop: theme.space[2],
53
+ lineHeight: 1.5,
54
+ color: theme.colors.gray[3],
55
+ fontWeight: 600
56
+ }),
57
+ P
58
+ );
59
+
41
60
  const PageDescription = createComponent(
42
61
  ({ theme }) => ({
43
62
  fontSize: theme.fontSizes[3],
@@ -47,7 +66,7 @@ const PageDescription = createComponent(
47
66
  color: theme.colors.gray[3],
48
67
  fontWeight: 400
49
68
  }),
50
- 'p'
69
+ P
51
70
  );
52
71
 
53
72
  PageDescription.displayName = 'PageDescription';
@@ -73,13 +92,17 @@ const maxPageTitles = 2;
73
92
  const PageHeader = ({
74
93
  title,
75
94
  subtitle,
95
+ parentPageLabel,
76
96
  description,
97
+ documentationLabel,
98
+ documentationHref,
77
99
  centerHeader,
78
100
  control,
79
101
  children,
80
102
  beta,
81
103
  titleRef,
82
- subtitleRef
104
+ subtitleRef,
105
+ parentPageLabelRef
83
106
  }: PageHeaderProps) => {
84
107
  const headerVisible = !!(title || subtitle || description);
85
108
  const titlesCount = Math.min(
@@ -94,11 +117,16 @@ const PageHeader = ({
94
117
  mb={headerVisible ? 3 : 0}
95
118
  textAlign={centerHeader ? 'center' : undefined}
96
119
  >
120
+ {parentPageLabel && (
121
+ <ParentPageLabel innerRef={parentPageLabelRef}>
122
+ {parentPageLabel}
123
+ </ParentPageLabel>
124
+ )}
97
125
  {title && (
98
126
  <Heading innerRef={titleRef}>
99
127
  {title}
100
128
  {beta && (
101
- <Label hue="orange" ml={2} verticalAlign="middle">
129
+ <Label hue="gray" ml={2} verticalAlign="middle">
102
130
  <Trans _="Beta" id="common.beta" />
103
131
  </Label>
104
132
  )}
@@ -113,14 +141,21 @@ const PageHeader = ({
113
141
  {subtitle}
114
142
  </Heading>
115
143
  )}
116
- {description &&
117
- (subtitle ? (
118
- <PageDescription>{description}</PageDescription>
119
- ) : (
120
- <Heading level={2} fontSize={4} color="gray.3">
121
- {description}
122
- </Heading>
123
- ))}
144
+ {description && <PageDescription>{description}</PageDescription>}
145
+ {documentationHref && (
146
+ <DocumentationLink
147
+ fontSize={2}
148
+ iconSize={14}
149
+ href={documentationHref}
150
+ display="block"
151
+ >
152
+ {documentationLabel ? (
153
+ documentationLabel
154
+ ) : (
155
+ <Trans id="common.documentation" _={'Documentation'} />
156
+ )}
157
+ </DocumentationLink>
158
+ )}
124
159
  </Header>
125
160
  </ControlWrapper>
126
161
  <Section level={titlesCount} offset={maxPageTitles - titlesCount}>
@@ -156,7 +191,10 @@ const focus = (el: HTMLElement | null, attempt: number = 0) => {
156
191
  const Page = ({
157
192
  title,
158
193
  subtitle,
194
+ parentPageLabel,
159
195
  description,
196
+ documentationLabel,
197
+ documentationHref,
160
198
  centerHeader,
161
199
  beta,
162
200
  testId,
@@ -168,6 +206,7 @@ const Page = ({
168
206
  control,
169
207
  titleRef,
170
208
  subtitleRef,
209
+ parentPageLabelRef,
171
210
  children
172
211
  }: Props) => {
173
212
  const history = useHistory();
@@ -200,7 +239,9 @@ const Page = ({
200
239
  <Div
201
240
  ml="auto"
202
241
  mr={sidebar && !sidebarInside ? 0 : 'auto'}
203
- display={sidebar ? ['block', 'block', 'flex'] : undefined}
242
+ display={
243
+ sidebar && sidebarInside ? ['block', 'block', 'flex'] : undefined
244
+ }
204
245
  width={type === 'unbounded' ? '100%' : '90%'}
205
246
  maxWidth={maxWidthByType[type] || maxWidthByType.narrow}
206
247
  >
@@ -213,14 +254,18 @@ const Page = ({
213
254
 
214
255
  <PageHeader
215
256
  title={title}
257
+ parentPageLabel={parentPageLabel}
216
258
  subtitle={subtitle}
217
259
  description={description}
260
+ documentationLabel={documentationLabel}
261
+ documentationHref={documentationHref}
218
262
  centerHeader={centerHeader}
219
263
  control={control}
220
264
  children={children}
221
265
  beta={beta}
222
266
  titleRef={titleRef}
223
267
  subtitleRef={subtitleRef}
268
+ parentPageLabelRef={parentPageLabelRef}
224
269
  />
225
270
  </Div>
226
271
  {sidebar && sidebarInside && (