gatsby-core-theme 44.4.41 → 44.4.42

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [44.4.42](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.41...v44.4.42) (2025-08-29)
+
+
+### Bug Fixes
+
+* outside click ([8b88022](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/8b88022dafe14a4c7c7d3d8efe08207a76659724))
+* test collapse ([a5dc747](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/a5dc7471eae5df4ab4b3eda3e91856a2e728476c))
+* test coverage ([bbd1138](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/bbd1138c1c668e745923917ddc5b08c5d994f64d))
+* test outside click ([c616f66](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/c616f66192927bc53366f5ede49827614dcdf847))
+* voting ([2f2eb5c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/2f2eb5c696d96c591af536a81f45bc7d4484e632))
+
+
+* Merge branch 'collapse-outside-click' into 'master' ([ade0483](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/ade0483aef0a470638e1b3132e11c850db0662b2))
+
 ## [44.4.41](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.40...v44.4.41) (2025-08-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.4.41",
+  "version": "44.4.42",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/collapse/collapse.test.js

@@ -1,50 +1,137 @@
 /* eslint-disable no-underscore-dangle */
-
 import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Collapse from '.';
 
 describe('Collapse Component', () => {
-  test('Render', () => {
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+    delete HTMLElement.prototype.scrollHeight;
+  });
+
+  const setup = (props = {}) =>
+    render(
+      <Collapse
+        buttonText="Toggle"
+        contentText="Test Content"
+        {...props}
+      />
+    );
+
+  test('renders with button and string content', () => {
+    const { getByText } = setup();
+    expect(getByText('Toggle')).toBeInTheDocument();
+    expect(getByText('Test Content')).toBeInTheDocument();
+  });
+
+  test('renders with React element as contentText', () => {
+    const { getByText } = render(
+      <Collapse
+        buttonText="Toggle"
+        contentText={<p>JSX Content</p>}
+      />
+    );
+    expect(getByText('JSX Content')).toBeInTheDocument();
+  });
+
+  test('opens when initOpen is true', async () => {
+    const scrollHeightMock = 200;
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeightMock,
+    });
+
     const { container } = render(
-      <Collapse buttonText="Open" contentText="Content Text" initOpen />
+      <Collapse
+        buttonText="Toggle"
+        contentText="Test Content"
+        initOpen
+        onlyMobile
+      />
     );
 
-    const button = container.querySelector('button');
-    const content = container.querySelector('div.content');
+    const contentDiv = container.querySelector('div[style]');
+    expect(contentDiv).toBeInTheDocument();
 
-    expect(button.innerHTML).toBe('Open');
-    expect(content.innerHTML).toBe('Content Text');
+    await waitFor(() => {
+      expect(contentDiv.style.maxHeight).toBe(`${scrollHeightMock}px`);
+    });
   });
 
-  test('Open collapse', () => {
-    const { container } = render(<Collapse buttonText="Open" contentText="Content Text" />);
+  test('toggles open/close on click', () => {
+    const scrollHeightMock = 300;
+
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeightMock,
+    });
+
+    const { container, getByText } = setup({ onlyMobile: true });
+
+    const contentDiv = container.querySelector('div[style]');
+    expect(contentDiv).not.toBeNull();
+
+    const button = getByText('Toggle');
 
-    const button = container.querySelector('button');
-    expect(button.classList.contains('active')).toBeFalsy();
     fireEvent.click(button);
-    // jest does not render the component, hence testing the actual layout cannot be done due to the collapse using scrollHeight.
+    expect(contentDiv.style.maxHeight).toBe(`${scrollHeightMock}px`);
+
+    fireEvent.click(button);
+    expect(['0', '0px']).toContain(contentDiv.style.maxHeight);
   });
 
