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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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)
 
 

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.0-alpha.46",
+  "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.35",
+    "@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",
@@ -80,5 +80,5 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "726a937b50610088bdbce0177f22651e35803f15"
+  "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) => (