@patternfly/documentation-framework 1.0.0

package/components/example/example.css

@@ -0,0 +1,106 @@
+.ws-example {
+  margin-top: var(--pf-global--spacer--lg);
+  margin-bottom: var(--pf-global--spacer--lg);
+}
+
+.ws-example > .ws-example-header {
+  padding: var(--pf-global--spacer--md);
+}
+
+.ws-example-header > .ws-example-heading:not(:last-child) {
+  margin-bottom: var(--pf-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-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;
+}
+
+.ws-code-editor-control.pf-c-button {
+  --pf-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);
+  transition: width .2s ease-in-out;
+}
+
+.ws-preview-html {
+  overflow: hidden;
+}
+
+.ws-editor {
+  font-size: var(--pf-global--FontSize--md);
+}
+
+.ws-editor .token.punctuation,
+.ws-editor .token.operator {
+  color: var(--pf-global--danger-color--100);
+}
+
+.ws-preview__thumbnail-link {
+  position: relative;
+  line-height: 0;
+  overflow: hidden;
+  display: inline-block;
+}
+
+.ws-preview__thumbnail-link::before,
+.ws-preview__thumbnail-link::after {
+  position: absolute;
+  z-index: 500;
+  transition: .2s;
+  opacity: 0;
+}
+
+.ws-preview__thumbnail-link:hover::before,
+.ws-preview__thumbnail-link:hover::after {
+  opacity: 1;
+}
+
+.ws-preview__thumbnail-link::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: '';
+  background-color: rgba(0,0,0,.5);
+}
+
+.ws-preview__thumbnail-link::after {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: "Font Awesome 5 Free";
+  content: "\f35d";
+  font-size: 52px;
+  color: rgba(255,255,255,.4);
+}
+
+.ws-preview__thumbnail-link::after {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: "Font Awesome 5 Free";
+  content: "\f35d";
+  font-size: 52px;
+  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);
+}
+
+.ws-prop-required {
+  color: var(--pf-global--danger-color--100);
+}

package/components/example/example.js

