diff --git a/.github/workflows/required-primary-checks.yml b/.github/workflows/required-primary-checks.yml index 2336d79fd8..c5bc8c0e5b 100644 --- a/.github/workflows/required-primary-checks.yml +++ b/.github/workflows/required-primary-checks.yml @@ -62,7 +62,7 @@ jobs: npm i --no-progress --no-audit react@17 react-dom@17 @types/react@17.0.40 @types/react-dom@17 --prefix="./packages/plasma-web" - name: Lerna bootstrap by scope - run: npx lerna bootstrap --scope=@salutejs/plasma-{ui,web,b2c,temple,hope,new-hope,core} + run: npx lerna bootstrap --scope=@salutejs/plasma-{ui,web,b2c,temple,hope,new-hope,core,icons} - name: Unit tests for React 17 run: npm run test -- --scope=@salutejs/plasma-{ui,web,b2c,temple} diff --git a/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png b/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png index a94de18f5e..937cff0f84 100644 Binary files a/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png and b/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png b/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png index 04b2ba1df4..344889ef89 100644 Binary files a/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png and b/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png b/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png new file mode 100644 index 0000000000..46c819cf5e Binary files /dev/null and b/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png b/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png index 84585279b9..5e6e4ef254 100644 Binary files a/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png and b/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png differ diff --git a/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png b/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png index 97cbdb1c9a..b390640bbc 100644 Binary files a/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png and b/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png differ diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 26f27c3d60..d34a9871ba 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -755,6 +755,23 @@ headline4: string; paragraph1: string; paragraph2: string; underline: string; +bodyL: string; +bodyM: string; +bodyS: string; +bodyXS: string; +bodyXXS: string; +dsplL: string; +dsplM: string; +dsplS: string; +h1: string; +h2: string; +h3: string; +h4: string; +h5: string; +textL: string; +textM: string; +textS: string; +textXS: string; }; }> & HTMLAttributes & SkeletonSizeProps & { customGradientColor?: string | undefined; diff --git a/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts index cc5c13d779..efd0f24410 100644 --- a/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts @@ -78,6 +78,74 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-underline-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-underline-font-size); `, + bodyL: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + `, + bodyM: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + `, + bodyS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + `, + bodyXS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + `, + bodyXXS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + `, + dsplL: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + `, + dsplM: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + `, + dsplS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + `, + h1: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + `, + h2: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + `, + h3: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + `, + h4: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + `, + h5: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + `, + textL: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + `, + textM: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + `, + textS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + `, + textXS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + `, }, }, }; diff --git a/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx b/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx index 8301039001..b513b35fba 100644 --- a/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx @@ -23,6 +23,23 @@ const textSizes = [ 'button2', 'caption', 'underline', + 'bodyL', + 'bodyM', + 'bodyS', + 'bodyXS', + 'bodyXXS', + 'dsplL', + 'dsplM', + 'dsplS', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'textL', + 'textM', + 'textS', + 'textXS', ]; const roundnessKeys = Object.keys(radiuses).map((r) => Number(r)); diff --git a/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx index 89a62ce976..757c8a0874 100644 --- a/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx @@ -42,6 +42,23 @@ const textSizes = [ 'button2', 'caption', 'underline', + 'bodyL', + 'bodyM', + 'bodyS', + 'bodyXS', + 'bodyXXS', + 'dsplL', + 'dsplM', + 'dsplS', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'textL', + 'textM', + 'textS', + 'textXS', ]; const Default: StoryObj = { diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index 0d49823ded..1157ff87b0 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -755,6 +755,23 @@ headline4: string; paragraph1: string; paragraph2: string; underline: string; +bodyL: string; +bodyM: string; +bodyS: string; +bodyXS: string; +bodyXXS: string; +dsplL: string; +dsplM: string; +dsplS: string; +h1: string; +h2: string; +h3: string; +h4: string; +h5: string; +textL: string; +textM: string; +textS: string; +textXS: string; }; }> & HTMLAttributes & SkeletonSizeProps & { customGradientColor?: string | undefined; diff --git a/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts index cc5c13d779..efd0f24410 100644 --- a/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts @@ -78,6 +78,74 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-underline-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-underline-font-size); `, + bodyL: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + `, + bodyM: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + `, + bodyS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + `, + bodyXS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + `, + bodyXXS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + `, + dsplL: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + `, + dsplM: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + `, + dsplS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + `, + h1: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + `, + h2: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + `, + h3: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + `, + h4: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + `, + h5: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + `, + textL: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + `, + textM: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + `, + textS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + `, + textXS: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + `, }, }, }; diff --git a/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx b/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx index 8301039001..bd7622eacb 100644 --- a/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx @@ -1,4 +1,7 @@ import React from 'react'; +import type { FC } from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; import { mount, CypressTestDecorator, getComponent, PadMe, SpaceMe, withNoAnimation } from '@salutejs/plasma-cy-utils'; import { radiuses } from '../..'; @@ -23,41 +26,67 @@ const textSizes = [ 'button2', 'caption', 'underline', + 'bodyL', + 'bodyM', + 'bodyS', + 'bodyXS', + 'bodyXXS', + 'dsplL', + 'dsplM', + 'dsplS', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'textL', + 'textM', + 'textS', + 'textXS', ]; const roundnessKeys = Object.keys(radiuses).map((r) => Number(r)); +const StandardTypoStyle = createGlobalStyle(standardTypo); + describe('plasma-core: Skeleton', () => { + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + describe('LineSkeleton', () => { const LineSkeleton = getComponent('LineSkeleton'); const Line = withNoAnimation(LineSkeleton); it('simple', () => { mount( - + - , + , ); cy.matchImageSnapshot(); }); it('_size', () => { mount( - + {textSizes.map((size) => ( ))} - , + , ); cy.matchImageSnapshot(); }); it('_roundness', () => { mount( - + {roundnessKeys.map((roundness) => ( ))} - , + , ); cy.matchImageSnapshot(); }); @@ -69,36 +98,36 @@ describe('plasma-core: Skeleton', () => { it('simple', () => { mount( - + - , + , ); cy.matchImageSnapshot(); }); it('_size', () => { mount( - + - , + , ); cy.matchImageSnapshot(); }); it('_roundness', () => { mount( - + {roundnessKeys.map((roundness) => ( <> ))} - , + , ); cy.matchImageSnapshot(); }); @@ -110,65 +139,65 @@ describe('plasma-core: Skeleton', () => { it('simple', () => { mount( - + - , + , ); cy.matchImageSnapshot(); }); it('__lines', () => { mount( - + - , + , ); cy.matchImageSnapshot(); }); it('__lines:20', () => { mount( - + - , + , ); cy.matchImageSnapshot(); }); it('_size', () => { mount( - + {textSizes.map((size) => ( ))} - , + , ); cy.matchImageSnapshot(); }); it('_roundness', () => { mount( - + {roundnessKeys.map((roundness) => ( <> ))} - , + , ); cy.matchImageSnapshot(); }); it(':width', () => { mount( - + - , + , ); cy.matchImageSnapshot(); }); @@ -181,11 +210,11 @@ describe('plasma-core: Skeleton', () => { it('simple', () => { mount( - + - , + , ); cy.matchImageSnapshot(); }); diff --git a/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx index 195ddb5815..946d9ca890 100644 --- a/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx @@ -42,6 +42,23 @@ const textSizes = [ 'button2', 'caption', 'underline', + 'bodyL', + 'bodyM', + 'bodyS', + 'bodyXS', + 'bodyXXS', + 'dsplL', + 'dsplM', + 'dsplS', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'textL', + 'textM', + 'textS', + 'textXS', ]; const Default: StoryObj = {