@patternfly/patternfly-doc-core 1.0.0 → 1.0.2

package/src/components/Toolbar.tsx

@@ -1,60 +1,18 @@
 import * as React from 'react'
-import { useState } from 'react'
 import {
-  Avatar,
   Button,
-  ButtonVariant,
-  Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownList,
-  MenuToggle,
-  type MenuToggleElement,
   Toolbar as PFToolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core'
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'
 
-import imgAvatar from '/avatarImg.svg?url'
+import { ToggleThemeSwitcher } from './toolbar/ToogleThemeSwitcher'
+import { SearchComponent } from './toolbar/SearchComponent'
+import { DocumentReleaseDropdown } from './toolbar/DocumentReleaseDropdown';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 
-import { KebabDropdownItems } from './KebabDropdownItems'
-import { UserDropdownItems } from './UserDropdownItems'
-
-export const Toolbar: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false)
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false)
-
-  const onDropdownToggle = () => {
-    setIsDropdownOpen(!isDropdownOpen)
-  }
-
-  const onDropdownSelect = () => {
-    setIsDropdownOpen(false)
-  }
-
-  const onKebabDropdownToggle = () => {
-    setIsKebabDropdownOpen(!isKebabDropdownOpen)
-  }
-
-  const onKebabDropdownSelect = () => {
-    setIsKebabDropdownOpen(false)
-  }
-
-  const onFullKebabDropdownToggle = () => {
-    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen)
-  }
-
-  const onFullKebabDropdownSelect = () => {
-    setIsFullKebabDropdownOpen(false)
-  }
-
-  return (
+export const Toolbar: React.FunctionComponent = () => (
     <PFToolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
@@ -63,111 +21,26 @@ export const Toolbar: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button
-              aria-label="Notifications"
-              variant={ButtonVariant.plain}
-              icon={<BellIcon />}
-            />
+            <ToggleThemeSwitcher/>
           </ToolbarItem>
-          <ToolbarGroup
-            variant="action-group-plain"
-            visibility={{ default: 'hidden', lg: 'visible' }}
-          >
-            <ToolbarItem>
-              <Button
-                aria-label="Settings"
-                variant={ButtonVariant.plain}
-                icon={<CogIcon />}
-              />
-            </ToolbarItem>
-            <ToolbarItem>
-              <Button
-                aria-label="Help"
-                variant={ButtonVariant.plain}
-                icon={<QuestionCircleIcon />}
-              />
-            </ToolbarItem>
-          </ToolbarGroup>
-          <ToolbarItem
-            visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}
-          >
-            <Dropdown
-              isOpen={isKebabDropdownOpen}
-              onSelect={onKebabDropdownSelect}
-              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
-              popperProps={{ position: 'right' }}
-              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  onClick={onKebabDropdownToggle}
-                  isExpanded={isKebabDropdownOpen}
-                  variant="plain"
-                  aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
-              )}
-            >
-              <DropdownList>
-                <KebabDropdownItems />
-              </DropdownList>
-            </Dropdown>
+          <ToolbarItem>
+            <SearchComponent/>
           </ToolbarItem>
-          <ToolbarItem visibility={{ md: 'hidden' }}>
-            <Dropdown
-              isOpen={isFullKebabDropdownOpen}
-              onSelect={onFullKebabDropdownSelect}
-              onOpenChange={(isOpen: boolean) =>
-                setIsFullKebabDropdownOpen(isOpen)
-              }
-              popperProps={{ position: 'right' }}
-              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  onClick={onFullKebabDropdownToggle}
-                  isExpanded={isFullKebabDropdownOpen}
-                  variant="plain"
-                  aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
-              )}
+          <ToolbarItem>
+            <Button
+              component="a"
+              variant="plain"
+              href="//github.com/patternfly"
+              target="top"
+              aria-label="PatternFly GitHub page"
             >
-              <DropdownGroup key="group 2" aria-label="User actions">
-                <DropdownList>
-                  <UserDropdownItems />
-                </DropdownList>
-              </DropdownGroup>
-              <Divider />
-              <DropdownList>
-                <KebabDropdownItems />
-              </DropdownList>
-            </Dropdown>
+                <GithubIcon />
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem>
+           <DocumentReleaseDropdown/>
           </ToolbarItem>
         </ToolbarGroup>
