fix(DetailsCard): expand card on label click

livechat · Jul 30, 2024 · eeefe79 · eeefe79
1 parent bef3c88
commit eeefe79
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/packages/react-components/src/components/DetailsCard/DetailsCard.module.scss b/packages/react-components/src/components/DetailsCard/DetailsCard.module.scss
@@ -38,6 +38,10 @@ $min-card-height: 72px;
     overflow: hidden;
     color: var(--content-basic-primary);
 
+    &:hover {
+      cursor: pointer;
+    }
+
     &--hide {
       transition:
         opacity var(--transition-duration-fast-1) ease-out,

diff --git a/packages/react-components/src/components/DetailsCard/DetailsCard.spec.tsx b/packages/react-components/src/components/DetailsCard/DetailsCard.spec.tsx
@@ -65,7 +65,7 @@ describe('<DetailsCard> component', () => {
     expect(label).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('should call onClick handler on label click', () => {
+  it('should call onClick handler on label button click', () => {
     const handler = vi.fn();
     const { getByRole } = renderComponent({
       ...defaultProps,
@@ -87,4 +87,21 @@ describe('<DetailsCard> component', () => {
     expect(getByText('Left node')).toBeInTheDocument();
     expect(getByText('Right node')).toBeInTheDocument();
   });
+
+  it('should not call onClick handler if external interactive element is clicked', () => {
+    const handler = vi.fn();
+    const { getByRole, getByText } = renderComponent({
+      ...defaultProps,
+      onClick: handler,
+      leftNode: <input />,
+      rightNode: <span>text</span>,
+    });
+    const input = getByRole('textbox');
+    const text = getByText('text');
+
+    userEvent.click(input);
+    expect(handler).toHaveBeenCalledTimes(0);
+    userEvent.click(text);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/react-components/src/components/DetailsCard/DetailsCard.tsx b/packages/react-components/src/components/DetailsCard/DetailsCard.tsx
@@ -81,6 +81,19 @@ export const DetailsCard: React.FC<IDetailsCardProps> = ({
     onClick?.();
   };
 
+  const handleLabelClick = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    const target = e.target as HTMLElement;
+    const targetTagName = target.tagName.toLowerCase();
+    const nonInteractiveTags = ['input', 'button', 'select', 'textarea', 'a'];
+
+    if (!nonInteractiveTags.includes(targetTagName)) {
+      setIsOpen((prevValue) => !prevValue);
+      onClick?.();
+    }
+  };
+
   React.useEffect(() => {
     const hasIOSupport = !!window.IntersectionObserver;
 
@@ -109,6 +122,7 @@ export const DetailsCard: React.FC<IDetailsCardProps> = ({
         aria-expanded={isOpen}
         aria-hidden={isLabelHidden}
         data-testid="details-card-label"
+        onClick={handleLabelClick}
       >
         <div
           className={cx(