@patternfly/documentation-framework 2.0.0-alpha.4 → 2.0.0-alpha.40

package/components/example/example.css

@@ -3,52 +3,52 @@
 }
 
 .ws-example {
-  margin-top: var(--pf-global--spacer--lg);
-  margin-bottom: var(--pf-global--spacer--lg);
+  margin-top: var(--pf-v5-global--spacer--lg);
+  margin-bottom: var(--pf-v5-global--spacer--lg);
 }
 
 .ws-example > .ws-example-header {
-  padding: var(--pf-global--spacer--md);
+  padding: var(--pf-v5-global--spacer--md);
 }
 
 .ws-example-header > .ws-example-heading:not(:last-child) {
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
 
-.ws-code-editor:not(.ws-example-code-expanded) > .pf-c-code-editor__header::before {
-  --pf-c-code-editor__header--before--BorderBottomWidth: 0;
+.ws-code-editor:not(.ws-example-code-expanded) > .pf-v5-c-code-editor__header::before {
+  --pf-v5-c-code-editor__header--before--BorderBottomWidth: 0;
 }
 
 .ws-code-editor-control {
-  --pf-c-button--m-control--BackgroundColor: transparent;
-  --pf-c-button--m-control--active--BackgroundColor: transparent;
-  --pf-c-button--m-control--focus--BackgroundColor: transparent;
-  --pf-c-button--m-control--hover--BackgroundColor: transparent;
+  --pf-v5-c-button--m-control--BackgroundColor: transparent;
+  --pf-v5-c-button--m-control--active--BackgroundColor: transparent;
+  --pf-v5-c-button--m-control--focus--BackgroundColor: transparent;
+  --pf-v5-c-button--m-control--hover--BackgroundColor: transparent;
 }
 
-.ws-code-editor-control.pf-c-button {
-  --pf-c-button--after--BorderWidth: 0;
+.ws-code-editor-control.pf-v5-c-button {
+  --pf-v5-c-button--after--BorderWidth: 0;
 }
 
 .ws-preview {
-  padding: var(--pf-global--spacer--md);
-  background-color: var(--pf-global--BackgroundColor--100);
-  border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--300);
+  padding: var(--pf-v5-global--spacer--md);
+  background-color: var(--pf-v5-global--BackgroundColor--100);
+  border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
   transition: width .2s ease-in-out;
 }
 
 .ws-core-c-page.ws-preview > .ws-preview-html,
-.ws-react-c-page.ws-preview > .pf-c-page {
+.ws-react-c-page.ws-preview > .pf-v5-c-page {
   overflow: hidden;
 }
 
 .ws-editor {
-  font-size: var(--pf-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
 }
 
 .ws-editor .token.punctuation,
 .ws-editor .token.operator {
-  color: var(--pf-global--danger-color--100);
+  color: var(--pf-v5-global--danger-color--100);
 }
 
 .ws-preview__thumbnail-link {
@@ -100,22 +100,22 @@
   color: rgba(255,255,255,.4);
 }
 
-.pf-c-badge.ws-beta-badge {
-  --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-badge--m-unread--Color: var(--pf-global--primary-color--100);
-  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--primary-color--100);
+.pf-v5-c-badge.ws-beta-badge {
+  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--100);
+  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--primary-color--100);
 }
 
 .ws-prop-required {
-  color: var(--pf-global--danger-color--100);
+  color: var(--pf-v5-global--danger-color--100);
 }
 
 .ws-theme-switch-full-page {
   position: fixed;
   right: 0;
   bottom: 0;
-  padding: var(--pf-global--spacer--md);
-  z-index: var(--pf-global--ZIndex--2xl);
+  padding: var(--pf-v5-global--spacer--md);
+  z-index: var(--pf-v5-global--ZIndex--2xl);
 }
 
 .ws-theme-switch-full-page::before {
@@ -125,11 +125,11 @@
   content: "";
   width: 100%;
   height: 100%;
-  background-color: var(--pf-global--BackgroundColor--100);
+  background-color: var(--pf-v5-global--BackgroundColor--100);
   opacity: 0.8;
-  box-shadow: var(--pf-global--BoxShadow--sm);
+  box-shadow: var(--pf-v5-global--BoxShadow--sm);
 }
 
-.pf-theme-dark .ws-theme-switch-full-page::before {
-  background-color: var(--pf-global--BackgroundColor--300);
+.pf-v5-theme-dark .ws-theme-switch-full-page::before {
+  background-color: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/example/example.js

@@ -119,7 +119,7 @@ export const Example = ({
   if (lang === 'html') {
     livePreview = (
       <div
-        className={css('ws-preview-html', isFullscreenPreview && 'pf-u-h-100')}
+        className={css('ws-preview-html', isFullscreenPreview && 'pf-v5-u-h-100')}
         dangerouslySetInnerHTML={{ __html: editorCode }}
       />
     );
@@ -152,12 +152,12 @@ export const Example = ({
 
   if (isFullscreenPreview) {
     return (
-      <div id={previewId} className={css(className, 'pf-u-h-100')}>
+      <div id={previewId} className={css(className, 'pf-v5-u-h-100')}>
         {livePreview}
         {hasDarkThemeSwitcher && (
           <div className="ws-theme-switch-full-page">
             <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
-            document.querySelector('html').classList.toggle('pf-theme-dark')} />
+            document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
           </div>
         )}
       </div>
@@ -178,7 +178,7 @@ export const Example = ({
     <div className="ws-example">
       <div className="ws-example-header">
         <AutoLinkHeader
-          metaText={isBeta && <Badge className="ws-beta-badge pf-u-ml-xs">Beta</Badge>}
+          metaText={isBeta && <Badge className="ws-beta-badge pf-v5-u-ml-xs">Beta</Badge>}
           size="h4"
           headingLevel="h3"
           className="ws-example-heading"

package/components/footer/footer.css

@@ -1,11 +1,11 @@
-.ws-org-pfsite-l-footer.pf-c-page__main-section {
+.ws-org-pfsite-l-footer.pf-v5-c-page__main-section {
   font-family: "RedHatText";
   font-weight: 300;
   background-color: #1a1a1a !important;
-  --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--xl);
-  --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--2xl);
-  --pf-c-page__main-section--PaddingBottom: var(--pf-global--spacer--2xl);
-  --pf-c-page__main-section--PaddingLeft: var(--pf-global--spacer--2xl);
+  --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);
   /* 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-global--spacer--md);
-  color: var(--pf-global--Color--light-100) !important;
+  margin-right: var(--pf-v5-global--spacer--md);
+  color: var(--pf-v5-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-global--spacer--md);
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-top: var(--pf-v5-global--spacer--md);
+  margin-bottom: var(--pf-v5-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-global--Color--light-100);
+  color: var(--pf-v5-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-c-page .pf-c-page__main-section.ws-org-pfsite-l-footer-dark {
+.pf-v5-c-page .pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark {
   /* Hide long overflowing tocs */
   z-index: 1;
 }
-.pf-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
+.pf-v5-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-global--spacer--sm);
-  padding-left: var(--pf-global--spacer--sm);
-  border-right: var(--pf-global--BorderWidth--sm) solid #d2d2d2;
+  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;
   font-weight: 300;
   color: #d2d2d2;
   text-decoration: underline;

package/components/footer/footer.js

@@ -19,12 +19,12 @@ export const Footer = () => (
           sm={12}
           md={6}
           mdOffset={1}
-          className="pf-u-mb-lg pf-u-mb-0-on-sm"
+          className="pf-v5-u-mb-lg pf-v5-u-mb-0-on-sm"
         >
-          <Grid className="pf-u-py-xl">
-            <GridItem sm={6} md={4} className="pf-u-ml-md pf-u-ml-0-on-md pf-u-mb-xl pf-u-mb-0-on-md">
+          <Grid className="pf-v5-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">
               <p
-                className="pf-c-title ws-org-pfsite-footer-menu-list-title"
+                className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title"
               >
                 QUICKLINKS
               </p>
@@ -82,10 +82,10 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-u-mt-lg pf-u-mt-0-on-sm pf-u-ml-md pf-u-ml-0-on-md pf-u-mb-xl pf-u-mb-0-on-md"
+              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"
             >
               <p
-                className="pf-c-title ws-org-pfsite-footer-menu-list-title"
+                className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title"
               >
                 CONTRIBUTE
               </p>
@@ -125,7 +125,7 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-u-mt-lg pf-u-mt-0-on-md pf-u-ml-md pf-u-ml-0-on-md"
+              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"
             >
               <p
                 className="ws-org-pfsite-footer-menu-list-title"
@@ -180,10 +180,10 @@ export const Footer = () => (
           </Grid>
         </GridItem>
         <GridItem sm={12} md={4}>
-          <Grid className="pf-u-pt-xl ws-org-pfsite-l-footer-column">
-            <GridItem className="pf-u-px-xl">
+          <Grid className="pf-v5-u-pt-xl ws-org-pfsite-l-footer-column">
+            <GridItem className="pf-v5-u-px-xl">
               <Link
-                className="pf-c-page__header-brand-link pf-c-brand ws-org-pfsite-footer-menu-about-logo pf-u-pb-md"
+                className="pf-v5-c-page__header-brand-link pf-v5-c-brand ws-org-pfsite-footer-menu-about-logo pf-v5-u-pb-md"
                 to="/"
               >
                 <Brand src={logo} alt="Patternfly Logo" />
@@ -192,7 +192,7 @@ export const Footer = () => (
                 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.
               </p>
             </GridItem>
-            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-u-px-xl">
+            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v5-u-px-xl">
               <Link
                 to="//github.com/patternfly"
                 target="top"
@@ -213,7 +213,7 @@ export const Footer = () => (
       </Grid>
     </PageSection>
     <PageSection key="footer-2" className="ws-org-pfsite-l-footer-dark pf-m-no-fill">
-      <Grid className="pf-u-py-xl-on-sm pf-u-py-0-on-md pf-u-align-items-center">
+      <Grid className="pf-v5-u-py-xl-on-sm pf-v5-u-py-0-on-md pf-v5-u-align-items-center">
         <GridItem md={2} mdOffset={1}>
           <Link
             to="//www.redhat.com"
@@ -233,7 +233,7 @@ export const Footer = () => (
             Copyright &copy; 2022 Red Hat, Inc.
           </span>
         </GridItem>
-        <GridItem md={4} lg={5} className="pf-u-ml-xl-on-xl">
+        <GridItem md={4} lg={5} className="pf-v5-u-ml-xl-on-xl">
           <Link
             to="//www.redhat.com/en/about/privacy-policy"
             target="top"

package/components/functionsTable/functionsTable.js

@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  Table,
+  Caption,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+} from "@patternfly/react-table";
+
+export const FunctionsTable = ({ functionDescriptions }) => {
+  const columnNames = {
+    name: "Function name",
+    description: "Description",
+    signature: "Type signature",
+    defaultValues: "Default parameter values",
+  };
+
+  const formatDefaultValues = (parameters) =>
+    parameters.map((param) => `${param.name}: ${param.default}; `);
+
+  return (
+    <Table
+      aria-label="Function documentation table"
+      variant="compact"
+    >
+      <Caption>Table showing documentation for relevant functions</Caption>
+      <Thead>
+        <Tr>
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.signature}</Th>
+          <Th>{columnNames.defaultValues}</Th>
+          <Th>{columnNames.description}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {functionDescriptions.map((functionDescription) => (
+          <Tr key={functionDescription.functionName}>
+            <Td dataLabel={columnNames.name}>
+              {functionDescription.functionName}
+            </Td>
+            <Td dataLabel={columnNames.signature}>
+              {functionDescription.type}
+            </Td>
+            <Td dataLabel={columnNames.defaultValues}>
+              {formatDefaultValues(functionDescription.params)}
+            </Td>
+            <Td dataLabel={columnNames.description}>
+              {functionDescription.description}
+            </Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};

package/components/gdprBanner/gdprBanner.css

@@ -9,6 +9,6 @@
 #ws-gdpr-banner {
   max-width: 95vw;
   flex-wrap: nowrap;
-  background: var(--pf-global--BackgroundColor--100);
-  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--Color--100);
+  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

@@ -13,9 +13,9 @@ export const GdprBanner = () => {
   }
 
   return !isBannerOpen ? null : (
-    <div className="ws-gdpr-banner-container pf-l-flex">
-      <div id="ws-gdpr-banner" className="pf-l-flex pf-u-py-md pf-m-align-items-center">
-        <p id="ws-gdpr-banner-text" className="pf-u-ml-xl">
+    <div 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.

package/components/inlineAlert/inlineAlert.js

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

package/components/propsTable/propsTable.js

@@ -2,90 +2,96 @@ import React from "react";
 import { Badge } from "@patternfly/react-core";
 import {
   Table,
-  TableHeader,
-  TableBody,
-  cellWidth,
+  Caption,
+  Thead,
+  Th,
+  Tr,
+  Tbody,
+  Td,
+  TableText
 } from "@patternfly/react-table";
 import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
 import { PropTypeWithLinks } from "./propTypeWithLinks";
 import { css } from "@patternfly/react-styles";
 import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibility/accessibility";
 
-export const PropsTable = ({ title, description, rows, allPropComponents }) => {
-  const columns = [
-    { title: "Name", transforms: [cellWidth(20)] },
-    { title: "Type", transforms: [cellWidth(20)] },
-    { title: "Default", transforms: [] },
-    { title: "Description", transforms: [] },
-  ];
-
-  return (
-    <React.Fragment>
-      <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
-      <Table
-        className="pf-u-mt-md pf-u-mb-lg"
-        variant="compact"
-        aria-label={title}
-        caption={
-          <div>
-            {description && <div className="pf-u-mb-md">{description}</div>}
-            <div>
-              <span className="ws-prop-required">*</span>required
-            </div>
-          </div>
-        }
-        cells={columns}
-        gridBreakPoint="grid-lg"
-        rows={rows
-          // Sort required rows first
+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">
+      <Caption>
+        {description && <div className="pf-v5-u-mb-md">{description}</div>}
+        <div>
+          <span className="ws-prop-required">*</span>required
+        </div>
+      </Caption>
+      <Thead>
+        <Tr>
+          <Th width={20}>Name</Th>
+          <Th width={20}>Type</Th>
+          <Th>Default</Th>
+          <Th>Description</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows
           .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
-          .map((row, idx) => ({
-            cells: [
-              <div className="pf-m-break-word">
-                {row.deprecated && "Deprecated: "}
-                {row.name}
-                {row.required ? (
-                  <React.Fragment key={`${row.name}-required-prop`}>
-                    <span
-                      aria-hidden="true"
-                      key={`${row.name}-asterisk`}
-                      className="ws-prop-required"
-                    >
-                      *
-                    </span>
-                    <span
-                      key={`${row.name}-required`}
-                      className={css(accessibleStyles.screenReader)}
-                    >
-                      required
-                    </span>
-                  </React.Fragment>
-                ) : (
-                  ""
-                )}
-                {row.beta && (
-                  <Badge
-                    key={`${row.name}-${idx}`}
-                    className="ws-beta-badge pf-u-ml-sm"
+          .map((row, idx) => (
+            <Tr key={idx}>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.deprecated && "Deprecated: "}
+                  {row.name}
+                  {row.required ? (
+                    <React.Fragment key={`${row.name}-required-prop`}>
+                  <span
+                    aria-hidden="true"
+                    key={`${row.name}-asterisk`}
+                    className="ws-prop-required"
                   >
-                    Beta
-                  </Badge>
-                )}
-              </div>,
-              <div className="pf-m-break-word">
-                <PropTypeWithLinks
-                  type={row.type}
-                  allPropComponents={allPropComponents}
-                />
-              </div>,
-              <div className="pf-m-break-word">{row.defaultValue}</div>,
-              <div className="pf-m-break-word">{row.description}</div>,
-            ],
-          }))}
-      >
-        <TableHeader />
-        <TableBody />
-      </Table>
-    </React.Fragment>
-  );
-};
+                    *
+                  </span>
+                      <span
+                        key={`${row.name}-required`}
+                        className={css(accessibleStyles.screenReader)}
+                      >
+                    required
+                  </span>
+                    </React.Fragment>
+                  ) : (
+                    ""
+                  )}
+                  {row.beta && (
+                    <Badge
+                      key={`${row.name}-${idx}`}
+                      className="ws-beta-badge pf-v5-u-ml-sm"
+                    >
+                      Beta
+                    </Badge>
+                  )}
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  <PropTypeWithLinks
+                    type={row.type}
+                    allPropComponents={allPropComponents}
+                  />
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.defaultValue}
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.description}
+                </TableText>
+              </Td>
+            </Tr>
+          ))}
+      </Tbody>
+    </Table>
+  </React.Fragment>
+);

package/components/sectionGallery/sectionDataListLayout.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, Split, SplitItem, TextContent, Text, TextVariants, Label } from "@patternfly/react-core";
+import { Link } from '../link/link';
+import { convertToReactComponent } from "@patternfly/ast-helpers";
+
+// convert summary text in drawer from string to jsx
+const SummaryComponent = ({ id, itemsData }) => {
+  const itemDasherized = id.split(' ').join('-').toLowerCase();
+  const summary = itemsData?.[itemDasherized]?.summary;
+  if (!summary) {
+    return null;
+  }
+  // Remove anchor tags to avoid <a> in summary nested within <a> of Link card/datalistitem
+  const summaryNoLinks = summary.replace(/<Link[^>]*>([^<]+)<\/Link>/gm, '$1');
+  const { code } = convertToReactComponent(`<>${summaryNoLinks}</>`);
+  const getSummaryComponent = new Function('React', code);
+  return getSummaryComponent(React);
+}
+
+export const SectionDataListLayout = ({ galleryItems, layoutView }) => {
+  if (layoutView !== 'list') {
+    return null;
+  }
+  
+  return (
+    <DataList onSelectDataListItem={() => {}}>
+      {galleryItems.map(({ idx, slug, illustration, itemName, title, isBeta, id, galleryItemsData }) => (
+        <Link to={slug} key={idx} className="ws-section-gallery-item">
+          <DataListItem>
+            <DataListItemRow>
+              <DataListItemCells dataListCells={[
+                <DataListCell width={1} key="illustration">
+                  {illustration && (
+                    <div>
+                      <img src={illustration} alt={`${itemName} illustration`} />
+                    </div>
+                  )}
+                </DataListCell>,
+                <DataListCell width={5} key="text-description">
+                  <Split className="pf-v5-u-mb-md">
+                    <SplitItem isFilled>
+                      <TextContent>
+                        <Text component={TextVariants.h2}>
+                          <span>
+                            {title}
+                          </span>
+                        </Text>
+                      </TextContent>
+                    </SplitItem>  
+                    <SplitItem>
+                      {isBeta && <Label color="gold">Beta feature</Label>}
+                    </SplitItem>
+                  </Split>
+                  <TextContent>
+                    <Text>
+                      { id ? <SummaryComponent id={id} itemsData={galleryItemsData} /> : null }
+                    </Text>
+                  </TextContent>
+                </DataListCell>
+              ]} />
+            </DataListItemRow>
+          </DataListItem>
+        </Link>
+      ))}
+    </DataList>
+  )
+};