Skip to content

PLASMA-5195: Add h6 component #2403

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
neretin-trike wants to merge 16 commits into
base: dev
Choose a base branch
from
Open

PLASMA-5195: Add h6 component #2403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
cbfae0a
feat(plasma-new-hope): Add `h6` component
neretin-trike Dec 22, 2025
8c71f6f
feat(plasma-asdk): Add `h6` component
neretin-trike Dec 22, 2025
6f99576
feat(plasma-b2c): Add `h6` component
neretin-trike Dec 22, 2025
8eca9e4
feat(plasma-giga): Add `h6` component
neretin-trike Dec 22, 2025
764241c
feat(plasma-web): Add `h6` component
neretin-trike Dec 22, 2025
134ba1c
feat(sdds-bizcom): Add `h6` component
neretin-trike Dec 22, 2025
2aba664
feat(sdds-crm): Add `h6` component
neretin-trike Dec 22, 2025
17c7ca2
feat(sdds-cs): Add `h6` component
neretin-trike Dec 22, 2025
9a18e8d
feat(sdds-dfa): Add `h6` component
neretin-trike Dec 22, 2025
0c3f105
feat(sdds-finai): Add `h6` component
neretin-trike Dec 23, 2025
e58973b
feat(sdds-insol): Add `h6` component
neretin-trike Dec 23, 2025
9794098
feat(sdds-netology): Add `h6` component
neretin-trike Dec 23, 2025
5333057
feat(sdds-platform-ai): Add `h6` component
neretin-trike Dec 23, 2025
564f3d8
feat(sdds-scan): Add `h6` component
neretin-trike Dec 23, 2025
2579a13
feat(sdds-serv): Add `h6` component
neretin-trike Dec 23, 2025
f53a58e
feat(sdds-...-docs,plasam-...-docs): Add `h6` component to docs
neretin-trike Dec 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions packages/plasma-asdk/src/components/Typography/Heading.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,22 @@ export const configH5 = {
},
},
};
export const configH6 = {
defaults: {
size: 'h6',
},
variations: {
size: {
h6: css`
${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family);
${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size);
${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style);
${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight);
${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight);
${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight);
${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing);
${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height);
`,
},
},
};
11 changes: 11 additions & 0 deletions packages/plasma-asdk/src/components/Typography/Typography.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
H3,
H4,
H5,
H6,
BodyL,
BodyM,
BodyS,
Expand Down Expand Up @@ -134,6 +135,16 @@ export const H: Story = {
<H5 bold={false} isNumeric {...props}>
1234567890
</H5>
<H6 bold={false} {...props}>
H6
</H6>
<H6 {...props}>H6 Bold</H6>
<H6 medium {...props}>
H6 Medium
</H6>
<H6 bold={false} isNumeric {...props}>
1234567890
</H6>
</>
),
};
Expand Down
5 changes: 5 additions & 0 deletions packages/plasma-asdk/src/components/Typography/Typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
configH3 as headingConfigH3Custom,
configH4 as headingConfigH4Custom,
configH5 as headingConfigH5Custom,
configH6 as headingConfigH6Custom,
} from './Heading.config';
import {
configL as textConfigLCustom,
Expand Down Expand Up @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config);
const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom);
const Heading5Component = component(heading5Config);

const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom);
const Heading6Component = component(heading6Config);

const textMConfig = mergeConfig(textConfig, textConfigMCustom);
const TextMComponent = component(textMConfig);

Expand Down Expand Up @@ -99,6 +103,7 @@ export const H2 = Heading2Component;
export const H3 = Heading3Component;
export const H4 = Heading4Component;
export const H5 = Heading5Component;
export const H6 = Heading6Component;

