@cloudflare/component-page 5.1.0 → 5.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 +16 -0
  2. package/dist/Page.d.ts +2 -0
  3. package/es/Page.js +13 -4
  4. package/lib/Page.js +13 -4
  5. package/package.json +2 -2
  6. package/src/Page.tsx +15 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [5.2.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-page@5.1.0...@cloudflare/component-page@5.2.0) (2021-11-25)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **component-page:** A11Y-90 Update prop types ([7bd388f](http://stash.cfops.it:7999/fe/stratus/commits/7bd388f))
12
+
13
+
14
+ ### Features
15
+
16
+ * **component-page:** A11Y-90 Add titleRef and subtitleRef properties ([3507385](http://stash.cfops.it:7999/fe/stratus/commits/3507385))
17
+
18
+
19
+
20
+
21
+
6
22
  # [5.1.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-page@5.0.2...@cloudflare/component-page@5.1.0) (2021-11-25)
7
23
 
8
24
 
package/dist/Page.d.ts CHANGED
@@ -8,6 +8,8 @@ declare const _default: React.ComponentType<{
8
8
  children?: React.ReactNode;
9
9
  centerHeader?: boolean | undefined;
10
10
  beta?: boolean | undefined;
11
+ titleRef?: React.RefObject<HTMLHeadingElement> | undefined;
12
+ subtitleRef?: React.RefObject<HTMLHeadingElement> | undefined;
11
13
  type?: PageWidth | undefined;
12
14
  className?: string | undefined;
13
15
  testId?: string | undefined;
package/es/Page.js CHANGED
@@ -40,7 +40,9 @@ const PageHeader = ({
40
40
  centerHeader,
41
41
  control,
42
42
  children,
43
- beta
43
+ beta,
44
+ titleRef,
45
+ subtitleRef
44
46
  }) => {
45
47
  const headerVisible = !!(title || subtitle || description);
46
48
  const titlesCount = Math.min([title, subtitle, description].filter(Boolean).length, 2);
@@ -49,7 +51,9 @@ const PageHeader = ({
49
51
  }, /*#__PURE__*/React.createElement(Header, {
50
52
  mb: headerVisible ? 3 : 0,
51
53
  textAlign: centerHeader ? 'center' : undefined
52
- }, title && /*#__PURE__*/React.createElement(Heading, null, title, beta && /*#__PURE__*/React.createElement(Label, {
54
+ }, title && /*#__PURE__*/React.createElement(Heading, {
55
+ innerRef: titleRef
56
+ }, title, beta && /*#__PURE__*/React.createElement(Label, {
53
57
  hue: "orange",
54
58
  ml: 2,
55
59
  verticalAlign: "middle"
@@ -58,7 +62,8 @@ const PageHeader = ({
58
62
  id: "common.beta"
59
63
  }))), subtitle && /*#__PURE__*/React.createElement(Heading, {
60
64
  level: title ? 2 : 1,
61
- offset: title ? 0 : 1
65
+ offset: title ? 0 : 1,
66
+ innerRef: subtitleRef
62
67
  }, subtitle), description && (subtitle ? /*#__PURE__*/React.createElement(PageDescription, null, description) : /*#__PURE__*/React.createElement(Heading, {
63
68
  level: 2,
64
69
  fontSize: 4,
@@ -100,6 +105,8 @@ const Page = ({
100
105
  sidebarPosition = 'inside',
101
106
  autofocus = true,
102
107
  control,
108
+ titleRef,
109
+ subtitleRef,
103
110
  children
104
111
  }) => {
105
112
  var _history$location;
@@ -146,7 +153,9 @@ const Page = ({
146
153
  centerHeader: centerHeader,
147
154
  control: control,
148
155
  children: children,
149
- beta: beta
156
+ beta: beta,
157
+ titleRef: titleRef,
158
+ subtitleRef: subtitleRef
150
159
  })), sidebar && sidebarInside && /*#__PURE__*/React.createElement(Div, {
151
160
  width: [1, 1, 1 / 3],
152
161
  pl: [0, 0, 3],
package/lib/Page.js CHANGED
@@ -60,7 +60,9 @@ var PageHeader = function PageHeader(_ref3) {
60
60
  centerHeader = _ref3.centerHeader,
61
61
  control = _ref3.control,
62
62
  children = _ref3.children,
63
- beta = _ref3.beta;
63
+ beta = _ref3.beta,
64
+ titleRef = _ref3.titleRef,
65
+ subtitleRef = _ref3.subtitleRef;
64
66
  var headerVisible = !!(title || subtitle || description);
65
67
  var titlesCount = Math.min([title, subtitle, description].filter(Boolean).length, 2);
66
68
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ControlWrapper, {
@@ -68,7 +70,9 @@ var PageHeader = function PageHeader(_ref3) {
68
70
  }, /*#__PURE__*/_react.default.createElement(_elements.Header, {
69
71
  mb: headerVisible ? 3 : 0,
70
72
  textAlign: centerHeader ? 'center' : undefined
71
- }, title && /*#__PURE__*/_react.default.createElement(_Heading.Heading, null, title, beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
73
+ }, title && /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
74
+ innerRef: titleRef
75
+ }, title, beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
72
76
  hue: "orange",
73
77
  ml: 2,
74
78
  verticalAlign: "middle"
@@ -77,7 +81,8 @@ var PageHeader = function PageHeader(_ref3) {
77
81
  id: "common.beta"
78
82
  }))), subtitle && /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
79
83
  level: title ? 2 : 1,
80
- offset: title ? 0 : 1
84
+ offset: title ? 0 : 1,
85
+ innerRef: subtitleRef
81
86
  }, subtitle), description && (subtitle ? /*#__PURE__*/_react.default.createElement(PageDescription, null, description) : /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
82
87
  level: 2,
83
88
  fontSize: 4,
@@ -127,6 +132,8 @@ var Page = function Page(_ref4) {
127
132
  _ref4$autofocus = _ref4.autofocus,
128
133
  autofocus = _ref4$autofocus === void 0 ? true : _ref4$autofocus,
129
134
  control = _ref4.control,
135
+ titleRef = _ref4.titleRef,
136
+ subtitleRef = _ref4.subtitleRef,
130
137
  children = _ref4.children;
131
138
  var history = (0, _reactRouterDom.useHistory)();
132
139
  var skipTargetRef = (0, _react.useRef)(null);
@@ -170,7 +177,9 @@ var Page = function Page(_ref4) {
170
177
  centerHeader: centerHeader,
171
178
  control: control,
172
179
  children: children,
173
- beta: beta
180
+ beta: beta,
181
+ titleRef: titleRef,
182
+ subtitleRef: subtitleRef
174
183
  })), sidebar && sidebarInside && /*#__PURE__*/_react.default.createElement(_elements.Div, {
175
184
  width: [1, 1, 1 / 3],
176
185
  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": "5.1.0",
4
+ "version": "5.2.0",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "James Kyle <jkyle@cloudflare.com>",
@@ -31,5 +31,5 @@
31
31
  "test-coverage": "stratus test --coverage",
32
32
  "test-watch": "stratus test --watch"
33
33
  },
34
- "gitHead": "e1f1fecb460540213dd9f08e78e91e8d71dcbe27"
34
+ "gitHead": "91c1fd1a6e41e301ec02ac2129fe85f2a872a1af"
35
35
  }
package/src/Page.tsx CHANGED
@@ -19,6 +19,8 @@ type PageHeaderProps = {
19
19
  children?: React.ReactNode;
20
20
  centerHeader?: boolean;
21
21
  beta?: boolean;
22
+ titleRef?: React.RefObject<HTMLHeadingElement>;
23
+ subtitleRef?: React.RefObject<HTMLHeadingElement>;
22
24
  };
23
25
 
24
26
  type Props = PageHeaderProps & {
@@ -74,7 +76,9 @@ const PageHeader = ({
74
76
  centerHeader,
75
77
  control,
76
78
  children,
77
- beta
79
+ beta,
80
+ titleRef,
81
+ subtitleRef
78
82
  }: PageHeaderProps) => {
79
83
  const headerVisible = !!(title || subtitle || description);
80
84
  const titlesCount = Math.min(
@@ -90,7 +94,7 @@ const PageHeader = ({
90
94
  textAlign={centerHeader ? 'center' : undefined}
91
95
  >
92
96
  {title && (
93
- <Heading>
97
+ <Heading innerRef={titleRef}>
94
98
  {title}
95
99
  {beta && (
96
100
  <Label hue="orange" ml={2} verticalAlign="middle">
@@ -100,7 +104,11 @@ const PageHeader = ({
100
104
  </Heading>
101
105
  )}
102
106
  {subtitle && (
103
- <Heading level={title ? 2 : 1} offset={title ? 0 : 1}>
107
+ <Heading
108
+ level={title ? 2 : 1}
109
+ offset={title ? 0 : 1}
110
+ innerRef={subtitleRef}
111
+ >
104
112
  {subtitle}
105
113
  </Heading>
106
114
  )}
@@ -157,6 +165,8 @@ const Page = ({
157
165
  sidebarPosition = 'inside',
158
166
  autofocus = true,
159
167
  control,
168
+ titleRef,
169
+ subtitleRef,
160
170
  children
161
171
  }: Props) => {
162
172
  const history = useHistory();
@@ -207,6 +217,8 @@ const Page = ({
207
217
  control={control}
208
218
  children={children}
209
219
  beta={beta}
220
+ titleRef={titleRef}
221
+ subtitleRef={subtitleRef}
210
222
  />
211
223
  </Div>
212
224
  {sidebar && sidebarInside && (