fix: Clean up broken links and design guidelines bug. (#4888)

edonehoo · web-flow · commit e26f52fda337 · 2025-12-10T14:27:31.000-05:00
* fix: Clean up broken links and design guidelines bug.

* Remove package.json changes to fix build errors
diff --git a/packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.js b/packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import React, { Fragment } from 'react';
+import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
 import './navAnnouncementBanner.css';
 
 export const NavAnnouncementBanner = () => {
@@ -18,8 +18,20 @@ export const NavAnnouncementBanner = () => {
         isInline
         actionClose={<AlertActionCloseButton onClose={closeBanner} />}
         className="ws-nav-announcement-banner"
-        title={<>We've redesigned our website's navigation menu to make it easier to find the information you need. Learn more about the changes on <a href="https://medium.com/patternfly" target="_blank" rel="noopener noreferrer">Medium</a> and share any thoughts in our <a href="https://www.feedback.redhat.com/jfe/form/SV_9MKBjq8H7muINMy" target="_blank" rel="noopener noreferrer">user feedback survey</a>.</>}
-      />
+        title="Website update"
+        actionLinks={
+          <Fragment>
+            <AlertActionLink component="a" href="https://medium.com/patternfly/a-new-path-for-patternfly-org-91d14de4b93c" target="_blank">
+              Learn more
+            </AlertActionLink>
+            <AlertActionLink component="a" href="https://www.feedback.redhat.com/jfe/form/SV_9MKBjq8H7muINMy" target="_blank">
+              Share your feedback
+            </AlertActionLink>
+          </Fragment>
+        }
+      >
+      To make it easier for you to find what you need on PatternFly.org, we've redesigned our website navigation menu.
+    </Alert>
     </div>
   );
 }
diff --git a/packages/documentation-framework/pages/404/index.js b/packages/documentation-framework/pages/404/index.js
@@ -97,7 +97,7 @@ const Page404 = () => {
           body="Start creating your applications with components, our UI building blocks."
           link={{
             text: 'View all components',
-            to: '/components/all-components',
+            to: '/components/overview',
           }}
         />
         <Card404
diff --git a/packages/documentation-framework/scripts/md/parseMD.js b/packages/documentation-framework/scripts/md/parseMD.js
@@ -279,6 +279,11 @@ function sourceMDFile(file, source, buildMode) {
   if (path.basename(file).startsWith('_')) {
     return;
   }
+  // Skip accessibility files when sourcing as design-guidelines
+  // They should only be sourced with the 'accessibility' source
+  if (source === 'design-guidelines' && file.includes('/accessibility/')) {
+    return;
+  }
   const { jsx, pageData, outPath } = toReactComponent(file, source, buildMode);
 
   if (jsx) {
diff --git a/packages/documentation-site/patternfly-docs/content/AI/ai.md b/packages/documentation-site/patternfly-docs/content/AI/ai.md
@@ -13,7 +13,7 @@ To support your AI practices, we provide a range of AI tools that you can integr
 
 - **[Rapid prototyping](/ai/rapid-prototyping):** How to quickly test and iterate on AI features during the early stages of design.
 - **[AI-assisted code migration](/ai/ai-assisted-code-migration):** How to quickly test and iterate on AI features during the early stages of design.
-- **[Conversational Design Principles](/ai/conversational-design):** Guidance for designing effective and human-centered text-based conversational flows.
+- **[Conversational Design Principles](/ai/conversation-design):** Guidance for designing effective and human-centered text-based conversational flows.
 - **[Rapid Prototyping Guidelines](/ai/generative-uis/overview):** How to quickly test and iterate on AI features during the early stages of design.
 
 Regardless of the AI resources or workflow you're using, it's important to ensure that you're aligned with the compliance rules, ethical considerations, and best practies on this page. 
diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-for-charts.md b/packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-for-charts.md
@@ -12,7 +12,7 @@ import './colors-for-charts.css';
 
 import '../../components.css';
 
-**Note:** Our charts use separate design tokens from our standard library. To view a list of all chart tokens, apply the "chart" category filter to [the design tokens table](/foundations-and-styles/design-tokens/all-patternfly-tokens).
+**Note:** Our charts use separate design tokens from our standard library. To view a list of all chart tokens, apply the "chart" category filter to [the design tokens table](/foundations-and-styles/design-tokens/all-design-tokens).
 
 ## Color palettes
 
diff --git a/packages/documentation-site/patternfly-docs/content/components/date-picker/date-picker.md b/packages/documentation-site/patternfly-docs/content/components/date-picker/date-picker.md
@@ -139,4 +139,4 @@ Examples:
 
 <img src="./img/Error message date picker.png" alt="Date picker with error message" width="200"/>
 
-For more information about writing effective error messages, see our [writing guide.](/content-design/error-messages)
+For more information about writing effective error messages, see our [writing guide.](/content-design/writing-guides/error-messages)
diff --git a/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md b/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md
@@ -16,7 +16,7 @@ An expandable section has two main elements.
 2. **Toggle text:** Informs the user what will be shown when the component is expanded.
 
 ## Usage
-Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal [charts](/components/charts/about-charts), [cards](/components/card), [data lists](/components/data-list), or [table views](/components/table). Expandable sections can also be used in [alerts](/components/alert) to show additional information.
+Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal [charts](/components/charts/overview), [cards](/components/card), [data lists](/components/data-list), or [table views](/components/table). Expandable sections can also be used in [alerts](/components/alert) to show additional information.
 
 We recommend using dynamic toggle text for an expandable section, which will update the toggle text based on the state of the expandable section. For example, it may read **Show more** when the toggle is collapsed, and **Show less** when the toggle is open.
 
diff --git a/packages/documentation-site/patternfly-docs/content/components/modal/modal.md b/packages/documentation-site/patternfly-docs/content/components/modal/modal.md
@@ -103,7 +103,7 @@ When using destructive actions, ensure that the user is informed about the conse
 
 Use an error dialog to inform users of problems that interrupt normal or expected behavior. Briefly contextualize the problem and why it happened, then provide actionable steps toward a solution.
 
-Learn more about writing error messages in our [error message guidelines](/content-design/error-messages).
+Learn more about writing error messages in our [error message guidelines](/content-design/writing-guides/error-messages).
 
 Error dialogs may use an error icon for visual emphasis.
 
diff --git a/packages/documentation-site/patternfly-docs/content/components/time picker/time-picker.md b/packages/documentation-site/patternfly-docs/content/components/time picker/time-picker.md
@@ -64,14 +64,14 @@ For some use cases, users may wish to customize their time display or selection
 
 <img src="./img/time zone.png" alt="time zone" width="260"/>
 
-Learn more about formatting and displaying time zones in our [date and time guidelines](/content-design/numerics).
+Learn more about formatting and displaying time zones in our [date and time guidelines](/content-design/grammar/numerics).
 
 ## Content considerations
 ### Time format
 
 Time formats are product-specific and often depend on user locale. To minimize confusion, choose one time format and keep it consistent. If one time picker displays HH:MM, be sure to repeat the same format throughout your interface.
 
-Learn more about date and time best practices in our [date and time guidelines](/content-design/numerics).
+Learn more about date and time best practices in our [date and time guidelines](/content-design/grammar/numerics).
 
 ### Placeholder text
 Always use placeholder text in time fields to provide an example of the accepted time format. Placeholder text will disappear after users begin inputting their own time.
diff --git a/packages/documentation-site/patternfly-docs/content/components/tooltip/tooltip.md b/packages/documentation-site/patternfly-docs/content/components/tooltip/tooltip.md
@@ -44,7 +44,7 @@ Both tooltips and [popovers](/components/popover/design-guidelines) provide more
 - Tooltips appear on hover, while popovers appear on click.   
 
 ## Content considerations
-For content guidance, refer to [our tooltip writing guide.](/content-design/tooltips)
+For content guidance, refer to [our tooltip writing guide.](/content-design/writing-guides/tooltips)
 
 ## Accessibility
 
diff --git a/packages/documentation-site/patternfly-docs/content/content-design/accessibility-and-localization.md b/packages/documentation-site/patternfly-docs/content/content-design/accessibility-and-localization.md
@@ -1,5 +1,5 @@
 ---
-id: Accessiblity and localization
+id: Accessibility and localization
 section: content-design
 --- 
 
diff --git a/packages/documentation-site/patternfly-docs/content/content-design/content-design.md b/packages/documentation-site/patternfly-docs/content/content-design/content-design.md
@@ -32,7 +32,7 @@ Our grammar documentation includes common writing mechanics and style rules.
 - **[Capitalization:](/content-design/grammar/capitalization)** Rules detailing which casing style to use for different UI scenarios.
 - **[Numerics:](/content-design/grammar/numerics)** Includes rules for displaying and formatting dates, times, currency, and numerical values.
 - **[Punctuation:](/content-design/grammar/punctuation)** Rules for using punctuation properly within UI components and long-form content.
-- **[Sentence structure:](./grammar/sentence-structure)** Guidance on point of view and sentence voice to ensure clarity and active, user-focused language.
+- **[Sentence structure:](/content-design/grammar/sentence-structure)** Guidance on point of view and sentence voice to ensure clarity and active, user-focused language.
 - **[Terminology:](/content-design/grammar/terminology)** Outlines the preferred terms to use across different UI scenarios, including a list of words and phrases to avoid.
 - **[Truncation:](/content-design/grammar/truncation)** Guidance on replacing overflow content with ellipses to manage text when display space is limited.
 - **[Units and symbols:](/content-design/grammar/units-and-symbols)** Rules for displaying units of measurement and shorthand symbols.
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/develop.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/develop.md
@@ -13,7 +13,7 @@ Our tokens are named semantically, so that they're meaningful and better communi
 
 In the event that there isn't a semantic token that fits your use case, then you can use a base token instead, but do so sparingly. Do not use palette tokens. They are the foundation of our token system and there will always be a better base or semantic token to use.
 
-[View all design tokens.](/foundations-and-styles/design-tokens/all-patternfly-tokens)
+[View all design tokens.](/foundations-and-styles/design-tokens/all-design-tokens)
 
 ### Dark theme support
 
@@ -25,7 +25,7 @@ For more information, refer to our [dark theme handbook.](/foundations-and-style
 
 To support tokens, PatternFly's global CSS variable system has been updated. Variable names have been updated across all PatternFly components and extensions. To migrate to our token system, you must [upgrade to PatternFly 6.](/releases/upgrade-guide)
 
-If you make customizations to PatternFly components in your product, or use CSS overrides, you will need to manually update your CSS variable names to match an appropriate [semantic token](/foundations-and-styles/design-tokens/all-patternfly-tokens). There is no one-to-one recommendation for any particular CSS variable, so you will need to choose the most appropriate token for your use case. 
+If you make customizations to PatternFly components in your product, or use CSS overrides, you will need to manually update your CSS variable names to match an appropriate [semantic token](/foundations-and-styles/design-tokens/all-design-tokens). There is no one-to-one recommendation for any particular CSS variable, so you will need to choose the most appropriate token for your use case. 
 
 As you migrate and [select tokens](#selecting-tokens), refer to these recommendations and reminders:
 
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/tokens.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/tokens.md
@@ -3,7 +3,7 @@ id: Overview
 title: Design tokens overview
 section: foundations-and-styles
 subsection: design-tokens
-sortvalue: 1
+sortValue: 1
 --- 
 import '../../components/components.css';
 
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md
@@ -13,7 +13,7 @@ import { ColorFamily } from './ColorFamily.js';
 Our color palettes align with <a href="https://www.redhat.com/en/about/brand/standards/color" target="_blank" alt="Red Hat brand colors"> Red Hat's brand colors </a> and are designed to reinforce content and support effective communication across different UI needs. Colors are applied to PatternFly elements using [semantic design tokens.](/foundations-and-styles/design-tokens/overview) This guide offers guidance for color use in some of the most common scenarios, but it does not cover all tokens. Additional color usage information is included in our tokens documentation.
 
 <div>
-<Button component="a" href="/foundations-and-styles/design-tokens/all-patternfly-tokens" variant="link" isInline> View all design tokens <ArrowRightIcon />
+<Button component="a" href="/foundations-and-styles/design-tokens/all-design-tokens" variant="link" isInline> View all design tokens <ArrowRightIcon />
 </Button>
 </div>
 
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md
@@ -65,7 +65,7 @@ Occasionally, you may need to use a standalone icon that isn't aligned with any
 Medium icons are typically the most versatile size to use in a UI. Most icons in PatternFly components are medium; other sizes are used sparingly.
 
 ## Icon colors
-All icon colors that you use should align with the proper [semantic design token.](/foundations-and-styles/design-tokens/all-patternfly-tokens) For example, a warning icon should use our approved warning color, a danger icon should use our approved danger color, and so on. 
+All icon colors that you use should align with the proper [semantic design token.](/foundations-and-styles/design-tokens/all-design-tokens) For example, a warning icon should use our approved warning color, a danger icon should use our approved danger color, and so on. 
 
 | **Icon state** | **Color token** | **Example** |
 | --- | --- | :---: |
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/spacers/spacers.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/spacers/spacers.md
@@ -36,12 +36,12 @@ Our spacer tokens are based on the values in the previous table, but there are c
 - **Layout spacers:** Used to define spacing within a page.
   - **Gap spacers:** Used to set space between elements or groups of elements, like gaps between multiple actions, gaps between items in a group, gaps between controls, and so on. 
     - Gap spacer tokens begin with `--pf-t--global--spacer--gap`
-  - **Gutter spacer:** Used to define gutters within a [layout](/layouts/overview), like the space between elements in a grid layout.
+  - **Gutter spacer:** Used to define gutters within a [layout](/foundations-and-styles/layouts/overview), like the space between elements in a grid layout.
     - Gutter spacer tokens begin with `--pf-t--global--spacer--gutter`
   - **Inset spacer:** Used to define inner padding for structural elements in order to ensure proper alignment, like in the masthead, navigation menu, or the main page content area. 
     - Inset spacer tokens begin with `--pf-t--global--spacer--inset`
  
-You can search for spacer tokens in [our list of all tokens.](/foundations-and-styles/design-tokens/all-patternfly-tokens)
+You can search for spacer tokens in [our list of all tokens.](/foundations-and-styles/design-tokens/all-design-tokens)
 
 ## Considering line height and padding
 
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/dark-theme-handbook.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/dark-theme-handbook.md
@@ -18,13 +18,13 @@ The only features which will require additional work in order to support dark th
 
 ### Charts
 
-To use charts with dark themes, refer to our guidance for [developing with charts](/components/charts/about-charts#develop-with-charts).
+To use charts with dark themes, refer to our guidance for [developing with charts](/components/charts/overview#developing-with-charts).
 
 ### Images
 
 To create images that adapt to light and dark themes, there are a few approaches you can take: 
 
-- Use inline SVG's with fill colors set to [PatternFly color tokens](/foundations-and-styles/design-tokens/all-patternfly-tokens), which inherently adapt to light and dark themes.
+- Use inline SVG's with fill colors set to [PatternFly color tokens](/foundations-and-styles/design-tokens/all-design-tokens), which inherently adapt to light and dark themes.
 - Create images with colors that work well with both light and dark themes. These colors should meet [WCAG AA contrast requirements](https://webaim.org/resources/contrastchecker/).
 - Utilize background color, border color, border-radius, and padding/spacing to create a container that can hold dynamic/user-supplied images.
 - Write CSS and dynamically swap between 2 image variations:
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/theming.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/theming.md
@@ -51,7 +51,7 @@ For development guidance, refer to the [high contrast handbook](/foundations-and
 
 ## Custom themes 
 
-To branch off of our themes and create your own, you can identify the design tokens you'd like to adjust on our [all tokens page](/foundations-and-styles/design-tokens/all-patternfly-tokens) and provide new values to use within your application. 
+To branch off of our themes and create your own, you can identify the design tokens you'd like to adjust on our [all tokens page](/foundations-and-styles/design-tokens/all-design-tokens) and provide new values to use within your application. 
 
 ### When to customize a theme
 
diff --git a/packages/documentation-site/patternfly-docs/content/get-help/report-a-bug.md b/packages/documentation-site/patternfly-docs/content/get-help/report-a-bug.md
@@ -48,7 +48,7 @@ Bugs that appear in the base HTML/CSS or can be seen in *both* the React and HTM
 For bugs found in a PatternFly extension, please file the issue in that extension's specific repository:
 
 
-- [chatbot:](https://github.com/patternfly/chatbot) Code for [the ChatBot extension](/ai/chatbot/aoverview).
+- [chatbot:](https://github.com/patternfly/chatbot) Code for [the ChatBot extension](/extensions/chatbot/overview).
 - [patternfly-quickstarts:](https://github.com/patternfly/patternfly-quickstarts). Code for [the quick starts extensions](/extensions/quick-starts).
 - [react-catalog-view:](https://github.com/patternfly/react-catalog-view) Code for [the catalog view extension](/extensions/catalog-view/catalog-item-header).
 - [react-component-groups:](https://github.com/patternfly/react-component-groups) Code for [the component groups extension](/extensions/component-groups/overview).
diff --git a/packages/documentation-site/patternfly-docs/content/patterns/patterns.md b/packages/documentation-site/patternfly-docs/content/patterns/patterns.md
@@ -14,7 +14,7 @@ import patternsData from './patterns-data.json';
 
 ## How do I use patterns?
 
-Patterns provide design guidance on how you should combine different **[components](/components/all-components)** and foundational styles for recurring design challenges, such as displaying complex data or managing user workflows. While patterns offer abstract guidance, they are distinct from extensions, which provide the actual pre-built coded solutions.
+Patterns provide design guidance on how you should combine different **[components](/components/overview)** and foundational styles for recurring design challenges, such as displaying complex data or managing user workflows. While patterns offer abstract guidance, they are distinct from extensions, which provide the actual pre-built coded solutions.
 
 Our more holistic design patterns, such as our dashboard and card view, are maintained in our separate [Patterns & Extensions Figma library.](https://www.figma.com/community/file/1357062621908564852/patternfly-6-patterns-extensions)
 
diff --git a/packages/documentation-site/patternfly-docs/content/releases/release-highlights.md b/packages/documentation-site/patternfly-docs/content/releases/release-highlights.md
diff --git a/packages/documentation-site/patternfly-docs/content/releases/release-notes-data.js b/packages/documentation-site/patternfly-docs/content/releases/release-notes-data.js
diff --git a/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md b/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md

Original file line number	Diff line number	Diff line change
`@@ -139,4 +139,4 @@ Examples:`
`139`	`139`
`140`	`140`	`<img src="./img/Error message date picker.png" alt="Date picker with error message" width="200"/>`
`141`	`141`
`142`		`-For more information about writing effective error messages, see our [writing guide.](/content-design/error-messages)`
	`142`	`+For more information about writing effective error messages, see our [writing guide.](/content-design/writing-guides/error-messages)`