Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): fix page-loaded class #4013

Merged
merged 3 commits into from
May 14, 2024
Merged

chore(docs): fix page-loaded class #4013

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3153ee4
chore(docs): fix page-loaded class
evwilkin May 9, 2024
bd8d508
chore(docs): wrapped page-loaded in useeffect
evwilkin May 13, 2024
fe0dbd3
chore(docs): import useeffect
evwilkin May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 118 additions & 52 deletions packages/documentation-framework/components/example/example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
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,
} 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';
Expand All @@ -16,13 +25,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) {
Expand All @@ -34,7 +43,7 @@ class ErrorBoundary extends React.Component {
errorInfo._suppressLogging = true;
this.setState({
error: error,
errorInfo: errorInfo
errorInfo: errorInfo,
});
}

Expand Down Expand Up @@ -94,15 +103,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>;
Expand All @@ -124,20 +142,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-v6-u-h-100')}
className={css(
'ws-preview-html',
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 {
Expand All @@ -147,7 +171,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 = (
Expand All @@ -167,17 +195,34 @@ export const Example = ({
<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-v6-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-v6-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>
)}
Expand All @@ -188,12 +233,21 @@ 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);

return (
<div className="ws-example">
Expand All @@ -204,21 +258,27 @@ export const Example = ({
{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>
<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>
<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>
<Label isCompact color="grey">
Deprecated
</Label>
</Button>
</Tooltip>
)}
Expand All @@ -232,28 +292,34 @@ export const Example = ({
</AutoLinkHeader>
{children}
</div>
{isFullscreen
? <div className="ws-preview">
<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`} />
</a>
</div>
: <div
id={previewId}
className={css(
className,
isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
isRTL && 'pf-v6-m-dir-rtl')
}
{isFullscreen ? (
<div className="ws-preview">
<a
className="ws-preview__thumbnail-link"
href={fullscreenLink}
target="_blank"
aria-label={`Open fullscreen ${title} example`}
>
{livePreview}
</div>
}
<img
src={thumbnail.src}
width={thumbnail.width}
height={thumbnail.height}
alt={`${title} screenshot`}
/>
</a>
</div>
) : (
<div
id={previewId}
className={css(
className,
isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
isRTL && 'pf-v6-m-dir-rtl'
)}
>
{livePreview}
</div>
)}
<ExampleToolbar
lang={lang}
isFullscreen={isFullscreen}
Expand All @@ -266,4 +332,4 @@ export const Example = ({
/>
</div>
);
}
};
Loading