@@ -0,0 +1,196 @@
+import React from 'react';
+import { useLocation } from '@reach/router';
+import { Badge, CodeBlock, CodeBlockCode, debounce } from '@patternfly/react-core';
+import * as reactCoreModule from '@patternfly/react-core';
+import * as reactTableModule from '@patternfly/react-table';
+import { css } from '@patternfly/react-styles';
+import { getParameters } from 'codesandbox/lib/api/define';
+import { ExampleToolbar } from './exampleToolbar';
+import { AutoLinkHeader } from '../autoLinkHeader/autoLinkHeader';
+import {
+  slugger,
+  getStaticParams,
+  getReactParams,
+  getExampleClassName,
+  getExampleId,
+  liveCodeTypes
+} from '../../helpers';
+import { convertToReactComponent } from '@patternfly/ast-helpers';
+import missingThumbnail from './missing-thumbnail.jpg';
+
+const errorComponent = err => <pre>{err.toString()}</pre>;
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+  
+  componentDidCatch(error, errorInfo) {
+    errorInfo._suppressLogging = true;
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.children !== this.props.children) {
+      this.setState({ error: null, errorInfo: null });
+    }
+  }
+  
+  render() {
+    if (this.state.errorInfo) {
+      return errorComponent(this.state.error);
+    }
+    return this.props.children;
+  }  
+}
+
+// Props come from mdx-ast-to-mdx-hast.js
+export const Example = ({
+  // The ts/js/html code for the example
+  code,
+  // The language of the code
+  lang = '',
+  // Second parameter to sourceMD for file containing this code
+  // Should match tab name
+  source,
+  // Whether to disable the live code editor
+  noLive = !liveCodeTypes.includes(lang),
+  // Nearest parent h3
+  title = 'Untitled',
+  // Whether the example is fullscreen only and we should show a thumbnail
+  isFullscreen,
+  // Whether the example is open on the fullscreen page
+  isFullscreenPreview,
+  // The image src thumbnail for the example
+  thumbnail = missingThumbnail,
+  // Whether the example shows demo capability
+  isBeta,
+  // Slugified source + title
+  id,
+  // Section in frontmatter of MD file (components, demos, etc)
+  section,
+  // Extra constants for example (images, extra JS files, etc)
+  liveContext,
+  // Content that appears between h3 and code block to explain example
+  children,
+}) => {
+  if (isFullscreenPreview) {
+    isFullscreen = false;
+  }
+  if (!lang) {
+    // Inline code
+    return <code className="ws-code">{code}</code>;
+  } else if (noLive) {
+    // Code block
+    return (
+      <CodeBlock>
+        <CodeBlockCode>{code}</CodeBlockCode>
+      </CodeBlock>
+    );
+  }
+
+  const [editorCode, setEditorCode] = React.useState(code);
+  const loc = useLocation();
+
+  const scope = {
+    ...liveContext,
+    // These 2 are in the bundle anyways for the site since we dogfood
+    ...reactCoreModule,
+    ...reactTableModule,
+  };
+  let livePreview = null;
+  if (lang === 'html') {
+    livePreview = (
+      <div
+        className={css('ws-preview-html', isFullscreenPreview && 'pf-u-h-100')}
+        dangerouslySetInnerHTML={{ __html: editorCode }}
+      />
+    );
+  } else {
+    try {
+      const { code: transformedCode, hasTS } = convertToReactComponent(editorCode);
+      if (hasTS) {
+        lang = 'ts';
+      } else {
+        lang = 'js';
+      }
+      const getPreviewComponent = new Function('React', ...Object.keys(scope), transformedCode);
+      const PreviewComponent = getPreviewComponent(React, ...Object.values(scope));
+      livePreview = (
+        <ErrorBoundary>
+          <PreviewComponent />
+        </ErrorBoundary>
+      );
+    } catch (err) {
+      livePreview = errorComponent(err);
+    }
+  }
+  const previewId = getExampleId(source, section[0], id, title);
+  const className = getExampleClassName(source, section[0], id);
+
+  if (isFullscreenPreview) {
+    return (
+      <div id={previewId} className={css(className, 'pf-u-h-100')}>
+        {livePreview}
+      </div>
+    );
+  }
+
+  const codeBoxParams = getParameters(
+    lang === 'html'
+      ? getStaticParams(title, editorCode)
+      : getReactParams(title, editorCode, scope, lang)
+  );
+  const fullscreenLink = loc.pathname.replace(/\/$/, '')
+    + (loc.pathname.endsWith(source) ? '' : `/${source}`)
+    + '/'
+    + slugger(title);
+
+  return (
+    <div className="ws-example">
+      <div className="ws-example-header">
+        <AutoLinkHeader
+          metaText={isBeta && <Badge className="ws-beta-badge pf-u-ml-xs">Beta</Badge>}
+          size="h4"
+          headingLevel="h3"
+          className="ws-example-heading"
+        >
+          {title}
+        </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')}
+          >
+            {livePreview}
+          </div>
+      }
+      <ExampleToolbar
+        lang={lang}
+        isFullscreen={isFullscreen}
+        fullscreenLink={fullscreenLink}
+        originalCode={code}
+        code={editorCode}
+        setCode={debounce(setEditorCode, 300)}
+        codeBoxParams={codeBoxParams}
+        exampleTitle={title}
+      />
+    </div>
+  );
+}

package/components/example/exampleToolbar.js

