@patternfly/documentation-framework 1.0.0

package/components/footer/footer.js

@@ -0,0 +1,262 @@
+import React from "react";
+import {
+    Brand,
+    Grid,
+    GridItem,
+    List,
+    PageSection
+} from "@patternfly/react-core";
+import { Link } from '@patternfly/documentation-framework/components';
+import { GithubIcon, TwitterIcon } from "@patternfly/react-icons";
+import redhatLogo from "./RHLogo.png";
+import logo from '../../layouts/logo.svg';
+
+export const Footer = () => (
+  <React.Fragment>
+    <PageSection key="footer-1" className="ws-org-pfsite-l-footer">
+      <Grid>
+        <GridItem
+          sm={12}
+          md={6}
+          mdOffset={1}
+          className="pf-u-mb-lg pf-u-mb-0-on-sm"
+        >
+          <Grid className="pf-u-py-xl">
+            <GridItem sm={6} md={4} className="pf-u-ml-md pf-u-ml-0-on-md pf-u-mb-xl pf-u-mb-0-on-md">
+              <p
+                className="pf-c-title ws-org-pfsite-footer-menu-list-title"
+              >
+                QUICKLINKS
+              </p>
+              <nav aria-label="Quick Links">
+                <List isPlain className="ws-org-pfsite-footer-menu-list">
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to={"/get-started/about"}
+                      aria-label="Get started with PatternFly 4"
+                    >
+                      Get started
+                    </Link>
+                  </li>
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="/components/about-modal"
+                      aria-label="PatternFly 4 components"
+                    >
+                      Components
+                    </Link>
+                  </li>
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="/layouts/bullseye"
+                      aria-label="PatternFly 4 layouts"
+                    >
+                      Layouts
+                    </Link>
+                  </li>
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="/guidelines/colors"
+                      aria-label="PatternFly 4 styles"
+                    >
+                      Styles
+                    </Link>
+                  </li>
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="https://www.patternfly.org/v3/"
+                      target="top"
+                      aria-label="View the PatternFly 3 website"
+                    >
+                      PatternFly 3
+                    </Link>
+                  </li>
+                </List>
+              </nav>
+            </GridItem>
+            <GridItem
+              sm={6}
+              md={4}
+              className="pf-u-mt-lg pf-u-mt-0-on-sm pf-u-ml-md pf-u-ml-0-on-md pf-u-mb-xl pf-u-mb-0-on-md"
+            >
+              <p
+                className="pf-c-title ws-org-pfsite-footer-menu-list-title"
+              >
+                CONTRIBUTE
+              </p>
+              <nav aria-label="Contribute">
+                <List isPlain className="ws-org-pfsite-footer-menu-list">
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="/get-started/design"
+                      aria-label="How to contribute as a Designer"
+                    >
+                      Designers
+                    </Link>
+                  </li>
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="/get-started/develop"
+                      aria-label="How to contribute as a Developer"
+                    >
+                      Developers
+                    </Link>
+                  </li>
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="https://github.com/patternfly/patternfly/blob/main/CODE_OF_CONDUCT.md"
+                      target="top"
+                      aria-label="PatternFly 4 Code of Conduct"
+                    >
+                      Code of Conduct
+                    </Link>
+                  </li>
+                </List>
+              </nav>
+            </GridItem>
+            <GridItem
+              sm={6}
+              md={4}
+              className="pf-u-mt-lg pf-u-mt-0-on-md pf-u-ml-md pf-u-ml-0-on-md"
+            >
+              <p
+                className="ws-org-pfsite-footer-menu-list-title"
+              >
+                STAY IN TOUCH
+              </p>
+              <nav aria-label="Stay in touch">
+                <List isPlain className="ws-org-pfsite-footer-menu-list">
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="//slack.patternfly.org"
+                      target="top"
+                      aria-label="Join the PatternFly 4 Slack"
+                    >
+                      Slack
+                    </Link>
+                  </li>
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="//forum.patternfly.org"
+                      target="top"
+                      aria-label="Visit the PatternFly 4 forum"
+                    >
+                      Forum
+                    </Link>
+                  </li>
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="//redhat.com/mailman/listinfo/patternfly"
+                      target="top"
+                      aria-label="Join the PatternFly 4 mailing list"
+                    >
+                      Mailing list
+                    </Link>
+                  </li>
+                  <li className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="//medium.com/patternfly"
+                      target="top"
+                      aria-label="Read the PatternFly 4 blog"
+                    >
+                      PatternFly Medium
+                    </Link>
+                  </li>
+                </List>
+              </nav>
+            </GridItem>
+          </Grid>
+        </GridItem>
+        <GridItem sm={12} md={4}>
+          <Grid className="pf-u-pt-xl ws-org-pfsite-l-footer-column">
+            <GridItem className="pf-u-px-xl">
+              <Link
+                className="pf-c-page__header-brand-link pf-c-brand ws-org-pfsite-footer-menu-about-logo pf-u-pb-md"
+                to="/"
+              >
+                <Brand src={logo} alt="Patternfly Logo" />
+              </Link>
+              <p className="ws-org-pfsite-footer-menu-about-description">
+                PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.
+              </p>
+            </GridItem>
+            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-u-px-xl">
+              <Link
+                to="//github.com/patternfly"
+                target="top"
+                aria-label="Link to PatternFly GitHub page"
+              >
+                <GithubIcon />
+              </Link>
+              <Link
+                to="//twitter.com/patternfly"
+                target="top"
+                aria-label="Link to PatternFly Twitter page"
+              >
+                <TwitterIcon />
+              </Link>
+            </GridItem>
+          </Grid>
+        </GridItem>
+      </Grid>
+    </PageSection>
+    <PageSection key="footer-2" className="ws-org-pfsite-l-footer-dark pf-m-no-fill">
+      <Grid className="pf-u-py-xl-on-sm pf-u-py-0-on-md pf-u-align-items-center">
+        <GridItem md={2} mdOffset={1}>
+          <Link
+            to="//www.redhat.com"
+            target="top"
+            aria-label="Visit Red Hat.com"
+          >
+            <img
+              src={redhatLogo}
+              alt="Red Hat logo"
+              width="145px"
+              height="613px"
+            />
+          </Link>
+        </GridItem>
+        <GridItem md={4} lg={3} xl={2}>
+          <span className="ws-org-pfsite-site-copyright">
+            Copyright &copy; 2022 Red Hat, Inc.
+          </span>
+        </GridItem>
+        <GridItem md={4} lg={5} className="pf-u-ml-xl-on-xl">
+          <Link
+            to="//www.redhat.com/en/about/privacy-policy"
+            target="top"
+            aria-label="Privacy statement"
+          >
+            Privacy statement
+          </Link>
+          <Link
+            to="//www.redhat.com/en/about/terms-use"
+            target="top"
+            aria-label="Terms of use"
+          >
+            Terms of use
+          </Link>
+          <Link
+            to="//www.redhat.com/en/about/all-policies-guidelines"
+            target="top"
+            aria-label="All policies and guidelines"
+          >
+            All policies and guidelines
+          </Link>
+        </GridItem>
+      </Grid>
+    </PageSection>
+  </React.Fragment>
+);

