Merge pull request patternfly#80 from logonoff/patch

fix(CatalogItemHeader): use PF component over `h1`

Author: nicolethoen

packages/module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-catalog-view-extension",
-  "version": "6.0.0-prerelease.0",
+  "version": "6.1.0-prerelease.0",
   "description": "This library provides catalog view extensions for PatternFly 4 React.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,18 +40,18 @@
     "patternfly"
   ],
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0",
-    "@patternfly/react-styles": "^6.0.0"
+    "@patternfly/react-core": "^6.1.0",
+    "@patternfly/react-styles": "^6.1.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "^6.0.0",
-    "@patternfly/documentation-framework": "6.0.0-alpha.120",
-    "@patternfly/react-table": "^6.0.0",
-    "@patternfly/react-code-editor": "^6.0.0",
+    "@patternfly/patternfly": "^6.1.0",
+    "@patternfly/documentation-framework": "6.5.14",
+    "@patternfly/react-table": "^6.1.0",
+    "@patternfly/react-code-editor": "^6.1.0",
     "@octokit/rest": "^18.0.0",
     "surge": "^0.23.1",
     "react-monaco-editor": "0.51.0",

packages/module/patternfly-docs/content/examples/catalogItemHeader.css

@@ -17,7 +17,6 @@
   margin-inline-start: var(--pf-t--global--spacer--md);
 }
 .ws-react-e-catalog-item-header .catalog-item-header-pf-title {
-  font-weight: var(--pf-t--global--font--weight--body);
   margin-block-end: 0;
   margin-block-start: 0;
 }

packages/module/sass/react-catalog-view-extension/_catalog-item.scss

@@ -13,12 +13,6 @@
   margin-left: 20px;
 }
 
-.catalog-item-header-pf-title {
-  font-weight: 400;
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
 .catalog-item-header-pf-subtitle {
   color: var(--pf-t--global--text--color--subtle);
   margin-bottom: 0;

packages/module/src/components/CatalogItemHeader/CatalogItemHeader.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Content, Title } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 
 export interface CatalogItemHeaderProps extends Omit<React.HTMLProps<HTMLElement>, 'title'> {
@@ -26,8 +27,8 @@ export const CatalogItemHeader: React.FunctionComponent<CatalogItemHeaderProps>
     {iconImg && <img className="catalog-item-header-pf-icon" src={iconImg} alt="" />}
     {!iconImg && iconClass && <span className={`catalog-item-header-pf-icon ${iconClass}`} />}
     <div className="catalog-item-header-pf-text">
-      <h1 className="catalog-item-header-pf-title">{title}</h1>
-      {vendor && <h5 className="catalog-item-header-pf-subtitle">{vendor}</h5>}
+      <Title headingLevel="h1" className="catalog-item-header-pf-title">{title}</Title>
+      {vendor && <Content component="p" className="catalog-item-header-pf-subtitle">{vendor}</Content>}
     </div>
   </header>
 );

packages/module/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.tsx.snap

@@ -9,12 +9,19 @@ exports[`simple catalog item header 1`] = `
       class="catalog-item-header-pf-text"
     >
       <h1
-        class="catalog-item-header-pf-title"
+        class="pf-v6-c-title pf-m-h1 catalog-item-header-pf-title"
+        data-ouia-component-id="OUIA-Generated-Title-1"
+        data-ouia-component-type="PF6/Title"
+        data-ouia-safe="true"
       >
         PatternFly
       </h1>
-      <h5
-        class="catalog-item-header-pf-subtitle"
+      <p
+        class="pf-v6-c-content--p catalog-item-header-pf-subtitle"
+        data-ouia-component-id="OUIA-Generated-Content-1"
+        data-ouia-component-type="PF6/Content"
+        data-ouia-safe="true"
+        data-pf-content="true"
       >
         <span>
           provided by 
@@ -24,7 +31,7 @@ exports[`simple catalog item header 1`] = `
             Red Hat
           </a>
         </span>
-      </h5>
+      </p>
     </div>
   </header>
 </DocumentFragment>