diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/form-status/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/form-status/basic.input.tsx new file mode 100644 index 0000000000..9aaaba702b --- /dev/null +++ b/packages/codemods/src/transforms/v7/__testfixtures__/form-status/basic.input.tsx @@ -0,0 +1,12 @@ +import { FormStatus } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + + + Необходимо корректно ввести номер в международном формате + + + ); +}; diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/banner.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/banner.ts.snap index 3f659e01d5..3493009bdd 100644 --- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/banner.ts.snap +++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/banner.ts.snap @@ -9,16 +9,16 @@ const App = () => { ( } - header="Сегодня день рождения Михаила Лихачёва" - subhead="Подарите подарок" - extraSubhead="Дополнительный текст" + title="Сегодня день рождения Михаила Лихачёва" + subtitle="Подарите подарок" + extraSubtitle="Дополнительный текст" asideMode="dismiss" /> } - header="Сегодня день рождения Михаила Лихачёва" - subhead={"Подарите подарок"} - extraSubhead={"Дополнительный текст"} + title="Сегодня день рождения Михаила Лихачёва" + subtitle={"Подарите подарок"} + extraSubtitle={"Дополнительный текст"} asideMode="dismiss" /> ) diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/form-status.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/form-status.ts.snap new file mode 100644 index 0000000000..161095279e --- /dev/null +++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/form-status.ts.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`form-status transforms correctly 1`] = ` +"import { FormStatus } from '@vkontakte/vkui'; +import React from 'react'; + +const App = () => { + return ( + ( + + Необходимо корректно ввести номер в международном формате + + ) + ); +};" +`; diff --git a/packages/codemods/src/transforms/v7/__tests__/form-status.ts b/packages/codemods/src/transforms/v7/__tests__/form-status.ts new file mode 100644 index 0000000000..2c7fe08499 --- /dev/null +++ b/packages/codemods/src/transforms/v7/__tests__/form-status.ts @@ -0,0 +1,12 @@ +jest.autoMockOff(); + +import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper'; + +const name = 'form-status'; +const fixtures = ['basic'] as const; + +describe(name, () => { + fixtures.forEach((test) => + defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`), + ); +}); diff --git a/packages/codemods/src/transforms/v7/banner.ts b/packages/codemods/src/transforms/v7/banner.ts index e82cdf6ea4..9c09dc92dd 100644 --- a/packages/codemods/src/transforms/v7/banner.ts +++ b/packages/codemods/src/transforms/v7/banner.ts @@ -11,7 +11,11 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi const { localName } = getImportInfo(j, file, 'Banner', alias); if (localName) { - renameProp(j, source, localName, { subheader: 'subhead', text: 'extraSubhead' }); + renameProp(j, source, localName, { + subheader: 'subtitle', + text: 'extraSubtitle', + header: 'title', + }); } return source.toSource(); diff --git a/packages/codemods/src/transforms/v7/form-status.ts b/packages/codemods/src/transforms/v7/form-status.ts new file mode 100644 index 0000000000..1334e1db11 --- /dev/null +++ b/packages/codemods/src/transforms/v7/form-status.ts @@ -0,0 +1,20 @@ +import { API, FileInfo } from 'jscodeshift'; +import { getImportInfo, renameProp } from '../../codemod-helpers'; +import { JSCodeShiftOptions } from '../../types'; + +export const parser = 'tsx'; + +export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) { + const { alias } = options; + const j = api.jscodeshift; + const source = j(file.source); + const { localName } = getImportInfo(j, file, 'FormStatus', alias); + + if (localName) { + renameProp(j, source, localName, { + header: 'title', + }); + } + + return source.toSource(); +} diff --git a/packages/vkui/src/components/Banner/Banner.e2e-playground.tsx b/packages/vkui/src/components/Banner/Banner.e2e-playground.tsx index 71117e6490..3f01314356 100644 --- a/packages/vkui/src/components/Banner/Banner.e2e-playground.tsx +++ b/packages/vkui/src/components/Banner/Banner.e2e-playground.tsx @@ -29,8 +29,8 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => { { mode: ['image'], imageTheme: ['dark'], - header: ['Мои достижения'], - subhead: ['Разблокировано 9 из 36'], + title: ['Мои достижения'], + subtitle: ['Разблокировано 9 из 36'], background: [
], before: [undefined], asideMode: [undefined], @@ -44,21 +44,21 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => { mode: ['image'], asideMode: ['dismiss', 'expand'], imageTheme: ['light'], - header: ['Мои достижения'], - subhead: ['Разблокировано 9 из 36'], + title: ['Мои достижения'], + subtitle: ['Разблокировано 9 из 36'], }, { mode: ['image'], asideMode: ['dismiss', 'expand'], imageTheme: ['dark'], - header: ['Мои достижения'], - subhead: ['Разблокировано 9 из 36'], + title: ['Мои достижения'], + subtitle: ['Разблокировано 9 из 36'], background: [
], }, { - header: ['Header'], - subhead: ['Subheader'], - extraSubhead: ['Extra Subhead'], + title: ['Header'], + subtitle: ['Subheader'], + extraSubtitle: ['Extra Subhead'], actions: [], }, ]} @@ -67,8 +67,8 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
} - header="Баста в Ледовом" - subhead="Большой концерт" + title="Баста в Ледовом" + subtitle="Большой концерт" asideMode="dismiss" actions={} {...props} diff --git a/packages/vkui/src/components/Banner/Banner.module.css b/packages/vkui/src/components/Banner/Banner.module.css index a24833dfe5..a09986554a 100644 --- a/packages/vkui/src/components/Banner/Banner.module.css +++ b/packages/vkui/src/components/Banner/Banner.module.css @@ -45,8 +45,8 @@ z-index: var(--vkui_internal--z_index_banner_content); } -.subhead, -.extraSubhead { +.subtitle, +.extraSubtitle { color: var(--vkui--color_text_subhead); } @@ -92,8 +92,8 @@ margin-block-start: 12px; } -.subhead:not(:first-child), -.extraSubhead:not(:first-child) { +.subtitle:not(:first-child), +.extraSubtitle:not(:first-child) { margin-block-start: 2px; } @@ -110,7 +110,7 @@ color: var(--vkui--color_text_contrast); } -.inverted .subhead { +.inverted .subtitle { color: var(--vkui--color_text_contrast); opacity: 0.72; } @@ -122,8 +122,8 @@ padding: 16px; } -.sizeM .subhead:not(:first-child), -.sizeM .extraSubhead:not(:first-child) { +.sizeM .subtitle:not(:first-child), +.sizeM .extraSubtitle:not(:first-child) { margin-block-start: 4px; } @@ -147,6 +147,6 @@ } /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -:global(.vkuiInternalFormStatus--mode-error) .subhead { +:global(.vkuiInternalFormStatus--mode-error) .subtitle { color: var(--vkui--color_background_negative); } diff --git a/packages/vkui/src/components/Banner/Banner.stories.tsx b/packages/vkui/src/components/Banner/Banner.stories.tsx index 54df1e32f5..f1287e127b 100644 --- a/packages/vkui/src/components/Banner/Banner.stories.tsx +++ b/packages/vkui/src/components/Banner/Banner.stories.tsx @@ -42,8 +42,8 @@ export const Playground: Story = { src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg" /> ), - header: 'Баста в Ледовом', - subhead: 'Большой концерт', + title: 'Баста в Ледовом', + subtitle: 'Большой концерт', asideMode: 'dismiss', actions: 'ButtonPrimary', }, diff --git a/packages/vkui/src/components/Banner/Banner.tsx b/packages/vkui/src/components/Banner/Banner.tsx index ecee391ebf..42ee8e271b 100644 --- a/packages/vkui/src/components/Banner/Banner.tsx +++ b/packages/vkui/src/components/Banner/Banner.tsx @@ -14,7 +14,7 @@ import { Text } from '../Typography/Text/Text'; import { Title } from '../Typography/Title/Title'; import styles from './Banner.module.css'; -export interface BannerProps extends HTMLAttributesWithRootRef { +export interface BannerProps extends Omit, 'title'> { /** * Тип баннера. */ @@ -42,15 +42,15 @@ export interface BannerProps extends HTMLAttributesWithRootRef { /** * Заголовок. */ - header?: React.ReactNode; + title?: React.ReactNode; /** * Подзаголовок. */ - subhead?: React.ReactNode; + subtitle?: React.ReactNode; /** * Дополнительный подзаголовок баннера. */ - extraSubhead?: React.ReactNode; + extraSubtitle?: React.ReactNode; /** * При использовании `mode="image"`. * @@ -90,9 +90,9 @@ export const Banner = ({ size = 's', before, asideMode, - header, - subhead, - extraSubhead, + title, + subtitle, + extraSubtitle, children, background, actions, @@ -118,19 +118,19 @@ export const Banner = ({ {before &&
{before}
}
- {hasReactNode(header) && ( + {hasReactNode(title) && ( - {header} + {title} )} - {hasReactNode(subhead) && ( - - {subhead} + {hasReactNode(subtitle) && ( + + {subtitle} )} - {hasReactNode(extraSubhead) && ( - - {extraSubhead} + {hasReactNode(extraSubtitle) && ( + + {extraSubtitle} )} {hasReactNode(actions) && React.Children.count(actions) > 0 && ( diff --git a/packages/vkui/src/components/Banner/Readme.md b/packages/vkui/src/components/Banner/Readme.md index 4112645a4a..87ad1b2ba2 100644 --- a/packages/vkui/src/components/Banner/Readme.md +++ b/packages/vkui/src/components/Banner/Readme.md @@ -15,8 +15,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)'; src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg" /> } - header="Баста в Ледовом" - subhead="Большой концерт" + title="Баста в Ледовом" + subtitle="Большой концерт" asideMode="dismiss" onDismiss={noop} actions={} @@ -31,8 +31,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)'; src="https://sun9-32.userapi.com/uFzLOK55iY7pC0DHjneEdP9G6gXcXi2Mxj9wVA/wnTmzh_blNM.jpg" /> } - header="Для Вас" - subhead="Обновлено сегодня" + title="Для Вас" + subtitle="Обновлено сегодня" actions={} />
@@ -44,8 +44,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)'; } - header="Подписка за рубль!" - subhead="Предложение действует только до конца февраля" + title="Подписка за рубль!" + subtitle="Предложение действует только до конца февраля" asideMode="dismiss" onDismiss={noop} actions={ @@ -60,8 +60,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
} - header="Сегодня день рождения Михаила Лихачёва" - subhead="Подарите подарок" + title="Сегодня день рождения Михаила Лихачёва" + subtitle="Подарите подарок" asideMode="dismiss" onDismiss={noop} actions={} @@ -75,8 +75,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)'; ! } - header="Телефон ожидает подтверждения" - subhead={ + title="Телефон ожидает подтверждения" + subtitle={ Новый номер +7 ••• ••• •• 96 будет сохранён через семь дней.
@@ -106,20 +106,20 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
console.log('[Podcast banner] onClick')} />
- Mode: image, size: regular}> + Mode: image, size: regular}>
- Content: tint, size: medium}> + Content: tint, size: medium}>
Привлекайте больше людей
в Ваше сообщество @@ -163,8 +163,8 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)'; Привлекайте больше людей
в Ваше сообщество @@ -196,14 +196,14 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)'; Баста в Ледовом,
большой концерт } - subhead="Москва · 12 декабря" + subtitle="Москва · 12 декабря" background={
} - header="Для Вас" - subhead="Обновлено сегодня" + title="Для Вас" + subtitle="Обновлено сегодня" actions={