From d92c6b58067414ba7963a6e65f8f8f2c66b0296d Mon Sep 17 00:00:00 2001 From: Krivonos Aleksandr Date: Sat, 23 Dec 2023 08:20:48 +0300 Subject: [PATCH] feat(plasma-asdk): fix typography configs --- .../src/components/Typography/Body.config.ts | 62 ++++++++++------ .../src/components/Typography/Dspl.config.ts | 36 ++++++---- .../components/Typography/Heading.config.ts | 58 +++++++++------ .../components/Typography/Old/Body.config.ts | 34 +++++---- .../Typography/Old/Button.config.ts | 21 +++--- .../Typography/Old/Display.config.ts | 34 +++++---- .../Typography/Old/Footnote.config.ts | 21 +++--- .../Typography/Old/Headline.config.ts | 72 ++++++++++++------- .../Typography/Old/Paragraph.config.ts | 21 +++--- .../src/components/Typography/Old/index.ts | 52 ++++++-------- .../src/components/Typography/Text.config.ts | 49 ++++++++----- .../src/components/Typography/Typography.tsx | 63 ++++++++++------ .../src/components/Typography/Body/Body.tsx | 4 +- .../src/components/Typography/Dspl/Dspl.tsx | 4 +- .../components/Typography/Heading/Heading.tsx | 4 +- .../src/components/Typography/Text/Text.tsx | 4 +- .../src/components/Typography/Typography.tsx | 27 ++----- 17 files changed, 333 insertions(+), 233 deletions(-) diff --git a/packages/plasma-asdk/src/components/Typography/Body.config.ts b/packages/plasma-asdk/src/components/Typography/Body.config.ts index 43acaf5649..927c4ccfc8 100644 --- a/packages/plasma-asdk/src/components/Typography/Body.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Body.config.ts @@ -1,26 +1,8 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - m: { - size: 'm', - }, - l: { - size: 'l', - }, - s: { - size: 's', - }, - xs: { - size: 'xs', - }, - xxs: { - size: 'xxs', - }, -}; - -export const config = { +export const configL = { defaults: { - size: 'm', + size: 'l', }, variations: { size: { @@ -33,6 +15,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); `, + }, + }, +}; + +export const configM = { + defaults: { + size: 'm', + }, + variations: { + size: { m: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); @@ -42,6 +34,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); `, + }, + }, +}; + +export const configS = { + defaults: { + size: 's', + }, + variations: { + size: { s: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); @@ -51,6 +53,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); `, + }, + }, +}; + +export const configXS = { + defaults: { + size: 'xs', + }, + variations: { + size: { xs: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); @@ -60,6 +72,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); `, + }, + }, +}; + +export const configXXS = { + defaults: { + size: 'xxs', + }, + variations: { + size: { xxs: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); diff --git a/packages/plasma-asdk/src/components/Typography/Dspl.config.ts b/packages/plasma-asdk/src/components/Typography/Dspl.config.ts index 4b0cbee807..36552bf940 100644 --- a/packages/plasma-asdk/src/components/Typography/Dspl.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Dspl.config.ts @@ -1,20 +1,8 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - m: { - size: 'm', - }, - l: { - size: 'l', - }, - s: { - size: 's', - }, -}; - -export const config = { +export const configL = { defaults: { - size: 'm', + size: 'l', }, variations: { size: { @@ -27,6 +15,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); `, + }, + }, +}; + +export const configM = { + defaults: { + size: 'm', + }, + variations: { + size: { m: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); @@ -36,6 +34,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); `, + }, + }, +}; + +export const configS = { + defaults: { + size: 's', + }, + variations: { + size: { s: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); diff --git a/packages/plasma-asdk/src/components/Typography/Heading.config.ts b/packages/plasma-asdk/src/components/Typography/Heading.config.ts index 1f9c5453f3..3c1ebef743 100644 --- a/packages/plasma-asdk/src/components/Typography/Heading.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Heading.config.ts @@ -1,26 +1,8 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - h1: { - size: 'h1', - }, - h2: { - size: 'h2', - }, - h3: { - size: 'h3', - }, - h4: { - size: 'h4', - }, - h5: { - size: 'h5', - }, -}; - -export const config = { +export const configH1 = { defaults: { - size: 'h2', + size: 'h1', }, variations: { size: { @@ -33,6 +15,15 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); `, + }, + }, +}; +export const configH2 = { + defaults: { + size: 'h2', + }, + variations: { + size: { h2: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); @@ -42,6 +33,15 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); `, + }, + }, +}; +export const configH3 = { + defaults: { + size: 'h3', + }, + variations: { + size: { h3: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); @@ -51,6 +51,15 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); `, + }, + }, +}; +export const configH4 = { + defaults: { + size: 'h4', + }, + variations: { + size: { h4: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); @@ -60,6 +69,15 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); `, + }, + }, +}; +export const configH5 = { + defaults: { + size: 'h5', + }, + variations: { + size: { h5: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); diff --git a/packages/plasma-asdk/src/components/Typography/Old/Body.config.ts b/packages/plasma-asdk/src/components/Typography/Old/Body.config.ts index 3ac810f021..7ac6ce3839 100644 --- a/packages/plasma-asdk/src/components/Typography/Old/Body.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Old/Body.config.ts @@ -1,18 +1,6 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - body1: { - size: 'body1', - }, - body2: { - size: 'body2', - }, - body3: { - size: 'body3', - }, -}; - -export const config = { +export const configBody1 = { defaults: { size: 'body1', }, @@ -26,6 +14,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body1-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body1-line-height); `, + }, + }, +}; + +export const configBody2 = { + defaults: { + size: 'body2', + }, + variations: { + size: { body2: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-body2-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-body2-font-size); @@ -34,6 +32,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body2-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body2-line-height); `, + }, + }, +}; + +export const configBody3 = { + defaults: { + size: 'body3', + }, + variations: { + size: { body3: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-body3-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-body3-font-size); diff --git a/packages/plasma-asdk/src/components/Typography/Old/Button.config.ts b/packages/plasma-asdk/src/components/Typography/Old/Button.config.ts index 390db01be4..5558cf668d 100644 --- a/packages/plasma-asdk/src/components/Typography/Old/Button.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Old/Button.config.ts @@ -1,15 +1,6 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - button1: { - size: 'button1', - }, - button2: { - size: 'button2', - }, -}; - -export const config = { +export const configButton1 = { defaults: { size: 'button1', }, @@ -23,6 +14,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-button1-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-button1-line-height); `, + }, + }, +}; + +export const configButton2 = { + defaults: { + size: 'button2', + }, + variations: { + size: { button2: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-button2-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-button2-font-size); diff --git a/packages/plasma-asdk/src/components/Typography/Old/Display.config.ts b/packages/plasma-asdk/src/components/Typography/Old/Display.config.ts index 3e3ef8129c..6fea50dadc 100644 --- a/packages/plasma-asdk/src/components/Typography/Old/Display.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Old/Display.config.ts @@ -1,18 +1,6 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - display1: { - size: 'display1', - }, - display2: { - size: 'display2', - }, - display3: { - size: 'display3', - }, -}; - -export const config = { +export const configDisplay1 = { defaults: { size: 'display1', }, @@ -26,6 +14,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-display1-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-display1-line-height); `, + }, + }, +}; + +export const configDisplay2 = { + defaults: { + size: 'display2', + }, + variations: { + size: { display2: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-display2-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-display2-font-size); @@ -34,6 +32,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-display2-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-display2-line-height); `, + }, + }, +}; + +export const configDisplay3 = { + defaults: { + size: 'display3', + }, + variations: { + size: { display3: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-display3-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-display3-font-size); diff --git a/packages/plasma-asdk/src/components/Typography/Old/Footnote.config.ts b/packages/plasma-asdk/src/components/Typography/Old/Footnote.config.ts index 722f6c8ac9..29063d5b24 100644 --- a/packages/plasma-asdk/src/components/Typography/Old/Footnote.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Old/Footnote.config.ts @@ -1,15 +1,6 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - footnote1: { - size: 'footnote1', - }, - footnote2: { - size: 'footnote2', - }, -}; - -export const config = { +export const configFootnote1 = { defaults: { size: 'footnote1', }, @@ -23,6 +14,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-footnote1-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-footnote1-line-height); `, + }, + }, +}; + +export const configFootnote2 = { + defaults: { + size: 'footnote2', + }, + variations: { + size: { footnote2: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-footnote2-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-footnote2-font-size); diff --git a/packages/plasma-asdk/src/components/Typography/Old/Headline.config.ts b/packages/plasma-asdk/src/components/Typography/Old/Headline.config.ts index 684574cde9..d5d54a4dcb 100644 --- a/packages/plasma-asdk/src/components/Typography/Old/Headline.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Old/Headline.config.ts @@ -1,24 +1,6 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - headline1: { - size: 'headline1', - }, - headline2: { - size: 'headline2', - }, - headline3: { - size: 'headline3', - }, - headline4: { - size: 'headline4', - }, - headline5: { - size: 'headline4', - }, -}; - -export const config = { +export const configHeadline1 = { defaults: { size: 'headline1', }, @@ -32,6 +14,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-headline1-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-headline1-line-height); `, + }, + }, +}; + +export const configHeadline2 = { + defaults: { + size: 'headline2', + }, + variations: { + size: { headline2: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-headline2-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-headline2-font-size); @@ -40,6 +32,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-headline2-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-headline2-line-height); `, + }, + }, +}; + +export const configHeadline3 = { + defaults: { + size: 'headline3', + }, + variations: { + size: { headline3: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-headline3-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-headline3-font-size); @@ -48,6 +50,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-headline3-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-headline3-line-height); `, + }, + }, +}; + +export const configHeadline4 = { + defaults: { + size: 'headline4', + }, + variations: { + size: { headline4: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-headline4-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-headline4-font-size); @@ -56,13 +68,23 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-headline4-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-headline4-line-height); `, + }, + }, +}; + +export const configHeadline5 = { + defaults: { + size: 'headline5', + }, + variations: { + size: { headline5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-headline5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-headline5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-headline5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-headline5-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-headline5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-headline5-line-height); + ${typographyTokens.typoFontFamily}: var(--plasma-typo-headline5-font-family, 'SB Sans Text',sans-serif); + ${typographyTokens.typoFontSize}: var(--plasma-typo-headline5-font-size, 1rem); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-headline5-font-style, normal); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-headline5-font-weight, 600); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-headline5-letter-spacing, -0.0190em); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-headline5-line-height, 1.25rem); `, }, }, diff --git a/packages/plasma-asdk/src/components/Typography/Old/Paragraph.config.ts b/packages/plasma-asdk/src/components/Typography/Old/Paragraph.config.ts index ab8f287ea6..0ac2410a41 100644 --- a/packages/plasma-asdk/src/components/Typography/Old/Paragraph.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Old/Paragraph.config.ts @@ -1,15 +1,6 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - paragraph1: { - size: 'paragraph1', - }, - paragraph2: { - size: 'paragraph2', - }, -}; - -export const config = { +export const configParagraph1 = { defaults: { size: 'paragraph1', }, @@ -23,6 +14,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-paragraph1-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-paragraph1-line-height); `, + }, + }, +}; + +export const configParagraph2 = { + defaults: { + size: 'paragraph2', + }, + variations: { + size: { paragraph2: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-paragraph2-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-paragraph2-font-size); diff --git a/packages/plasma-asdk/src/components/Typography/Old/index.ts b/packages/plasma-asdk/src/components/Typography/Old/index.ts index b025578ee2..474fa8ee24 100644 --- a/packages/plasma-asdk/src/components/Typography/Old/index.ts +++ b/packages/plasma-asdk/src/components/Typography/Old/index.ts @@ -12,62 +12,62 @@ import { mergeConfig, } from '@salutejs/plasma-new-hope/styled-components'; -import { config as bodyConfigCustom, defaults as bodyDefaults } from './Body.config'; -import { config as buttonConfigCustom, defaults as buttonDefaults } from './Button.config'; +import { configBody1, configBody2, configBody3 } from './Body.config'; +import { configButton1, configButton2 } from './Button.config'; import { config as captionConfigCustom } from './Caption.config'; -import { config as displayConfigCustom, defaults as displayDefaults } from './Display.config'; -import { config as footnoteConfigCustom, defaults as footnoteDefaults } from './Footnote.config'; -import { config as headlineConfigCustom, defaults as headlineDefaults } from './Headline.config'; -import { config as paragraphConfigCustom, defaults as paragraphDefaults } from './Paragraph.config'; +import { configDisplay1, configDisplay2, configDisplay3 } from './Display.config'; +import { configFootnote1, configFootnote2 } from './Footnote.config'; +import { configHeadline1, configHeadline2, configHeadline3, configHeadline4, configHeadline5 } from './Headline.config'; +import { configParagraph1, configParagraph2 } from './Paragraph.config'; import { config as underlineConfigCustom } from './Underline.config'; import { config as subtitleConfigCustom } from './Subtitle.config'; -const body1Config = mergeConfig(bodyConfig, { ...bodyConfigCustom, defaults: bodyDefaults.body1 }); +const body1Config = mergeConfig(bodyConfig, configBody1); const Body1Component = component(body1Config); -const body2Config = mergeConfig(bodyConfig, { ...bodyConfigCustom, defaults: bodyDefaults.body2 }); +const body2Config = mergeConfig(bodyConfig, configBody2); const Body2Component = component(body2Config); -const body3Config = mergeConfig(bodyConfig, { ...bodyConfigCustom, defaults: bodyDefaults.body3 }); +const body3Config = mergeConfig(bodyConfig, configBody3); const Body3Component = component(body3Config); -const button1Config = mergeConfig(buttonTypographyConfig, { ...buttonConfigCustom, defaults: buttonDefaults.button1 }); +const button1Config = mergeConfig(buttonTypographyConfig, configButton1); const Button1Component = component(button1Config); -const button2Config = mergeConfig(buttonTypographyConfig, { ...buttonConfigCustom, defaults: buttonDefaults.button2 }); +const button2Config = mergeConfig(buttonTypographyConfig, configButton2); const Button2Component = component(button2Config); const captionConfig = mergeConfig(captionDefaultConfig, captionConfigCustom); const CaptionComponent = component(captionConfig); -const display1Config = mergeConfig(displayConfig, { ...displayConfigCustom, defaults: displayDefaults.display1 }); +const display1Config = mergeConfig(displayConfig, configDisplay1); const Display1Component = component(display1Config); -const display2Config = mergeConfig(displayConfig, { ...displayConfigCustom, defaults: displayDefaults.display2 }); +const display2Config = mergeConfig(displayConfig, configDisplay2); const Display2Component = component(display2Config); -const display3Config = mergeConfig(displayConfig, { ...displayConfigCustom, defaults: displayDefaults.display3 }); +const display3Config = mergeConfig(displayConfig, configDisplay3); const Display3Component = component(display3Config); -const footnote1Config = mergeConfig(footnoteConfig, { ...footnoteConfigCustom, defaults: footnoteDefaults.footnote1 }); +const footnote1Config = mergeConfig(footnoteConfig, configFootnote1); const Footnote1Component = component(footnote1Config); -const footnote2Config = mergeConfig(footnoteConfig, { ...footnoteConfigCustom, defaults: footnoteDefaults.footnote2 }); +const footnote2Config = mergeConfig(footnoteConfig, configFootnote2); const Footnote2Component = component(footnote2Config); -const headline1Config = mergeConfig(headlineConfig, { ...headlineConfigCustom, defaults: headlineDefaults.headline1 }); +const headline1Config = mergeConfig(headlineConfig, configHeadline1); const Headline1Component = component(headline1Config); -const headline2Config = mergeConfig(headlineConfig, { ...headlineConfigCustom, defaults: headlineDefaults.headline2 }); +const headline2Config = mergeConfig(headlineConfig, configHeadline2); const Headline2Component = component(headline2Config); -const headline3Config = mergeConfig(headlineConfig, { ...headlineConfigCustom, defaults: headlineDefaults.headline3 }); +const headline3Config = mergeConfig(headlineConfig, configHeadline3); const Headline3Component = component(headline3Config); -const headline4Config = mergeConfig(headlineConfig, { ...headlineConfigCustom, defaults: headlineDefaults.headline4 }); +const headline4Config = mergeConfig(headlineConfig, configHeadline4); const Headline4Component = component(headline4Config); -const headline5Config = mergeConfig(headlineConfig, { ...headlineConfigCustom, defaults: headlineDefaults.headline5 }); +const headline5Config = mergeConfig(headlineConfig, configHeadline5); const Headline5Component = component(headline5Config); const underlineConfig = mergeConfig(underlineDefaultConfig, underlineConfigCustom); @@ -76,16 +76,10 @@ const UnderlineComponent = component(underlineConfig); const subtitleConfig = mergeConfig(subtitleDefaultConfig, subtitleConfigCustom); const SubtitleComponent = component(subtitleConfig); -const paragraph1Config = mergeConfig(paragraphConfig, { - ...paragraphConfigCustom, - defaults: paragraphDefaults.paragraph1, -}); +const paragraph1Config = mergeConfig(paragraphConfig, configParagraph1); const Paragraph1Component = component(paragraph1Config); -const paragraph2Config = mergeConfig(paragraphConfig, { - ...paragraphConfigCustom, - defaults: paragraphDefaults.paragraph2, -}); +const paragraph2Config = mergeConfig(paragraphConfig, configParagraph2); const Paragraph2Component = component(paragraph2Config); export const Body1 = Body1Component; diff --git a/packages/plasma-asdk/src/components/Typography/Text.config.ts b/packages/plasma-asdk/src/components/Typography/Text.config.ts index 0b402045f3..8f92d5646e 100644 --- a/packages/plasma-asdk/src/components/Typography/Text.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Text.config.ts @@ -1,23 +1,8 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; -export const defaults = { - l: { - size: 'l', - }, - m: { - size: 'm', - }, - s: { - size: 's', - }, - xs: { - size: 'xs', - }, -}; - -export const config = { +export const configL = { defaults: { - size: 'm', + size: 'l', }, variations: { size: { @@ -30,6 +15,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); `, + }, + }, +}; + +export const configM = { + defaults: { + size: 'm', + }, + variations: { + size: { m: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); @@ -39,6 +34,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); `, + }, + }, +}; + +export const configS = { + defaults: { + size: 's', + }, + variations: { + size: { s: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); @@ -48,6 +53,16 @@ export const config = { ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); `, + }, + }, +}; + +export const configXS = { + defaults: { + size: 'xs', + }, + variations: { + size: { xs: css` ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); diff --git a/packages/plasma-asdk/src/components/Typography/Typography.tsx b/packages/plasma-asdk/src/components/Typography/Typography.tsx index 31e083293c..1f099f6194 100644 --- a/packages/plasma-asdk/src/components/Typography/Typography.tsx +++ b/packages/plasma-asdk/src/components/Typography/Typography.tsx @@ -7,60 +7,81 @@ import { mergeConfig, } from '@salutejs/plasma-new-hope/styled-components'; -import { config as bodyConfigCustom, defaults as bodyDefaults } from './Body.config'; -import { config as dsplConfigCustom, defaults as dsplDefaults } from './Dspl.config'; -import { config as headingConfigCustom, defaults as headingDefaults } from './Heading.config'; -import { config as textConfigCustom, defaults as textDefaults } from './Text.config'; +import { + configL as bodyConfigLCustom, + configM as bodyConfigMCustom, + configS as bodyConfigSCustom, + configXS as bodyConfigXSCustom, + configXXS as bodyConfigXXSCustom, +} from './Body.config'; +import { + configL as dsplConfigLCustom, + configM as dsplConfigMCustom, + configS as dsplConfigSCustom, +} from './Dspl.config'; +import { + configH1 as headingConfigH1Custom, + configH2 as headingConfigH2Custom, + configH3 as headingConfigH3Custom, + configH4 as headingConfigH4Custom, + configH5 as headingConfigH5Custom, +} from './Heading.config'; +import { + configL as textConfigLCustom, + configM as textConfigMCustom, + configS as textConfigSCustom, + configXS as textConfigXSCustom, +} from './Text.config'; -const bodyMConfig = mergeConfig(bodyConfig, { ...bodyConfigCustom, defaults: bodyDefaults.m }); +const bodyMConfig = mergeConfig(bodyConfig, bodyConfigMCustom); const BodyMComponent = component(bodyMConfig); -const bodyLConfig = mergeConfig(bodyConfig, { ...bodyConfigCustom, defaults: bodyDefaults.l }); +const bodyLConfig = mergeConfig(bodyConfig, bodyConfigLCustom); const BodyLComponent = component(bodyLConfig); -const bodySConfig = mergeConfig(bodyConfig, { ...bodyConfigCustom, defaults: bodyDefaults.s }); +const bodySConfig = mergeConfig(bodyConfig, bodyConfigSCustom); const BodySComponent = component(bodySConfig); -const bodyXSConfig = mergeConfig(bodyConfig, { ...bodyConfigCustom, defaults: bodyDefaults.xs }); +const bodyXSConfig = mergeConfig(bodyConfig, bodyConfigXSCustom); const BodyXSComponent = component(bodyXSConfig); -const bodyXXSConfig = mergeConfig(bodyConfig, { ...bodyConfigCustom, defaults: bodyDefaults.xxs }); +const bodyXXSConfig = mergeConfig(bodyConfig, bodyConfigXXSCustom); const BodyXXSComponent = component(bodyXXSConfig); -const dsplMConfig = mergeConfig(dsplConfig, { ...dsplConfigCustom, defaults: dsplDefaults.m }); +const dsplMConfig = mergeConfig(dsplConfig, dsplConfigMCustom); const DsplMComponent = component(dsplMConfig); -const dsplLConfig = mergeConfig(dsplConfig, { ...dsplConfigCustom, defaults: dsplDefaults.l }); +const dsplLConfig = mergeConfig(dsplConfig, dsplConfigLCustom); const DsplLComponent = component(dsplLConfig); -const dsplSConfig = mergeConfig(dsplConfig, { ...dsplConfigCustom, defaults: dsplDefaults.s }); +const dsplSConfig = mergeConfig(dsplConfig, dsplConfigSCustom); const DsplSComponent = component(dsplSConfig); -const heading1Config = mergeConfig(headingConfig, { ...headingConfigCustom, defaults: headingDefaults.h1 }); +const heading1Config = mergeConfig(headingConfig, headingConfigH1Custom); const Heading1Component = component(heading1Config); -const heading2Config = mergeConfig(headingConfig, { ...headingConfigCustom, defaults: headingDefaults.h2 }); +const heading2Config = mergeConfig(headingConfig, headingConfigH2Custom); const Heading2Component = component(heading2Config); -const heading3Config = mergeConfig(headingConfig, { ...headingConfigCustom, defaults: headingDefaults.h3 }); +const heading3Config = mergeConfig(headingConfig, headingConfigH3Custom); const Heading3Component = component(heading3Config); -const heading4Config = mergeConfig(headingConfig, { ...headingConfigCustom, defaults: headingDefaults.h4 }); +const heading4Config = mergeConfig(headingConfig, headingConfigH4Custom); const Heading4Component = component(heading4Config); -const heading5Config = mergeConfig(headingConfig, { ...headingConfigCustom, defaults: headingDefaults.h5 }); +const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); -const textMConfig = mergeConfig(textConfig, { ...textConfigCustom, defaults: textDefaults.m }); +const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); -const textLConfig = mergeConfig(textConfig, { ...textConfigCustom, defaults: textDefaults.l }); +const textLConfig = mergeConfig(textConfig, textConfigLCustom); const TextLComponent = component(textLConfig); -const textSConfig = mergeConfig(textConfig, { ...textConfigCustom, defaults: textDefaults.s }); +const textSConfig = mergeConfig(textConfig, textConfigSCustom); const TextSComponent = component(textSConfig); -const textXSConfig = mergeConfig(textConfig, { ...textConfigCustom, defaults: textDefaults.xs }); +const textXSConfig = mergeConfig(textConfig, textConfigXSCustom); const TextXSComponent = component(textXSConfig); export const BodyM = BodyMComponent; diff --git a/packages/plasma-new-hope/src/components/Typography/Body/Body.tsx b/packages/plasma-new-hope/src/components/Typography/Body/Body.tsx index ae3fcfd208..e5ec5c2b80 100644 --- a/packages/plasma-new-hope/src/components/Typography/Body/Body.tsx +++ b/packages/plasma-new-hope/src/components/Typography/Body/Body.tsx @@ -1,11 +1,11 @@ import { base as sizeCSS } from '../variations/_size/base'; import type { FontProps } from '../Typography.types'; -import { typographyRoot } from '../Typography'; +import { typographyRootCompose } from '../Typography'; import { base } from '../Typography.styles'; export type BodyProps = FontProps; -export const bodyRoot = typographyRoot; +export const bodyRoot = typographyRootCompose(); export const bodyConfig = { name: 'Body', diff --git a/packages/plasma-new-hope/src/components/Typography/Dspl/Dspl.tsx b/packages/plasma-new-hope/src/components/Typography/Dspl/Dspl.tsx index 06ce3cb4ef..b4dc42a42a 100644 --- a/packages/plasma-new-hope/src/components/Typography/Dspl/Dspl.tsx +++ b/packages/plasma-new-hope/src/components/Typography/Dspl/Dspl.tsx @@ -1,11 +1,11 @@ import { base as sizeCSS } from '../variations/_size/base'; import type { FontProps } from '../Typography.types'; import { base } from '../Typography.styles'; -import { typographyRootBoldDefault } from '../Typography'; +import { typographyRootCompose } from '../Typography'; export type DsplProps = FontProps; -export const dsplRoot = typographyRootBoldDefault; +export const dsplRoot = typographyRootCompose({ defaultBold: true }); export const dsplConfig = { name: 'Dspl', diff --git a/packages/plasma-new-hope/src/components/Typography/Heading/Heading.tsx b/packages/plasma-new-hope/src/components/Typography/Heading/Heading.tsx index d9c2ef75d5..b7824fa024 100644 --- a/packages/plasma-new-hope/src/components/Typography/Heading/Heading.tsx +++ b/packages/plasma-new-hope/src/components/Typography/Heading/Heading.tsx @@ -1,11 +1,11 @@ import { base as sizeCSS } from '../variations/_size/base'; import type { FontProps } from '../Typography.types'; import { base } from '../Typography.styles'; -import { typographyRootBoldDefault } from '../Typography'; +import { typographyRootCompose } from '../Typography'; export type HeadingProps = FontProps; -export const headingRoot = typographyRootBoldDefault; +export const headingRoot = typographyRootCompose({ defaultBold: true }); export const headingConfig = { name: 'Heading', diff --git a/packages/plasma-new-hope/src/components/Typography/Text/Text.tsx b/packages/plasma-new-hope/src/components/Typography/Text/Text.tsx index ed0065f8a6..4abab4d56c 100644 --- a/packages/plasma-new-hope/src/components/Typography/Text/Text.tsx +++ b/packages/plasma-new-hope/src/components/Typography/Text/Text.tsx @@ -1,11 +1,11 @@ import { base as sizeCSS } from '../variations/_size/base'; import type { FontProps } from '../Typography.types'; import { base } from '../Typography.styles'; -import { typographyRoot } from '../Typography'; +import { typographyRootCompose } from '../Typography'; export type TextProps = FontProps; -export const textRoot = typographyRoot; +export const textRoot = typographyRootCompose(); export const textConfig = { name: 'Text', diff --git a/packages/plasma-new-hope/src/components/Typography/Typography.tsx b/packages/plasma-new-hope/src/components/Typography/Typography.tsx index 54077415ae..f280d6aada 100644 --- a/packages/plasma-new-hope/src/components/Typography/Typography.tsx +++ b/packages/plasma-new-hope/src/components/Typography/Typography.tsx @@ -7,30 +7,11 @@ import { cx } from '../../utils'; import { classes } from './tokens'; import { FontProps } from './Typography.types'; -export const typographyRoot = (Root: RootProps) => +export const typographyRootCompose = (defaultArgs?: { defaultBold?: boolean }) => ( + Root: RootProps, +) => forwardRef((props, ref) => { - const { size, children, breakWord, bold, className, style, ...rest } = props; - - const withBreakWord = breakWord ? classes.typoWithBreakWord : undefined; - const typographyBold = bold ? classes.typoBold : undefined; - - return ( - - {children} - - ); - }); - -export const typographyRootBoldDefault = (Root: RootProps) => - forwardRef((props, ref) => { - const { size, children, breakWord, bold = true, className, style, ...rest } = props; + const { size, children, breakWord, bold = defaultArgs?.defaultBold, className, style, ...rest } = props; const withBreakWord = breakWord ? classes.typoWithBreakWord : undefined; const typographyBold = bold ? classes.typoBold : undefined;