package/components/gdprBanner/gdprBanner.css

@@ -0,0 +1,14 @@
+.ws-gdpr-banner-container {
+  width: 100vw;
+  position: fixed;
+  bottom: 10px;
+  z-index: 201;
+  justify-content: center;
+}
+
+#ws-gdpr-banner {
+  max-width: 95vw;
+  flex-wrap: nowrap;
+  background: var(--pf-global--BackgroundColor--100);
+  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--Color--100);
+}

package/components/gdprBanner/gdprBanner.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import './gdprBanner.css';
+
+export const GdprBanner = () => {
+  const initialBannerOpen = typeof window !== 'undefined' && window.localStorage && !localStorage.getItem('gdpr-banner-closed');
+  const [ isBannerOpen, setBannerOpen ] = React.useState(initialBannerOpen);
+  
+  const closeBanner = () => {
+    localStorage.setItem('gdpr-banner-closed', 'true');
+    setBannerOpen(false);
+  }
+
+  return !isBannerOpen ? null : (
+    <div className="ws-gdpr-banner-container pf-l-flex">
+      <div id="ws-gdpr-banner" className="pf-l-flex pf-u-py-md pf-m-align-items-center">
+        <p id="ws-gdpr-banner-text" className="pf-u-ml-xl">
+          We use cookies on our websites to deliver our online services.
+          Details about how we use cookies and how you may disable them are set out in our <a href="//www.redhat.com/en/about/privacy-policy">Privacy Statement</a>.
+          By using this website you agree to our use of cookies.
+        </p>
+        <div className="pf-m-align-self-flex-start">
+          <Button variant="plain" aria-label="Close banner" onClick={closeBanner}>
+            <TimesIcon />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/index.js

@@ -0,0 +1,12 @@
+export * from './autoLinkHeader/autoLinkHeader';
+export * from './cssVariables/cssVariables';
+export * from './cssVariables/cssSearch';
+export * from './example/example';
+export * from './footer/footer';
+export * from './gdprBanner/gdprBanner';
+export * from './propsTable/propsTable';
+export * from './sideNav/sideNav';
+export * from './topNav/topNav';
+export * from './link/link';
+export * from './tableOfContents/tableOfContents';
+export * from './inlineAlert/inlineAlert';

package/components/inlineAlert/inlineAlert.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Alert } from '@patternfly/react-core';
+
+export const InlineAlert = ({
+  title,
+  variant = 'info',
+  children
+}) => (
+  <Alert
+    variant={variant}
+    title={title}
+    className="pf-u-my-md"
+    style={{ marginBottom: '1rem' }}
+    isInline
+    titleHeadingLevel="h2"
+  >
+    {children}
+  </Alert>
+);

package/components/link/link.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Link as ReachLink, navigate } from '@reach/router';
+import { getAsyncComponent } from '../../routes';
+
+const Promiseany = (Promise.any || function ($) {
+  return new Promise(function (D, E, A, L) {
+    A = [];
+    L = $.map(function ($, i) {
+      return Promise.resolve($).then(D, function (O) {
+        return ((A[i] = O), --L) || E({errors: A});
+      });
+    }).length;
+  });
+}).bind(Promise);
+
+export const Link = ({
+  href,
+  to,
+  onMouseOver = () => {},
+  onClick,
+  ...props
+}) => {
+  let preloadPromise;
+  let url = href || to || '';
+  if (url.startsWith('#') && !onClick) {
+    onClick = ev => {
+      ev.preventDefault(); // Don't use client-side routing
+      // Chrome does not jump until ALL network requests finish.
+      // We have to force it to...
+      const referencedElement = document.getElementById(url.replace('#', ''));
+      if (referencedElement) {
+        referencedElement.scrollIntoView();
+      }
+      // update URL without triggering route change
+      history.pushState({}, '', url);
+    };
+  }
+  if (url.includes('//') || url.startsWith('#')) {
+    return <a href={url} onClick={onClick} {...props} />;
+  }
+  else if (url.startsWith('/')) {
+    url = `${process.env.pathPrefix}/${url.substr(1)}`;
+
+    if (!process.env.PRERENDER) {
+      const Component = getAsyncComponent(url);
+      if (Component) {
+        // Preload on hover
+        props.onMouseOver = () => {
+          preloadPromise = Component.preload();
+          onMouseOver();
+        };
+        // Wait up to an extra 500ms on click before showing 'Loading...'
+        props.onClick = ev => {
+          if (!(ev.ctrlKey || ev.metaKey)) { // avoid disallowing cmnd/ctrl+click opening in new tab
+            ev.preventDefault();
+            if (typeof window !== 'undefined' && url !== location.pathname) {
+              Promiseany([
+                preloadPromise,
+                new Promise(res => setTimeout(res, 500))
+              ]).then(() => navigate(url));
+            }
+          }
+        };
+      }
+    }
+  }
+  return <ReachLink to={url} {...props} />;
+}

