@cloudflare/component-page 7.2.12 → 8.0.1

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 +12 -0
  2. package/dist/Page.d.ts +1 -2
  3. package/es/Page.js +35 -64
  4. package/lib/Page.js +61 -84
  5. package/package.json +1 -1
  6. package/src/Page.tsx +37 -80
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Change Log
2
2
 
3
+ ## 8.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - da7fe8f70b: fix responsive flex display
8
+
9
+ ## 8.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - de7a159611: Remove deprecated subtitle prop, add new navigation prop
14
+
3
15
  ## 7.2.12
4
16
 
5
17
  ### Patch Changes
package/dist/Page.d.ts CHANGED
@@ -2,7 +2,6 @@ import React from 'react';
2
2
  declare type PageWidth = 'narrow' | 'wide' | 'unbounded';
3
3
  declare const _default: React.ComponentType<{
4
4
  title?: React.ReactNode;
5
- subtitle?: React.ReactNode;
6
5
  parentPageLabel?: React.ReactNode;
7
6
  description?: React.ReactNode;
8
7
  documentationLabel?: React.ReactNode;
@@ -12,8 +11,8 @@ declare const _default: React.ComponentType<{
12
11
  centerHeader?: boolean | undefined;
13
12
  beta?: boolean | undefined;
14
13
  titleRef?: React.RefObject<HTMLHeadingElement> | undefined;
15
- subtitleRef?: React.RefObject<HTMLHeadingElement> | undefined;
16
14
  parentPageLabelRef?: React.RefObject<HTMLHeadingElement> | undefined;
15
+ navigation?: React.ReactNode;
17
16
  type?: PageWidth | undefined;
18
17
  className?: string | undefined;
19
18
  testId?: string | undefined;
package/es/Page.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useRef } from 'react';
2
2
  import { useHistory } from 'react-router-dom';
3
- import { createStyledComponent, createComponent } from '@cloudflare/style-container';
3
+ import { createStyledComponent } from '@cloudflare/style-container';
4
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';
@@ -11,50 +11,11 @@ var maxWidthByType = {
11
11
  wide: '79em',
12
12
  unbounded: '100%'
13
13
  };
14
- var ParentPageLabel = createComponent(_ref => {
15
- var {
16
- theme
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;
30
- return {
31
- fontSize: theme.fontSizes[3],
32
- marginTop: theme.space[2],
33
- marginBottom: theme.space[0],
34
- lineHeight: 1.25,
35
- color: theme.colors.gray[3],
36
- fontWeight: 400
37
- };
38
- }, P);
39
- PageDescription.displayName = 'PageDescription';
40
-
41
- var ControlWrapper = _ref3 => {
42
- var {
43
- control,
44
- children
45
- } = _ref3;
46
- return control ? /*#__PURE__*/React.createElement(Div, {
47
- display: ['block', 'flex'],
48
- justifyContent: "space-between"
49
- }, children, control) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
50
- };
51
-
52
14
  var maxPageTitles = 2;
53
15
 
54
- var PageHeader = _ref4 => {
16
+ var PageHeader = _ref => {
55
17
  var {
56
18
  title,
57
- subtitle,
58
19
  parentPageLabel,
59
20
  description,
60
21
  documentationLabel,
@@ -64,19 +25,28 @@ var PageHeader = _ref4 => {
64
25
  children,
65
26
  beta,
66
27
  titleRef,
67
- subtitleRef,
68
- parentPageLabelRef
69
- } = _ref4;
70
- var headerVisible = !!(title || subtitle || description);
71
- var titlesCount = Math.min([title, subtitle, description].filter(Boolean).length, 2);
72
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ControlWrapper, {
73
- control: control
28
+ parentPageLabelRef,
29
+ navigation
30
+ } = _ref;
31
+ var headerVisible = !!(title || description);
32
+ var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
33
+ return /*#__PURE__*/React.createElement(React.Fragment, null, navigation && /*#__PURE__*/React.createElement(Div, {
34
+ mb: 4
35
+ }, navigation), /*#__PURE__*/React.createElement(Div, {
36
+ display: control ? ['block', 'flex'] : 'block',
37
+ justifyContent: "space-between",
38
+ mb: headerVisible ? 3 : 0
74
39
  }, /*#__PURE__*/React.createElement(Header, {
75
- mb: headerVisible ? 3 : 0,
76
40
  textAlign: centerHeader ? 'center' : undefined
77
- }, parentPageLabel && /*#__PURE__*/React.createElement(ParentPageLabel, {
41
+ }, parentPageLabel && /*#__PURE__*/React.createElement(P, {
42
+ my: 0,
43
+ lineHeight: 1.5,
44
+ color: "gray.3",
45
+ fontWeight: 600,
78
46
  innerRef: parentPageLabelRef
79
47
  }, parentPageLabel), title && /*#__PURE__*/React.createElement(Heading, {
48
+ mt: 0,
49
+ mb: 2,
80
50
  innerRef: titleRef
81
51
  }, title, beta && /*#__PURE__*/React.createElement(Label, {
82
52
  hue: "orange",
@@ -85,19 +55,22 @@ var PageHeader = _ref4 => {
85
55
  }, /*#__PURE__*/React.createElement(Trans, {
86
56
  _: "Beta",
87
57
  id: "common.beta"
88
- }))), subtitle && /*#__PURE__*/React.createElement(Heading, {
89
- level: title ? 2 : 1,
90
- offset: title ? 0 : 1,
91
- innerRef: subtitleRef
92
- }, subtitle), description && /*#__PURE__*/React.createElement(PageDescription, null, description), documentationHref && /*#__PURE__*/React.createElement(DocumentationLink, {
58
+ }))), description && /*#__PURE__*/React.createElement(P, {
59
+ color: "gray.3",
60
+ mt: 0,
61
+ mb: documentationHref ? 2 : 3,
62
+ lineHeight: 1.25,
63
+ fontWeight: 400
64
+ }, description), documentationHref && /*#__PURE__*/React.createElement(DocumentationLink, {
93
65
  fontSize: 2,
94
66
  iconSize: 14,
67
+ mb: [3, 0],
95
68
  href: documentationHref,
96
69
  display: "inline-block"
97
70
  }, documentationLabel ? documentationLabel : /*#__PURE__*/React.createElement(Trans, {
98
71
  id: "common.documentation",
99
72
  _: 'Documentation'
100
- })))), /*#__PURE__*/React.createElement(Section, {
73
+ }))), control), /*#__PURE__*/React.createElement(Section, {
101
74
  level: titlesCount,
102
75
  offset: maxPageTitles - titlesCount
103
76
  }, children));
@@ -122,12 +95,11 @@ var focus = function focus(el) {
122
95
  }
123
96
  };
124
97
 
125
- var Page = _ref5 => {
98
+ var Page = _ref2 => {
126
99
  var _history$location;
127
100
 
128
101
  var {
129
102
  title,
130
- subtitle,
131
103
  parentPageLabel,
132
104
  description,
133
105
  documentationLabel,
@@ -142,10 +114,10 @@ var Page = _ref5 => {
142
114
  autofocus = true,
143
115
  control,
144
116
  titleRef,
145
- subtitleRef,
146
117
  parentPageLabelRef,
147
- children
148
- } = _ref5;
118
+ children,
119
+ navigation
120
+ } = _ref2;
149
121
  var history = useHistory();
150
122
  var skipTargetRef = useRef(null);
151
123
  var path = history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : _history$location.pathname;
@@ -185,7 +157,6 @@ var Page = _ref5 => {
185
157
  }), /*#__PURE__*/React.createElement(PageHeader, {
186
158
  title: title,
187
159
  parentPageLabel: parentPageLabel,
188
- subtitle: subtitle,
189
160
  description: description,
190
161
  documentationLabel: documentationLabel,
191
162
  documentationHref: documentationHref,
@@ -194,8 +165,8 @@ var Page = _ref5 => {
194
165
  children: children,
195
166
  beta: beta,
196
167
  titleRef: titleRef,
197
- subtitleRef: subtitleRef,
198
- parentPageLabelRef: parentPageLabelRef
168
+ parentPageLabelRef: parentPageLabelRef,
169
+ navigation: navigation
199
170
  })), sidebar && sidebarInside && /*#__PURE__*/React.createElement(Div, {
200
171
  width: [1, 1, 1 / 3],
201
172
  pl: [0, 0, 3],
package/lib/Page.js CHANGED
@@ -32,64 +32,40 @@ var maxWidthByType = {
32
32
  wide: '79em',
33
33
  unbounded: '100%'
34
34
  };
35
- var ParentPageLabel = (0, _styleContainer.createComponent)(function (_ref) {
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;
47
- return {
48
- fontSize: theme.fontSizes[3],
49
- marginTop: theme.space[2],
50
- marginBottom: theme.space[0],
51
- lineHeight: 1.25,
52
- color: theme.colors.gray[3],
53
- fontWeight: 400
54
- };
55
- }, _elements.P);
56
- PageDescription.displayName = 'PageDescription';
57
-
58
- var ControlWrapper = function ControlWrapper(_ref3) {
59
- var control = _ref3.control,
60
- children = _ref3.children;
61
- return control ? /*#__PURE__*/_react.default.createElement(_elements.Div, {
62
- display: ['block', 'flex'],
63
- justifyContent: "space-between"
64
- }, children, control) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
65
- };
66
-
67
35
  var maxPageTitles = 2;
68
36
 
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;
83
- var headerVisible = !!(title || subtitle || description);
84
- var titlesCount = Math.min([title, subtitle, description].filter(Boolean).length, 2);
85
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ControlWrapper, {
86
- control: control
37
+ var PageHeader = function PageHeader(_ref) {
38
+ var title = _ref.title,
39
+ parentPageLabel = _ref.parentPageLabel,
40
+ description = _ref.description,
41
+ documentationLabel = _ref.documentationLabel,
42
+ documentationHref = _ref.documentationHref,
43
+ centerHeader = _ref.centerHeader,
44
+ control = _ref.control,
45
+ children = _ref.children,
46
+ beta = _ref.beta,
47
+ titleRef = _ref.titleRef,
48
+ parentPageLabelRef = _ref.parentPageLabelRef,
49
+ navigation = _ref.navigation;
50
+ var headerVisible = !!(title || description);
51
+ var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
52
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, navigation && /*#__PURE__*/_react.default.createElement(_elements.Div, {
53
+ mb: 4
54
+ }, navigation), /*#__PURE__*/_react.default.createElement(_elements.Div, {
55
+ display: control ? ['block', 'flex'] : 'block',
56
+ justifyContent: "space-between",
57
+ mb: headerVisible ? 3 : 0
87
58
  }, /*#__PURE__*/_react.default.createElement(_elements.Header, {
88
- mb: headerVisible ? 3 : 0,
89
59
  textAlign: centerHeader ? 'center' : undefined
90
- }, parentPageLabel && /*#__PURE__*/_react.default.createElement(ParentPageLabel, {
60
+ }, parentPageLabel && /*#__PURE__*/_react.default.createElement(_elements.P, {
61
+ my: 0,
62
+ lineHeight: 1.5,
63
+ color: "gray.3",
64
+ fontWeight: 600,
91
65
  innerRef: parentPageLabelRef
92
66
  }, parentPageLabel), title && /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
67
+ mt: 0,
68
+ mb: 2,
93
69
  innerRef: titleRef
94
70
  }, title, beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
95
71
  hue: "orange",
@@ -98,19 +74,22 @@ var PageHeader = function PageHeader(_ref4) {
98
74
  }, /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
99
75
  _: "Beta",
100
76
  id: "common.beta"
101
- }))), subtitle && /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
102
- level: title ? 2 : 1,
103
- offset: title ? 0 : 1,
104
- innerRef: subtitleRef
105
- }, subtitle), description && /*#__PURE__*/_react.default.createElement(PageDescription, null, description), documentationHref && /*#__PURE__*/_react.default.createElement(_componentLink.DocumentationLink, {
77
+ }))), description && /*#__PURE__*/_react.default.createElement(_elements.P, {
78
+ color: "gray.3",
79
+ mt: 0,
80
+ mb: documentationHref ? 2 : 3,
81
+ lineHeight: 1.25,
82
+ fontWeight: 400
83
+ }, description), documentationHref && /*#__PURE__*/_react.default.createElement(_componentLink.DocumentationLink, {
106
84
  fontSize: 2,
107
85
  iconSize: 14,
86
+ mb: [3, 0],
108
87
  href: documentationHref,
109
88
  display: "inline-block"
110
89
  }, documentationLabel ? documentationLabel : /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
111
90
  id: "common.documentation",
112
91
  _: 'Documentation'
113
- })))), /*#__PURE__*/_react.default.createElement(_Heading.Section, {
92
+ }))), control), /*#__PURE__*/_react.default.createElement(_Heading.Section, {
114
93
  level: titlesCount,
115
94
  offset: maxPageTitles - titlesCount
116
95
  }, children));
