@patternfly/documentation-framework 6.0.0-alpha.45 → 6.0.0-alpha.47

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.0.0-alpha.47 (2024-06-17)
+
+
+### Features
+
+* **docs-framework:** Update AutoLinkHeader to use the Text component ([#4049](https://github.com/patternfly/patternfly-org/issues/4049)) ([3a9c9a0](https://github.com/patternfly/patternfly-org/commit/3a9c9a08ff373def8b751b947e70580dcbc9e6da))
+
+
+
+
+
+# 6.0.0-alpha.46 (2024-06-17)
+
+
+### Bug Fixes
+
+* lots of bumps ([#4103](https://github.com/patternfly/patternfly-org/issues/4103)) ([b0a146d](https://github.com/patternfly/patternfly-org/commit/b0a146dbd0fc16a65c5f1787c5b8308a8008e6ac))
+
+
+
+
+
 # 6.0.0-alpha.45 (2024-06-12)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/autoLinkHeader/autoLinkHeader.css

@@ -3,7 +3,7 @@
 }
 
 .ws-heading-anchor {
-/*   color: var(--pf-v6-global--Color--100); */
+  color: var(--pf-t--global--icon--color--regular);
   transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%);
   opacity: 0;
   position: absolute;

package/components/autoLinkHeader/autoLinkHeader.js

@@ -1,23 +1,12 @@
 import React from 'react';
-import { Title, Flex, FlexItem, Text } from '@patternfly/react-core';
+import { Flex, FlexItem, Text } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 import { Link } from '../link/link';
 import { slugger } from '../../helpers/slugger';
 import { css } from '@patternfly/react-styles';
 
-// "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
-const sizes = {
-  h1: '3xl',
-  h2: '2xl',
-  h3: 'xl',
-  h4: 'lg',
-  h5: 'md',
-  h6: 'sm'
-}
-
 export const AutoLinkHeader = ({
   id,
-  size,
   headingLevel,
   children,
   metaText,
@@ -28,10 +17,9 @@ export const AutoLinkHeader = ({
   return (
     <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
       <FlexItem>
-        <Title
+        <Text
           id={slug}
-          size={sizes[size]}
-          headingLevel={headingLevel || size}
+          component={headingLevel}
           className={css('ws-heading', className)}
           tabIndex={-1}
         >
@@ -39,9 +27,9 @@ export const AutoLinkHeader = ({
             <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
           </Link>
           {children}
-        </Title>
+        </Text>
       </FlexItem>
-      <FlexItem>{metaText}</FlexItem>
+      {metaText && <FlexItem>{metaText}</FlexItem>}
     </Flex>
   )
 };

package/components/cssVariables/cssVariables.js

@@ -170,7 +170,7 @@ export class CSSVariables extends React.Component {
   render() {
     return (
       <React.Fragment>
-        {this.props.autoLinkHeader && <AutoLinkHeader size="h3" className="pf-v6-u-mt-lg pf-v6-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
+        {this.props.autoLinkHeader && <AutoLinkHeader headingLevel="h3" className="pf-v6-u-mt-lg pf-v6-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
         <CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
         <Table
           variant="compact"

package/components/example/example.js

@@ -249,42 +249,43 @@ export const Example = ({
     '/' +
     slugger(title);
 
+  const hasMetaText = isBeta || isDemo || isDeprecated || false;
+  const tooltips = (<React.Fragment>
+    {isBeta && (
+      <Tooltip content="This beta component is currently under review and is still open for further evolution.">
+        <Button variant="plain" hasNoPadding>
+          <Label isCompact color="blue">
+            Beta
+          </Label>
+        </Button>
+      </Tooltip>
+    )}
+    {isDemo && (
+      <Tooltip content="Demos show how multiple components can be used in a single design.">
+        <Button variant="plain" hasNoPadding>
+          <Label isCompact color="purple">
+            Demo
+          </Label>
+        </Button>
+      </Tooltip>
+    )}
+    {isDeprecated && (
+      <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
+        <Button variant="plain" hasNoPadding>
+          <Label isCompact color="grey">
+            Deprecated
+          </Label>
+        </Button>
+      </Tooltip>
+    )}
+  </React.Fragment>);
+  const metaText = hasMetaText && tooltips
+
   return (
     <div className="ws-example">
       <div className="ws-example-header">
         <AutoLinkHeader
-          metaText={
-            <React.Fragment>
-              {isBeta && (
-                <Tooltip content="This beta component is currently under review and is still open for further evolution.">
-                  <Button variant="plain" hasNoPadding>
-                    <Label isCompact color="blue">
-                      Beta
-                    </Label>
-                  </Button>
-                </Tooltip>
-              )}
-              {isDemo && (
-                <Tooltip content="Demos show how multiple components can be used in a single design.">
-                  <Button variant="plain" hasNoPadding>
-                    <Label isCompact color="purple">
-                      Demo
-                    </Label>
-                  </Button>
-                </Tooltip>
-              )}
-              {isDeprecated && (
-                <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
-                  <Button variant="plain" hasNoPadding>
-                    <Label isCompact color="grey">
-                      Deprecated
-                    </Label>
-                  </Button>
-                </Tooltip>
-              )}
-            </React.Fragment>
-          }
-          size="h4"
+          metaText={metaText}
           headingLevel="h3"
           className="ws-example-heading"
         >

package/components/propsTable/propsTable.js

@@ -17,7 +17,7 @@ import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibili
 
 export const PropsTable = ({ title, description, rows, allPropComponents }) => (
   <React.Fragment>
-    <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
+    <AutoLinkHeader headingLevel="h3">{title}</AutoLinkHeader>
     <Table className="pf-v6-u-mt-md pf-v6-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
       <Caption>
         {description && <div className="pf-v6-u-mb-md">{description}</div>}

package/layouts/sideNavLayout/sideNavLayout.js

@@ -273,7 +273,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
     </PageSidebar>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead className="ws-masthead">
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -338,7 +338,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
           id="ws-page"
           mainContainerId="ws-page-main"
           mainComponent="div"
-          header={Header}
+          masthead={masthead}
           sidebar={SideBar}
           skipToContent={<SkipToContent href="#ws-page-main">Skip to content</SkipToContent>}
           isManagedSidebar

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.0-alpha.45",
+  "version": "6.0.0-alpha.47",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -13,7 +13,7 @@
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.34",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.36",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "^9.1.3",
@@ -74,11 +74,11 @@
   },
   "peerDependencies": {
     "@patternfly/patternfly": "6.0.0-alpha.139",
-    "@patternfly/react-code-editor": "6.0.0-alpha.61",
-    "@patternfly/react-core": "6.0.0-alpha.61",
-    "@patternfly/react-table": "6.0.0-alpha.61",
+    "@patternfly/react-code-editor": "6.0.0-alpha.69",
+    "@patternfly/react-core": "6.0.0-alpha.69",
+    "@patternfly/react-table": "6.0.0-alpha.69",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "f2a23c790dc3fa35274135eae4ea72a5a965f679"
+  "gitHead": "dc491607328d5182bf4c16432b416ed415c9a74f"
 }

package/scripts/md/anchor-header.js

@@ -42,7 +42,7 @@ function anchorHeader(tocCallback) {
         // Add to TOC for indexing
         addTOCItem(tocItem, node.tagName);
 
-        node.properties.size = node.tagName;
+        node.properties.headingLevel = node.tagName;
         node.properties.className = node.properties.className || '';
         node.properties.className += node.properties.className ? ' ' : '';
         node.properties.className += `ws-title ws-${node.tagName}`;

package/templates/mdx.js

@@ -104,7 +104,7 @@ const MDXChildTemplate = ({
           <Component />
           {functionDocumentation.length > 0 && (
             <React.Fragment>
-              <AutoLinkHeader size="h2" className="pf-v6-c-content--h2" id="functions">
+              <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="functions">
                 Functions
               </AutoLinkHeader>
               <FunctionsTable functionDescriptions={functionDocumentation}/>
@@ -112,7 +112,7 @@ const MDXChildTemplate = ({
           )}
           {propsTitle && (
             <React.Fragment>
-              <AutoLinkHeader size="h2" className="pf-v6-c-content--h2" id="props">
+              <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="props">
                 {propsTitle}
               </AutoLinkHeader>
               {propComponents.map(component => (
@@ -128,7 +128,7 @@ const MDXChildTemplate = ({
           )}
           {cssPrefix.length > 0 && (
             <React.Fragment>
-              <AutoLinkHeader size="h2" className="pf-v6-c-content--h2" id="css-variables">
+              <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="css-variables">
                 {cssVarsTitle}
               </AutoLinkHeader>
               {cssPrefix.map((prefix, index) => (