package/components/propsTable/propTypeWithLinks.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { slugger } from "../../helpers/slugger";
+
+export const PropTypeWithLinks = ({ type, allPropComponents }) => {
+  // If this type contains the names of any other components on this page as full words, turn them into links.
+  const referencedComponentNames = allPropComponents
+    .filter((component) => type.match(new RegExp(`\\b${component.name}\\b`)))
+    .map((component) => component.name);
+  if (referencedComponentNames.length > 0) {
+    return (
+      <React.Fragment>
+        {type
+          .split(new RegExp(`\\b(${referencedComponentNames.join("|")})\\b`))
+          .map((segment, i) =>
+            referencedComponentNames.includes(segment) ? (
+              <a
+                key={segment + i}
+                onClick={(event) => {
+                  event.preventDefault();
+                  document.getElementById(slugger(segment)).scrollIntoView();
+                }}
+              >
+                {segment}
+              </a>
+            ) : (
+              segment
+            )
+          )}
+      </React.Fragment>
+    );
+  }
+  return type;
+};

package/components/propsTable/propsTable.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Badge } from '@patternfly/react-core';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  cellWidth
+} from '@patternfly/react-table';
+import { AutoLinkHeader } from '../autoLinkHeader/autoLinkHeader';
+import { PropTypeWithLinks } from './propTypeWithLinks';
+import { css } from '@patternfly/react-styles';
+import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
+export const PropsTable = ({
+  title,
+  rows,
+  allPropComponents
+}) => {
+  const columns = [
+    { title: 'Name', transforms: [cellWidth(20)] },
+    { title: 'Type', transforms: [cellWidth(20)] },
+    { title: 'Default', transforms: [] },
+    { title: 'Description', transforms: [] }
+  ];
+
+  return (
+    <React.Fragment>
+      <AutoLinkHeader size="h3">
+        {title}
+      </AutoLinkHeader>
+      <Table
+        className="pf-u-mt-md pf-u-mb-lg"
+        variant="compact"
+        aria-label={title}
+        caption={<div><span className="ws-prop-required">*</span>required</div>}
+        cells={columns}
+        gridBreakPoint="grid-lg"
+        rows={rows
+          // Sort required rows first
+          .sort((a,b) => a.required === b.required
+            ? 0
+            : a.required ? -1 : 1)
+          .map((row, idx) => ({
+            cells: [
+              <div className="pf-m-break-word">
+                {row.deprecated && 'Deprecated: '}
+                {row.name}
+                {row.required ? (
+                  <React.Fragment key={`${row.name}-required-prop`}>
+                    <span aria-hidden="true" key={`${row.name}-asterisk`} className="ws-prop-required">
+                      *
+                    </span>
+                    <span key={`${row.name}-required`} className={css(accessibleStyles.screenReader)}>
+                      required
+                    </span>
+                  </React.Fragment>
+                ) : ''}
+                {row.beta && (
+                  <Badge key={`${row.name}-${idx}`} className="ws-beta-badge pf-u-ml-sm">
+                    Beta
+                  </Badge>
+                )}
+              </div>,
+              <div className="pf-m-break-word">
+                <PropTypeWithLinks type={row.type} allPropComponents={allPropComponents} />
+              </div>,
+              <div className="pf-m-break-word">
+                {row.defaultValue}
+              </div>,
+              <div className="pf-m-break-word">
+                {row.description}
+              </div>
+            ]
+          }))
+        }
+      >
+        <TableHeader />
+        <TableBody />
+      </Table>
+    </React.Fragment>
+  );
+}

