@patternfly/documentation-framework 1.2.67 → 1.2.68

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.2.68 (2022-11-28)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 ## 1.2.67 (2022-11-22)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/layouts/sideNavLayout/sideNavLayout.css

@@ -27,78 +27,16 @@
 }
 
 /* Search */
-#ws-global-search-wrapper {
-  /* For icon */
-  position: relative;
-}
 #algolia-autocomplete-listbox-0 {
   /* Fix search results overflowing page */
   min-width: 480px !important;
 }
-#ws-global-search {
-  background-color: transparent;
-  border: none;
-  /* For icon */
-  padding-left: var(--pf-global--spacer--xl);
-  width: 200px;
-}
-.ws-hide-search-input .algolia-autocomplete,
-.ws-hide-search-input #ws-global-search {
-  display: none !important;
-}
-.ws-toggle-search {
-  /* Search icon is taller than it is wide */
-  margin-top: 2px;
-}
-#ws-global-search-wrapper > .global-search-icon {
-  position: absolute;
-  top: 10px;
-  left: 4px;
-}
-#ws-global-search,
-#ws-global-search::placeholder {
-  color: #fff;
-}
-#ws-global-search:focus {
-  outline-offset: 2px;
+.ws-global-search.pf-c-input-group {
+  /* remove white background on dark Masthead */
+  --pf-c-input-group--BackgroundColor: none;
 }
 
-/* TODO: PageHeaderTools on small viewports */
-@media (max-width: 670px) {
-  #ws-global-search-wrapper,
-  .ws-toggle-search {
-    display: none;
-    visibility: hidden;
-  }
-}
-@media (max-width: 430px) {
-  .ws-page-header > .pf-c-page__header-brand > .pf-c-page__header-brand-link {
-    display: none;
-    visibility: hidden;
-  }
-}
-
-/* Version toggle */
-.ws-org-version-toggle {
-  color: var(--pf-global--Color--light-100);
-}
-.ws-org-version-toggle::before {
-  content: none !important;
-}
-.ws-org-version-toggle:hover {
-  border-bottom: 1px solid #fff;
-}
-.ws-org-version-toggle-expanded::before {
-  border-left: none;
-  border-right: none;
-  border-top: none;
-  border-bottom: 2px solid #fff;
-}
 /* For tiny (200px) viewports */
