From 1e67440f973156e1cf9ea08188b05cd79ca9f118 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Wed, 16 Oct 2024 18:51:36 +0200
Subject: [PATCH] fix: ignore combinations of lead and small

---
 .changeset/curvy-phones-itch.md               |  5 +++
 .../src/Paragraph.test.tsx                    | 34 +++++++++----------
 .../component-library-react/src/Paragraph.tsx | 12 ++++---
 3 files changed, 29 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/curvy-phones-itch.md

diff --git a/.changeset/curvy-phones-itch.md b/.changeset/curvy-phones-itch.md
new file mode 100644
index 00000000000..e66482fc8cd
--- /dev/null
+++ b/.changeset/curvy-phones-itch.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": major
+---
+
+Ignore combinations of `lead` and `small` appearances for paragraph via deprecated boolean properties.
diff --git a/packages/component-library-react/src/Paragraph.test.tsx b/packages/component-library-react/src/Paragraph.test.tsx
index b282f725cc8..57aa98e5841 100644
--- a/packages/component-library-react/src/Paragraph.test.tsx
+++ b/packages/component-library-react/src/Paragraph.test.tsx
@@ -104,6 +104,22 @@ describe('Paragraph', () => {
   });
 
   describe('deprecated', () => {
+    it('ignores combinations of lead and small', () => {
+      const { container } = render(
+        <>
+          <Paragraph lead small />
+          <Paragraph appearance="lead" small />
+          <Paragraph appearance="small" lead />
+        </>,
+      );
+
+      const leadParagraph = container.querySelector('.utrecht-paragraph--lead');
+      const smallParagraph = container.querySelector('.utrecht-paragraph--lead');
+
+      expect(leadParagraph).not.toBeInTheDocument();
+      expect(smallParagraph).not.toBeInTheDocument();
+    });
+
     it('has a lead paragraph variant with a `lead` flag', () => {
       const { container } = render(<Paragraph lead />);
 
@@ -119,24 +135,6 @@ describe('Paragraph', () => {
 
       expect(leadParagraph).toHaveClass('utrecht-paragraph--small');
     });
-
-    it('favors `appearance="lead"` over deprecated equivalent API', () => {
-      const { container } = render(<Paragraph appearance="lead" small />);
-
-      const leadParagraph = container.querySelector(':only-child');
-
-      expect(leadParagraph).toHaveClass('utrecht-paragraph--lead');
-      expect(leadParagraph).not.toHaveClass('utrecht-paragraph--small');
-    });
-
-    it('favors `appearance="small"` over deprecated equivalent API', () => {
-      const { container } = render(<Paragraph appearance="small" lead />);
-
-      const leadParagraph = container.querySelector(':only-child');
-
-      expect(leadParagraph).toHaveClass('utrecht-paragraph--small');
-      expect(leadParagraph).not.toHaveClass('utrecht-paragraph--lead');
-    });
   });
 
   describe('appearance type guard', () => {
diff --git a/packages/component-library-react/src/Paragraph.tsx b/packages/component-library-react/src/Paragraph.tsx
index 27628984ce2..a7d61237d32 100644
--- a/packages/component-library-react/src/Paragraph.tsx
+++ b/packages/component-library-react/src/Paragraph.tsx
@@ -38,8 +38,12 @@ export const Paragraph = forwardRef(
     { children, className, lead, small, appearance, ...restProps }: PropsWithChildren<ParagraphProps>,
     ref: ForwardedRef<HTMLParagraphElement>,
   ) => {
-    const isLead = appearance === 'lead' || (lead && appearance !== 'small');
-    const isSmall = appearance === 'small' || (small && appearance !== 'lead');
+    let isLead = appearance === 'lead' || !!lead;
+    let isSmall = appearance === 'small' || !!small;
+
+    // Ignore combinations of `lead` and `small`
+    isLead = isLead !== isSmall ? isLead : false;
+    isSmall = isSmall !== isLead ? isSmall : false;
 
     return (
       <p
@@ -47,8 +51,8 @@ export const Paragraph = forwardRef(
         ref={ref}
         className={clsx(
           'utrecht-paragraph',
-          isLead && 'utrecht-paragraph--lead',
-          isSmall && 'utrecht-paragraph--small',
+          isLead && `utrecht-paragraph--lead`,
+          isSmall && `utrecht-paragraph--small`,
           className,
         )}
       >