BpKContentCards LOOM-1276 (#3298)

* BpKContentCards LOOM-1276 * Remove BpKText and use regular element with conditional CSS * fixed at 0 * Use mixin for margin reset instead * attempt 2 * fixed stylelint issues * fix for setting appropriate margin top and bottom * revert to using getclassname and add visual tests * just leave the more complex three card visual test --------- Co-authored-by: James Ronald <[email protected]>
Skyscanner · Mar 25, 2024 · 1e802fe · 1e802fe
1 parent a17c722
commit 1e802fe
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 14 deletions.
diff --git a/examples/bpk-component-content-cards/stories.ts b/examples/bpk-component-content-cards/stories.ts
@@ -34,3 +34,5 @@ export const DefaultOneCard = WithOneCardExample;
 export const DefaultTwoCards = WithTwoCardsExample;
 
 export const DefaultThreeCards = WithThreeCardsExample;
+
+export const VisualTestThreeCards = WithThreeCardsExample;
diff --git a/packages/bpk-component-content-cards/src/BpkContentCards.js b/packages/bpk-component-content-cards/src/BpkContentCards.js
@@ -17,9 +17,6 @@
  */
 /* eslint react/no-array-index-key: 0 */
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkText from '../../bpk-component-text';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkContentCard from './BpkContentCard';
@@ -48,12 +45,7 @@ const BpkContentCards = ({ cards, heading }: Props) => {
 
   return (
     <div>
-      <BpkText
-        tagName="h2"
-        className={getClassName('bpk-content-cards--header-text')}
-      >
-        {heading}
-      </BpkText>
+      <h2 className={getClassName('bpk-content-cards--header-text')}>{heading}</h2>
       <div role="list" className={getClassName('bpk-content-cards--layout')}>
         {cards.map((card, index) => (
           <div role="listitem" key={index}>

diff --git a/packages/bpk-component-content-cards/src/BpkContentCards.module.scss b/packages/bpk-component-content-cards/src/BpkContentCards.module.scss
@@ -25,8 +25,7 @@
 
 .bpk-content-cards {
   &--header-text {
-    margin-bottom: tokens.bpk-spacing-base();
-
+    @include typography.bpk-paragraph;
     @include typography.bpk-heading-2;
 
     @include breakpoints.bpk-breakpoint-mobile {

diff --git a/packages/bpk-component-content-cards/src/__snapshots__/BpkContentCards-test.js.snap b/packages/bpk-component-content-cards/src/__snapshots__/BpkContentCards-test.js.snap
@@ -4,7 +4,7 @@ exports[`Content Card widget renders correctly with 1 card 1`] = `
 <DocumentFragment>
   <div>
     <h2
-      class="bpk-text bpk-text--body-default bpk-content-cards--header-text"
+      class="bpk-content-cards--header-text"
     >
       Header for the component
     </h2>
@@ -54,7 +54,7 @@ exports[`Content Card widget renders correctly with 2 cards 1`] = `
 <DocumentFragment>
   <div>
     <h2
-      class="bpk-text bpk-text--body-default bpk-content-cards--header-text"
+      class="bpk-content-cards--header-text"
     >
       Header for the component
     </h2>
@@ -137,7 +137,7 @@ exports[`Content Card widget renders correctly with 3 cards 1`] = `
 <DocumentFragment>
   <div>
     <h2
-      class="bpk-text bpk-text--body-default bpk-content-cards--header-text"
+      class="bpk-content-cards--header-text"
     >
       Header for the component
     </h2>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,3 +34,5 @@ export const DefaultOneCard = WithOneCardExample;
		export const DefaultTwoCards = WithTwoCardsExample;

		export const DefaultThreeCards = WithThreeCardsExample;

		export const VisualTestThreeCards = WithThreeCardsExample;