@patternfly/documentation-framework 6.0.0-alpha.86 → 6.0.0-alpha.88

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 (7) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/components/footer/RHLogoDark.png +0 -0
  3. package/components/footer/footer.css +31 -93
  4. package/components/footer/footer.js +119 -58
  5. package/components/sectionGallery/sectionGalleryToolbar.js +1 -0
  6. package/layouts/sideNavLayout/sideNavLayout.js +6 -3
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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.88 (2024-08-26)
7
+
8
+ **Note:** Version bump only for package @patternfly/documentation-framework
9
+
10
+
11
+
12
+
13
+
14
+ # 6.0.0-alpha.87 (2024-08-26)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **docs:** tokenize footer styles ([#4167](https://github.com/patternfly/patternfly-org/issues/4167)) ([622560c](https://github.com/patternfly/patternfly-org/commit/622560c903042e6ec5841280d7247697c51ca88c))
20
+
21
+
22
+
23
+
24
+
6
25
  # 6.0.0-alpha.86 (2024-08-26)
7
26
 
8
27
  **Note:** Version bump only for package @patternfly/documentation-framework
package/components/footer/RHLogoDark.png ADDED
Binary file
package/components/footer/footer.css CHANGED
@@ -1,116 +1,54 @@
1
- .ws-org-pfsite-l-footer.pf-v6-c-page__main-section {
2
- /* font-family: var(--pf-v6-global--FontFamily--text); */
3
- font-weight: 300;
4
- background-color: #1a1a1a !important;
5
- --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--xl);
6
- --pf-v6-c-page__main-section--PaddingRight: var(--pf-t--global--spacer--2xl);
7
- --pf-v6-c-page__main-section--PaddingBottom: var(--pf-t--global--spacer--2xl);
8
- --pf-v6-c-page__main-section--PaddingLeft: var(--pf-t--global--spacer--2xl);
1
+ .ws-org-pfsite-l-footer,
2
+ .ws-org-pfsite-l-footer-dark {
3
+ color: var(--pf-t--global--text--color--regular);
4
+ background-color: var(--pf-t--global--background--color--secondary--default);
9
5
  /* Hide long overflowing tocs */
10
6
  z-index: 1;
11
7
  }
