feat(ContentCard): rename typography props

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

@@ -8,11 +8,15 @@ const App = () => {
         subtitle="VKUI"
         header="ContentCard example"
         caption="VKUI Styleguide > Blocks > ContentCard"
+        text="Badlands is the story about dreams and cruel reality..."
+        headerComponent="h4"
       />
       <ContentCard
         subtitle={"VKUI"}
-        header="ContentCard example"
-        caption="VKUI Styleguide > Blocks > ContentCard"
+        header={"ContentCard example"}
+        caption={"VKUI Styleguide > Blocks > ContentCard"}
+        text={"Badlands is the story about dreams and cruel reality..."}
+        headerComponent="h4"
       />
     </React.Fragment>
   );

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

@@ -8,14 +8,18 @@ const App = () => {
   return (
     (<React.Fragment>
       <ContentCard
-        subhead="VKUI"
-        header="ContentCard example"
+        overTitle="VKUI"
+        title="ContentCard example"
         caption="VKUI Styleguide > Blocks > ContentCard"
+        description="Badlands is the story about dreams and cruel reality..."
+        titleComponent="h4"
       />
       <ContentCard
-        subhead={"VKUI"}
-        header="ContentCard example"
-        caption="VKUI Styleguide > Blocks > ContentCard"
+        overTitle={"VKUI"}
+        title={"ContentCard example"}
+        caption={"VKUI Styleguide > Blocks > ContentCard"}
+        description={"Badlands is the story about dreams and cruel reality..."}
+        titleComponent="h4"
       />
     </React.Fragment>)
   );

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

@@ -11,7 +11,12 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   const { localName } = getImportInfo(j, file, 'ContentCard', alias);
 
   if (localName) {
-    renameProp(j, source, localName, { subtitle: 'subhead' });
+    renameProp(j, source, localName, {
+      subtitle: 'overTitle',
+      header: 'title',
+      text: 'description',
+      headerComponent: 'titleComponent',
+    });
   }
 
   return source.toSource();

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

@@ -7,9 +7,9 @@ export const ContentCardPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          subhead: ['Album'],
-          header: ['Halsey – Badlands'],
-          text: [
+          overTitle: ['Album'],
+          title: ['Halsey – Badlands'],
+          description: [
             'Badlands is the story about dreams and cruel reality, about opportunities and insurmountable obstacles, about love and broken hearts.',
           ],
           caption: ['Blue Vinyl · EU · 2015'],

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

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

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

@@ -20,9 +20,9 @@ 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',
-    subhead: 'unsplash',
-    header: 'brown and gray mountains under blue sky during daytime photo',
-    text: 'Mountain changji',
+    overTitle: 'unsplash',
+    title: 'brown and gray mountains under blue sky during daytime photo',
+    description: 'Mountain changji',
     caption: 'Photo by Siyuan on Unsplash',
     maxHeight: 150,
   },

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

@@ -5,8 +5,8 @@ import { ContentCard, type ContentCardProps } from './ContentCard';
 
 const ContentCardTest = (props: ContentCardProps) => (
   <ContentCard
-    subhead="VKUI"
-    header="ContentCard example"
+    overTitle="VKUI"
+    title="ContentCard example"
     caption="VKUI Styleguide > Blocks > ContentCard"
     {...props}
     data-testid="card"
@@ -18,7 +18,7 @@ const img = () => card().querySelector('img');
 describe('ContentCard', () => {
   baselineComponent((props) => (
     <CardGrid>
-      <ContentCard src="/image.png" {...props} text="ContentCard" />
+      <ContentCard src="/image.png" {...props} description="ContentCard" />
     </CardGrid>
   ));
 
@@ -59,13 +59,13 @@ describe('ContentCard', () => {
     expect(el.getAttribute('aria-disabled')).toBeNull();
   });
 
-  it('changes header tag with headerComponent prop', () => {
+  it('changes title tag with titleComponent prop', () => {
     const { rerender } = render(<ContentCardTest />);
 
     // по умолчанию span
     expect(screen.getByText('ContentCard example').tagName.toLowerCase()).toMatch('span');
 
-    rerender(<ContentCardTest headerComponent="h4" />);
+    rerender(<ContentCardTest titleComponent="h4" />);
     expect(screen.getByText('ContentCard example').tagName.toLowerCase()).toMatch('h4');
   });
 });

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

@@ -13,25 +13,25 @@ import styles from './ContentCard.module.css';
 export interface ContentCardProps
   extends HasRootRef<HTMLDivElement>,
     HasComponent,
-    Omit<TappableProps, 'getRootRef' | 'crossOrigin'>,
+    Omit<TappableProps, 'getRootRef' | 'crossOrigin' | 'title'>,
     Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,
     HasRef<HTMLImageElement> {
   /**
    Текст над заголовком
    */
-  subhead?: React.ReactNode;
+  overTitle?: React.ReactNode;
   /**
    Заголовок
    */
-  header?: React.ReactNode;
+  title?: React.ReactNode;
   /**
    Позволяет поменять тег используемый для заголовка
    */
-  headerComponent?: React.ElementType;
+  titleComponent?: React.ElementType;
   /**
    Текст
    */
-  text?: React.ReactNode;
+  description?: React.ReactNode;
   /**
    Нижний текст
    */
@@ -47,10 +47,10 @@ export interface ContentCardProps
  * @see https://vkcom.github.io/VKUI/#/ContentCard
  */
 export const ContentCard = ({
-  subhead,
-  header,
-  headerComponent = 'span',
-  text,
+  overTitle,
+  title,
+  titleComponent = 'span',
+  description,
   caption,
   // card props
   className,
@@ -111,17 +111,22 @@ export const ContentCard = ({
           />
         )}
         <div className={styles.body}>
-          {hasReactNode(subhead) && (
-            <Caption className={classNames(styles.text, styles.subhead)} weight="1" level="3" caps>
-              {subhead}
+          {hasReactNode(overTitle) && (
+            <Caption
+              className={classNames(styles.text, styles.overTitle)}
+              weight="1"
+              level="3"
+              caps
+            >
+              {overTitle}
             </Caption>
           )}
-          {hasReactNode(header) && (
-            <Headline className={styles.text} weight="2" level="1" Component={headerComponent}>
-              {header}
+          {hasReactNode(title) && (
+            <Headline className={styles.text} weight="2" level="1" Component={titleComponent}>
+              {title}
             </Headline>
           )}
-          {hasReactNode(text) && <Text className={styles.text}>{text}</Text>}
+          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}
           {hasReactNode(caption) && (
             <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>
           )}

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

@@ -27,7 +27,7 @@
 
 - По умолчанию используется тег `"li"` для повышения доступности компонента. Вы можете прокинуть необходимый вам тег через prop `Component`.
   Ссылки на источники: [статья про доступность карточек](https://inclusive-components.design/cards/).
-- Вы также можете переопределить тэг для отображения заголовка с помощью параметра `headerComponent`. По умолчанию используется `"span"`
+- Вы также можете переопределить тэг для отображения заголовка с помощью параметра `titleComponent`. По умолчанию используется `"span"`
 - При использовании картинки в компоненте, не забывайте про альтернативный текст для нее. Вы можете прокинуть его с помощью параметра `alt`
 
 ```jsx
@@ -39,32 +39,32 @@ const Example = () => {
         <Group>
           <CardGrid size="l">
             <ContentCard
-              subhead="VKUI"
-              header="ContentCard example"
+              overTitle="VKUI"
+              title="ContentCard example"
               caption="VKUI Styleguide > Blocks > ContentCard"
             />
             <ContentCard
-              subhead="VKUI"
-              header="ContentCard example"
+              overTitle="VKUI"
+              title="ContentCard example"
               caption="VKUI Styleguide > Blocks > ContentCard"
               mode="tint"
             />
             <ContentCard
               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"
-              subhead="unsplash"
-              header="brown and gray mountains under blue sky during daytime photo"
-              text="Mountain changji"
+              overTitle="unsplash"
+              title="brown and gray mountains under blue sky during daytime photo"
+              description="Mountain changji"
               caption="Photo by Siyuan on Unsplash"
               maxHeight={150}
             />
             <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"
-              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."
+              overTitle="unsplash"
+              title="Person's left hand with pink paint"
+              description="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"
               maxHeight={500}
             />

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

@@ -3,17 +3,18 @@
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 const halsey = {
-  subtitle: 'ALBUM',
-  header: 'Halsey – Badlands⁣',
+  overTitle: 'ALBUM',
+  title: 'Halsey – Badlands⁣',
   caption: 'Blue Vinyl · EU · 2015⁣',
-  text: 'Badlands is the story about dreams and cruel reality...',
+  description: 'Badlands is the story about dreams and cruel reality...',
 };
 
 const lorde = {
-  subtitle: 'ALBUM',
-  header: 'Lorde – Melodrama',
+  overTitle: 'ALBUM',
+  title: 'Lorde – Melodrama',
   caption: 'Blue Vinyl · EU · 2018⁣',
-  text: 'Lorde captures emotions like none other. Her second album is a masterful study of being a young woman, a sleek and humid pop record full of grief and hedonism, crafted with the utmost care and wisdom.',
+  description:
+    'Lorde captures emotions like none other. Her second album is a masterful study of being a young woman, a sleek and humid pop record full of grief and hedonism, crafted with the utmost care and wisdom.',
 };
 
 const GapSelectValues = [

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

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