From cbfae0a7ff477aa74a3c60ea89403bf24a10af68 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 22 Dec 2025 15:32:53 +0500 Subject: [PATCH 01/16] feat(plasma-new-hope): Add `h6` component --- .../TypographyResponsive.component-test.tsx | 3 ++ .../src/components/Rating/utils/getIcons.tsx | 1 + .../src/components/Tabs/TabItem.types.ts | 4 +-- .../src/components/Tabs/Tabs.types.ts | 2 +- .../Typography/Typography.template-doc.mdx | 6 +++- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 1 + .../components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../examples/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Heading/Heading.config.ts | 10 ++++++ .../plasma-new-hope/src/mixins/typography.ts | 14 +++++++++ .../src/helpers/typographyTokens.ts | 2 +- 17 files changed, 126 insertions(+), 7 deletions(-) diff --git a/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx b/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx index e124ed0cd3f..892419d89d8 100644 --- a/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx +++ b/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx @@ -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'); @@ -56,6 +57,8 @@ describe('plasma-core: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/plasma-new-hope/src/components/Rating/utils/getIcons.tsx b/packages/plasma-new-hope/src/components/Rating/utils/getIcons.tsx index c79e1a8dbb4..79242123505 100644 --- a/packages/plasma-new-hope/src/components/Rating/utils/getIcons.tsx +++ b/packages/plasma-new-hope/src/components/Rating/utils/getIcons.tsx @@ -35,6 +35,7 @@ const iconMap = (componentSize?: string) => { case 'h3': case 'h4': case 'h5': + case 'h6': case 'l': case 'm': return { diff --git a/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts b/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts index ce7cb20b179..8bdfb6cb406 100644 --- a/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts +++ b/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts @@ -112,7 +112,7 @@ export type CustomHorizontalIconTabItemProps = { /** * Размер TabItem */ - size?: 'xs' | 's' | 'm' | 'l' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; + size?: 'xs' | 's' | 'm' | 'l' | 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; /** * Активен ли TabItem * @deprecated Используйте свойство `selected` @@ -163,7 +163,7 @@ export type CustomHeaderTabItemProps = { /** * Размер TabItem */ - size: 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; + size: 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; /** * Активен ли TabItem * @deprecated Используйте свойство `selected` diff --git a/packages/plasma-new-hope/src/components/Tabs/Tabs.types.ts b/packages/plasma-new-hope/src/components/Tabs/Tabs.types.ts index 81980d67b20..c2963b7b88c 100644 --- a/packages/plasma-new-hope/src/components/Tabs/Tabs.types.ts +++ b/packages/plasma-new-hope/src/components/Tabs/Tabs.types.ts @@ -86,7 +86,7 @@ export type CustomHeaderTabsProps = { /** * Размер табов */ - size: 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; + size: 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; /** * Уберет скругление с выбранной стороны и подвинет контейнер * @deprecated diff --git a/packages/plasma-new-hope/src/components/Typography/Typography.template-doc.mdx b/packages/plasma-new-hope/src/components/Typography/Typography.template-doc.mdx index 107fa703ef7..75b95958f72 100644 --- a/packages/plasma-new-hope/src/components/Typography/Typography.template-doc.mdx +++ b/packages/plasma-new-hope/src/components/Typography/Typography.template-doc.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/{{ package }}'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/{{ package }}'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts index a6a554d050c..604830ad738 100644 --- a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts @@ -198,6 +198,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); diff --git a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.stories.tsx b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.stories.tsx index d83277f28b4..3a3f5490718 100644 --- a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.stories.tsx @@ -108,6 +108,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts b/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts index 27f8f446be2..10dafc05083 100644 --- a/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts @@ -300,6 +300,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; diff --git a/packages/plasma-new-hope/src/examples/components/Rating/Rating.stories.tsx b/packages/plasma-new-hope/src/examples/components/Rating/Rating.stories.tsx index afdc911a02f..309182108fb 100644 --- a/packages/plasma-new-hope/src/examples/components/Rating/Rating.stories.tsx +++ b/packages/plasma-new-hope/src/examples/components/Rating/Rating.stories.tsx @@ -9,7 +9,7 @@ import { ratingClasses } from '../../../components/Rating'; 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]; diff --git a/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts index 45aa46bed8c..b9be0980e11 100644 --- a/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts @@ -69,6 +69,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); diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/Tabs.stories.tsx b/packages/plasma-new-hope/src/examples/components/Tabs/Tabs.stories.tsx index f92000c3ee4..983507df0e7 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-new-hope/src/examples/components/Tabs/Tabs.stories.tsx @@ -16,7 +16,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]; diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 6e841caac3c..20057131e54 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -117,6 +117,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; diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts index 86bde77ed93..e705ac66d33 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -191,6 +191,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; diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts index 5bb6484e7df..1fa1e77127c 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -72,6 +72,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; diff --git a/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts b/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts index dd1e6d9043d..be669885ce0 100644 --- a/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts +++ b/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts @@ -58,6 +58,16 @@ export const config = { ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${tokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); `, + h6: css` + ${tokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${tokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${tokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, }, }, }; diff --git a/packages/plasma-new-hope/src/mixins/typography.ts b/packages/plasma-new-hope/src/mixins/typography.ts index 1ebe185ba05..f76c7dab0a8 100644 --- a/packages/plasma-new-hope/src/mixins/typography.ts +++ b/packages/plasma-new-hope/src/mixins/typography.ts @@ -110,6 +110,20 @@ export const h5Bold = { 'font-weight': 'var(--plasma-typo-h5-bold-font-weight)', }; +export const h6 = { + 'font-family': 'var(--plasma-typo-h6-font-family)', + 'font-size': 'var(--plasma-typo-h6-font-size)', + 'font-style': 'var(--plasma-typo-h6-font-style)', + 'font-weight': 'var(--plasma-typo-h6-font-weight)', + 'letter-spacing': 'var(--plasma-typo-h6-letter-spacing)', + 'line-height': 'var(--plasma-typo-h6-line-height)', +}; + +export const h6Bold = { + ...h6, + 'font-weight': 'var(--plasma-typo-h6-bold-font-weight)', +}; + export const bodyL = { 'font-family': 'var(--plasma-typo-body-l-font-family)', 'font-size': 'var(--plasma-typo-body-l-font-size)', diff --git a/utils/plasma-sb-utils/src/helpers/typographyTokens.ts b/utils/plasma-sb-utils/src/helpers/typographyTokens.ts index b6632337625..358d24296f1 100644 --- a/utils/plasma-sb-utils/src/helpers/typographyTokens.ts +++ b/utils/plasma-sb-utils/src/helpers/typographyTokens.ts @@ -1,6 +1,6 @@ export type Breakpoint = 'small' | 'medium' | 'large'; type TypographyCategory = 'dspl' | 'body' | 'header' | 'text'; -type TypographySize = 'l' | 'm' | 's' | 'xs' | 'xxs' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5'; +type TypographySize = 'l' | 'm' | 's' | 'xs' | 'xxs' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; export type TypographyWeight = 'normal' | 'bold'; type TypographyRootProperties = { From 8c71f6f25a0e486b90cb2c7fe876b35bfa5ca988 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 22 Dec 2025 18:09:35 +0500 Subject: [PATCH 02/16] feat(plasma-asdk): Add `h6` component --- .../components/Typography/Heading.config.ts | 19 +++++++++++++++++++ .../Typography/Typography.stories.tsx | 11 +++++++++++ .../src/components/Typography/Typography.tsx | 5 +++++ .../src/components/Typography/index.ts | 1 + packages/plasma-asdk/src/tokens/typography.ts | 2 ++ 5 files changed, 38 insertions(+) diff --git a/packages/plasma-asdk/src/components/Typography/Heading.config.ts b/packages/plasma-asdk/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/plasma-asdk/src/components/Typography/Heading.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx b/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx index 2fdf77496c8..a3b9de6a1bf 100644 --- a/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-asdk/src/components/Typography/Typography.tsx b/packages/plasma-asdk/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/plasma-asdk/src/components/Typography/Typography.tsx +++ b/packages/plasma-asdk/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/plasma-asdk/src/components/Typography/index.ts b/packages/plasma-asdk/src/components/Typography/index.ts index 402cd635f52..58b513eee33 100644 --- a/packages/plasma-asdk/src/components/Typography/index.ts +++ b/packages/plasma-asdk/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-asdk/src/tokens/typography.ts b/packages/plasma-asdk/src/tokens/typography.ts index 8fbc20a4dea..b8555b813a0 100644 --- a/packages/plasma-asdk/src/tokens/typography.ts +++ b/packages/plasma-asdk/src/tokens/typography.ts @@ -17,6 +17,8 @@ export { h4Bold, h5, h5Bold, + h6, + h6Bold, bodyL, bodyLBold, bodyM, From 6f995765e8cab65658df58c420d70dddb0daff87 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 22 Dec 2025 18:25:14 +0500 Subject: [PATCH 03/16] feat(plasma-b2c): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 3 +- .../Rating/Rating.component-test.tsx | 2 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../Skeleton/Skeleton.component-test.tsx | 1 + .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography.Responsive.component-test.tsx | 3 ++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + packages/plasma-b2c/src/tokens/typography.ts | 2 ++ 18 files changed, 134 insertions(+), 4 deletions(-) diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts index 3b308904785..6f3fa4f9cab 100644 --- a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts @@ -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); diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx index fcf63f599a6..3336be6b5a3 100644 --- a/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx @@ -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; @@ -84,6 +84,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx b/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx index 8e242520a17..d31db3df249 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx +++ b/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx @@ -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'); diff --git a/packages/plasma-b2c/src/components/Rating/Rating.config.ts b/packages/plasma-b2c/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.config.ts +++ b/packages/plasma-b2c/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx b/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx +++ b/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts index 79e93b27661..8eb698da331 100644 --- a/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts @@ -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); 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 bd2497143f3..3233453d89e 100644 --- a/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx index 7b7efe0cfec..20f3b3be53a 100644 --- a/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx @@ -55,6 +55,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..f70368f502f 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 79e5bb02d95..70bca47aec3 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/plasma-b2c/src/components/Typography/Heading.config.ts b/packages/plasma-b2c/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/plasma-b2c/src/components/Typography/Heading.config.ts +++ b/packages/plasma-b2c/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx b/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx index e124ed0cd3f..892419d89d8 100644 --- a/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx +++ b/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx @@ -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'); @@ -56,6 +57,8 @@ describe('plasma-core: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx b/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx index 730956ce5b6..7574da3ed50 100644 --- a/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx @@ -15,6 +15,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -151,6 +152,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-b2c/src/components/Typography/Typography.tsx b/packages/plasma-b2c/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/plasma-b2c/src/components/Typography/Typography.tsx +++ b/packages/plasma-b2c/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/plasma-b2c/src/components/Typography/index.ts b/packages/plasma-b2c/src/components/Typography/index.ts index 566e532a320..0ee9b95d0d2 100644 --- a/packages/plasma-b2c/src/components/Typography/index.ts +++ b/packages/plasma-b2c/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-b2c/src/tokens/typography.ts b/packages/plasma-b2c/src/tokens/typography.ts index 8119e46b779..440eca400cb 100644 --- a/packages/plasma-b2c/src/tokens/typography.ts +++ b/packages/plasma-b2c/src/tokens/typography.ts @@ -15,6 +15,8 @@ export { h4Bold, h5, h5Bold, + h6, + h6Bold, bodyL, bodyLBold, bodyM, From 8eca9e40926bdcbef6da5ea6cdcb300be4e73c1e Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 22 Dec 2025 18:27:22 +0500 Subject: [PATCH 04/16] feat(plasma-giga): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 3 +- .../Rating/Rating.component-test.tsx | 2 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../Skeleton/Skeleton.component-test.tsx | 1 + .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography/Typography.component-test.tsx | 3 ++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + 17 files changed, 132 insertions(+), 4 deletions(-) diff --git a/packages/plasma-giga/src/components/Accordion/Accordion.config.ts b/packages/plasma-giga/src/components/Accordion/Accordion.config.ts index 28793b613d6..d70ce2c93e6 100644 --- a/packages/plasma-giga/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-giga/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,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); diff --git a/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0a..8f333e4f9ec 100644 --- a/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -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; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx b/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx index 5649ffc28d9..546486e4be4 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx +++ b/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx @@ -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-giga: Rating', () => { const Rating = getComponent('Rating'); diff --git a/packages/plasma-giga/src/components/Rating/Rating.config.ts b/packages/plasma-giga/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.config.ts +++ b/packages/plasma-giga/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/plasma-giga/src/components/Rating/Rating.stories.tsx b/packages/plasma-giga/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.stories.tsx +++ b/packages/plasma-giga/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx b/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx index d32ba51a7d0..0369a7166b3 100644 --- a/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx @@ -17,6 +17,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx index d9c2b25935c..22a88ce080b 100644 --- a/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 9976645526d..a7252a1f7c0 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/plasma-giga/src/components/Typography/Heading.config.ts b/packages/plasma-giga/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/plasma-giga/src/components/Typography/Heading.config.ts +++ b/packages/plasma-giga/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx b/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx index bdae840e3d2..e307d8c8881 100644 --- a/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx +++ b/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx @@ -15,6 +15,7 @@ describe('plasma-giga: 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'); @@ -56,6 +57,8 @@ describe('plasma-giga: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/plasma-giga/src/components/Typography/Typography.stories.tsx b/packages/plasma-giga/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/plasma-giga/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-giga/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-giga/src/components/Typography/Typography.tsx b/packages/plasma-giga/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/plasma-giga/src/components/Typography/Typography.tsx +++ b/packages/plasma-giga/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/plasma-giga/src/components/Typography/index.ts b/packages/plasma-giga/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/plasma-giga/src/components/Typography/index.ts +++ b/packages/plasma-giga/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From 764241c1a1a4c31c2a16430c3eac92e72f3524d0 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 22 Dec 2025 18:29:13 +0500 Subject: [PATCH 05/16] feat(plasma-web): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 3 +- .../Rating/Rating.component-test.tsx | 2 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../Skeleton/Skeleton.component-test.tsx | 1 + .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + packages/plasma-web/src/tokens/typography.ts | 2 ++ 17 files changed, 131 insertions(+), 4 deletions(-) diff --git a/packages/plasma-web/src/components/Accordion/Accordion.config.ts b/packages/plasma-web/src/components/Accordion/Accordion.config.ts index fcd57ddef15..716aee00aa7 100644 --- a/packages/plasma-web/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-web/src/components/Accordion/Accordion.config.ts @@ -221,6 +221,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); diff --git a/packages/plasma-web/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-web/src/components/Accordion/Accordion.stories.tsx index 9e605061b19..40f89f368b3 100644 --- a/packages/plasma-web/src/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-web/src/components/Accordion/Accordion.stories.tsx @@ -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; @@ -83,6 +83,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-web/src/components/Rating/Rating.component-test.tsx b/packages/plasma-web/src/components/Rating/Rating.component-test.tsx index d5075b0a22d..5dea96e1cd5 100644 --- a/packages/plasma-web/src/components/Rating/Rating.component-test.tsx +++ b/packages/plasma-web/src/components/Rating/Rating.component-test.tsx @@ -22,7 +22,7 @@ type RatingDemoProps = { const StandardTypoStyle = createGlobalStyle(standardTypo); -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'); diff --git a/packages/plasma-web/src/components/Rating/Rating.config.ts b/packages/plasma-web/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/plasma-web/src/components/Rating/Rating.config.ts +++ b/packages/plasma-web/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/plasma-web/src/components/Rating/Rating.stories.tsx b/packages/plasma-web/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/plasma-web/src/components/Rating/Rating.stories.tsx +++ b/packages/plasma-web/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts index 79e93b27661..8eb698da331 100644 --- a/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts @@ -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); 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 ffd4155c272..f05acb5c9fc 100644 --- a/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx @@ -39,6 +39,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx index 469d525d0fe..72b5d8715d2 100644 --- a/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx @@ -55,6 +55,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..f70368f502f 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 54e645f8eb4..acd89c98f27 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/plasma-web/src/components/Typography/Heading.config.ts b/packages/plasma-web/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/plasma-web/src/components/Typography/Heading.config.ts +++ b/packages/plasma-web/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/plasma-web/src/components/Typography/Typography.stories.tsx b/packages/plasma-web/src/components/Typography/Typography.stories.tsx index dd0c3551b9c..b754f6810eb 100644 --- a/packages/plasma-web/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-web/src/components/Typography/Typography.stories.tsx @@ -15,6 +15,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -152,6 +153,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-web/src/components/Typography/Typography.tsx b/packages/plasma-web/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/plasma-web/src/components/Typography/Typography.tsx +++ b/packages/plasma-web/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/plasma-web/src/components/Typography/index.ts b/packages/plasma-web/src/components/Typography/index.ts index 566e532a320..0ee9b95d0d2 100644 --- a/packages/plasma-web/src/components/Typography/index.ts +++ b/packages/plasma-web/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-web/src/tokens/typography.ts b/packages/plasma-web/src/tokens/typography.ts index c6db9652f11..1892c9a424f 100644 --- a/packages/plasma-web/src/tokens/typography.ts +++ b/packages/plasma-web/src/tokens/typography.ts @@ -17,6 +17,8 @@ export { h4Bold, h5, h5Bold, + h6, + h6Bold, bodyL, bodyLBold, bodyM, From 134ba1cf0079658834c783437d69840936f1ba3e Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 22 Dec 2025 18:34:32 +0500 Subject: [PATCH 06/16] feat(sdds-bizcom): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 3 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + 14 files changed, 127 insertions(+), 3 deletions(-) diff --git a/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts b/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts index 28793b613d6..d70ce2c93e6 100644 --- a/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,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); diff --git a/packages/sdds-bizcom/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-bizcom/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0a..8f333e4f9ec 100644 --- a/packages/sdds-bizcom/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-bizcom/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -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; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-bizcom/src/components/Rating/Rating.config.ts b/packages/sdds-bizcom/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/sdds-bizcom/src/components/Rating/Rating.config.ts +++ b/packages/sdds-bizcom/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/sdds-bizcom/src/components/Rating/Rating.stories.tsx b/packages/sdds-bizcom/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/sdds-bizcom/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-bizcom/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/sdds-bizcom/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-bizcom/src/components/Skeleton/Skeleton.stories.tsx index 5e312711917..6e555fcfc9f 100644 --- a/packages/sdds-bizcom/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-bizcom/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-bizcom/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-bizcom/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/sdds-bizcom/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-bizcom/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..f70368f502f 100644 --- a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/sdds-bizcom/src/components/Typography/Heading.config.ts b/packages/sdds-bizcom/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-bizcom/src/components/Typography/Heading.config.ts +++ b/packages/sdds-bizcom/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-bizcom/src/components/Typography/Typography.stories.tsx b/packages/sdds-bizcom/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/sdds-bizcom/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-bizcom/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-bizcom/src/components/Typography/Typography.tsx b/packages/sdds-bizcom/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/sdds-bizcom/src/components/Typography/Typography.tsx +++ b/packages/sdds-bizcom/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/sdds-bizcom/src/components/Typography/index.ts b/packages/sdds-bizcom/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/sdds-bizcom/src/components/Typography/index.ts +++ b/packages/sdds-bizcom/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From 2aba6647ad01ef75eb4294358b790a0057a2d671 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 22 Dec 2025 18:35:00 +0500 Subject: [PATCH 07/16] feat(sdds-crm): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 3 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + 14 files changed, 127 insertions(+), 3 deletions(-) diff --git a/packages/sdds-crm/src/components/Accordion/Accordion.config.ts b/packages/sdds-crm/src/components/Accordion/Accordion.config.ts index 28793b613d6..d70ce2c93e6 100644 --- a/packages/sdds-crm/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-crm/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,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); diff --git a/packages/sdds-crm/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-crm/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0a..8f333e4f9ec 100644 --- a/packages/sdds-crm/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-crm/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -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; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-crm/src/components/Rating/Rating.config.ts b/packages/sdds-crm/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/sdds-crm/src/components/Rating/Rating.config.ts +++ b/packages/sdds-crm/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/sdds-crm/src/components/Rating/Rating.stories.tsx b/packages/sdds-crm/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/sdds-crm/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-crm/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/sdds-crm/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-crm/src/components/Skeleton/Skeleton.stories.tsx index 5e312711917..6e555fcfc9f 100644 --- a/packages/sdds-crm/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-crm/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-crm/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-crm/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/sdds-crm/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-crm/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..f70368f502f 100644 --- a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/sdds-crm/src/components/Typography/Heading.config.ts b/packages/sdds-crm/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-crm/src/components/Typography/Heading.config.ts +++ b/packages/sdds-crm/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-crm/src/components/Typography/Typography.stories.tsx b/packages/sdds-crm/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/sdds-crm/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-crm/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-crm/src/components/Typography/Typography.tsx b/packages/sdds-crm/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/sdds-crm/src/components/Typography/Typography.tsx +++ b/packages/sdds-crm/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/sdds-crm/src/components/Typography/index.ts b/packages/sdds-crm/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/sdds-crm/src/components/Typography/index.ts +++ b/packages/sdds-crm/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From 17c7ca29408c5ea4d99327e224cd2295d52d4d52 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 22 Dec 2025 18:36:26 +0500 Subject: [PATCH 08/16] feat(sdds-cs): Add `h6` component --- .../Skeleton/LineSkeleton.config.ts | 4 ++++ .../Skeleton/Skeleton.component-test.tsx | 1 + .../components/Skeleton/Skeleton.stories.tsx | 1 + .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++++ .../components/Typography/Heading.config.ts | 19 +++++++++++++++++++ .../Typography/Typography.component-test.tsx | 3 +++ .../Typography/Typography.stories.tsx | 11 +++++++++++ .../src/components/Typography/Typography.tsx | 5 +++++ .../src/components/Typography/index.ts | 1 + 9 files changed, 52 insertions(+) diff --git a/packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/sdds-cs/src/components/Skeleton/Skeleton.component-test.tsx b/packages/sdds-cs/src/components/Skeleton/Skeleton.component-test.tsx index 62073dfb9c8..886dbe27bcd 100644 --- a/packages/sdds-cs/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/sdds-cs/src/components/Skeleton/Skeleton.component-test.tsx @@ -19,6 +19,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-cs/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-cs/src/components/Skeleton/Skeleton.stories.tsx index 5e312711917..6e555fcfc9f 100644 --- a/packages/sdds-cs/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-cs/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts index c3d06b06c2c..9e68303c0f2 100644 --- a/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/sdds-cs/src/components/Typography/Heading.config.ts b/packages/sdds-cs/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-cs/src/components/Typography/Heading.config.ts +++ b/packages/sdds-cs/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-cs/src/components/Typography/Typography.component-test.tsx b/packages/sdds-cs/src/components/Typography/Typography.component-test.tsx index 15818c6057f..e3cc13794f6 100644 --- a/packages/sdds-cs/src/components/Typography/Typography.component-test.tsx +++ b/packages/sdds-cs/src/components/Typography/Typography.component-test.tsx @@ -15,6 +15,7 @@ describe('sdds-cs: 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'); @@ -56,6 +57,8 @@ describe('sdds-cs: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/sdds-cs/src/components/Typography/Typography.stories.tsx b/packages/sdds-cs/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/sdds-cs/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-cs/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-cs/src/components/Typography/Typography.tsx b/packages/sdds-cs/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/sdds-cs/src/components/Typography/Typography.tsx +++ b/packages/sdds-cs/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/sdds-cs/src/components/Typography/index.ts b/packages/sdds-cs/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/sdds-cs/src/components/Typography/index.ts +++ b/packages/sdds-cs/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From 9a18e8db3bb97f2de8657e11f93dad9648bb4ca0 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 22 Dec 2025 20:18:23 +0500 Subject: [PATCH 09/16] feat(sdds-dfa): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 3 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + 14 files changed, 127 insertions(+), 3 deletions(-) diff --git a/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts b/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts index 28793b613d6..d70ce2c93e6 100644 --- a/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,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); diff --git a/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0a..8f333e4f9ec 100644 --- a/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -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; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-dfa/src/components/Rating/Rating.config.ts b/packages/sdds-dfa/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/sdds-dfa/src/components/Rating/Rating.config.ts +++ b/packages/sdds-dfa/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/sdds-dfa/src/components/Rating/Rating.stories.tsx b/packages/sdds-dfa/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/sdds-dfa/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-dfa/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/sdds-dfa/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-dfa/src/components/Skeleton/Skeleton.stories.tsx index 5e312711917..6e555fcfc9f 100644 --- a/packages/sdds-dfa/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-dfa/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..f70368f502f 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts index c0b020b12df..bc9eef78042 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -59,6 +59,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; diff --git a/packages/sdds-dfa/src/components/Typography/Heading.config.ts b/packages/sdds-dfa/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-dfa/src/components/Typography/Heading.config.ts +++ b/packages/sdds-dfa/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-dfa/src/components/Typography/Typography.stories.tsx b/packages/sdds-dfa/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/sdds-dfa/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-dfa/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-dfa/src/components/Typography/Typography.tsx b/packages/sdds-dfa/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/sdds-dfa/src/components/Typography/Typography.tsx +++ b/packages/sdds-dfa/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/sdds-dfa/src/components/Typography/index.ts b/packages/sdds-dfa/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/sdds-dfa/src/components/Typography/index.ts +++ b/packages/sdds-dfa/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From 0c3f105a4f4f5ac3e0b9b0b4e990110d327f186d Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 23 Dec 2025 11:50:22 +0500 Subject: [PATCH 10/16] feat(sdds-finai): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 +++++++++++++++++++ .../Accordion/Accordion.stories.tsx | 3 ++- .../Skeleton/LineSkeleton.config.ts | 4 ++++ .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++++++++ .../Typography/Typography.stories.tsx | 11 ++++++++++ .../src/components/Typography/Typography.tsx | 5 +++++ .../src/components/Typography/index.ts | 1 + 12 files changed, 95 insertions(+), 2 deletions(-) diff --git a/packages/sdds-finai/src/components/Accordion/Accordion.config.ts b/packages/sdds-finai/src/components/Accordion/Accordion.config.ts index 28793b613d6..d70ce2c93e6 100644 --- a/packages/sdds-finai/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-finai/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,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); diff --git a/packages/sdds-finai/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-finai/src/components/Accordion/Accordion.stories.tsx index e3708e1a7f5..75739295d9a 100644 --- a/packages/sdds-finai/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-finai/src/components/Accordion/Accordion.stories.tsx @@ -33,7 +33,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -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; const pins = [ @@ -133,6 +133,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/sdds-finai/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-finai/src/components/Skeleton/Skeleton.stories.tsx index 5e312711917..6e555fcfc9f 100644 --- a/packages/sdds-finai/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-finai/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-finai/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-finai/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/sdds-finai/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-finai/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..f70368f502f 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/sdds-finai/src/components/Typography/Heading.config.ts b/packages/sdds-finai/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-finai/src/components/Typography/Heading.config.ts +++ b/packages/sdds-finai/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-finai/src/components/Typography/Typography.stories.tsx b/packages/sdds-finai/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/sdds-finai/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-finai/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-finai/src/components/Typography/Typography.tsx b/packages/sdds-finai/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/sdds-finai/src/components/Typography/Typography.tsx +++ b/packages/sdds-finai/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/sdds-finai/src/components/Typography/index.ts b/packages/sdds-finai/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/sdds-finai/src/components/Typography/index.ts +++ b/packages/sdds-finai/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From e58973b3a6948f7e3372d54d5e0b68a3257130a2 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 23 Dec 2025 11:55:27 +0500 Subject: [PATCH 11/16] feat(sdds-insol): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 22 +++++++++++++ .../Accordion/Accordion.stories.tsx | 4 ++- .../Rating/Rating.component-test.tsx | 2 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../Skeleton/Skeleton.component-test.tsx | 1 + .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography/Typography.component-test.tsx | 3 ++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + 17 files changed, 135 insertions(+), 4 deletions(-) diff --git a/packages/sdds-insol/src/components/Accordion/Accordion.config.ts b/packages/sdds-insol/src/components/Accordion/Accordion.config.ts index 9a516af682a..391fe8875ae 100644 --- a/packages/sdds-insol/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-insol/src/components/Accordion/Accordion.config.ts @@ -212,6 +212,28 @@ 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}: 1.25rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 1.375rem; + ${accordionTokens.accordionItemBodyPaddingBottom}: 1.375rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.875rem; + ${accordionTokens.accordionGap}: 1.25rem; + + ${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-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); diff --git a/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx index 3dd79668b26..b24a9ad3514 100644 --- a/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx @@ -26,7 +26,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -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', 'clear'] as const; const pins = [ @@ -108,6 +108,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; @@ -124,6 +125,7 @@ const getSizeForArrow = (size) => { case 's': case 'xs': case 'h5': + case 'h6': case 'h4': return 'xs'; default: diff --git a/packages/sdds-insol/src/components/Rating/Rating.component-test.tsx b/packages/sdds-insol/src/components/Rating/Rating.component-test.tsx index a39df2841e0..6c9bbd89d18 100644 --- a/packages/sdds-insol/src/components/Rating/Rating.component-test.tsx +++ b/packages/sdds-insol/src/components/Rating/Rating.component-test.tsx @@ -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('sdds-insol: Rating', () => { const Rating = getComponent('Rating'); diff --git a/packages/sdds-insol/src/components/Rating/Rating.config.ts b/packages/sdds-insol/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/sdds-insol/src/components/Rating/Rating.config.ts +++ b/packages/sdds-insol/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/sdds-insol/src/components/Rating/Rating.stories.tsx b/packages/sdds-insol/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/sdds-insol/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-insol/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/sdds-insol/src/components/Skeleton/Skeleton.component-test.tsx b/packages/sdds-insol/src/components/Skeleton/Skeleton.component-test.tsx index d32ba51a7d0..0369a7166b3 100644 --- a/packages/sdds-insol/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/sdds-insol/src/components/Skeleton/Skeleton.component-test.tsx @@ -17,6 +17,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-insol/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-insol/src/components/Skeleton/Skeleton.stories.tsx index 5e312711917..6e555fcfc9f 100644 --- a/packages/sdds-insol/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-insol/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 354c0cdbfd0..7e1c769ad9e 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index df22e582a4f..e2973f8fe7c 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/sdds-insol/src/components/Typography/Heading.config.ts b/packages/sdds-insol/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-insol/src/components/Typography/Heading.config.ts +++ b/packages/sdds-insol/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-insol/src/components/Typography/Typography.component-test.tsx b/packages/sdds-insol/src/components/Typography/Typography.component-test.tsx index e491682d702..be07dad0616 100644 --- a/packages/sdds-insol/src/components/Typography/Typography.component-test.tsx +++ b/packages/sdds-insol/src/components/Typography/Typography.component-test.tsx @@ -15,6 +15,7 @@ describe('sdds-insol: 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'); @@ -56,6 +57,8 @@ describe('sdds-insol: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/sdds-insol/src/components/Typography/Typography.stories.tsx b/packages/sdds-insol/src/components/Typography/Typography.stories.tsx index 634d4fc79c8..a67927c2d5b 100644 --- a/packages/sdds-insol/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-insol/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -135,6 +136,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-insol/src/components/Typography/Typography.tsx b/packages/sdds-insol/src/components/Typography/Typography.tsx index bb08397d384..0eac49b13ca 100644 --- a/packages/sdds-insol/src/components/Typography/Typography.tsx +++ b/packages/sdds-insol/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -73,6 +74,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); @@ -103,6 +107,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; diff --git a/packages/sdds-insol/src/components/Typography/index.ts b/packages/sdds-insol/src/components/Typography/index.ts index f0d89c8eb4a..50cb06133fc 100644 --- a/packages/sdds-insol/src/components/Typography/index.ts +++ b/packages/sdds-insol/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From 9794098ea8f6d1744b788b02d3daa67e62855d57 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 23 Dec 2025 11:58:26 +0500 Subject: [PATCH 12/16] feat(sdds-netology): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 3 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + 14 files changed, 127 insertions(+), 3 deletions(-) diff --git a/packages/sdds-netology/src/components/Accordion/Accordion.config.ts b/packages/sdds-netology/src/components/Accordion/Accordion.config.ts index 28793b613d6..d70ce2c93e6 100644 --- a/packages/sdds-netology/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-netology/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,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); diff --git a/packages/sdds-netology/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-netology/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0a..8f333e4f9ec 100644 --- a/packages/sdds-netology/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-netology/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -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; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-netology/src/components/Rating/Rating.config.ts b/packages/sdds-netology/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/sdds-netology/src/components/Rating/Rating.config.ts +++ b/packages/sdds-netology/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/sdds-netology/src/components/Rating/Rating.stories.tsx b/packages/sdds-netology/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/sdds-netology/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-netology/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/sdds-netology/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-netology/src/components/Skeleton/Skeleton.stories.tsx index 5e312711917..6e555fcfc9f 100644 --- a/packages/sdds-netology/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-netology/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-netology/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-netology/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/sdds-netology/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-netology/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 9976645526d..a7252a1f7c0 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/sdds-netology/src/components/Typography/Heading.config.ts b/packages/sdds-netology/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-netology/src/components/Typography/Heading.config.ts +++ b/packages/sdds-netology/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-netology/src/components/Typography/Typography.stories.tsx b/packages/sdds-netology/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/sdds-netology/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-netology/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-netology/src/components/Typography/Typography.tsx b/packages/sdds-netology/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/sdds-netology/src/components/Typography/Typography.tsx +++ b/packages/sdds-netology/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/sdds-netology/src/components/Typography/index.ts b/packages/sdds-netology/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/sdds-netology/src/components/Typography/index.ts +++ b/packages/sdds-netology/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From 53330576d110db2c501baa09803e93e223954677 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 23 Dec 2025 12:16:12 +0500 Subject: [PATCH 13/16] feat(sdds-platform-ai): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 +++++++++++++++++++ .../Accordion/Accordion.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++++++++ .../Typography/Typography.stories.tsx | 11 ++++++++++ .../src/components/Typography/Typography.tsx | 5 +++++ .../src/components/Typography/index.ts | 1 + 10 files changed, 89 insertions(+), 1 deletion(-) diff --git a/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts b/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts index 2e83a636d3b..8ec6bce2c72 100644 --- a/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts @@ -132,6 +132,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); diff --git a/packages/sdds-platform-ai/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-platform-ai/src/components/Accordion/Accordion.stories.tsx index 278c9cb0ee7..ff927ad375e 100644 --- a/packages/sdds-platform-ai/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-platform-ai/src/components/Accordion/Accordion.stories.tsx @@ -122,6 +122,7 @@ const getSizeForIconButton = (size) => { case 'h4': return 's'; case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-platform-ai/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-platform-ai/src/components/Tabs/Tabs.stories.tsx index 9db551275b9..559c8e74014 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-platform-ai/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['m'] 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]; diff --git a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 5f3d720cb71..02802a53874 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -54,6 +54,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, + 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; diff --git a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 547651b0c8a..26c0984c7ce 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -78,6 +78,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, + 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; diff --git a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts b/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts +++ b/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-platform-ai/src/components/Typography/Typography.stories.tsx b/packages/sdds-platform-ai/src/components/Typography/Typography.stories.tsx index 2fdf77496c8..a3b9de6a1bf 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-platform-ai/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-platform-ai/src/components/Typography/Typography.tsx b/packages/sdds-platform-ai/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Typography.tsx +++ b/packages/sdds-platform-ai/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/sdds-platform-ai/src/components/Typography/index.ts b/packages/sdds-platform-ai/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/sdds-platform-ai/src/components/Typography/index.ts +++ b/packages/sdds-platform-ai/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From 564f3d89fefddfb2ecd2b39b3b025999ff36f387 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 23 Dec 2025 12:18:04 +0500 Subject: [PATCH 14/16] feat(sdds-scan): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 3 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + 14 files changed, 127 insertions(+), 3 deletions(-) diff --git a/packages/sdds-scan/src/components/Accordion/Accordion.config.ts b/packages/sdds-scan/src/components/Accordion/Accordion.config.ts index 28793b613d6..d70ce2c93e6 100644 --- a/packages/sdds-scan/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-scan/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,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); diff --git a/packages/sdds-scan/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-scan/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0a..8f333e4f9ec 100644 --- a/packages/sdds-scan/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-scan/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -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; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-scan/src/components/Rating/Rating.config.ts b/packages/sdds-scan/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/sdds-scan/src/components/Rating/Rating.config.ts +++ b/packages/sdds-scan/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/sdds-scan/src/components/Rating/Rating.stories.tsx b/packages/sdds-scan/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/sdds-scan/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-scan/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/sdds-scan/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-scan/src/components/Skeleton/Skeleton.stories.tsx index 5e312711917..6e555fcfc9f 100644 --- a/packages/sdds-scan/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-scan/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-scan/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-scan/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/sdds-scan/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-scan/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..f70368f502f 100644 --- a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/sdds-scan/src/components/Typography/Heading.config.ts b/packages/sdds-scan/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-scan/src/components/Typography/Heading.config.ts +++ b/packages/sdds-scan/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-scan/src/components/Typography/Typography.stories.tsx b/packages/sdds-scan/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/sdds-scan/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-scan/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-scan/src/components/Typography/Typography.tsx b/packages/sdds-scan/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/sdds-scan/src/components/Typography/Typography.tsx +++ b/packages/sdds-scan/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/sdds-scan/src/components/Typography/index.ts b/packages/sdds-scan/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/sdds-scan/src/components/Typography/index.ts +++ b/packages/sdds-scan/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From 2579a13cee50c565d7cd51d6942b24c0288b32ea Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 23 Dec 2025 12:22:10 +0500 Subject: [PATCH 15/16] feat(sdds-serv): Add `h6` component --- .../components/Accordion/Accordion.config.ts | 20 ++++++++++++ .../Accordion/Accordion.stories.tsx | 3 +- .../src/components/Rating/Rating.config.ts | 31 +++++++++++++++++++ .../src/components/Rating/Rating.stories.tsx | 2 +- .../Skeleton/LineSkeleton.config.ts | 4 +++ .../components/Skeleton/Skeleton.stories.tsx | 1 + .../src/components/Tabs/Tabs.stories.tsx | 2 +- .../HorizontalIconTabItem.config.ts | 7 +++++ .../horizontal/HorizontalTabItem.config.ts | 17 ++++++++++ .../Tabs/horizontal/HorizontalTabs.config.ts | 7 +++++ .../components/Typography/Heading.config.ts | 19 ++++++++++++ .../Typography/Typography.stories.tsx | 11 +++++++ .../src/components/Typography/Typography.tsx | 5 +++ .../src/components/Typography/index.ts | 1 + 14 files changed, 127 insertions(+), 3 deletions(-) diff --git a/packages/sdds-serv/src/components/Accordion/Accordion.config.ts b/packages/sdds-serv/src/components/Accordion/Accordion.config.ts index 28793b613d6..d70ce2c93e6 100644 --- a/packages/sdds-serv/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-serv/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,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); diff --git a/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0a..8f333e4f9ec 100644 --- a/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -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; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-serv/src/components/Rating/Rating.config.ts b/packages/sdds-serv/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/sdds-serv/src/components/Rating/Rating.config.ts +++ b/packages/sdds-serv/src/components/Rating/Rating.config.ts @@ -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; diff --git a/packages/sdds-serv/src/components/Rating/Rating.stories.tsx b/packages/sdds-serv/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/sdds-serv/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-serv/src/components/Rating/Rating.stories.tsx @@ -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]; diff --git a/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,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); diff --git a/packages/sdds-serv/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-serv/src/components/Skeleton/Skeleton.stories.tsx index 5e312711917..6e555fcfc9f 100644 --- a/packages/sdds-serv/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-serv/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..ecfdb6b2129 100644 --- a/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx @@ -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]; diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -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; diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..f70368f502f 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -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; diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -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; diff --git a/packages/sdds-serv/src/components/Typography/Heading.config.ts b/packages/sdds-serv/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/sdds-serv/src/components/Typography/Heading.config.ts +++ b/packages/sdds-serv/src/components/Typography/Heading.config.ts @@ -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); + `, + }, + }, +}; diff --git a/packages/sdds-serv/src/components/Typography/Typography.stories.tsx b/packages/sdds-serv/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/sdds-serv/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-serv/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-serv/src/components/Typography/Typography.tsx b/packages/sdds-serv/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/sdds-serv/src/components/Typography/Typography.tsx +++ b/packages/sdds-serv/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -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); @@ -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; diff --git a/packages/sdds-serv/src/components/Typography/index.ts b/packages/sdds-serv/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/sdds-serv/src/components/Typography/index.ts +++ b/packages/sdds-serv/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, From f53a58e40d3dc9a9815d5c85c83a8d3a0e1a03ba Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 23 Dec 2025 12:27:57 +0500 Subject: [PATCH 16/16] feat(sdds-...-docs,plasam-...-docs): Add `h6` component to docs --- website/plasma-b2c-docs/docs/components/Typography.mdx | 6 +++++- website/plasma-b2c-docs/docs/design/typography.mdx | 1 + website/plasma-giga-docs/docs/components/Typography.mdx | 6 +++++- website/plasma-web-docs/docs/components/Typography.mdx | 6 +++++- website/plasma-web-docs/docs/design/typography.mdx | 1 + website/sdds-crm-docs/docs/components/Typography.mdx | 6 +++++- website/sdds-cs-docs/docs/components/Typography.mdx | 6 +++++- website/sdds-dfa-docs/docs/components/Typography.mdx | 6 +++++- website/sdds-finai-docs/docs/components/Typography.mdx | 6 +++++- website/sdds-insol-docs/docs/components/Typography.mdx | 6 +++++- website/sdds-netology-docs/docs/components/Typography.mdx | 6 +++++- website/sdds-scan-docs/docs/components/Typography.mdx | 6 +++++- website/sdds-serv-docs/docs/components/Typography.mdx | 6 +++++- 13 files changed, 57 insertions(+), 11 deletions(-) diff --git a/website/plasma-b2c-docs/docs/components/Typography.mdx b/website/plasma-b2c-docs/docs/components/Typography.mdx index 67de14c2ad4..bc2c8cdbf35 100644 --- a/website/plasma-b2c-docs/docs/components/Typography.mdx +++ b/website/plasma-b2c-docs/docs/components/Typography.mdx @@ -81,7 +81,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/plasma-b2c'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/plasma-b2c'; export function App() { return ( @@ -105,6 +105,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/plasma-b2c-docs/docs/design/typography.mdx b/website/plasma-b2c-docs/docs/design/typography.mdx index b9a410cc5b0..5cb307e8e1e 100644 --- a/website/plasma-b2c-docs/docs/design/typography.mdx +++ b/website/plasma-b2c-docs/docs/design/typography.mdx @@ -44,6 +44,7 @@ export default function App() { - H3 - H4 - H5 + - H6 - [Интерфейсы](../../components/typography#интерфейсы): - BodyL - BodyM diff --git a/website/plasma-giga-docs/docs/components/Typography.mdx b/website/plasma-giga-docs/docs/components/Typography.mdx index ce3049ed613..40ed561c242 100644 --- a/website/plasma-giga-docs/docs/components/Typography.mdx +++ b/website/plasma-giga-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/plasma-giga'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/plasma-giga'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/plasma-web-docs/docs/components/Typography.mdx b/website/plasma-web-docs/docs/components/Typography.mdx index 6bcdd964065..2ef27600c24 100644 --- a/website/plasma-web-docs/docs/components/Typography.mdx +++ b/website/plasma-web-docs/docs/components/Typography.mdx @@ -81,7 +81,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/plasma-web'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/plasma-web'; export function App() { return ( @@ -105,6 +105,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/plasma-web-docs/docs/design/typography.mdx b/website/plasma-web-docs/docs/design/typography.mdx index 08039491b8d..5f9903e22dd 100644 --- a/website/plasma-web-docs/docs/design/typography.mdx +++ b/website/plasma-web-docs/docs/design/typography.mdx @@ -44,6 +44,7 @@ export default function App() { - H3 - H4 - H5 + - H6 - [Интерфейсы](../../components/typography#интерфейсы): - BodyL - BodyM diff --git a/website/sdds-crm-docs/docs/components/Typography.mdx b/website/sdds-crm-docs/docs/components/Typography.mdx index 978e9b38632..a4fa2fcb35c 100644 --- a/website/sdds-crm-docs/docs/components/Typography.mdx +++ b/website/sdds-crm-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-crm'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-crm'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-cs-docs/docs/components/Typography.mdx b/website/sdds-cs-docs/docs/components/Typography.mdx index 144793d9d36..00b82ff19b3 100644 --- a/website/sdds-cs-docs/docs/components/Typography.mdx +++ b/website/sdds-cs-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-cs'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-cs'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-dfa-docs/docs/components/Typography.mdx b/website/sdds-dfa-docs/docs/components/Typography.mdx index e6b58641771..44cc283f31d 100644 --- a/website/sdds-dfa-docs/docs/components/Typography.mdx +++ b/website/sdds-dfa-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-dfa'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-dfa'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-finai-docs/docs/components/Typography.mdx b/website/sdds-finai-docs/docs/components/Typography.mdx index 73b4f6fedba..8f562c97310 100644 --- a/website/sdds-finai-docs/docs/components/Typography.mdx +++ b/website/sdds-finai-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-finai'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-finai'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-insol-docs/docs/components/Typography.mdx b/website/sdds-insol-docs/docs/components/Typography.mdx index d805befe789..355b7687591 100644 --- a/website/sdds-insol-docs/docs/components/Typography.mdx +++ b/website/sdds-insol-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-insol'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-insol'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-netology-docs/docs/components/Typography.mdx b/website/sdds-netology-docs/docs/components/Typography.mdx index 0a6ef0094d3..9c8d6f9883b 100644 --- a/website/sdds-netology-docs/docs/components/Typography.mdx +++ b/website/sdds-netology-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-netology'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-netology'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-scan-docs/docs/components/Typography.mdx b/website/sdds-scan-docs/docs/components/Typography.mdx index 8135fa216c2..893ff74e866 100644 --- a/website/sdds-scan-docs/docs/components/Typography.mdx +++ b/website/sdds-scan-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-scan'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-scan'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-serv-docs/docs/components/Typography.mdx b/website/sdds-serv-docs/docs/components/Typography.mdx index 0cfc88c32b3..539983fe38f 100644 --- a/website/sdds-serv-docs/docs/components/Typography.mdx +++ b/website/sdds-serv-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-serv'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-serv'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); }