chore: Bump package version to 1.0.178 and update Accordion component

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.177",
+  "version": "1.0.178",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Accordion/Accordion.stories.tsx

@@ -18,7 +18,7 @@ const meta = {
 
 export default meta;
 
-const dummySections = Array(2)
+const dummySections = Array(5)
   .fill(0)
   .map((_, index) => ({
     id: index,

src/Components/Accordion/Accordion.test.tsx

@@ -68,7 +68,7 @@ describe("Accordion component", () => {
       />
     );
 
-    fireEvent.click(screen.getByText("Section 1"));
+    fireEvent.click(screen.getByTestId("icon-expand-less"));
     expect(setExpanded).toHaveBeenCalledWith([]);
   });
 

src/Components/Accordion/index.tsx

@@ -103,7 +103,6 @@ const Accordion: FC<IAccordionProps> = ({
                 sectionTitleClassName,
                 { "yl-bg-primary-text-color/5": expanded.includes(section.id) }
               )}
-              onClick={() => toggleExpand(section.id)}
               onKeyDown={e =>
                 ["Enter", " "].includes(e.key) && toggleExpand(section.id)
               }
@@ -118,9 +117,15 @@ const Accordion: FC<IAccordionProps> = ({
               )}
               <div className='yl-flex yl-flex-col yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base'>
                 {expanded.includes(section.id) ? (
-                  <IconExpandLess className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
+                  <IconExpandLess
+                    onClick={() => toggleExpand(section.id)}
+                    className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary'
+                  />
                 ) : (
-                  <IconExpandMore className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
+                  <IconExpandMore
+                    onClick={() => toggleExpand(section.id)}
+                    className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary'
+                  />
                 )}
                 {section.title}
                 {section.description && (