@patternfly/documentation-framework 1.0.0

package/layouts/sideNavLayout/sideNavLayout.js

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Page,
+  PageHeader,
+  PageSidebar,
+  PageHeaderTools,
+  PageHeaderToolsItem,
+  TextInput,
+  Brand,
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  DropdownGroup,
+  Divider,
+  Text,
+  TextVariants,
+  SkipToContent
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import { SideNav, TopNav, GdprBanner } from '../../components';
+import staticVersions from '../../versions.json';
+import logo from '../logo.svg';
+
+const HeaderTools = ({
+  versions,
+  hasVersionSwitcher,
+  hasSearch,
+  pathPrefix
+}) => {
+  const initialVersion = staticVersions.Releases.find(release => release.latest);
+  const [isDropdownOpen, setDropdownOpen] = useState(false);
+  const [isSearchExpanded, setSearchExpanded] = useState(false);
+  const latestVersion = versions.Releases.find(version => version.latest);
+  const getDropdownItem = version => (
+    <DropdownItem
+      key={version.name}
+      component={
+        <a href={version.latest ? '/v4' : `/${version.name}`}>
+          {`Release ${version.name}`}
+        </a>
+      }
+    />
+  );
+  const searchRef = React.useRef();
+
+  useEffect(() => {
+    const handleSearchHotkeys = (event) => {
+      const tagName = event.target.tagName.toLowerCase();
+      const isContentEditable = event.target.contentEditable === 'true';
+      if (
+        (event.code === 'Slash' || event.code === 'KeyS') &&
+        tagName !== 'input' &&
+        tagName !== 'textarea' &&
+        !isContentEditable
+      ) {
+        setSearchExpanded(true);
+        setTimeout(() => searchRef.current && searchRef.current.focus(), 0);
+      } else if (event.code === 'Escape' && event.target === searchRef.current) {
+        setSearchExpanded(false);
+      }
+    };
+    window.addEventListener('keyup', handleSearchHotkeys);
+    return () => window.removeEventListener('keyup', handleSearchHotkeys);
+  }, []);
+
+  return (
+    <PageHeaderTools>
+      {hasSearch && (
+        <PageHeaderToolsItem id="ws-global-search-wrapper" className={isSearchExpanded ? '' : 'ws-hide-search-input'}>
+          <TextInput id="ws-global-search" ref={searchRef} placeholder="Search" />
+          {isSearchExpanded && <SearchIcon className="global-search-icon" />}
+        </PageHeaderToolsItem>
+      )}
+      {hasSearch && (
+        <Button
+        aria-label={`${isSearchExpanded ? 'Collapse' : 'Expand'} search input`}
+        variant="plain"
+        className="ws-toggle-search"
+        onClick={() => {
+            setSearchExpanded(!isSearchExpanded);
+            if (!isSearchExpanded) {
+              setTimeout(() => searchRef.current && searchRef.current.focus(), 0);
+            }
+          }}
+          >
+          {isSearchExpanded
+            ? <TimesIcon />
+            : <SearchIcon className="global-search-icon" />
+          }
+        </Button>
+      )}
+      <PageHeaderToolsItem>
+        <Button
+          component="a"
+          variant="link"
+          href="//github.com/patternfly"
+          target="top"
+          aria-label="Link to PatternFly GitHub page"
+          className="ws-github-pageheader pf-u-mr-sm"
+        >
+          <GithubIcon />
+        </Button>
+      </PageHeaderToolsItem>
+      {hasVersionSwitcher && (
+        <PageHeaderToolsItem>
+          <Dropdown
+            className="ws-org-version-switcher"
+            onSelect={() => setDropdownOpen(!isDropdownOpen)}
+            toggle={(
+              <DropdownToggle
+                className={`ws-org-version-toggle${isDropdownOpen ? '-expanded': ''}`}
+                onToggle={() => setDropdownOpen(!isDropdownOpen)}
+              >
+                Release {initialVersion.name}
+              </DropdownToggle>
+            )}
+            isOpen={isDropdownOpen}
+            dropdownItems={[
+              <DropdownGroup key="latest" label="Latest">
+                {getDropdownItem(latestVersion)}
+              </DropdownGroup>,
+              <DropdownGroup key="Previous" label="Previous releases">
+                {Object.values(versions.Releases)
+                  .filter(version => !version.hidden && !version.latest)
+                  .slice(0,3)
+                  .map(getDropdownItem)}
+              </DropdownGroup>,
+              <Divider key="divider" className="ws-switcher-divider"/>,
+              <DropdownItem
+                key="PatternFly 3"
+                className="ws-patternfly-3"
+                target="_blank"
+                href="https://www.patternfly.org/v3"
+              >
+                PatternFly 3
+                <ExternalLinkAltIcon />
+              </DropdownItem>
+            ]}
+          />
+        </PageHeaderToolsItem>
+      )}
+    </PageHeaderTools>
+  );
+}
+
+// https://github.com/algolia/autocomplete.js#global-options
+export function attachDocSearch(algolia, inputSelector, timeout) {
+  if (window.docsearch) {
+    return window.docsearch({
+      inputSelector,
+      autocompleteOptions: {
+        hint: false,
+        appendTo: `${inputSelector}-wrapper`,
+      },
+      debug: process.env.NODE_ENV !== 'production',
+      ...algolia
+    });
+  }
+  else {
+    setTimeout(() => attachDocSearch(algolia, inputSelector, timeout), timeout);
+  }
+}
+
+export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp }) => {
+  const pathPrefix = process.env.pathPrefix;
+  const algolia = process.env.algolia;
+  const hasGdprBanner = process.env.hasGdprBanner;
+  const hasVersionSwitcher = process.env.hasVersionSwitcher;
+  const sideNavItems = process.env.sideNavItems;
+  const topNavItems = process.env.topNavItems;
+  const prnum = process.env.prnum;
+  const prurl = process.env.prurl;
+
+  const [versions, setVersions] = useState({ ...staticVersions });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    if (algolia) {
+      attachDocSearch(algolia, '#ws-global-search', 1000);
+    }
+    if (hasVersionSwitcher && window.fetch) {
+      fetch('/versions.json').then(res => {
+        if (res.ok) {
+          res.json().then(json => setVersions(json));
+        }
+      });
+    }
+  }, []);
+
+  const SideBar = (
+    <PageSidebar
+      className="ws-page-sidebar"
+      theme="light"
+      nav={<SideNav navItems={sideNavItems} groupedRoutes={groupedRoutes} />}
+    />
+  );
+
+  const Header = (
+    <PageHeader
+      className="ws-page-header"
+      headerTools={(algolia || hasVersionSwitcher) && <HeaderTools
+        versions={versions}
+        hasSearch={algolia}
+        hasVersionSwitcher={hasVersionSwitcher}
+        pathPrefix={pathPrefix} />}
+      logo={prnum ? `PR #${prnum}` : <Brand src={logo} alt="Patternfly Logo" />}
+      logoProps={{ href: prurl || pathPrefix || '/' }}
+      showNavToggle
+      topNav={topNavItems.length > 0 && <TopNav navItems={topNavItems} />}
+    />
+  );
+
+  return (
+    <React.Fragment>
+      <div id="ws-page-banners">
+        {hasGdprBanner && <GdprBanner />}
+      </div>
+      <Page
+        id="ws-page"
+        mainContainerId="ws-page-main"
+        header={Header}
+        sidebar={SideBar}
+        skipToContent={<SkipToContent href="#ws-page-main">Skip to content</SkipToContent>}
+        isManagedSidebar
+        defaultManagedSidebarIsOpen={navOpenProp}
+      >
+        {children}
+      </Page>
+    </React.Fragment>
+  );
+}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@patternfly/documentation-framework",
+  "description": "A framework to build documentation for PatternFly.",
+  "version": "1.0.0",
+  "author": "Red Hat",
+  "license": "MIT",
+  "private": false,
+  "bin": {
+    "pf-docs-framework": "scripts/cli/cli.js"
+  },
+  "dependencies": {
+    "@babel/core": "7.18.2",
+    "@babel/plugin-proposal-class-properties": "7.17.12",
+    "@babel/plugin-proposal-private-methods": "7.17.12",
+    "@babel/plugin-proposal-private-property-in-object": "7.17.12",
+    "@babel/plugin-transform-react-jsx": "7.17.12",
+    "@babel/preset-env": "7.18.2",
+    "@mdx-js/util": "1.6.16",
+    "@patternfly/ast-helpers": "^0.4.57",
+    "@reach/router": "1.3.4",
+    "autoprefixer": "9.8.6",
+    "babel-loader": "8.2.5",
+    "camelcase-css": "2.0.1",
+    "chokidar": "3.5.3",
+    "clean-webpack-plugin": "3.0.0",
+    "codesandbox": "2.2.0",
+    "commander": "4.1.1",
+    "copy-webpack-plugin": "6.1.0",
+    "css-loader": "4.3.0",
+    "detab": "2.0.3",
+    "file-loader": "6.1.0",
+    "file-saver": "1.3.8",
+    "fs-extra": "9.0.1",
+    "hast-to-hyperscript": "9.0.0",
+    "hast-util-to-text": "2.0.0",
+    "html-formatter": "0.1.9",
+    "html-webpack-plugin": "4.4.1",
+    "js-yaml": "3.14.0",
+    "lodash-es": "4.17.15",
+    "mdast-util-to-hast": "9.1.1",
+    "mdurl": "1.0.1",
+    "mini-css-extract-plugin": "1.3.9",
+    "monaco-editor": "0.21.3",
+    "monaco-editor-webpack-plugin": "2.1.0",
+    "null-loader": "4.0.0",
+    "postcss": "7.0.32",
+    "postcss-loader": "4.2.0",
+    "puppeteer": "14.3.0",
+    "puppeteer-cluster": "0.23.0",
+    "react-docgen": "5.3.1",
+    "react-monaco-editor": "0.48.0",
+    "react-ssr-prepass": "1.2.1",
+    "remark-footnotes": "1.0.0",
+    "remark-frontmatter": "2.0.0",
+    "remark-mdx": "2.0.0-next.8",
+    "remark-mdxjs": "2.0.0-next.8",
+    "remark-parse": "8.0.3",
+    "remark-squeeze-paragraphs": "4.0.0",
+    "responsive-loader": "2.1.1",
+    "sharp": "0.30.6",
+    "style-to-object": "0.3.0",
+    "to-vfile": "6.1.0",
+    "typescript": "4.3.5",
+    "unified": "9.1.0",
+    "unist-util-remove": "2.0.0",
+    "unist-util-visit": "2.0.3",
+    "url-loader": "4.1.0",
+    "vfile-reporter": "6.0.1",
+    "webpack": "4.44.1",
+    "webpack-bundle-analyzer": "3.8.0",
+    "webpack-cli": "3.3.12",
+    "webpack-dev-server": "3.11.0",
+    "webpack-merge": "5.8.0",
+    "parse-entities": "2.0.0",
+    "glob": "8.0.3",
+    "express": "4.18.1",
+    "handlebars": "4.7.7"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "@patternfly/patternfly": ">=4.185.1",
+    "@patternfly/react-core": ">=4.202.16",
+    "@patternfly/react-code-editor": ">=4.43.16",
+    "@patternfly/react-table": ">=4.71.16"
+  }
+}

