From 540598bb5da94ff115e13e2bba0ad0583aef403a Mon Sep 17 00:00:00 2001 From: YoungJi Lee <19427244+youngji0827@users.noreply.github.com> Date: Tue, 14 May 2024 15:17:36 +0100 Subject: [PATCH] [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 | 1 + examples/bpk-component-text/examples.js | 16 +++ examples/bpk-component-text/stories.js | 4 +- package-lock.json | 8 +- package.json | 2 +- .../bpk-component-text/src/BpkText-test.tsx | 96 +++++++------ .../src/BpkText.module.scss | 12 ++ packages/bpk-component-text/src/BpkText.tsx | 3 + .../src/__snapshots__/BpkText-test.tsx.snap | 132 ------------------ packages/bpk-mixins/_typography.scss | 51 +++++++ packages/bpk-stylesheets/README.md | 8 ++ packages/bpk-stylesheets/larken.js | 19 +++ packages/bpk-stylesheets/larken.scss | 37 +++++ packages/package-lock.json | 8 +- packages/package.json | 2 +- 15 files changed, 215 insertions(+), 184 deletions(-) delete mode 100644 packages/bpk-component-text/src/__snapshots__/BpkText-test.tsx.snap create mode 100644 packages/bpk-stylesheets/larken.js create mode 100644 packages/bpk-stylesheets/larken.scss diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 034bb8a095..5d1e47d383 100644 --- a/.storybook/preview.tsx +++ b/.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, { diff --git a/examples/bpk-component-text/examples.js b/examples/bpk-component-text/examples.js index af1983c11f..f2a39431c9 100644 --- a/examples/bpk-component-text/examples.js +++ b/examples/bpk-component-text/examples.js @@ -144,12 +144,27 @@ const LabelStylesExample = () => ( ); +const LarkenStylesExample = () => ( +
+ + Editorial 1 + + + Editorial 2 + + + Editorial 3 + +
+); + const MixedExample = () => (
+
); @@ -162,5 +177,6 @@ export { HeroStylesExample, BodyStylesExample, LabelStylesExample, + LarkenStylesExample, MixedExample, }; diff --git a/examples/bpk-component-text/stories.js b/examples/bpk-component-text/stories.js index 21812c2c5d..7468c3e2c4 100644 --- a/examples/bpk-component-text/stories.js +++ b/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, }; diff --git a/package-lock.json b/package-lock.json index f263604b13..867d0144f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,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", @@ -4653,9 +4653,9 @@ } }, "node_modules/@skyscanner/bpk-foundations-web": { - "version": "17.11.0", - "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-web/-/bpk-foundations-web-17.11.0.tgz", - "integrity": "sha512-NE+CHZxDBN0ng1rfJprSnh0PuiK45Sb0b5EqWjAQyK79SdiQPRtyX+7W9WaW8EwO/Xy1FVToiUsny3tDOaRDug==", + "version": "17.13.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-web/-/bpk-foundations-web-17.13.0.tgz", + "integrity": "sha512-AAgIk6QlfZccMeJJvuu0pT9aS3//bLHK6W+nvWuWST4q8DEH26x1Ov6MnWqkxHp42RRL5Ss56MBXEApo38gLnA==", "dev": true, "dependencies": { "@skyscanner/bpk-foundations-common": "^6.11.0", diff --git a/package.json b/package.json index 9696f4d0ea..26a13a5622 100644 --- a/package.json +++ b/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", diff --git a/packages/bpk-component-text/src/BpkText-test.tsx b/packages/bpk-component-text/src/BpkText-test.tsx index 07abb1d7b8..a766d1c444 100644 --- a/packages/bpk-component-text/src/BpkText-test.tsx +++ b/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( - - 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. - , - ); - expect(asFragment()).toMatchSnapshot(); + const { getByText } = render({text}); + + expect(getByText(text)).toHaveClass('bpk-text bpk-text--body-default'); }); - it('should render correctly with tageName="h1", textStyle="xxl"', () => { - const { asFragment } = render( - - 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. - , - ); - expect(asFragment()).toMatchSnapshot(); + ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach((tagName) => { + it(`should render correctly with tagName="${tagName}"`, () => { + const { getByRole } = render( + + {text} + , + ); + + expect(getByRole('heading')).toHaveClass('bpk-text bpk-text--xxl'); + }); }); - it('should render correctly with tageName="text"', () => { - const { asFragment } = render( - - 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. - , - ); - expect(asFragment()).toMatchSnapshot(); + it('should render correctly with tagName="text"', () => { + const { getByText } = render({text}); + + expect(getByText(text)).toHaveClass('bpk-text bpk-text--body-default'); + }); + + it('should render correctly with tagName="span"', () => { + const { getByText } = render({text}); + + 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({text}); + + 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 - - 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. - , + {text}, ); - 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( - - 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. - , + const { getByText } = render( + {text}, ); - 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( + {text}, + ); + + expect(getByText(text)).toHaveClass(`bpk-text bpk-text--${textStyle}`); + }); + }); }); diff --git a/packages/bpk-component-text/src/BpkText.module.scss b/packages/bpk-component-text/src/BpkText.module.scss index 7b601cf939..4fd1380e19 100644 --- a/packages/bpk-component-text/src/BpkText.module.scss +++ b/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; + } } diff --git a/packages/bpk-component-text/src/BpkText.tsx b/packages/bpk-component-text/src/BpkText.tsx index 775326cf05..2354073bcc 100644 --- a/packages/bpk-component-text/src/BpkText.tsx +++ b/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]; diff --git a/packages/bpk-component-text/src/__snapshots__/BpkText-test.tsx.snap b/packages/bpk-component-text/src/__snapshots__/BpkText-test.tsx.snap deleted file mode 100644 index 2050b24c62..0000000000 --- a/packages/bpk-component-text/src/__snapshots__/BpkText-test.tsx.snap +++ /dev/null @@ -1,132 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkText should pass down unknown props 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with tageName="h1", textStyle="xxl" 1`] = ` - -

- 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. -

- -`; - -exports[`BpkText should render correctly with tageName="text" 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with textStyle="base" 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with textStyle="lg" 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with textStyle="sm" 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with textStyle="xl" 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with textStyle="xs" 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with textStyle="xxl" 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with textStyle="xxxl" 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with textStyle="xxxxl" 1`] = ` - - - 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. - - -`; - -exports[`BpkText should render correctly with textStyle="xxxxxl" 1`] = ` - - - 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. - - -`; diff --git a/packages/bpk-mixins/_typography.scss b/packages/bpk-mixins/_typography.scss index 8aa6d3ecc1..a23314476f 100644 --- a/packages/bpk-mixins/_typography.scss +++ b/packages/bpk-mixins/_typography.scss @@ -498,6 +498,57 @@ ); } +/// Editorial 1 text style +/// +/// @example scss +/// .selector { +/// @include bpk-editorial-1; +/// } + +@mixin bpk-editorial-1 { + font-family: $bpk-font-family-larken; + + @include _bpk-text-factory( + $bpk-font-size-xxxxl, + $bpk-line-height-xxxxl, + $bpk-font-weight-light + ); +} + +/// Editorial 2 text style +/// +/// @example scss +/// .selector { +/// @include bpk-editorial-2; +/// } + +@mixin bpk-editorial-2 { + font-family: $bpk-font-family-larken; + + @include _bpk-text-factory( + $bpk-font-size-xxl, + $bpk-line-height-xxl, + $bpk-font-weight-light + ); +} + +/// Editorial 3 text style +/// +/// @example scss +/// .selector { +/// @include bpk-editorial-3; +/// } + +@mixin bpk-editorial-3 { + font-family: $bpk-font-family-larken; + + @include _bpk-text-factory( + $bpk-font-size-lg, + $bpk-line-height-lg, + $bpk-font-weight-book + ); +} + /// Hero 1 text style /// /// @example scss diff --git a/packages/bpk-stylesheets/README.md b/packages/bpk-stylesheets/README.md index 9d9af55604..06d56a15c2 100644 --- a/packages/bpk-stylesheets/README.md +++ b/packages/bpk-stylesheets/README.md @@ -20,6 +20,14 @@ By default font rendering is not included if you need to include Skyscanner Rela import '@skyscanner/backpack-web/bpk-stylesheets/font'; ``` +### Larken font + +For Editorial text, the Larken font will also need to be imported: + +```js +import '@skyscanner/backpack-web/bpk-stylesheets/larken'; +``` + ## Contributing Don't forget to rebuild and commit `base.js` after you make changes to this package. diff --git a/packages/bpk-stylesheets/larken.js b/packages/bpk-stylesheets/larken.js new file mode 100644 index 0000000000..9af1667d79 --- /dev/null +++ b/packages/bpk-stylesheets/larken.js @@ -0,0 +1,19 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2016 Skyscanner Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import './larken.scss'; diff --git a/packages/bpk-stylesheets/larken.scss b/packages/bpk-stylesheets/larken.scss new file mode 100644 index 0000000000..339875b238 --- /dev/null +++ b/packages/bpk-stylesheets/larken.scss @@ -0,0 +1,37 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2016 Skyscanner Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$base-url: 'https://js.skyscnr.com/sttc/bpk-fonts'; + +@font-face { + font-family: Larken; + font-style: normal; + font-weight: 300; + src: + url('#{$base-url}/Larken-Light-8371ea16.woff2') format('woff2'), + url('#{$base-url}/Larken-Light-39e53c9a.woff') format('woff'); +} + +@font-face { + font-family: Larken; + font-style: normal; + font-weight: 400; + src: + url('#{$base-url}/Larken-Regular-3d9dfe29.woff2') format('woff2'), + url('#{$base-url}/Larken-Regular-626ee28c.woff') format('woff'); +} diff --git a/packages/package-lock.json b/packages/package-lock.json index 2dfa8fac06..6e55510c59 100644 --- a/packages/package-lock.json +++ b/packages/package-lock.json @@ -13,7 +13,7 @@ "@popperjs/core": "^2.11.8", "@radix-ui/react-slider": "^1.1.2", "@react-google-maps/api": "^2.12.0", - "@skyscanner/bpk-foundations-web": "^17.11.0", + "@skyscanner/bpk-foundations-web": "^17.13.0", "@skyscanner/bpk-svgs": "^19.3.0", "a11y-focus-scope": "^1.1.3", "a11y-focus-store": "^1.0.0", @@ -428,9 +428,9 @@ } }, "node_modules/@skyscanner/bpk-foundations-web": { - "version": "17.11.0", - "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-web/-/bpk-foundations-web-17.11.0.tgz", - "integrity": "sha512-NE+CHZxDBN0ng1rfJprSnh0PuiK45Sb0b5EqWjAQyK79SdiQPRtyX+7W9WaW8EwO/Xy1FVToiUsny3tDOaRDug==", + "version": "17.13.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-web/-/bpk-foundations-web-17.13.0.tgz", + "integrity": "sha512-AAgIk6QlfZccMeJJvuu0pT9aS3//bLHK6W+nvWuWST4q8DEH26x1Ov6MnWqkxHp42RRL5Ss56MBXEApo38gLnA==", "dependencies": { "@skyscanner/bpk-foundations-common": "^6.11.0", "color": "^4.2.3" diff --git a/packages/package.json b/packages/package.json index 2cb63117cc..119f197ac7 100644 --- a/packages/package.json +++ b/packages/package.json @@ -26,7 +26,7 @@ "@popperjs/core": "^2.11.8", "@radix-ui/react-slider": "^1.1.2", "@react-google-maps/api": "^2.12.0", - "@skyscanner/bpk-foundations-web": "^17.11.0", + "@skyscanner/bpk-foundations-web": "^17.13.0", "@skyscanner/bpk-svgs": "^19.3.0", "a11y-focus-scope": "^1.1.3", "a11y-focus-store": "^1.0.0",