feat(RichCell): rename props header, text, caption

packages/codemods/src/transforms/v7/__testfixtures__/rich-cell/basic.input.tsx

@@ -0,0 +1,31 @@
+import { Avatar, RichCell } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const text = "Text"
+  return (
+    <React.Fragment>
+      <RichCell
+        before={<Avatar size={72} src="" />}
+        subhead="Subhead"
+        text="Text"
+        caption="Caption"
+        after="After"
+        afterCaption="After Caption"
+      >
+        Children
+      </RichCell>
+
+      <RichCell
+        before={<Avatar size={72} src="" />}
+        subhead={"Subhead"}
+        text={text}
+        caption={"Caption"}
+        after="After"
+        afterCaption="After Caption"
+      >
+        Children
+      </RichCell>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__tests__/__snapshots__/rich-cell.ts.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rich-cell transforms correctly 1`] = `
+"import { Avatar, RichCell } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const text = "Text"
+  return (
+    (<React.Fragment>
+      <RichCell
+        before={<Avatar size={72} src="" />}
+        overTitle="Subhead"
+        subtitle="Text"
+        extraSubtitle="Caption"
+        after="After"
+        afterCaption="After Caption"
+      >
+        Children
+      </RichCell>
+      <RichCell
+        before={<Avatar size={72} src="" />}
+        overTitle={"Subhead"}
+        subtitle={text}
+        extraSubtitle={"Caption"}
+        after="After"
+        afterCaption="After Caption"
+      >
+        Children
+      </RichCell>
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/rich-cell.ts

@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'rich-cell';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});

packages/codemods/src/transforms/v7/rich-cell.ts

@@ -0,0 +1,22 @@
+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, 'RichCell', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, {
+      subhead: 'overTitle',
+      text: 'subtitle',
+      caption: 'extraSubtitle',
+    });
+  }
+
+  return source.toSource();
+}

packages/vkui/src/components/RichCell/Readme.md

@@ -7,9 +7,9 @@
     <Group>
       <RichCell
         before={<Avatar size={72} src={getAvatarUrl('')} />}
