Skip to content

Commit

Permalink
feat(plasma-web): new typography sizes for Skeleton with snapshots
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich
TitanKuzmich authored and root committed Jan 9, 2024
1 parent fba9646 commit b0b1a33
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 26 deletions.
Binary file modified ...leton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...leton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 68 additions & 0 deletions packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
`,
},
},
};
81 changes: 55 additions & 26 deletions packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 '../..';
Expand All @@ -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 }) => (
<CypressTestDecorator>
<StandardTypoStyle />
{children}
</CypressTestDecorator>
);

describe('LineSkeleton', () => {
const LineSkeleton = getComponent('LineSkeleton');
const Line = withNoAnimation(LineSkeleton);

it('simple', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
<Line />
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});

it('_size', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
{textSizes.map((size) => (
<Line key={size} size={size} />
))}
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});

it('_roundness', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
{roundnessKeys.map((roundness) => (
<Line key={roundness} roundness={roundness} />
))}
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});
Expand All @@ -69,36 +98,36 @@ describe('plasma-core: Skeleton', () => {

it('simple', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
<Rect width="12rem" height="8rem" />
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});

it('_size', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
<Rect width="12rem" height="8rem" />
<SpaceMe />
<Rect width={128} height={128} />
<SpaceMe />
<Rect height="8rem" />
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});

it('_roundness', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
{roundnessKeys.map((roundness) => (
<>
<Rect key={roundness} width="12rem" height="2rem" roundness={roundness} />
<PadMe key={roundness} />
</>
))}
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});
Expand All @@ -110,65 +139,65 @@ describe('plasma-core: Skeleton', () => {

it('simple', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
<Text size="body1" />
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});

it('__lines', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
<Text size="body1" lines={0} />
<Text size="body1" lines={1} />
<Text size="body1" lines={2} />
<Text size="body1" lines={3} />
<Text size="body1" lines={4} />
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});
it('__lines:20', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
<Text size="body1" lines={20} />
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});

it('_size', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
{textSizes.map((size) => (
<Text key={size} size={size} />
))}
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});

it('_roundness', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
{roundnessKeys.map((roundness) => (
<>
<Text size="body1" key={roundness} roundness={roundness} />
<PadMe key={roundness} />
</>
))}
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});

it(':width', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
<Text size="body1" lines={3} width={50} />
<Text size="body1" lines={3} width="2rem" />
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});
Expand All @@ -181,11 +210,11 @@ describe('plasma-core: Skeleton', () => {

it('simple', () => {
mount(
<CypressTestDecorator>
<CypressTestDecoratorWithTypo>
<Btn view="primary" text="Loading" skeleton />
<PadMe />
<Btn view="primary" text="Done" />
</CypressTestDecorator>,
</CypressTestDecoratorWithTypo>,
);
cy.matchImageSnapshot();
});
Expand Down
17 changes: 17 additions & 0 deletions packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down

0 comments on commit b0b1a33

Please sign in to comment.