[LOOM-1313][BpkSectionHeader] Class2 Fixes (#3380)

* trial with spans * set textStyle * set as h2 tag --------- Co-authored-by: metalix2 <matthewr@skyscanner.net>
Skyscanner · Apr 23, 2024 · af5e312 · af5e312
1 parent eba7bf6
commit af5e312
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 23 deletions.
diff --git a/packages/bpk-component-section-header/src/BpkSectionHeader.module.scss b/packages/bpk-component-section-header/src/BpkSectionHeader.module.scss
@@ -40,6 +40,7 @@
   }
 
   &__title {
+    @include typography.bpk-text;
     @include typography.bpk-heading-2;
 
     @include breakpoints.bpk-breakpoint-mobile {

diff --git a/packages/bpk-component-section-header/src/BpkSectionHeader.tsx b/packages/bpk-component-section-header/src/BpkSectionHeader.tsx
@@ -52,19 +52,12 @@ const BpkSectionHeader = ({
         `bpk-section-header__title-description--${type}`,
       )}
     >
-      <BpkText
-        tagName="h2"
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        className={getClassName('bpk-section-header__title')}
-      >
-        {title}
-      </BpkText>
-      {description && <BpkText 
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        className={getClassName('bpk-section-header__description')}>{description}
-      </BpkText>}
+      <h2 className={getClassName('bpk-section-header__title')}>{title}</h2>
+      {description && (
+        <span className={getClassName('bpk-section-header__description')}>
+          <BpkText>{description}</BpkText>
+        </span>
+      )}
     </div>
     {button}
   </div>

diff --git a/packages/bpk-component-section-header/src/__snapshots__/BpkSectionHeader-test.tsx.snap b/packages/bpk-component-section-header/src/__snapshots__/BpkSectionHeader-test.tsx.snap
@@ -9,7 +9,7 @@ exports[`BpkSectionHeader should render correctly 1`] = `
       class="bpk-section-header__title-description bpk-section-header__title-description--default"
     >
       <h2
-        class="bpk-text bpk-text--body-default bpk-section-header__title"
+        class="bpk-section-header__title"
       >
         Section title
       </h2>
@@ -27,14 +27,18 @@ exports[`BpkSectionHeader should render correctly with "type" prop 1`] = `
       class="bpk-section-header__title-description bpk-section-header__title-description--on-dark"
     >
       <h2
-        class="bpk-text bpk-text--body-default bpk-section-header__title"
+        class="bpk-section-header__title"
       >
         Section title
       </h2>
       <span
-        class="bpk-text bpk-text--body-default bpk-section-header__description"
+        class="bpk-section-header__description"
       >
-        Section title description
+        <span
+          class="bpk-text bpk-text--body-default"
+        >
+          Section title description
+        </span>
       </span>
     </div>
     <button
@@ -56,14 +60,18 @@ exports[`BpkSectionHeader should render correctly with a "description" prop 1`]
       class="bpk-section-header__title-description bpk-section-header__title-description--default"
     >
       <h2
-        class="bpk-text bpk-text--body-default bpk-section-header__title"
+        class="bpk-section-header__title"
       >
         Section title
       </h2>
       <span
-        class="bpk-text bpk-text--body-default bpk-section-header__description"
+        class="bpk-section-header__description"
       >
-        Section title description
+        <span
+          class="bpk-text bpk-text--body-default"
+        >
+          Section title description
+        </span>
       </span>
     </div>
   </div>
@@ -79,14 +87,18 @@ exports[`BpkSectionHeader should render correctly with an "button" prop 1`] = `
       class="bpk-section-header__title-description bpk-section-header__title-description--default"
     >
       <h2
-        class="bpk-text bpk-text--body-default bpk-section-header__title"
+        class="bpk-section-header__title"
       >
         Section title
       </h2>
       <span
-        class="bpk-text bpk-text--body-default bpk-section-header__description"
+        class="bpk-section-header__description"
       >
-        Section title description
+        <span
+          class="bpk-text bpk-text--body-default"
+        >
+          Section title description
+        </span>
       </span>
     </div>
     <button