Add property textClassName (#3)

* feat(copytext): add textClassname property * test: adding test for textClassName
matheusrocha89 · Jan 12, 2025 · 11d8cdc · 11d8cdc
1 parent 6f33552
commit 11d8cdc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/CopyText/CopyText.test.tsx b/src/CopyText/CopyText.test.tsx
@@ -57,6 +57,11 @@ describe("CopyText", () => {
     expect(screen.getByText("Copied!")).toBeInTheDocument();
   });
 
+  it("should apply textClassName to the text element", () => {
+    render(<CopyText text="Hello" textClassName="custom-text" />);
+    expect(screen.getByText("Hello")).toHaveClass("custom-text");
+  });
+
   describe("behavior", () => {
     it("should copy the text when the button is clicked", async () => {
       render(<CopyText text="Let's copy text" />);

diff --git a/src/CopyText/CopyText.tsx b/src/CopyText/CopyText.tsx
@@ -12,6 +12,7 @@ type CopyTextProps = {
   copied?: boolean;
   onClick?: () => void;
   text: string;
+  textClassName?: string;
 };
 
 const CopyText = ({
@@ -23,6 +24,7 @@ const CopyText = ({
   showIcon = true,
   copiedButtonLabel = "Copied",
   copyButtonLabel = "Copy",
+  textClassName,
 }: CopyTextProps) => {
   const copyText = async () => {
     await navigator.clipboard.writeText(text);
@@ -31,7 +33,7 @@ const CopyText = ({
 
   return (
     <span className={cx(styles.wrapper, className)}>
-      {text}
+      <span className={textClassName}>{text}</span>
       <button className={cx(styles.button, buttonClassName)} onClick={copyText}>
         {copied ? (
           <>