chore(docs): fix console warnings, codesandbox builds

packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { data } from '../examples/realTestData';
+import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import {
   Badge,
@@ -22,7 +22,7 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 
-const ComplexToolbarLogViewer = () => {
+export const ComplexToolbarLogViewer = () => {
   const dataSources = {
     'container-1': { type: 'C', id: 'data1' },
     'container-2': { type: 'D', id: 'data2' },
@@ -273,5 +273,3 @@ const ComplexToolbarLogViewer = () => {
     />
   );
 };
-
-export default ComplexToolbarLogViewer;

packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/LogViewer.md

@@ -4,7 +4,7 @@ section: extensions
 source: react-demos
 ---
 
-import { data } from '../examples/realTestData';
+import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import {
 Badge,

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/ANSIColorLogViewer.jsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import { data } from './realTestData.js';
+import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer } from '@patternfly/react-log-viewer';
 
-const ANSIColorLogViewer = () => (
-    <LogViewer
-      hasLineNumbers={false}
-      height={300}
-      data={data.data4}
-      theme="dark"
-    />
-  );
-
-  export default ANSIColorLogViewer;
+export const ANSIColorLogViewer = () => (
+  <LogViewer
+    hasLineNumbers={false}
+    height={300}
+    data={data.data4}
+    theme="dark"
+  />
+);

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicLogViewer.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { data } from './realTestData';
+import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer } from '@patternfly/react-log-viewer';
 import { Checkbox } from '@patternfly/react-core';
 
-const BasicLogViewer = () => {
+export const BasicLogViewer = () => {
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);
 
   return (
@@ -20,5 +20,3 @@ const BasicLogViewer = () => {
     </React.Fragment>
   );
 };
-
-export default BasicLogViewer;

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicSearchLogViewer.jsx

@@ -1,21 +1,19 @@
 import React from 'react';
-import { data } from './realTestData';
+import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import { Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
 
-const BasicSearchLogViewer = () => (
-    <LogViewer
-      data={data.data}
-      toolbar={
-        <Toolbar>
-          <ToolbarContent>
-            <ToolbarItem>
-              <LogViewerSearch placeholder="Search value" />
-            </ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-      }
-    />
-  );
-
-export default BasicSearchLogViewer;
+export const BasicSearchLogViewer = () => (
+  <LogViewer
+    data={data.data}
+    toolbar={
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem>
+            <LogViewerSearch placeholder="Search value" />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    }
+  />
+);

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/CustomControlLogViewer.jsx

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
 import React from 'react';
-import { data } from './realTestData';
+import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import { Toolbar, ToolbarContent, ToolbarItem, Button, Checkbox } from '@patternfly/react-core';
 
-const CustomControlLogViewer = () => {
+export const CustomControlLogViewer = () => {
   const [isTextWrapped, setIsTextWrapped] = React.useState(false);
   const onActionClick = () => {
     console.log('clicked test action button');
@@ -43,5 +43,3 @@ const CustomControlLogViewer = () => {
     />
   );
 };
-
-export default CustomControlLogViewer;

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/FooterComponentLogViewer.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { data } from './realTestData';
+import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer } from '@patternfly/react-log-viewer';
 import { Button } from '@patternfly/react-core';
 
-const FooterComponentLogViewer = () => {
+export const FooterComponentLogViewer = () => {
   const logViewerRef = React.useRef();
   const FooterButton = () => {
     const handleClick = () => {
@@ -23,5 +23,3 @@ const FooterComponentLogViewer = () => {
     />
   );
 };
-
-export default FooterComponentLogViewer;

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/HeaderComponentLogViewer.jsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { data } from './realTestData';
+import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 import { LogViewer } from '@patternfly/react-log-viewer';
 import { Banner } from '@patternfly/react-core';
 
-const HeaderComponentLogViewer = () => (
-    <LogViewer
-      hasLineNumbers={false}
-      height={300}
-      data={data.data}
-      theme="dark"
-      header={<Banner>5019 lines</Banner>}
-    />
-  );
-
-export default HeaderComponentLogViewer;
+export const HeaderComponentLogViewer = () => (
+  <LogViewer
+    hasLineNumbers={false}
+    height={300}
+    data={data.data}
+    theme="dark"
+    header={<Banner>5019 lines</Banner>}
+  />
+);

packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md

@@ -16,7 +16,7 @@ propComponents: [LogViewer, LogViewerSearch]
 
 import { LogViewer, LogViewerSearch, LogViewerContext } from '@patternfly/react-log-viewer';
 import { Button, Checkbox, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
-import { data } from './realTestData';
+import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
 
 ## Examples
 

packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import srcImport0 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewer.png';
-import srcImport1 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewerdark.png';
-import srcImport2 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewerclear.png';
-import srcImport3 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewercog.png';
-import srcImport4 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewersearch.png';
+import srcImport5 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewer.png';
+import srcImport6 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewerdark.png';
+import srcImport7 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewerclear.png';
+import srcImport8 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewercog.png';
+import srcImport9 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewersearch.png';
 const pageData = {
   "id": "Log viewer",
   "section": "extensions",
@@ -26,7 +26,7 @@ pageData.examples = {
 
 const Component = () => (
   <React.Fragment>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
       {`A `}
       <strong {...{"className":""}}>
         {`log viewer`}
@@ -36,52 +36,52 @@ const Component = () => (
     <AutoLinkHeader {...{"id":"light-theme-log-viewer","headingLevel":"h2","className":"ws-title ws-h2"}}>
       {`Light theme log viewer`}
     </AutoLinkHeader>
-    <img src={srcImport0} width={srcImport0.width} height={srcImport0.height} {...{"alt":"Log Viewer","className":"ws-img "}}>
+    <img src={srcImport5} width={srcImport5.width} height={srcImport5.height} {...{"alt":"Log Viewer","className":"ws-img "}}>
     </img>
-    <ol {...{"className":"pf-v6-c-content--ol ws-ol "}}>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+    <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         <strong {...{"className":""}}>
           {`Type of log dropdown menu:`}
         </strong>
         {` Allow users to switch between different types of logs.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         <strong {...{"className":""}}>
           {`Search bar:`}
         </strong>
         {` Use to look up historical logs. The results will be highlighted in the log.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         <strong {...{"className":""}}>
           {`Pause button:`}
         </strong>
         {` Play and stop your log content viewing, instead of scrolling through.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         <strong {...{"className":""}}>
           {`Clear log:`}
         </strong>
         {` Clear the displayed log output.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         <strong {...{"className":""}}>
           {`Cog:`}
         </strong>
         {` House settings such as wrapping lines, showing timestamps, and displaying line numbers.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         <strong {...{"className":""}}>
           {`Export:`}
         </strong>
         {` Export log content.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         <strong {...{"className":""}}>
           {`Download:`}
         </strong>
         {` Download the log file.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         <strong {...{"className":""}}>
           {`Fullscreen:`}
         </strong>
@@ -91,29 +91,29 @@ const Component = () => (
     <AutoLinkHeader {...{"id":"dark-theme-log-viewer","headingLevel":"h2","className":"ws-title ws-h2"}}>
       {`Dark theme log viewer`}
     </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
       {`We recommend using the light theme editor by default, but there is also a dark theme log viewer
 available. All log viewer functionality remains the same whether a light or dark theme is used.`}
     </p>
-    <img src={srcImport1} width={srcImport1.width} height={srcImport1.height} {...{"alt":"Dark theme log viewer","className":"ws-img "}}>
+    <img src={srcImport6} width={srcImport6.width} height={srcImport6.height} {...{"alt":"Dark theme log viewer","className":"ws-img "}}>
     </img>
     <AutoLinkHeader {...{"id":"usability","headingLevel":"h2","className":"ws-title ws-h2"}}>
       {`Usability`}
     </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
       {`Use a log viewer when:`}
     </p>
-    <ul {...{"className":"pf-v6-c-content--ul ws-ul "}}>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         {`The user can manipulate 1 large log file or multiple log files at the same time.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         {`You want to create a more readable and accessible environment for the user.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         {`The user may actively search for specific logs within a large log file.`}
       </li>
-      <li {...{"className":"pf-v6-c-content--li ws-li "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
         {`The user shares files frequently with other users or teams.`}
       </li>
     </ul>
@@ -123,26 +123,26 @@ available. All log viewer functionality remains the same whether a light or dark
     <AutoLinkHeader {...{"id":"with-popover","headingLevel":"h3","className":"ws-title ws-h3"}}>
       {`With popover`}
     </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
       {`The clear log button opens up a popover with further options, to prevent a user from accidentally clearing their log content.`}
     </p>
-    <img src={srcImport2} width={srcImport2.width} height={srcImport2.height} {...{"alt":"Clear this log popover open on a Log viewer","className":"ws-img "}}>
+    <img src={srcImport7} width={srcImport7.width} height={srcImport7.height} {...{"alt":"Clear this log popover open on a Log viewer","className":"ws-img "}}>
     </img>
     <AutoLinkHeader {...{"id":"with-dropdown-drilldown-and-search-expanded","headingLevel":"h3","className":"ws-title ws-h3"}}>
       {`With dropdown, drilldown, and search expanded`}
     </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
       {`The cog icon in the log viewer toolbar allows you to store content options such as timestamps or line numbers for better orientation within the log viewer.`}
     </p>
-    <img src={srcImport3} width={srcImport3.width} height={srcImport3.height} {...{"alt":"Cog options open on a Log viewer","className":"ws-img "}}>
+    <img src={srcImport8} width={srcImport8.width} height={srcImport8.height} {...{"alt":"Cog options open on a Log viewer","className":"ws-img "}}>
     </img>
     <AutoLinkHeader {...{"id":"with-search-results","headingLevel":"h3","className":"ws-title ws-h3"}}>
       {`With search results`}
     </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
       {`The search bar provides highlighted search results for better findability within a log viewer’s content.`}
     </p>
-    <img src={srcImport4} width={srcImport4.width} height={srcImport4.height} {...{"alt":"Log Viewer with highlighted search results","className":"ws-img "}}>
+    <img src={srcImport9} width={srcImport9.width} height={srcImport9.height} {...{"alt":"Log Viewer with highlighted search results","className":"ws-img "}}>
     </img>
   </React.Fragment>
 );