feat(site): update doc-core to 1.22.0

.github/workflows-src/partials/build-astro.yml

@@ -9,5 +9,5 @@
   with:
     path: "packages/documentation-site/.cache"
     key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-- run: yarn build:doc-core
+- run: yarn ci:build:doc-core
   name: Build astro docs

.gitignore

@@ -46,3 +46,5 @@ lerna-debug.log
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+*.tsbuildinfo

package.json

@@ -14,6 +14,7 @@
     "build": "yarn workspace patternfly-org build && yarn copy",
     "build:extensions": "EXTENSIONS_ONLY=true PRERELEASE=true yarn build",
     "build:doc-core": "yarn workspace site build",
+    "ci:build:doc-core": "yarn workspace site ci:build",
     "preview:doc-core": "yarn workspace site wrangler:preview",
     "build:ts": "yarn workspace patternfly-org build:ts",
     "build:ts:watch": "yarn build:ts --watch",
@@ -28,7 +29,8 @@
     "start:doc-core": "yarn workspace site dev",
     "uninstall": "find . -name node_modules | xargs rm -rf",
     "workflows": "node .github/generate-workflows",
-    "test:a11y": "yarn workspace patternfly-org test:a11y"
+    "test:a11y": "yarn workspace patternfly-org test:a11y",
+    "generate:content": "yarn workspace site generate:content"
   },
   "workspaces": {
     "packages": [

packages/documentation-framework/components/index.js

@@ -8,7 +8,7 @@ export * from './propsTable/propsTable';
 export * from './navAnnouncementBanner/navAnnouncementBanner';
 export * from './sideNav/sideNav';
 export * from './topNav/topNav';
-export * from './link/link';
+export * from './link/link.jsx';
 export * from './tableOfContents/tableOfContents';
 export * from './inlineAlert/inlineAlert';
 export * from './themeSelector/themeSelector';

packages/documentation-framework/components/link/link.js → packages/documentation-framework/components/link/link.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link as ReachLink, navigate } from '@reach/router';
-import { getAsyncComponent } from '../../routes';
+const { getAsyncComponent } = require('../../routes');
 
 const Promiseany = (
   Promise.any ||

packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js → packages/documentation-framework/components/sectionGallery/sectionDataListLayout.jsx

@@ -11,8 +11,8 @@ import {
   ContentVariants,
   Label,
 } from "@patternfly/react-core";
-import { Link } from "../link/link";
-import { TextSummary } from "./TextSummary";
+import { Link } from "../link/link.jsx";
+import { TextSummary } from "./TextSummary.jsx";
 
 export const SectionDataListLayout = ({
   galleryItems,

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

@@ -1,78 +1 @@
-import React from "react";
-
-import './sectionGallery.css';
-import { SectionGalleryToolbar } from "./sectionGalleryToolbar";
-import { SectionGalleryLayout } from "./sectionGalleryLayout";
-import { SectionDataListLayout } from "./sectionDataListLayout";
-import { SectionGalleryWrapper } from "./sectionGalleryWrapper";
-
-/** 
- * Helper component returns gallery of items with search toolbar and switchable gallery/data list views.
- * @param {Object} illustrations - Object of preview images mapped to their snake_case item display name
- * @param {string} section - Name of the navigation section to create the gallery within
- * @param {Object} galleryItemsData - Object containing the image location & summary text mapped to the gallery item's hyphenated-name
- * @param {string} [placeholderText=Search by name] - Optional text to be displayed as placeholder for SearchInput
- * @param {string} [countText= items] - Optional text to be displayed after the number of search results
- * @param {string} [initialLayout=grid] - Optional text to indicate whether to default to grid or list layout
- * @param {Boolean} [hasGridText=false] - Optional boolean to toggle text on grid layout cards
- * @param {Boolean} [hasGridImages=false] - Optional boolean to toggle images on grid layout cards
- * @param {Boolean} [hasListText=false] - Optional boolean to toggle text on list layout rows
- * @param {Boolean} [hasListImages=false] - Optional boolean to toggle images on list layout rows
- * @param {Boolean} [isFullWidth=true] - Optional boolean to disable component from exceeding default max-width for page
-*/
-
-export const SectionGallery = ({
-  illustrations,
-  section,
-  subsection = null,
-  includeSubsections = false,
-  parseSubsections = false,
-  galleryItemsData,
-  placeholderText,
-  countText,
-  initialLayout = "grid",
-  hasGridText = false,
-  hasGridImages = true,
-  hasListText = true,
-  hasListImages = true,
-  isFullWidth = true,
-  onlyShowInGalleryData = false
-}) => (
-  <SectionGalleryWrapper
-    illustrations={illustrations}
-    section={section}
-    subsection={subsection}
-    includeSubsections={includeSubsections}
-    parseSubsections={parseSubsections}
-    galleryItemsData={galleryItemsData}
-    initialLayout={initialLayout}
-    isFullWidth={isFullWidth}
-    onlyShowInGalleryData={onlyShowInGalleryData}
-  >
-    {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => (
-      <>
-        <SectionGalleryToolbar
-          galleryItems={sectionGalleryItems}
-          searchTerm={searchTerm}
-          setSearchTerm={setSearchTerm}
-          layoutView={layoutView}
-          setLayoutView={setLayoutView}
-          placeholderText={placeholderText}
-          countText={countText}
-        />
-        <SectionGalleryLayout
-          galleryItems={sectionGalleryItems}
-          layoutView={layoutView}
-          hasGridText={hasGridText}
-          hasGridImages={hasGridImages}
-        />
-        <SectionDataListLayout
-          galleryItems={sectionGalleryItems}
-          layoutView={layoutView}
-          hasListText={hasListText}
-          hasListImages={hasListImages}
-        />
-      </>
-    )}
-  </SectionGalleryWrapper>
-);
+export * from './sectionGallery.jsx';

packages/documentation-framework/components/sectionGallery/sectionGallery.jsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+import './sectionGallery.css';
+import { SectionGalleryToolbar } from "./sectionGalleryToolbar.jsx";
+import { SectionGalleryLayout } from "./sectionGalleryLayout.jsx";
+import { SectionDataListLayout } from "./sectionDataListLayout.jsx";
+import { SectionGalleryWrapper } from "./sectionGalleryWrapper.jsx";
+
+/** 
+ * Helper component returns gallery of items with search toolbar and switchable gallery/data list views.
+ * @param {Object} illustrations - Object of preview images mapped to their snake_case item display name
+ * @param {string} section - Name of the navigation section to create the gallery within
+ * @param {Object} galleryItemsData - Object containing the image location & summary text mapped to the gallery item's hyphenated-name
+ * @param {string} [placeholderText=Search by name] - Optional text to be displayed as placeholder for SearchInput
+ * @param {string} [countText= items] - Optional text to be displayed after the number of search results
+ * @param {string} [initialLayout=grid] - Optional text to indicate whether to default to grid or list layout
+ * @param {Boolean} [hasGridText=false] - Optional boolean to toggle text on grid layout cards
+ * @param {Boolean} [hasGridImages=false] - Optional boolean to toggle images on grid layout cards
+ * @param {Boolean} [hasListText=false] - Optional boolean to toggle text on list layout rows
+ * @param {Boolean} [hasListImages=false] - Optional boolean to toggle images on list layout rows
+ * @param {Boolean} [isFullWidth=true] - Optional boolean to disable component from exceeding default max-width for page
+*/
+
+export const SectionGallery = ({
+  illustrations,
+  section,
+  subsection = null,
+  includeSubsections = false,
+  parseSubsections = false,
+  galleryItemsData,
+  placeholderText,
+  countText,
+  initialLayout = "grid",
+  hasGridText = false,
+  hasGridImages = true,
+  hasListText = true,
+  hasListImages = true,
+  isFullWidth = true,
+  onlyShowInGalleryData = false
+}) => (
+  <SectionGalleryWrapper
+    illustrations={illustrations}
+    section={section}
+    subsection={subsection}
+    includeSubsections={includeSubsections}
+    parseSubsections={parseSubsections}
+    galleryItemsData={galleryItemsData}
+    initialLayout={initialLayout}
+    isFullWidth={isFullWidth}
+    onlyShowInGalleryData={onlyShowInGalleryData}
+  >
+    {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => (
+      <>
+        <SectionGalleryToolbar
+          galleryItems={sectionGalleryItems}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+          layoutView={layoutView}
+          setLayoutView={setLayoutView}
+          placeholderText={placeholderText}
+          countText={countText}
+        />
+        <SectionGalleryLayout
+          galleryItems={sectionGalleryItems}
+          layoutView={layoutView}
+          hasGridText={hasGridText}
+          hasGridImages={hasGridImages}
+        />
+        <SectionDataListLayout
+          galleryItems={sectionGalleryItems}
+          layoutView={layoutView}
+          hasListText={hasListText}
+          hasListImages={hasListImages}
+        />
+      </>
+    )}
+  </SectionGalleryWrapper>
+);

packages/documentation-framework/components/sectionGallery/sectionGalleryLayout.js → packages/documentation-framework/components/sectionGallery/sectionGalleryLayout.jsx

@@ -10,7 +10,7 @@ import {
   Label,
 } from '@patternfly/react-core';
 import { navigate } from '@reach/router';
-import { TextSummary } from './TextSummary';
+import { TextSummary } from './TextSummary.jsx';
 
 export const SectionGalleryLayout = ({
   galleryItems,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from '../link/link';
+import { Link } from '../link/link.jsx';
 import {
   Label,
   Nav,

packages/documentation-framework/templates/design-guidelines.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 export const DesignGuidelineTemplate = (
   <React.Fragment>

packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.js → packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { a11yScores } from './a11y-scores';
-import { capitalize } from '@patternfly/documentation-framework/helpers/capitalize';
+import { a11yScores } from './a11y-scores.jsx';
+const { capitalize } = require('@patternfly/documentation-framework/helpers/capitalize');
 
 export const AccessibilityScorecard = () => {
   const columnNames = ['criteria', 'status', 'notes'];

packages/documentation-site/patternfly-docs/content/accessibility/develop.md

@@ -3,7 +3,7 @@ id: Develop
 title: Develop for accessibility
 section: accessibility
 ---
-import { AccessibilityDatalist } from './accessibility-datalist.js';
+import { AccessibilityDatalist } from './accessibility-datalist.jsx';
 
 PatternFly provides accessible components, but **we can't guarantee that your products will be accessible**. In order to ensure that your product is accessible, you will need to take additional steps during development, as described in the following guidelines and techniques.
 

packages/documentation-site/patternfly-docs/content/accessibility/product-scorecard.md

@@ -2,7 +2,7 @@
 id: Product scorecard
 section: accessibility
 ---
-import { AccessibilityScorecard } from './accessibility-scorecard.js';
+import { AccessibilityScorecard } from './accessibility-scorecard.jsx';
 
 ## Scoring your accessibility
 

packages/documentation-site/patternfly-docs/content/components/accessibility/avatar/avatar.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { Checkbox, List, ListItem } from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 ## Accessibility
 

packages/documentation-site/patternfly-docs/content/components/accessibility/card/card.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { Checkbox, List, ListItem } from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 ## Accessibility
 

packages/documentation-site/patternfly-docs/content/components/accessibility/checkbox/checkbox.md

@@ -5,7 +5,7 @@ subsection: forms
 ---
 
 import { Checkbox, List, ListItem } from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 ## Accessibility
 

packages/documentation-site/patternfly-docs/content/components/accessibility/chip/chip.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { Checkbox, List, ListItem } from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 ## Accessibility
 

packages/documentation-site/patternfly-docs/content/components/accessibility/label/label.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { Checkbox, List, ListItem } from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 ## Accessibility
 

packages/documentation-site/patternfly-docs/content/components/accessibility/menu-toggle/menu-toggle.md

@@ -5,7 +5,7 @@ subsection: menus
 ---
 
 import { Checkbox, List, ListItem } from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 ## Accessibility
 

packages/documentation-site/patternfly-docs/content/components/accessibility/modal/modal.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { Checkbox, List, ListItem } from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 ## Accessibility
 

packages/documentation-site/patternfly-docs/content/components/accessibility/radio/radio.md

@@ -5,7 +5,7 @@ subsection: forms
 ---
 
 import { Checkbox, List, ListItem } from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 ## Accessibility
 

packages/documentation-site/patternfly-docs/content/components/accessibility/sidebar/sidebar.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { Checkbox, List, ListItem } from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 ## Accessibility
 

packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-for-charts.md

@@ -7,7 +7,7 @@ sortValue: 2
 ---
 
 import { Alert, Grid, GridItem, Divider } from '@patternfly/react-core';
-import ColorsGrid from './colors-grid.js';
+import ColorsGrid from './colors-grid.jsx';
 import './colors-for-charts.css';
 
 import '../../components.css';

packages/documentation-site/patternfly-docs/content/components/components.md

@@ -4,7 +4,7 @@ title: Components overview
 section: components
 sortValue: 1
 ---
-import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery';
+import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery.jsx';
 import * as illustrations from './img/component-illustrations';
 import componentsData from './components-data.json';
 

packages/documentation-site/patternfly-docs/content/extensions/extensions.md

@@ -5,7 +5,7 @@ section: extensions
 sortValue: 1
 ---
 
-import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery';
+import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery.jsx';
 import extensionsData from './extensions-data.json';
 
 PatternFly's **extensions** are holistic solutions that utilize multiple PatternFly components, typically addressing specific, cross-project use cases. Extensions accelerate development by providing pre-built, reusable code for common interactions, making it easier to drive consistency throughout a user’s journey across multiple products and platforms.

packages/documentation-site/patternfly-docs/content/foundations-and-styles/foundations-and-styles.md

@@ -5,7 +5,7 @@ section: foundations-and-styles
 sortValue: 1
 ---
 
-import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery';
+import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery.jsx';
 import designFoundationsData from './design-foundations-data.json';
 
 PatternFly’s **foundations and styles** lay the groundwork for all components and extensions that we offer. These visual and structural frameworks describe how all of our components should be built and designed, with additional standards and guidance to help designers and developers work together more efficiently and create clear and consistent product experiences.

packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/layouts.md

@@ -6,7 +6,7 @@ subsection: layouts
 sortValue: 1
 ---
 
-import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery';
+import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery.jsx';
 import layoutsData from './layouts-data.json';
 
 PatternFly’s **layouts** are used to place components on a page. They create a fully responsive structure to keep components organized and aligned across screen sizes.