12
- .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list-title {
13
- margin: 0;
14
- padding: 6px 0;
15
- font-weight: 700 !important;
16
- font-size: 14px !important;
17
- color: #fff;
18
- text-transform: uppercase;
19
- }
20
- .ws-org-pfsite-l-footer .ws-org-pfsite-l-footer-column {
21
- background-color: #333;
8
+ .ws-org-pfsite-l-footer-column {
9
+ background-color: var(--pf-t--global--background--color--primary--default);
22
10
  height: 100%;
11
+ padding-inline: var(--pf-t--global--spacer--xl);
23
12
  }
24
- .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-about-logo {
25
- padding-top: 12px;
26
- }
27
- .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-about-description {
28
- font-size: 14px !important;
29
- color: #fff;
30
- }
31
- @media (max-width: 992px) {
32
- .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-about-description {
33
- padding-bottom: 16px;
13
+ @media screen and (max-width: 768px) {
14
+ .ws-org-pfsite-l-footer-column {
15
+ padding-inline: var(--pf-t--global--spacer--md);
34
16
  }
35
17
  }
36
- .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links a {
37
- margin-right: var(--pf-t--global--spacer--md);
38
- /* color: var(--pf-v6-global--Color--light-100) !important; */
18
+ .ws-org-pfsite-footer-menu-social-links a {
19
+ margin-inline-end: var(--pf-t--global--spacer--md);
39
20
  }
40
- .ws-org-pfsite-l-footer-column
41
- .ws-org-pfsite-footer-menu-social-links
21
+ .ws-org-pfsite-footer-menu-social-links
42
22
  a:last-of-type {
43
- margin-right: 0;
44
- }
45
- .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
46
- margin-top: var(--pf-t--global--spacer--md);
47
- margin-bottom: var(--pf-t--global--spacer--md);
48
- }
49
- @media (max-width: 768px) {
50
- .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
51
- margin-bottom: 32px;
52
- }
53
- }
54
- .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list {
55
- margin: 0.8rem 0 0;
56
- }
57
- @media (min-width: 992px) {
58
- .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list {
59
- width: 84%;
60
- }
61
- }
62
- @media (min-width: 768px) {
63
- .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list {
64
- display: block;
65
- height: auto !important;
66
- }
23
+ margin-inline-end: 0;
67
24
  }
68
- .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list-item {
69
- font-size: 1.2rem;
70
- line-height: 1.3;
71
- padding-right: 10px;
25
+ .ws-org-pfsite-footer-menu-social-links {
26
+ margin-block-start: var(--pf-t--global--spacer--md);
27
+ color: var(--pf-t--global--icon--color--brand--default);
72
28
  }
73
- .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link {
74
- /* color: var(--pf-v6-global--Color--light-100); */
75
- font-size: 14px !important;
29
+ .ws-org-pfsite-footer-menu-list-title {
30
+ margin-block-end: var(--pf-t--global--spacer--md);
31
+ color: var(--pf-t--global--text--color--subtle);
32
+ font-weight: var(--pf-t--global--font--weight--body--bold);
76
33
  }
77
- .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link:hover {
78
- text-decoration: underline;
34
+ .ws-org-pfsite-footer-menu-list-item {
35
+ padding-right: var(--pf-t--global--spacer--sm);
79
36
  }
80
- @media screen and (max-width: 768px) {
81
- .pfsite-l-footer-column {
82
- margin-left: -16px;
83
- }
37
+ .ws-org-pfsite-footer-menu-link {
38
+ color: var(--pf-t--global--text--color--link--default);
84
39
  }
85
40
 
86
- .ws-org-pfsite-l-footer-dark {
87
- background: #151515 !important;
88
- }
89
- .pf-v6-c-page .pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark {
90
- /* Hide long overflowing tocs */
91
- z-index: 1;
92
- }
93
- .pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
94
- font-weight: 300;
95
- font-size: 12px;
96
- color: #d2d2d2;
41
+ /* Red Hat footer */
42
+ .ws-org-pfsite-l-footer-dark > * {
43
+ font-size: var(--pf-t--global--font--size--xs);
97
44
  }
98
45
  .ws-org-pfsite-l-footer-dark a {
99
- padding-right: var(--pf-t--global--spacer--sm);
100
- padding-left: var(--pf-t--global--spacer--sm);
101
- /* border-right: var(--pf-v6-global--BorderWidth--sm) solid #d2d2d2; */
102
- font-weight: 300;
103
- color: #d2d2d2;
104
- text-decoration: underline;
46
+ padding-inline: var(--pf-t--global--spacer--sm);
105
47
  }
106
48
  .ws-org-pfsite-l-footer-dark a:first-of-type {
107
- padding-left: 0;
49
+ padding-inline-start: 0;
108
50
  }
109
51
  .ws-org-pfsite-l-footer-dark a:last-of-type {
110
- padding-right: 0;
52
+ padding-inline-end: 0;
111
53
  border: none;
112
54
  }
113
-
114
- .ws-org-pfsite-site-copyright {
115
- white-space: nowrap;
116
- }
package/components/footer/footer.js CHANGED
@@ -1,13 +1,25 @@
1
- import React from "react";
2
- import {Brand, Grid, GridItem, List, PageSection, Content} from "@patternfly/react-core";
3
- import {Link} from "@patternfly/documentation-framework/components";
4
- import {GithubIcon, TwitterIcon} from "@patternfly/react-icons";
5
- import redhatLogo from "./RHLogo.png";
6
- import logo from "../../layouts/PF-HorizontalLogo-Reverse.svg";
1
+ import React from 'react';
2
+ import {
3
+ Brand,
4
+ Grid,
5
+ GridItem,
6
+ List,
7
+ ListItem,
8
+ PageSection,
9
+ Content,
10
+ } from '@patternfly/react-core';
11
+ import { Link } from '@patternfly/documentation-framework/components';
12
+ import { GithubIcon, TwitterIcon } from '@patternfly/react-icons';
13
+ import redhatLogo from './RHLogo.png';
14
+ import redhatLogoDark from './RHLogoDark.png';
7
15
 
8
- export const Footer = () => (
16
+ export const Footer = ({ isDarkTheme }) => (
9
17
  <React.Fragment>
10
- <PageSection key="footer-1" className="ws-org-pfsite-l-footer" component="footer">
18
+ <PageSection
19
+ key="footer-1"
20
+ className="ws-org-pfsite-l-footer"
21
+ component="footer"
22
+ >
11
23
  <Grid>
12
24
  <GridItem
13
25
  sm={12}
@@ -21,21 +33,19 @@ export const Footer = () => (
21
33
  md={4}
22
34
  className="pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"
23
35
  >
24
- <p className="pf-v6-c-title ws-org-pfsite-footer-menu-list-title">
25
- QUICKLINKS
26
- </p>
36
+ <p className="ws-org-pfsite-footer-menu-list-title">Quicklinks</p>
27
37
  <nav aria-label="Quick Links">
28
38
  <List isPlain className="ws-org-pfsite-footer-menu-list">
29
- <li className="ws-org-pfsite-footer-menu-list-item">
39
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
30
40
  <Link
31
41
  className="ws-org-pfsite-footer-menu-link"
32
- to={"/get-started/about-patternfly"}
42
+ to={'/get-started/about-patternfly'}
33
43
  aria-label="Get started with PatternFly"
34
- >
44
+ >
35
45
  Get started
36
46
  </Link>
37
- </li>
38
- <li className="ws-org-pfsite-footer-menu-list-item">
47
+ </ListItem>
48
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
39
49
  <Link
40
50
  className="ws-org-pfsite-footer-menu-link"
41
51
  to="/components/all-components"
@@ -43,8 +53,8 @@ export const Footer = () => (
43
53
  >
44
54
  Components
45
55
  </Link>
46
- </li>
47
- <li className="ws-org-pfsite-footer-menu-list-item">
56
+ </ListItem>
57
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
48
58
  <Link
49
59
  className="ws-org-pfsite-footer-menu-link"
50
60
  to="/layouts/about-layouts"
@@ -52,8 +62,8 @@ export const Footer = () => (
52
62
  >
53
63
  Layouts
54
64
  </Link>
55
- </li>
56
- <li className="ws-org-pfsite-footer-menu-list-item">
65
+ </ListItem>
66
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
57
67
  <Link
58
68
  className="ws-org-pfsite-footer-menu-link"
59
69
  to="/design-foundations/about-design-foundations"
@@ -61,7 +71,7 @@ export const Footer = () => (
61
71
  >
62
72
  Styles
63
73
  </Link>
64
- </li>
74
+ </ListItem>
65
75
  </List>
66
76
  </nav>
67
77
  </GridItem>
@@ -70,12 +80,10 @@ export const Footer = () => (
70
80
  md={4}
71
81
  className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-sm pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"
72
82
  >
73
- <p className="pf-v6-c-title ws-org-pfsite-footer-menu-list-title">
74
- CONTRIBUTE
75
- </p>
83
+ <p className="ws-org-pfsite-footer-menu-list-title">Contribute</p>
76
84
  <nav aria-label="Contribute">
77
85
  <List isPlain className="ws-org-pfsite-footer-menu-list">
78
- <li className="ws-org-pfsite-footer-menu-list-item">
86
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
79
87
  <Link
80
88
  className="ws-org-pfsite-footer-menu-link"
81
89
  to="/get-started/design"
@@ -83,8 +91,8 @@ export const Footer = () => (
83
91
  >
84
92
  Designers
85
93
  </Link>
86
- </li>
87
- <li className="ws-org-pfsite-footer-menu-list-item">
94
+ </ListItem>
95
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
88
96
  <Link
89
97
  className="ws-org-pfsite-footer-menu-link"
90
98
  to="/get-started/develop"
@@ -92,8 +100,8 @@ export const Footer = () => (
92
100
  >
93
101
  Developers
94
102
  </Link>
95
- </li>
96
- <li className="ws-org-pfsite-footer-menu-list-item">
103
+ </ListItem>
104
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
97
105
  <Link
98
106
  className="ws-org-pfsite-footer-menu-link"
99
107
  to="https://github.com/patternfly/patternfly/blob/main/CODE_OF_CONDUCT.md"
@@ -102,7 +110,7 @@ export const Footer = () => (
102
110
  >
103
111
  Code of Conduct
104
112
  </Link>
105
- </li>
113
+ </ListItem>
106
114
  </List>
107
115
  </nav>
108
116
  </GridItem>
@@ -112,11 +120,11 @@ export const Footer = () => (
112
120
  className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-md pf-v6-u-ml-md pf-v6-u-ml-0-on-md"
113
121
  >
114
122
  <p className="ws-org-pfsite-footer-menu-list-title">
115
- STAY IN TOUCH
123
+ Stay in touch
116
124
  </p>
117
125
  <nav aria-label="Stay in touch">
118
126
  <List isPlain className="ws-org-pfsite-footer-menu-list">
119
- <li className="ws-org-pfsite-footer-menu-list-item">
127
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
120
128
  <Link
121
129
  className="ws-org-pfsite-footer-menu-link"
122
130
  to="//join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ"
@@ -125,8 +133,8 @@ export const Footer = () => (
125
133
  >
126
134
  Slack
127
135
  </Link>
128
- </li>
129
- <li className="ws-org-pfsite-footer-menu-list-item">
136
+ </ListItem>
137
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
130
138
  <Link
131
139
  className="ws-org-pfsite-footer-menu-link"
132
140
  to="//github.com/orgs/patternfly/discussions"
@@ -135,8 +143,8 @@ export const Footer = () => (
135
143
  >
136
144
  Discussions
137
145
  </Link>
138
- </li>
139
- <li className="ws-org-pfsite-footer-menu-list-item">
146
+ </ListItem>
147
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
140
148
  <Link
141
149
  className="ws-org-pfsite-footer-menu-link"
142
150
  to="https://www.redhat.com/dynamic-form/instance/934b1674-bc8a-4a13-8c9d-d19abcceb263"
@@ -145,8 +153,8 @@ export const Footer = () => (
145
153
  >
146
154
  Mailing list
147
155
  </Link>
148
- </li>
149
- <li className="ws-org-pfsite-footer-menu-list-item">
156
+ </ListItem>
157
+ <ListItem className="ws-org-pfsite-footer-menu-list-item">
150
158
  <Link
151
159
  className="ws-org-pfsite-footer-menu-link"
152
160
  to="//medium.com/patternfly"
@@ -155,28 +163,81 @@ export const Footer = () => (
155
163
  >
156
164
  PatternFly Medium
157
165
  </Link>
158
- </li>
166
+ </ListItem>
159
167
  </List>
160
168
  </nav>
161
169
  </GridItem>
162
170
  </Grid>
163
171
  </GridItem>
164
172
  <GridItem sm={12} md={4}>
165
- <Grid className="pf-v6-u-pt-xl ws-org-pfsite-l-footer-column">
166
- <GridItem className="pf-v6-u-px-xl">
173
+ <Grid className="pf-v6-u-pt-xl pf-v6-u-pb-xl ws-org-pfsite-l-footer-column">
174
+ <GridItem>
167
175
  <Link
168
176
  className="pf-v6-c-page__header-brand-link pf-v6-c-brand ws-org-pfsite-footer-menu-about-logo pf-v6-u-pb-md"
169
177
  to="/"
170
178
  >
171
- <Brand
172
- src={logo}
173
- alt="PatternFly"
174
- heights={{default: "32px"}}
175
- >
176
- <source srcSet={logo} />
177
- </Brand>
179
+ <svg height="40px" viewBox="0 0 679 158">
180
+ <title>PF-HorizontalLogo-Color</title>
181
+ <defs>
182
+ <linearGradient
183
+ x1="68%"
184
+ y1="2.25860997e-13%"
185
+ x2="32%"
186
+ y2="100%"
187
+ id="linearGradient-website-masthead"
188
+ >
189
+ <stop stopColor="#2B9AF3" offset="0%"></stop>
190
+ <stop
191
+ stopColor="#73BCF7"
192
+ stopOpacity="0.502212631"
193
+ offset="100%"
194
+ ></stop>
195
+ </linearGradient>
196
+ </defs>
197
+ <g
198
+ stroke="none"
199
+ strokeWidth="1"
200
+ fill="none"
201
+ fillRule="evenodd"
202
+ >
203
+ <g
204
+ transform="translate(206.000000, 45.750000)"
205
+ fill="var(--pf-t--global--text--color--regular)"
206
+ fillRule="nonzero"
207
+ >
208
+ <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"></path>
209
+ <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"></path>
210
+ <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"></path>
211
+ <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"></path>
212
+ <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"></path>
213
+ <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"></path>
214
+ <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"></path>
215
+ <polygon points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
216
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
217
+ <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path>
218
+ </g>
219
+ <g transform="translate(0.000000, 0.000000)">
220
+ <path
221
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
222
+ fill="var(--pf-t--color--blue--50)"
223
+ ></path>
224
+ <path
225
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
226
+ fill="url(#linearGradient-website-masthead)"
227
+ ></path>
228
+ <path
229
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
230
+ fill="url(#linearGradient-website-masthead)"
231
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
232
+ ></path>
233
+ </g>
234
+ </g>
235
+ </svg>
178
236
  </Link>
179
- <Content component="p" className="ws-org-pfsite-footer-menu-about-description">
237
+ <Content
238
+ component="p"
239
+ className="ws-org-pfsite-footer-menu-about-description"
240
+ >
180
241
  PatternFly is an open source design system built to drive
181
242
  consistency and unify teams. From documentation and components
182
243
  to code examples and tutorials, PatternFly is a place where
@@ -185,7 +246,7 @@ export const Footer = () => (
185
246
  product experiences—the open source way.
186
247
  </Content>
187
248
  </GridItem>
188
- <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v6-u-px-xl">
249
+ <GridItem className="ws-org-pfsite-footer-menu-social-links">
189
250
  <Link
190
251
  to="//github.com/patternfly"
191
252
  target="top"
@@ -209,26 +270,26 @@ export const Footer = () => (
209
270
  key="footer-2"
210
271
  className="ws-org-pfsite-l-footer-dark pf-m-no-fill"
211
272
  >
212
- <Grid className="pf-v6-u-py-xl-on-sm pf-v6-u-py-0-on-md pf-v6-u-align-items-center">
273
+ <Grid
274
+ hasGutter
275
+ className="pf-v6-u-py-xl-on-sm pf-v6-u-py-0-on-md pf-v6-u-align-items-center"
276
+ >
213
277
  <GridItem md={2} mdOffset={1}>
214
- <Link
215
- to="//www.redhat.com"
216
- target="top"
217
- >
278
+ <Link to="//www.redhat.com" target="top">
218
279
  <img
219
- src={redhatLogo}
280
+ src={isDarkTheme ? redhatLogo : redhatLogoDark}
220
281
  alt="Red Hat"
221
282
  width="145px"
222
283
  height="613px"
223
284
  />
224
285
  </Link>
225
286
  </GridItem>
226
- <GridItem md={4} lg={3} xl={2}>
287
+ <GridItem md={3} lg={3} xl={2}>
227
288
  <span className="ws-org-pfsite-site-copyright">
228
289
  Copyright &copy; 2014-{new Date().getFullYear()} Red Hat, Inc.
229
290
  </span>
230
291
  </GridItem>
231
- <GridItem md={4} lg={5} className="pf-v6-u-ml-xl-on-xl">
292
+ <GridItem md={5} lg={5} className="pf-v6-u-ml-xl-on-xl">
232
293
  <Link
233
294
  to="//www.redhat.com/en/about/privacy-policy"
234
295
  target="top"
package/components/sectionGallery/sectionGalleryToolbar.js CHANGED
@@ -60,6 +60,7 @@ export const SectionGalleryToolbar = ({
60
60
  </ToolbarGroup>
61
61
  <ToolbarItem
62
62
  variant="pagination"
63
+ gap={{ default: 'gapMd', md: 'gapNone' }}
63
64
  style={{ '--pf-v6-c-toolbar__item--MinWidth': 'max-content' }}
64
65
  className="pf-m-align-self-center"
65
66
  >
package/layouts/sideNavLayout/sideNavLayout.js CHANGED
@@ -35,7 +35,6 @@ import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
35
35
  import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon';
36
36
  import { SideNav, TopNav, GdprBanner } from '../../components';
37
37
  import staticVersions from '../../versions.json';
38
- import v5Logo from '../PF-HorizontalLogo-Reverse.svg';
39
38
  import { Footer } from '@patternfly/documentation-framework/components';
40
39
 
41
40
  export const RtlContext = createContext(false);
@@ -49,6 +48,8 @@ const HeaderTools = ({
49
48
  topNavItems,
50
49
  isRTL,
51
50
  setIsRTL,
51
+ isDarkTheme,
52
+ setIsDarkTheme,
52
53
  }) => {
53
54
  const initialVersion = staticVersions.Releases.find(
54
55
  (release) => release.latest
@@ -61,7 +62,6 @@ const HeaderTools = ({
61
62
  const [isDropdownOpen, setDropdownOpen] = useState(false);
62
63
  // const [searchValue, setSearchValue] = React.useState('');
63
64
  // const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
64
- const [isDarkTheme, setIsDarkTheme] = React.useState(false);
65
65
 
66
66
  const getDropdownItem = (version, isLatest = false) => (
67
67
  <DropdownItem
@@ -285,6 +285,7 @@ export const SideNavLayout = ({
285
285
 
286
286
  const [versions, setVersions] = useState({ ...staticVersions });
287
287
  const [isRTL, setIsRTL] = useState(false);
288
+ const [isDarkTheme, setIsDarkTheme] = React.useState(false);
288
289
 
289
290
  useEffect(() => {
290
291
  if (typeof window === 'undefined') {
@@ -387,6 +388,8 @@ export const SideNavLayout = ({
387
388
  topNavItems={topNavItems}
388
389
  isRTL={isRTL}
389
390
  setIsRTL={setIsRTL}
391
+ isDarkTheme={isDarkTheme}
392
+ setIsDarkTheme={setIsDarkTheme}
390
393
  />
391
394
  )}
392
395
  </MastheadContent>
@@ -409,7 +412,7 @@ export const SideNavLayout = ({
409
412
  defaultManagedSidebarIsOpen={navOpenProp}
410
413
  >
411
414
  {children}
412
- {process.env.hasFooter && <Footer />}
415
+ {process.env.hasFooter && <Footer isDarkTheme={isDarkTheme} />}
413
416
  </Page>
414
417
  <div id="ws-page-banners">{hasGdprBanner && <GdprBanner />}</div>
415
418
  </RtlContext.Provider>
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.86",
4
+ "version": "6.0.0-alpha.88",
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.75",
16
+ "@patternfly/ast-helpers": "^1.4.0-alpha.77",
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": "00fbfc78914c04ffa8a9a62431cfda8ae87b3cd7"
83
+ "gitHead": "5d735a1cad2532998ad348a18888f90c3d8eb21e"
84
84
  }