@@ -0,0 +1,208 @@
+import React from 'react';
+import { Button, Form, Tooltip } from '@patternfly/react-core';
+import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
+import { convertToJSX } from '@patternfly/ast-helpers';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import CodepenIcon from '@patternfly/react-icons/dist/esm/icons/codepen-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import ReplyAllIcon from '@patternfly/react-icons/dist/esm/icons/reply-all-icon';
+import { copy } from '../../helpers';
+import { trackEvent } from '../../helpers';
+
+function getLanguage(lang) {
+  if (lang === 'js') {
+    return Language.javascript;
+  } else if (lang === 'ts') {
+    return Language.typescript;
+  }
+
+  return lang;
+}
+
+export const ExampleToolbar = ({
+  // Link to fullscreen example page (each example has one)
+  fullscreenLink,
+  // Params to pass to codesandbox
+  codeBoxParams,
+  // Language of code
+  lang,
+  // Whether the example is fullscreen only
+  isFullscreen,
+  // Original version of the code
+  originalCode,
+  // Current code in editor
+  code,
+  // Callback to set code in parent component
+  setCode,
+  // Title of example used in creating unique labels
+  exampleTitle
+}) => {
+  const [isEditorOpen, setIsEditorOpen] = React.useState(false);
+  const [isCopied, setCopied] = React.useState(false);
+
+  const copyCode = () => {
+    copy(code);
+
+    setCopied(true);
+    // Reset isCopied after Tooltip fades out
+    setTimeout(() => {
+      setCopied(false);
+    }, 2500);
+  };
+
+  const copyLabel = 'Copy code to clipboard';
+  const languageLabel = `Toggle ${lang.toUpperCase()} code`;
+  const codesandboxLabel = 'Open example in CodeSandbox';
+  const fullscreenLabel = 'Open example in new window';
+  const convertLabel = 'Convert example from Typescript to JavaScript';
+  const undoAllLabel = 'Undo all changes';
+
+  const copyAriaLabel = `Copy ${exampleTitle} example code to clipboard`;
+  const languageAriaLabel = `Toggle ${lang.toUpperCase()} code in ${exampleTitle} example`;
+  const codesandboxAriaLabel = `Open ${exampleTitle} example in CodeSandbox`;
+  const fullscreenAriaLabel = `Open ${exampleTitle} example in new window`;
+  const convertAriaLabel = `Convert ${exampleTitle} example from Typescript to JavaScript`;
+  const undoAllAriaLabel = `Undo all changes to ${exampleTitle}`;
+
+  const customControls = (
+    <React.Fragment>
+      <CodeEditorControl
+        icon={
+          <React.Fragment>
+            <CodeIcon />
+            {' ' + lang.toUpperCase()}
+          </React.Fragment>
+        }
+        onClick={() => {
+          setIsEditorOpen(!isEditorOpen);
+          // 1 === expand code, 0 === collapse code
+          trackEvent('code_editor_control_click',  'click_event', 'TOGGLE_CODE', isEditorOpen ? 0 : 1);
+        }}
+        aria-label={languageAriaLabel}
+        toolTipText={languageLabel}
+        aria-expanded={isEditorOpen}
+        className="ws-code-editor-control"
+      />
+      <Tooltip
+        trigger="mouseenter"
+        content={<div>{isCopied ? 'Code copied' : copyLabel}</div>}
+        exitDelay={isCopied ? 1600 : 300}
+        entryDelay={300}
+        maxWidth="100px"
+        position="top"
+      >
+        <Button onClick={() => {
+          copyCode();
+          trackEvent('code_editor_control_click', 'click_event', 'COPY_CODE');
+        }} variant="control" aria-label={copyAriaLabel} className="ws-code-editor-control">
+          <CopyIcon />
+        </Button>
+      </Tooltip>
+      {codeBoxParams &&
+        <Tooltip
+          trigger="mouseenter"
+          content={codesandboxLabel}
+          exitDelay={300}
+          entryDelay={300}
+          maxWidth="100px"
+          position="top"
+        >
+          <Form
+            aria-label={`${codesandboxAriaLabel} form` }
+            action="https://codesandbox.io/api/v1/sandboxes/define"
+            method="POST"
+            target="_blank"
+            style={{ display: "inline-block" }}
+          >
+            <Button
+              aria-label={codesandboxAriaLabel}
+              variant="control"
+              type="submit"
+              onClick={() => {
+                trackEvent('code_editor_control_click', 'click_event', 'CODESANDBOX_LINK');
+              }}
+              className="ws-code-editor-control"
+            >
+              <input type="hidden" name="parameters" value={codeBoxParams} />
+              <CodepenIcon />
+            </Button>
+          </Form>
+        </Tooltip>
+      }
+      {fullscreenLink && 
+        <CodeEditorControl
+          component="a"
+          icon={<ExternalLinkAltIcon />}
+          href={fullscreenLink} 
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={fullscreenAriaLabel}
+          toolTipText={fullscreenLabel}
+          onClick={() => {
+            trackEvent('code_editor_control_click', 'click_event', 'FULLSCREEN_LINK');
+          }}
+          className="ws-code-editor-control"
+        />
+      }
+      {isEditorOpen && lang === 'ts' &&
+        <CodeEditorControl
+          icon={(
+            <React.Fragment>
+              {'TS '}<AngleDoubleRightIcon />{' JS'}
+            </React.Fragment>
+          )}
+          aria-label={convertAriaLabel}
+          toolTipText={convertLabel}
+          onClick={() => {
+            setCode(convertToJSX(code).code);
+            trackEvent('code_editor_control_click', 'click_event', 'TS_TO_JS');
+          }}
+          className="ws-code-editor-control"
+        />
+      }
+      {code !== originalCode &&
+        <CodeEditorControl
+          icon={<ReplyAllIcon />}
+          aria-label={undoAllAriaLabel}
+          toolTipText={undoAllLabel}
+          onClick={() => {
+            setCode(originalCode);
+            trackEvent('code_editor_control_click', 'click_event', 'RESET_CODE');
+          }}
+          className="ws-code-editor-control"
+        />
+      }
+    </React.Fragment>
+  );
+
+  // TODO: check if worth adding react, patternfly, and example types
+  // https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
+  const onEditorDidMount = (_editor, monaco) => {
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      jsx: true,
+      ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions()
+    });
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: true,
+      noSuggestionDiagnostics: true,
+      onlyVisible: true
+    });
+  };
+
+  return (
+    <CodeEditor
+      customControls={customControls}
+      showEditor={isEditorOpen}
+      language={getLanguage(lang)}
+      height="400px"
+      code={code}
+      onChange={newCode => setCode(newCode)}
+      onEditorDidMount={onEditorDidMount}
+      isReadOnly={isFullscreen}
+      className={`${isEditorOpen ? 'ws-example-code-expanded ' : ''}ws-code-editor`}
+    />
+  );
+}

