feat(ContentCard): rename prop subtitle -> subhead (#7694)

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

@@ -0,0 +1,19 @@
+import { ContentCard } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <ContentCard
+        subtitle="VKUI"
+        header="ContentCard example"
+        caption="VKUI Styleguide > Blocks > ContentCard"
+      />
+      <ContentCard
+        subtitle={"VKUI"}
+        header="ContentCard example"
+        caption="VKUI Styleguide > Blocks > ContentCard"
+      />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`content-card transforms correctly 1`] = `
+"import { ContentCard } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <ContentCard
+        subhead="VKUI"
+        header="ContentCard example"
+        caption="VKUI Styleguide > Blocks > ContentCard"
+      />
+      <ContentCard
+        subhead={"VKUI"}
+        header="ContentCard example"
+        caption="VKUI Styleguide > Blocks > ContentCard"
+      />
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/content-card.ts

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

packages/codemods/src/transforms/v7/content-card.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, 'ContentCard', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, { subtitle: 'subhead' });
+  }
+
+  return source.toSource();
+}

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

@@ -7,7 +7,7 @@ export const ContentCardPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          subtitle: ['Album'],
+          subhead: ['Album'],
           header: ['Halsey – Badlands'],
           text: [
             'Badlands is the story about dreams and cruel reality, about opportunities and insurmountable obstacles, about love and broken hearts.',

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

@@ -28,6 +28,6 @@
 }
 
 .caption,
-.subtitle {
+.subhead {
   color: var(--vkui--color_text_secondary);
 }

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

@@ -20,7 +20,7 @@ type Story = StoryObj<ContentCardProps>;
 export const Playground: Story = {
   args: {
     src: 'https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80',
-    subtitle: 'unsplash',
+    subhead: 'unsplash',
     header: 'brown and gray mountains under blue sky during daytime photo',
     text: 'Mountain changji',
     caption: 'Photo by Siyuan on Unsplash',

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

@@ -5,7 +5,7 @@ import { ContentCard, type ContentCardProps } from './ContentCard';
 
 const ContentCardTest = (props: ContentCardProps) => (
   <ContentCard
-    subtitle="VKUI"
+    subhead="VKUI"
     header="ContentCard example"
     caption="VKUI Styleguide > Blocks > ContentCard"
     {...props}

packages/vkui/src/components/ContentCard/ContentCard.tsx

@@ -19,7 +19,7 @@ export interface ContentCardProps
   /**
    Текст над заголовком
    */
-  subtitle?: React.ReactNode;
+  subhead?: React.ReactNode;
   /**
    Заголовок
    */
@@ -47,7 +47,7 @@ export interface ContentCardProps
  * @see https://vkcom.github.io/VKUI/#/ContentCard
  */
 export const ContentCard = ({
-  subtitle,
+  subhead,
   header,
   headerComponent = 'span',
   text,
@@ -111,9 +111,9 @@ export const ContentCard = ({
           />
         )}
         <div className={styles.body}>
-          {hasReactNode(subtitle) && (
-            <Caption className={classNames(styles.text, styles.subtitle)} weight="1" level="3" caps>
-              {subtitle}
+          {hasReactNode(subhead) && (
+            <Caption className={classNames(styles.text, styles.subhead)} weight="1" level="3" caps>
+              {subhead}
             </Caption>
           )}
           {hasReactNode(header) && (

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

@@ -21,7 +21,7 @@
   - `referrerPolicy`,
   - `sizes`,
   - `useMap`,
-- внутренний `Tappable` получает все остальные свойства (кроме `subtitle`, `header`, `text` и `caption`).
+- внутренний `Tappable` получает все остальные свойства (кроме `subhead`, `header`, `text` и `caption`).
 
 ## Цифровая доступность (a11y)
 
@@ -39,12 +39,12 @@ const Example = () => {
         <Group>
           <CardGrid size="l">
             <ContentCard
-              subtitle="VKUI"
+              subhead="VKUI"
               header="ContentCard example"
               caption="VKUI Styleguide > Blocks > ContentCard"
             />
             <ContentCard
-              subtitle="VKUI"
+              subhead="VKUI"
               header="ContentCard example"
               caption="VKUI Styleguide > Blocks > ContentCard"
               mode="tint"
@@ -53,7 +53,7 @@ const Example = () => {
               onClick={() => {}}
               src="https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
               alt="Picture of brown and gray mountains under blue sky during daytime photo"
-              subtitle="unsplash"
+              subhead="unsplash"
               header="brown and gray mountains under blue sky during daytime photo"
               text="Mountain changji"
               caption="Photo by Siyuan on Unsplash"
@@ -62,7 +62,7 @@ const Example = () => {
             <ContentCard
               src="https://images.unsplash.com/photo-1603928726698-a015a1015d0e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80"
               alt="Picture of person's left hand with pink paint"
-              subtitle="unsplash"
+              subhead="unsplash"
               header="Person's left hand with pink paint"
               text="Five hours of makeup and paint to achieve the human anatomy photoshoot. Thank you Steph and Shay. See more and official credit on @jawfox.photography."
               caption="Photo by Alexander Jawfox on Unsplash"

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

@@ -23,7 +23,7 @@ export const Playground: Story = {
         return (
           <ContentCard
             key={index}
-            subtitle="ALBUM"
+            subhead="ALBUM"
             header="Halsey – Badlands"
             caption="Blue Vinyl · EU · 2015"
             text="Badlands is the story about dreams and cruel reality..."