@patternfly/documentation-framework 6.0.0-alpha.79 → 6.0.0-alpha.80

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 (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/components/link/link.js +23 -18
  3. package/components/tableOfContents/tableOfContents.js +58 -28
  4. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+ # 6.0.0-alpha.80 (2024-08-20)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **docs:** updated scroll selector for jumplinks, router links ([#4197](https://github.com/patternfly/patternfly-org/issues/4197)) ([f5de805](https://github.com/patternfly/patternfly-org/commit/f5de80593323739d08397c0bb8ad69c479ec8367))
12
+
13
+
14
+
15
+
16
+
6
17
  # 6.0.0-alpha.79 (2024-08-19)
7
18
 
8
19
 
package/components/link/link.js CHANGED
@@ -2,16 +2,19 @@ import React from 'react';
2
2
  import { Link as ReachLink, navigate } from '@reach/router';
3
3
  import { getAsyncComponent } from '../../routes';
4
4
 
5
- const Promiseany = (Promise.any || function ($) {
6
- return new Promise(function (D, E, A, L) {
7
- A = [];
8
- L = $.map(function ($, i) {
9
- return Promise.resolve($).then(D, function (O) {
10
- return ((A[i] = O), --L) || E({errors: A});
11
- });
12
- }).length;
13
- });
14
- }).bind(Promise);
5
+ const Promiseany = (
6
+ Promise.any ||
7
+ function ($) {
8
+ return new Promise(function (D, E, A, L) {
9
+ A = [];
10
+ L = $.map(function ($, i) {
11
+ return Promise.resolve($).then(D, function (O) {
12
+ return ((A[i] = O), --L) || E({ errors: A });
13
+ });
14
+ }).length;
15
+ });
16
+ }
17
+ ).bind(Promise);
15
18
 
16
19
  export const Link = ({
17
20
  href,
@@ -23,7 +26,7 @@ export const Link = ({
23
26
  let preloadPromise;
24
27
  let url = href || to || '';
25
28
  if (url.startsWith('#') && !onClick) {
26
- onClick = ev => {
29
+ onClick = (ev) => {
27
30
  ev.preventDefault(); // Don't use client-side routing
28
31
  // Chrome does not jump until ALL network requests finish.
29
32
  // We have to force it to...
@@ -37,8 +40,7 @@ export const Link = ({
37
40
  }
38
41
  if (url.includes('//') || url.startsWith('#')) {
39
42
  return <a href={url} onClick={onClick} {...props} />;
40
- }
41
- else if (url.startsWith('/')) {
43
+ } else if (url.startsWith('/')) {
42
44
  if (!process.env.PRERENDER) {
43
45
  const Component = getAsyncComponent(url);
44
46
  if (Component) {
@@ -48,14 +50,17 @@ export const Link = ({
48
50
  onMouseOver();
49
51
  };
50
52
  // Wait up to an extra 500ms on click before showing 'Loading...'
51
- props.onClick = ev => {
52
- if (!(ev.ctrlKey || ev.metaKey)) { // avoid disallowing cmnd/ctrl+click opening in new tab
53
+ props.onClick = (ev) => {
54
+ if (!(ev.ctrlKey || ev.metaKey)) {
55
+ // avoid disallowing cmnd/ctrl+click opening in new tab
53
56
  ev.preventDefault();
54
- document.querySelector("#ws-page-main").scrollTo({top: 0}); // scroll to top of page
57
+ document
58
+ .querySelector('.pf-v6-c-page__main-container')
59
+ .scrollTo({ top: 0 }); // scroll to top of page
55
60
  if (typeof window !== 'undefined' && url !== location.pathname) {
56
61
  Promiseany([
57
62
  preloadPromise,
58
- new Promise(res => setTimeout(res, 500))
63
+ new Promise((res) => setTimeout(res, 500)),
59
64
  ]).then(() => navigate(url));
60
65
  }
61
66
  }
@@ -65,4 +70,4 @@ export const Link = ({
65
70
  }
66
71
 
67
72
  return <ReachLink to={url} {...props} />;
68
- }
73
+ };
package/components/tableOfContents/tableOfContents.js CHANGED
@@ -1,5 +1,9 @@
1
1
  import React from 'react';
2
- import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
2
+ import {
3
+ JumpLinks,
4
+ JumpLinksItem,
5
+ JumpLinksList,
6
+ } from '@patternfly/react-core';
3
7
  import { trackEvent } from '../../helpers';
4
8
 
5
9
  export const TableOfContents = ({ items }) => {
@@ -9,15 +13,17 @@ export const TableOfContents = ({ items }) => {
9
13
  const [stickyNavHeight, setStickyNavHeight] = React.useState(0);
10
14
 
11
15
  React.useEffect(() => {
12
- if (document.getElementById("ws-sticky-nav-tabs")) {
13
- setStickyNavHeight(document.getElementById("ws-sticky-nav-tabs").offsetHeight);
16
+ if (document.getElementById('ws-sticky-nav-tabs')) {
17
+ setStickyNavHeight(
18
+ document.getElementById('ws-sticky-nav-tabs').offsetHeight
19
+ );
14
20
  }
15
- }, [])
21
+ }, []);
16
22
 
17
23
  const updateWidth = () => {
18
24
  const { innerWidth } = window;
19
25
  innerWidth !== width && setWidth(innerWidth);
20
- }
26
+ };
21
27
  let jumpLinksItems = [];
22
28
  let wasSublistRendered = false;
23
29
 
@@ -27,14 +33,20 @@ export const TableOfContents = ({ items }) => {
27
33
  <>
28
34
  {item.text}
29
35
  <JumpLinksList>
30
- {nextItemArr.map(curItem => (
36
+ {nextItemArr.map((curItem) => (
31
37
  <JumpLinksItem
32
38
  key={curItem.id}
33
39
  href={`#${curItem.id}`}
34
40
  className="ws-toc-item"
35
41
  onKeyDown={updateWidth}
36
42
  onMouseDown={updateWidth}
37
- onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
43
+ onClick={() =>
44
+ trackEvent(
45
+ 'jump_link_click',
46
+ 'click_event',
47
+ curItem.id.toUpperCase()
48
+ )
49
+ }
38
50
  >
39
51
  {curItem.text}
40
52
  </JumpLinksItem>
@@ -42,7 +54,7 @@ export const TableOfContents = ({ items }) => {
42
54
  </JumpLinksList>
43
55
  </>
44
56
  );
45
- }
57
+ };
46
58
 
47
59
  const renderJumpLinksItems = () => {
48
60
  items.forEach((item, index) => {
@@ -53,18 +65,28 @@ export const TableOfContents = ({ items }) => {
53
65
  return;
54
66
  }
55
67
  if (!Array.isArray(nextItem) && Array.isArray(item)) {
56
- {item.map(curItem => jumpLinksItems.push(
57
- <JumpLinksItem
58
- key={curItem.id}
59
- href={`#${curItem.id}`}
60
- className="ws-toc-item"
61
- onKeyDown={updateWidth}
62
- onMouseDown={updateWidth}
63
- onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
64
- >
65
- {curItem.text}
66
- </JumpLinksItem>
67
- ))}
68
+ {
69
+ item.map((curItem) =>
70
+ jumpLinksItems.push(
71
+ <JumpLinksItem
72
+ key={curItem.id}
73
+ href={`#${curItem.id}`}
74
+ className="ws-toc-item"
75
+ onKeyDown={updateWidth}
76
+ onMouseDown={updateWidth}
77
+ onClick={() =>
78
+ trackEvent(
79
+ 'jump_link_click',
80
+ 'click_event',
81
+ curItem.id.toUpperCase()
82
+ )
83
+ }
84
+ >
85
+ {curItem.text}
86
+ </JumpLinksItem>
87
+ )
88
+ );
89
+ }
68
90
  } else {
69
91
  jumpLinksItems.push(
70
92
  <JumpLinksItem
@@ -73,27 +95,35 @@ export const TableOfContents = ({ items }) => {
73
95
  className="ws-toc-item"
74
96
  onKeyDown={updateWidth}
75
97
  onMouseDown={updateWidth}
76
- onClick={() => trackEvent('jump_link_click', 'click_event', item.id.toUpperCase())}
98
+ onClick={() =>
99
+ trackEvent(
100
+ 'jump_link_click',
101
+ 'click_event',
102
+ item.id.toUpperCase()
103
+ )
104
+ }
77
105
  >
78
- { Array.isArray(nextItem) ? renderSublist(item, nextItem) : item.text }
106
+ {Array.isArray(nextItem)
107
+ ? renderSublist(item, nextItem)
108
+ : item.text}
79
109
  </JumpLinksItem>
80
110
  );
81
111
  }
82
- })
112
+ });
83
113
  return jumpLinksItems;
84
- }
114
+ };
85
115
 
86
116
  return (
87
117
  <JumpLinks
88
118
  label="Table of contents"
89
119
  isVertical
90
- scrollableSelector="#ws-page-main"
120
+ scrollableSelector=".pf-v6-c-page__main-container"
91
121
  className="ws-toc"
92
- style={{ 'top': stickyNavHeight }}
122
+ style={{ top: stickyNavHeight }}
93
123
  offset={width > 1450 ? 108 + stickyNavHeight : 148 + stickyNavHeight}
94
124
  expandable={{ default: 'expandable', '2xl': 'nonExpandable' }}
95
125
  >
96
- { renderJumpLinksItems() }
126
+ {renderJumpLinksItems()}
97
127
  </JumpLinks>
98
128
  );
99
- }
129
+ };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/documentation-framework",
3
3
  "description": "A framework to build documentation for PatternFly.",
4
- "version": "6.0.0-alpha.79",
4
+ "version": "6.0.0-alpha.80",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "private": false,
@@ -13,7 +13,7 @@
13
13
  "@babel/preset-env": "^7.24.3",
14
14
  "@babel/preset-react": "^7.24.1",
15
15
  "@mdx-js/util": "1.6.16",
16
- "@patternfly/ast-helpers": "^1.4.0-alpha.68",
16
+ "@patternfly/ast-helpers": "^1.4.0-alpha.69",
17
17
  "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
18
18
  "autoprefixer": "9.8.6",
19
19
  "babel-loader": "^9.1.3",
@@ -80,5 +80,5 @@
80
80
  "react": "^17.0.0 || ^18.0.0",
81
81
  "react-dom": "^17.0.0 || ^18.0.0"
82
82
  },
83
- "gitHead": "fb3e40d6afea3dd75f7ee9f0a736966d2d13785a"
83
+ "gitHead": "6144cce4fc10aee15889007a5d569e448dba3768"
84
84
  }