package/components/footer/footer.css

@@ -0,0 +1,114 @@
+.ws-org-pfsite-l-footer.pf-c-page__main-section {
+  font-family: "RedHatText";
+  font-weight: 300;
+  background-color: #1a1a1a !important;
+  padding: 48px;
+  padding-top: 32px;
+  /* 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;
+  height: 100%;
+}
+.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;
+  }
+}
+.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;
+}
+.ws-org-pfsite-l-footer-column
+  .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-global--spacer--md);
+  margin-bottom: var(--pf-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%;
+  }
+}
+@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-l-footer .ws-org-pfsite-footer-menu-link {
+  color: var(--pf-global--Color--light-100);
+  font-size: 14px !important;
+}
+.ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link:hover {
+  text-decoration: underline;
+}
+@media screen and (max-width: 768px) {
+  .pfsite-l-footer-column {
+    margin-left: -16px;
+  }
+}
+
+.ws-org-pfsite-l-footer-dark {
+  background: #151515 !important;
+}
+.pf-c-page .pf-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 > * {
+  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;
+  font-weight: 300;
+  color: #d2d2d2;
+  text-decoration: underline;
+}
+.ws-org-pfsite-l-footer-dark a:first-of-type {
+  padding-left: 0;
+}
+.ws-org-pfsite-l-footer-dark a:last-of-type {
+  padding-right: 0;
+  border: none;
+}
+
+.ws-org-pfsite-site-copyright {
+  white-space: nowrap;
+}