docs: Renames and moves files for nav redesign.

package.json

@@ -33,6 +33,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.28.5",
     "@octokit/rest": "^19.0.7",
     "@patternfly/patternfly": "^6.5.0-prerelease.12",
     "@patternfly/react-code-editor": "^6.4.0",

packages/documentation-framework/components/footer/footer.js

@@ -30,68 +30,12 @@ export const Footer = ({ isDarkTheme }) => (
           <Grid className="pf-v6-u-py-xl">
             <GridItem
               sm={6}
-              md={4}
+              md={6}
               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"
-            >
-              <p className="ws-org-pfsite-footer-menu-list-title">What's new</p>
-              <nav aria-label="Quick Links">
-                <List isPlain className="ws-org-pfsite-footer-menu-list">
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/upgrade"
-                      aria-label="Latest PatternFly upgrade guide"
-                    >
-                      Upgrade
-                    </Link>
-                  </ListItem>
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/release-highlights/"
-                      aria-label="PatternFly release highlights"
-                    >
-                      Releases
-                    </Link>
-                  </ListItem>
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/patternfly-ai/about-ai"
-                      aria-label="PatternFly's new AI resources"
-                    >
-                      PatternFly AI
-                    </Link>
-                  </ListItem>
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/tokens/about-tokens"
-                      aria-label="PatternFly's new token system"
-                    >
-                      Tokens
-                    </Link>
-                  </ListItem>
-                </List>
-              </nav>
-            </GridItem>
-            <GridItem
-              sm={6}
-              md={4}
-              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"
             >
               <p className="ws-org-pfsite-footer-menu-list-title">Contribute</p>
               <nav aria-label="Contribute">
                 <List isPlain className="ws-org-pfsite-footer-menu-list">
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/about-patternfly"
-                      aria-label="Learn about PatternFly"
-                    >
-                      About PatternFly
-                    </Link>
-                  </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
@@ -101,22 +45,13 @@ export const Footer = ({ isDarkTheme }) => (
                       Code of conduct
                     </Link>
                   </ListItem>
-                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
-                    <Link
-                      className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/contribute"
-                      aria-label="Learn how to contribute to PatternFly"
-                    >
-                      Contribute
-                    </Link>
-                  </ListItem>
                 </List>
               </nav>
             </GridItem>
             <GridItem
               sm={6}
-              md={4}
-              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"
+              md={6}
+              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"
             >
               <p className="ws-org-pfsite-footer-menu-list-title">Community</p>
               <nav aria-label="Stay in touch">
@@ -136,9 +71,9 @@ export const Footer = ({ isDarkTheme }) => (
                       className="ws-org-pfsite-footer-menu-link"
                       to="//medium.com/patternfly"
                       target="top"
-                      aria-label="Read the PatternFly blog"
+                      aria-label="Read our blog articles on Medium"
                     >
-                      Blog
+                      Medium
                     </Link>
                   </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
@@ -167,7 +102,7 @@ export const Footer = ({ isDarkTheme }) => (
                       target="top"
                       aria-label="Visit the PatternFly discussion forum"
                     >
-                      Discussions
+                      GitHub Discussions
                     </Link>
                   </ListItem>
                 </List>

packages/documentation-framework/components/index.js

@@ -4,6 +4,7 @@ export * from './cssVariables/cssSearch';
 export * from './example/example';
 export * from './footer/footer';
 export * from './gdprBanner/gdprBanner';
+export * from './navAnnouncementBanner/navAnnouncementBanner';
 export * from './propsTable/propsTable';
 export * from './sideNav/sideNav';
 export * from './topNav/topNav';

packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.css

@@ -0,0 +1,20 @@
+.ws-nav-announcement-banner-container {
+  position: fixed;
+  top: 20px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 300;
+  display: flex;
+  justify-content: center;
+  padding: 0 var(--pf-t--global--spacer--xl);
+  pointer-events: none;
+}
+
+.ws-nav-announcement-banner {
+  max-width: 85vw;
+  width: 100%;
+  box-shadow: var(--pf-t--global--box-shadow--md);
+  pointer-events: auto;
+}
+

packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import './navAnnouncementBanner.css';
+
+export const NavAnnouncementBanner = () => {
+  const initialBannerOpen = typeof window !== 'undefined' && window.localStorage && !localStorage.getItem('nav-announcement-banner-closed');
+  const [ isBannerOpen, setBannerOpen ] = React.useState(initialBannerOpen);
+
+  const closeBanner = () => {
+    localStorage.setItem('nav-announcement-banner-closed', 'true');
+    setBannerOpen(false);
+  }
+
+  return !isBannerOpen ? null : (
+    <div className="ws-nav-announcement-banner-container">
+      <Alert
+        variant="info"
+        isInline
+        title="We've redesigned our navigation"
+        actionClose={<AlertActionCloseButton onClose={closeBanner} />}
+        className="ws-nav-announcement-banner"
+      >
+        Learn more about the changes on <a href="https://medium.com/patternfly" target="_blank" rel="noopener noreferrer">Medium</a> and share your feedback in our <a href="https://www.feedback.redhat.com/jfe/form/SV_9MKBjq8H7muINMy" target="_blank" rel="noopener noreferrer">user survey</a>.
+      </Alert>
+    </div>
+  );
+}
+

packages/documentation-framework/components/sideNav/sideNav.js

@@ -16,8 +16,8 @@ import { css } from '@patternfly/react-styles';
 import { Location } from '@reach/router';
 
 const DIVIDER_STYLES = {
-  marginTop: 'var(--pf-t--global--spacer--md)',
-  marginBottom: 'var(--pf-t--global--spacer--md)'
+  marginTop: 'var(--pf-t--global--spacer--xs)',
+  marginBottom: 'var(--pf-t--global--spacer--xs)'
 };
 import { makeSlug } from '../../helpers';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';

packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js

@@ -27,7 +27,7 @@ import {
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
-import { SideNav, TopNav, GdprBanner, ThemeSelector } from '../../components';
+import { SideNav, TopNav, GdprBanner, NavAnnouncementBanner, ThemeSelector } from '../../components';
 import staticVersions from '../../versions.json';
 import { Footer } from '@patternfly/documentation-framework/components';
 import { useTheme, THEME_TYPES } from '../../hooks/useTheme';
@@ -363,7 +363,10 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
           {children}
           {process.env.hasFooter && <Footer isDarkTheme={isDarkTheme} />}
         </Page>
-        <div id="ws-page-banners">{hasGdprBanner && <GdprBanner />}</div>
+        <div id="ws-page-banners">
+          <NavAnnouncementBanner />
+          {hasGdprBanner && <GdprBanner />}
+        </div>
       </RtlContext.Provider>
     </React.Fragment>
   );

packages/documentation-site/package.json

@@ -10,7 +10,7 @@
     "build": "yarn build:ts && pf-docs-framework build all",
     "build:server": "pf-docs-framework build server",
     "build:client": "pf-docs-framework build client",
-    "build:ts": "tsc --project patternfly-docs/content/design-guidelines/styles/motion/tsconfig.json",
+    "build:ts": "tsc --project patternfly-docs/content/foundations-and-styles/motion/tsconfig.json",
     "clean": "rimraf -rf .cache public size-plugin.json patternfly-docs/generated/**/*.js",
     "develop": "yarn build:ts && pf-docs-framework start",
     "generate": "pf-docs-framework generate",

packages/documentation-site/patternfly-docs/content/PatternFly-AI/about-ai.md → packages/documentation-site/patternfly-docs/content/AI/about-ai.md

@@ -1,12 +1,12 @@
 ---
 id: Principles and guidelines 
-section: PatternFly-AI
+section: AI
 sortValue: 1
 --- 
 import { Alert, AlertActionLink, Accordion, AccordionItem, AccordionContent, AccordionToggle, Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox, Divider,  DescriptionList, DescriptionListTerm, DescriptionListGroup,  DescriptionListDescription, Grid, GridItem} from '@patternfly/react-core';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 
-When used thoughtfully, AI can enhance user experiences through personalized interactions, increased efficiency, and innovative designs. **PatternFly AI** provides resources that can help you integrate AI into your design process, balancing a consideration for its potential benefits and unintended consequences.
+When used thoughtfully, AI can enhance user experiences through personalized interactions, increased efficiency, and innovative designs. Our AI guides provide resources that can help you integrate AI into your design process, balancing a consideration for its potential benefits and unintended consequences.
 
 ## Red Hat policies
 

packages/documentation-site/patternfly-docs/content/PatternFly-AI/conversation-design/conversation-design.md → packages/documentation-site/patternfly-docs/content/AI/conversation-design/conversation-design.md

@@ -1,6 +1,6 @@
 ---
 id: Conversation design
-section: PatternFly-AI
+section: AI
 ---
 
 import { Button, Flex, FlexItem } from '@patternfly/react-core';
@@ -13,7 +13,7 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 
 Good conversation design combines content strategy, writing, and design to ensure that the development and use of chatbots is centered on real user needs. This includes making sure that all text related to the conversational UI supports easy engagement with chatbots, while staying aligned with brand standards.
 
-When designing AI conversations alongside PatternFly-based projects, it is important to align with our established [brand voice and tone](/ux-writing/brand-voice-and-tone), as well as our [ethical guidelines for AI.](/patternfly-ai/ai-guidelines)
+When designing AI conversations alongside PatternFly-based projects, it is important to align with our established [brand voice and tone](/content-design/brand-voice-and-tone), as well as our [ethical guidelines for AI.](/ai/ai-guidelines)
 
 ## Best practices 
 
@@ -29,11 +29,11 @@ Following these best practices to help ensure that your users can complete their
 
 When chatbots are designed to meet the needs of your users, they can improve the overall UX of your product. They are convenient, efficient, and persistent. 
 
-[Our chatbot extension](/patternfly-ai/chatbot/about-chatbot) utilizes PatternFly components to create a foundation for an AI-based chatbot, with additional customization options.
+[Our chatbot extension](/ai/chatbot/about-chatbot) utilizes PatternFly components to create a foundation for an AI-based chatbot, with additional customization options.
 
 <Flex>
 <FlexItem>
-<Button component="a" href="/patternfly-ai/chatbot/about-chatbot" target="_blank" variant="primary" size="lg">Use the chatbot extension <ArrowRightIcon /></Button>
+<Button component="a" href="/ai/chatbot/about-chatbot" target="_blank" variant="primary" size="lg">Use the chatbot extension <ArrowRightIcon /></Button>
 </FlexItem>
 </Flex>
 

packages/documentation-site/patternfly-docs/content/PatternFly-AI/rapid-prototyping/enhancing-existing-projects.md → packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/enhancing-existing-projects.md

@@ -1,6 +1,6 @@
 ---
 id: Rapid prototyping
-section: PatternFly-AI
+section: AI
 source: enhancing-existing-projects
 sortValue: 2
 ---
@@ -9,9 +9,9 @@ sortValue: 2
 
 This guide provides instructions for integrating AI-assisted PatternFly development tools into your existing codebase.
 
-Before you get started, review [best practices for AI-assisted prototyping](/patternfly-ai/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping) and learn about [vibe coding principles](/patternfly-ai/rapid-prototyping/rapid-prototyping#what-is-vibe-coding) for effective AI-assisted development.
+Before you get started, review [best practices for AI-assisted prototyping](/ai/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping) and learn about [vibe coding principles](/ai/rapid-prototyping/rapid-prototyping#what-is-vibe-coding) for effective AI-assisted development.
 
-If you need to start a new project, follow our guidelines for [starting a new prototype](/patternfly-ai/rapid-prototyping/new-prototypes).
+If you need to start a new project, follow our guidelines for [starting a new prototype](/ai/rapid-prototyping/new-prototypes).
 
 ## Why enhance existing projects?
 

packages/documentation-site/patternfly-docs/content/PatternFly-AI/rapid-prototyping/migrating-to-patternfly.md → packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/migrating-to-patternfly.md

@@ -1,6 +1,6 @@
 ---
 id: AI-assisted code migration
-section: PatternFly-AI
+section: AI
 ---
 
 This guide explores a workflow that enables developers to leverage AI to accelerate code migrations, with best practices and recommendations to follow when replicating the process.  

packages/documentation-site/patternfly-docs/content/PatternFly-AI/rapid-prototyping/new-prototypes.md → packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/new-prototypes.md

@@ -1,6 +1,6 @@
 ---
 id: Rapid prototyping
-section: PatternFly-AI
+section: AI
 source: new-prototypes
 sortValue: 2
 ---
@@ -9,9 +9,9 @@ sortValue: 2
 
 This guide provides instructions for setting up new PatternFly prototypes using AI-assisted development tools.
 
-Before you get started, review [best practices for AI-assisted prototyping](/patternfly-ai/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping).
+Before you get started, review [best practices for AI-assisted prototyping](/ai/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping).
 
-If you need to add AI tools to existing codebases instead, follow our guidelines for [enhancing existing projects](/patternfly-ai/rapid-prototyping/enhancing-existing-projects).
+If you need to add AI tools to existing codebases instead, follow our guidelines for [enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects).
 
 ## Project setup
 
@@ -35,7 +35,7 @@ The patternfly-react-seed ai_enabled branch comes pre-configured with:
 
 Once you've installed and set up the patternfly-react-seed ai_enabled branch, with the [patternfly-ai-coding tool](https://github.com/patternfly/patternfly-ai-coding), follow these steps to begin prototyping: 
 
-1. **Define your scope**: Clearly articulate what you want to build using [vibe coding principles](/patternfly-ai/rapid-prototyping/rapid-prototyping#effective-prompting-with-vibe-coding). Describe the experience, not the technical implementation.
+1. **Define your scope**: Clearly articulate what you want to build using [vibe coding principles](/ai/rapid-prototyping/rapid-prototyping#effective-prompting-with-vibe-coding). Describe the experience, not the technical implementation.
 2. **Leverage AI assistance**: Use AI tools to generate PatternFly components based on your requirements, communicating through natural language descriptions of user needs and design intent.
 3. **Iterate and refine**: Review generated code and make adjustments as needed, continuing to use vibe coding to guide refinements.
 4. **Test and validate**: Ensure your prototype meets design and functional requirements.

packages/documentation-site/patternfly-docs/content/PatternFly-AI/rapid-prototyping/rapid-prototyping.md → packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/rapid-prototyping.md

@@ -1,6 +1,6 @@
 ---
 id: Rapid prototyping
-section: PatternFly-AI
+section: AI
 source: about-rapid-prototyping
 sortValue: 2
 ---
@@ -26,8 +26,8 @@ Rapid prototyping with PatternFly code offers several key benefits:
 
 Choose your path based on your current situation:
 
-- **[Starting a new prototype](/patternfly-ai/rapid-prototyping/new-prototypes):** Use the [patternfly-react-seed (ai_enabled branch)](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled) application for optimal setup.
-- **[Enhancing existing projects](/patternfly-ai/rapid-prototyping/enhancing-existing-projects):** Integrate AI tools into your current codebase.
+- **[Starting a new prototype](/ai/rapid-prototyping/new-prototypes):** Use the [patternfly-react-seed (ai_enabled branch)](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled) application for optimal setup.
+- **[Enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects):** Integrate AI tools into your current codebase.
 
 ## Best practices for AI-assisted prototyping
 

packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-design.md → packages/documentation-site/patternfly-docs/content/accessibility/accessibility-design.md

@@ -15,7 +15,7 @@ For example, you should consider contrast when using colors commonly affected by
 
 Designing with contrast in mind also benefits users with light sensitivity.
 
-PatternFly components use [our color palettes](/design-foundations/colors) to pass color contrast tests. As long as you follow our recommendations, any UI built with PatternFly components should have proper contrast between colors, making them distinguishable for users with different types of color perception and light sensitivity. 
+PatternFly components use [our color palettes](/foundations-and-styles/colors) to pass color contrast tests. As long as you follow our recommendations, any UI built with PatternFly components should have proper contrast between colors, making them distinguishable for users with different types of color perception and light sensitivity. 
 
 It's important not to solely rely on color for conveying information. Even though PatternFly components pass color contrast tests, they also use icons to further help with identification, which can be especially helpful for users with a form of color blindness.
 
@@ -29,7 +29,7 @@ If you go beyond our recommendations to combine PatternFly colors in other ways,
 
 The text in your UI should also be accessible to users with low vision. For example, links should be descriptive and concise, essential content should not be hidden in the UI, and text should scale appropriately as the UI window is resized or magnified. 
 
-To help simplify and strengthen the way that users process content, it is important to carefully consider your text size, font, letter spacing, margins, and spacing. PatternFly supports accessibility in these areas through our [typography](/design-foundations/typography) and [spacing](/design-foundations/spacers) guidelines.
+To help simplify and strengthen the way that users process content, it is important to carefully consider your text size, font, letter spacing, margins, and spacing. PatternFly supports accessibility in these areas through our [typography](/foundations-and-styles/typography) and [spacing](/foundations-and-styles/spacers) guidelines.
 
 ## Understanding low vision