-.ws-org-version-switcher .pf-c-dropdown__toggle  >.pf-c-dropdown__toggle-text {
-  white-space: normal;
-}
-
-.ws-github-pageheader {
-  color: var(--pf-global--Color--light-100) !important;
+.ws-masthead .pf-c-toolbar__item  {
+  min-width: 0;
 }

package/layouts/sideNavLayout/sideNavLayout.js

@@ -2,39 +2,51 @@ import React, { useEffect, useState } from 'react';
 import {
   Button,
   Page,
-  PageHeader,
   PageSidebar,
-  PageHeaderTools,
-  PageHeaderToolsItem,
-  TextInput,
   Brand,
   Dropdown,
   DropdownToggle,
   DropdownItem,
   DropdownGroup,
   Divider,
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadContent,
+  MastheadBrand,
+  PageToggleButton,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarContent,
+  ToolbarItem,
   SkipToContent,
-  Switch
+  Switch,
+  SearchInput
 } 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 BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-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';
+import logoMd from '@patternfly/patternfly/assets/images/logo__pf--reverse-on-md.svg';
+import logo from '@patternfly/patternfly/assets/images/logo__pf--reverse--base.svg';
+import logoBase from '@patternfly/patternfly/assets/images/logo__pf--reverse--base.png';
 
 const HeaderTools = ({
   versions,
   hasVersionSwitcher,
-  hasSearch,
+  algolia,
   hasDarkThemeSwitcher,
+  topNavItems,
   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 hasSearch = algolia;
+  const [isDropdownOpen, setDropdownOpen] = useState(false);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
+
   const getDropdownItem = version => (
     <DropdownItem
       key={version.name}
@@ -45,111 +57,103 @@ const HeaderTools = ({
       }
     />
   );
-  const searchRef = React.useRef();
+
+  const onChange = (value) => {
+    setSearchValue(value);
+  };
+
+  const onToggleExpand = (isSearchExpanded) => {
+    setIsSearchExpanded(!isSearchExpanded);
+  };
 
   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);
-  }, []);
+    // reattach algolia to input each time search is expanded
+    if (hasSearch && isSearchExpanded) {
+      attachDocSearch(algolia, '.ws-global-search .pf-c-text-input-group__text-input', 1000);
+    }
+  }, [isSearchExpanded])
 
   return (
-    <PageHeaderTools>
-      {hasDarkThemeSwitcher && (
-        <PageHeaderToolsItem>
-          <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() => 
-          document.querySelector('html').classList.toggle('pf-theme-dark')} />
-        </PageHeaderToolsItem>
-      )}
-      {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"
+    <Toolbar isFullHeight>
+      <ToolbarContent>
+        {topNavItems.length > 0 && (
+          <ToolbarItem className="pf-m-overflow-container">
+            <TopNav navItems={topNavItems} />
+          </ToolbarItem>
+        )}
+        <ToolbarGroup
+          alignment={{ default: 'alignRight' }}
+          spacerItems={{ default: 'spacerNone', md: 'spacerMd' }}
         >
-          <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://pf3.patternfly.org/"
-              >
-                PatternFly 3
-                <ExternalLinkAltIcon />
-              </DropdownItem>
-            ]}
-          />
-        </PageHeaderToolsItem>
-      )}
-    </PageHeaderTools>
+          {hasDarkThemeSwitcher && (
+            <ToolbarItem>
+              <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
+                document.querySelector('html').classList.toggle('pf-theme-dark')} />
+            </ToolbarItem>
+          )}
+          {hasSearch && (
+            <ToolbarItem>
+              <SearchInput
+                className="ws-global-search"
+                placeholder="Search"
+                value={searchValue}
+                onChange={onChange}
+                onClear={() => onChange('')}
+                expandableInput={{ isExpanded: isSearchExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
+              />
+            </ToolbarItem>
+          )}
+          <ToolbarItem>
+            <Button
+              component="a"
+              variant="plain"
+              href="//github.com/patternfly"
+              target="top"
+              aria-label="PatternFly GitHub page"
+            >
+              <GithubIcon />
+            </Button>
+          </ToolbarItem>
+          {hasVersionSwitcher && (
+            <ToolbarItem>
+              <Dropdown
+                isFullHeight
+                onSelect={() => setDropdownOpen(!isDropdownOpen)}
+                isOpen={isDropdownOpen}
+                toggle={(
+                  <DropdownToggle
+                    onToggle={() => setDropdownOpen(!isDropdownOpen)}
+                  >
+                    Release {initialVersion.name}
+                  </DropdownToggle>
+                )}
+                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://pf3.patternfly.org/"
+                  >
+                    PatternFly 3
+                    <ExternalLinkAltIcon />
+                  </DropdownItem>
+                ]}
+              />
+            </ToolbarItem>
+          )}
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
   );
 }
 
@@ -160,7 +164,7 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
       inputSelector,
       autocompleteOptions: {
         hint: false,
-        appendTo: `${inputSelector}-wrapper`,
+        appendTo: `.ws-global-search .pf-c-text-input-group`,
       },
       debug: process.env.NODE_ENV !== 'production',
       ...algolia
@@ -188,9 +192,6 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
     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) {
@@ -209,20 +210,36 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   );
 
   const Header = (
-    <PageHeader
-      className="ws-page-header"
-      headerTools={(algolia || hasVersionSwitcher) && <HeaderTools
-        versions={versions}
-        hasSearch={algolia}
-        hasVersionSwitcher={hasVersionSwitcher}
-        hasDarkThemeSwitcher={hasDarkThemeSwitcher}
-        pathPrefix={pathPrefix} />}
-      logo={prnum ? `PR #${prnum}` : <Brand src={logo} alt="Patternfly Logo" />}
-      logoProps={{ href: prurl || pathPrefix || '/' }}
-      showNavToggle
-      topNav={topNavItems.length > 0 && <TopNav navItems={topNavItems} />}
-    />
-  );
+    <Masthead className="ws-masthead">
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand href={prurl || pathPrefix || '/'}>
+          {prnum ? `PR #${prnum}` : (
+            <Brand src={logoBase} alt="PatternFly logo" widths={{ default: '180px', '2xl': '220px' }}>
+              <source media="(min-width: 768px)" srcSet={logoMd} />
+              <source srcSet={logo} />
+            </Brand>
+          )}
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        {(algolia || hasVersionSwitcher) && (
+          <HeaderTools
+            versions={versions}
+            algolia={algolia}
+            hasVersionSwitcher={hasVersionSwitcher}
+            hasDarkThemeSwitcher={hasDarkThemeSwitcher}
+            pathPrefix={pathPrefix}
+            topNavItems={topNavItems}
+          />
+        )}
+      </MastheadContent>
+    </Masthead>
+  )
 
   return (
     <React.Fragment>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "1.2.67",
+  "version": "1.2.68",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -85,5 +85,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "afa3104aee0156e2cb29a2393d70d3e314e0c31a"
+  "gitHead": "a4203fb1da4eca1a509e74dd9e62e9e2cdac2603"
 }