From eb09ae5d786df42dc53de6454a0822669f0eed0e Mon Sep 17 00:00:00 2001 From: Calvin Yau Date: Tue, 21 Jan 2025 00:51:08 -0800 Subject: [PATCH] feat: Add img component for light and dark src --- .../CodecovAICommands/CodecovAICommands.tsx | 10 ++- .../GitHubActions/TokenStep.tsx | 19 ++++-- .../FailedTestsTab/CodecovCLI/CodecovCLI.tsx | 12 ++-- .../GitHubActions/GitHubActions.tsx | 12 ++-- src/ui/LightDarkImg/LightDarkImg.test.tsx | 67 +++++++++++++++++++ src/ui/LightDarkImg/LightDarkImg.tsx | 26 +++++++ 6 files changed, 117 insertions(+), 29 deletions(-) create mode 100644 src/ui/LightDarkImg/LightDarkImg.test.tsx create mode 100644 src/ui/LightDarkImg/LightDarkImg.tsx diff --git a/src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx b/src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx index bbf960a44b..49ef996680 100644 --- a/src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx +++ b/src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx @@ -1,13 +1,10 @@ import darkModeImage from 'assets/codecovAI/pr-review-example-dark-mode.png' import lightModeImage from 'assets/codecovAI/pr-review-example-light-mode.png' -import { Theme, useThemeContext } from 'shared/ThemeContext' import { Card } from 'ui/Card' import { ExpandableSection } from 'ui/ExpandableSection' +import LightDarkImg from 'ui/LightDarkImg' const CodecovAICommands: React.FC = () => { - const { theme } = useThemeContext() - const prReviewExampleSource = - theme === Theme.DARK ? darkModeImage : lightModeImage return (
@@ -34,10 +31,11 @@ const CodecovAICommands: React.FC = () => {

- codecov pr review example diff --git a/src/pages/RepoPage/CoverageOnboarding/GitHubActions/TokenStep.tsx b/src/pages/RepoPage/CoverageOnboarding/GitHubActions/TokenStep.tsx index 848419af0a..f492abb630 100644 --- a/src/pages/RepoPage/CoverageOnboarding/GitHubActions/TokenStep.tsx +++ b/src/pages/RepoPage/CoverageOnboarding/GitHubActions/TokenStep.tsx @@ -16,12 +16,12 @@ import { useRepo } from 'services/repo' import { useUploadTokenRequired } from 'services/uploadTokenRequired' import { useIsCurrentUserAnAdmin } from 'services/user' import { Provider } from 'shared/api/helpers' -import { Theme, useThemeContext } from 'shared/ThemeContext' import A from 'ui/A' import Button from 'ui/Button' import { Card } from 'ui/Card' import { CodeSnippet } from 'ui/CodeSnippet' import { ExpandableSection } from 'ui/ExpandableSection' +import LightDarkImg from 'ui/LightDarkImg' import { RadioTileGroup } from 'ui/RadioTileGroup' export const TOKEN_OPTIONS = { @@ -53,11 +53,6 @@ function GitHubOrgSecretExample({ uploadToken, owner, }: SecretGHExampleProps) { - const { theme } = useThemeContext() - const isDarkMode = theme === Theme.DARK - const orgSecretImg = isDarkMode ? orgSecretDark : orgSecretLight - const repoSecretImg = isDarkMode ? repoSecretDark : repoSecretLight - return ( <>

@@ -94,7 +89,7 @@ function GitHubOrgSecretExample({

- { */} + diff --git a/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx b/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx index 782a80cbdf..f653d997e2 100644 --- a/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx +++ b/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx @@ -1,11 +1,11 @@ import testsPRComment from 'assets/svg/onboardingTests/testsPRComment.svg' import testsPRCommentDark from 'assets/svg/onboardingTests/testsPRCommentDark.svg' import testsRunning from 'assets/svg/onboardingTests/testsRunning.svg' -import { Theme, useThemeContext } from 'shared/ThemeContext' import A from 'ui/A' import { Card } from 'ui/Card' import { CodeSnippet } from 'ui/CodeSnippet' import { ExpandableSection } from 'ui/ExpandableSection/ExpandableSection' +import LightDarkImg from 'ui/LightDarkImg' import { FrameworkTabsCard } from '../FrameworkTabsCard' @@ -110,11 +110,6 @@ function Step4() { } function Step5() { - const { theme } = useThemeContext() - - const testPRsImageSource = - theme === Theme.LIGHT ? testsPRComment : testsPRCommentDark - return (
@@ -141,10 +136,11 @@ function Step5() {

- Tests in PR comment diff --git a/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx b/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx index d72e3f2813..60423a9931 100644 --- a/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx +++ b/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx @@ -1,11 +1,11 @@ import testsPRComment from 'assets/svg/onboardingTests/testsPRComment.svg' import testsPRCommentDark from 'assets/svg/onboardingTests/testsPRCommentDark.svg' import testsRunning from 'assets/svg/onboardingTests/testsRunning.svg' -import { Theme, useThemeContext } from 'shared/ThemeContext' import A from 'ui/A' import { Card } from 'ui/Card' import { CodeSnippet } from 'ui/CodeSnippet' import { ExpandableSection } from 'ui/ExpandableSection/ExpandableSection' +import LightDarkImg from 'ui/LightDarkImg' import { FrameworkTabsCard } from '../FrameworkTabsCard' @@ -103,11 +103,6 @@ function Step2() { } function Step3() { - const { theme } = useThemeContext() - - const testPRsImageSource = - theme === Theme.LIGHT ? testsPRComment : testsPRCommentDark - return (
@@ -134,10 +129,11 @@ function Step3() {

- Tests in PR comment diff --git a/src/ui/LightDarkImg/LightDarkImg.test.tsx b/src/ui/LightDarkImg/LightDarkImg.test.tsx new file mode 100644 index 0000000000..bb2b9fb634 --- /dev/null +++ b/src/ui/LightDarkImg/LightDarkImg.test.tsx @@ -0,0 +1,67 @@ +import { render, screen } from '@testing-library/react' +import React from 'react' +import { describe, expect, it, vi } from 'vitest' + +import { Theme, ThemeContext } from 'shared/ThemeContext/ThemeContext' + +import LightDarkImg from './LightDarkImg' + +const wrapper = (theme: Theme) => { + return ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ) + } +} + +describe('LightDarkImg', () => { + const mockProps = { + src: '/light-image.png', + darkSrc: '/dark-image.png', + alt: 'Test image', + } + + it('renders with light source in light mode', () => { + render(, { wrapper: wrapper(Theme.LIGHT) }) + + const img = screen.getByAltText('Test image') + expect(img).toBeInTheDocument() + expect(img).toHaveAttribute('src', '/light-image.png') + }) + + it('renders with dark source in dark mode', () => { + render(, { wrapper: wrapper(Theme.DARK) }) + + const img = screen.getByAltText('Test image') + expect(img).toBeInTheDocument() + expect(img).toHaveAttribute('src', '/dark-image.png') + }) + + it('falls back to light source when dark source is not provided', () => { + const propsWithoutDark = { + src: '/light-image.png', + alt: 'Test image', + } + + render(, { + wrapper: wrapper(Theme.DARK), + }) + + const img = screen.getByAltText('Test image') + expect(img).toBeInTheDocument() + expect(img).toHaveAttribute('src', '/light-image.png') + }) + + it('passes through additional props to img element', () => { + render( + , + { wrapper: wrapper(Theme.LIGHT) } + ) + + const img = screen.getByAltText('Test image') + expect(img).toHaveClass('w-10') + expect(img).toHaveAttribute('data-testid', 'test-img') + }) +}) diff --git a/src/ui/LightDarkImg/LightDarkImg.tsx b/src/ui/LightDarkImg/LightDarkImg.tsx new file mode 100644 index 0000000000..1bf103e248 --- /dev/null +++ b/src/ui/LightDarkImg/LightDarkImg.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +import { Theme, useThemeContext } from 'shared/ThemeContext' + +export interface LightDarkImgSrcProps { + alt: string + src: string + darkSrc?: string +} + +type LightDarkImgProps = Omit< + React.ImgHTMLAttributes, + 'alt' | 'src' +> & + LightDarkImgSrcProps + +function LightDarkImg({ src, darkSrc, alt, ...props }: LightDarkImgProps) { + const { theme } = useThemeContext() + const isDarkMode = theme === Theme.DARK + + return ( + {alt} + ) +} + +export default LightDarkImg