From ccb624635142bde31b301a1bfcc19e6d37594c19 Mon Sep 17 00:00:00 2001 From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com> Date: Tue, 1 Oct 2024 18:07:27 +0300 Subject: [PATCH] feat(ContentCard): rename prop subtitle -> subhead (#7694) --- .../content-card/basic.input.tsx | 19 +++++++++++++++ .../__snapshots__/content-card.ts.snap | 23 +++++++++++++++++++ .../transforms/v7/__tests__/content-card.ts | 12 ++++++++++ .../src/transforms/v7/content-card.ts | 18 +++++++++++++++ .../ContentCard.e2e-playground.tsx | 2 +- .../ContentCard/ContentCard.module.css | 2 +- .../ContentCard/ContentCard.stories.tsx | 2 +- .../ContentCard/ContentCard.test.tsx | 2 +- .../components/ContentCard/ContentCard.tsx | 10 ++++---- .../vkui/src/components/ContentCard/Readme.md | 10 ++++---- ...ntentcard-android-chromium-dark-1-snap.png | 4 ++-- ...tentcard-android-chromium-light-1-snap.png | 4 ++-- .../contentcard-ios-webkit-dark-1-snap.png | 4 ++-- .../contentcard-ios-webkit-light-1-snap.png | 4 ++-- ...contentcard-vkcom-chromium-dark-1-snap.png | 4 ++-- ...ontentcard-vkcom-chromium-light-1-snap.png | 4 ++-- .../contentcard-vkcom-firefox-dark-1-snap.png | 4 ++-- ...contentcard-vkcom-firefox-light-1-snap.png | 4 ++-- .../contentcard-vkcom-webkit-dark-1-snap.png | 4 ++-- .../contentcard-vkcom-webkit-light-1-snap.png | 4 ++-- .../SimpleGrid/SimpleGrid.stories.tsx | 2 +- 21 files changed, 107 insertions(+), 35 deletions(-) create mode 100644 packages/codemods/src/transforms/v7/__testfixtures__/content-card/basic.input.tsx create mode 100644 packages/codemods/src/transforms/v7/__tests__/__snapshots__/content-card.ts.snap create mode 100644 packages/codemods/src/transforms/v7/__tests__/content-card.ts create mode 100644 packages/codemods/src/transforms/v7/content-card.ts diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/content-card/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/content-card/basic.input.tsx new file mode 100644 index 0000000000..8f8c42d4c6 --- /dev/null +++ b/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 ( + + + + + ); +}; diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/content-card.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/content-card.ts.snap new file mode 100644 index 0000000000..d5464ddc3c --- /dev/null +++ b/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 ( + ( + + + ) + ); +};" +`; diff --git a/packages/codemods/src/transforms/v7/__tests__/content-card.ts b/packages/codemods/src/transforms/v7/__tests__/content-card.ts new file mode 100644 index 0000000000..278a5446b1 --- /dev/null +++ b/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}`), + ); +}); diff --git a/packages/codemods/src/transforms/v7/content-card.ts b/packages/codemods/src/transforms/v7/content-card.ts new file mode 100644 index 0000000000..28f015a488 --- /dev/null +++ b/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(); +} diff --git a/packages/vkui/src/components/ContentCard/ContentCard.e2e-playground.tsx b/packages/vkui/src/components/ContentCard/ContentCard.e2e-playground.tsx index d8bcc209a6..9a23f7cc3f 100644 --- a/packages/vkui/src/components/ContentCard/ContentCard.e2e-playground.tsx +++ b/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.', diff --git a/packages/vkui/src/components/ContentCard/ContentCard.module.css b/packages/vkui/src/components/ContentCard/ContentCard.module.css index f61236f617..b52cb97105 100644 --- a/packages/vkui/src/components/ContentCard/ContentCard.module.css +++ b/packages/vkui/src/components/ContentCard/ContentCard.module.css @@ -28,6 +28,6 @@ } .caption, -.subtitle { +.subhead { color: var(--vkui--color_text_secondary); } diff --git a/packages/vkui/src/components/ContentCard/ContentCard.stories.tsx b/packages/vkui/src/components/ContentCard/ContentCard.stories.tsx index 9fbb79134f..76b2bc7fef 100644 --- a/packages/vkui/src/components/ContentCard/ContentCard.stories.tsx +++ b/packages/vkui/src/components/ContentCard/ContentCard.stories.tsx @@ -20,7 +20,7 @@ type Story = StoryObj; 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', diff --git a/packages/vkui/src/components/ContentCard/ContentCard.test.tsx b/packages/vkui/src/components/ContentCard/ContentCard.test.tsx index 8a29e873f4..d781662d7d 100644 --- a/packages/vkui/src/components/ContentCard/ContentCard.test.tsx +++ b/packages/vkui/src/components/ContentCard/ContentCard.test.tsx @@ -5,7 +5,7 @@ import { ContentCard, type ContentCardProps } from './ContentCard'; const ContentCardTest = (props: ContentCardProps) => ( )}
- {hasReactNode(subtitle) && ( - - {subtitle} + {hasReactNode(subhead) && ( + + {subhead} )} {hasReactNode(header) && ( diff --git a/packages/vkui/src/components/ContentCard/Readme.md b/packages/vkui/src/components/ContentCard/Readme.md index 3eb9c9d666..a359d9fa38 100644 --- a/packages/vkui/src/components/ContentCard/Readme.md +++ b/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 = () => { { 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 = () => {