package/components/sideNav/sideNav.css

@@ -0,0 +1,17 @@
+.ws-page-sidebar .pf-c-nav {
+  --pf-c-nav__link--before--BorderBottomWidth: 0;
+  --pf-c-nav--m-light__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+  --pf-c-nav--m-light__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+  --pf-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+  --pf-c-nav--m-light__link--active--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+  --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
+}
+
+.ws-side-nav-list .pf-c-nav__item.pf-m-expandable::before {
+  border-bottom: 0;
+}
+
+.pf-c-nav__subsection-title {
+  color: var(--ws-toc-link--Color, var(--pf-global--Color--300));
+  font-size: var(--pf-global--FontSize--sm);
+}

package/components/sideNav/sideNav.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Link } from '../link/link';
+import { Nav, NavList, NavExpandable, PageContextConsumer, capitalize } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import { Location } from '@reach/router';
+import { slugger } from '../../helpers';
+import globalBreakpointXl from "@patternfly/react-tokens/dist/esm/global_breakpoint_xl";
+import { trackEvent } from '../../helpers';
+
+const NavItem = ({ text, href }) => {
+  const isMobileView = window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
+  return (
+    <PageContextConsumer key={href + text}>
+      {({onNavToggle, isNavOpen }) => (
+          <li key={href + text} className="pf-c-nav__item" onClick={() => isMobileView && onNavToggle()}>
+            <Link
+              to={href}
+              getProps={({ isCurrent, href, location }) => {
+                const { pathname } = location;
+                return {
+                  className: css(
+                    'pf-c-nav__link',
+                    (isCurrent || pathname.startsWith(href + '/')) && 'pf-m-current'
+                  )
+                }}
+              }
+              tabIndex={isNavOpen ? undefined : -1}
+            >
+              {text}
+            </Link>
+          </li>
+      )}
+    </PageContextConsumer>
+  )
+};
+
+export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const overflowElement = document.getElementById('page-sidebar');
+    if (!overflowElement) {
+      return;
+    }
+    const activeElements = overflowElement.getElementsByClassName('pf-m-current');
+    if (activeElements.length > 0) {
+      const lastElement = activeElements[activeElements.length - 1];
+      lastElement.scrollIntoView({ block: 'center' });
+    }
+  }, []);
+  
+  return (
+    <Nav aria-label="Side Nav" theme="light">
+      <NavList className="ws-side-nav-list">
+        {navItems.map(({ section, text, href }) => section
+          ? (
+            <Location key={section}>
+              {({ location }) => {
+                const isActive = location.pathname.startsWith(`${process.env.pathPrefix}/${slugger(section)}`);
+                return (
+                  <NavExpandable
+                    title={capitalize(section.replace(/-/g, ' '))}
+                    isActive={isActive}
+                    isExpanded={isActive}
+                    className="ws-side-nav-group"
+                    onClick={(event) => {
+                      // Don't trigger for bubbled events from NavItems
+                      if (!event.target.href) {
+                        const isExpanded = event.currentTarget.classList.contains('pf-m-expanded');
+                        // 1 === expand section, 0 === collapse section
+                        trackEvent('sidenav_section_click', 'click_event', section, isExpanded ? 0 : 1);
+                      }
+                    }}
+                  >
+                    {Object.entries(groupedRoutes[section] || {})
+                      .filter(([, { hideNavItem }]) => !Boolean(hideNavItem))
+                      .map(([id, { slug }]) => ({ text: id, href: slug }))
+                      .sort(({ text: text1 }, { text: text2 }) => text1.localeCompare(text2))
+                      .map(NavItem)
+                    }
+                  </NavExpandable>
+                );
+              }}
+            </Location>
+          )
+          : NavItem({
+              text: text || capitalize(href.replace(/\//g, '').replace(/-/g, ' ')),
+              href: href
+            })
+        )}
+      </NavList>
+    </Nav>
+  );
+}