export const TextM = TextMComponent;
export const TextL = TextLComponent;
Expand Down
1 change: 1 addition & 0 deletions packages/plasma-asdk/src/components/Typography/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export {
H3,
H4,
H5,
H6,
TextL,
TextM,
TextS,
Expand Down
2 changes: 2 additions & 0 deletions packages/plasma-asdk/src/tokens/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export {
h4Bold,
h5,
h5Bold,
h6,
h6Bold,
bodyL,
bodyLBold,
bodyM,
Expand Down
20 changes: 20 additions & 0 deletions packages/plasma-b2c/src/components/Accordion/Accordion.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,26 @@ export const config = {
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height);

${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight);
${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height);
`,
h6: css`
${accordionTokens.accordionItemPaddingVertical}: 0.5rem;
${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem;
${accordionTokens.accordionItemGap}: 0.25rem;
${accordionTokens.accordionItemBorderRadius}: 0.5rem;

${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family);
${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size);
${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style);
${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight);
${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing);
${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height);

${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
Expand Down
3 changes: 2 additions & 1 deletion packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { IconButton } from '../IconButton/IconButton';

import { Accordion, AccordionItem } from '.';

const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const;
const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
const stretching = ['filled', 'fixed'] as const;
const types = ['arrow', 'sign', 'clear'] as const;

Expand Down Expand Up @@ -84,6 +84,7 @@ const getSizeForIconButton = (size) => {
return 's';
case 'xs':
case 'h5':
case 'h6':
return 'xs';
default:
return 'm';
Expand Down
2 changes: 1 addition & 1 deletion packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ type RatingDemoProps = {
iconSlotHalf?: ReactNode;
};

const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS'];
const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS'];

describe('plasma-b2c: Rating', () => {
const Rating = getComponent('Rating');
Expand Down
31 changes: 31 additions & 0 deletions packages/plasma-b2c/src/components/Rating/Rating.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,37 @@ export const config = {
${tokens.singleIconSizeMedium}: 1.25rem;
${tokens.singleIconSizeSmall}: 1rem;
`,
h6: css`
${tokens.gap}: 0.25rem;

${tokens.fontFamily}: var(--plasma-typo-h6-font-family);
${tokens.fontSize}: var(--plasma-typo-h6-font-size);
${tokens.fontStyle}: var(--plasma-typo-h6-font-style);
${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight);
${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing);
${tokens.lineHeight}: var(--plasma-typo-h6-line-height);

${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);

${tokens.contentGap}: 0.625rem;
${tokens.singleIconContentGap}: 0.25rem;
${tokens.starsWrapperGap}: 0.125rem;

${tokens.iconMarginBottom}: 0.125rem;
${tokens.iconSizeLarge}: 1.25rem;
${tokens.iconSizeMedium}: 1.25rem;
${tokens.iconSizeSmall}: 1rem;

${tokens.singleIconMarginBottom}: 0.125rem;
${tokens.singleIconSizeLarge}: 1.25rem;
${tokens.singleIconSizeMedium}: 1.25rem;
${tokens.singleIconSizeSmall}: 1rem;
`,
displayL: css`
${tokens.gap}: 0.375rem;

Expand Down
2 changes: 1 addition & 1 deletion packages/plasma-b2c/src/components/Rating/Rating.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components';
import { Rating } from './Rating';

const views = ['default', 'accent'];
const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS'];
const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS'];
const scorePrecision = [1, 2];
const valuePlacements = ['before', 'after'];
const iconsCount = [1, 5, 10];
Expand Down
4 changes: 4 additions & 0 deletions packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,10 @@ export const config = {
${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height);
${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size);
`,
h6: css`
${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height);
${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size);
`,
textL: css`
${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height);
${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size);
Expand Down
1 change: 1 addition & 0 deletions packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const textSizes = [
'h3',
'h4',
'h5',
'h6',
'textL',
'textM',
'textS',
Expand Down
1 change: 1 addition & 0 deletions packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const textSizes = [
'h3',
'h4',
'h5',
'h6',
'textL',
'textM',
'textS',
Expand Down
2 changes: 1 addition & 1 deletion packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal'];
const clips = ['none', 'scroll', 'showAll'];
const headerClips = ['none', 'scroll'];
const sizes = ['xs', 's', 'm', 'l'] as const;
const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const;

type Size = typeof sizes[number];
type HeaderSize = typeof headerSizes[number];
Expand Down
7 changes: 7 additions & 0 deletions packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,13 @@ export const config = {

${tabsTokens.actionContentMarginLeft}: 0.125rem;
`,
h6: css`
${tabsTokens.itemBorderRadius}: 0.375rem;
${tabsTokens.itemPadding}: 0rem;
${tabsTokens.itemContentGap}: 0.625rem;

${tabsTokens.actionContentMarginLeft}: -0.125rem;
`,
h5: css`
${tabsTokens.itemBorderRadius}: 0.375rem;
${tabsTokens.itemPadding}: 0rem;
Expand Down
17 changes: 17 additions & 0 deletions packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,23 @@ export const config = {

${tabsTokens.actionContentMarginLeft}: 0.125rem;
`,
h6: css`
${tabsTokens.itemBorderRadius}: 0.375rem;
${tabsTokens.itemWidth}: auto;
${tabsTokens.itemHeight}: 3rem;
${tabsTokens.itemPadding}: 0 0.125rem;
${tabsTokens.itemMarginLeft}: 1.5rem;
${tabsTokens.itemContentGap}: 0.625rem;

${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family);
${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size);
${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style);
${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight);
${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing);
${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height);

${tabsTokens.actionContentMarginLeft}: -0.125rem;
`,
h5: css`
${tabsTokens.itemBorderRadius}: 0.375rem;
${tabsTokens.itemWidth}: auto;
Expand Down
7 changes: 7 additions & 0 deletions packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,13 @@ export const config = {
${tabsTokens.arrowInnerPadding}: 0rem;
${tabsTokens.arrowOuterPadding}: 0.75rem;
`,
h6: css`
${tabsTokens.tabsBorderRadius}: 0.5rem;
${tabsTokens.tabsWidth}: fit-content;
${tabsTokens.tabsHeight}: auto;
${tabsTokens.arrowInnerPadding}: 0.25rem;
${tabsTokens.arrowOuterPadding}: 0rem;
`,
h5: css`
${tabsTokens.tabsBorderRadius}: 0.5rem;
${tabsTokens.tabsWidth}: fit-content;
Expand Down
19 changes: 19 additions & 0 deletions packages/plasma-b2c/src/components/Typography/Heading.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,22 @@ export const configH5 = {
},
},
};
export const configH6 = {
defaults: {
size: 'h6',
},
variations: {
size: {
h6: css`
${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family);
${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size);
${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style);
${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight);
${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight);
${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight);
${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing);
${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height);
`,
},
},
};
3 changes: 3 additions & 0 deletions packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ describe('plasma-core: ResponsiveTypography', () => {
const H3 = getComponent('H3');
const H4 = getComponent('H4');
const H5 = getComponent('H5');
const H6 = getComponent('H6');
const TextL = getComponent('TextL');
const TextM = getComponent('TextM');
const TextS = getComponent('TextS');
Expand Down Expand Up @@ -56,6 +57,8 @@ describe('plasma-core: ResponsiveTypography', () => {
<H4>H4 Semibold</H4>
<H5 bold={false}>H5</H5>
<H5>H5 Semibold</H5>
<H6 bold={false}>H6</H6>
<H6>H6 Semibold</H6>
</CypressTestDecorator>
);
const text = (
Expand Down
11 changes: 11 additions & 0 deletions packages/plasma-b2c/src/components/Typography/Typography.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
H3,
H4,
H5,
H6,
BodyL,
BodyM,
BodyS,
Expand Down Expand Up @@ -151,6 +152,16 @@ export const H: Story = {
<H5 bold={false} isNumeric {...props}>
1234567890
</H5>
<H6 bold={false} {...props}>
H6
</H6>
<H6 {...props}>H6 Bold</H6>
<H6 medium {...props}>
H6 Medium
</H6>
<H6 bold={false} isNumeric {...props}>
1234567890
</H6>
</>
),
};
Expand Down
5 changes: 5 additions & 0 deletions packages/plasma-b2c/src/components/Typography/Typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
configH3 as headingConfigH3Custom,
configH4 as headingConfigH4Custom,
configH5 as headingConfigH5Custom,
configH6 as headingConfigH6Custom,
} from './Heading.config';
import {
configL as textConfigLCustom,
Expand Down Expand Up @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config);
const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom);
const Heading5Component = component(heading5Config);

const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom);
const Heading6Component = component(heading6Config);

const textMConfig = mergeConfig(textConfig, textConfigMCustom);
const TextMComponent = component(textMConfig);

Expand Down Expand Up @@ -99,6 +103,7 @@ export const H2 = Heading2Component;
export const H3 = Heading3Component;
export const H4 = Heading4Component;
export const H5 = Heading5Component;
export const H6 = Heading6Component;

export const TextM = TextMComponent;
export const TextL = TextLComponent;
Expand Down
1 change: 1 addition & 0 deletions packages/plasma-b2c/src/components/Typography/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export {
H3,
H4,
H5,
H6,
TextL,
TextM,
TextS,
Expand Down
2 changes: 2 additions & 0 deletions packages/plasma-b2c/src/tokens/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export {
h4Bold,
h5,
h5Bold,
h6,
h6Bold,
bodyL,
bodyLBold,
bodyM,
Expand Down
Loading
Loading