[WALL-1371][BpkText] Add Larken TextStyles to Backpack (#3435)

[WALL-1371][BpkText] Add Larken TextStyles to Backpack (#3435)

* Add Larken TextStyles to Backpack
* Update typo in README
* bump bpk-foundations
* BpkText test and add to VR test
* test to use RTL queries and remove snaps
* fix VR test
* use the factory
* use new font-weight token
* Update package-lock.json

.storybook/preview.tsx

@@ -21,6 +21,7 @@ import { Title, PRIMARY_STORY } from '@storybook/blocks';
 
 import '../packages/bpk-stylesheets';
 import '../packages/bpk-stylesheets/font';
+import '../packages/bpk-stylesheets/larken';
 
 import BpkRtlToggle from '../packages/bpk-component-rtl-toggle';
 import BpkThemeToggle, {

examples/bpk-component-text/examples.js

@@ -144,12 +144,27 @@ const LabelStylesExample = () => (
   </div>
 );
 
+const LarkenStylesExample = () => (
+  <div>
+    <BpkText textStyle={TEXT_STYLES.editorial1} tagName="p">
+      Editorial 1
+    </BpkText>
+    <BpkText textStyle={TEXT_STYLES.editorial2} tagName="p">
+      Editorial 2
+    </BpkText>
+    <BpkText textStyle={TEXT_STYLES.editorial3} tagName="p">
+      Editorial 3
+    </BpkText>
+  </div>
+);
+
 const MixedExample = () => (
   <div>
     <HeroStylesExample />
     <HeadingStylesExample />
     <BodyStylesExample />
     <LabelStylesExample />
+    <LarkenStylesExample />
   </div>
 );
 
@@ -162,5 +177,6 @@ export {
   HeroStylesExample,
   BodyStylesExample,
   LabelStylesExample,
+  LarkenStylesExample,
   MixedExample,
 };

examples/bpk-component-text/stories.js

@@ -27,6 +27,7 @@ import {
   HeroStylesExample,
   BodyStylesExample,
   LabelStylesExample,
+  LarkenStylesExample,
   MixedExample,
 } from './examples';
 
@@ -45,9 +46,10 @@ export const HeroStyles = HeroStylesExample;
 export const HeadingStyles = HeadingStylesExample;
 export const BodyStyles = BodyStylesExample;
 export const LabelStyles = LabelStylesExample;
+export const LarkenStyles = LarkenStylesExample;
 
 export const VisualTest = MixedExample;
 export const VisualTestWithZoom = VisualTest.bind({});
 VisualTestWithZoom.args = {
-  zoomEnabled: true
+  zoomEnabled: true,
 };

package.json

@@ -121,7 +121,7 @@
     "@babel/register": "^7.23.7",
     "@percy/cli": "^1.28.2",
     "@percy/storybook": "^5.0.1",
-    "@skyscanner/bpk-foundations-web": "^17.11.0",
+    "@skyscanner/bpk-foundations-web": "^17.13.0",
     "@skyscanner/bpk-svgs": "^19.3.0",
     "@skyscanner/eslint-config-skyscanner": "^18.0.0",
     "@skyscanner/stylelint-config-skyscanner": "^11.1.0",

packages/bpk-component-text/src/BpkText-test.tsx

@@ -17,69 +17,83 @@
  */
 
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import BpkText from './BpkText';
 
-import type { TextStyle } from './BpkText';
+import type { Tag, TextStyle } from './BpkText';
 
 describe('BpkText', () => {
+  const text =
+    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.';
+
   it('should render correctly', () => {
-    const { asFragment } = render(
-      <BpkText>
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-        dis parturient montes, nascetur ridiculus mus.
-      </BpkText>,
-    );
-    expect(asFragment()).toMatchSnapshot();
+    const { getByText } = render(<BpkText>{text}</BpkText>);
+
+    expect(getByText(text)).toHaveClass('bpk-text bpk-text--body-default');
   });
 
-  it('should render correctly with tageName="h1", textStyle="xxl"', () => {
-    const { asFragment } = render(
-      <BpkText textStyle="xxl" tagName="h1">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-        dis parturient montes, nascetur ridiculus mus.
-      </BpkText>,
-    );
-    expect(asFragment()).toMatchSnapshot();
+  ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach((tagName) => {
+    it(`should render correctly with tagName="${tagName}"`, () => {
+      const { getByRole } = render(
+        <BpkText tagName={tagName as Tag} textStyle="xxl">
+          {text}
+        </BpkText>,
+      );
+
+      expect(getByRole('heading')).toHaveClass('bpk-text bpk-text--xxl');
+    });
   });
 
-  it('should render correctly with tageName="text"', () => {
-    const { asFragment } = render(
-      <BpkText tagName="text">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-        dis parturient montes, nascetur ridiculus mus.
-      </BpkText>,
-    );
-    expect(asFragment()).toMatchSnapshot();
+  it('should render correctly with tagName="text"', () => {
+    const { getByText } = render(<BpkText tagName="text">{text}</BpkText>);
+
+    expect(getByText(text)).toHaveClass('bpk-text bpk-text--body-default');
+  });
+
+  it('should render correctly with tagName="span"', () => {
+    const { getByText } = render(<BpkText tagName="span">{text}</BpkText>);
+
+    expect(getByText(text)).toHaveClass('bpk-text bpk-text--body-default');
+    expect(getByText(text)).toBeInstanceOf(HTMLSpanElement);
+  });
+
+  it('should render correctly with tagName="p"', () => {
+    const { getByText } = render(<BpkText tagName="p">{text}</BpkText>);
+
+    expect(getByText(text)).toHaveClass('bpk-text bpk-text--body-default');
+    expect(getByText(text)).toBeInstanceOf(HTMLParagraphElement);
   });
 
   it('should pass down unknown props', () => {
-    const { asFragment } = render(
+    const { getByText } = render(
       // eslint-disable-next-line backpack/use-tokens
-      <BpkText style={{ color: 'red' }}>
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-        dis parturient montes, nascetur ridiculus mus.
-      </BpkText>,
+      <BpkText style={{ color: 'red' }}>{text}</BpkText>,
     );
-    expect(asFragment()).toMatchSnapshot();
+
+    expect(getByText(text)).toHaveClass('bpk-text bpk-text--body-default');
+    expect(getByText(text)).toHaveAttribute('style', 'color: red;');
   });
 
   ['xs', 'sm', 'base', 'lg', 'xl', 'xxl', 'xxxl', 'xxxxl', 'xxxxxl'].forEach(
     (textStyle) => {
       it(`should render correctly with textStyle="${textStyle}"`, () => {
-        const { asFragment } = render(
-          <BpkText textStyle={textStyle as TextStyle}>
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-          </BpkText>,
+        const { getByText } = render(
+          <BpkText textStyle={textStyle as TextStyle}>{text}</BpkText>,
         );
-        expect(asFragment()).toMatchSnapshot();
+
+        expect(getByText(text)).toHaveClass(`bpk-text bpk-text--${textStyle}`);
       });
     },
   );
+
+  ['editorial1', 'editorial2', 'editorial3'].forEach((textStyle) => {
+    it(`should render correctly with textStyle="${textStyle}"`, () => {
+      const { getByText } = render(
+        <BpkText textStyle={textStyle as TextStyle}>{text}</BpkText>,
+      );
+
+      expect(getByText(text)).toHaveClass(`bpk-text bpk-text--${textStyle}`);
+    });
+  });
 });

packages/bpk-component-text/src/BpkText.module.scss

@@ -128,4 +128,16 @@
   &--hero-5 {
     @include typography.bpk-hero-5;
   }
+
+  &--editorial-1 {
+    @include typography.bpk-editorial-1;
+  }
+
+  &--editorial-2 {
+    @include typography.bpk-editorial-2;
+  }
+
+  &--editorial-3 {
+    @include typography.bpk-editorial-3;
+  }
 }

packages/bpk-component-text/src/BpkText.tsx

@@ -52,6 +52,9 @@ export const TEXT_STYLES = {
   hero3: 'hero-3',
   hero4: 'hero-4',
   hero5: 'hero-5',
+  editorial1: 'editorial-1',
+  editorial2: 'editorial-2',
+  editorial3: 'editorial-3',
 } as const;
 
 export type TextStyle = (typeof TEXT_STYLES)[keyof typeof TEXT_STYLES];