feat(PanelHeaderContent): rename status to subtitle (#7781)

packages/codemods/src/transforms/v7/__testfixtures__/panel-header-content/basic.input.tsx

@@ -0,0 +1,22 @@
+import { Avatar, PanelHeader, PanelHeaderBack, PanelHeaderButton, PanelHeaderContent } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <PanelHeader
+        before={<PanelHeaderBack label="Назад" onClick={() => {}} />}
+        after={
+          <PanelHeaderButton onClick={() => {}}/>
+        }
+      >
+        <PanelHeaderContent
+          status="был в сети сегодня, в 18:46"
+          before={<Avatar size={36} src={'user_va'} />}
+        >
+          Влад Анесов
+        </PanelHeaderContent>
+      </PanelHeader>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__tests__/__snapshots__/panel-header-content.ts.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`panel-header-content transforms correctly 1`] = `
+"import { Avatar, PanelHeader, PanelHeaderBack, PanelHeaderButton, PanelHeaderContent } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <PanelHeader
+        before={<PanelHeaderBack label="Назад" onClick={() => {}} />}
+        after={
+          <PanelHeaderButton onClick={() => {}}/>
+        }
+      >
+        <PanelHeaderContent
+          subtitle="был в сети сегодня, в 18:46"
+          before={<Avatar size={36} src={'user_va'} />}
+        >
+          Влад Анесов
+        </PanelHeaderContent>
+      </PanelHeader>
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/panel-header-content.ts

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

packages/codemods/src/transforms/v7/panel-header-content.ts

@@ -0,0 +1,18 @@
+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, 'PanelHeaderContent', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, { status: 'subtitle' });
+  }
+
+  return source.toSource();
+}

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

@@ -140,7 +140,7 @@ const Example = () => {
               />
             }
           >
-            <PanelHeaderContent before={<Avatar size={36} />} status="Был в сети вчера">
+            <PanelHeaderContent before={<Avatar size={36} />} subtitle="Был в сети вчера">
               Влад Анесов
             </PanelHeaderContent>
           </PanelHeader>

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

@@ -9,7 +9,7 @@ export const PanelHeaderContentPlayground = (props: ComponentPlaygroundProps) =>
       propSets={[
         {
           before: [<Avatar size={36} key="icon" />, undefined],
-          status: ['Был в сети вчера', undefined],
+          subtitle: ['Был в сети вчера', undefined],
           children: ['Влад Анесов'],
           aside: ['Подробнее', undefined],
         },

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

@@ -24,15 +24,15 @@
   block-size: 100%;
 }
 
-.status,
+.subtitle,
 .childrenIn,
 .childrenText {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.status {
+.subtitle {
   order: 1;
   margin-block-start: 1px;
   max-inline-size: 100%;

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

@@ -36,7 +36,7 @@ export const Example: Story = {
               <PanelHeaderBack onClick={noop} label={platform === 'vkcom' ? 'Назад' : undefined} />
             }
           >
-            <PanelHeaderContent before={<Avatar size={36} />} status="Был в сети вчера">
+            <PanelHeaderContent before={<Avatar size={36} />} subtitle="Был в сети вчера">
               Влад Анесов
             </PanelHeaderContent>
           </PanelHeader>

packages/vkui/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -25,18 +25,18 @@ const sizeYClassNames = {
 export interface PanelHeaderContentProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   aside?: React.ReactNode;
   before?: React.ReactNode;
-  status?: React.ReactNode;
+  subtitle?: React.ReactNode;
 }
 
 interface PanelHeaderChildrenProps extends HasChildren {
-  hasStatus: boolean;
+  hasSubtitle: boolean;
   hasBefore: boolean;
 }
 
-const PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {
+const PanelHeaderChildren = ({ hasSubtitle, hasBefore, children }: PanelHeaderChildrenProps) => {
   const platform = usePlatform();
 
-  return hasStatus || hasBefore ? (
+  return hasSubtitle || hasBefore ? (
     <Text
       className={styles.childrenText}
       Component="div"
@@ -54,7 +54,7 @@ const PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChil
  */
 export const PanelHeaderContent = ({
   aside,
-  status,
+  subtitle,
   before,
   children,
   onClick,
@@ -90,9 +90,12 @@ export const PanelHeaderContent = ({
         {...inProps}
         className={classNames(styles.in, !before && platform !== 'android' && styles.inCentered)}
       >
-        {hasReactNode(status) && <Footnote className={styles.status}>{status}</Footnote>}
+        {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}
         <div className={styles.children}>
-          <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>
+          <PanelHeaderChildren
+            hasSubtitle={hasReactNode(subtitle)}
+            hasBefore={hasReactNode(before)}
+          >
             {children}
           </PanelHeaderChildren>
           {hasReactNode(aside) && <div className={styles.aside}>{aside}</div>}

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

@@ -23,7 +23,7 @@ const Example = () => {
           }
         >
           <PanelHeaderContent
-            status="был в сети сегодня, в 18:46"
+            subtitle="был в сети сегодня, в 18:46"
             before={<Avatar size={36} src={getAvatarUrl('user_va')} />}
           >
             Влад Анесов