Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

feat: typography refactoring; #1442

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

feat: typography refactoring; #1442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0e64173
feat: typography refactoring;
denisx Nov 14, 2024
91aa452
Merge branch 'master' into feat/DS-7758
denisx Nov 14, 2024
1e4ab3f
fix: comments;
denisx Nov 14, 2024
2ce7709
fix: styles import;
denisx Nov 14, 2024
6045cc0
fix: tests;
denisx Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions .changeset/large-phones-mix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
'@alfalab/core-components-typography': major
'@alfalab/core-components-accordion': patch
'@alfalab/core-components-circular-progress-bar': patch
'@alfalab/core-components-confirmation': patch
'@alfalab/core-components-list': patch
'@alfalab/core-components-list-header': patch
'@alfalab/core-components-modal': patch
'@alfalab/core-components-navigation-bar-private': patch
'@alfalab/core-components-product-cover': patch
'@alfalab/core-components-pure-cell': patch
'@alfalab/core-components-side-panel': patch
'@alfalab/core-components-tab-bar': patch
---

Рефакторинг компонента Typography:
- Компоненты TitleDesktop и TitleMobile отделены от Title (проп device остался только в Title)
- Компонент Title помечен как deprecated в пользу TitleDesktop и TitleMobile
- В корневой импорт, к текущему компаунду, добавлены атомарные всех компонентов (TitleDesktop, TitleMobile, TitleResponsive, Text)
- Вынесены коммон-переменные и типы для переиспользования в компонентах, тестах, стори
- Более четкое разделение desktop/mobile в стилях
- Названия стилей дополнены постфиксом
- Названия стилей переведены в camelCase / snake_case
- Фикс в типах: пропс defaultMatchMediaValue перемещён в компонент TitleResponsive
- В package.json добавлено sideEffects: false
2 changes: 2 additions & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@ __testfixtures__
colors-bluetint.css
colors-indigo.css
colors-addons.css
*.snap
tsconfig.json
4 changes: 2 additions & 2 deletions packages/accordion/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`Accordion Display test should match snapshots for base 1`] = `
class="header"
>
<span
class="primary-large medium"
class="primary-largeView mediumWeight"
>
Зачем нужен аккордион?
</span>
Expand Down Expand Up @@ -46,7 +46,7 @@ exports[`Accordion Display test should match snapshots for base 1`] = `
class="bodyContent"
>
<span
class="primary-medium"
class="primary-mediumView"
>
Используется для создания интерактивных списков, которые можно разворачивать и сворачивать для отображения дополнительной информации
</span>
Expand Down
Binary file added .../chart/src/__image_snapshots__/__diff_output__/chart-dark-preview-snap-diff.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/circular-progress-bar/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ exports[`ProgressBar Snapshots tests should match snapshot 1`] = `
class="labelWrapper"
>
<div
class="title secondary secondary-large bold"
class="title secondaryColor secondary-largeView boldWeight"
>
20
</div>
Expand Down Expand Up @@ -114,7 +114,7 @@ exports[`ProgressBar Snapshots tests should match with view snapshot 1`] = `
class="labelWrapper"
>
<div
class="title secondary secondary-large bold"
class="title secondaryColor secondary-largeView boldWeight"
>
20
</div>
Expand Down
30 changes: 15 additions & 15 deletions packages/confirmation/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`Confirmation Snapshot tests should match snapshot 1`] = `
class="component left"
>
<h3
class="component header typography styrene-medium medium primary"
class="component header typography styreneFont_mediumView mediumWeight primaryColor"
>
Введите код из сообщения
</h3>
Expand Down Expand Up @@ -57,7 +57,7 @@ exports[`Confirmation Snapshot tests should match snapshot 1`] = `
</div>
</div>
<div
class="countdownContainer typographyTheme primary-medium"
class="countdownContainer typographyTheme primary-mediumView"
>
Запросить повторно можно через 01:00
</div>
Expand Down Expand Up @@ -85,7 +85,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_CHECKING st
class="component left"
>
<h3
class="component header typography styrene-medium medium primary"
class="component header typography styreneFont_mediumView mediumWeight primaryColor"
>
Введите код из сообщения
</h3>
Expand Down Expand Up @@ -224,7 +224,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_ERROR state
class="component left"
>
<h3
class="component header typography styrene-medium medium primary"
class="component header typography styreneFont_mediumView mediumWeight primaryColor"
>
Введите код из сообщения
</h3>
Expand Down Expand Up @@ -278,7 +278,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_ERROR state
</div>
</div>
<div
class="countdownContainer typographyTheme primary-medium"
class="countdownContainer typographyTheme primary-mediumView"
>
Запросить повторно можно через 01:00
</div>
Expand Down Expand Up @@ -306,7 +306,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_SENDING sta
class="component left"
>
<h3
class="component header typography styrene-medium medium primary"
class="component header typography styreneFont_mediumView mediumWeight primaryColor"
>
Введите код из сообщения
</h3>
Expand Down Expand Up @@ -445,12 +445,12 @@ exports[`Confirmation Snapshot tests should match snapshot with FATAL_ERROR scre
class="component left"
>
<h3
class="component header typography styrene-medium medium primary"
class="component header typography styreneFont_mediumView mediumWeight primaryColor"
>
Ввести код больше нельзя
</h3>
<span
class="typographyTheme primary primary-medium"
class="typographyTheme primaryColor primary-mediumView"
>
Вы ввели код неверно более 5 раз. В целях безопасности мы ограничили дальнейший ввод.
</span>
Expand Down Expand Up @@ -478,12 +478,12 @@ exports[`Confirmation Snapshot tests should match snapshot with HINT screen 1`]
class="component left"
>
<h3
class="component header typography styrene-medium medium primary"
class="component header typography styreneFont_mediumView mediumWeight primaryColor"
>
Превышено количество попыток запроса кода
</h3>
<span
class="description typographyTheme primary primary-medium"
class="description typographyTheme primaryColor primary-mediumView"
>
Повторное подтверждение кодом будет возможно через 24 часа
</span>
Expand Down Expand Up @@ -522,12 +522,12 @@ exports[`Confirmation Snapshot tests should match snapshot with HINT screen 2`]
class="component left"
>
<h3
class="component header typography styrene-medium medium primary"
class="component header typography styreneFont_mediumView mediumWeight primaryColor"
>
Не приходит сообщение?
</h3>
<span
class="text typographyTheme primary primary-medium"
class="text typographyTheme primaryColor primary-mediumView"
>
Если у вас изменился номер телефона, позвоните нам или обратитесь в любое отделение банка.
</span>
Expand All @@ -548,7 +548,7 @@ exports[`Confirmation Snapshot tests should match snapshot with HINT screen 2`]
</span>
</a>
<span
class="text typographyTheme primary primary-medium"
class="text typographyTheme primaryColor primary-mediumView"
>
— для звонков по России
</span>
Expand All @@ -567,14 +567,14 @@ exports[`Confirmation Snapshot tests should match snapshot with HINT screen 2`]
</span>
</a>
<span
class="text typographyTheme primary primary-medium"
class="text typographyTheme primaryColor primary-mediumView"
>
— в Москве и за границей
</span>
</div>
</div>
<span
class="text typographyTheme primary primary-medium"
class="text typographyTheme primaryColor primary-mediumView"
>
Если номер не менялся, возможно, перегружен сервис отправки сообщений. Попробуйте повторить действие через несколько минут.
</span>
Expand Down
12 changes: 6 additions & 6 deletions packages/list-header/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ Object {
class="component filled"
>
<span
class="secondary-large"
class="secondary-largeView"
>
Title
</span>
<span
class="description secondary-large"
class="description secondary-largeView"
>
, Description
</span>
Expand All @@ -26,12 +26,12 @@ Object {
class="component filled"
>
<span
class="secondary-large"
class="secondary-largeView"
>
Title
</span>
<span
class="description secondary-large"
class="description secondary-largeView"
>
, Description
</span>
Expand Down Expand Up @@ -100,7 +100,7 @@ Object {
class="component"
>
<span
class="secondary-large"
class="secondary-largeView"
>
Title
</span>
Expand All @@ -112,7 +112,7 @@ Object {
class="component"
>
<span
class="secondary-large"
class="secondary-largeView"
>
Title
</span>
Expand Down
16 changes: 8 additions & 8 deletions packages/list/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ Object {
class="item"
>
<div
class="monospace slot defaultColor primary-medium"
class="monospace slot defaultColor primary-mediumView"
>
—
</div>
<div>
<div
class="primary-medium"
class="primary-mediumView"
>
List
</div>
Expand All @@ -35,13 +35,13 @@ Object {
class="item"
>
<div
class="monospace slot defaultColor primary-medium"
class="monospace slot defaultColor primary-mediumView"
>
—
</div>
<div>
<div
class="primary-medium"
class="primary-mediumView"
>
List
</div>
Expand Down Expand Up @@ -115,13 +115,13 @@ Object {
class="item"
>
<div
class="monospace slot defaultColor primary-medium"
class="monospace slot defaultColor primary-mediumView"
>
1.
</div>
<div>
<div
class="primary-medium"
class="primary-mediumView"
>
List
</div>
Expand All @@ -138,13 +138,13 @@ Object {
class="item"
>
<div
class="monospace slot defaultColor primary-medium"
class="monospace slot defaultColor primary-mediumView"
>
1.
</div>
<div>
<div
class="primary-medium"
class="primary-mediumView"
>
List
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/modal/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ exports[`ModalDesktop snapshots tests should match snapshot 1`] = `
</svg>
</div>
<span
class="text primary-large medium"
class="text primary-largeView mediumWeight"
style="opacity: 1;"
>
Назад
Expand Down Expand Up @@ -187,7 +187,7 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
</svg>
</div>
<span
class="text component medium"
class="text componentView mediumWeight"
style="opacity: 1;"
>
Назад
Expand Down
2 changes: 1 addition & 1 deletion packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = `
</svg>
</div>
<span
class="text primary-large medium"
class="text primary-largeView mediumWeight"
style="opacity: 1;"
>
Назад
Expand Down
4 changes: 2 additions & 2 deletions packages/product-cover/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ exports[`ProductCover Snapshots tests should match snapshots 1`] = `
class="component"
>
<div
class="cardholderName static-primary-light secondary-medium medium"
class="cardholderName static-primary-lightColor secondary-mediumView mediumWeight"
>
Cardholder Name
</div>
<div
class="cardNumber"
>
<span
class="static-primary-light primary-medium medium"
class="static-primary-lightColor primary-mediumView mediumWeight"
>
·· 
1234
Expand Down
4 changes: 2 additions & 2 deletions packages/pure-cell/src/component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ describe('PureCell', () => {
const link = getByTestId(linkDti);
const textTypography = getByTestId(`${pureCellTextDti}-text_content`);

expect(textTypography).toHaveClass('component-primary primary');
expect(textTypography).toHaveClass('component-primaryView primaryColor');
expect(link.parentElement).toBe(textTypography);
});

Expand All @@ -306,7 +306,7 @@ describe('PureCell', () => {
const link = getByTestId(linkDti);
const valueTypography = getByTestId(`${pureCellTextDti}-text_value`);

expect(valueTypography).toHaveClass('component-primary link');
expect(valueTypography).toHaveClass('component-primaryView linkColor');
expect(link.parentElement).toBe(valueTypography);
});
});
Expand Down
4 changes: 2 additions & 2 deletions packages/side-panel/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ exports[`SidePanelDesktop snapshots tests should match snapshot 1`] = `
</svg>
</div>
<span
class="text primary-large medium"
class="text primary-largeView mediumWeight"
style="opacity: 1;"
>
Назад
Expand Down Expand Up @@ -194,7 +194,7 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = `
</svg>
</div>
<span
class="text component medium"
class="text componentView mediumWeight"
style="opacity: 1;"
>
Назад
Expand Down
Loading
Loading