-        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <Dropdown
-            isOpen={isDropdownOpen}
-            onSelect={onDropdownSelect}
-            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
-            popperProps={{ position: 'right' }}
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                ref={toggleRef}
-                onClick={onDropdownToggle}
-                isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
-              >
-                Ned Username
-              </MenuToggle>
-            )}
-          >
-            <DropdownList>
-              <UserDropdownItems />
-            </DropdownList>
-          </Dropdown>
-        </ToolbarItem>
       </ToolbarContent>
     </PFToolbar>
   )
-}

package/src/components/toolbar/DocumentReleaseDropdown.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import {
+  Dropdown,
+  DropdownList,
+  MenuToggle,
+  DropdownGroup,
+  DropdownItem,
+  Divider,
+} from '@patternfly/react-core'
+import { Release } from '../../types'
+import versions from '../../versions.json'
+
+export const DocumentReleaseDropdown: React.FunctionComponent = () => {
+  const latestRelease = versions.Releases.find(
+    (release) => release.latest,
+  ) as Release
+  const previousReleases = Object.values(versions.Releases).filter(
+    (release) => !release.hidden && !release.latest,
+  ) as Release []
+
+  const previousVersions = Object.values(versions.ArchivedReleases) as Release[];
+
+  const [isDropdownOpen, setDropdownOpen] = React.useState(false)
+
+  const getDropdownItem = (version: Release, isLatest = false) => (
+    <DropdownItem
+      itemId={`${version.name}-latest-release`}
+      key={`${version.name}-latest`}
+      // eslint-disable-next-line no-nested-ternary
+      to={isLatest ? '/' : version.href ? version.href : `/${version.name}`}
+      isExternalLink = {version.href ? true : false}
+    >
+      {`Release ${version.name}`}
+    </DropdownItem>
+  )
+  return (
+    <Dropdown
+      onSelect={() => setDropdownOpen(!isDropdownOpen)}
+      onOpenChange={(isOpen) => setDropdownOpen(isOpen)}
+      isOpen={isDropdownOpen}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setDropdownOpen(!isDropdownOpen)}
+          isExpanded={isDropdownOpen}
+        >
+          {`Release ${latestRelease.name}`}
+        </MenuToggle>
+      )}
+      popperProps={{ position: 'right' }}
+    >
+      <DropdownGroup key="Latest" label="Latest">
+        <DropdownList>{getDropdownItem(latestRelease, true)}</DropdownList>
+      </DropdownGroup>
+      {previousReleases.length > 0 && (
+        <DropdownGroup key="Previous releases" label="Previous releases">
+          <DropdownList>
+            {previousReleases
+              .slice(0, 3)
+              .map((version) => getDropdownItem(version))}
+          </DropdownList>
+        </DropdownGroup>
+      )}
+      {previousVersions.length > 0 && ( 
+      <><Divider key="divider1" /><DropdownGroup key="Previous versions" label="Previous versions">
+          <DropdownList>
+            {previousVersions.map((version) => getDropdownItem(version))}
+          </DropdownList>
+        </DropdownGroup></>)}
+    </Dropdown>
+  )
+}

package/src/components/toolbar/SearchComponent.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+interface SearchComponentProps {
+    /* Indicates if search compoonent should be visible or not. */
+    searchEnabled?: boolean
+}
+
+export const SearchComponent : React.FunctionComponent<SearchComponentProps> = ({searchEnabled = true}) => {
+    const [searchValue, setSearchValue] = React.useState('');
+    const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
+
+    //TODO: Add search for algolia or alternative search to this component.
+
+    const onChange = (_evt: any, value: any) => {
+        setSearchValue(value);
+    };
+    
+    const onToggleExpand = (_evt: any, isSearchExpanded: boolean) => {
+        setIsSearchExpanded(!isSearchExpanded);
+    };
+    
+    
+    return (
+       searchEnabled && <SearchInput
+        className="ws-global-search"
+        placeholder="Search"
+        value={searchValue}
+        onChange={onChange}
+        onClear={(_evt) => onChange(_evt, '')}
+        expandableInput={{
+            isExpanded: isSearchExpanded,
+            onToggleExpand,
+            toggleAriaLabel: 'Expandable search input toggle'
+        }}
+        />
+    )
+}

