chore: Update package version to 1.0.179 and improve Accordion component

Author: agjs

package.json

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

src/Components/Accordion/Accordion.stories.tsx

@@ -21,7 +21,7 @@ export default meta;
 const dummySections = Array(5)
   .fill(0)
   .map((_, index) => ({
-    id: index,
+    id: Math.floor(Math.random() * 1000000),
     title: faker.lorem.words(Math.floor(Math.random() * 10) + 1),
     description:
       index % 2 === 0
@@ -32,7 +32,7 @@ const dummySections = Array(5)
     items: Array(Math.floor(Math.random() * 5) + 1)
       .fill(0)
       .map((__, index) => ({
-        id: index,
+        id: Math.floor(Math.random() * 1000000),
         title: faker.lorem.words(Math.floor(Math.random() * 10) + 1),
         order: index
       }))

src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -11,15 +11,15 @@ exports[`Accordion component > renders correctly 1`] = `
     >
       <h3
         aria-expanded="true"
-        class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-text-primary-text-color yl-p-4 yl-bg-primary-text-color/5"
+        class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-p-4 yl-bg-primary-text-color/5 yl-text-primary-text-color"
         role="button"
         tabindex="0"
       >
         <div
           class="yl-flex yl-flex-col yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base"
         >
           <svg
-            class="yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary"
+            class="yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary hover:yl-fill-primary"
             data-testid="icon-expand-less"
             fill="currentColor"
             viewBox="0 0 24 24"
@@ -62,15 +62,15 @@ exports[`Accordion component > renders correctly 1`] = `
     >
       <h3
         aria-expanded="false"
-        class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-text-primary-text-color yl-p-4"
+        class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-p-4 yl-text-primary-text-color"
         role="button"
         tabindex="0"
       >
         <div
           class="yl-flex yl-flex-col yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base"
         >
           <svg
-            class="yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary"
+            class="yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary hover:yl-fill-primary"
             data-testid="icon-expand-more"
             fill="currentColor"
             viewBox="0 0 24 24"

src/Components/Accordion/index.tsx

@@ -27,6 +27,11 @@ const Accordion: FC<IAccordionProps> = ({
   const [selectedItemId, setSelectedItemId] = useState<
     number | null | undefined
   >(selectedId);
+
+  const [selectedSectionId, setSelectedSectionId] = useState<
+    number | null | undefined
+  >(selectedId);
+
   const [draggedId, setDraggedId] = useState<number | null>(null);
   const [draggedOverId, setDraggedOverId] = useState<number | null>(null);
   const [hoveredId, setHoveredId] = useState<number | null>(null);
@@ -98,10 +103,18 @@ const Accordion: FC<IAccordionProps> = ({
             role='presentation'
           >
             <h3
+              onClick={() => {
+                setSelectedSectionId(section.id);
+              }}
               className={classNames(
-                "yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-text-primary-text-color yl-p-4",
+                "yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-p-4",
                 sectionTitleClassName,
-                { "yl-bg-primary-text-color/5": expanded.includes(section.id) }
+                {
+                  "yl-bg-primary-text-color/5": expanded.includes(section.id),
+                  "yl-text-primary-text-color":
+                    selectedSectionId !== section.id,
+                  "yl-text-primary": selectedSectionId === section.id
+                }
               )}
               onKeyDown={e =>
                 ["Enter", " "].includes(e.key) && toggleExpand(section.id)
@@ -118,13 +131,21 @@ 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
-                    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'
+                    onClick={e => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      toggleExpand(section.id);
+                    }}
+                    className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary 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'
+                    onClick={e => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      toggleExpand(section.id);
+                    }}
+                    className='yl-absolute yl-right-2 yl-w-6 yl-cursor-pointer yl-fill-primary hover:yl-fill-primary'
                   />
                 )}
                 {section.title}
@@ -168,6 +189,7 @@ const Accordion: FC<IAccordionProps> = ({
                   onSectionItemClick?.(item);
                   onSelected?.(item);
                   setSelectedItemId(item.id);
+                  setSelectedSectionId(section.id);
                 }}
               />
             )}