fix: ignore combinations of lead and small

nl-design-system · Oct 16, 2024 · 1e67440 · 1e67440
1 parent 5d2e835
commit 1e67440
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/.changeset/curvy-phones-itch.md 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
@@ -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
@@ -38,17 +38,21 @@ 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
         {...restProps}
         ref={ref}
         className={clsx(
           'utrecht-paragraph',
-          isLead && 'utrecht-paragraph--lead',
-          isSmall && 'utrecht-paragraph--small',
+          isLead && `utrecht-paragraph--lead`,
+          isSmall && `utrecht-paragraph--small`,
           className,
         )}
       >