@patternfly/patternfly-doc-core 1.8.0 → 1.8.2

package/src/components/Navigation.astro

@@ -15,8 +15,7 @@ const collections = await Promise.all(
 )
 
 const navDataRaw = collections.flat();
-const uniqueSections = new Set(navDataRaw.map((entry) => entry.data.section));
-const navData: Record<string, TextContentEntry[]> = {};
+const uniqueSections = new Set(navDataRaw.map((entry) => entry.data.section as string));
 
 const [orderedSections, unorderedSections] = Array.from(uniqueSections).reduce(
     (acc, section) => {
@@ -37,7 +36,7 @@ const [orderedSections, unorderedSections] = Array.from(uniqueSections).reduce(
   )
 
 const sortedSections = [...orderedSections, ...unorderedSections.sort()]
-sortedSections.map((section) => {
+const navData = sortedSections.map((section) => {
   const entries = navDataRaw
     .filter((entry) => entry.data.section === section)
     .map(entry => ({ id: entry.id, data: { id: entry.data.id, section, sortValue: entry.data.sortValue }} as TextContentEntry))
@@ -68,7 +67,7 @@ sortedSections.map((section) => {
     return a.data.id.localeCompare(b.data.id)
   })
 
-  navData[section] = sortedUniqueEntries;
+  return sortedUniqueEntries
 })
 
 ---

package/src/components/Navigation.tsx

@@ -2,9 +2,8 @@ import { useEffect, useState } from 'react'
 import { Nav, NavList, PageSidebarBody } from '@patternfly/react-core'
 import { NavSection } from './NavSection'
 import { type TextContentEntry } from './NavEntry'
-
 interface NavigationProps {
-  navData: Record<string, TextContentEntry[]>
+  navData: TextContentEntry[][]
 }
 
 export const Navigation: React.FunctionComponent<NavigationProps> = ({
@@ -29,14 +28,17 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     <PageSidebarBody id="page-sidebar-body">
       <Nav onSelect={onNavSelect}>
         <NavList>
-          {Object.entries(navData).map(([key, value], index) => (
-            <NavSection
-              key={index}
-              entries={value}
-              sectionId={key}
-              activeItem={activeItem}
-            />
-          ))}
+          {navData.map((navEntries) => {
+            const { section } = navEntries[0].data
+            return (
+              <NavSection
+                key={section}
+                entries={navEntries}
+                sectionId={section}
+                activeItem={activeItem}
+              />
+            )
+          })}
         </NavList>
       </Nav>
     </PageSidebarBody>

package/src/components/PropsTable.tsx

@@ -11,6 +11,7 @@ import {
 import { css } from '@patternfly/react-styles'
 import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'
 import textStyles from '@patternfly/react-styles/css/utilities/Text/text'
+import { Content } from '@patternfly/react-core'
 
 export type ComponentProp = {
   name: string
@@ -36,7 +37,6 @@ export const PropsTable: React.FunctionComponent<PropsTableProps> = ({
   componentDescription,
   componentProps,
 }) => {
-  const SectionHeading = headingLevel
   const publicProps = componentProps?.filter((prop) => !prop.isHidden)
   const hasPropsToRender = !!publicProps?.length
 
@@ -77,7 +77,7 @@ export const PropsTable: React.FunctionComponent<PropsTableProps> = ({
 
   return (
     <div>
-      <SectionHeading>{componentName}</SectionHeading>
+      <Content component={headingLevel}>{componentName}</Content>
       <Stack hasGutter>
         {componentDescription && (
           <div

package/src/components/PropsTables.astro

@@ -1,5 +1,7 @@
 ---
 import { PropsTable } from './PropsTable'
+import { Stack, StackItem } from '@patternfly/react-core'
+import { AutoLinkHeader } from './AutoLinkHeader'
 
 async function getPropsData(propComponents?: string[]) {
   if (!propComponents || propComponents.length === 0) {
@@ -25,14 +27,26 @@ const propsData = await getPropsData(propComponents)
 ---
 
 {
-  propsData
-    .filter((comp: any) => !!comp)
-    .map((component: any) => (
-      <PropsTable
-        key={component.name}
-        componentName={component.name}
-        componentDescription={component.description}
-        componentProps={component.props}
-      />
-    ))
+  <Stack hasGutter>
+    <StackItem>
+      <AutoLinkHeader
+        headingLevel="h2"
+        className="pf-v6-c-content--h2"
+        id="props-table"
+      >
+        Props
+      </AutoLinkHeader>
+    </StackItem>
+    {propsData
+      .filter((comp: any) => !!comp)
+      .map((component: any) => (
+        <StackItem key={component.name}>
+          <PropsTable
+          componentName={component.name}
+          componentDescription={component.description}
+          componentProps={component.props}
+          />
+        </StackItem>
+    ))}
+  </Stack>
 }

package/src/layouts/Main.astro

@@ -38,4 +38,32 @@ import Navigation from '../components/Navigation.astro'
       ?.querySelector('html')
       ?.classList.toggle('pf-v6-theme-dark', themePreference === 'dark')
   })
+
+  const scrollToHash = (hash: string) => {
+    const targetElement = document.querySelector(hash)
+    if (targetElement) {
+      targetElement.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    if (window.location.hash) {
+      const hash = window.location.hash
+
+      // Without this, page would focus on anchor link without scrolling to it
+      history.replaceState(null, '', ' ')
+
+      setTimeout(() => {
+        scrollToHash(hash)
+        history.replaceState(null, '', hash)
+      }, 500)
+    }
+  })
+
+  // Handle changes that happen after the initial page load
+  window.addEventListener('hashchange', () => {
+    if (window.location.hash) {
+      scrollToHash(window.location.hash)
+    }
+  })
 </script>

package/src/styles/global.scss

@@ -14,6 +14,7 @@
 
 .ws-heading {
   position: relative;
+  scroll-margin-top: 3rem;
 }
 
 .ws-heading-anchor {

package/dist/client/_astro/Navigation.CnvE1VCH.js

@@ -1 +0,0 @@
-import{j as n}from"./Button.IBWho7ny.js";import{r as d}from"./index.eCxJ45ll.js";import{k as c,s as m}from"./index.CAChmxYj.js";import{c as p,b as l,e as v,N as x,d as j}from"./PageSidebarBody.vGxFk_DU.js";/* empty css                        */import"./angle-left-icon.C3MzYN3k.js";import"./divider.O4WEhuBq.js";import"./index.BQFV5hT1.js";import"./page.BTC3Kf3x.js";import"./PageContext.ipir86Hm.js";const u=({entry:s,isActive:o})=>{const{id:a}=s,{id:r,section:e}=s.data,t=e==="components"||e==="layouts"?c(r):a;return n.jsx(p,{itemId:t,to:`/${e}/${t}`,isActive:o,id:`nav-entry-${t}`,children:r})},N=({entries:s,sectionId:o,activeItem:a})=>{const r=window.location.pathname.includes(c(o)),e=s.some(i=>i.id===a),t=s.map(i=>n.jsx(u,{entry:i,isActive:a===i.id||window.location.pathname.includes(c(i.data.id))},i.id));return n.jsx(l,{title:m(o),isActive:e,isExpanded:r,id:`nav-section-${o}`,children:t})},k=({navData:s})=>{const[o,a]=d.useState("");d.useEffect(()=>{a(window.location.pathname.split("/").reverse()[0])},[]);const r=(e,t)=>{a(t.itemId.toString())};return n.jsx(v,{id:"page-sidebar-body",children:n.jsx(x,{onSelect:r,children:n.jsx(j,{children:Object.entries(s).map(([e,t],i)=>n.jsx(N,{entries:t,sectionId:e,activeItem:o},i))})})})};export{k as Navigation};

package/dist/server/chunks/CSSTable_Dj2CroFz.mjs

@@ -1,4 +0,0 @@
-import './astro/server_Cl9jPh4p.mjs';
-import 'kleur/colors';
-export { $ as default, a as file, b as url } from './CSSTable_CG80uW98.mjs';
-import './Stack_Xm3fJVbK.mjs';

package/dist/server/chunks/Stack_Xm3fJVbK.mjs

@@ -1,22 +0,0 @@
-import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
-/* empty css                          */
-import { c as css } from './Button_DVSwQ8oX.mjs';
-
-const styles = {
-  "modifiers": {
-    "fill": "pf-m-fill",
-    "gutter": "pf-m-gutter"
-  },
-  "stack": "pf-v6-l-stack",
-  "stackItem": "pf-v6-l-stack__item"
-};
-
-const Stack = (_a) => {
-    var { hasGutter = false, className = '', children = null, component = 'div' } = _a, props = __rest(_a, ["hasGutter", "className", "children", "component"]);
-    const Component = component;
-    return (jsx(Component, Object.assign({}, props, { className: css(styles.stack, hasGutter && styles.modifiers.gutter, className), children: children })));
-};
-Stack.displayName = 'Stack';
-
-export { Stack as S, styles as s };