-        subhead="Subhead"
-        text="Text"
-        caption="Caption"
+        overTitle="Over Title"
+        subtitle="Subtitle"
+        extraSubtitle="Extra Subtitle"
         after="After"
         afterCaption="After Caption"
         bottom={
@@ -34,7 +34,7 @@
     <Group header={<Header>Рекомендации друзей</Header>}>
       <RichCell
         before={<Avatar size={72} src={getAvatarUrl('user_ilyagrshn')} />}
-        caption="Команда ВКонтакте, Санкт-Петербург"
+        extraSubtitle="Команда ВКонтакте, Санкт-Петербург"
         bottom={
           <UsersStack
             photos={[
@@ -94,8 +94,8 @@
     <Group header={<Header>История переводов</Header>}>
       <RichCell
         before={<Avatar size={48} src={getAvatarUrl('user_ti')} />}
-        text="Держи за обед в EZO"
-        caption="сегодня в 18:00"
+        subtitle="Держи за обед в EZO"
+        extraSubtitle="сегодня в 18:00"
         after="+ 1 232 ₽"
         afterCaption="Комиссия 1%"
         actions={
@@ -121,7 +121,7 @@
       </RichCell>
       <RichCell
         before={<Avatar size={48} src={getAvatarUrl('user_lihachyov')} />}
-        caption="Вчера в 20:30"
+        extraSubtitle="Вчера в 20:30"
         after="- 1 800 ₽"
       >
         Михаил Лихачев

packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx

@@ -13,10 +13,10 @@ export const RichCellPlayground = (props: ComponentPlaygroundProps) => {
       propSets={[
         {
           before: [<Avatar size={72} key="72" />],
-          subhead: ['Subhead subhead subhead subhead'],
+          overTitle: ['Subhead subhead subhead subhead'],
           children: ['Children children children children'],
-          text: ['Text text text text text text'],
-          caption: ['Caption caption caption caption'],
+          subtitle: ['Text text text text text text'],
+          extraSubtitle: ['Caption caption caption caption'],
           after: ['After'],
           afterAlign: ['start', 'center', 'end'],
           afterCaption: ['After Caption'],
@@ -35,10 +35,10 @@ export const RichCellPlayground = (props: ComponentPlaygroundProps) => {
         },
         {
           before: [<Avatar size={72} key="72" />],
-          subhead: ['Subhead subhead subhead subhead'],
+          overTitle: ['Subhead subhead subhead subhead'],
           children: ['Children children children children'],
-          text: ['Text text text text text text'],
-          caption: ['Caption caption caption caption'],
+          subtitle: ['Text text text text text text'],
+          extraSubtitle: ['Caption caption caption caption'],
           after: ['After'],
           afterCaption: ['After Caption'],
           bottom: [
@@ -57,7 +57,7 @@ export const RichCellPlayground = (props: ComponentPlaygroundProps) => {
         {
           before: [<Avatar size={48} key="48" />],
           children: ['Михаил Лихачев'],
-          caption: ['Команда ВКонтакте, Санкт-Петербург'],
+          overTitle: ['Команда ВКонтакте, Санкт-Петербург'],
           after: [
             <RichCell.Icon key="icon">
               <Icon24UserAddOutline />

packages/vkui/src/components/RichCell/RichCell.module.css

@@ -86,11 +86,11 @@
   }
 }
 
-.subhead {
+.overTitle {
   color: var(--vkui--color_text_secondary);
 }
 
-.caption {
+.extraSubtitle {
   margin-block-start: 1px;
   color: var(--vkui--color_text_secondary);
 }
@@ -99,10 +99,10 @@
   font-weight: var(--vkui--font_weight_accent2);
 }
 
-.textEllipsis .subhead,
+.textEllipsis .overTitle,
 .textEllipsis .children,
-.textEllipsis .text,
-.textEllipsis .caption {
+.textEllipsis .subtitle,
+.textEllipsis .extraSubtitle {
   white-space: nowrap;
   text-overflow: ellipsis;
   max-inline-size: 100%;
@@ -118,22 +118,22 @@
 }
 
 .children,
-.text,
+.subtitle,
 .afterChildren {
   font-size: var(--vkui--font_paragraph--font_size--regular);
   line-height: var(--vkui--font_paragraph--line_height--regular);
 }
 
 .sizeYCompact .children,
-.sizeYCompact .text,
+.sizeYCompact .subtitle,
 .sizeYCompact .afterChildren {
   font-size: var(--vkui--font_subhead--font_size--regular);
   line-height: var(--vkui--font_subhead--line_height--regular);
 }
 
 @media (--sizeY-compact) {
   .sizeYNone .children,
-  .sizeYNone .text,
+  .sizeYNone .subtitle,
   .sizeYNone .afterChildren {
     font-size: var(--vkui--font_subhead--font_size--regular);
     line-height: var(--vkui--font_subhead--line_height--regular);

packages/vkui/src/components/RichCell/RichCell.stories.tsx

@@ -66,9 +66,9 @@ type Story = StoryObj<RichCellProps>;
 export const Playground: Story = {
   args: {
     before: 'Avatar72',
-    subhead: 'Subhead',
-    text: 'Text',
-    caption: 'Caption',
+    overTitle: 'Over Title',
+    subtitle: 'Subtitle',
+    extraSubtitle: 'Extra Subtitle',
     after: 'After',
     afterCaption: 'After Caption',
     children: 'Example',

packages/vkui/src/components/RichCell/RichCell.test.tsx

@@ -15,9 +15,9 @@ describe('RichCell', () => {
     (afterAlign, expectedContainerStyle, alignClassName) => {
       const { container } = render(
         <RichCell
-          subhead="Subhead"
-          text="Text"
-          caption="Caption"
+          overTitle="Subhead"
+          subtitle="Text"
+          extraSubtitle="Caption"
           afterAlign={afterAlign}
           after={<div data-testid="after" />}
           afterCaption="After Caption"

packages/vkui/src/components/RichCell/RichCell.tsx

@@ -23,15 +23,15 @@ export interface RichCellProps extends TappableProps {
   /**
    * Контейнер для текста над `children`.
    */
-  subhead?: React.ReactNode;
+  overTitle?: React.ReactNode;
   /**
    * Контейнер для текста под `children`.
    */
-  text?: React.ReactNode;
+  subtitle?: React.ReactNode;
   /**
-   * Контейнер для текста под `text`.
+   * Контейнер для текста под `subtitle`.
    */
-  caption?: React.ReactNode;
+  extraSubtitle?: React.ReactNode;
   /**
    * Контейнер для контента под `caption`. Например `<UsersStack size="m" />`.
    */
@@ -79,10 +79,10 @@ export interface RichCellProps extends TappableProps {
 export const RichCell: React.FC<RichCellProps> & {
   Icon: typeof RichCellIcon;
 } = ({
-  subhead,
+  overTitle,
   children,
-  text,
-  caption,
+  subtitle,
+  extraSubtitle,
   before,
   after,
   afterCaption,
@@ -121,16 +121,16 @@ export const RichCell: React.FC<RichCellProps> & {
       <div className={styles.in}>
         <div className={styles.content}>
           <div className={styles.contentBefore}>
-            {subhead && (
-              <Subhead Component="div" className={styles.subhead}>
-                {subhead}
+            {overTitle && (
+              <Subhead Component="div" className={styles.overTitle}>
+                {overTitle}
               </Subhead>
             )}
             <div className={styles.children}>{children}</div>
-            {text && <div className={styles.text}>{text}</div>}
-            {caption && (
-              <Subhead Component="div" className={styles.caption}>
-                {caption}
+            {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
+            {extraSubtitle && (
+              <Subhead Component="div" className={styles.extraSubtitle}>
+                {extraSubtitle}
               </Subhead>
             )}
           </div>