feat(Banner): rename typography props (#7773)

* feat(Banner): rename typography props * feat(FormStatus): rename header prop to title
VKCOM · Oct 17, 2024 · 84bbe43 · 84bbe43
1 parent b85b8da
commit 84bbe43
Show file tree

Hide file tree

Showing 26 changed files with 159 additions and 93 deletions.
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
@@ -0,0 +1,12 @@
+import { FormStatus } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <FormStatus header="Некорректный мобильный номер" mode="error">
+        Необходимо корректно ввести номер в международном формате
+      </FormStatus>
+    </React.Fragment>
+  );
+};
diff --git 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 = () => {
     (<React.Fragment>
       <Banner
         before={<Avatar size={48} src={'user_lihachyov'} />}
-        header="Сегодня день рождения Михаила Лихачёва"
-        subhead="Подарите подарок"
-        extraSubhead="Дополнительный текст"
+        title="Сегодня день рождения Михаила Лихачёва"
+        subtitle="Подарите подарок"
+        extraSubtitle="Дополнительный текст"
         asideMode="dismiss"
       />
       <Banner
         before={<Avatar size={48} src={'user_lihachyov'} />}
-        header="Сегодня день рождения Михаила Лихачёва"
-        subhead={"Подарите подарок"}
-        extraSubhead={"Дополнительный текст"}
+        title="Сегодня день рождения Михаила Лихачёва"
+        subtitle={"Подарите подарок"}
+        extraSubtitle={"Дополнительный текст"}
         asideMode="dismiss"
       />
     </React.Fragment>)

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
@@ -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 (
+    (<React.Fragment>
+      <FormStatus title="Некорректный мобильный номер" mode="error">
+        Необходимо корректно ввести номер в международном формате
+      </FormStatus>
+    </React.Fragment>)
+  );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/form-status.ts 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
@@ -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
@@ -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
@@ -29,8 +29,8 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
         {
           mode: ['image'],
           imageTheme: ['dark'],
-          header: ['Мои достижения'],
-          subhead: ['Разблокировано 9 из 36'],
+          title: ['Мои достижения'],
+          subtitle: ['Разблокировано 9 из 36'],
           background: [<div key="img-bg" style={{ backgroundColor: '#222222' }} />],
           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: [<div key="img-bg" style={{ backgroundColor: '#222222' }} />],
         },
         {
-          header: ['Header'],
-          subhead: ['Subheader'],
-          extraSubhead: ['Extra Subhead'],
+          title: ['Header'],
+          subtitle: ['Subheader'],
+          extraSubtitle: ['Extra Subhead'],
           actions: [<Button key="btn">Button</Button>],
         },
       ]}
@@ -67,8 +67,8 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
         <Div>
           <Banner
             before={<Image size={96} src="" />}
-            header="Баста в Ледовом"
-            subhead="Большой концерт"
+            title="Баста в Ледовом"
+            subtitle="Большой концерт"
             asideMode="dismiss"
             actions={<Button>Подробнее</Button>}
             {...props}

diff --git 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
@@ -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
@@ -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<HTMLDivElement> {
+export interface BannerProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'> {
   /**
    * Тип баннера.
    */
@@ -42,15 +42,15 @@ export interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Заголовок.
    */
-  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 && <div className={styles.before}>{before}</div>}
 
       <div className={styles.content}>
-        {hasReactNode(header) && (
+        {hasReactNode(title) && (
           <HeaderTypography Component="div" weight="2" level={size === 'm' ? '2' : '1'}>
-            {header}
+            {title}
           </HeaderTypography>
         )}
-        {hasReactNode(subhead) && (
-          <SubheadTypography Component="div" className={styles.subhead}>
-            {subhead}
+        {hasReactNode(subtitle) && (
+          <SubheadTypography Component="div" className={styles.subtitle}>
+            {subtitle}
           </SubheadTypography>
         )}
-        {hasReactNode(extraSubhead) && (
-          <Text Component="div" className={styles.extraSubhead}>
-            {extraSubhead}
+        {hasReactNode(extraSubtitle) && (
+          <Text Component="div" className={styles.extraSubtitle}>
+            {extraSubtitle}
           </Text>
         )}
         {hasReactNode(actions) && React.Children.count(actions) > 0 && (