package/pages/404/404.css

@@ -0,0 +1,16 @@
+#ws-404-search-wrapper {
+  position: relative;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.ws-404-card-header {
+  padding: var(--pf-global--spacer--lg);
+}
+
+div.ws-404-button-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: var(--pf-global--spacer--xl);
+}

package/pages/404/404.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 109" style="enable-background:new 0 0 100 109;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#6A6E73;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:3,5;}
+	.st1{fill:#FFFFFF;stroke:#6A6E73;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st2{fill:#6A6E73;}
+</style>
+<path class="st0" d="M12.5,96.5c3-33,17.4-35.8,38-24c19.1,11,36-8.1,21-27c-15.4-19.4-8-23-8-23"/>
+<path class="st1" d="M13,25v50 M27.8,71.8V104 M27.8,15v47.6 M42.6,74v34 M42.6,10v54.2 M57.4,79.2V108 M57.4,32v38 M72.2,77v27
+	 M72.2,54.8v9.5 M72.2,29v10.2 M87,25v68 M56,22.5l-40-0.2 M59.6,37.1L5,37.1 M59.6,37.1 M95,37.1l-24.1,0 M70.4,51.9L1,51.9
+	 M70.4,51.9 M80.8,51.9 M99,51.9l-18.2,0 M18.6,66.6L1,66.6 M70.4,66.6l-21.9,0 M99,66.6l-17.9,0 M10.5,81.4H6 M95,81.4l-75,0
+	 M84,96.2l-67,0"/>
+<g>
+	<path class="st2" d="M81.3,15.7c-0.9,1.5-2.1,2.7-3.6,3.6c-1.5,0.9-3.2,1.3-5,1.3s-3.4-0.4-5-1.3c-1.5-0.9-2.7-2.1-3.6-3.6
+		c-0.9-1.5-1.3-3.2-1.3-5s0.4-3.4,1.3-5c0.9-1.5,2.1-2.7,3.6-3.6c1.5-0.9,3.2-1.3,5-1.3s3.4,0.4,5,1.3c1.5,0.9,2.7,2.1,3.6,3.6
+		c0.9,1.5,1.3,3.2,1.3,5S82.2,14.2,81.3,15.7z M70.3,4.8c-0.7,0.4-1.4,1-1.9,1.9c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.1,0.1,0.2,0.2,0.3
+		l1.4,1c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2-0.1,0.3-0.2c0.4-0.5,0.8-0.9,1-1c0.4-0.3,0.8-0.4,1.3-0.4c0.5,0,0.9,0.1,1.3,0.4
+		c0.4,0.3,0.6,0.6,0.6,0.9c0,0.3-0.1,0.5-0.4,0.8c-0.2,0.1-0.5,0.3-0.9,0.6l-0.1,0c-0.7,0.4-1.1,0.7-1.4,1c-0.5,0.5-0.7,1.1-0.7,1.8
+		v0.2c0,0.1,0,0.2,0.1,0.3c0.1,0.1,0.2,0.1,0.3,0.1h2.2c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.1-0.2,0.1-0.3v0c0-0.2,0.1-0.4,0.3-0.6
+		c0.1-0.1,0.4-0.3,0.8-0.5c0.7-0.4,1.2-0.8,1.5-1.1c0.5-0.6,0.8-1.3,0.8-2.1c0-0.7-0.2-1.4-0.7-2.1s-1-1.1-1.8-1.5s-1.5-0.5-2.2-0.5
+		C72,4.2,71.1,4.4,70.3,4.8z M71.5,14.6c-0.4,0.4-0.5,0.8-0.5,1.3s0.2,0.9,0.5,1.3s0.8,0.5,1.3,0.5s0.9-0.2,1.3-0.5s0.5-0.8,0.5-1.3
+		s-0.2-0.9-0.5-1.3s-0.8-0.5-1.3-0.5S71.8,14.2,71.5,14.6z"/>
+</g>
+</svg>

package/pages/404/chart.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="a18a0346-44ce-4e9d-859c-f0e642ea2ad3"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36"
+	 style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0066CC;}
+</style>
+<g>
+	<path class="st0" d="M31.7,19.2c0-0.2-0.2-0.4-0.3-0.5c-0.2-0.1-0.4-0.1-0.6-0.1l-13,2.7l-13,2.7c-0.4,0.1-0.7,0.5-0.6,0.9
+		c0.1,0.3,0.4,0.6,0.7,0.6c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0l13-2.7l13-2.7C31.5,20,31.8,19.6,31.7,19.2
+		C31.7,19.2,31.7,19.2,31.7,19.2L31.7,19.2z"/>
+	<path class="st0" d="M7,22.5c0.4,0,0.7-0.3,0.8-0.8v-14h20.5V17c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V7c0-0.4-0.3-0.7-0.8-0.8H7
+		C6.5,6.3,6.2,6.6,6.2,7v14.7C6.2,22.1,6.5,22.5,7,22.5z"/>
+	<path class="st0" d="M17.4,9.5c-0.1,0.1-0.2,0.3-0.2,0.5v7.7c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V10c0-0.4-0.3-0.7-0.8-0.7
+		C17.8,9.3,17.6,9.3,17.4,9.5z"/>
+	<path class="st0" d="M23.4,9.5c-0.1,0.1-0.2,0.3-0.2,0.5v6.5c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V10c0-0.4-0.3-0.8-0.7-0.8
+		C23.8,9.2,23.6,9.3,23.4,9.5z"/>
+	<path class="st0" d="M11.4,9.5c-0.1,0.1-0.2,0.3-0.2,0.5v9c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-9c0-0.4-0.3-0.7-0.8-0.7
+		C11.8,9.3,11.6,9.3,11.4,9.5z"/>
+	<path class="st0" d="M29,22.2c-0.4,0-0.7,0.3-0.8,0.8v5.2H7.7V27c0-0.4-0.3-0.8-0.8-0.8S6.2,26.6,6.2,27v2c0,0.4,0.3,0.7,0.8,0.8
+		h22c0.4,0,0.7-0.3,0.8-0.8v-6C29.7,22.6,29.4,22.3,29,22.2z"/>
+</g>
+</svg>