@@ -137,31 +116,30 @@ var focus = function focus(el) {
137
116
  }
138
117
  };
139
118
 
140
- var Page = function Page(_ref5) {
119
+ var Page = function Page(_ref2) {
141
120
  var _history$location;
142
121
 
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;
122
+ var title = _ref2.title,
123
+ parentPageLabel = _ref2.parentPageLabel,
124
+ description = _ref2.description,
125
+ documentationLabel = _ref2.documentationLabel,
126
+ documentationHref = _ref2.documentationHref,
127
+ centerHeader = _ref2.centerHeader,
128
+ beta = _ref2.beta,
129
+ testId = _ref2.testId,
130
+ className = _ref2.className,
131
+ sidebar = _ref2.sidebar,
132
+ _ref2$type = _ref2.type,
133
+ type = _ref2$type === void 0 ? 'wide' : _ref2$type,
134
+ _ref2$sidebarPosition = _ref2.sidebarPosition,
135
+ sidebarPosition = _ref2$sidebarPosition === void 0 ? 'inside' : _ref2$sidebarPosition,
136
+ _ref2$autofocus = _ref2.autofocus,
137
+ autofocus = _ref2$autofocus === void 0 ? true : _ref2$autofocus,
138
+ control = _ref2.control,
139
+ titleRef = _ref2.titleRef,
140
+ parentPageLabelRef = _ref2.parentPageLabelRef,
141
+ children = _ref2.children,
142
+ navigation = _ref2.navigation;
165
143
  var history = (0, _reactRouterDom.useHistory)();
166
144
  var skipTargetRef = (0, _react.useRef)(null);
167
145
  var path = history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : _history$location.pathname;
@@ -201,7 +179,6 @@ var Page = function Page(_ref5) {
201
179
  }), /*#__PURE__*/_react.default.createElement(PageHeader, {
202
180
  title: title,
203
181
  parentPageLabel: parentPageLabel,
204
- subtitle: subtitle,
205
182
  description: description,
206
183
  documentationLabel: documentationLabel,
207
184
  documentationHref: documentationHref,
@@ -210,8 +187,8 @@ var Page = function Page(_ref5) {
210
187
  children: children,
211
188
  beta: beta,
212
189
  titleRef: titleRef,
213
- subtitleRef: subtitleRef,
214
- parentPageLabelRef: parentPageLabelRef
190
+ parentPageLabelRef: parentPageLabelRef,
191
+ navigation: navigation
215
192
  })), sidebar && sidebarInside && /*#__PURE__*/_react.default.createElement(_elements.Div, {
216
193
  width: [1, 1, 1 / 3],
217
194
  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.2.12",
4
+ "version": "8.0.1",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "James Kyle <jkyle@cloudflare.com>",
package/src/Page.tsx CHANGED
@@ -1,9 +1,6 @@
1
1
  import React, { useEffect, useRef } from 'react';
2
2
  import { useHistory } from 'react-router-dom';
3
- import {
4
- createStyledComponent,
5
- createComponent
6
- } from '@cloudflare/style-container';
3
+ import { createStyledComponent } from '@cloudflare/style-container';
7
4
  import { Main, Header, Div, P } from '@cloudflare/elements';
8
5
  import { Label } from '@cloudflare/component-label';
9
6
  import { Trans } from '@cloudflare/intl-react';
@@ -14,10 +11,6 @@ type PageWidth = 'narrow' | 'wide' | 'unbounded';
14
11
 
15
12
  type PageHeaderProps = {
16
13
  title?: React.ReactNode;
17
- /**
18
- * @deprecated. We are no longer using subtitles. Questions? Please chat with PCX :).
19
- */
20
- subtitle?: React.ReactNode;
21
14
  parentPageLabel?: React.ReactNode;
22
15
  description?: React.ReactNode;
23
16
  documentationLabel?: React.ReactNode;
@@ -27,8 +20,8 @@ type PageHeaderProps = {
27
20
  centerHeader?: boolean;
28
21
  beta?: boolean;
29
22
  titleRef?: React.RefObject<HTMLHeadingElement>;
30
- subtitleRef?: React.RefObject<HTMLHeadingElement>;
31
23
  parentPageLabelRef?: React.RefObject<HTMLHeadingElement>;
24
+ navigation?: React.ReactNode;
32
25
  };
33
26
 
34
27
  type Props = PageHeaderProps & {
@@ -46,52 +39,10 @@ const maxWidthByType = {
46
39
  unbounded: '100%'
47
40
  };
48
41
 
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
-
60
- const PageDescription = createComponent(
61
- ({ theme }) => ({
62
- fontSize: theme.fontSizes[3],
63
- marginTop: theme.space[2],
64
- marginBottom: theme.space[0],
65
- lineHeight: 1.25,
66
- color: theme.colors.gray[3],
67
- fontWeight: 400
68
- }),
69
- P
70
- );
71
-
72
- PageDescription.displayName = 'PageDescription';
73
-
74
- type ControlWrapperProps = {
75
- control?: React.ReactNode;
76
- children: React.ReactNode;
77
- };
78
-
79
- const ControlWrapper = ({ control, children }: ControlWrapperProps) => {
80
- return control ? (
81
- <Div display={['block', 'flex']} justifyContent="space-between">
82
- {children}
83
- {control}
84
- </Div>
85
- ) : (
86
- <>{children}</>
87
- );
88
- };
89
-
90
42
  const maxPageTitles = 2;
91
43
 
92
44
  const PageHeader = ({
93
45
  title,
94
- subtitle,
95
46
  parentPageLabel,
96
47
  description,
97
48
  documentationLabel,
@@ -101,29 +52,34 @@ const PageHeader = ({
101
52
  children,
102
53
  beta,
103
54
  titleRef,
104
- subtitleRef,
105
- parentPageLabelRef
55
+ parentPageLabelRef,
56
+ navigation
106
57
  }: PageHeaderProps) => {
107
- const headerVisible = !!(title || subtitle || description);
108
- const titlesCount = Math.min(
109
- [title, subtitle, description].filter(Boolean).length,
110
- 2
111
- );
58
+ const headerVisible = !!(title || description);
59
+ const titlesCount = Math.min([title, description].filter(Boolean).length, 2);
112
60
 
113
61
  return (
114
62
  <>
115
- <ControlWrapper control={control}>
116
- <Header
117
- mb={headerVisible ? 3 : 0}
118
- textAlign={centerHeader ? 'center' : undefined}
119
- >
63
+ {navigation && <Div mb={4}>{navigation}</Div>}
64
+ <Div
65
+ display={control ? ['block', 'flex'] : 'block'}
66
+ justifyContent="space-between"
67
+ mb={headerVisible ? 3 : 0}
68
+ >
69
+ <Header textAlign={centerHeader ? 'center' : undefined}>
120
70
  {parentPageLabel && (
121
- <ParentPageLabel innerRef={parentPageLabelRef}>
71
+ <P
72
+ my={0}
73
+ lineHeight={1.5}
74
+ color="gray.3"
75
+ fontWeight={600}
76
+ innerRef={parentPageLabelRef}
77
+ >
122
78
  {parentPageLabel}
123
- </ParentPageLabel>
79
+ </P>
124
80
  )}
125
81
  {title && (
126
- <Heading innerRef={titleRef}>
82
+ <Heading mt={0} mb={2} innerRef={titleRef}>
127
83
  {title}
128
84
  {beta && (
129
85
  <Label hue="orange" ml={2} verticalAlign="middle">
@@ -132,20 +88,22 @@ const PageHeader = ({
132
88
  )}
133
89
  </Heading>
134
90
  )}
135
- {subtitle && (
136
- <Heading
137
- level={title ? 2 : 1}
138
- offset={title ? 0 : 1}
139
- innerRef={subtitleRef}
91
+ {description && (
92
+ <P
93
+ color="gray.3"
94
+ mt={0}
95
+ mb={documentationHref ? 2 : 3}
96
+ lineHeight={1.25}
97
+ fontWeight={400}
140
98
  >
141
- {subtitle}
142
- </Heading>
99
+ {description}
100
+ </P>
143
101
  )}
144
- {description && <PageDescription>{description}</PageDescription>}
145
102
  {documentationHref && (
146
103
  <DocumentationLink
147
104
  fontSize={2}
148
105
  iconSize={14}
106
+ mb={[3, 0]}
149
107
  href={documentationHref}
150
108
  display="inline-block"
151
109
  >
@@ -157,7 +115,8 @@ const PageHeader = ({
157
115
  </DocumentationLink>
158
116
  )}
159
117
  </Header>
160
- </ControlWrapper>
118
+ {control}
119
+ </Div>
161
120
  <Section level={titlesCount} offset={maxPageTitles - titlesCount}>
162
121
  {children}
163
122
  </Section>
@@ -190,7 +149,6 @@ const focus = (el: HTMLElement | null, attempt: number = 0) => {
190
149
 
191
150
  const Page = ({
192
151
  title,
193
- subtitle,
194
152
  parentPageLabel,
195
153
  description,
196
154
  documentationLabel,
@@ -205,9 +163,9 @@ const Page = ({
205
163
  autofocus = true,
206
164
  control,
207
165
  titleRef,
208
- subtitleRef,
209
166
  parentPageLabelRef,
210
- children
167
+ children,
168
+ navigation
211
169
  }: Props) => {
212
170
  const history = useHistory();
213
171
  const skipTargetRef = useRef<HTMLAnchorElement>(null);
@@ -255,7 +213,6 @@ const Page = ({
255
213
  <PageHeader
256
214
  title={title}
257
215
  parentPageLabel={parentPageLabel}
258
- subtitle={subtitle}
259
216
  description={description}
260
217
  documentationLabel={documentationLabel}
261
218
  documentationHref={documentationHref}
@@ -264,8 +221,8 @@ const Page = ({
264
221
  children={children}
265
222
  beta={beta}
266
223
  titleRef={titleRef}
267
- subtitleRef={subtitleRef}
268
224
  parentPageLabelRef={parentPageLabelRef}
225
+ navigation={navigation}
269
226
  />
270
227
  </Div>
271
228
  {sidebar && sidebarInside && (