-  test('Open collapse with different initial height', () => {
-    const { container } = render(
-      <Collapse buttonText="Open" maxHeight={20} contentText="Content Text" />
-    );
+  test('renders correctly with onlyMobile and onlyDesktop props', () => {
+    const { getByText } = setup({ onlyMobile: true });
+    expect(getByText('Toggle')).toBeInTheDocument();
 
-    const button = container.querySelector('button');
-    fireEvent.click(button);
-    expect(button.classList.contains('active')).toBeFalsy();
+    cleanup();
+
+    const { getByText: getByText2 } = setup({ onlyDesktop: true });
+    expect(getByText2('Toggle')).toBeInTheDocument();
   });
 
-  test('Only Mobile', () => {
+  test('closes on outside click when closeOnOutsideClick is true', async () => {
+    const scrollHeightMock = 100;
+
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeightMock,
+    });
+
     const { container } = render(
-      <Collapse buttonText="Open" contentText="Content Text" onlyMobile />
+      <div>
+        <Collapse
+          buttonText="Toggle"
+          contentText="Test Content"
+          initOpen
+          closeOnOutsideClick
+          onlyMobile
+        />
+        <div data-testid="outside">Outside</div>
+      </div>
     );
 
-    expect(container.querySelector('button')).toBeTruthy();
+    const contentDiv = container.querySelector('div[style]');
+    expect(contentDiv).not.toBeNull();
+    expect(contentDiv.style.maxHeight).toBe(`${scrollHeightMock}px`);
+
+    const outside = container.querySelector('[data-testid="outside"]');
+    fireEvent.mouseDown(outside);
+
+    await waitFor(() => {
+      expect(['0', '0px']).toContain(contentDiv.style.maxHeight);
+    });
+  });
+
+  test('does not apply maxHeight when onlyMobile and onlyDesktop are false', () => {
+    const { container } = setup({ initOpen: true });
+
+    const divs = container.querySelectorAll('div');
+    const contentDiv = Array.from(divs).find(div =>
+      div.innerHTML.includes('Test Content')
+    );
+    expect(contentDiv.style.maxHeight).toBe('');
   });
-});
-afterEach(() => {
-  cleanup();
 });

package/src/components/atoms/collapse/index.js

@@ -10,9 +10,11 @@ const Collapse = ({
   onlyDesktop = false,
   initOpen = false,
   maxHeight = 0,
+  closeOnOutsideClick = false, 
 }) => {
   const [maxHeightStyle, setMaxHeightStyle] = useState(maxHeight);
   const contentRef = useRef(React.createRef());
+  const containerRef = useRef(null); 
 
   useEffect(() => {
     if (initOpen) {
@@ -20,6 +22,22 @@ const Collapse = ({
     }
   }, [initOpen]);
 
+
+  useEffect(() => {
+    if (!closeOnOutsideClick || maxHeightStyle === 0) return;
+
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setMaxHeightStyle(0);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [closeOnOutsideClick, maxHeightStyle]);
+
   const clickHandler = () => {
     if (maxHeightStyle === 0) {
       setMaxHeightStyle(contentRef.current.scrollHeight);
@@ -29,7 +47,10 @@ const Collapse = ({
   };
 
   return (
-    <div className={styles?.collapseContainer || ''}>
+    <div
+      ref={containerRef} 
+      className={styles?.collapseContainer || ''}
+    >
       <div className={maxHeightStyle !== 0 ? styles?.active || '' : ''}>
         <button
           type="button"
@@ -74,6 +95,7 @@ Collapse.propTypes = {
   onlyDesktop: PropTypes.bool,
   initOpen: PropTypes.bool,
   maxHeight: PropTypes.number,
+  closeOnOutsideClick: PropTypes.bool,
 };
 
 export default Collapse;

package/src/components/molecules/comment/index.js

@@ -97,11 +97,11 @@ const Comment = ({
                                 }} 
                                 aria-label='Like Button' 
                                 type='button' 
-                                className={`${styles.buttonGroup} ${styles.left} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_down' && styles.disabled || ''}`}
+                                className={`${styles.buttonGroup} ${styles.left} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_up' && styles.disabled || ''}`}
                                 disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
                                 >
                                 <LazyImage className={styles.buttonGroupIcon} src='/images/like.svg' />
-                                <span>{likes}</span>
+                                <span>{currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_down' ? likes+1 : likes}</span>
                             </button>
                             <button 
                                 onClick={async () => {
@@ -110,11 +110,11 @@ const Comment = ({
                                 }}
                                 aria-label='Dislike Button' 
                                 type='button' 
-                                className={`${styles.buttonGroup} ${styles.right} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_up' && styles.disabled || ''}`}
+                                className={`${styles.buttonGroup} ${styles.right} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_down' && styles.disabled || ''}`}
                                 disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
                                 >
                                 <LazyImage className={styles.buttonGroupIcon} src='/images/dislike.svg' />
-                                <span>{dislikes}</span>
+                                <span>{currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_down' ? dislikes+1 : dislikes}</span>
                             </button>
                         </>
                     )}