@patternfly/documentation-framework 6.0.0-alpha.9 → 6.0.0-alpha.91

package/components/example/example.js

@@ -1,6 +1,17 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useLocation } from '@reach/router';
-import { Button, CodeBlock, Flex, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core';
+import {
+  Button,
+  CodeBlock,
+  Flex,
+  CodeBlockCode,
+  debounce,
+  Label,
+  Switch,
+  Tooltip,
+  Stack,
+  StackItem
+} from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
 import * as reactCoreNextModule from '@patternfly/react-core/next';
 import * as reactCoreDeprecatedModule from '@patternfly/react-core/deprecated';
@@ -16,13 +27,13 @@ import {
   getReactParams,
   getExampleClassName,
   getExampleId,
-  liveCodeTypes
+  liveCodeTypes,
 } from '../../helpers';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
 import missingThumbnail from './missing-thumbnail.jpg';
 import { RtlContext } from '../../layouts';
 
-const errorComponent = err => <pre>{err.toString()}</pre>;
+const errorComponent = (err) => <pre>{err.toString()}</pre>;
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -34,7 +45,7 @@ class ErrorBoundary extends React.Component {
     errorInfo._suppressLogging = true;
     this.setState({
       error: error,
-      errorInfo: errorInfo
+      errorInfo: errorInfo,
     });
   }
 
@@ -94,15 +105,24 @@ export const Example = ({
   // md file location in node_modules, used to resolve relative import paths in examples
   relPath = '',
   // absolute url to hosted file
-  sourceLink = ''
+  sourceLink = '',
 }) => {
   if (isFullscreenPreview) {
     isFullscreen = false;
-    window.addEventListener('load', () => {
-      //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded
-      document.body.classList.add('page-loaded');
-    });
   }
+
+  //append a class to the document body on fullscreen examples to indicate to screenshot/automated visual regression tools that the page has loaded
+  const addPageLoadedClass = () => document.body.classList.add('page-loaded');
+  useEffect(() => {
+    if (!isFullscreenPreview) return;
+
+    document.readyState === 'complete'
+      ? addPageLoadedClass()
+      : window.addEventListener('load', addPageLoadedClass);
+
+    return () => window.removeEventListener('load', addPageLoadedClass);
+  }, []);
+
   if (!lang) {
     // Inline code
     return <code className="ws-code">{code}</code>;
@@ -124,20 +144,26 @@ export const Example = ({
     ...reactCoreModule,
     ...reactTableModule,
     ...(source === 'react-next' ? reactCoreNextModule : {}),
-    ...(source === 'react-deprecated' ? {...reactCoreDeprecatedModule, ...reactTableDeprecatedModule} : {})
+    ...(source === 'react-deprecated'
+      ? { ...reactCoreDeprecatedModule, ...reactTableDeprecatedModule }
+      : {}),
   };
 
   let livePreview = null;
   if (lang === 'html') {
     livePreview = (
       <div
-        className={css('ws-preview-html', isFullscreenPreview && 'pf-v5-u-h-100')}
+        className={css(
+          'ws-preview-html', // core uses this class name to apply styles to specific examples
+          isFullscreenPreview && 'pf-v6-u-h-100'
+        )}
         dangerouslySetInnerHTML={{ __html: editorCode }}
       />
     );
   } else {
     try {
-      const { code: transformedCode, hasTS } = convertToReactComponent(editorCode);
+      const { code: transformedCode, hasTS } =
+        convertToReactComponent(editorCode);
       if (hasTS) {
         lang = 'ts';
       } else {
@@ -147,7 +173,11 @@ export const Example = ({
       const componentNames = Object.keys(scope);
       const componentValues = Object.values(scope);
 
-      const getPreviewComponent = new Function('React', ...componentNames, transformedCode);
+      const getPreviewComponent = new Function(
+        'React',
+        ...componentNames,
+        transformedCode
+      );
       const PreviewComponent = getPreviewComponent(React, ...componentValues);
 
       livePreview = (
@@ -164,20 +194,37 @@ export const Example = ({
 
   if (isFullscreenPreview) {
     return (
-      <div id={previewId} className={css(className, 'pf-v5-u-h-100')}>
+      <div id={previewId} className={css(className, 'pf-v6-u-h-100')}>
         {livePreview}
         {(hasDarkThemeSwitcher || hasRTLSwitcher) && (
-          <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils pf-v5-m-dir-ltr ">
+          <Flex
+            direction={{ default: 'column' }}
+            gap={{ default: 'gapLg' }}
+            className="ws-full-page-utils pf-v6-m-dir-ltr "
+          >
             {hasDarkThemeSwitcher && (
-              <Switch id="ws-example-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
-              document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
+              <Switch
+                id="ws-example-theme-switch"
+                label="Dark theme"
+                defaultChecked={false}
+                onChange={() =>
+                  document
+                    .querySelector('html')
+                    .classList.toggle('pf-v6-theme-dark')
+                }
+              />
             )}
             {hasRTLSwitcher && (
-              <Switch id="ws-example-rtl-switch" label="RTL" defaultChecked={false} onChange={() => {
-                const html = document.querySelector('html');
-                const curDir = html.dir;
-                html.dir = (curDir !== 'rtl') ? 'rtl' : 'ltr';
-            }} />
+              <Switch
+                id="ws-example-rtl-switch"
+                label="RTL"
+                defaultChecked={false}
+                onChange={() => {
+                  const html = document.querySelector('html');
+                  const curDir = html.dir;
+                  html.dir = curDir !== 'rtl' ? 'rtl' : 'ltr';
+                }}
+              />
             )}
           </Flex>
         )}
@@ -188,82 +235,106 @@ export const Example = ({
   const codeBoxParams = getParameters(
     lang === 'html'
       ? getStaticParams(title, editorCode)
-      : getReactParams(title, editorCode, scope, lang, relativeImports, relPath, sourceLink)
+      : getReactParams(
+          title,
+          editorCode,
+          scope,
+          lang,
+          relativeImports,
+          relPath,
+          sourceLink
+        )
   );
-  const fullscreenLink = loc.pathname.replace(/\/$/, '')
-    + (loc.pathname.endsWith(source) ? '' : `/${source}`)
-    + '/'
-    + slugger(title);
+  const fullscreenLink =
+    loc.pathname.replace(/\/$/, '') +
+    (loc.pathname.endsWith(source) ? '' : `/${source}`) +
+    '/' +
+    slugger(title);
+
+  const hasMetaText = isBeta || isDemo || isDeprecated || false;
+  const tooltips = (<React.Fragment>
+    {isBeta && (
+      <Tooltip content="This beta component is currently under review and is still open for further evolution.">
+        <Button variant="plain" hasNoPadding>
+          <Label isCompact color="blue">
+            Beta
+          </Label>
+        </Button>
+      </Tooltip>
+    )}
+    {isDemo && (
+      <Tooltip content="Demos show how multiple components can be used in a single design.">
+        <Button variant="plain" hasNoPadding>
+          <Label isCompact color="purple">
+            Demo
+          </Label>
+        </Button>
+      </Tooltip>
+    )}
+    {isDeprecated && (
+      <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
+        <Button variant="plain" hasNoPadding>
+          <Label isCompact color="grey">
+            Deprecated
+          </Label>
+        </Button>
+      </Tooltip>
+    )}
+  </React.Fragment>);
+  const metaText = hasMetaText && tooltips
 
   return (
-    <div className="ws-example">
-      <div className="ws-example-header">
+    <Stack hasGutter>
+      <StackItem>
         <AutoLinkHeader
-          metaText={
-            <React.Fragment>
-              {isBeta && (
-                <Tooltip content="This beta component is currently under review and is still open for further evolution.">
-                  <Button variant="plain">
-                    <Label isCompact color="blue">Beta</Label>
-                  </Button>
-                </Tooltip>
-              )}
-              {isDemo && (
-                <Tooltip content="Demos show how multiple components can be used in a single design.">
-                  <Button variant="plain">
-                    <Label isCompact color="purple">Demo</Label>
-                  </Button>
-                </Tooltip>
-              )}
-              {isDeprecated && (
-                <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
-                  <Button variant="plain">
-                    <Label isCompact color="grey">Deprecated</Label>
-                  </Button>
-                </Tooltip>
-              )}
-            </React.Fragment>
-          }
-          size="h4"
+          metaText={metaText}
           headingLevel="h3"
-          className="ws-example-heading"
         >
           {title}
         </AutoLinkHeader>
         {children}
-      </div>
-      {isFullscreen
-        ? <div className="ws-preview">
+      </StackItem>
+      <StackItem>
+        {isFullscreen ? (
+          <div>
             <a
               className="ws-preview__thumbnail-link"
               href={fullscreenLink}
               target="_blank"
               aria-label={`Open fullscreen ${title} example`}
             >
-              <img src={thumbnail.src} width={thumbnail.width} height={thumbnail.height} alt={`${title} screenshot`} />
+              <img
+                src={thumbnail.src}
+                width={thumbnail.width}
+                height={thumbnail.height}
+                alt={`${title} screenshot`}
+              />
             </a>
           </div>
-        : <div
+        ) : (
+          <div
             id={previewId}
             className={css(
               className,
-              isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
-              isRTL && 'pf-v5-m-dir-rtl')
-            }
+              isRTL && 'pf-v6-m-dir-rtl'
+            )}
           >
             {livePreview}
           </div>
-      }
-      <ExampleToolbar
-        lang={lang}
-        isFullscreen={isFullscreen}
-        fullscreenLink={fullscreenLink}
-        originalCode={code}
-        code={editorCode}
-        setCode={debounce(setEditorCode, 300)}
-        codeBoxParams={codeBoxParams}
-        exampleTitle={title}
-      />
-    </div>
+        )}
+      </StackItem>
+      <StackItem>
+        <ExampleToolbar
+          lang={lang}
+          isFullscreen={isFullscreen}
+          fullscreenLink={fullscreenLink}
+          originalCode={code}
+          code={editorCode}
+          setCode={debounce(setEditorCode, 300)}
+          codeBoxParams={codeBoxParams}
+          exampleTitle={title}
+        />
+      </StackItem>
+    </Stack>
   );
-}
+};

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,116 +1,54 @@
-.ws-org-pfsite-l-footer.pf-v5-c-page__main-section {
-  font-family: var(--pf-v5-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);
+.ws-org-pfsite-l-footer,
+.ws-org-pfsite-l-footer-dark {
+  color: var(--pf-t--global--text--color--regular);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   /* Hide long overflowing tocs */
   z-index: 1;
 }
-.ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list-title {
-  margin: 0;
-  padding: 6px 0;
-  font-weight: 700 !important;
-  font-size: 14px !important;
-  color: #fff;
-  text-transform: uppercase;
-}
-.ws-org-pfsite-l-footer .ws-org-pfsite-l-footer-column {
-  background-color: #333;
+.ws-org-pfsite-l-footer-column {
+  background-color: var(--pf-t--global--background--color--primary--default);
   height: 100%;
+  padding-inline: var(--pf-t--global--spacer--xl);
 }
-.ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-about-logo {
-  padding-top: 12px;
-}
-.ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-about-description {
-  font-size: 14px !important;
-  color: #fff;
-}
-@media (max-width: 992px) {
-  .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-about-description {
-    padding-bottom: 16px;
+@media screen and (max-width: 768px) {
+  .ws-org-pfsite-l-footer-column {
+    padding-inline: var(--pf-t--global--spacer--md);
   }
 }
-.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;
+.ws-org-pfsite-footer-menu-social-links a {
+  margin-inline-end: var(--pf-t--global--spacer--md);
 }
-.ws-org-pfsite-l-footer-column
-  .ws-org-pfsite-footer-menu-social-links
+.ws-org-pfsite-footer-menu-social-links
   a:last-of-type {
-  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);
-}
-@media (max-width: 768px) {
-  .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
-    margin-bottom: 32px;
-  }
-}
-.ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list {
-  margin: 0.8rem 0 0;
-}
-@media (min-width: 992px) {
-  .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list {
-    width: 84%;
-  }
+  margin-inline-end: 0;
 }
-@media (min-width: 768px) {
-  .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list {
-    display: block;
-    height: auto !important;
-  }
-}
-.ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-list-item {
-  font-size: 1.2rem;
-  line-height: 1.3;
-  padding-right: 10px;
+.ws-org-pfsite-footer-menu-social-links {
+  margin-block-start: var(--pf-t--global--spacer--md);
+  color: var(--pf-t--global--icon--color--brand--default);
 }
-.ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link {
-  color: var(--pf-v5-global--Color--light-100);
-  font-size: 14px !important;
+.ws-org-pfsite-footer-menu-list-title {
+  margin-block-end: var(--pf-t--global--spacer--md);
+  color: var(--pf-t--global--text--color--subtle);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
-.ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link:hover {
-  text-decoration: underline;
+.ws-org-pfsite-footer-menu-list-item {
+  padding-right: var(--pf-t--global--spacer--sm);
 }
-@media screen and (max-width: 768px) {
-  .pfsite-l-footer-column {
-    margin-left: -16px;
-  }
+.ws-org-pfsite-footer-menu-link {
+  color: var(--pf-t--global--text--color--link--default);
 }
 
-.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 {
-  /* Hide long overflowing tocs */
-  z-index: 1;
-}
-.pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
-  font-weight: 300;
-  font-size: 12px;
-  color: #d2d2d2;
+/* Red Hat footer */
+.ws-org-pfsite-l-footer-dark > * {
+  font-size: var(--pf-t--global--font--size--xs);
 }
 .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;
-  font-weight: 300;
-  color: #d2d2d2;
-  text-decoration: underline;
+  padding-inline: var(--pf-t--global--spacer--sm);
 }
 .ws-org-pfsite-l-footer-dark a:first-of-type {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 .ws-org-pfsite-l-footer-dark a:last-of-type {
-  padding-right: 0;
+  padding-inline-end: 0;
   border: none;
 }
-
-.ws-org-pfsite-site-copyright {
-  white-space: nowrap;
-}