From 9a3dd0f2962579870d65de827f7b6745dbaeb730 Mon Sep 17 00:00:00 2001 From: Radu-Cristian Popa Date: Mon, 12 Feb 2024 09:32:03 +0200 Subject: [PATCH 1/5] Add button variants --- src/components/button.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/button.tsx b/src/components/button.tsx index 4566fc04..6d6f75a8 100644 --- a/src/components/button.tsx +++ b/src/components/button.tsx @@ -16,9 +16,11 @@ const buttonVariants = cva( variant: { default: 'bg-button-base text-white hover:bg-button-base-hover', destructive: 'bg-error text-error hover:bg-error-hover', + ghost: '', }, size: { default: 'py-4 px-6 font-medium', + icon: 'h-6 w-6', }, fullWidth: { true: 'w-full', From acfac01ad6964bcb44edc8fffb3baaada94771ff Mon Sep 17 00:00:00 2001 From: Radu-Cristian Popa Date: Mon, 12 Feb 2024 09:32:18 +0200 Subject: [PATCH 2/5] Update CSS vars --- src/popup/index.css | 1 + tailwind.config.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/popup/index.css b/src/popup/index.css index ea53da12..8bd1f96f 100644 --- a/src/popup/index.css +++ b/src/popup/index.css @@ -14,6 +14,7 @@ /* Background colors */ --bg-primary: 59 130 246; + --bg-nav-active: 226 232 240; --bg-error: 254 226 226; --bg-error-hover: 254 202 202; --bg-button-base: 86 183 181; diff --git a/tailwind.config.ts b/tailwind.config.ts index f44ecc34..2b9443c6 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -21,6 +21,7 @@ module.exports = { backgroundColor: { primary: 'rgb(var(--bg-primary) / )', error: 'rgb(var(--bg-error) / )', + 'nav-active': 'rgb(var(--bg-nav-active) / )', 'error-hover': 'rgb(var(--bg-error-hover) / )', 'button-base': 'rgb(var(--bg-button-base) / )', 'button-base-hover': 'rgb(var(--bg-button-base-hover) / )', From 9e0a7339142c67297a5838ee642e1d50324b7798 Mon Sep 17 00:00:00 2001 From: Radu-Cristian Popa Date: Mon, 12 Feb 2024 09:32:35 +0200 Subject: [PATCH 3/5] Add component and tests --- src/components/__tests__/code.test.tsx | 41 ++++++++++++++++++++ src/components/code.tsx | 53 ++++++++++++++++++++++++++ src/components/icons.tsx | 32 ++++++++++++++++ 3 files changed, 126 insertions(+) create mode 100644 src/components/__tests__/code.test.tsx create mode 100644 src/components/code.tsx diff --git a/src/components/__tests__/code.test.tsx b/src/components/__tests__/code.test.tsx new file mode 100644 index 00000000..5b522f8b --- /dev/null +++ b/src/components/__tests__/code.test.tsx @@ -0,0 +1,41 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ +import { fireEvent, render } from '@testing-library/react' +import React from 'react' + +import { Code } from '../code' + +describe('Code', () => { + // beforeAll(() => { + // ;(navigator as any).clipboard = { + // writeText: jest.fn(), + // } + // }) + // + // afterAll(() => { + // jest.restoreAllMocks() + // }) + + it('should render the code component', () => { + const { queryByRole, container } = render() + const code = container.querySelector('code') + + expect(code).toBeInTheDocument() + expect(code).toHaveTextContent('test') + expect(queryByRole('button')).toHaveAttribute('aria-label', 'copy') + }) + + it('calls clipboard.writeText with the correct value', () => { + Object.assign(navigator, { + clipboard: { + writeText: jest.fn(), + }, + }) + + const { getByRole } = render() + const copyButton = getByRole('button') + expect(copyButton).toBeInTheDocument() + + fireEvent.click(copyButton) + expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test') + }) +}) diff --git a/src/components/code.tsx b/src/components/code.tsx new file mode 100644 index 00000000..9f1ae83a --- /dev/null +++ b/src/components/code.tsx @@ -0,0 +1,53 @@ +import React from 'react' + +import { cn } from '@/utils/cn' + +import { Button } from './button' +import { CheckIcon, ClipboardIcon } from './icons' + +interface CodeProps extends React.HTMLAttributes { + value: string +} + +export const Code = ({ value, className, ...props }: CodeProps) => { + return ( +
+ {value} + +
+ ) +} + +interface CopyButtonProps extends React.HTMLAttributes { + value: string +} + +const CopyButton = ({ value, ...props }: CopyButtonProps) => { + const [hasCopied, setHasCopied] = React.useState(false) + + React.useEffect(() => { + setTimeout(() => { + setHasCopied(false) + }, 2000) + }, [hasCopied]) + + return ( + + ) +} diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 11950a58..351d5e11 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -93,3 +93,35 @@ export const DollarSign = (props: React.SVGProps) => { ) } + +export const ClipboardIcon = (props: React.SVGProps) => { + return ( + + + + ) +} + +export const CheckIcon = (props: React.SVGProps) => { + return ( + + + + ) +} From ed57e312debbfcb0f0dec0ad83b6baa780e4bc46 Mon Sep 17 00:00:00 2001 From: Radu-Cristian Popa Date: Mon, 12 Feb 2024 09:35:26 +0200 Subject: [PATCH 4/5] Remove comments --- src/components/__tests__/code.test.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/components/__tests__/code.test.tsx b/src/components/__tests__/code.test.tsx index 5b522f8b..12f3bd1a 100644 --- a/src/components/__tests__/code.test.tsx +++ b/src/components/__tests__/code.test.tsx @@ -1,20 +1,9 @@ -/* eslint-disable @typescript-eslint/ban-ts-comment */ import { fireEvent, render } from '@testing-library/react' import React from 'react' import { Code } from '../code' describe('Code', () => { - // beforeAll(() => { - // ;(navigator as any).clipboard = { - // writeText: jest.fn(), - // } - // }) - // - // afterAll(() => { - // jest.restoreAllMocks() - // }) - it('should render the code component', () => { const { queryByRole, container } = render() const code = container.querySelector('code') From 4c297adc567177b0028c4bad1a1a90d9abd39cb8 Mon Sep 17 00:00:00 2001 From: Radu-Cristian Popa Date: Tue, 13 Feb 2024 06:35:34 +0200 Subject: [PATCH 5/5] Address feedback and fix stylings --- src/components/code.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/code.tsx b/src/components/code.tsx index 9f1ae83a..e82b0d17 100644 --- a/src/components/code.tsx +++ b/src/components/code.tsx @@ -13,7 +13,7 @@ export const Code = ({ value, className, ...props }: CodeProps) => { return (
@@ -31,9 +31,11 @@ const CopyButton = ({ value, ...props }: CopyButtonProps) => { const [hasCopied, setHasCopied] = React.useState(false) React.useEffect(() => { - setTimeout(() => { - setHasCopied(false) - }, 2000) + if (hasCopied === true) { + setTimeout(() => { + setHasCopied(false) + }, 2000) + } }, [hasCopied]) return ( @@ -42,7 +44,7 @@ const CopyButton = ({ value, ...props }: CopyButtonProps) => { aria-label="copy" variant="ghost" size="icon" - className="text-primary" + className="text-primary rounded-sm" onClick={() => { navigator.clipboard.writeText(value) setHasCopied(true)