fix(CatalogItemHeader): use PF component over h1

Author: logonoff

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>