package/pages/404/components.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 378.25 378.25"><defs><style>.cls-1{fill:none;stroke:#06c;stroke-linecap:round;stroke-linejoin:round;stroke-width:16px;}</style></defs><path class="cls-1" d="M105.73,350.34l53.56-112.87a48,48,0,1,1,59.66,0l53.57,112.87"/><path class="cls-1" d="M272.52,350.34a172,172,0,1,0-166.79,0"/></svg>

package/pages/404/guidelines.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 378.25 378.25"><defs><style>.cls-1,.cls-3{fill:none;stroke:#06c;stroke-linecap:round;stroke-linejoin:round;stroke-width:14.4px;}.cls-2{fill:#06c;}.cls-3{stroke-dasharray:0 29.58;}</style></defs><path class="cls-1" d="M189.12,343.92A154.86,154.86,0,0,1,44.31,244"/><polygon class="cls-2" points="185.61 370.17 185.61 317.68 211.84 343.92 185.61 370.17"/><path class="cls-1" d="M343.92,189.12a154.85,154.85,0,0,1-94.54,142.64"/><polygon class="cls-2" points="370.17 192.64 317.68 192.64 343.92 166.41 370.17 192.64"/><path class="cls-1" d="M189.12,34.32a154.86,154.86,0,0,1,142.64,94.55"/><polygon class="cls-2" points="192.64 8.08 192.64 60.56 166.41 34.32 192.64 8.08"/><path class="cls-1" d="M34.32,189.12a154.83,154.83,0,0,1,93.18-142"/><polygon class="cls-2" points="8.08 185.61 60.56 185.61 34.32 211.84 8.08 185.61"/><circle class="cls-3" cx="189.12" cy="189.12" r="61.2"/></svg>