package/src/components/toolbar/ToogleThemeSwitcher.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Icon, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'
+import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon'
+import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon'
+import { getThemePreference, updateThemePreference } from '../../utils/theme'
+
+export const ToggleThemeSwitcher: React.FunctionComponent = () => {
+  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
+
+  React.useEffect(() => {
+    // const darkTheme = window?.localStorage?.getItem('darkMode') === 'true' ? true : false;
+    // const html = document.querySelector('html') as HTMLHtmlElement
+    // html.classList.toggle('pf-v6-theme-dark', darkTheme)
+    const darkTheme = getThemePreference() === 'dark';
+    setIsDarkTheme(darkTheme);
+  }, []);
+
+  const toggleDarkTheme = (_evt: unknown, selected: boolean) => {
+    const darkThemeToggleClicked = !selected === isDarkTheme
+    updateThemePreference(darkThemeToggleClicked ? 'dark' : 'light');  
+    // const html = document.querySelector('html') as HTMLHtmlElement
+    // html.classList.toggle('pf-v6-theme-dark', darkThemeToggleClicked)
+    setIsDarkTheme(darkThemeToggleClicked); 
+    //localStorage.setItem('darkMode', JSON.stringify(darkThemeToggleClicked));
+  }
+
+  return (
+    <ToggleGroup aria-label="Dark theme toggle group">
+      <ToggleGroupItem
+        aria-label="light theme toggle"
+        icon={
+          <Icon size="md">
+            <SunIcon />
+          </Icon>
+        }
+        isSelected={!isDarkTheme}
+        onChange={toggleDarkTheme}
+      />
+      <ToggleGroupItem
+        aria-label="dark theme toggle"
+        icon={
+          <Icon size="md">
+            <MoonIcon />
+          </Icon>
+        }
+        isSelected={isDarkTheme}
+        onChange={toggleDarkTheme}
+      />
+    </ToggleGroup>
+  )
+}

package/src/layouts/Main.astro

@@ -5,6 +5,7 @@ import { ClientRouter } from 'astro:transitions'
 import Page from '../components/Page.astro'
 import Masthead from '../components/Masthead.astro'
 import Navigation from '../components/Navigation.astro'
+
 ---
 
 <html lang="en" transition:animate="none">
@@ -24,3 +25,13 @@ import Navigation from '../components/Navigation.astro'
     </Page>
   </body>
 </html>
+
+<script>
+  const themePreference = window.localStorage.getItem ('theme-preference');
+  document?.querySelector('html')?.classList.toggle('pf-v6-theme-dark', themePreference === 'dark' ); 
+  
+  document.addEventListener("astro:after-swap", () => {
+      const themePreference = window.localStorage.getItem ('theme-preference');
+      document?.querySelector('html')?.classList.toggle('pf-v6-theme-dark', themePreference === 'dark' ); 
+  });
+</script>

package/src/pages/index.astro

@@ -9,7 +9,7 @@ import MainLayout from '../layouts/Main.astro'
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
-    <title>Astro</title>
+    <title>PatternFly</title>
   </head>
   <body>
     <MainLayout title="PatternFly X Astro"> Page content </MainLayout>

package/src/types.ts

@@ -0,0 +1,9 @@
+export type Release = {
+    name: string;
+    date?: string;
+    latest?: string;
+    hidden?: boolean,
+    versions?: any,
+    href?: string
+}
+

package/src/utils/theme.ts

@@ -0,0 +1,20 @@
+export type Theme = 'dark' | 'light' | 'system';
+
+export const updateThemePreference = (theme: Theme) => {
+   if(typeof window !== undefined) { 
+        window?.localStorage?.setItem('theme-preference', theme)
+        document?.querySelector('html')?.classList.toggle('pf-v6-theme-dark', theme === 'dark' );     
+   };
+};
+export const getThemePreference =  (): Theme => { 
+    const theme =  window?.localStorage?.getItem ('theme-preference');
+    return theme !== undefined ? (theme as Theme) : 'system'; 
+};
+
+export const themeLoader = () => {
+    if(typeof window !== 'undefined') {   
+        window.addEventListener('DOMContentLoaded', ()=>  {
+            updateThemePreference(getThemePreference());    
+        })
+    };
+}