@patternfly/documentation-framework 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/example/exampleToolbar.js

@@ -103,7 +103,7 @@ export const ExampleToolbar = ({
             copyCode();
             trackEvent('code_editor_control_click', 'click_event', 'COPY_CODE');
           }}
-          variant="control"
+          variant="plain"
           aria-label={copyAriaLabel}
           className={editorControlProps.className}
         >
@@ -124,7 +124,7 @@ export const ExampleToolbar = ({
           >
             <Button
               aria-label={codesandboxAriaLabel}
-              variant="control"
+              variant="plain"
               type="submit"
               onClick={() => {
                 trackEvent('code_editor_control_click', 'click_event', 'CODESANDBOX_LINK');
@@ -218,6 +218,7 @@ export const ExampleToolbar = ({
       onEditorDidMount={onEditorDidMount}
       isReadOnly={isFullscreen}
       className={`${isEditorOpen ? 'ws-example-code-expanded ' : ''}ws-code-editor`}
+      isHeaderPlain
     />
   );
 }

package/components/footer/footer.css

@@ -1,11 +1,11 @@
-.ws-org-pfsite-l-footer.pf-v5-c-page__main-section {
-  font-family: var(--pf-v5-global--FontFamily--text);
+.ws-org-pfsite-l-footer.pf-v6-c-page__main-section {
+/*   font-family: var(--pf-v6-global--FontFamily--text); */
   font-weight: 300;
   background-color: #1a1a1a !important;
-  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--2xl);
+  --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-page__main-section--PaddingRight: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-page__main-section--PaddingBottom: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-page__main-section--PaddingLeft: var(--pf-t--global--spacer--2xl);
   /* Hide long overflowing tocs */
   z-index: 1;
 }
@@ -34,8 +34,8 @@
   }
 }
 .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links a {
-  margin-right: var(--pf-v5-global--spacer--md);
-  color: var(--pf-v5-global--Color--light-100) !important;
+  margin-right: var(--pf-t--global--spacer--md);
+/*   color: var(--pf-v6-global--Color--light-100) !important; */
 }
 .ws-org-pfsite-l-footer-column
   .ws-org-pfsite-footer-menu-social-links
@@ -43,8 +43,8 @@
   margin-right: 0;
 }
 .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
-  margin-top: var(--pf-v5-global--spacer--md);
-  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-top: var(--pf-t--global--spacer--md);
+  margin-bottom: var(--pf-t--global--spacer--md);
 }
 @media (max-width: 768px) {
   .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
@@ -71,7 +71,7 @@
   padding-right: 10px;
 }
 .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link {
-  color: var(--pf-v5-global--Color--light-100);
+/*   color: var(--pf-v6-global--Color--light-100); */
   font-size: 14px !important;
 }
 .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link:hover {
@@ -86,19 +86,19 @@
 .ws-org-pfsite-l-footer-dark {
   background: #151515 !important;
 }
-.pf-v5-c-page .pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark {
+.pf-v6-c-page .pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark {
   /* Hide long overflowing tocs */
   z-index: 1;
 }
-.pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
+.pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
   font-weight: 300;
   font-size: 12px;
   color: #d2d2d2;
 }
 .ws-org-pfsite-l-footer-dark a {
-  padding-right: var(--pf-v5-global--spacer--sm);
-  padding-left: var(--pf-v5-global--spacer--sm);
-  border-right: var(--pf-v5-global--BorderWidth--sm) solid #d2d2d2;
+  padding-right: var(--pf-t--global--spacer--sm);
+  padding-left: var(--pf-t--global--spacer--sm);
+/*   border-right: var(--pf-v6-global--BorderWidth--sm) solid #d2d2d2; */
   font-weight: 300;
   color: #d2d2d2;
   text-decoration: underline;

package/components/footer/footer.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {Brand, Grid, GridItem, List, PageSection, Text} from "@patternfly/react-core";
+import {Brand, Grid, GridItem, List, PageSection, Content} from "@patternfly/react-core";
 import {Link} from "@patternfly/documentation-framework/components";
 import {GithubIcon, TwitterIcon} from "@patternfly/react-icons";
 import redhatLogo from "./RHLogo.png";
@@ -13,15 +13,15 @@ export const Footer = () => (
           sm={12}
           md={6}
           mdOffset={1}
-          className="pf-v5-u-mb-lg pf-v5-u-mb-0-on-sm"
+          className="pf-v6-u-mb-lg pf-v6-u-mb-0-on-sm"
         >
-          <Grid className="pf-v5-u-py-xl">
+          <Grid className="pf-v6-u-py-xl">
             <GridItem
               sm={6}
               md={4}
-              className="pf-v5-u-ml-md pf-v5-u-ml-0-on-md pf-v5-u-mb-xl pf-v5-u-mb-0-on-md"
+              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="pf-v5-c-title ws-org-pfsite-footer-menu-list-title">
+              <p className="pf-v6-c-title ws-org-pfsite-footer-menu-list-title">
                 QUICKLINKS
               </p>
               <nav aria-label="Quick Links">
@@ -29,17 +29,17 @@ export const Footer = () => (
                   <li className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to={"/get-started/about"}
-                      aria-label="Get started with PatternFly 4"
-                    >
+                      to={"/get-started/about-patternfly"}
+                      aria-label="Get started with PatternFly"
+                     >
                       Get started
                     </Link>
                   </li>
                   <li className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="/components/about-modal"
-                      aria-label="PatternFly 4 components"
+                      to="/components/all-components"
+                      aria-label="PatternFly components"
                     >
                       Components
                     </Link>
@@ -47,8 +47,8 @@ export const Footer = () => (
                   <li className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="/layouts/bullseye"
-                      aria-label="PatternFly 4 layouts"
+                      to="/layouts/about-layouts"
+                      aria-label="PatternFly layouts"
                     >
                       Layouts
                     </Link>
@@ -56,8 +56,8 @@ export const Footer = () => (
                   <li className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="/design-foundations/colors"
-                      aria-label="PatternFly 4 styles"
+                      to="/design-foundations/about-design-foundations"
+                      aria-label="PatternFly styles"
                     >
                       Styles
                     </Link>
@@ -68,9 +68,9 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-v5-u-mt-lg pf-v5-u-mt-0-on-sm pf-v5-u-ml-md pf-v5-u-ml-0-on-md pf-v5-u-mb-xl pf-v5-u-mb-0-on-md"
+              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="pf-v5-c-title ws-org-pfsite-footer-menu-list-title">
+              <p className="pf-v6-c-title ws-org-pfsite-footer-menu-list-title">
                 CONTRIBUTE
               </p>
               <nav aria-label="Contribute">
@@ -98,7 +98,7 @@ export const Footer = () => (
                       className="ws-org-pfsite-footer-menu-link"
                       to="https://github.com/patternfly/patternfly/blob/main/CODE_OF_CONDUCT.md"
                       target="top"
-                      aria-label="PatternFly 4 Code of Conduct"
+                      aria-label="PatternFly Code of Conduct"
                     >
                       Code of Conduct
                     </Link>
@@ -109,7 +109,7 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-v5-u-mt-lg pf-v5-u-mt-0-on-md pf-v5-u-ml-md pf-v5-u-ml-0-on-md"
+              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"
             >
               <p className="ws-org-pfsite-footer-menu-list-title">
                 STAY IN TOUCH
@@ -121,7 +121,7 @@ export const Footer = () => (
                       className="ws-org-pfsite-footer-menu-link"
                       to="//join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ"
                       target="top"
-                      aria-label="Join the PatternFly 4 Slack"
+                      aria-label="Join the PatternFly Slack"
                     >
                       Slack
                     </Link>
@@ -139,9 +139,9 @@ export const Footer = () => (
                   <li className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="//redhat.com/mailman/listinfo/patternfly"
+                      to="https://www.redhat.com/dynamic-form/instance/934b1674-bc8a-4a13-8c9d-d19abcceb263"
                       target="top"
-                      aria-label="Join the PatternFly 4 mailing list"
+                      aria-label="Join the PatternFly mailing list"
                     >
                       Mailing list
                     </Link>
@@ -151,7 +151,7 @@ export const Footer = () => (
                       className="ws-org-pfsite-footer-menu-link"
                       to="//medium.com/patternfly"
                       target="top"
-                      aria-label="Read the PatternFly 4 blog"
+                      aria-label="Read the PatternFly blog"
                     >
                       PatternFly Medium
                     </Link>
@@ -162,10 +162,10 @@ export const Footer = () => (
           </Grid>
         </GridItem>
         <GridItem sm={12} md={4}>
-          <Grid className="pf-v5-u-pt-xl ws-org-pfsite-l-footer-column">
-            <GridItem className="pf-v5-u-px-xl">
+          <Grid className="pf-v6-u-pt-xl ws-org-pfsite-l-footer-column">
+            <GridItem className="pf-v6-u-px-xl">
               <Link
-                className="pf-v5-c-page__header-brand-link pf-v5-c-brand ws-org-pfsite-footer-menu-about-logo pf-v5-u-pb-md"
+                className="pf-v6-c-page__header-brand-link pf-v6-c-brand ws-org-pfsite-footer-menu-about-logo pf-v6-u-pb-md"
                 to="/"
               >
                 <Brand
@@ -176,16 +176,16 @@ export const Footer = () => (
                   <source srcSet={logo} />
                 </Brand>
               </Link>
-              <Text className="ws-org-pfsite-footer-menu-about-description">
+              <Content component="p" className="ws-org-pfsite-footer-menu-about-description">
                 PatternFly is an open source design system built to drive
                 consistency and unify teams. From documentation and components
                 to code examples and tutorials, PatternFly is a place where
                 design and development can thrive. We’re on a mission to help
                 teams build consistent, accessible, and scalable enterprise
                 product experiences—the open source way.
-              </Text>
+              </Content>
             </GridItem>
-            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v5-u-px-xl">
+            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v6-u-px-xl">
               <Link
                 to="//github.com/patternfly"
                 target="top"
@@ -194,9 +194,9 @@ export const Footer = () => (
                 <GithubIcon />
               </Link>
               <Link
-                to="//twitter.com/patternfly"
+                to="//x.com/patternfly"
                 target="top"
-                aria-label="Link to PatternFly Twitter page"
+                aria-label="Link to PatternFly X page"
               >
                 <TwitterIcon />
               </Link>
@@ -209,7 +209,7 @@ export const Footer = () => (
       key="footer-2"
       className="ws-org-pfsite-l-footer-dark pf-m-no-fill"
     >
-      <Grid className="pf-v5-u-py-xl-on-sm pf-v5-u-py-0-on-md pf-v5-u-align-items-center">
+      <Grid className="pf-v6-u-py-xl-on-sm pf-v6-u-py-0-on-md pf-v6-u-align-items-center">
         <GridItem md={2} mdOffset={1}>
           <Link
             to="//www.redhat.com"
@@ -228,7 +228,7 @@ export const Footer = () => (
             Copyright &copy; 2014-{new Date().getFullYear()} Red Hat, Inc.
           </span>
         </GridItem>
-        <GridItem md={4} lg={5} className="pf-v5-u-ml-xl-on-xl">
+        <GridItem md={4} lg={5} className="pf-v6-u-ml-xl-on-xl">
           <Link
             to="//www.redhat.com/en/about/privacy-policy"
             target="top"

package/components/gdprBanner/gdprBanner.css

@@ -8,7 +8,4 @@
 
 #ws-gdpr-banner {
   max-width: 95vw;
-  flex-wrap: nowrap;
-  background: var(--pf-v5-global--BackgroundColor--100);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--Color--100);
 }

package/components/gdprBanner/gdprBanner.js

@@ -1,31 +1,37 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Panel, PanelMain, PanelMainBody, Flex, FlexItem, Button } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import './gdprBanner.css';
 
 export const GdprBanner = () => {
   const initialBannerOpen = typeof window !== 'undefined' && window.localStorage && !localStorage.getItem('gdpr-banner-closed');
   const [ isBannerOpen, setBannerOpen ] = React.useState(initialBannerOpen);
-  
+
   const closeBanner = () => {
     localStorage.setItem('gdpr-banner-closed', 'true');
     setBannerOpen(false);
   }
 
   return !isBannerOpen ? null : (
-    <section aria-label="Cookies on PatternFly" className="ws-gdpr-banner-container pf-v5-l-flex">
-      <div id="ws-gdpr-banner" className="pf-v5-l-flex pf-v5-u-py-md pf-m-align-items-center">
-        <p id="ws-gdpr-banner-text" className="pf-v5-u-ml-xl">
-          We use cookies on our websites to deliver our online services.
-          Details about how we use cookies and how you may disable them are set out in our <a href="//www.redhat.com/en/about/privacy-policy">Privacy Statement</a>.
-          By using this website you agree to our use of cookies.
-        </p>
-        <div className="pf-m-align-self-flex-start">
-          <Button variant="plain" aria-label="Close banner" onClick={closeBanner}>
-            <TimesIcon />
-          </Button>
-        </div>
-      </div>
-    </section>
+    <Flex className="ws-gdpr-banner-container">
+    <Panel variant="bordered" className="pf-m-raised" id="ws-gdpr-banner">
+      <PanelMain>
+        <PanelMainBody>
+          <Flex flexWrap={{default: 'nowrap'}} alignItems={{default: 'alignItemsFlexStart'}}>
+            <FlexItem className="pf-v6-u-ml-xl">
+              We use cookies on our websites to deliver our online services.
+              Details about how we use cookies and how you may disable them are set out in our <a href="//www.redhat.com/en/about/privacy-policy">Privacy Statement</a>.
+              By using this website you agree to our use of cookies.
+            </FlexItem>
+            <FlexItem>
+              <Button variant="plain" aria-label="Close banner" onClick={closeBanner}>
+                <TimesIcon />
+              </Button>
+            </FlexItem>
+          </Flex>
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
+    </Flex>
   );
 }

package/components/inlineAlert/inlineAlert.js

@@ -9,7 +9,7 @@ export const InlineAlert = ({
   <Alert
     variant={variant}
     title={title}
-    className="pf-v5-u-my-md"
+    className="pf-v6-u-my-md"
     style={{ marginBottom: '1rem' }}
     isInline
     component="h2"

package/components/link/link.js

@@ -2,16 +2,19 @@ import React from 'react';
 import { Link as ReachLink, navigate } from '@reach/router';
 import { getAsyncComponent } from '../../routes';
 
-const Promiseany = (Promise.any || function ($) {
-  return new Promise(function (D, E, A, L) {
-    A = [];
-    L = $.map(function ($, i) {
-      return Promise.resolve($).then(D, function (O) {
-        return ((A[i] = O), --L) || E({errors: A});
-      });
-    }).length;
-  });
-}).bind(Promise);
+const Promiseany = (
+  Promise.any ||
+  function ($) {
+    return new Promise(function (D, E, A, L) {
+      A = [];
+      L = $.map(function ($, i) {
+        return Promise.resolve($).then(D, function (O) {
+          return ((A[i] = O), --L) || E({ errors: A });
+        });
+      }).length;
+    });
+  }
+).bind(Promise);
 
 export const Link = ({
   href,
@@ -23,7 +26,7 @@ export const Link = ({
   let preloadPromise;
   let url = href || to || '';
   if (url.startsWith('#') && !onClick) {
-    onClick = ev => {
+    onClick = (ev) => {
       ev.preventDefault(); // Don't use client-side routing
       // Chrome does not jump until ALL network requests finish.
       // We have to force it to...
@@ -37,8 +40,7 @@ export const Link = ({
   }
   if (url.includes('//') || url.startsWith('#')) {
     return <a href={url} onClick={onClick} {...props} />;
-  }
-  else if (url.startsWith('/')) {
+  } else if (url.startsWith('/')) {
     if (!process.env.PRERENDER) {
       const Component = getAsyncComponent(url);
       if (Component) {
@@ -48,14 +50,17 @@ export const Link = ({
           onMouseOver();
         };
         // Wait up to an extra 500ms on click before showing 'Loading...'
-        props.onClick = ev => {
-          if (!(ev.ctrlKey || ev.metaKey)) { // avoid disallowing cmnd/ctrl+click opening in new tab
+        props.onClick = (ev) => {
+          if (!(ev.ctrlKey || ev.metaKey)) {
+            // avoid disallowing cmnd/ctrl+click opening in new tab
             ev.preventDefault();
-            document.querySelector("#ws-page-main").scrollTo({top: 0}); // scroll to top of page
+            document
+              .querySelector('.pf-v6-c-page__main-container')
+              .scrollTo({ top: 0 }); // scroll to top of page
             if (typeof window !== 'undefined' && url !== location.pathname) {
               Promiseany([
                 preloadPromise,
-                new Promise(res => setTimeout(res, 500))
+                new Promise((res) => setTimeout(res, 500)),
               ]).then(() => navigate(url));
             }
           }
@@ -65,4 +70,4 @@ export const Link = ({
   }
 
   return <ReachLink to={url} {...props} />;
-}
+};

package/components/propsTable/propsTable.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Badge } from "@patternfly/react-core";
+import { Label } from "@patternfly/react-core";
 import {
   Table,
   Caption,
@@ -17,10 +17,10 @@ import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibili
 
 export const PropsTable = ({ title, description, rows, allPropComponents }) => (
   <React.Fragment>
-    <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
-    <Table className="pf-v5-u-mt-md pf-v5-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
+    <AutoLinkHeader headingLevel="h3">{title}</AutoLinkHeader>
+    <Table className="pf-v6-u-mt-md pf-v6-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
       <Caption>
-        {description && <div className="pf-v5-u-mb-md">{description}</div>}
+        {description && <div className="pf-v6-u-mb-md">{description}</div>}
         <div>
           <span className="ws-prop-required">*</span>required
         </div>
@@ -62,12 +62,16 @@ export const PropsTable = ({ title, description, rows, allPropComponents }) => (
                     ""
                   )}
                   {row.beta && (
-                    <Badge
-                      key={`${row.name}-${idx}`}
-                      className="ws-beta-badge pf-v5-u-ml-sm"
-                    >
-                      Beta
-                    </Badge>
+                    <>
+                      {" "}
+                      <Label
+                        key={`${row.name}-${idx}`}
+                        color="blue"
+                        isCompact
+                      >
+                        Beta
+                      </Label>
+                    </>
                   )}
                 </TableText>
               </Td>

package/components/sectionGallery/TextSummary.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { convertToReactComponent } from "@patternfly/ast-helpers";
-import { TextContent, Text } from "@patternfly/react-core";
+import { Content } from "@patternfly/react-core";
 
 // convert summary text from string to jsx, remove links
 export const SummaryComponent = ({ id, itemsData }) => {
@@ -22,10 +22,10 @@ export const TextSummary = ({ id, itemsData }) => {
   }
 
   return (
-    <TextContent>
-      <Text>
+    <Content>
+      <Content component="p">
         <SummaryComponent id={id} itemsData={itemsData} />
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   )
 };

package/components/sectionGallery/sectionDataListLayout.js

@@ -1,51 +1,97 @@
-import React from "react";
-import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, Split, SplitItem, TextContent, Text, TextVariants, Label } from "@patternfly/react-core";
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCell,
+  Split,
+  SplitItem,
+  Content,
+  ContentVariants,
+  Label,
+} from '@patternfly/react-core';
 import { Link } from '../link/link';
 import { TextSummary } from './TextSummary';
 
-export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, hasListImages }) => {
+export const SectionDataListLayout = ({
+  galleryItems,
+  layoutView,
+  hasListText,
+  hasListImages,
+}) => {
   if (layoutView !== 'list') {
     return null;
   }
-  
+
   return (
     <DataList onSelectDataListItem={() => {}}>
-      {galleryItems.map(({ idx, slug, illustration, itemName, title, isBeta, isDeprecated, isDemo, id, galleryItemsData }) => (
-        <Link to={slug} key={idx} className="ws-section-gallery-item">
-          <DataListItem>
-            <DataListItemRow>
-              <DataListItemCells dataListCells={[
-                hasListImages && illustration && (
-                  <DataListCell width={1} key="illustration">
-                    <div>
-                      <img src={illustration} alt={`${itemName} illustration`} />
-                    </div>
-                  </DataListCell>
-                ),
-                <DataListCell width={5} key="text-description">
-                  <Split className={ hasListText ? "pf-v5-u-mb-md" : null }>
-                    <SplitItem isFilled>
-                      <TextContent>
-                        <Text component={TextVariants.h2}>
-                          <span>
-                            {title}
-                          </span>
-                        </Text>
-                      </TextContent>
-                    </SplitItem>  
-                    <SplitItem>
-                      {isBeta && (<Label color="blue" isCompact>Beta</Label>)}
-                      {!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
-                      {!isBeta && !isDeprecated && isDemo && (<Label color="purple" isCompact>Demo</Label>)}
-                    </SplitItem>
-                  </Split>
-                  { hasListText && <TextSummary id={id} itemsData={galleryItemsData} /> }
-                </DataListCell>
-              ]} />
-            </DataListItemRow>
-          </DataListItem>
-        </Link>
-      ))}
+      {galleryItems.map(
+        ({
+          idx,
+          slug,
+          illustration,
+          itemName,
+          title,
+          isBeta,
+          isDeprecated,
+          isDemo,
+          id,
+          galleryItemsData,
+        }) => (
+          <Link to={slug} key={idx} className="ws-section-gallery-item">
+            <DataListItem>
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    hasListImages && illustration && (
+                      <DataListCell width={1} key="illustration">
+                        <div>
+                          <img
+                            src={illustration}
+                            alt={`${itemName} illustration`}
+                          />
+                        </div>
+                      </DataListCell>
+                    ),
+                    <DataListCell width={5} key="text-description">
+                      <Split className={hasListText ? 'pf-v6-u-mb-md' : null}>
+                        <SplitItem isFilled>
+                          <Content>
+                            <Content component={ContentVariants.h2}>
+                              <span>{title}</span>
+                            </Content>
+                          </Content>
+                        </SplitItem>
+                        <SplitItem>
+                          {isBeta && (
+                            <Label color="blue" isCompact>
+                              Beta
+                            </Label>
+                          )}
+                          {!isBeta && isDeprecated && (
+                            <Label color="grey" isCompact>
+                              Deprecated
+                            </Label>
+                          )}
+                          {!isBeta && !isDeprecated && isDemo && (
+                            <Label color="purple" isCompact>
+                              Demo
+                            </Label>
+                          )}
+                        </SplitItem>
+                      </Split>
+                      {hasListText && (
+                        <TextSummary id={id} itemsData={galleryItemsData} />
+                      )}
+                    </DataListCell>,
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+          </Link>
+        )
+      )}
     </DataList>
-  )
+  );
 };