package/pages/404/index.js

@@ -0,0 +1,136 @@
+import React, { useEffect } from 'react';
+import { Link } from '@patternfly/documentation-framework/components';
+import {
+  Button,
+  Card,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  CardHeaderMain,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  Grid,
+  GridItem,
+  PageSection,
+  TextInput,
+  Title
+} from '@patternfly/react-core';
+import { attachDocSearch } from '../../layouts/sideNavLayout/sideNavLayout';
+import PathMissingIcon from './404.svg';
+import PatternFlyIcon from './patternfly-flat.svg';
+import GuidelinesIcon from './guidelines.svg';
+import ComponentsIcon from './components.svg';
+import ChartIcon from './chart.svg';
+import './404.css';
+
+const Card404 = ({
+  img,
+  alt,
+  title,
+  body,
+  link: {
+    text,
+    to
+  }
+}) => (
+  <GridItem xl={3} md={6} xs={12}>
+    <Card style={{ height: '340px' }}>
+      <CardHeaderMain className="ws-404-card-header">
+        <img src={img} alt={alt} width="64px" />
+      </CardHeaderMain>
+      <CardTitle>
+        {title}
+      </CardTitle>
+      <CardBody>
+        {body}
+      </CardBody>
+      <CardFooter>
+        <Link to={to}>
+          {text}
+        </Link>
+      </CardFooter>
+    </Card>
+  </GridItem>
+);
+
+const Page404 = () => {
+  const algolia = process.env.algolia;
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    if (algolia) {
+      attachDocSearch(algolia, '#ws-404-search', 1000);
+    }
+  });
+  
+  return (
+    <PageSection>
+      <EmptyState variant="xl">
+        <EmptyStateIcon icon={() => <img src={PathMissingIcon} alt="Missing path" width="128px" />} />
+        <Title headingLevel="h1" size="2xl">
+          404: That page no longer exists
+        </Title>
+        <p style={{ marginTop: 'var(--pf-global--spacer--sm)' }}>
+          Another page might have the information you need, so try searching PatternFly.
+        </p>
+        <EmptyStateBody>
+          <div id="ws-404-search-wrapper">
+            <TextInput id="ws-404-search" type="text" placeholder="Search PatternFly" />
+          </div>
+        </EmptyStateBody>
+      </EmptyState>
+      <Grid hasGutter>
+        <Card404
+          img={PatternFlyIcon}
+          alt="PatternFly icon"
+          title="Getting started"
+          body="Learn about designing and developing with PatternFly."
+          link={{
+            text: 'View getting started resources',
+            to: '/get-started/about'
+          }}
+        />
+        <Card404
+          img={GuidelinesIcon}
+          alt="Guidelines icon"
+          title="Guidelines"
+          body="Check out PatternFly's design approach to icons, colors, and more."
+          link={{
+            text: 'View guidelines',
+            to: '/guidelines/colors'
+          }}
+        />
+        <Card404
+          img={ComponentsIcon}
+          alt="Components icon"
+          title="Components"
+          body="Start creating your applications with components -- the building blocks of user interfaces."
+          link={{
+            text: 'View components',
+            to: '/components/about-modal'
+          }}
+        />
+        <Card404
+          img={ChartIcon}
+          alt="Chart icon"
+          title="Charts"
+          body="Visualize your facts and figures by designing the right charts for your data."
+          link={{
+            text: 'View charts',
+            to: '/charts/about'
+          }}
+        />
+      </Grid>
+      <div className="ws-404-button-wrapper">
+        <Button variant="primary" component={Link} to="/">
+          Return to home page
+        </Button>
+      </div>
+    </PageSection>
+  );
+}
+
+export default Page404;

package/pages/404/patternfly-flat.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 378.25 378.25"><defs><style>.cls-1{fill:#06c;}</style></defs><path class="cls-1" d="M135.62,282.76l-54,12.49L10.76,194.6,189.12,20.32,367.48,194.6,296.65,295l-54-12.23-53.51,75.17Zm53.5,65.49,47.4-66.76-18.35-4.33-28,41.27-30.32-41.27-18.34,4.33Zm1-39.75,23.44-34.4L189.12,37.39,164.92,274.1Zm-106-19.62,47.9-11L96.89,228.49l10.44-23.7L75,160.46,158.55,58.28,18.15,195.37Zm210,0L335.63,230l24.46-34.65L219.7,58.28l83.83,102.18-32.62,44.33,10.45,23.7L246.2,277.67Zm-53.76-12.49L275,227.73l-7.64-17.59-45.87,61.92Zm-102.18,0,18.6-4.33-45.6-61.92-7.65,17.59Zm81.29-10.95L264.29,204,196.51,49.88Zm-60.65,0L181.73,49.88,114,204Zm-48.66-66.76L179.19,42,82.11,160.71Zm158.23,0,28-38.22L199.32,42Z"/></svg>

package/pages/global-css-variables.md

@@ -0,0 +1,108 @@
+---
+id: Global CSS variables
+section: developer-resources
+---
+
+import { CSSVariables } from '../components/cssVariables/cssVariables';
+
+
+## About CSS variables
+
+The CSS variable system is a two-layer theming system where global variables inform component variables.
+
+### Global variables
+
+Global variables define and enforce global style elements (like values for color, spacing, and font size) across the entire system.
+
+Global variables follow this formula:
+
+`--pf-global--concept--PropertyCamelCase--modifier--state`
+
+Where...
+
+- A `concept` is something like a `spacer` or `main-title`.
+- A `PropertyCamelCase` is something like `BackgroundColor` or `FontSize`.
+- A `modifier` is something like `sm` or `lg`.
+- A `state` is something like `hover` or `expanded`.
+
+Example:
+- Note: global variables are scoped to `:root`
+  ```css
+  :root {
+    /* Default & hovered link colors */
+    --pf-global--link--Color: #06c;
+    --pf-global--link--Color--hover: #004080;
+  }
+  ```
+
+<br/>
+The [full list of global CSS variables](#global-css-variables) can be found below.
+
+### Component variables
+
+Component variables are used to define custom properties at the component-level. Component variables are always defined by global variables.
+
+Component variables follow this formula:
+
+`--pf-c-block__element--modifier--state--breakpoint--pseudo-element--PropertyCamelCase`
+
+Where...
+
+- `pf-c-block` refers to the block, usually the component or layout name, like `pf-c-alert`.
+- `__element` refers to the element inside of the block, like `__title`.
+- `modifier` is prefixed with`-m` and refers to a modifier class such as `.pf-m-danger`.
+- `state` is something like `hover` or `active`.
+- `breakpoint` is a media query breakpoint such as `sm` for `$pf-global--breakpoint--xs`.
+- `pseudo-element` is either `before` or `after`.
+
+Example:
+- Note: component variables are scoped to the top-level component selector
+  ```css
+  .pf-c-button {
+    /* Default, primary, and primary hovered button background colors */
+    --pf-c-button--BackgroundColor: transparent;
+    --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
+    --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  }
+  ```
+
+<br/>
+Component variables are listed at the bottom of each component page (for example, [button css variables](/components/button#css-variables)).
+
+Note that all component variables are declared at the top component level (for example, `.pf-c-button`). The component variable table linked above also shows all usages of each variable and the values they evaluate to in each case - expand any component variable row to view the global variable it is mapped to.
+
+![Component variable mapping](./img/component-variable-mapping.png)
+
+### Breakpoint variables and class suffixes
+
+PatternFly defines a number of standard breakpoints. These are always used as a `min-width` breakpoint; i.e. using the `-md` breakpoint would apply to everything at the `-md` width and wider. (There is one exception to this, which is in the responsive behavior of the [table component](/components/table).)
+
+Breakpoint suffixes are used in utility classes and layouts as well as in many components as a way to apply class styles at a specified breakpoint. When available, `{-on-[breakpoint]}` will be shown as an available suffix for the class in the usage section of the documentation. The breakpoint suffix is optional and if not specified, the base class will be used. There are breakpoints for `sm`, `md`, `lg`, `xl`, and `2xl`, and the values for the corresponding breakpoints are defined below in the global variables `—pf-global—breakpoint—[breakpoint]`.
+
+### Using the variable system
+
+PatternFly 4 styles provide a default starting point. You can use the variable system to make adjustments to that default styling. When you change one or more elements, you should package those values into a new SCSS stylesheet to replace the default styling.
+
+Overrides to PatternFly variables should be made at the `:root` level for global variables or at the top-level component selector for component variables (for example, `.pf-c-button`), as these overrides will cascade down to children elements accordingly.
+
+Example:
+- Change the global primary color to red, but keep the original primary blue color as the background for primary buttons.
+  ```css
+  /* Override global primary color 100 to red */
+  :root {
+    --pf-global--primary-color--100: var(--pf-global--palette--red-400);
+  }
+
+  /* Override the above override for only the primary button background color */
+  .pf-c-button {
+    --pf-c-button--m-primary--BackgroundColor: var(--pf-global--palette--blue-400);
+  }
+  ```
+
+## Global CSS variables
+
+<CSSVariables prefix="patternfly_variables" selector=":root" hideSelectorColumn />
+
+## Chart CSS variables
+
+<CSSVariables prefix="patternfly_charts" hideSelectorColumn />